/* ============================================================
   DataWaves Design System
   Professional SaaS theme — light content, dark slate sidebar
   ============================================================ */

:root {
  /* Brand / accent */
  --primary: #4f46e5;
  --primary-600: #4338ca;
  --primary-700: #3730a3;
  --primary-soft: #eef2ff;

  /* Status */
  --green: #16a34a;  --green-soft: #dcfce7;
  --amber: #d97706;  --amber-soft: #fef3c7;
  --red: #dc2626;    --red-soft: #fee2e2;
  --blue: #0284c7;   --blue-soft: #e0f2fe;
  --gray-badge: #64748b; --gray-soft: #f1f5f9;

  /* Neutrals (light content) */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;

  /* Sidebar (dark) */
  --side-bg: #0f172a;
  --side-bg-2: #1e293b;
  --side-text: #cbd5e1;
  --side-muted: #64748b;
  --side-active: #4f46e5;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.18);

  --sidebar-w: 248px;
  --topbar-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ============================================================ LAYOUT */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--side-bg);
  color: var(--side-text);
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform 0.25s ease;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar .brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.sidebar .brand .name { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.sidebar .brand .name small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--side-muted); letter-spacing: 0.02em; }

.nav { flex: 1; overflow-y: auto; padding: 0.85rem 0.7rem; }
.nav .nav-section { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--side-muted); padding: 0.9rem 0.8rem 0.4rem; }
.nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.8rem; margin: 0.1rem 0;
  border-radius: var(--radius-sm);
  color: var(--side-text); font-size: 0.875rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav a.active { background: var(--side-active); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,0.4); }
.nav a.active svg { opacity: 1; }

.sidebar .side-foot { padding: 0.85rem; border-top: 1px solid rgba(255,255,255,0.07); }
.side-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem 0.7rem; }
.side-user .avatar { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.side-user .info { min-width: 0; }
.side-user .info .nm { color: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .info .rl { color: var(--side-muted); font-size: 0.72rem; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h); position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.6rem;
}
.topbar .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--text-2); }
.topbar .page-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.topbar .spacer { flex: 1; }
.topbar .user-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.3rem 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.topbar .user-chip .nm { font-size: 0.82rem; font-weight: 600; }
.topbar .user-chip .rl { font-size: 0.7rem; color: var(--muted); }

.content { padding: 1.75rem 1.6rem; flex: 1; max-width: 1280px; width: 100%; }
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.page-head p { color: var(--text-2); margin-top: 0.2rem; }

/* avatar */
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.avatar.sm { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.3rem; }

/* ============================================================ CARDS */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat-card .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 0.85rem; }
.stat-card .ico svg { width: 20px; height: 20px; }
.stat-card .label { font-size: 0.78rem; color: var(--text-2); font-weight: 500; }
.stat-card .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.15rem; }
.stat-card .sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.2rem; }
.ico.indigo { background: var(--primary-soft); color: var(--primary); }
.ico.green { background: var(--green-soft); color: var(--green); }
.ico.amber { background: var(--amber-soft); color: var(--amber); }
.ico.red { background: var(--red-soft); color: var(--red); }
.ico.blue { background: var(--blue-soft); color: var(--blue); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.card-head { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border); }
.card-head h2 { font-size: 1rem; font-weight: 650; }
.card-head .spacer { flex: 1; }
.card-body { padding: 1.35rem; }
.card-body.flush { padding: 0; }

.quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 0.85rem; }
.quicklink { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: 0.15s; box-shadow: var(--shadow-sm); }
.quicklink:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.quicklink .ico { width: 38px; height: 38px; border-radius: 10px; }
.quicklink .qt { font-weight: 600; font-size: 0.9rem; }
.quicklink .qs { font-size: 0.74rem; color: var(--muted); }

/* ============================================================ BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.btn:hover { background: var(--primary-600); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.danger { background: var(--red); } .btn.danger:hover { background: #b91c1c; }
.btn.success { background: var(--green); } .btn.success:hover { background: #15803d; }
.btn.sm { padding: 0.38rem 0.7rem; font-size: 0.78rem; }
.btn.icon { padding: 0.4rem; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* table action buttons (subtle) */
.act { display: inline-flex; gap: 0.3rem; }
.act button { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 7px; padding: 0.32rem 0.6rem; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: 0.15s; }
.act button:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.act button.danger:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* ============================================================ FORMS */
label { display: block; font-size: 0.8rem; color: var(--text-2); font-weight: 500; margin-bottom: 0.35rem; }
input, select, textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 0.875rem; font-family: inherit; transition: 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input.invalid, select.invalid, textarea.invalid { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.field { margin-bottom: 0.9rem; }
.field .err { color: var(--red); font-size: 0.74rem; margin-top: 0.3rem; display: none; }
.field.invalid .err { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0.25rem 1rem; }
.checkbox { display: flex; align-items: center; gap: 0.5rem; }
.checkbox input { width: auto; }
.checkbox label { margin: 0; }

/* ============================================================ TOOLBAR / FILTERS */
.toolbar { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.toolbar .spacer { flex: 1; }
.toolbar input, .toolbar select { width: auto; min-width: 170px; }
.search { position: relative; }
.search svg { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search input { padding-left: 2.1rem; min-width: 240px; }

/* ============================================================ TABLES */
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
thead th { text-align: left; padding: 0.7rem 1rem; color: var(--text-2); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: var(--surface-2); }
.cell-user { display: flex; align-items: center; gap: 0.6rem; }
.cell-user .nm { font-weight: 600; } .cell-user .sub { font-size: 0.74rem; color: var(--muted); }
.t-scroll { overflow-x: auto; }

/* ============================================================ BADGES */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.62rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.badge.indigo { background: var(--primary-soft); color: var(--primary); }
.badge.gray { background: var(--gray-soft); color: var(--gray-badge); }

/* ============================================================ STATES */
.state { padding: 2.75rem 1.5rem; text-align: center; color: var(--muted); }
.state svg { width: 42px; height: 42px; opacity: 0.5; margin-bottom: 0.6rem; }
.state .st-title { font-weight: 600; color: var(--text-2); font-size: 0.95rem; }
.state .st-sub { font-size: 0.82rem; margin-top: 0.2rem; }
.state.error .st-title { color: var(--red); }

.spinner { width: 22px; height: 22px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-spin { display: grid; place-items: center; padding: 2.5rem; }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, #eef1f5 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 6px; height: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ============================================================ MODAL */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center; z-index: 60; padding: 4vh 1rem; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 540px; box-shadow: var(--shadow-lg);
  animation: pop 0.18s ease; max-height: 92vh; display: flex; flex-direction: column; }
.modal.wide { max-width: 760px; }
@keyframes pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1.5rem 0.5rem; }
.modal-head h2 { font-size: 1.15rem; font-weight: 700; }
.modal-head p { color: var(--text-2); font-size: 0.84rem; margin-top: 0.1rem; }
.modal-head .x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); padding: 0.2rem; border-radius: 6px; }
.modal-head .x:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 1rem 1.5rem; overflow-y: auto; }
.modal-foot { display: flex; gap: 0.6rem; justify-content: flex-end; padding: 1rem 1.5rem 1.4rem; border-top: 1px solid var(--border); }

/* ============================================================ TOAST */
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.toast { display: flex; align-items: flex-start; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; box-shadow: var(--shadow-lg); animation: slidein 0.2s ease; font-size: 0.85rem; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.success { border-left-color: var(--green); } .toast.success .ti { color: var(--green); }
.toast.error { border-left-color: var(--red); } .toast.error .ti { color: var(--red); }
.toast.info { border-left-color: var(--blue); } .toast.info .ti { color: var(--blue); }
.toast .ti { flex-shrink: 0; margin-top: 1px; } .toast .ti svg { width: 18px; height: 18px; }
.toast .tmsg { flex: 1; color: var(--text); }
.toast.fade { animation: fadeout 0.3s ease forwards; }
@keyframes fadeout { to { opacity: 0; transform: translateX(20px); } }

/* alert inline */
.alert { padding: 0.7rem 0.95rem; border-radius: var(--radius-sm); font-size: 0.84rem; margin-bottom: 1rem; }
.alert.error { background: var(--red-soft); color: #991b1b; }
.alert.success { background: var(--green-soft); color: #166534; }
.alert.info { background: var(--blue-soft); color: #075985; }
.no-perm { padding: 3rem 1.5rem; text-align: center; color: var(--text-2); }

/* misc */
.muted { color: var(--muted); }
.right { text-align: right; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 39; }

/* ============================================================ POLISH */
/* Keyboard focus rings (mouse clicks stay clean) */
.btn:focus-visible, .act button:focus-visible, .tab:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
/* Slim, unobtrusive scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
/* Smooth momentum scrolling wherever content pans sideways */
.t-scroll, .tabs { -webkit-overflow-scrolling: touch; }
/* Topbar mini brand — only shown on mobile when the sidebar is hidden */
.topbar .mini-brand {
  display: none; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  place-items: center; color: #fff; font-weight: 800; font-size: 0.9rem;
}
.topbar .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  /* Sidebar becomes a slide-in drawer */
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); width: min(300px, 86vw); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .topbar { padding: 0 1rem; gap: 0.7rem; }
  .topbar .hamburger { display: inline-flex; padding: 0.5rem; margin-left: -0.35rem; border-radius: 8px; }
  .topbar .hamburger:active { background: var(--surface-2); }
  .topbar .hamburger svg { width: 22px; height: 22px; }
  .topbar .mini-brand { display: grid; }
  .mobile-backdrop.show { display: block; }
  .content { padding: 1.15rem 0.9rem; }
  .page-head { margin-bottom: 1.1rem; }
  .page-head h1 { font-size: 1.3rem; }

  /* Wide tables PAN instead of crushing — only when they actually have
     many columns; small 2–4 column tables keep fitting the screen. */
  .t-scroll table:has(th:nth-child(5)), .card-body.flush table:has(th:nth-child(5)) { min-width: 560px; }
  .t-scroll table:has(th:nth-child(7)), .card-body.flush table:has(th:nth-child(7)) { min-width: 700px; }
  .t-scroll table:has(th:nth-child(9)), .card-body.flush table:has(th:nth-child(9)) { min-width: 860px; }
  .card-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tab rows scroll horizontally (a tall wrapped block eats the screen) */
  .tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab, .tabs button { flex-shrink: 0; }

  .card-head { padding: 0.9rem 1rem; }
  .card-body { padding: 1rem; }
}
@media (max-width: 560px) {
  .topbar .user-chip .meta { display: none; }
  .topbar .user-chip { padding: 0.25rem; border: none; background: none; }

  /* Prevent iOS auto-zoom on focus (needs >=16px inputs) */
  input, select, textarea { font-size: 16px; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat-card { padding: 0.95rem; }
  .stat-card .value { font-size: 1.35rem; }
  .stat-card .ico { width: 34px; height: 34px; margin-bottom: 0.55rem; }

  /* Filters: compact 2-up grid; search & actions span the row */
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: stretch; }
  .toolbar input, .toolbar select, .search input { min-width: 0; width: 100%; }
  .toolbar .search, .toolbar .spacer, .toolbar .btn, .toolbar button, .toolbar a,
  .toolbar .ta-wrap, .toolbar strong, .toolbar span { grid-column: 1 / -1; }
  .toolbar .spacer { display: none; }

  /* Modals become full-screen sheets */
  .modal-backdrop { padding: 0; }
  .modal, .modal.wide { max-width: none; width: 100%; min-height: 100vh; min-height: 100dvh; max-height: none; border-radius: 0; }
  .modal-head { padding: 1rem 1rem 0.5rem; }
  .modal-body { padding: 0.9rem 1rem; }
  .modal-foot { padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--surface); flex-wrap: wrap; }
  .modal-foot .btn, .modal-foot button { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* KPI cards: keep long money values inside the card */
  .kpi-grid .kpi .v { font-size: 1.15rem; overflow-wrap: anywhere; }

  .quicklinks { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}