/* Niue Development Bank — Integrated Banking Platform (DEMO)  ·  TongaAI */
:root {
  --ndb-gold:    #c9a227;
  --ndb-gold-lt: #e5c45a;
  --ndb-black:   #0b0b0d;
  --ndb-navy:    #11203a;
  --ndb-navy-2:  #1c3158;
  --ndb-ink:     #14161c;
  --sidebar-w:   248px;
  --navbar-h:    58px;
  --good:#1f9d57; --bad:#d9384f; --warn:#e0a106; --info:#2f6fb0;
}

body { background: #eef1f5; color: #20242c; }

/* ---- NAVBAR ---- */
.ndb-navbar {
  background: linear-gradient(90deg, var(--ndb-black) 0%, var(--ndb-navy) 70%, var(--ndb-navy-2) 100%);
  /* min-height (not fixed height): on phones/tablets the toolbar wraps to a 2nd row;
     a fixed height would let that row overflow and collide with the page hero. The
     content offset (--navbar-h) is kept in sync with the real height by ndbSyncNavH(). */
  min-height: var(--navbar-h);
  row-gap: .25rem;
  z-index: 1050;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  border-bottom: 2px solid var(--ndb-gold);
}
.ndb-brand { color:#fff; letter-spacing:.3px; }
.ndb-brand .gold { color: var(--ndb-gold-lt); }
.badge-demo { background: var(--ndb-gold); color: var(--ndb-black); font-weight:800; letter-spacing:1px; }

/* ---- SIDEBAR ---- */
.ndb-sidebar {
  width: var(--sidebar-w);
  min-height: calc(100vh - var(--navbar-h));
  background: linear-gradient(180deg, var(--ndb-black), var(--ndb-navy) 120%);
  flex-shrink: 0; overflow-y: auto; transition: width .25s ease; z-index: 1040;
}
.ndb-sidebar.collapsed { width: 0; overflow: hidden; }
.sidebar-inner { padding-top: 6px; min-height: 100%; }
.sidebar-level { border-bottom:1px solid rgba(201,162,39,.25); }
.sidebar-link {
  color: rgba(255,255,255,.78); border-radius: 8px; padding: 8px 12px;
  font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .15s; margin-bottom: 2px;
}
.sidebar-link:hover { background: rgba(201,162,39,.16); color:#fff; }
.sidebar-link.active { background: var(--ndb-gold) !important; color: var(--ndb-black) !important; font-weight:700; }
.sidebar-child {
  color: rgba(255,255,255,.62); font-size:.8rem; padding:5px 10px; border-radius:6px;
  text-decoration:none; display:block; transition: all .15s;
}
.sidebar-child:hover { color:#fff; background: rgba(255,255,255,.07); }
.sidebar-child.active { color: var(--ndb-gold-lt) !important; font-weight:600; }
.sidebar-chevron { font-size:.7rem; transition: transform .2s; }
[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-section { color: var(--ndb-gold-lt); font-size:.66rem; text-transform:uppercase; letter-spacing:1px; padding:10px 14px 4px; opacity:.85; }

/* ---- MAIN ---- */
.ndb-main { min-height: calc(100vh - var(--navbar-h)); background:#eef1f5; overflow-x:hidden; }
.page-title { font-weight:700; color: var(--ndb-navy); }
.page-sub { color:#6c757d; font-size:.85rem; }

/* ---- KPI CARDS ---- */
.kpi-card { background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 2px 10px rgba(13,30,60,.06);
  border-left:4px solid transparent; transition: transform .15s, box-shadow .15s; height:100%; }
.kpi-card:hover { transform: translateY(-2px); box-shadow:0 6px 18px rgba(13,30,60,.12); }
.kpi-gold{border-left-color:var(--ndb-gold);} .kpi-green{border-left-color:var(--good);}
.kpi-red{border-left-color:var(--bad);} .kpi-blue{border-left-color:var(--info);}
.kpi-amber{border-left-color:var(--warn);} .kpi-navy{border-left-color:var(--ndb-navy);}
.kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7a8290;margin-bottom:4px;}
.kpi-value{font-size:1.45rem;font-weight:800;color:var(--ndb-ink);line-height:1.15;}
.kpi-sub{font-size:.72rem;color:#7a8290;margin-top:2px;}
.kpi-card .bi { opacity:.85; }

/* ---- CARDS ---- */
.card{border:1px solid #e6e9ef;border-radius:12px;box-shadow:0 1px 6px rgba(13,30,60,.05);}
.card-header{background:#fff;border-bottom:1px solid #eef0f4;border-radius:12px 12px 0 0 !important;font-weight:600;color:var(--ndb-navy);}
.card-header.dark{background:var(--ndb-navy);color:#fff;}
.section-head{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ndb-navy);}

/* ---- TABLES ---- */
.table th{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#55607a;}
.table td{font-size:.85rem;vertical-align:middle;}
.table-finance td, .table-finance th { font-variant-numeric: tabular-nums; }
.table-finance .total-row{border-top:2px solid var(--ndb-navy);font-weight:700;}
.table-finance .grand-total{border-top:3px double var(--ndb-navy);border-bottom:3px double var(--ndb-navy);font-weight:800;background:#faf6e9;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.btn-xs{font-size:.7rem;padding:.15rem .45rem;}

/* ---- BUTTONS ---- */
.btn-gold{background:var(--ndb-gold);border-color:var(--ndb-gold);color:var(--ndb-black);font-weight:700;}
.btn-gold:hover{background:var(--ndb-gold-lt);border-color:var(--ndb-gold-lt);color:var(--ndb-black);}
.btn-outline-gold{border-color:var(--ndb-gold);color:#a9851c;font-weight:600;}
.btn-outline-gold:hover{background:var(--ndb-gold);color:var(--ndb-black);}

/* ---- BADGES / STATUS PILLS ---- */
.badge{font-weight:600;}
.pill{padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;}
.pill-ok{background:#d8f3e2;color:#0f6b39;} .pill-warn{background:#fdf0cf;color:#8a6400;}
.pill-bad{background:#fbdde2;color:#8c1f2e;} .pill-info{background:#dcebf8;color:#1a4e84;}
.pill-mute{background:#e9ecf2;color:#5b6577;}

/* ---- PROGRESS ---- */
.progress{height:8px;border-radius:4px;}

/* ---- LOGIN ---- */
.login-wrap{min-height:100vh;background:radial-gradient(1200px 600px at 70% -10%, #1c3158 0%, var(--ndb-black) 60%);}
.login-card{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;}
.login-hero{background:linear-gradient(160deg,var(--ndb-black),var(--ndb-navy));color:#fff;}
.login-hero .gold{color:var(--ndb-gold-lt);}
.role-card{border:1px solid #e6e9ef;border-radius:12px;padding:10px 12px;cursor:pointer;transition:all .15s;background:#fff;}
.role-card:hover{border-color:var(--ndb-gold);box-shadow:0 6px 16px rgba(201,162,39,.18);transform:translateY(-1px);}
.role-card .lvl{font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#a9851c;}
.role-card .rname{font-weight:700;color:var(--ndb-navy);font-size:.9rem;}
.role-card .ruser{font-size:.72rem;color:#8a93a3;font-family:ui-monospace,monospace;}
.lvl-chip{display:inline-block;font-size:.6rem;font-weight:800;padding:.1rem .4rem;border-radius:4px;}
.lvl-1{background:#dcebf8;color:#1a4e84;} .lvl-2{background:#d8f3e2;color:#0f6b39;}
.lvl-3{background:#fdf0cf;color:#8a6400;} .lvl-4{background:#f3e2c2;color:#8a5a00;}

/* ---- DEMO BANNER ---- */
.demo-banner{background:linear-gradient(90deg,var(--ndb-black),var(--ndb-gold));color:#fff;text-align:center;
  font-size:.72rem;font-weight:700;padding:3px;letter-spacing:.5px;}

/* ---- FLOATING ASSISTANT ---- */
.ndb-fab{position:fixed;right:18px;bottom:18px;z-index:1080;}
.ndb-fab .fab-btn{width:56px;height:56px;border-radius:50%;background:var(--ndb-gold);color:var(--ndb-black);
  border:none;box-shadow:0 6px 18px rgba(0,0,0,.3);font-size:1.4rem;}
.ndb-assistant{position:fixed;right:18px;bottom:84px;width:340px;max-width:92vw;background:#fff;border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);z-index:1081;overflow:hidden;display:none;}
.ndb-assistant.open{display:block;}
.ndb-assistant .head{background:linear-gradient(160deg,var(--ndb-black),var(--ndb-navy));color:#fff;padding:12px 14px;}

/* ---- PRINT ---- */
@media print{
  .ndb-navbar,.ndb-sidebar,.btn,.nav-tabs,.ndb-fab,.no-print,
  .dataTables_filter,.dataTables_length,.dataTables_paginate{display:none !important;}
  .ndb-main{margin:0 !important;padding:8px !important;background:#fff !important;}
  .card{box-shadow:none !important;border:1px solid #ccc !important;}
  body{font-size:11pt;} #printArea{page-break-inside:avoid;}
}

/* ---- RESPONSIVE ---- */
@media (max-width:768px){
  .ndb-sidebar{position:fixed;left:-260px;top:var(--navbar-h);height:calc(100% - var(--navbar-h));transition:left .25s;z-index:1045;}
  .ndb-sidebar.mobile-open{left:0;}
  .ndb-main{margin-left:0 !important;}
  .kpi-value{font-size:1.15rem;}
}
canvas{max-height:300px;}

/* ---- DRILL-DOWN ---- */
.drill{cursor:pointer;border-bottom:1px dotted var(--ndb-gold);transition:background .12s;border-radius:3px;padding:0 1px;}
.drill:hover{background:rgba(201,162,39,.18);color:var(--ndb-navy);}
tr.drillable,.drillable{cursor:pointer;}
tr.drillable:hover{background:rgba(201,162,39,.10)!important;}
.drill-hint{font-size:.66rem;color:#a9851c;}
#drillModal .modal-dialog{max-width:880px;}
#drillModal .modal-body{max-height:70vh;overflow-y:auto;}
.drill-crumbs{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;font-size:.8rem;}
.drill-crumb{color:#2f6fb0;cursor:pointer;text-decoration:underline;}
.drill-crumb.active{color:var(--ndb-navy);font-weight:700;text-decoration:none;cursor:default;}
.drill-detail-key{color:#6c757d;width:40%;}
@media print{.drill{border-bottom:none;}}

/* ---- FLOW DIAGRAMS (input -> process -> output) ---- */
.flow-row{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;}
.flow-box{flex:1;border:1px solid #e6e9ef;border-radius:10px;padding:10px 12px;min-width:0;background:#fff;}
.flow-in{border-top:3px solid #2f6fb0;} .flow-proc{border-top:3px solid var(--ndb-gold);background:#faf7ee;} .flow-out{border-top:3px solid #1f9d57;}
.flow-io{font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7a8290;margin-bottom:6px;}
.flow-in .flow-io{color:#2f6fb0;} .flow-proc .flow-io{color:#a9851c;} .flow-out .flow-io{color:#1f9d57;}
.flow-arrow{display:flex;align-items:center;color:var(--ndb-gold);font-size:1.3rem;padding:0 6px;flex:0 0 auto;}
.flow-tbl{width:100%;font-size:.76rem;} .flow-tbl td{padding:2px 4px;vertical-align:top;border:none;}
.flow-k{color:#8a93a3;font-weight:700;width:42px;white-space:nowrap;}
.flow-steps{margin:0;padding-left:18px;font-size:.8rem;} .flow-steps li{margin-bottom:3px;}
@media (max-width:900px){.flow-row{flex-direction:column;} .flow-arrow{transform:rotate(90deg);justify-content:center;padding:4px 0;}}
@media print{.flow-card{page-break-inside:avoid;} .flow-box{border:1px solid #ccc;}}