/* ============================================================
   TAANK CRM — Global Styles & Tokens
   ============================================================ */
:root {
  --navy-950:#0B1130;
  --navy-900:#141B40;
  --navy-800:#1C2552;
  --indigo-600:#5B4FE5;
  --indigo-500:#6F63F2;
  --indigo-400:#8B81F5;
  --indigo-100:#EEEBFF;
  --bg:#F4F5FB;
  --surface:#FFFFFF;
  --ink-900:#14152B;
  --ink-600:#585B78;
  --ink-400:#9699B5;
  --line:#E7E8F3;
  --line-soft:#F0F1F8;
  --green:#1A9A57; --green-bg:#E6F8ED;
  --amber:#C97A0A; --amber-bg:#FFF3DE;
  --red:#D6432F;  --red-bg:#FCEAE7;
  --blue:#2A66E8; --blue-bg:#E9F0FE;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,17,40,.06);
  --shadow-md:0 10px 28px rgba(15,17,40,.09);
  --shadow-lg:0 20px 48px rgba(15,17,40,.16);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --topbar-h:68px;
  --sidebar-w:260px;
}

*,*::before,*::after {box-sizing:border-box;}
html,body {height:100%;}
body {
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  font-size:14.5px;
  line-height:1.45;
}
h1,h2,h3,h4,p {margin:0;}
button, input, select, textarea {font-family:inherit;}
a {color:inherit; text-decoration:none;}
.num {font-variant-numeric:tabular-nums;}
::selection {background:var(--indigo-100);}
:focus-visible {outline:2px solid var(--indigo-500); outline-offset:2px; border-radius:4px;}

/* ---------- icon system ---------- */
.icon {width:18px; height:18px; flex:0 0 auto; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linejoin:round; stroke-linecap:round;}
.icon-lg {width:22px; height:22px;}
.icon-sm {width:14px; height:14px;}

/* ============================================================
   AUTHENTICATION PAGES (Login / Register)
   ============================================================ */
.card-auth {border-radius:var(--radius-md); border:1px solid var(--line); box-shadow:var(--shadow-md); background:var(--surface);}
.card-auth-login {max-width:450px;}
.card-auth-register {max-width:650px;}
.auth-brand-logo {width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg, var(--indigo-500), var(--indigo-600)); color:white; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; margin:0 auto 16px; box-shadow:0 6px 16px rgba(91,79,229,.45);}
.auth-link {color:var(--indigo-600); font-weight:600; text-decoration:none; transition:color 0.2s ease;}
.auth-link:hover {color:var(--navy-900);}

/* ============================================================
   LAYOUT SHELL (Sidebar & Topbar)
   ============================================================ */
.app {display:flex; min-height:100vh;}
.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--navy-950) 0%, var(--navy-900) 100%);
  color:#C9CCE8; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:40; transition:transform .28s ease;
}
.brand {display:flex; align-items:center; gap:10px; padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08);}
.brand-mark {width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; flex:0 0 auto; box-shadow:0 6px 16px rgba(91,79,229,.45);}
.brand-name {color:#fff; font-weight:700; font-size:15.5px; letter-spacing:.2px;}
.brand-sub {color:#8488B0; font-size:11.5px; margin-top:1px;}
.sidebar-scroll {flex:1; overflow-y:auto; padding:14px 12px 12px;}
.nav-group-label {font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#666AA0; margin:18px 10px 8px; font-weight:700;}
.nav-group-label:first-child {margin-top:4px;}
.nav-item {display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:#B7BAD9; font-size:13.6px; font-weight:500; cursor:pointer; position:relative; margin-bottom:2px; transition:background .15s ease,color .15s ease; border:none; background:transparent; width:100%; text-align:left; text-decoration:none;}
.nav-item .icon {color:#7E82AC; transition:color .15s ease;}
.nav-item:hover {background:rgba(255,255,255,.06); color:#fff;}
.nav-item:hover .icon {color:#fff;}
.nav-item.active {background:var(--indigo-600); color:#fff; box-shadow:0 8px 18px rgba(91,79,229,.35);}
.nav-item.active .icon {color:#fff;}
.nav-badge {margin-left:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:20px;}
.sidebar-foot {padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.08);}
.plan-pill {display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:10px 12px;}
.plan-ring {width:34px; height:34px; flex:0 0 auto;}
.plan-pill-text {flex:1; min-width:0;}
.plan-pill-title {color:#fff; font-size:12.5px; font-weight:700;}
.plan-pill-sub {color:#9295BD; font-size:11px; margin-top:1px;}
.sidebar-backdrop {display:none;}

.main {flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar {height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:30;}
.hamburger {display:none; border:none; background:var(--bg); width:38px; height:38px; border-radius:10px; align-items:center; justify-content:center; color:var(--ink-900); cursor:pointer; flex:0 0 auto;}
.page-title {font-size:18px; font-weight:700; letter-spacing:-.01em;}
.topbar-search {flex:1; max-width:380px; display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:0 12px; height:38px; color:var(--ink-400);}
.topbar-search input {border:none; background:transparent; outline:none; flex:1; font-size:13.5px; color:var(--ink-900);}
.topbar-actions {display:flex; align-items:center; gap:10px; margin-left:auto;}
.icon-btn {width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-600); position:relative; transition:background .15s ease,border-color .15s ease;}
.icon-btn:hover {background:var(--bg); border-color:#D9DBEE;}
.dot-flag {position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid var(--surface);}
.sub-badge {display:flex; align-items:center; gap:8px; background:var(--indigo-100); border:1px solid #E0DCFF; color:var(--indigo-600); padding:6px 12px 6px 8px; border-radius:30px; font-size:12px; font-weight:700;}
.sub-badge .ring-mini {width:20px; height:20px;}
.profile-chip {display:flex; align-items:center; gap:9px; padding:5px 6px 5px 5px; border-radius:30px; border:1px solid var(--line); cursor:pointer;}
.avatar {width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#FFB36B,#FF7A59); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; flex:0 0 auto;}
.profile-meta {display:none;}
@media(min-width:880px){.profile-meta{display:block;}}
.profile-name {font-size:12.5px; font-weight:700; line-height:1.1;}
.profile-role {font-size:11px; color:var(--ink-400);}

.content {padding:22px; max-width:1280px; width:100%; margin:0 auto;}

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */
.card {background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);}
.card-pad {padding:18px 20px;}
.section-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.section-title {font-size:16px; font-weight:700; letter-spacing:-.01em;}
.section-sub {font-size:12.5px; color:var(--ink-400); margin-top:2px;}
.link-btn {font-size:12.5px; font-weight:700; color:var(--indigo-600); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; text-decoration:none;}

.btn {display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:9px 15px; font-size:13.2px; font-weight:600; cursor:pointer; color:var(--ink-900); transition:transform .08s ease, background .15s ease, box-shadow .15s ease; white-space:nowrap;}
.btn:active {transform:scale(.97);}
.btn-primary {background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600)); border-color:transparent; color:#fff; box-shadow:0 10px 22px rgba(91,79,229,.32);}
.btn-primary:hover {box-shadow:0 12px 26px rgba(91,79,229,.42); color:#fff;}
.btn-ghost {background:transparent; border-color:transparent;}
.btn-ghost:hover {background:var(--bg);}
.btn-soft {background:var(--indigo-100); border-color:transparent; color:var(--indigo-600);}
.btn-danger-soft {background:var(--red-bg); border-color:transparent; color:var(--red);}
.btn-sm {padding:6px 11px; font-size:12px; border-radius:8px;}

.badge {display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px;}
.badge-green {background:var(--green-bg); color:var(--green);}
.badge-amber {background:var(--amber-bg); color:var(--amber);}
.badge-red {background:var(--red-bg); color:var(--red);}
.badge-blue {background:var(--blue-bg); color:var(--blue);}
.badge-gray {background:var(--line-soft); color:var(--ink-600);}

.grid {display:grid; gap:16px;}
.grid-4 {grid-template-columns:repeat(4,1fr);}
.grid-2 {grid-template-columns:repeat(2,1fr);}
.grid-3 {grid-template-columns:repeat(3,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid-4{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;}}

/* Stat card */
.stat-card {background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:17px 18px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); border-left:3px solid transparent;}
.stat-card.t-indigo {border-left-color:var(--indigo-500);}
.stat-card.t-green {border-left-color:var(--green);}
.stat-card.t-amber {border-left-color:var(--amber);}
.stat-card.t-blue {border-left-color:var(--blue);}
.stat-top {display:flex; align-items:flex-start; justify-content:space-between;}
.stat-icon {width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.stat-icon.bg-indigo {background:var(--indigo-100); color:var(--indigo-600);}
.stat-icon.bg-green {background:var(--green-bg); color:var(--green);}
.stat-icon.bg-amber {background:var(--amber-bg); color:var(--amber);}
.stat-icon.bg-blue {background:var(--blue-bg); color:var(--blue);}
.stat-trend {display:flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700;}
.stat-trend.up {color:var(--green);}
.stat-trend.down {color:var(--red);}
.stat-value {font-size:23px; font-weight:800; letter-spacing:-.02em; margin-top:13px;}
.stat-label {font-size:12.5px; color:var(--ink-400); margin-top:3px; font-weight:600;}

/* Tables */
.table-wrap {overflow-x:auto;}
table.data-table {width:100%; border-collapse:collapse; font-size:13.2px;}
.data-table thead th {text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); font-weight:700; padding:0 14px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.data-table tbody td {padding:13px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.data-table tbody tr:last-child td {border-bottom:none;}
.data-table tbody tr {transition:background .12s ease;}
.data-table tbody tr:hover {background:#FAFAFE;}
.cell-strong {font-weight:700;}
.cell-muted {color:var(--ink-400); font-size:12.3px;}
.row-actions {display:flex; gap:6px;}
.avatar-sm {width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11.5px; color:#fff; flex:0 0 auto;}

@media(max-width:760px){
  .data-table thead {display:none;}
  .data-table, .data-table tbody, .data-table tr, .data-table td {display:block; width:100%;}
  .data-table tbody tr {border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:10px 4px; background:var(--surface);}
  .data-table tbody td {display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px dashed var(--line-soft); padding:8px 12px; text-align:right;}
  .data-table tbody td:last-child {border-bottom:none;}
  .data-table tbody td::before {content:attr(data-label); font-size:11px; font-weight:700; color:var(--ink-400); text-transform:uppercase; letter-spacing:.05em; text-align:left;}
  .row-actions {margin-left:auto;}
}

/* Form elements */
.form-row {display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px;}
.form-row.cols-3 {grid-template-columns:repeat(3,1fr);}
@media(max-width:680px){.form-row, .form-row.cols-3{grid-template-columns:1fr;}}
.field label {display:block; font-size:12px; font-weight:700; color:var(--ink-600); margin-bottom:6px;}
.field .req {color:var(--red);}
.input, .select, .textarea {width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px; background:var(--surface); color:var(--ink-900); outline:none; transition:border-color .15s ease, box-shadow .15s ease;}
.input:focus, .select:focus, .textarea:focus {border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-100);}
.textarea {resize:vertical; min-height:64px;}
.helper-text {font-size:11.5px; color:var(--ink-400); margin-top:5px;}
.toggle-group {display:flex; gap:8px; background:var(--bg); padding:4px; border-radius:11px; border:1px solid var(--line);}
.toggle-opt {flex:1; text-align:center; padding:8px 10px; border-radius:8px; font-size:12.8px; font-weight:700; cursor:pointer; color:var(--ink-600);}
.toggle-opt.active {background:var(--surface); color:var(--indigo-600); box-shadow:var(--shadow-sm);}
.checkbox {width:19px; height:19px; border-radius:6px; border:1.6px solid #CBCEE4; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; background:var(--surface);}
.checkbox.checked {background:var(--indigo-600); border-color:var(--indigo-600); color:#fff;}

/* Modal */
.modal-overlay {position:fixed; inset:0; background:rgba(15,17,40,.45); backdrop-filter:blur(2px); display:none; align-items:flex-end; justify-content:center; z-index:100; padding:0;}
.modal-overlay.open {display:flex;}
.modal {background:var(--surface); width:100%; max-width:560px; border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:slideUp .28s ease both;}
@media(min-width:680px){.modal-overlay{align-items:center;} .modal{border-radius:18px; max-height:88vh;}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-head {display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2;}
.modal-title {font-size:16px; font-weight:800;}
.modal-body {padding:20px;}
.modal-foot {padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--surface);}

/* Invoice builder */
.invoice-head-card {display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
@media(max-width:900px){.invoice-head-card{grid-template-columns:1fr;}}
.line-items-table {width:100%; border-collapse:collapse;}
.line-items-table th {text-align:left; font-size:10.7px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); padding:0 8px 8px; font-weight:700;}
.line-items-table td {padding:6px 8px; vertical-align:middle;}
.line-items-table input.li-input, .line-items-table select.li-product {width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 9px; font-size:13px; background:var(--surface);}
.li-amount {font-weight:700; white-space:nowrap;}
.li-remove {width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--red); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.totals-row {display:flex; justify-content:space-between; padding:7px 0; font-size:13.3px; color:var(--ink-600);}
.totals-row.grand {border-top:1.5px dashed var(--line); margin-top:6px; padding-top:12px; font-size:17px; font-weight:800; color:var(--ink-900);}
.totals-row .amt {font-weight:700; color:var(--ink-900);}
.dash-split-grid {display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:22px;}
.notes-totals-grid {display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media(max-width:900px){.dash-split-grid,.notes-totals-grid{grid-template-columns:1fr;}}

/* Helpers */
.empty-state {text-align:center; padding:50px 20px; color:var(--ink-400);}
.empty-state .icon {width:40px; height:40px; margin:0 auto 12px; color:var(--ink-400); opacity:.7;}
.empty-state h4 {font-size:14.5px; color:var(--ink-600); margin-bottom:4px;}
.empty-state p {font-size:12.5px;}

.alert-banner {display:flex; align-items:center; gap:12px; background:var(--amber-bg); border:1px solid #F4DCA8; border-radius:14px; padding:13px 16px; margin-bottom:18px;}
.alert-banner .icon {color:var(--amber);}
.alert-banner-text {flex:1; font-size:13px;}
.alert-close {background:none; border:none; color:var(--ink-400); cursor:pointer; display:flex;}

.bars {display:flex; align-items:flex-end; gap:10px; height:140px; padding-top:10px;}
.bar-col {flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;}
.bar-fill {width:100%; max-width:28px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--indigo-400),var(--indigo-600));}
.bar-label {font-size:10.5px; color:var(--ink-400); font-weight:700;}

.qa-row {display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:620px){.qa-row{grid-template-columns:repeat(2,1fr);}}
.qa-btn {display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:15px; border-radius:14px; border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:transform .12s ease, box-shadow .12s ease;}
.qa-btn:hover {box-shadow:var(--shadow-md); transform:translateY(-2px);}
.qa-icon {width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.qa-title {font-size:13px; font-weight:700;}
.qa-sub {font-size:11px; color:var(--ink-400);}

.toolbar {display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.toolbar .topbar-search {max-width:280px; height:40px;}
.toolbar-spacer {flex:1;}

/* Notif dropdown */
.dropdown {position:absolute; top:48px; right:0; width:320px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); display:none; z-index:60; overflow:hidden;}
.dropdown.open {display:block;}
.dropdown-head {padding:14px 16px; border-bottom:1px solid var(--line); font-weight:800; font-size:13.5px;}
.dropdown-list {max-height:320px; overflow-y:auto;}
.dropdown-item {display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line-soft);}
.dropdown-item:last-child {border-bottom:none;}
.dropdown-item-text {font-size:12.5px;}
.dropdown-item-time {font-size:10.8px; color:var(--ink-400); margin-top:2px;}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.bottom-nav {display:none; position:fixed; bottom:0; left:0; right:0; height:64px; background:var(--surface); border-top:1px solid var(--line); z-index:50; align-items:center; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom);}
.bn-item {display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-400); background:none; border:none; font-size:10px; font-weight:700; cursor:pointer; flex:1; padding:6px 0; text-decoration:none;}
.bn-item.active {color:var(--indigo-600);}
.bn-fab {width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600)); display:flex; align-items:center; justify-content:center; color:#fff; margin-top:-26px; box-shadow:0 10px 22px rgba(91,79,229,.45); border:4px solid var(--surface); cursor:pointer;}

@media(max-width:980px){
  .sidebar {position:fixed; left:0; top:0; transform:translateX(-100%);}
  .sidebar.open {transform:translateX(0);}
  .sidebar-backdrop {display:none; position:fixed; inset:0; background:rgba(10,12,30,.4); z-index:39;}
  .sidebar-backdrop.open {display:block;}
  .hamburger {display:flex;}
  .bottom-nav {display:flex;}
  .content {padding:16px 14px 96px;}
}
@media(max-width:480px){
  .page-title {font-size:16px;}
  .topbar {padding:0 14px; gap:10px;}
  .topbar-search {display:none;}
  .sub-badge span.full {display:none;}
}