/* AirRO Water — layout & component styles */

/* ============ App shell ============ */
/* The VIEWPORT IS LOCKED: the page itself never scrolls, so there is exactly ONE vertical
   scrollbar — on the right content pane. Previously the page scrolled AND .content had its
   own height, giving two scrollbars and making the sticky sidebar drift with the content.
   The sidebar now fills the shell and scrolls independently only if its menu is taller
   than the screen. (Print resets these — see finance.css @media print.) */
html, body { height: 100%; overflow: hidden; }
#root { height: 100%; }
.app { display: flex; height: 100vh; height: 100dvh; background: var(--canvas); overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; padding: 22px 16px;
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;                    /* fills the locked shell — never moves with the content */
  overflow-y: auto;                /* its OWN scroll, only when the menu is taller than the screen */
  overscroll-behavior: contain;    /* and it never chains its scroll anywhere else */
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.05; }
.brand-desc { font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--green-600); margin-top: 2px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--green-900); }
.brand-name span { color: var(--green-800); }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); padding: 6px 10px 6px; text-transform: uppercase; }
.nav-section + .nav-section .nav-label { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.nav-label-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; transition: color .14s; }
.nav-label-btn:hover { color: var(--green-700); }
.nav-label-btn svg { transition: transform .18s ease; }
.nav-label-btn.collapsed svg { transform: rotate(-90deg); }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 12px; font-size: 14px; font-weight: 600;
  color: var(--text-mut); transition: background .15s, color .15s; text-align: left;
}
.nav-item:hover { background: rgba(30,72,65,.06); color: var(--ink); }
.nav-item.on { background: var(--green-800); color: #fff; box-shadow: var(--shadow-sm); }
.nav-item.on svg { color: #22A7A1; }
.nav-badge { margin-left: auto; background: var(--neg); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.nav-item.on .nav-badge { background: var(--lime-500); color: var(--green-900); }

.upsell {
  margin-top: auto; background: var(--green-800); border-radius: 18px; padding: 18px;
  color: #fff; position: relative; overflow: hidden;
}
.upsell::after { content: ''; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px; border-radius: 50%; background: rgba(187,244,156,.14); }
.upsell h4 { margin: 0; font-size: 14px; font-weight: 700; }
.upsell p { margin: 6px 0 14px; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; }

/* ============ Main content ============ */
.main { flex: 1; min-width: 0; padding: 16px 16px 16px 0; height: 100%; overflow: hidden; }
/* THE single vertical scroller. No min-height: it must be free to shrink to the shell so
   its own overflow (not the page's) does the scrolling. */
.content {
  background: var(--surface); border-radius: 24px; height: 100%;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto; overscroll-behavior: contain;
}
.topbar { display: flex; align-items: center; gap: 16px; }
/* Desktop only: pin the topbar to the top of the content scroller so it stays visible
   while the body scrolls. Negative margins let it span the card's padding, so content
   passes cleanly BEHIND it instead of peeking above. (Left off on mobile — a short
   screen shouldn't spend height on a pinned header; it has the bottom nav instead.) */
@media (min-width: 861px) {
  .topbar {
    position: sticky;
    /* -22px = minus the card's padding-top. Sticky clamps to the scroller's CONTENT box,
       so top:0 would pin it 22px down and let scrolled content peek through that gap;
       the negative offset pins it flush to the card's top edge instead. The negative
       margins + matching padding let its background span the card's padding. */
    top: -22px; z-index: 20; background: var(--surface);
    margin: -22px -26px 0; padding: 22px 26px 14px;
  }
}
.topbar h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.topbar .sub { font-size: 13px; color: var(--text-mut); margin-top: 2px; }
.top-search {
  margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 16px; height: 44px; width: 320px;
}
.top-search input { border: none; outline: none; background: none; font-size: 14px; width: 100%; color: var(--ink); }
.icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; color: var(--ink); position: relative; transition: background .15s; }
.icon-circle:hover { background: var(--card-soft); }
.icon-circle .dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); border: 2px solid var(--card); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#22A7A1,#8DD3D0); display: grid; place-items: center; font-weight: 800; color: var(--green-900); font-size: 15px; }
.user-name { font-size: 14px; font-weight: 700; white-space: nowrap; }
.user-role { white-space: nowrap; }
.topbar > div:first-of-type { flex-shrink: 0; }
.user-role { font-size: 11.5px; color: var(--text-mut); }

.hamburger { display: none; }

/* ============ Atoms ============ */
.icon-btn { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--text-faint); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--card-soft); color: var(--ink); }
.link-btn { font-size: 13px; font-weight: 600; color: var(--green-800); flex-shrink: 0; }
.sec-title { white-space: nowrap; flex-shrink: 0; }
.link-btn:hover { text-decoration: underline; }
.amt-pos { color: var(--green-800); }
.amt-neg { color: var(--neg); }

.acct-card {
  background: linear-gradient(150deg,#0B7EB1 0%,#076192 55%,#054B78 100%);
  border-radius: var(--r-md); padding: 20px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 12px 28px rgba(20,48,43,.22);
}
.acct-card::after { content: ''; position: absolute; right: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(187,244,156,.16), transparent 70%); }

.quick-act { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border-radius: 12px; transition: background .15s; }
.quick-act:hover { background: var(--card-soft); }
.quick-act:hover .icon-tile { background: var(--lime-500); }

.cust-row { padding: 2px 0; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.kpi-card { padding: 18px; }

/* segmented + tabs */
.seg { display: flex; background: var(--card-soft); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { font-size: 12px; font-weight: 600; color: var(--text-mut); padding: 5px 12px; border-radius: 7px; }
.seg-btn.on { background: var(--green-800); color: #fff; }
.period-btn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--card-soft); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; }
.stat-tabs { display: flex; background: var(--card-soft); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; }
.stat-tab { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-mut); padding: 8px; border-radius: 9px; transition: all .15s; }
.stat-tab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.stat-tab .tnum { color: var(--text-faint); font-weight: 500; }
.stat-tab.on .tnum { color: var(--green-800); }

/* mini table (dashboard) */
.mini-table { margin-top: 6px; }
.mini-head, .mini-row { display: grid; grid-template-columns: minmax(0,2.4fr) .9fr 1fr 1fr; align-items: center; gap: 10px; }
.mini-head { padding: 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); }
.mini-row { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.mini-row:last-child { border-bottom: none; }
.mini-row:hover { background: var(--card-soft); border-radius: 10px; }

/* activity */
.act-row { display: flex; gap: 12px; }
.act-rail { display: flex; flex-direction: column; align-items: center; }
.act-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--mint-100); border: 2px solid var(--mint-300); flex-shrink: 0; }
.act-line { width: 2px; flex: 1; background: var(--border); margin: 2px 0; }

/* ============ Transactions ============ */
.tx-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sum-card { padding: 16px; display: flex; align-items: center; gap: 12px; }
.tx-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-search { display: flex; align-items: center; gap: 9px; background: var(--card-soft); border: 1px solid var(--border); border-radius: 11px; padding: 0 12px; height: 40px; width: 300px; }
.tx-search input { border: none; outline: none; background: none; font-size: 13.5px; width: 100%; }

.dd { position: relative; outline: none; }
.dd-btn { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); }
.dd-btn.active { border-color: var(--green-800); background: var(--mint-100); }
.dd-menu { position: absolute; top: 46px; left: 0; min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 20; max-height: 280px; overflow: auto; }
.dd-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.dd-item:hover { background: var(--card-soft); }
.dd-item.on { color: var(--green-800); font-weight: 700; }

.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--mint-100); color: var(--green-800); font-size: 12px; font-weight: 600; padding: 4px 6px 4px 11px; border-radius: 999px; }
.filter-chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--green-800); }
.filter-chip button:hover { background: rgba(30,72,65,.12); }

.tx-table { margin-top: 14px; }
.tx-row { display: grid; grid-template-columns: 36px minmax(0,2.2fr) minmax(0,1.7fr) 1.1fr 1.1fr 1.1fr .9fr; align-items: center; gap: 12px; }
.tx-head { padding: 0 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-faint); }
.tx-body { padding: 13px 8px; border-bottom: 1px solid var(--border-soft); border-radius: 10px; transition: background .12s; }
.tx-body:hover { background: var(--card-soft); }
.tx-body.sel { background: var(--mint-100); }
.tx-check { display: grid; place-items: center; }
.tx-check input { width: 16px; height: 16px; accent-color: var(--green-800); cursor: pointer; }
.sort-head { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.sort-head:hover { color: var(--ink); }
.method-pill { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text-mut); background: var(--card-soft); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }

.tx-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 12px; }
.perpage { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--card); }
.pager { display: flex; gap: 6px; }
.pg-btn { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink); display: grid; place-items: center; }
.pg-btn:hover:not(:disabled) { background: var(--card-soft); }
.pg-btn.on { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ Dashboard grid ============ */
.dash-grid { display: grid; grid-template-columns: 304px minmax(0,1fr) 348px; gap: 18px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.app-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; color: var(--text-faint); font-size: 12.5px; }
.app-footer a { color: var(--text-faint); text-decoration: none; margin-left: 18px; }
.app-footer a:hover { color: var(--ink); }

/* ============ Mobile bottom nav ============ */
.mobile-nav { display: none; }
.scrim { display: none; }
.drawer { display: none; }

/* ============ Responsive ============ */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 280px minmax(0,1fr); }
  .dash-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .tx-row { grid-template-columns: 32px minmax(0,2fr) 1.2fr 1.1fr 1fr .9fr; }
  .col-party { display: none; }
}
@media (max-width: 920px) {
  .top-search { display: none; }
  .tx-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .main { padding: 0; height: 100%; }
  /* Still exactly ONE scroller on mobile: .content owns it (height, not min-height — a
     min-height would make the page scroll too and bring the double scrollbar back).
     Bottom padding clears the fixed bottom-nav (~62px) AND the iOS home indicator. */
  .content { border-radius: 0; height: 100%; padding: calc(16px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(74px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); gap: 16px; overflow-x: hidden; }
  .hamburger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); }
  .topbar h1 { font-size: 21px; }
  .topbar .sub { display: none; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-right { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .col-id { display: none; }
  .col-date { display: none; }
  .tx-row { grid-template-columns: 30px minmax(0,2fr) 1.1fr .9fr; gap: 8px; }
  .tx-head .sort-head { font-size: 11px; }
  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  /* Each item takes an equal share so 5 (4 quick + Menu) fit any phone width. */
  .mnav { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-faint); padding: 5px 2px; border-radius: 12px; min-height: 48px; justify-content: center; }
  .mnav svg { flex-shrink: 0; }
  .mnav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav.on { color: var(--green-800); background: var(--mint-50, rgba(11,126,177,.08)); }
  .mnav.on svg { color: var(--green-800); }
  .mnav:active { background: var(--card-soft); }
  /* slide-in drawer */
  .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--canvas); z-index: 60; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)) 16px; transform: translateX(-100%); transition: transform .26s ease; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .drawer.open { transform: none; }
  /* Lock the page behind the open drawer so only the drawer scrolls. */
  /* Body no longer scrolls (the shell is locked), so freezing the background while the
     drawer is open means freezing the REAL scroller — the content pane. The drawer keeps
     its own overflow-y:auto + overscroll-behavior:contain, so it scrolls independently. */
  body.drawer-lock .content { overflow: hidden; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(20,32,29,.4); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .26s; }
  .scrim.open { opacity: 1; pointer-events: auto; }
  .tx-summary { gap: 12px; }
}
@media (max-width: 480px) {
  .tx-summary { grid-template-columns: 1fr; }
  .top-actions-extra { display: none; }
  /* Let the topbar wrap so the action cluster (lang / alerts / avatar) drops to
     its own line instead of being pushed off the right edge on narrow phones. */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar h1 { font-size: 19px; }
}