/*
 * The administrator panel: a DESKTOP design (sidebar + wide content, tables) that turns into a MOBILE one under 1024 px
 * (top bar + bottom bar, tables become cards). Same light green brand as the driver app (tokens.css / components.css).
 * Here 1rem = 10px on desktop (html.admin) and scales a little on a phone.
 */

body.admin-body{min-height:100vh}
#sa-root{min-height:100vh}

.sa{display:grid;grid-template-columns:27rem minmax(0,1fr);min-height:100vh}

/* ---------------- sidebar (desktop) ---------------- */
.sa-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--outline);padding:2rem 1.4rem 1.6rem;overflow:auto;box-shadow:.4rem 0 2rem -1rem rgba(127,156,136,.5)}
.sa-brand{display:flex;flex-direction:column;align-items:flex-start;padding:.4rem 1rem 1.8rem}
.sa-brand img{width:15rem;height:auto}
.sa-brand small{margin-top:.6rem;font-weight:600;font-size:1.1rem;letter-spacing:.12rem;text-transform:uppercase;color:var(--text-lo)}
.sa-nav{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem}
.sa-nav a,.sa-side .linkrow{position:relative;display:flex;align-items:center;gap:1.2rem;height:4.6rem;padding:0 1.4rem;border-radius:1.4rem;font-weight:600;font-size:1.5rem;color:var(--text-mid);transition:background .2s,color .2s,transform .15s var(--ease)}
.sa-nav a .mi,.sa-side .linkrow .mi{font-size:2.3rem}
.sa-nav a:hover,.sa-side .linkrow:hover{background:var(--surface-hi);color:var(--text-hi)}
.sa-nav a.on{background:var(--gradient);color:#fff;box-shadow:0 .8rem 1.6rem -.6rem rgba(22,163,74,.6)}
.sa-nav a .badge{margin-left:auto}
.sa-nav .sep{height:1px;background:var(--outline);margin:1rem 0}
.sa-side .foot{margin-top:auto;padding-top:1.4rem}
.sa-side .foot .linkrow{width:100%;text-align:left}
.sa-side .foot .linkrow.danger{color:var(--coral)}
.sa-side .who{display:flex;align-items:center;gap:1.2rem;padding:1.2rem;margin-bottom:1rem;border-radius:1.6rem;background:var(--surface-hi)}
.sa-side .who .avatar{--s:4.4rem;padding:.2rem}
.sa-side .who b{display:block;font-weight:600;font-size:1.4rem}
.sa-side .who small{font-size:1.1rem;color:var(--text-lo)}

/* ---------------- main ---------------- */
.sa-main{min-width:0;display:flex;flex-direction:column}
.sa-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.4rem;padding:1.8rem 3rem 1.4rem;background:linear-gradient(180deg,var(--bg) 70%,rgba(243,248,244,0))}
.sa-top h1{font-weight:800;font-size:2.8rem;line-height:3.4rem;letter-spacing:-.03rem}
.sa-top .sub{font-size:1.3rem;color:var(--text-mid);margin-top:.2rem}
.sa-top .grow{min-width:0}
.sa-top .tools{display:flex;align-items:center;gap:1rem}
.sa-content{padding:.4rem 3rem 4rem;width:100%;max-width:140rem}
.sa-content>*+*{margin-top:2rem}

/* ---------------- panels, stat tiles ---------------- */
.sa-panel{background:var(--surface);border:1px solid var(--outline);border-radius:2.2rem;box-shadow:0 .2rem .8rem rgba(127,156,136,.28),0 .6rem 1.6rem -.8rem rgba(127,156,136,.25);overflow:hidden}
.sa-panel>header{display:flex;align-items:center;gap:1.2rem;padding:1.8rem 2.2rem;border-bottom:1px solid var(--outline)}
.sa-panel>header h2{flex:1;font-weight:700;font-size:1.8rem}
.sa-panel>header .mi{font-size:2.2rem;color:var(--taxi)}
.sa-panel .pad{padding:2rem 2.2rem}
.sa-panel.flush .pad{padding:0}
.sa-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:1.4rem}
.sa-stat{display:flex;align-items:center;gap:1.4rem;padding:1.8rem;border-radius:2.2rem;background:var(--surface);border:1px solid var(--outline);box-shadow:0 .2rem .8rem rgba(127,156,136,.25);text-align:left;transition:transform .16s var(--ease),box-shadow .2s}
a.sa-stat:hover,button.sa-stat:hover{transform:translateY(-.2rem);box-shadow:0 .8rem 2rem -.6rem rgba(127,156,136,.45)}
.sa-stat .tile{flex:none;width:5.2rem;height:5.2rem;border-radius:1.6rem;display:flex;align-items:center;justify-content:center}
.sa-stat .tile .mi{font-size:2.8rem}
.sa-stat b{display:block;font-weight:800;font-size:2.8rem;line-height:3.2rem;white-space:nowrap}
.sa-stat span.l{display:block;margin-top:.2rem;font-size:1.3rem;color:var(--text-mid)}
.sa-banner{display:flex;align-items:center;gap:1.6rem;padding:1.8rem 2.2rem;border-radius:2.2rem;color:#fff;background:linear-gradient(135deg,#F59E0B,#E11D48);box-shadow:0 1.2rem 2.4rem -.8rem rgba(225,29,72,.5);cursor:pointer}
.sa-banner .mi{font-size:3.4rem}
.sa-banner b{display:block;font-weight:700;font-size:1.8rem}
.sa-banner span{font-size:1.3rem;opacity:.92}
.sa-banner .grow{flex:1}
.sa-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(36rem,1fr));gap:2rem}
.sa-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));gap:1.4rem}
.sa-menu a{display:flex;align-items:center;gap:1.4rem;padding:1.6rem 1.8rem;border-radius:2rem;background:var(--surface);border:1px solid var(--outline);box-shadow:0 .2rem .8rem rgba(127,156,136,.22);transition:transform .16s var(--ease)}
.sa-menu a:hover{transform:translateY(-.2rem)}
.sa-menu .tile{flex:none;width:4.6rem;height:4.6rem;border-radius:1.4rem;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--taxi)}
.sa-menu b{display:block;font-weight:600;font-size:1.6rem}
.sa-menu small{display:block;font-size:1.2rem;color:var(--text-mid)}
.sa-menu .mi.go{margin-left:auto;color:var(--text-lo)}

/* ---------------- toolbar, chips, search ---------------- */
.sa-tools{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.sa-tools .search-bar{flex:1 1 30rem;max-width:48rem;background:#fff}
.sa-tools .chips{display:flex;flex-wrap:wrap;gap:.8rem}
.sa-tools .right{margin-left:auto;display:flex;gap:1rem}

/* ---------------- tables (cards on a phone) ---------------- */
.sa-table{width:100%;border-collapse:separate;border-spacing:0}
.sa-table th{position:sticky;top:0;text-align:left;padding:1.2rem 1.6rem;font-weight:600;font-size:1.2rem;letter-spacing:.06rem;text-transform:uppercase;color:var(--text-lo);background:var(--surface-hi);border-bottom:1px solid var(--outline);white-space:nowrap}
.sa-table td{padding:1.3rem 1.6rem;border-bottom:1px solid var(--outline);font-size:1.4rem;vertical-align:middle}
.sa-table tr:last-child td{border-bottom:0}
.sa-table tbody tr{transition:background .15s}
.sa-table tbody tr.click{cursor:pointer}
.sa-table tbody tr:hover{background:rgba(228,245,234,.45)}
.sa-table td.num,.sa-table th.num{text-align:right;white-space:nowrap}
.sa-table td.actions{text-align:right;white-space:nowrap}
.sa-table td .who{display:flex;align-items:center;gap:1.2rem;min-width:0}
.sa-table td .who .avatar{--s:4.2rem;padding:.2rem}
.sa-table td .who b{display:block;font-weight:600;font-size:1.5rem}
.sa-table td .who small{display:block;font-size:1.2rem;color:var(--text-lo)}
.sa-table .route{display:flex;align-items:center;gap:.8rem;font-weight:600}
.sa-table .route .arr{color:var(--text-lo)}
.sa-table .muted{color:var(--text-lo)}
.sa-table .money{font-weight:700;white-space:nowrap}
.act-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.6rem;padding:0 1.2rem;border-radius:1.2rem;font-weight:600;font-size:1.3rem;background:var(--surface);border:1px solid var(--outline);transition:transform .15s var(--spring),background .2s}
.act-btn:hover{background:var(--surface-hi)}
.act-btn:active{transform:scale(.94)}
.act-btn .mi{font-size:1.8rem}
.act-btn.green{background:var(--green-soft);border-color:rgba(22,163,74,.3);color:var(--taxi)}
.act-btn.red{background:var(--red-soft);border-color:rgba(225,29,72,.3);color:var(--coral)}
.act-btn.blue{background:var(--blue-soft);border-color:rgba(37,99,235,.25);color:var(--sky)}
.act-btn.icon{width:3.6rem;padding:0}
.sa-more{display:flex;justify-content:center;padding:1.6rem}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));gap:0 3rem}
.kv .info-line{border-bottom:1px solid var(--outline)}

/* a dialog wider than the phone one */
.overlay .dialog.wide{max-width:64rem;text-align:left}
.overlay .dialog.wide h2{text-align:left}
.overlay .dialog.wide .d-body{text-align:left}
.overlay .dialog.wide .d-actions{justify-content:flex-end}
.overlay .dialog.wide .d-actions>*{flex:0 0 auto;min-width:14rem}

/* ---------------- the mobile bottom bar ---------------- */
.sa-bar{display:none}
.sa-mtop{display:none}

@media (max-width:1023px){
  .sa{display:block}
  .sa-side{display:none}
  .sa-top{padding:calc(var(--safe-top) + 1.2rem) 1.6rem .8rem}
  .sa-top h1{font-size:2.2rem;line-height:2.8rem}
  .sa-content{padding:.4rem 1.6rem calc(9.6rem + var(--safe-bottom))}
  .sa-content>*+*{margin-top:1.4rem}
  .sa-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-radius:2.4rem 2.4rem 0 0;box-shadow:0 -.6rem 1.8rem -.4rem rgba(127,156,136,.45);padding-bottom:var(--safe-bottom)}
  .sa-bar .track{display:flex;height:7.4rem;padding:0 .6rem}
  .sa-bar a,.sa-bar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;margin:.6rem .15rem;border-radius:1.8rem;font-size:1.05rem;font-weight:500;color:var(--text-mid);transition:background .2s,color .2s}
  .sa-bar a .mi,.sa-bar button .mi{font-size:2.5rem}
  .sa-bar a.on{background:var(--gradient);color:#fff;font-weight:700}
  .sa-bar .badge{position:absolute;top:.2rem;right:.6rem}
  .sa-stats{grid-template-columns:repeat(2,1fr);gap:1rem}
  .sa-stat{padding:1.3rem;gap:1.1rem}
  .sa-stat .tile{width:4.2rem;height:4.2rem;border-radius:1.4rem}
  .sa-stat .tile .mi{font-size:2.3rem}
  .sa-stat b{font-size:2.2rem;line-height:2.6rem}
  .sa-grid2{grid-template-columns:1fr}
  .sa-panel>header{padding:1.4rem 1.6rem}
  .sa-panel .pad{padding:1.6rem}
  .sa-tools .right{margin-left:0}
}

@media (max-width:760px){
  .sa-table thead{display:none}
  .sa-table,.sa-table tbody,.sa-table tr,.sa-table td{display:block;width:100%}
  .sa-table tr{padding:1.2rem 1.4rem;border-bottom:1px solid var(--outline)}
  .sa-table tr:last-child{border-bottom:0}
  .sa-table td{padding:.5rem 0;border:0;text-align:left!important;display:flex;align-items:center;gap:1rem;justify-content:space-between}
  .sa-table td::before{content:attr(data-label);flex:none;font-weight:500;font-size:1.1rem;letter-spacing:.04rem;text-transform:uppercase;color:var(--text-lo)}
  .sa-table td.first{display:block;padding-bottom:.8rem}
  .sa-table td.first::before{display:none}
  .sa-table td.actions{justify-content:flex-end;padding-top:.8rem}
  .sa-table td.actions::before{display:none}
  .sa-table td .who b{font-size:1.6rem}
  .overlay .dialog.wide{max-width:100%}
}
@media (min-width:1024px){
  .sa-mobile-only{display:none!important}
}
@media (max-width:1023px){
  .sa-desktop-only{display:none!important}
}