/* public/assets/mobility.css */
/* =========================================================
   MOBILITY — Transport + Rides
   Цель: привести модуль к единому UI (tokens ui/users),
   не протекая в другие разделы.
   Scope: только .transport_view и .rides_view
   ========================================================= */

/* =========================================================
   0) SAFETY BASE (локально)
   ========================================================= */
.transport_view,
.transport_view *,
.rides_view,
.rides_view *{
  box-sizing: border-box;
}

/* =========================================================
   1) TOKENS BRIDGE (единые переменные)
   ========================================================= */
.transport_view,
.rides_view{
  /* базовые токены темы */
  --m-surface: var(--surface, #fff);
  --m-border:  var(--border, rgba(229,231,235,.75));
  --m-text:    var(--text, #0f172a);
  --m-muted:   var(--muted, rgba(15,23,42,.55));
  --m-brand:   var(--theme-color, #2f4a80);

  --m-radius: 16px;
  --m-radius-sm: 14px;
  --m-shadow: 0 10px 26px rgba(15,23,42,.06);
  --m-shadow-sm: 0 6px 18px rgba(15,23,42,.06);

  --m-soft: rgba(47,74,128,.10);
  --m-soft-2: rgba(15,23,42,.04);
  --m-line: rgba(15,23,42,.08);

  color: var(--m-text);
}

/* =========================================================
   2) PAGE CONTAINER (общая ширина как users)
   ========================================================= */
.transport_view,
.rides_view{
  max-width: 980px;
  margin: 18px auto 60px;
  padding: 0 14px;
}

/* helpers (локально) */
.transport_view .text-muted,
.transport_view .muted,
.rides_view .text-muted,
.rides_view .muted{
  color: var(--m-muted);
}

.transport_view .text-center,
.rides_view .text-center{
  text-align: center;
}

/* =========================================================
   3) CARD / ALERTS / BUTTONS / INPUTS (локальные примитивы)
   ========================================================= */

/* Cards (rides использует .card/.card-body/.card-header) */
.rides_view .card,
.transport_view .card{
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
  overflow: hidden;
}

.rides_view .card-body,
.transport_view .card-body{
  padding: 14px;
  min-width: 0;
}

/* card header (нужно для show + blocks) */
.rides_view .card-header,
.transport_view .card-header{
  padding: 12px 14px;
  font-weight: 950;
  color: var(--m-text);
  border-bottom: 1px solid var(--m-line);
  background: rgba(15,23,42,.02);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap: wrap;
}

/* Alerts */
.transport_view .alert,
.rides_view .alert{
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  color: var(--m-text);
  line-height: 1.35;
  font-weight: 800;
}
.transport_view .alert-success,
.rides_view .alert-success{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.22);
  color: #14532d;
}
.transport_view .alert-danger,
.rides_view .alert-danger{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
  color: #7f1d1d;
}
.transport_view .alert-info,
.rides_view .alert-info{
  background: rgba(2,132,199,.10);
  border-color: rgba(2,132,199,.22);
  color: #0c4a6e;
}
.transport_view .alert-warning,
.rides_view .alert-warning{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.24);
  color: #7c4a00;
}

/* Buttons (bootstrap-подобные классы, но локально) */
.transport_view .btn,
.transport_view a.btn,
.transport_view button.btn,
.rides_view .btn,
.rides_view a.btn,
.rides_view button.btn{
  appearance: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border-radius: 999px;
  padding: 8px 14px;

  font-size: 14px;
  font-weight: 900;
  text-decoration:none;

  cursor:pointer;
  border: 1px solid transparent;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
  user-select:none;
  line-height:1.1;
  white-space: nowrap;

  background: rgba(15,23,42,.03);
  color: var(--m-text);

  box-sizing: border-box;
}

.transport_view .btn:active,
.rides_view .btn:active{ transform: translateY(1px); }

.transport_view .btn:focus,
.rides_view .btn:focus{ outline:none; }

.transport_view .btn:focus-visible,
.rides_view .btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(47,74,128,.12);
}

/* sizes */
.transport_view .btn.btn-sm,
.rides_view .btn.btn-sm{
  padding: 6px 12px;
  font-size: 13px;
}

.transport_view .btn.btn-block,
.rides_view .btn.btn-block{
  width: 100%;
}

/* variants */
.transport_view .btn-primary,
.rides_view .btn-primary{
  background: var(--m-brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(47,74,128,.16);
}
.transport_view .btn-primary:hover,
.rides_view .btn-primary:hover{ filter: brightness(1.02); }

.transport_view .btn-success,
.rides_view .btn-success{
  background: var(--m-brand);
  color:#fff;
  box-shadow: 0 10px 22px rgba(47,74,128,.16);
}
.transport_view .btn-success:hover,
.rides_view .btn-success:hover{ filter: brightness(1.02); }

.transport_view .btn-outline,
.rides_view .btn-outline{
  background: rgba(47,74,128,.08);
  border-color: rgba(47,74,128,.16);
  color: rgba(47,74,128,.98);
}
.transport_view .btn-outline:hover,
.rides_view .btn-outline:hover{ background: rgba(47,74,128,.12); }

.transport_view .btn-warning,
.rides_view .btn-warning{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.26);
  color: #7c4a00;
}
.transport_view .btn-warning:hover,
.rides_view .btn-warning:hover{ background: rgba(245,158,11,.22); }

.transport_view .btn-outline-danger,
.rides_view .btn-outline-danger{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
  color: #7f1d1d;
}
.transport_view .btn-outline-danger:hover,
.rides_view .btn-outline-danger:hover{ background: rgba(220,38,38,.14); }

.transport_view .btn[disabled],
.transport_view .btn:disabled,
.rides_view .btn[disabled],
.rides_view .btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inputs (как users.css, но локально) */
.transport_view input[type="text"],
.transport_view input[type="number"],
.transport_view input[type="date"],
.transport_view input[type="time"],
.transport_view input[type="datetime-local"],
.transport_view select,
.transport_view textarea,
.rides_view input[type="text"],
.rides_view input[type="number"],
.rides_view input[type="date"],
.rides_view input[type="time"],
.rides_view input[type="datetime-local"],
.rides_view select,
.rides_view textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  background: var(--m-surface);
  color: var(--m-text);
  outline: none;
}

.transport_view input:focus,
.transport_view select:focus,
.transport_view textarea:focus,
.rides_view input:focus,
.rides_view select:focus,
.rides_view textarea:focus{
  border-color: rgba(47,74,128,.45);
  box-shadow: 0 0 0 4px rgba(47,74,128,.12);
}

/* =========================================================
   4) TRANSPORT
   ========================================================= */

.transport_view{
  padding-top: 12px;
}

/* главный контейнер транспорта (своё имя, но по стилю как card) */
.transport_view .transport-card{
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 16px;
}

@media (min-width: 900px){
  .transport_view .transport-card{ padding: 18px; }
}

.transport_view .transport-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 1000;
  color: var(--m-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* filters */
.transport_view .transport-filters{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.6fr 1.2fr 1.2fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
}

/* чтобы grid-элементы нормально ужимались */
.transport_view .transport-filters > *{ min-width: 0; }

.transport_view .tf-field{ display:flex; flex-direction:column; gap:6px; }
.transport_view .tf-label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
.transport_view .tf-input,
.transport_view .tf-select{ width:100%; }

/* actions */
.transport_view .tf-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}
.transport_view .tf-actions .btn{
  width: 100%;
  min-width: 0;
}

/* chips/badges */
.route-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* ✅ FIX: номер маршрута НЕ должен переноситься по дефису */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1;

  min-width: 54px;
  padding: 6px 12px;
  border-radius: 999px;

  background:#eef2ff;
  color:#303b8f;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.transport_view .days-badge{
  display:inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.86);
  font-weight: 900;
}

.transport_view .time-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.transport_view .time-chip{
  display:inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(15,23,42,.88);
  font-weight: 900;
  font-size: 13px;
}

/* table */
.transport_view .transport-table-wrap{
  overflow:auto;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: var(--m-surface);
}

.transport_view .transport-table{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
  background: var(--m-surface);
}

.transport_view .transport-table thead th{
  text-align:left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(15,23,42,.55);
  font-weight: 950;
  background: rgba(15,23,42,.03);
  border-bottom: 1px solid rgba(15,23,42,.10);
  padding: 12px 12px;
  white-space: nowrap;
}

.transport_view .transport-table td{
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 12px 12px;
  vertical-align: top;
  color: rgba(15,23,42,.92);
  font-size: 14px;
}

.transport_view .transport-table tbody tr:hover td{
  background: rgba(47,74,128,.04);
}

.transport_view .col-num{ width:70px; }
/* ✅ FIX: первый столбец стабильный + центр */
.transport-table th.col-num,
.transport-table td.col-num{
  width: 92px;
  text-align: center;
  vertical-align: middle;
}

.transport_view .col-time{ width:380px; }
.transport_view .col-days{ width:170px; }

/* mobile cards */
.transport_view .transport-cards{ display:none; margin-top: 12px; }
.transport_view .transport-route-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--m-radius-sm);
  padding: 12px 14px;
  box-shadow: var(--m-shadow-sm);
  background: var(--m-surface);
  margin-bottom: 10px;
}

.transport_view .tr-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.transport_view .tr-route{
  color: rgba(15,23,42,.92);
  font-weight: 900;
  overflow-wrap:anywhere;
}
.transport_view .tr-arrow{ color: rgba(15,23,42,.45); margin:0 6px; }

.transport_view .tr-meta{ margin-top: 8px; }
.transport_view .tr-notes{
  margin-top: 8px;
  color: rgba(15,23,42,.65);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.transport_view .transport-pagination{ margin-top: 14px; }

/* responsive */
@media (max-width: 880px){
  .transport_view .transport-filters{ grid-template-columns: 1fr 1fr; }
  .transport_view .tf-actions{ grid-column: 1 / -1; }
}

@media (max-width: 680px){
  .transport_view .transport-filters{ grid-template-columns: 1fr; }
  .transport_view .tf-actions{ grid-template-columns: 1fr; }

  .transport_view .transport-table-wrap{ display:none; }
  .transport_view .transport-cards{ display:block; }
}

/* =========================================================
   5) RIDES
   ========================================================= */

.rides_view{
  padding-top: 12px;
}

.rides_view .rides-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rides_view .rides-header--split{
  align-items: flex-start;
}

.rides_view .rides-title{
  margin: 0;
  font-size: 22px;
  font-weight: 1000;
  color: var(--m-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

@media (max-width: 520px){
  .rides_view .rides-title{ font-size: 18px; }
}

.rides_view .rides-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* search */
.rides_view .rides-search-card{ margin: 12px 0 14px; }

.rides_view .rides-search-form{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr .9fr .6fr;
  gap: 10px;
  align-items:end;
}

.rides_view .rs-field{ display:flex; flex-direction:column; gap:6px; }
.rides_view .rs-label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
.rides_view .rs-input{ width:100%; }
.rides_view .rs-actions .btn{ width:100%; }

/* list */
.rides_view .rides-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

/* ride item layout */
.rides_view .ride-item .ride-body{
  display:flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.rides_view .ride-route{
  font-size: 15px;
  font-weight: 1000;
  color: rgba(15,23,42,.92);
}

.rides_view .ride-arrow{ margin: 0 8px; color: rgba(15,23,42,.45); }

.rides_view .ride-meta{
  margin-top: 6px;
  font-size: 13px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.rides_view .ride-dot{ color: rgba(15,23,42,.35); }

.rides_view .ride-car{
  margin-top: 6px;
  font-size: 13px;
}

.rides_view .ride-right{
  text-align: right;
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

@media (max-width: 768px){
  .rides_view .ride-right{
    text-align:left;
    min-width: 0;
    width: 100%;
  }
}

.rides_view .ride-price{
  font-size: 14px;
  color: rgba(15,23,42,.92);
}

/* pagination */
.rides_view .rides-pagination{ margin-top: 14px; }

/* utils (локально) */
.rides_view .mt-gap{ margin-top: 10px; }
.rides_view .small{ font-size: 13px; }
.rides_view .fw-strong{ font-weight: 950; }

/* show layout */
.rides_view .ride-show_layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

@media (max-width: 768px){
  .rides_view .ride-show_layout{ grid-template-columns: 1fr; }
}

.rides_view .ride-route-main{
  font-size: 18px;
  font-weight: 1000;
  color: rgba(15,23,42,.92);
}
.rides_view .ride-route-main .arrow{ margin: 0 8px; color: rgba(15,23,42,.45); }

.rides_view .ride-info{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.rides_view .ride-info-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* description */
.rides_view .ride-desc{ margin-top: 12px; }
.rides_view .ride-desc-title{ font-weight: 950; margin-bottom: 6px; }
.rides_view .ride-desc-text{
  color: rgba(15,23,42,.80);
  line-height: 1.55;
  font-weight: 700;
}

/* bookings list */
.rides_view .booking-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.rides_view .booking-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 20px rgba(15,23,42,.04);
}

.rides_view .booking-item--compact{
  padding: 10px 12px;
  border-radius: 12px;
}

.rides_view .booking-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.rides_view .booking-title{ font-weight: 950; color: rgba(15,23,42,.92); }
.rides_view .booking-meta{ margin-top: 6px; }
.rides_view .booking-points{ margin-top: 6px; }

/* forms */
.rides_view .ride-book-form{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.rides_view .field{ display:flex; flex-direction:column; gap:6px; }
.rides_view .field-label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
.rides_view .hint{
  margin-top: 8px;
  font-size: 13px;
  line-height:1.4;
  font-weight: 700;
  color: rgba(15,23,42,.60);
}

.rides_view .booking-row,
.rides_view .ride-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.rides_view .ride-actions{
  text-align: right;
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}

.rides_view .btn-row{
  display:flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 768px){
  .rides_view .ride-actions{ text-align:left; min-width: 0; width:100%; }
  .rides_view .btn-row{ justify-content: flex-start; }
}

/* create form */
.rides_view .ride-create-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rides_view .field-full{ grid-column: 1 / -1; }

.rides_view .ride-create-footer{
  grid-column: 1 / -1;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.rides_view .err-list{ margin: 8px 0 0; padding-left: 18px; }

/* badges (локально) */
.rides_view .badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rides_view .badge::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}
.rides_view .badge-success{ background: rgba(34,197,94,.10); color: #047857; border-color: rgba(34,197,94,.22); }
.rides_view .badge-warning{ background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.24); }
.rides_view .badge-danger{  background: rgba(239,68,68,.10); color: #b91c1c; border-color: rgba(239,68,68,.22); }
.rides_view .badge-primary{ background: rgba(59,130,246,.10); color: #1d4ed8; border-color: rgba(59,130,246,.22); }
.rides_view .badge-secondary{background: rgba(15,23,42,.06); color: rgba(15,23,42,.78); border-color: rgba(15,23,42,.10); }

/* когда бейдж стоит в строке с muted текстом */
.rides_view .text-muted .badge{ transform: translateY(-1px); }

/* payment UI blocks */
.rides_view .rides-pay-help{ margin-bottom: 8px; }
.rides_view .rides-pay-options{ display: flex; gap: 14px; flex-wrap: wrap; }
.rides_view .rides-pay-option{ display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 800; }
.rides_view .rides-pay-note{ margin-top: 6px; }
.rides_view .rides-pay-warn{ display:none; margin-top: 10px; }

/* show: card header helper */
.rides_view .rides-card-header{ gap:10px; }

/* pay methods */
.rides_view .rides-pay-methods{ display:flex; gap:12px; flex-wrap:wrap; }
.rides_view .rides-pay-method{ display:flex; gap:8px; align-items:center; font-weight: 800; }

.rides_view .rides-booking-hint{ margin-top: 6px; }
.rides_view .rides-book-reason{ margin-top: 6px; }
.rides_view .rides-time-extra{ margin-top: 4px; }
.rides_view .rides-time-sep{ margin-left: 10px; }

/* responsive (search/create) */
@media (max-width: 900px){
  .rides_view .rides-search-form{ grid-template-columns: 1fr 1fr; }
  .rides_view .rs-actions{ grid-column: 1 / -1; }
}

@media (max-width: 768px){
  .rides_view .rides-search-form{ grid-template-columns: 1fr; }
  .rides_view .ride-create-form{ grid-template-columns: 1fr; }
}