/* ==========================================================================
   KANAKKU v2 — Professional Finance Dashboard Theme
   "Navy & Gold" — premium banking aesthetic. Deep navy sidebar, warm gold
   accents, crisp white cards, calm semantic income/expense/balance colors,
   Inter + Noto Sans Tamil throughout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lexend:wght@600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:          #F3F5F9;
  --surface:     #FFFFFF;
  --border:      #E6E9F1;
  --ink:         #10192E;
  --muted:       #667085;

  --sidebar:     #0B1B33;
  --sidebar-alt: #142A4D;
  --sidebar-text:#C7D0E0;

  --primary:     #163D6B;   /* deep navy */
  --primary-dark:#0F2C4F;
  --gold:        #C7972F;   /* premium gold accent */
  --gold-dark:   #A87C22;

  --income:      #0F9D65;   /* refined emerald */
  --income-bg:   #E8F8F0;
  --expense:     #D9314A;   /* deep rose/red */
  --expense-bg:  #FDECEF;
  --balance:     #C7972F;   /* gold */
  --balance-bg:  #FBF3E1;

  --shadow-sm:   0 1px 3px rgba(11,27,51,.06);
  --shadow-md:   0 6px 20px rgba(11,27,51,.09);
  --shadow-lg:   0 16px 40px rgba(11,27,51,.16);
  --radius:      14px;
}

*{ box-sizing:border-box; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', 'Noto Sans Tamil', sans-serif;
  -webkit-font-smoothing:antialiased;
}

.font-tamil{ font-family:'Noto Sans Tamil','Inter',sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }
.font-head{ font-family:'Lexend','Inter',sans-serif; }

/* ---------------------------------------------------------------------- */
/* LOGIN PAGE                                                              */
/* ---------------------------------------------------------------------- */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 8% 12%, rgba(199,151,47,.12), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(22,61,107,.14), transparent 42%),
    var(--bg);
  padding:24px;
}
.auth-card{
  width:100%; max-width:410px;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  border:1px solid var(--border);
}
.auth-card .brand-strip{
  background:linear-gradient(135deg, var(--sidebar), var(--primary) 70%, var(--gold-dark));
  padding:34px 32px 26px; color:#fff; position:relative;
}
.auth-card .brand-strip::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent 80%);
}
.auth-card .brand-strip .logo-badge{
  width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; margin-bottom:16px; font-family:'Lexend',sans-serif;
}
.auth-card .brand-strip h1{ font-family:'Lexend',sans-serif; font-size:23px; font-weight:700; margin:0; letter-spacing:-.01em; }
.auth-card .brand-strip .sub-ta{ font-family:'Noto Sans Tamil',sans-serif; font-size:13.5px; opacity:.88; margin-top:3px; }
.auth-card .card-body-custom{ padding:32px; }

.field-label{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; margin-bottom:6px; display:block;
}
.form-control-modern{
  border:1.5px solid var(--border); background:#fff;
  border-radius:9px; padding:10px 14px; width:100%; font-size:14.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control-modern:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(22,61,107,.12);
}
.btn-primary-modern{
  background:var(--primary); border:none; color:#fff;
  font-weight:600; padding:11px 20px; border-radius:9px; width:100%;
  transition:background .15s ease, transform .1s ease;
}
.btn-primary-modern:hover{ background:var(--primary-dark); color:#fff; transform:translateY(-1px); }
.btn-primary-modern:active{ transform:translateY(0); }

/* ---------------------------------------------------------------------- */
/* APP SHELL                                                               */
/* ---------------------------------------------------------------------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:260px; flex-shrink:0;
  background:linear-gradient(195deg, var(--sidebar), var(--sidebar-alt));
  color:var(--sidebar-text);
  padding:24px 18px;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:0 6px 20px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:14px; }
.sidebar .brand .logo-badge{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#1A1206; font-size:16px; flex-shrink:0; font-family:'Lexend',sans-serif;
}
.sidebar .brand-title{ font-family:'Lexend',sans-serif; font-size:17px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:-.01em; }
.sidebar .brand-sub{ font-family:'Noto Sans Tamil',sans-serif; font-size:11.5px; opacity:.62; }

.sidebar .nav-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#7C8AA5; padding:14px 12px 6px; font-weight:600; }

.sidebar .nav-link{
  color:var(--sidebar-text); padding:10px 12px; border-radius:9px; font-size:14px;
  display:flex; align-items:center; gap:10px; margin-bottom:2px;
  text-decoration:none; transition:background .15s ease, color .15s ease;
}
.sidebar .nav-link i{ width:18px; text-align:center; opacity:.8; font-size:15px; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sidebar .nav-link.active{ background:linear-gradient(90deg, var(--gold-dark), var(--gold)); color:#1A1206; font-weight:700; }
.sidebar .nav-link.active i{ opacity:1; }

.sidebar .user-chip{
  margin-top:auto; padding:12px; border-radius:11px; background:rgba(255,255,255,.05);
  display:flex; align-items:center; gap:10px; margin-bottom:8px; border:1px solid rgba(255,255,255,.06);
}
.sidebar .user-chip .avatar{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:flex; align-items:center; justify-content:center; color:#1A1206; font-weight:700; font-size:13px; flex-shrink:0;
}
.sidebar .user-chip .name{ font-size:13px; font-weight:600; color:#fff; line-height:1.2; }
.sidebar .user-chip .role{ font-size:11px; color:#94A3B8; text-transform:capitalize; }

.main-area{ flex:1; padding:30px 34px; max-width:100%; min-width:0; overflow-anchor:none; }

.page-title{ font-family:'Lexend',sans-serif; font-size:24px; font-weight:700; color:var(--ink); margin-bottom:2px; letter-spacing:-.01em; }
.page-title .ta{ font-family:'Noto Sans Tamil',sans-serif; font-size:13.5px; color:var(--muted); display:block; font-weight:500; margin-top:2px; }

/* ---------------------------------------------------------------------- */
/* PANELS / CARDS                                                          */
/* ---------------------------------------------------------------------- */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px 24px; margin-bottom:24px;
}
.panel-title{
  font-family:'Lexend',sans-serif;
  font-size:15px; color:var(--ink); font-weight:600;
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.panel-title i{ color:var(--gold-dark); }
.panel-title small{ font-family:'Noto Sans Tamil',sans-serif; color:var(--muted); font-weight:500; font-size:12px; margin-left:2px; }

/* KPI cards */
.kpi-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.kpi-card{
  flex:1; min-width:210px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:14px; transition:box-shadow .15s ease, transform .15s ease;
  position:relative; overflow:hidden;
}
.kpi-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.kpi-card.income::before{ background:var(--income); }
.kpi-card.expense::before{ background:var(--expense); }
.kpi-card.balance::before{ background:var(--gold); }
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.kpi-card .kpi-icon{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.kpi-card.income .kpi-icon{ background:var(--income-bg); color:var(--income); }
.kpi-card.expense .kpi-icon{ background:var(--expense-bg); color:var(--expense); }
.kpi-card.balance .kpi-icon{ background:var(--balance-bg); color:var(--gold-dark); }
.kpi-card .label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.kpi-card .label-ta{ font-family:'Noto Sans Tamil',sans-serif; font-size:12px; color:var(--muted); }
.kpi-card .amount{ font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:700; color:var(--ink); }

/* Chart panel */
.chart-row{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.chart-row .panel{ flex:1; min-width:320px; }
.chart-row .panel.chart-side{ flex:0 0 380px; }

/* Fixed-height box every chart canvas lives in. Chart.js with
   maintainAspectRatio:false sizes itself to fill its parent — without a
   hard-capped parent height the canvas (and a long doughnut legend) can
   grow without limit and stretch the whole page. This caps it. */
.chart-box{ position:relative; height:300px; }
.chart-box canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.chart-box.chart-box-legend{ height:300px; }

/* Data table */
table.data-table{ width:100%; border-collapse:collapse; }
table.data-table thead th{
  background:#F7F8FC; color:var(--primary); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.05em; padding:12px 14px; border-bottom:2px solid var(--border);
}
table.data-table tbody td{ padding:11px 14px; font-size:14px; vertical-align:middle; border-bottom:1px solid var(--border); }
table.data-table tbody tr:hover{ background:#FAFBFF; }

/* DataTables scrollY container (used for long transaction lists) —
   keeps the header sticky and confines scrolling to the table itself
   instead of the whole page. */
.dataTables_scrollHead{ background:#F7F8FC; }
.dataTables_scrollBody{ overflow-anchor:none; border-bottom:1px solid var(--border); }
.dataTables_scrollBody table.data-table thead th{ border-bottom:none; }
.badge-income{ background:var(--income-bg); color:var(--income); font-weight:600; padding:4px 10px; border-radius:999px; font-size:12px; }
.badge-expense{ background:var(--expense-bg); color:var(--expense); font-weight:600; padding:4px 10px; border-radius:999px; font-size:12px; }
.badge-admin{ background:#EFF4FA; color:var(--primary); font-weight:600; padding:3px 9px; border-radius:999px; font-size:11.5px; text-transform:uppercase; }
.badge-user{ background:#F1F5F9; color:#475569; font-weight:600; padding:3px 9px; border-radius:999px; font-size:11.5px; text-transform:uppercase; }
.amount-cell{ font-family:'JetBrains Mono',monospace; font-weight:600; }
.rank-pill{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:#F0F3F9; color:var(--primary); font-size:11.5px; font-weight:700; margin-right:8px;
}

/* Buttons */
.btn-brand{ background:var(--primary); border:none; color:#fff; font-weight:600; }
.btn-brand:hover{ background:var(--primary-dark); color:#fff; }
.btn-outline-brand{ border:1.5px solid var(--primary); color:var(--primary); background:transparent; font-weight:600; }
.btn-outline-brand:hover{ background:var(--primary); color:#fff; }
.btn-gold{ background:linear-gradient(90deg, var(--gold-dark), var(--gold)); border:none; color:#1A1206; font-weight:700; }
.btn-gold:hover{ filter:brightness(1.05); color:#1A1206; }

.modal-content{ border-radius:var(--radius); border:none; }
.modal-header{ background:linear-gradient(120deg, var(--sidebar), var(--primary)); color:#fff; border-radius:var(--radius) var(--radius) 0 0; }
.modal-header .btn-close{ filter:invert(1); }

.toast-brand{ background:var(--sidebar); color:#fff; }

@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; }
  .main-area{ padding:20px 16px; }
  .kpi-row{ flex-direction:column; }
  .chart-row{ flex-direction:column; }
  .chart-row .panel.chart-side{ flex:1; }
}

::selection{ background:#D9C68F; color:#1A1206; }