:root{
  --digic-primary:#0B2C5C;
  --digic-secondary:#2BA8E0;
  --digic-primary-rgb:11,44,92;
  --digic-secondary-rgb:43,168,224;
  --digic-sidebar-w:256px;
  --digic-bg:#f4f6fb;
  --digic-card-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--digic-bg);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:#1f2a44;
}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-content{flex:1;padding:1.25rem}
@media(min-width:992px){ .app-content{padding:1.75rem 2rem} }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--digic-sidebar-w);flex-shrink:0;
  background:linear-gradient(180deg,var(--digic-primary) 0%,#08203f 100%);
  color:#cdd8ec;position:fixed;inset:0 auto 0 0;z-index:1040;
  display:flex;flex-direction:column;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
}
.sidebar-brand img{height:34px;max-width:170px;object-fit:contain;background:#fff;border-radius:6px;padding:4px 6px}
.sidebar-nav{overflow-y:auto;padding:.5rem .6rem 2rem;flex:1}
.sidebar-nav .nav-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#7c92b8;margin:1rem .6rem .35rem}
.sidebar-nav a{
  display:flex;align-items:center;gap:.7rem;color:#cdd8ec;text-decoration:none;
  padding:.55rem .7rem;border-radius:8px;font-size:.92rem;font-weight:500;margin-bottom:2px;
}
.sidebar-nav a i{font-size:1.05rem;width:20px;text-align:center;color:#8fa6cd}
.sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav a.active{background:var(--digic-secondary);color:#fff;box-shadow:0 4px 10px rgba(var(--digic-secondary-rgb),.4)}
.sidebar-nav a.active i{color:#fff}
.app-main{margin-left:var(--digic-sidebar-w)}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .app-main{margin-left:0}
}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(8,17,33,.5);z-index:1035;display:none}
.sidebar-backdrop.show{display:block}

/* ---------- Topbar ---------- */
.topbar{
  height:62px;background:#fff;border-bottom:1px solid #e6eaf2;
  display:flex;align-items:center;gap:1rem;padding:0 1rem;position:sticky;top:0;z-index:1020;
}
.topbar .page-title{font-weight:700;color:var(--digic-primary);font-size:1.1rem;margin:0}
.topbar .btn-hamburger{border:none;background:transparent;font-size:1.4rem;color:var(--digic-primary)}
@media(min-width:992px){ .topbar .btn-hamburger{display:none} }
.topbar-spacer{flex:1}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--digic-secondary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.notif-bell{position:relative;color:#475467;font-size:1.25rem;text-decoration:none}
.notif-bell .badge{position:absolute;top:-6px;right:-8px;font-size:.6rem}

/* ---------- Cards / KPIs ---------- */
.card{border:1px solid #e9edf5;border-radius:12px;box-shadow:var(--digic-card-shadow)}
.card-header{background:#fff;border-bottom:1px solid #eef1f7;font-weight:600;color:var(--digic-primary)}
.kpi{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem}
.kpi .kpi-icon{
  width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;flex-shrink:0;
}
.kpi .kpi-label{font-size:.78rem;color:#667085;margin:0;text-transform:uppercase;letter-spacing:.03em}
.kpi .kpi-value{font-size:1.3rem;font-weight:700;color:#101828;margin:0;line-height:1.2}
.bg-navy{background:var(--digic-primary)!important}
.bg-sky{background:var(--digic-secondary)!important}
.text-navy{color:var(--digic-primary)!important}
.kpi-pos{color:#067647}.kpi-neg{color:#b42318}

/* ---------- Tables ---------- */
.table thead th{background:var(--digic-primary);color:#fff;font-weight:600;font-size:.82rem;border:none;white-space:nowrap}
.table-hover tbody tr:hover{background:#f0f6fc}
.table td,.table th{vertical-align:middle}

/* ---------- Buttons / badges ---------- */
.btn-primary{background:var(--digic-primary);border-color:var(--digic-primary)}
.btn-primary:hover{background:#08203f;border-color:#08203f}
.btn-sky{background:var(--digic-secondary);border-color:var(--digic-secondary);color:#fff}
.btn-sky:hover{background:#1d93c9;color:#fff}
.btn-outline-primary{color:var(--digic-primary);border-color:var(--digic-primary)}
.btn-outline-primary:hover{background:var(--digic-primary)}
a{color:var(--digic-secondary)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 20% -10%,#15406f 0%,var(--digic-primary) 45%,#06182f 100%);
  padding:1.5rem;}
.login-card{width:100%;max-width:410px;background:#fff;border-radius:16px;padding:2.2rem 2rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-card .brand{display:flex;justify-content:center;margin-bottom:.5rem}
.login-card .brand img{height:46px}
.login-card h1{font-size:1.25rem;text-align:center;color:var(--digic-primary);font-weight:700;margin:.4rem 0 .1rem}
.login-card .subtitle{text-align:center;color:#667085;font-size:.85rem;margin-bottom:1.4rem}
.login-card .form-label{font-weight:600;font-size:.85rem;color:#344054}

/* ---------- Footer ---------- */
.app-footer{padding:.9rem 1.5rem;color:#8a93a6;font-size:.8rem;border-top:1px solid #e6eaf2;background:#fff}

/* RTL support (Arabic/Kurdish UI in future) */
html[dir="rtl"] .sidebar{inset:0 0 0 auto}
html[dir="rtl"] .app-main{margin-left:0;margin-right:var(--digic-sidebar-w)}
@media(max-width:991.98px){ html[dir="rtl"] .app-main{margin-right:0} }