/* Approved source: дизайны/Кабинет водителя 787.dc.html and Стиль 787 - гайд.dc.html.
   Append after final-787.css. Driver presentation only; state and data remain in JS. */
body.design-787.role-driver {
  --driver-border: #e1e5ea;
  --driver-ink: #162330;
  --driver-muted: #5b646f;
  --driver-primary: #d25200;
}

body.design-787.role-driver #driver-shell {
  color: var(--driver-ink);
}

body.design-787.role-driver #driver-shell :is(.line-card, .status-card, .trip-card, .profile-summary, .news-card) {
  border: 1px solid var(--driver-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

body.design-787.role-driver #driver-shell :is(.card-list, .driver-group-passengers) {
  gap: 10px;
  min-width: 0;
}

body.design-787.role-driver #driver-shell .trip-card {
  gap: 9px;
  padding: 14px 15px;
  min-width: 0;
}

body.design-787.role-driver #driver-shell .trip-card.active {
  border-color: #b6d1ee;
  box-shadow: none;
}

body.design-787.role-driver #driver-shell .status-pill {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}

body.design-787.role-driver #driver-shell .trip-route {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

body.design-787.role-driver #driver-shell .trip-route strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-shell :is(.trip-meta, .reservation-deadline, .planned-arrival) {
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-shell .trip-meta {
  color: var(--driver-muted);
}

/* D07: expose the existing driver amount without changing price calculations. */
body.design-787.role-driver #driver-shell .driver-trip-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.design-787.role-driver #driver-shell .driver-trip-price {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--driver-ink);
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-shell .driver-trip-amount {
  font-family: var(--font-data);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

body.design-787.role-driver #driver-shell :is(.driver-trip-price-label, .driver-net-note) {
  font-size: 12px;
  line-height: 1.4;
  color: var(--driver-muted);
}

/* D08: these are section headings, not page titles. */
body.design-787.role-driver #driver-shell :is(#driver-current-orders, #driver-available-orders) > .section-heading {
  gap: 12px;
  margin: 0 0 12px;
  align-items: center;
}

body.design-787.role-driver #driver-shell :is(#driver-current-orders, #driver-available-orders) > .section-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

body.design-787.role-driver #driver-shell #refresh-driver-orders {
  min-height: 44px;
  flex-shrink: 0;
}

body.design-787.role-driver #driver-shell .reservation-deadline {
  padding: 10px 12px;
  border: 1px solid #f6d0a6;
  border-radius: 10px;
  color: #733e00;
  background: #fff2d8;
}

body.design-787.role-driver #driver-line-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body.design-787.role-driver #driver-line-status .line-online {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(150deg, #005e37, #00442d);
}

body.design-787.role-driver #driver-line-status .line-online strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

body.design-787.role-driver #driver-line-status .line-online > span {
  color: rgb(255 255 255 / 80%);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-line-status .line-dot {
  background: #77eb94;
}

body.design-787.role-driver #driver-line-status > h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

body.design-787.role-driver #driver-notification-health {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

body.design-787.role-driver #driver-notification-health.is-warning {
  border-color: #f6d0a6;
  color: #733e00;
  background: #fff2d8;
}

body.design-787.role-driver #driver-notification-health.is-ready {
  border-color: #b6dcc6;
  color: #005e37;
  background: #d9f7e5;
}

body.design-787.role-driver #driver-notification-setup {
  margin: 0;
}

body.design-787.role-driver #driver-shell .driver-group-passengers {
  padding: 12px;
  border-radius: 12px;
  background: #f3f5f8;
}

/* Group members keep separate actions and chat IDs, with room for long labels. */
body.design-787.role-driver #driver-shell .driver-group-passenger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-color: var(--driver-border);
  border-radius: 10px;
}

body.design-787.role-driver #driver-shell .driver-group-passenger > .trip-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

body.design-787.role-driver #driver-shell .trip-chat-actions > button {
  width: 100%;
}

body.design-787.role-driver #driver-shell :is(.trip-actions, .driver-order-filters, .period-presets) button {
  min-width: 0;
  min-height: 44px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}

body.design-787.role-driver #driver-shell .trip-actions button {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-shell .trip-actions > button:not(.secondary):not(.text-button) {
  color: #fff;
  background: var(--driver-primary);
  border-color: var(--driver-primary);
  box-shadow: none;
}

body.design-787.role-driver #driver-shell .planned-arrival-control > summary,
body.design-787.role-driver #driver-readiness-panel summary {
  min-height: 44px;
  padding-block: 10px;
  font-size: 13px;
  line-height: 1.5;
}

body.design-787.role-driver #driver-shell .planned-arrival-control .trip-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.design-787.role-driver #driver-shell .planned-arrival-control button {
  border-radius: 20px;
}

body.design-787.role-driver #driver-shift-metrics article,
body.design-787.role-driver #driver-shell .stats-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--driver-border);
  border-radius: 12px;
  text-align: left;
  box-shadow: none;
}

body.design-787.role-driver #driver-shift-metrics strong,
body.design-787.role-driver #driver-shell .stats-grid strong {
  font-family: var(--font-data);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #driver-shift-metrics small,
body.design-787.role-driver #driver-shell .stats-grid :is(small, span) {
  color: var(--driver-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.design-787.role-driver #driver-shell .driver-finance-final .stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}

body.design-787.role-driver #driver-shell .driver-finance-final .stats-grid > article:nth-child(4) {
  grid-column: 1 / -1;
}

body.design-787.role-driver #driver-shell .balance-hero {
  border-radius: 16px;
  padding: 17px;
}

body.design-787.role-driver #finance-balance {
  font-size: 32px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #finance-statement {
  border: 1px solid var(--driver-border);
  border-radius: 14px;
  background: #fff;
}

body.design-787.role-driver #finance-statement .statement-row {
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--driver-border);
}

body.design-787.role-driver #finance-statement .statement-row:last-child {
  border-bottom: 0;
}

body.design-787.role-driver #finance-statement .statement-row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.design-787.role-driver #finance-statement .statement-row > strong {
  font-family: var(--font-data);
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.design-787.role-driver #driver-shell input:not([type=checkbox]):not([type=radio]),
body.design-787.role-driver #driver-shell :is(select, textarea) {
  min-width: 0;
  font-size: 16px;
  border-radius: 10px;
}

body.design-787.role-driver #driver-shell :is(button, summary):focus-visible {
  outline: 2px solid #006bbb;
  outline-offset: 3px;
}

@media (max-width: 759px) {
  body.design-787.role-driver #cabinet .cabinet-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px calc(94px + env(safe-area-inset-bottom)) !important;
  }

  body.design-787.role-driver #driver-shell .stats-grid strong {
    font-size: 16px;
  }

  body.design-787.role-driver #driver-shell .trip-period-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.design-787.role-driver #driver-shell .trip-period-filter > button {
    grid-column: 1 / -1;
  }
}

@media (min-width: 760px) and (max-width: 1179px) {
  /* The approved tablet frame places available orders below the shift. */
  body.design-787.role-driver #cabinet .cabinet-main {
    width: calc(100% - 40px) !important;
    max-width: 960px !important;
    margin: 18px auto 40px !important;
  }

  body.design-787.role-driver #driver-shell .app-page[data-page=orders]:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.design-787.role-driver #driver-shell .app-page[data-page=orders] > :is(#driver-moderation, #driver-line-card, #driver-shift-metrics, #driver-current-orders, #driver-available-orders) {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
  }

  body.design-787.role-driver #driver-shell :is(button, summary),
  body.design-787.role-driver #driver-shell :is(.trip-actions, .driver-order-filters, .period-presets) button {
    min-height: 46px;
  }
}

@media (min-width: 1180px) {
  body.design-787.role-driver #driver-trip-list > .driver-order-card {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 140px) 148px;
    column-gap: 14px;
    align-items: center;
  }

  body.design-787.role-driver #driver-trip-list > .driver-order-card > .driver-trip-summary {
    grid-column: 1;
    grid-row: 1;
  }

  body.design-787.role-driver #driver-trip-list > .driver-order-card > .driver-trip-price {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  body.design-787.role-driver #driver-trip-list > .driver-order-card > .driver-order-actions {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    margin: 0;
  }

  body.design-787.role-driver #driver-trip-list > .driver-order-card > :not(.driver-trip-summary, .driver-trip-price, .driver-order-actions) {
    grid-column: 1 / -1;
  }

  body.design-787.role-driver #cabinet .cabinet-main {
    width: calc(100% - 56px) !important;
    max-width: 1384px !important;
    margin: 24px auto 40px !important;
  }

  body.design-787.role-driver #driver-shell .app-page[data-page=orders]:not([hidden]) {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important;
    gap: 14px 24px !important;
  }

  body.design-787.role-driver #driver-line-status .line-online {
    padding: 20px;
  }
}
body.design-787.role-driver .driver-order-filters{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto;scrollbar-width:thin}
body.design-787.role-driver .driver-order-filters button{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid #cbd8e3;border-radius:999px;color:#173c63;background:#fff;font-weight:650}
body.design-787.role-driver .driver-order-filters button.active{border-color:#1675ba;color:#fff;background:#1675ba}
body.design-787.role-driver .driver-document-progress{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,220px);align-items:center;gap:12px;width:100%;margin-top:10px;color:#526273;font-size:13px}
body.design-787.role-driver .driver-document-progress progress{width:100%;height:9px;accent-color:#1675ba}
body.design-787.role-driver .trip-period-presets{display:flex;gap:8px;margin:0 0 10px;overflow-x:auto}
body.design-787.role-driver .trip-period-presets button{flex:0 0 auto;min-height:40px;padding:8px 13px;border:1px solid #cbd8e3;border-radius:999px;color:#173c63;background:#fff;font-weight:650}
body.design-787.role-driver .trip-period-presets button.active{border-color:#1675ba;color:#fff;background:#1675ba}
@media(max-width:599px){body.design-787.role-driver .driver-order-filters button,body.design-787.role-driver .trip-period-presets button{min-height:44px}body.design-787.role-driver .driver-document-progress{grid-template-columns:1fr}}

/* History periods are equal controls, with no cut-off fourth option on phones. */
body.design-787.role-driver .trip-period-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
body.design-787.role-driver .trip-period-presets button{width:100%;min-width:0;min-height:44px;border-radius:8px}
@media(min-width:1100px){body.design-787.role-driver .trip-period-presets{grid-template-columns:repeat(4,130px)}}
@media(min-width:760px){
  body.design-787.role-driver #driver-trip-period{grid-template-columns:repeat(2,minmax(0,1fr)) 148px;align-items:end}
  body.design-787.role-driver #driver-trip-period>button{grid-column:auto;min-height:46px}
}

/* At 320 px, three finance cells split the rouble sign onto a separate line. */
@media(max-width:359px){
  body.design-787.role-driver #driver-shell .driver-finance-final .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.design-787.role-driver #driver-shell .driver-finance-final .stats-grid>article:nth-child(4){grid-column:auto}
}