/* ═══════════════════════════════════════════════════════════
   ReceiptTrack Pro — App CSS v1.0.0
   Brand: Cyan #0891B2  |  Mobile-first, dark mode, PWA
   ═══════════════════════════════════════════════════════════ */

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --color-primary:      #0891B2;
  --color-primary-dark: #0E7490;
  --color-primary-lt:   #E0F2FE;
  --color-primary-xlt:  #F0F9FF;
  --color-success:      #16A34A;
  --color-success-lt:   #DCFCE7;
  --color-warning:      #D97706;
  --color-warning-lt:   #FEF3C7;
  --color-danger:       #DC2626;
  --color-danger-lt:    #FEE2E2;
  --color-info:         #3B82F6;
  --color-info-lt:      #DBEAFE;

  --bg:           #F8FAFC;
  --bg-alt:       #F1F5F9;
  --card-bg:      #FFFFFF;
  --border:       #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary:#475569;
  --text-muted:   #94A3B8;

  --topbar-h:     60px;
  --bottom-nav-h: 68px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

  --transition: 200ms ease;
  --font:       'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --bg:           #0F172A;
  --bg-alt:       #1E293B;
  --card-bg:      #1E293B;
  --border:       #334155;
  --text-primary: #F1F5F9;
  --text-secondary:#94A3B8;
  --text-muted:   #475569;
  --color-primary-lt:  #0C4A6E;
  --color-primary-xlt: #082F49;
  --color-success-lt:  #14532D;
  --color-warning-lt:  #451A03;
  --color-danger-lt:   #450A0A;
  --color-info-lt:     #1E3A5F;
}

/* ─── Reset & Base ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  padding-top: var(--topbar-h);
  padding-bottom: var(--bottom-nav-h);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
p { color: var(--text-secondary); }
button { cursor:pointer; font-family:inherit; }
.link { color: var(--color-primary); }

/* ─── Topbar ──────────────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1rem;
  box-shadow: var(--shadow-sm);
}
.topbar__left  { display:flex; align-items:center; gap:.75rem; }
.topbar__right { display:flex; align-items:center; gap:.5rem; }
.topbar__menu-btn, .topbar__icon-btn {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent;
  border-radius:var(--radius-sm);
  color: var(--text-secondary);
  transition: background var(--transition);
}
.topbar__menu-btn:hover,.topbar__icon-btn:hover { background:var(--bg-alt); }
.topbar__brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.topbar__logo {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 2px 8px rgba(8,145,178,.3);
}
.topbar__brand-name { font-weight:700; font-size:1.05rem; color:var(--text-primary); }
.topbar__notif { position:relative; }
.topbar__badge {
  position:absolute; top:4px; right:4px;
  min-width:16px; height:16px; border-radius:8px;
  background:var(--color-danger); color:#fff;
  font-size:.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}
.topbar__avatar {
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.icon-moon { display:none; }
html[data-theme="dark"] .icon-sun  { display:none; }
html[data-theme="dark"] .icon-moon { display:block; }

/* ─── Drawer ──────────────────────────────────────────────── */
.drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  width:280px;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.drawer.open { transform: translateX(0); }
.drawer-overlay {
  display:none; position:fixed; inset:0; z-index:190;
  background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
}
.drawer-overlay.open { display:block; }

.drawer__header {
  padding:1.25rem 1rem;
  border-bottom:1px solid var(--border);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  flex-shrink:0;
}
.drawer__user { display:flex; align-items:center; gap:.75rem; }
.drawer__avatar {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.25);
  color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.drawer__user-name { color:#fff; font-weight:600; font-size:.95rem; }
.drawer__user-role { color:rgba(255,255,255,.75); font-size:.8rem; }
.drawer__nav { padding:.75rem 0; flex:1; overflow-y:auto; }
.drawer__link {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1.25rem;
  color: var(--text-secondary);
  font-size:.9rem; font-weight:500;
  text-decoration:none;
  transition: all var(--transition);
  border-left:3px solid transparent;
}
.drawer__link:hover { background:var(--bg-alt); color:var(--text-primary); text-decoration:none; }
.drawer__link.active {
  background:var(--color-primary-xlt);
  color:var(--color-primary);
  border-left-color:var(--color-primary);
  font-weight:600;
}
.drawer__link--danger { color:var(--color-danger); }
.drawer__link--danger:hover { background:var(--color-danger-lt); }
.drawer__link--disabled { color:var(--text-muted); opacity:.55; cursor:not-allowed; }
.drawer__link--disabled:hover { background:none; color:var(--text-muted); }
.drawer__link--disabled svg { color:var(--text-muted); }
.drawer__link__lock { margin-left:auto; opacity:.8; flex-shrink:0; }
.drawer__section-label {
  padding:.5rem 1.25rem .25rem;
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ─── Main Content ────────────────────────────────────────── */
.main-content { padding:1rem; max-width:960px; margin:0 auto; }
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;
}
.page-title  { font-size:1.5rem; font-weight:700; color:var(--text-primary); }
.page-subtitle { color:var(--text-muted); font-size:.85rem; margin-top:.15rem; }
.page-header__actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.card__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1rem;
  border-bottom:1px solid var(--border);
}
.card__title { font-weight:600; font-size:.95rem; color:var(--text-primary); }
.card__body  { padding:1rem; }
.card__body--flush { padding:0; }
.card--filter { padding:.875rem 1rem; }

/* ─── KPI Cards ───────────────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:.75rem; margin-bottom:1rem;
}
.kpi-grid--3 { grid-template-columns: repeat(3,1fr); }
.kpi-grid--4 { grid-template-columns: repeat(4,1fr); }
.kpi-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:.875rem 1rem;
  display:flex; align-items:center; gap:.75rem;
  box-shadow:var(--shadow-sm);
}
.kpi-card--highlight { border-color:var(--color-primary); }
.kpi-card__icon {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.kpi-card__icon--primary { background:var(--color-primary-lt); color:var(--color-primary); }
.kpi-card__icon--success { background:var(--color-success-lt); color:var(--color-success); }
.kpi-card__icon--warning { background:var(--color-warning-lt); color:var(--color-warning); }
.kpi-card__icon--danger  { background:var(--color-danger-lt);  color:var(--color-danger); }
.kpi-card__label { font-size:.75rem; color:var(--text-muted); font-weight:500; margin-bottom:.2rem; }
.kpi-card__value { font-size:1.25rem; font-weight:700; color:var(--text-primary); }
.kpi-card__sub   { font-size:.75rem; color:var(--text-muted); margin-top:.1rem; }

/* ─── Dashboard Grid ─────────────────────────────────────── */
.dashboard-grid {
  display:grid; grid-template-columns:1fr;
  gap:.75rem;
}

/* ─── List Items ─────────────────────────────────────────── */
.list-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--text-primary);
  transition:background var(--transition);
  cursor:default;
}
.list-item:last-child { border-bottom:none; }
.list-item:hover { background:var(--bg-alt); }
.list-item--clickable { cursor:pointer; }
.list-item--unread { background:var(--color-primary-xlt); }
.list-item__icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); color:var(--text-muted);
}
.list-item__icon--sm { width:32px; height:32px; border-radius:8px; }
.list-item__icon--square { background:var(--color-primary-lt); color:var(--color-primary); }
.list-item__thumb {
  width:48px; height:48px; border-radius:8px; flex-shrink:0; overflow:hidden;
  border:1px solid var(--border);
}
.list-item__thumb img { width:100%; height:100%; object-fit:cover; }
.list-item__avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.list-item__body { flex:1; min-width:0; }
.list-item__title { font-weight:500; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary); }
.list-item__sub   { font-size:.78rem; color:var(--text-muted); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item__tags  { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.3rem; }
.list-item__right { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex-shrink:0; }
.list-item__amount { font-weight:700; font-size:.95rem; color:var(--text-primary); white-space:nowrap; }
.list-item__actions { display:flex; gap:.25rem; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.2rem .55rem; border-radius:999px;
  font-size:.7rem; font-weight:600; white-space:nowrap;
  background:var(--bg-alt); color:var(--text-muted);
}
.badge--primary   { background:var(--color-primary-lt);  color:var(--color-primary); }
.badge--success   { background:var(--color-success-lt);  color:var(--color-success); }
.badge--warning   { background:var(--color-warning-lt);  color:var(--color-warning); }
.badge--danger    { background:var(--color-danger-lt);   color:var(--color-danger); }
.badge--info      { background:var(--color-info-lt);     color:var(--color-info); }
.badge--secondary { background:var(--bg-alt);            color:var(--text-muted); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:600;
  border:1.5px solid transparent;
  transition: all var(--transition);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:inherit;
}
.btn--primary {
  background:var(--color-primary); color:#fff;
  border-color:var(--color-primary);
}
.btn--primary:hover { background:var(--color-primary-dark); text-decoration:none; color:#fff; }
.btn--outline {
  background:transparent; color:var(--text-secondary);
  border-color:var(--border);
}
.btn--outline:hover { background:var(--bg-alt); color:var(--text-primary); text-decoration:none; }
.btn--danger  { background:var(--color-danger); color:#fff; border-color:var(--color-danger); }
.btn--danger:hover { opacity:.85; text-decoration:none; color:#fff; }
.btn--sm { padding:.4rem .75rem; font-size:.8rem; }
.btn--full { width:100%; justify-content:center; }

/* ─── Forms ─────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-label {
  font-size:.82rem; font-weight:600; color:var(--text-secondary);
  display:flex; justify-content:space-between; align-items:center;
}
.form-label__link { font-weight:400; color:var(--color-primary); }
.form-hint { font-size:.75rem; color:var(--text-muted); margin-top:.2rem; }
.form-control {
  padding:.6rem .875rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card-bg); color:var(--text-primary);
  font-size:.9rem; font-family:inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  width:100%;
}
.form-control:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(8,145,178,.12); }
.form-control--sm { padding:.45rem .75rem; font-size:.82rem; }
.form-control--total { font-weight:700; font-size:1rem; color:var(--color-primary); }
textarea.form-control { resize:vertical; min-height:80px; }
select.form-control { cursor:pointer; }
.form-grid {
  display:grid; grid-template-columns:1fr; gap:.875rem;
}
.form-grid--amounts { grid-template-columns:repeat(2,1fr); }
.form-actions {
  display:flex; gap:.75rem; justify-content:flex-end;
  margin-top:1rem; padding-bottom:1rem;
}
.form-group--required .form-label::after { content:" *"; color:var(--color-danger); }
.text-muted { color:var(--text-muted); font-size:.8rem; }

/* ─── Alerts ─────────────────────────────────────────────── */
.alert {
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  font-size:.875rem; margin-bottom:.875rem;
}
.alert--success { background:var(--color-success-lt); color:var(--color-success); border:1px solid currentColor; }
.alert--error   { background:var(--color-danger-lt);  color:var(--color-danger);  border:1px solid currentColor; }
.alert--warning { background:var(--color-warning-lt); color:var(--color-warning); border:1px solid currentColor; }
.alert--info    { background:var(--color-info-lt);    color:var(--color-info);    border:1px solid currentColor; }

/* ─── Flash Messages ─────────────────────────────────────── */
.flash-container { margin-bottom:1rem; }
.flash {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  margin-bottom:.5rem; font-size:.875rem; font-weight:500;
}
.flash--success { background:var(--color-success-lt); color:var(--color-success); }
.flash--error   { background:var(--color-danger-lt);  color:var(--color-danger); }
.flash--warning { background:var(--color-warning-lt); color:var(--color-warning); }
.flash--info    { background:var(--color-info-lt);    color:var(--color-info); }
.flash__close { background:none; border:none; font-size:1.2rem; cursor:pointer; padding:0 .25rem; color:inherit; opacity:.6; }
.flash__close:hover { opacity:1; }

/* ─── Bottom Navigation ──────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  height: var(--bottom-nav-h);
  background:var(--card-bg);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
  padding:0 .5rem env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.bottom-nav__item {
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  flex:1; padding:.5rem .25rem;
  color:var(--text-muted); font-size:.65rem; font-weight:500;
  text-decoration:none; border-radius:var(--radius-sm);
  transition:color var(--transition);
}
.bottom-nav__item:hover,.bottom-nav__item.active { color:var(--color-primary); text-decoration:none; }
.bottom-nav__item--disabled { opacity:.45; cursor:not-allowed; }
.bottom-nav__item--disabled:hover { color:var(--text-muted); }
.bottom-nav__item--fab {
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; flex:none;
  box-shadow: 0 4px 16px rgba(8,145,178,.4);
  display:flex; align-items:center; justify-content:center;
  margin-top:-12px;
}
.bottom-nav__item--fab:hover { opacity:.9; color:#fff; }
.bottom-nav__item--fab span { display:none; }

/* ─── Auth Pages ─────────────────────────────────────────── */
.auth-body { padding:0; background:var(--bg); }
.auth-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
}
html[data-theme="dark"] .auth-page { background: linear-gradient(135deg,#0F172A,#0C4A6E); }
.auth-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  width:100%; max-width:400px;
  box-shadow:var(--shadow-lg);
}
.auth-logo { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.auth-logo__icon {
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(8,145,178,.3);
}
.auth-logo__name    { font-size:1.2rem; font-weight:700; color:var(--text-primary); }
.auth-logo__tagline { font-size:.8rem; color:var(--text-muted); }
.auth-footer { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.auth-demo__label { font-size:.75rem; color:var(--text-muted); display:block; margin-bottom:.5rem; }
.auth-demo__row {
  font-size:.78rem; color:var(--color-primary);
  padding:.3rem; cursor:pointer; border-radius:4px;
}
.auth-demo__row:hover { background:var(--color-primary-xlt); }

/* ─── Photo Upload ───────────────────────────────────────── */
.photo-upload-zone {
  border:2px dashed var(--border);
  border-radius:var(--radius-md);
  min-height:180px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:var(--bg-alt);
  cursor:pointer;
  transition:border-color var(--transition);
}
.photo-upload-zone:hover { border-color:var(--color-primary); }
.photo-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:2rem; text-align:center; color:var(--text-muted);
}
.photo-placeholder p { color:var(--text-muted); font-size:.875rem; margin:0; }
.photo-placeholder__sub { font-size:.75rem; }
.photo-preview img { max-height:300px; width:100%; object-fit:contain; }
.photo-actions { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }

/* AI Status Bar */
.ai-status-bar { margin-top:.75rem; }
.ai-status-bar__text { font-size:.82rem; color:var(--text-secondary); margin-bottom:.4rem; }
.ai-progress { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.ai-progress__fill { height:100%; background:linear-gradient(90deg,var(--color-primary),#38BDF8); width:0; transition:width .3s ease; border-radius:2px; }

/* ─── Line Items ─────────────────────────────────────────── */
.line-item-row {
  display:grid;
  grid-template-columns: 1fr .7fr .7fr .7fr auto;
  gap:.5rem; align-items:center; margin-bottom:.5rem;
}

/* ─── Tag Selector ───────────────────────────────────────── */
.tag-selector { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-check input { display:none; }
.tag-check__label {
  display:inline-flex; align-items:center;
  padding:.3rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:500;
  border:1.5px solid transparent;
  cursor:pointer; transition:all var(--transition);
}
.tag-check input:checked + .tag-check__label { font-weight:700; transform:scale(1.05); }

/* ─── Tags Grid ──────────────────────────────────────────── */
.tag-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-item {
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:999px;
  border:1.5px solid; background:var(--card-bg);
  font-size:.82rem;
}
.tag-item__dot { width:8px; height:8px; border-radius:50%; }
.tag-item__count { color:var(--text-muted); font-size:.75rem; }
.tag-item__actions { display:flex; gap:.2rem; margin-left:.25rem; }

/* ─── Receipt Detail ─────────────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.detail-list  {}
.detail-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:.6rem 0; border-bottom:1px solid var(--border);
  gap:1rem;
}
.detail-row:last-child { border-bottom:none; }
.detail-label { font-size:.82rem; color:var(--text-muted); font-weight:500; flex-shrink:0; }
.detail-value { font-size:.875rem; font-weight:500; color:var(--text-primary); text-align:right; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.notes-box { background:var(--bg-alt); border-radius:var(--radius-sm); padding:.75rem; margin-top:.75rem; }
.notes-box strong { font-size:.82rem; color:var(--text-muted); }
.notes-box p { font-size:.875rem; color:var(--text-primary); margin-top:.3rem; }
.receipt-photo-card { overflow:hidden; }
.receipt-photo { width:100%; cursor:zoom-in; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.receipt-photo-footer { padding:.75rem; }

/* Amount Summary */
.amount-summary {}
.amount-row { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.875rem; }
.amount-row:last-child { border-bottom:none; }
.amount-row--discount { color:var(--color-success); }
.amount-row--total { font-weight:700; font-size:1.1rem; color:var(--text-primary); padding-top:.6rem; }

/* ─── Progress Rows ──────────────────────────────────────── */
.progress-row { margin-bottom:.75rem; }
.progress-row__info { display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; }
.progress-row__dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.progress-row__label{ font-size:.82rem; font-weight:500; flex:1; }
.progress-row__count{ font-size:.75rem; color:var(--text-muted); }
.progress-row__bar  { height:6px; background:var(--bg-alt); border-radius:3px; overflow:hidden; }
.progress-row__fill { height:100%; border-radius:3px; transition:width .6s ease; }
.progress-row__amount{ font-size:.78rem; color:var(--text-muted); text-align:right; margin-top:.2rem; }

/* ─── Tables ─────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; }
.table th { padding:.6rem 1rem; text-align:left; font-size:.78rem; font-weight:600; color:var(--text-muted); background:var(--bg-alt); }
.table td { padding:.65rem 1rem; font-size:.875rem; color:var(--text-primary); border-top:1px solid var(--border); }
.table tr:hover td { background:var(--bg-alt); }
.mini-bar { display:inline-block; width:80px; height:6px; background:var(--bg-alt); border-radius:3px; vertical-align:middle; overflow:hidden; }
.mini-bar div { height:100%; background:var(--color-primary); }

/* ─── Action Buttons ─────────────────────────────────────── */
.action-btn {
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px;
  background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all var(--transition);
  font-size:.85rem;
}
.action-btn:hover { background:var(--bg-alt); color:var(--text-primary); }
.action-btn--danger:hover { background:var(--color-danger-lt); color:var(--color-danger); border-color:var(--color-danger); }

/* ─── Filters ────────────────────────────────────────────── */
.filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.filter-row:not(:last-child) { margin-bottom:.5rem; }
.filter-group { display:flex; align-items:center; gap:.4rem; }
.filter-group label { font-size:.8rem; color:var(--text-muted); white-space:nowrap; }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap; margin-top:1rem; }
.pagination__item {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:.85rem; color:var(--text-secondary); text-decoration:none;
  transition:all var(--transition);
}
.pagination__item:hover,.pagination__item.active {
  background:var(--color-primary); color:#fff; border-color:var(--color-primary); text-decoration:none;
}

/* ─── Empty State ────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  padding:2.5rem 1rem; text-align:center; color:var(--text-muted);
}
.empty-state svg { opacity:.4; }
.empty-state p { color:var(--text-muted); }
.empty-state--sm { padding:1.5rem; }

/* ─── Dot helper ─────────────────────────────────────────── */
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* ─── Modals ─────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.modal {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.modal--lg { max-width:580px; }
.modal__title { padding:1.25rem 1.5rem .75rem; font-size:1.05rem; font-weight:700; color:var(--text-primary); border-bottom:1px solid var(--border); }
.modal__body  { padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:.875rem; }
.modal__actions { display:flex; gap:.75rem; justify-content:flex-end; padding-top:.5rem; margin-top:.5rem; border-top:1px solid var(--border); }

/* ─── Toast ──────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:calc(var(--bottom-nav-h) + .75rem); right:.75rem; z-index:400; display:flex; flex-direction:column; gap:.5rem; }
.toast {
  padding:.75rem 1rem;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  font-size:.875rem; font-weight:500;
  animation: toastIn .2s ease;
  max-width:280px;
}
.toast--success { border-left:4px solid var(--color-success); color:var(--color-success); }
.toast--error   { border-left:4px solid var(--color-danger);  color:var(--color-danger); }
.toast--warning { border-left:4px solid var(--color-warning); color:var(--color-warning); }
.toast--info    { border-left:4px solid var(--color-info);    color:var(--color-info); }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ─── Loading Overlay ────────────────────────────────────── */
.loading-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.3); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.spinner {
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(8,145,178,.2);
  border-top-color:var(--color-primary);
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
/* Same as .spin but preserves the translateY(-50%) vertical-centering transform
   used by inline search-field spinners (e.g. companies/receipts live search). */
@keyframes rt-spin { to { transform:translateY(-50%) rotate(360deg); } }

/* ─── Lightbox ───────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  cursor:zoom-out; padding:1rem;
}
.lightbox img { max-width:100%; max-height:90vh; object-fit:contain; border-radius:var(--radius-sm); cursor:default; }

/* ─── Profile ────────────────────────────────────────────── */
.profile-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.profile-avatar {
  width:72px; height:72px; border-radius:50%; margin:0 auto 1rem;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; font-weight:700; font-size:1.75rem;
  display:flex; align-items:center; justify-content:center;
}
.profile-name  { font-size:1.2rem; font-weight:700; color:var(--text-primary); }
.profile-role  { color:var(--color-primary); font-size:.85rem; font-weight:600; margin:.2rem 0; }
.profile-email { color:var(--text-muted); font-size:.85rem; }
.profile-stats { display:flex; justify-content:center; gap:2rem; margin-top:1rem; }
.profile-stat__val   { font-size:1.1rem; font-weight:700; color:var(--text-primary); }
.profile-stat__label { font-size:.75rem; color:var(--text-muted); }

/* ─── Chart Legend ───────────────────────────────────────── */
.chart-legend { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.75rem; }
.chart-legend-item { display:flex; align-items:center; gap:.35rem; font-size:.75rem; color:var(--text-secondary); }
.chart-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ─── Unread Dot ─────────────────────────────────────────── */
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--color-primary); }

/* ─── Responsive — Tablet ────────────────────────────────── */
@media (min-width: 600px) {
  .main-content { padding:1.25rem; }
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  .kpi-grid--3 { grid-template-columns:repeat(3,1fr); }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:repeat(2,1fr); }
  .line-item-row { grid-template-columns: 2fr .8fr .9fr .8fr auto; }
  .detail-grid { grid-template-columns:300px 1fr; }
  .profile-grid { grid-template-columns:260px 1fr; }
}

@media (min-width: 900px) {
  .main-content { padding:1.5rem; }
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
}

/* ─── PWA Safe Areas ─────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body { padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .bottom-nav { padding-bottom:env(safe-area-inset-bottom); }
}