@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════
   TOKENS — LIGHT
══════════════════════════════════ */
:root {
  --primary:       #6366f1;
  --primary-dark:  #4f46e5;
  --primary-glow:  rgba(99,102,241,0.25);
  --primary-bg:    rgba(99,102,241,0.08);
  --success:       #10b981;
  --success-bg:    rgba(16,185,129,0.1);
  --danger:        #ef4444;
  --danger-bg:     rgba(239,68,68,0.1);
  --warning:       #f59e0b;
  --warning-bg:    rgba(245,158,11,0.1);
  --omar:          #8b5cf6;
  --omar-bg:       rgba(139,92,246,0.1);
  --cyan:          #06b6d4;
  --cyan-bg:       rgba(6,182,212,0.1);

  /* surfaces */
  --bg:           #f0f2f5;
  --card-bg:      #ffffff;
  --sidebar-bg:   #1a1a2e;
  --border:       #e5e7eb;
  --border-sub:   #f3f4f6;
  --topbar-bg:    #ffffff;
  --panel-head:   #fafafa;
  --table-head:   #f8f9fb;
  --table-stripe: #fafbff;
  --table-hover:  rgba(99,102,241,0.04);
  --input-bg:     #ffffff;
  --input-border: #d1d5db;
  --badge-bg:     #f3f4f6;
  --badge-text:   #6b7280;

  /* text */
  --text-dark:    #111827;
  --text-body:    #374151;
  --text-muted:   #6b7280;
  --text-faint:   #9ca3af;

  /* effects */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.14);
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --toggle-off: #d1d5db;
}

/* ══════════════════════════════════
   TOKENS — DARK
══════════════════════════════════ */
[data-theme="dark"] {
  --bg:           #0d1117;
  --card-bg:      #161b22;
  --sidebar-bg:   #0d1117;
  --border:       #21262d;
  --border-sub:   #161b22;
  --topbar-bg:    #161b22;
  --panel-head:   #0d1117;
  --table-head:   #0d1117;
  --table-stripe: rgba(255,255,255,0.01);
  --table-hover:  rgba(99,102,241,0.08);
  --input-bg:     #0d1117;
  --input-border: #30363d;
  --badge-bg:     #21262d;
  --badge-text:   #8b949e;

  --text-dark:    #e6edf3;
  --text-body:    #c9d1d9;
  --text-muted:   #7d8590;
  --text-faint:   #484f58;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.4);
  --shadow:     0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.7);
  --toggle-off: #30363d;

  --primary-bg:   rgba(99,102,241,0.12);
  --success-bg:   rgba(16,185,129,0.12);
  --danger-bg:    rgba(239,68,68,0.12);
  --warning-bg:   rgba(245,158,11,0.12);
  --omar-bg:      rgba(139,92,246,0.12);
  --cyan-bg:      rgba(6,182,212,0.12);
}

/* ══════════════════════════════════
   BASE
══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:400; line-height:1.6;
  color:var(--text-body); background:var(--bg);
  direction:rtl; -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}

/* ══════════════════════════════════
   SIDEBAR
══════════════════════════════════ */
.sidebar{
  position:fixed; top:0; right:0; width:230px; height:100vh;
  background:var(--sidebar-bg); z-index:300;
  display:flex; flex-direction:column;
  overflow-y:auto; transition:transform .3s cubic-bezier(.4,0,.2,1);
  border-left:1px solid rgba(255,255,255,0.04);
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}

.sidebar-logo{
  padding:20px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; gap:10px;
}
.logo-box{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--omar));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 12px var(--primary-glow);
}
.sidebar-logo h2{
  color:#e6edf3; font-size:0.82rem; font-weight:800;
  margin:0; line-height:1.3; letter-spacing:-.01em;
}
.year-badge{
  display:inline-block; background:var(--primary-bg);
  color:var(--primary); font-size:0.6rem; font-weight:800;
  padding:2px 8px; border-radius:20px; margin-top:3px;
  letter-spacing:.4px; border:1px solid rgba(99,102,241,.2);
}

.user-badge{
  margin:10px 10px 4px; padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05); border-radius:10px;
}
.u-label{font-size:.6rem;color:rgba(255,255,255,.25);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.u-name{color:#e6edf3;font-weight:700;font-size:.82rem;margin-bottom:4px}
.role-chip{font-size:.62rem;padding:2px 9px;border-radius:20px;font-weight:800;color:#fff;display:inline-block;letter-spacing:.2px}

.sidebar-nav{padding:8px 0;flex:1}
.nav-section-title{
  font-size:.58rem; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.2); padding:10px 16px 5px; font-weight:700;
}
.sidebar-nav a{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; margin:1px 8px;
  color:rgba(255,255,255,.45); text-decoration:none;
  font-size:.8rem; font-weight:600; transition:all .18s;
  border-radius:9px; border:1px solid transparent;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.sidebar-nav a.active{
  background:rgba(99,102,241,.18); color:#a5b4fc;
  border-color:rgba(99,102,241,.25);
  box-shadow:inset 2px 0 0 var(--primary);
}
.sidebar-nav a i{width:14px;text-align:center;font-size:.78rem;opacity:.8}
.sidebar-nav a.active i{opacity:1;color:var(--primary)}

.month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 10px 10px}
.month-pill{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:7px; padding:5px 2px; text-align:center;
  color:rgba(255,255,255,.4); font-size:.7rem; font-weight:700;
  text-decoration:none; transition:all .18s;
}
.month-pill:hover{background:var(--primary-bg);color:var(--primary);border-color:rgba(99,102,241,.3)}
.month-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px var(--primary-glow)}
.month-pill.has-data{border-color:rgba(16,185,129,.35)}

.sidebar-footer{padding:10px;border-top:1px solid rgba(255,255,255,.04)}
.sidebar-footer small{font-size:.6rem;color:rgba(255,255,255,.15);text-align:center;display:block;padding:4px 0}

.sidebar-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.7); z-index:299; backdrop-filter:blur(3px);
}
.sidebar-overlay.open{display:block}

/* ══════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════ */
.main-content{margin-right:230px;min-height:100vh;padding:0 22px 64px;transition:margin .3s}

/* ══════════════════════════════════
   GLOBAL TOP NAV
══════════════════════════════════ */
.global-topnav{
  display:flex; align-items:center; gap:10px;
  background:var(--topbar-bg); border-bottom:1px solid var(--border);
  padding:10px 18px; margin-bottom:20px; position:sticky; top:0; z-index:200;
  box-shadow:var(--shadow-xs);
}
[data-theme="light"] .global-topnav{border-radius:0 0 12px 12px}

.global-topnav-brand{font-weight:700;font-size:.82rem;color:var(--text-muted);white-space:nowrap}
.topnav-user{
  display:flex; align-items:center; gap:8px;
  padding:5px 11px; background:var(--bg);
  border-radius:9px; border:1px solid var(--border);
}
.topnav-avatar{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:.76rem; flex-shrink:0;
}
.topnav-user .u-nm{font-weight:700;font-size:.78rem;color:var(--text-dark);line-height:1.2}
.topnav-user .u-rl{font-size:.62rem;color:var(--text-muted)}

.logout-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--danger-bg); color:var(--danger);
  border:1px solid rgba(239,68,68,.2); border-radius:9px;
  padding:7px 12px; text-decoration:none;
  font-weight:700; font-size:.78rem; white-space:nowrap;
  transition:all .18s; font-family:'Cairo',sans-serif;
}
.logout-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.hamburger{
  display:none; background:none;
  border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; cursor:pointer;
  color:var(--text-muted); font-size:.9rem; transition:all .18s;
}
.hamburger:hover{background:var(--bg);color:var(--text-dark)}

.dark-toggle{
  display:flex; align-items:center; gap:6px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:7px 12px; cursor:pointer;
  font-family:'Cairo',sans-serif; font-size:.78rem; font-weight:700;
  color:var(--text-muted); transition:all .18s; white-space:nowrap;
}
.dark-toggle:hover{background:var(--primary-bg);color:var(--primary);border-color:rgba(99,102,241,.3)}

/* ══════════════════════════════════
   PAGE TOPBAR
══════════════════════════════════ */
.topbar{
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 20px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow-xs); gap:12px; flex-wrap:wrap;
}
.topbar h1{margin:0;font-size:1.1rem;font-weight:900;color:var(--text-dark);letter-spacing:-.02em}
.breadcrumb-sub{font-size:.72rem;color:var(--text-muted);margin-top:2px;font-weight:500}

/* ══════════════════════════════════
   STAT CARDS
══════════════════════════════════ */
.stat-card{
  background:var(--card-bg); border-radius:var(--radius);
  padding:18px 16px; box-shadow:var(--shadow-xs);
  border:1px solid var(--border); position:relative; overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.stat-card::before{
  content:''; position:absolute; top:0; right:0;
  width:56px; height:56px; border-radius:0 12px 0 56px;
  opacity:.07;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card .icon{
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-bottom:12px; position:relative; z-index:1;
}
.stat-card .label{font-size:.64rem;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.stat-card .value{font-size:1.25rem;font-weight:900;line-height:1.15;color:var(--text-dark);letter-spacing:-.02em}

.stat-card.revenue{border-top:2px solid var(--success)}
.stat-card.revenue .icon{background:var(--success-bg);color:var(--success)}
.stat-card.revenue::before{background:var(--success)}
.stat-card.expense{border-top:2px solid var(--danger)}
.stat-card.expense .icon{background:var(--danger-bg);color:var(--danger)}
.stat-card.expense::before{background:var(--danger)}
.stat-card.salary{border-top:2px solid var(--warning)}
.stat-card.salary .icon{background:var(--warning-bg);color:var(--warning)}
.stat-card.salary::before{background:var(--warning)}
.stat-card.profit{border-top:2px solid var(--primary)}
.stat-card.profit .icon{background:var(--primary-bg);color:var(--primary)}
.stat-card.profit::before{background:var(--primary)}

/* ══════════════════════════════════
   PANELS
══════════════════════════════════ */
.panel{
  background:var(--card-bg); border-radius:var(--radius);
  box-shadow:var(--shadow-xs); border:1px solid var(--border);
  margin-bottom:18px; overflow:hidden;
}
.panel-header{
  padding:13px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-head); flex-wrap:wrap; gap:8px; min-height:50px;
}
.panel-header h5{margin:0;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:800;color:var(--text-dark)}
.panel-body{padding:18px}

/* ══════════════════════════════════
   TABLES
══════════════════════════════════ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll::-webkit-scrollbar{height:3px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.table-custom{width:100%;border-collapse:collapse;font-size:.8rem}
.table-custom th{
  background:var(--table-head); padding:9px 13px;
  text-align:right; font-weight:800; color:var(--text-muted);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.6px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table-custom td{
  padding:10px 13px; border-bottom:1px solid var(--border-sub);
  vertical-align:middle; color:var(--text-body);
}
.table-custom tbody tr:nth-child(even) td{background:var(--table-stripe)}
.table-custom tr:hover td{background:var(--table-hover)!important}
.table-custom tr:last-child td{border-bottom:none}

.tfoot-dark td{
  background:#080e1a!important;
  color:#c9d1d9!important; padding:11px 13px; font-weight:800;
}
[data-theme="light"] .tfoot-dark td{background:#111827!important;color:#f9fafb!important}

/* ══════════════════════════════════
   BADGES
══════════════════════════════════ */
.date-badge{
  background:var(--badge-bg); color:var(--badge-text);
  padding:3px 8px; border-radius:6px; font-size:.7rem;
  font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.badge-custom{padding:3px 10px;border-radius:20px;font-size:.67rem;font-weight:700;white-space:nowrap}
.badge-rent{background:var(--omar-bg);color:var(--omar)}
.badge-electric{background:var(--warning-bg);color:var(--warning)}
.badge-other{background:var(--badge-bg);color:var(--badge-text)}

.badge-amount{padding:4px 11px;border-radius:20px;font-size:.75rem;font-weight:700;white-space:nowrap}
.badge-amount.purple{background:var(--omar-bg);color:var(--omar)}
.badge-amount.cyan{background:var(--cyan-bg);color:var(--cyan)}
.badge-amount.red{background:var(--danger-bg);color:var(--danger)}
.badge-amount.green{background:var(--success-bg);color:var(--success)}
.badge-amount.yellow{background:var(--warning-bg);color:var(--warning)}
.badge-amount.blue{background:var(--primary-bg);color:var(--primary)}

.current-month-badge{
  background:var(--primary); color:#fff;
  font-size:.58rem; padding:2px 7px; border-radius:20px; font-weight:800;
}

/* ══════════════════════════════════
   FORMS
══════════════════════════════════ */
.form-control,.form-select{
  border-radius:var(--radius-sm); border:1.5px solid var(--input-border);
  padding:9px 13px; font-family:'Cairo',sans-serif; font-size:.83rem;
  font-weight:500; transition:border-color .18s,box-shadow .18s;
  background:var(--input-bg); color:var(--text-dark); width:100%; line-height:1.5;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); outline:none;
}
.form-control::placeholder{color:var(--text-faint);font-weight:400}
.form-label{
  font-weight:700; font-size:.72rem; margin-bottom:5px;
  color:var(--text-dark); display:block;
  text-transform:uppercase; letter-spacing:.5px;
}

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn-primary-custom{
  background:var(--primary); color:#fff; border:none;
  padding:9px 18px; border-radius:var(--radius-sm);
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.8rem;
  cursor:pointer; transition:all .18s;
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; white-space:nowrap; line-height:1;
  box-shadow:0 2px 8px var(--primary-glow);
}
.btn-primary-custom:hover{
  background:var(--primary-dark); transform:translateY(-1px);
  color:#fff; box-shadow:0 4px 14px var(--primary-glow);
}
.btn-primary-custom:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-danger-custom{
  background:var(--danger-bg); color:var(--danger);
  border:1px solid rgba(239,68,68,.2);
  padding:5px 11px; border-radius:7px;
  font-family:'Cairo',sans-serif; font-size:.73rem;
  cursor:pointer; transition:all .18s; font-weight:700;
}
.btn-danger-custom:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-delete{padding:5px 9px}

.btn-icon-blue{
  background:var(--primary-bg); color:var(--primary);
  padding:5px 9px; border-radius:7px; font-size:.7rem;
  text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:4px;
  transition:all .18s; border:1px solid transparent;
}
.btn-icon-blue:hover{background:var(--primary);color:#fff}

.btn-icon-green{
  background:var(--success-bg); color:var(--success);
  padding:5px 9px; border-radius:7px; font-size:.7rem;
  text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:4px;
  transition:all .18s; border:1px solid transparent;
}
.btn-icon-green:hover{background:var(--success);color:#fff}

/* ══════════════════════════════════
   TABS
══════════════════════════════════ */
.tab-bar{
  display:flex; gap:4px; background:var(--card-bg);
  padding:5px; border-radius:var(--radius);
  box-shadow:var(--shadow-xs); border:1px solid var(--border);
  flex-wrap:wrap; margin-bottom:16px;
}
.tab-pill{
  padding:8px 13px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:700; font-size:.76rem;
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; transition:all .18s; color:var(--text-muted);
  border:1px solid transparent;
}
.tab-pill:hover{background:var(--bg);color:var(--text-dark)}
.tab-pill.active{color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* ══════════════════════════════════
   ALERTS
══════════════════════════════════ */
.alert-custom{
  padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:14px;
  font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:9px;
}
.alert-success{background:var(--success-bg);color:#065f46;border:1px solid rgba(16,185,129,.2)}
.alert-danger{background:var(--danger-bg);color:#991b1b;border:1px solid rgba(239,68,68,.2)}

/* ══════════════════════════════════
   INFO BANNERS
══════════════════════════════════ */
.info-banner{
  padding:11px 15px; border-radius:var(--radius-sm);
  font-size:.78rem; font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.info-banner.purple{background:var(--omar-bg);border:1px solid rgba(139,92,246,.2);color:var(--omar)}
.info-banner.cyan{background:var(--cyan-bg);border:1px solid rgba(6,182,212,.2);color:var(--cyan)}
.info-banner.red{background:var(--danger-bg);border:1px solid rgba(239,68,68,.2);color:var(--danger)}
.info-banner.yellow{background:var(--warning-bg);border:1px solid rgba(245,158,11,.2);color:var(--warning)}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:18px}

/* ══════════════════════════════════
   MONTH CARDS
══════════════════════════════════ */
.month-overview-card{
  background:var(--card-bg); border-radius:var(--radius);
  border:1px solid var(--border); padding:14px;
  transition:all .2s; cursor:pointer;
  text-decoration:none; color:var(--text-dark); display:block;
  box-shadow:var(--shadow-xs);
}
.month-overview-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary);color:var(--text-dark)}
.month-current{
  border-color:var(--primary)!important;
  background:linear-gradient(135deg,var(--card-bg),var(--primary-bg))!important;
  box-shadow:0 0 0 3px var(--primary-bg)!important;
}
.month-name{font-weight:800;font-size:.88rem;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;color:var(--text-dark)}
.month-mini-stat{font-size:.7rem;color:var(--text-muted);margin-bottom:3px;display:flex;justify-content:space-between;font-weight:500}
.month-net{margin-top:9px;padding-top:8px;border-top:1px solid var(--border-sub)}
.month-net .net-label{font-size:.6rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.month-net .net-value{font-size:.98rem;font-weight:900;letter-spacing:-.02em}

/* ══════════════════════════════════
   REPORTS
══════════════════════════════════ */
.report-header{
  background:linear-gradient(135deg,#080e1a,#0d1630,#110d1f);
  color:#fff;padding:28px;border-radius:var(--radius) var(--radius) 0 0;
  text-align:center;position:relative;overflow:hidden;
}
.report-header::before{
  content:'';position:absolute;top:-60px;left:-60px;
  width:200px;height:200px;background:var(--primary-glow);border-radius:50%;filter:blur(60px);
}
.report-header::after{
  content:'';position:absolute;bottom:-40px;right:-40px;
  width:150px;height:150px;background:rgba(139,92,246,.2);border-radius:50%;filter:blur(50px);
}
.report-logo{font-size:2.2rem;margin-bottom:8px;display:block;position:relative;z-index:1}
.report-title{font-size:1.3rem;font-weight:900;margin-bottom:3px;position:relative;z-index:1;letter-spacing:-.02em}
.report-subtitle{opacity:.5;font-size:.82rem;position:relative;z-index:1}
.report-divider{height:3px;background:linear-gradient(90deg,var(--primary),var(--cyan),var(--success))}
.report-section{padding:20px;border-bottom:1px solid var(--border)}
.report-section:last-child{border-bottom:none}
.report-section-title{
  font-size:.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;color:var(--text-muted);margin-bottom:13px;
  display:flex;align-items:center;gap:8px;
}
.partner-card{
  background:var(--success-bg);border:1px solid rgba(16,185,129,.2);
  border-radius:var(--radius);padding:18px;text-align:center;
}
.partner-card .partner-icon{font-size:1.8rem;margin-bottom:8px;display:block}
.partner-card .partner-label{font-size:.72rem;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.partner-card .partner-value{font-size:1.4rem;font-weight:900;color:var(--success);letter-spacing:-.03em}

.summary-box{border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--border)}
.summary-box.blue{border-color:var(--primary)}
.summary-box.purple{border-color:var(--omar)}
.summary-box-header{padding:11px 16px;color:#fff;font-weight:800;font-size:.83rem;display:flex;align-items:center;gap:8px}
.summary-box.blue .summary-box-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.summary-box.purple .summary-box-header{background:linear-gradient(135deg,#6d28d9,var(--omar))}
.sum-table{width:100%;border-collapse:collapse;background:var(--card-bg)}
.sum-table td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text-body)}
.sum-table tr:last-child td{border-bottom:none}
.sum-final td{border-top:2px solid var(--border)!important;font-weight:800;font-size:.92rem;border-bottom:none!important}
.sum-highlight-blue{background:var(--primary-bg)!important}

/* ══════════════════════════════════
   EMPLOYEE CARDS
══════════════════════════════════ */
.emp-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;transition:all .18s}
.emp-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.emp-card.emp-inactive{opacity:.55}
.emp-card-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.emp-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:900;color:#fff;flex-shrink:0}
.emp-info{flex:1;min-width:130px}
.emp-name{font-weight:800;font-size:.86rem;color:var(--text-dark);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.emp-pos{font-size:.7rem;color:var(--text-muted);margin-top:1px;font-weight:500}
.emp-phone{font-size:.7rem;color:var(--text-muted);margin-top:1px}
.emp-sal-info{text-align:left;flex-shrink:0}
.emp-card-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--border-sub)}
.emp-status-badge{font-size:.62rem;padding:2px 8px;border-radius:20px;font-weight:700}
.emp-status-badge.active{background:var(--success-bg);color:var(--success)}
.emp-status-badge.inactive{background:var(--badge-bg);color:var(--text-muted)}

/* ══════════════════════════════════
   PERM TOGGLE
══════════════════════════════════ */
.perm-toggle{width:42px;height:22px;background:var(--toggle-off);border-radius:20px;position:relative;transition:background .2s;flex-shrink:0}
.perm-toggle.on{background:var(--primary)}
.perm-toggle-ball{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;right:3px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.perm-toggle.on .perm-toggle-ball{transform:translateX(-20px)}

/* ══════════════════════════════════
   EMPTY STATE
══════════════════════════════════ */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-state i{font-size:2.2rem;margin-bottom:10px;opacity:.2;display:block}
.empty-state p{margin:0;font-size:.8rem;font-weight:500}

/* ══════════════════════════════════
   LOGIN PAGE
══════════════════════════════════ */
.login-wrap{
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:20px;
  background:linear-gradient(135deg,#080e1a 0%,#0d1630 50%,#110d1f 100%);
}
.login-card{
  background:#161b22; border:1px solid #21262d;
  border-radius:var(--radius-lg); padding:36px;
  width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative; overflow:hidden;
}
.login-card::before{
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px; background:var(--primary-glow);
  border-radius:50%; filter:blur(60px); pointer-events:none;
}
.login-logo{text-align:center;margin-bottom:28px;position:relative;z-index:1}
.login-logo .icon{
  width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--omar));
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin:0 auto 12px;box-shadow:0 8px 24px var(--primary-glow);
}
.login-logo h1{font-size:1.2rem;font-weight:900;color:#e6edf3;margin:0;letter-spacing:-.02em}
.login-logo p{font-size:.82rem;color:#7d8590;margin:4px 0 0}
.login-card .form-control{background:#0d1117;border-color:#30363d;color:#e6edf3}
.login-card .form-control::placeholder{color:#484f58}
.login-card .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.login-card .form-label{color:#c9d1d9}
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:.75rem;font-weight:700;margin:4px}
.role-admin{background:var(--primary-bg);color:var(--primary)}
.role-partner{background:var(--success-bg);color:var(--success)}
.role-omar{background:var(--omar-bg);color:var(--omar)}

/* ══════════════════════════════════
   UTILITIES
══════════════════════════════════ */
.text-primary-c{color:var(--primary)!important}
.text-success-c{color:var(--success)!important}
.text-danger-c{color:var(--danger)!important}
.text-warning-c{color:var(--warning)!important}
.text-muted-c{color:var(--text-muted)!important}
.text-omar{color:var(--omar)!important}
.text-cyan-c{color:var(--cyan)!important}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.fw-900{font-weight:900}
.d-flex{display:flex!important}.gap-2{gap:8px!important}.gap-3{gap:12px!important}.flex-wrap{flex-wrap:wrap!important}
.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:8px!important}.mb-3{margin-bottom:12px!important}.mb-4{margin-bottom:18px!important}
.mt-2{margin-top:8px!important}.mt-3{margin-top:12px!important}

/* ══════════════════════════════════
   DARK MODE EXPLICIT FIXES
══════════════════════════════════ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{background:var(--input-bg)!important;border-color:var(--input-border)!important;color:var(--text-dark)!important}
[data-theme="dark"] .form-label{color:var(--text-dark)}
[data-theme="dark"] select option{background:#161b22}
[data-theme="dark"] .stat-card{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .panel{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .panel-header{background:var(--panel-head);border-color:var(--border)}
[data-theme="dark"] .topbar{background:var(--topbar-bg);border-color:var(--border)}
[data-theme="dark"] .tab-bar{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .date-badge{background:var(--badge-bg);color:var(--badge-text)}
[data-theme="dark"] .month-overview-card{background:var(--card-bg);border-color:var(--border);color:var(--text-dark)}
[data-theme="dark"] .month-current{background:linear-gradient(135deg,var(--card-bg),rgba(99,102,241,.08))!important}
[data-theme="dark"] .partner-card{background:rgba(16,185,129,.08)!important;border-color:rgba(16,185,129,.2)!important}
[data-theme="dark"] .summary-box.blue{border-color:var(--primary)}
[data-theme="dark"] .summary-box.purple{border-color:var(--omar)}
[data-theme="dark"] .sum-table{background:var(--card-bg)}
[data-theme="dark"] .sum-highlight-blue{background:var(--primary-bg)!important}
[data-theme="dark"] .report-section{background:var(--card-bg)!important;border-color:var(--border)}
[data-theme="dark"] .info-banner.purple{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.25);color:#c4b5fd}
[data-theme="dark"] .info-banner.red{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fca5a5}
[data-theme="dark"] .info-banner.yellow{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fde68a}
[data-theme="dark"] .info-banner.cyan{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.25);color:#67e8f9}
[data-theme="dark"] .logout-btn{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:#fca5a5}
[data-theme="dark"] .logout-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
[data-theme="dark"] .topnav-user{background:rgba(255,255,255,.04)}
[data-theme="dark"] .btn-icon-blue{background:var(--primary-bg)}
[data-theme="dark"] .btn-icon-green{background:var(--success-bg)}
[data-theme="dark"] .btn-danger-custom{background:var(--danger-bg)}
[data-theme="dark"] .emp-card{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .badge-rent{background:var(--omar-bg);color:var(--omar)}
[data-theme="dark"] .month-overview-card:hover{border-color:var(--primary)}

/* ══════════════════════════════════
   PRINT
══════════════════════════════════ */
@media print{
  .sidebar,.global-topnav,.topbar .btn-primary-custom,.no-print,.hamburger,.dark-toggle,.sidebar-overlay{display:none!important}
  .main-content{margin:0!important;padding:0!important}
  .panel{box-shadow:none!important;border:1px solid #ddd!important}
  body{background:#fff!important;color:#000!important;font-size:11pt}
  .table-custom th{background:#f5f5f5!important}
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:991px){
  .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main-content{margin-right:0;padding:0 15px 50px}
  .hamburger{display:flex;align-items:center}
  .global-topnav{padding:8px 14px}
  .topbar h1{font-size:1rem}
}
@media (max-width:576px){
  .main-content{padding:0 11px 50px}
  .topbar{padding:11px 13px;margin-bottom:12px}
  .topbar h1{font-size:.9rem}
  .breadcrumb-sub{font-size:.66rem}
  .stat-card{padding:13px 12px}
  .stat-card .icon{width:36px;height:36px;margin-bottom:8px}
  .stat-card .value{font-size:1.1rem}
  .stat-card .label{font-size:.6rem}
  .panel-header{padding:10px 13px}
  .panel-body{padding:13px}
  .table-custom th,.table-custom td{padding:9px 10px;font-size:.73rem}
  .btn-primary-custom{padding:8px 13px;font-size:.77rem}
  .tab-pill{padding:7px 9px;font-size:.72rem}
  .tab-pill i{display:none}
  .report-header{padding:20px 16px}
  .report-title{font-size:1.05rem}
  .report-section{padding:13px}
  .month-grid{grid-template-columns:repeat(4,1fr)}
  .login-card{padding:24px 18px;border-radius:14px}
}

/* ── DATE INPUT GLOBAL STYLING ── */
input[type="date"],
input[type="month"] {
  color-scheme: inherit;
  background: var(--input-bg) !important;
  color: var(--input-txt) !important;
  border: 1.5px solid var(--input-bd) !important;
  cursor: pointer;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.2);
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }