/* mobile.css — phones and tablets (<1200px). Linked with
   media="(max-width: 1199.98px)", so desktop never downloads it.
   From the banking app's mobile.css (F35/F39): navy top bar, active pill,
   borderless cards with a soft shadow. */

:root {
  --m-radius: 16px;
  --m-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -14px rgba(15,23,42,.28);
  --m-chrome: linear-gradient(90deg, #0A1F44 0%, #112D6B 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-chrome: linear-gradient(90deg, #071430 0%, #0D2150 100%);
    --m-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 24px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --m-chrome: linear-gradient(90deg, #071430 0%, #0D2150 100%);
  --m-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 24px -14px rgba(0,0,0,.7);
}

/* Top bar in the desktop chrome's navy (banking F39). */
.app-bar { background:var(--m-chrome); color:#FFFFFF; border-bottom:0; }
.app-bar .icon-btn:hover, .app-bar .icon-btn:active { background:rgba(255,255,255,.16); }
.app-bar :focus-visible { outline-color:#FFFFFF; }

/* Bottom tab bar: lifted off the content with a shadow, no hairline. */
@media (max-width: 767.98px) {
  .nav { border-top:0; box-shadow:0 -10px 24px -16px rgba(15,23,42,.35); }
}

/* Cards: borderless with the soft banking shadow. */
.list, .card, .kpi, .filter-bar, .table-wrap {
  border-color:transparent; border-radius:var(--m-radius); box-shadow:var(--m-shadow);
}
.kpi { border-top:3px solid var(--brand); }
.kpi--alert { border-top-color:var(--warn); }
.card__head { border-bottom-color:var(--border); }
@media (max-width: 767.98px) {
  .table-wrap { box-shadow:none; }
  .data-table--stack tr { border-color:transparent; border-radius:var(--m-radius); box-shadow:var(--m-shadow); }
  .page-head__title { font-size:22px; }
}