/* =========================================================
   TRANSPORT PERMIT
   Page-specific design
   Colors are inherited from variables.css
========================================================= */

.transport-page {
  background-color: var(--color-brand);
  background-image: url("../assets/images/pattern.svg");
  background-repeat: repeat;
  background-position: center;
  background-size: min(1024px, 150vw);
}


/* =========================================================
   SHELL
========================================================= */

.transport-shell {
  width: min(1220px, calc(100% - 48px));
  min-height: calc(100dvh - 48px);
  margin: 24px auto;
  overflow: hidden;

  background: var(--color-golden-wheat-100);
  border-radius: var(--radius-2xl);

  box-shadow: var(--shadow-lg);
}


/* =========================================================
   TOP BAR
========================================================= */

.transport-topbar {
  min-height: 76px;
  padding: 14px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  /* نفس لون الكارت الأساسي */
  color: var(--color-brand);
  background: var(--color-golden-wheat-100);

  /* بدون pattern */
  background-image: none;

  /* فصل بسيط بين الهيدر والمحتوى */
  border-bottom: 1px solid var(--color-golden-wheat-200);
}


.transport-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 9px 14px;

  border-radius: var(--radius-sm);

  font-family: var(--font-title);
  font-size: var(--text-sm);

  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}


.transport-back:hover {
  background: rgba(255, 255, 255, .11);
}


.transport-back:active {
  transform: scale(.97);
}


.transport-back-icon {
  display: grid;
  width: 32px;
  height: 32px;

  place-items: center;

  border-radius: var(--radius-sm);

  background: rgba(255, 255, 255, .10);

  font-family: Arial, sans-serif;
  font-size: 18px;
}


.transport-brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: var(--font-display-bold);
  font-size: var(--text-xl);
}


.transport-brand img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}


/* =========================================================
   MAIN
========================================================= */

.transport-main {
  padding: 34px clamp(20px, 4vw, 52px) 52px;
}


/* =========================================================
   HERO
========================================================= */

.transport-hero {
  position: relative;

  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;

  margin-bottom: 28px;
  padding: 26px 28px;

  background: var(--color-surface);

  border: 1px solid var(--color-golden-wheat-200);
  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-sm);
}


.transport-hero-icon {
  display: grid;
  width: 76px;
  height: 76px;

  place-items: center;

  background: var(--color-brand-soft);
  border-radius: var(--radius-lg);
}


.transport-hero-icon img {
  width: 46px;
  height: 46px;

  object-fit: contain;
}


.transport-hero-content {
  min-width: 0;
}


.transport-eyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--color-golden-wheat-500);

  font-family: var(--font-title);
  font-size: var(--text-xs);
}


.transport-hero h1 {
  margin: 0;

  color: var(--color-brand);

  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: var(--leading-tight);
}


.transport-hero p {
  margin: 7px 0 0;

  color: var(--color-text-muted);

  font-size: var(--text-sm);
}


.transport-hero-number {
  direction: ltr;

  color: var(--color-golden-wheat-500);

  font-family: var(--font-display-bold);
  font-size: 2.5rem;
  line-height: 1;
}


/* =========================================================
   FORM
========================================================= */

.transport-form {
  display: flex;
  flex-direction: column;
  gap: 20px;

  width: 100%;
}
/* =========================================================
   TRANSPORT INFORMATION COLUMNS
   LICENSE  = RIGHT
   DRIVER   = LEFT
========================================================= */

.transport-info-columns {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  grid-template-areas:
    "driver license";

  gap: 20px;

  width: 100%;

  direction: ltr;

  align-items: start;
}


/* =========================================================
   SECTION POSITION
========================================================= */

/* .transport-info-columns > .transport-section:first-child {
  grid-area: license;
} */

.transport-info-columns > .transport-section:nth-child(2) {
  grid-area: driver;
}


/* =========================================================
   KEEP CONTENT RTL
========================================================= */

.transport-info-columns .transport-section {
  direction: rtl;
  min-width: 0;
  height: auto;
}


/* =========================================================
   VERTICAL FIELDS
========================================================= */

.transport-info-columns .transport-fields {
  display: flex;
  flex-direction: column;

  gap: 18px;

  padding: 24px;
}


/* =========================================================
   FULL WIDTH FIELDS
========================================================= */

.transport-info-columns .transport-field {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   INPUTS
========================================================= */

.transport-info-columns .transport-input {
  min-height: 50px;
}


/* =========================================================
   MATERIALS
   KEEP FULL WIDTH
========================================================= */

.transport-form > .transport-materials-section {
  width: 100%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .transport-info-columns {
    display: flex;
    flex-direction: column;

    gap: 20px;
  }


  .transport-info-columns > .transport-section:first-child,
  .transport-info-columns > .transport-section:nth-child(2) {
    width: 100%;
  }


  .transport-info-columns .transport-fields {
    display: flex;
    flex-direction: column;

    gap: 16px;

    padding: 18px 17px 21px;
  }


  .transport-info-columns .transport-input {
    min-height: 48px;
  }

}

/* =========================================================
   SECTIONS
========================================================= */

.transport-section {
  overflow: hidden;

  padding: 0;

  background: var(--color-surface);

  border: 1px solid var(--color-golden-wheat-200);
  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-sm);
}


.transport-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 22px 24px;

  background:
    linear-gradient(
      to left,
      var(--color-golden-wheat-50),
      var(--color-surface)
    );

  border-bottom: 1px solid var(--color-golden-wheat-200);
}


.transport-section-title {
  display: flex;
  align-items: center;

  gap: 14px;

  min-width: 0;
}


.transport-section-number {
  flex: 0 0 auto;

  display: grid;
  width: 42px;
  height: 42px;

  place-items: center;

  color: var(--color-on-brand);
  background: var(--color-brand);

  border-radius: var(--radius-sm);

  direction: ltr;

  font-family: var(--font-display-bold);
  font-size: var(--text-sm);
}


.transport-section-title h2 {
  margin: 0;

  color: var(--color-brand);

  font-family: var(--font-title);
  font-size: var(--text-lg);
}


.transport-section-title p {
  margin: 3px 0 0;

  color: var(--color-text-muted);

  font-size: var(--text-xs);
}


.transport-section-header > img {
  width: 34px;
  height: 34px;

  opacity: .65;

  object-fit: contain;
}


/* =========================================================
   INPUT GRID
========================================================= */

.transport-fields {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px 24px;

  padding: 26px 24px 28px;
}


.transport-field {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 7px;
}


.transport-field label {
  display: flex;
  align-items: center;

  gap: 5px;

  color: var(--color-text);

  font-family: var(--font-title);
  font-size: var(--text-sm);
}


.transport-field label span {
  color: var(--color-danger-strong);

  font-size: var(--text-xs);
}


.transport-field small {
  padding-right: 3px;

  color: var(--color-text-faint);

  font-size: var(--text-2xs);
}


/* =========================================================
   INPUT DESIGN
========================================================= */

.transport-input {
  width: 100%;
  min-height: 48px;

  padding: 11px 14px;

  color: var(--color-text);

  background: var(--color-brand-soft);

  border:
    1px solid
    transparent;

  border-radius: var(--radius-sm);

  outline: none;

  font-family: var(--font-body);
  font-size: var(--text-sm);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}


.transport-input:hover {
  background: var(--color-brand-soft-hover);
}


.transport-input:focus {
  background: var(--color-surface);

  border-color: var(--color-brand);

  box-shadow:
    0 0 0 3px
    rgba(35, 115, 102, .10);
}


.transport-input::placeholder {
  color: var(--color-text-faint);

  font-family: var(--font-body);
}


.transport-input-number {
  direction: ltr;
  text-align: right;

  font-family: var(--font-mono);
}


.transport-input[type="date"] {
  direction: ltr;
  text-align: right;

  color-scheme: light;
}


/* =========================================================
   MATERIALS
========================================================= */

.transport-materials-section {
  overflow: visible;
}


.transport-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 40px;

  padding: 8px 15px;

  color: var(--color-brand);
  background: var(--color-brand-soft);

  border: 1px solid var(--color-pineal-100);
  border-radius: var(--radius-sm);

  cursor: pointer;

  font-family: var(--font-title);
  font-size: var(--text-xs);

  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}


.transport-add-button span {
  display: grid;
  width: 21px;
  height: 21px;

  place-items: center;

  color: var(--color-on-brand);
  background: var(--color-brand);

  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
}


.transport-add-button:hover {
  background: var(--color-brand-soft-hover);
}


.transport-add-button:active {
  transform: scale(.96);
}


/* =========================================================
   REPEATER
========================================================= */

.transport-repeater {
  padding: 24px;
}


.transport-repeater-rows {
  display: flex;
  flex-direction: column;

  gap: 14px;
}


.transport-material-row {
  display: grid;

  grid-template-columns: 42px minmax(0, 1fr) 42px;

  gap: 14px;

  align-items: center;

  padding: 16px;

  background: var(--color-surface-sunken);

  border: 1px solid var(--color-golden-wheat-200);

  border-radius: var(--radius-lg);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.transport-material-row:focus-within {
  border-color: var(--color-pineal-100);

  box-shadow:
    0 4px 18px
    rgba(6, 66, 57, .06);
}


.transport-material-index {
  display: grid;

  width: 42px;
  height: 42px;

  place-items: center;

  color: var(--color-brand);

  background: var(--color-brand-soft);

  border-radius: var(--radius-sm);

  font-family: var(--font-display-bold);
  font-size: var(--text-sm);
}


.transport-material-fields {
  display: grid;

  grid-template-columns:
    2fr
    1fr
    1fr
    1.2fr;

  gap: 12px;

  min-width: 0;
}


.transport-material-fields .transport-field {
  gap: 5px;
}


.transport-material-fields .transport-field label {
  color: var(--color-text-muted);

  font-size: var(--text-2xs);
}


.transport-material-fields .transport-input {
  min-height: 42px;

  padding: 9px 11px;

  font-size: var(--text-xs);
}


.transport-remove-button {
  display: grid;

  width: 38px;
  height: 38px;

  place-items: center;

  padding: 0;

  color: var(--color-umber-700);
  background: var(--color-umber-50);

  border: 0;
  border-radius: var(--radius-sm);

  cursor: pointer;

  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;

  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}


.transport-remove-button:hover {
  background: #d8b6bc;
}


.transport-remove-button:active {
  transform: scale(.92);
}


.transport-empty {
  padding: 28px;

  color: var(--color-text-faint);

  background: var(--color-golden-wheat-50);

  border:
    1px dashed
    var(--color-golden-wheat-300);

  border-radius: var(--radius-lg);

  text-align: center;

  font-size: var(--text-sm);
}


/* =========================================================
   ACTIONS
========================================================= */

.transport-actions {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 22px 24px;

  background: var(--color-surface);

  border:
    1px solid
    var(--color-golden-wheat-200);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-sm);
}


.transport-action-info {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.transport-action-info strong {
  color: var(--color-brand);

  font-family: var(--font-title);
  font-size: var(--text-sm);
}


.transport-action-info span {
  color: var(--color-text-muted);

  font-size: var(--text-xs);
}


.transport-action-buttons {
  display: flex;
  align-items: center;

  gap: 10px;
}


.transport-cancel-button,
.transport-submit-button {
  min-height: 46px;

  padding: 10px 20px;

  border-radius: var(--radius-sm);

  cursor: pointer;

  font-family: var(--font-title);
  font-size: var(--text-sm);

  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}


.transport-cancel-button {
  color: var(--color-text-muted);

  background: transparent;

  border: 1px solid var(--color-golden-wheat-300);
}


.transport-cancel-button:hover {
  color: var(--color-text);

  background: var(--color-golden-wheat-50);
}


.transport-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 170px;

  color: var(--color-on-brand);

  background: var(--color-brand);

  border: 1px solid var(--color-brand);

  box-shadow:
    0 5px 14px
    rgba(6, 66, 57, .12);
}


.transport-submit-button:hover {
  background: var(--color-brand-hover);

  box-shadow:
    0 7px 18px
    rgba(6, 66, 57, .16);
}


.transport-submit-button span {
  font-family: Arial, sans-serif;
  font-size: 17px;
}


.transport-cancel-button:active,
.transport-submit-button:active {
  transform: scale(.97);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .transport-shell {
    width: min(100% - 32px, 1220px);

    min-height: calc(100dvh - 32px);

    margin: 16px auto;
  }


  .transport-material-fields {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .transport-material-fields .transport-field:first-child {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .transport-page {
    padding: 0;
  }


  .transport-shell {
    width: 100%;
    min-height: 100dvh;

    margin: 0;

    border-radius: 0;
  }


  .transport-topbar {
    min-height: 68px;

    padding: 10px 16px;
  }


  .transport-brand {
    font-size: var(--text-lg);
  }


  .transport-brand img {
    width: 34px;
    height: 34px;
  }


  .transport-back {
    padding: 7px 9px;

    font-size: var(--text-xs);
  }


  .transport-back-icon {
    width: 28px;
    height: 28px;
  }


  .transport-main {
    padding: 20px 14px 32px;
  }


  .transport-hero {
    grid-template-columns: 54px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;
  }


  .transport-hero-icon {
    width: 54px;
    height: 54px;
  }


  .transport-hero-icon img {
    width: 32px;
    height: 32px;
  }


  .transport-hero h1 {
    font-size: 1.9rem;
  }


  .transport-hero p {
    font-size: var(--text-xs);
  }


  .transport-hero-number {
    display: none;
  }


  .transport-section-header {
    align-items: flex-start;

    padding: 17px;

    gap: 12px;
  }


  .transport-section-title {
    gap: 10px;
  }


  .transport-section-number {
    width: 36px;
    height: 36px;

    font-size: var(--text-xs);
  }


  .transport-section-title h2 {
    font-size: var(--text-md);
  }


  .transport-section-title p {
    font-size: 11px;
  }


  .transport-section-header > img {
    display: none;
  }


  .transport-fields {
    grid-template-columns: 1fr;

    gap: 16px;

    padding: 18px 17px 21px;
  }


  .transport-input {
    min-height: 48px;

    font-size: 16px;
  }


  .transport-materials-section .transport-section-header {
    flex-direction: column;
  }


  .transport-add-button {
    width: 100%;
  }


  .transport-repeater {
    padding: 17px;
  }


  .transport-material-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px;

    gap: 9px;

    padding: 12px;
  }


  .transport-material-index {
    width: 36px;
    height: 36px;
  }


  .transport-material-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }


  .transport-material-fields .transport-field:first-child {
    grid-column: auto;
  }


  .transport-material-fields .transport-input {
    min-height: 44px;

    font-size: 16px;
  }


  .transport-remove-button {
    width: 34px;
    height: 34px;
  }


  .transport-actions {
    flex-direction: column;
    align-items: stretch;

    padding: 18px 17px;
  }


  .transport-action-buttons {
    flex-direction: column-reverse;
  }


  .transport-cancel-button,
  .transport-submit-button {
    width: 100%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .transport-input,
  .transport-add-button,
  .transport-remove-button,
  .transport-submit-button,
  .transport-cancel-button,
  .transport-back {
    transition: none;
  }

}