/* =========================================================
   UAE SHIELD // COMMAND CENTER UI
   CLEAN THEME - NO LAYOUT CONFLICT
   layout positioning is handled by layout-override-v40.css
   ========================================================= */

:root{
  --bg:#030812;
  --bg2:#05111d;
  --panel:#071724;
  --panel2:#091e2d;
  --line:#15445d;
  --line2:#10354a;
  --cyan:#29e6ff;
  --green:#26efa3;
  --gold:#ffc84a;
  --red:#ff5365;
  --text:#e9f9ff;
  --muted:#7799aa;
  --light-text:#17394d;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  width:100%;
}

html{-webkit-text-size-adjust:100%}

body{
  direction:rtl;
  font-family:Tahoma,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 0%,rgba(41,230,255,.07),transparent 27%),
    linear-gradient(rgba(41,230,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(41,230,255,.015) 1px,transparent 1px),
    var(--bg);
  background-size:auto,32px 32px,32px 32px,auto;
  overflow-x:hidden;
}

img,canvas,video{max-width:100%}

/* =========================================================
   SIDEBAR - VISUAL ONLY
   IMPORTANT: no width/position here
   ========================================================= */

#mainSidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:linear-gradient(180deg,#041522 0%,#071d2c 62%,#0a2942 100%)!important;
  border-left:1px solid #17465f!important;
  box-shadow:-10px 0 30px rgba(0,0,0,.28)!important;
}

#mainSidebar .brand{
  flex:0 0 auto;
  padding:16px 12px!important;
  text-align:center!important;
  border-bottom:1px solid rgba(41,230,255,.12)!important;
}

.brand-logo{
  width:62px!important;
  height:62px!important;
  max-width:62px!important;
  max-height:62px!important;
  object-fit:contain!important;
  margin:0 auto 7px!important;
  display:block!important;
  filter:drop-shadow(0 0 10px rgba(41,230,255,.18));
}

.brand-title{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:900!important;
}

#mainSidebar .brand small{
  display:block!important;
  margin-top:4px!important;
  color:var(--gold)!important;
  font:800 8px monospace!important;
  letter-spacing:.7px!important;
}

#mainSidebar nav{
  flex:1 1 auto!important;
  padding:8px 0!important;
}

#mainSidebar nav a{
  min-height:39px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:2px 8px!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  color:#bdd7e4!important;
  text-decoration:none!important;
  font-size:11px!important;
  transition:.16s ease!important;
}

#mainSidebar nav a:hover{
  color:#fff!important;
  background:rgba(41,230,255,.065)!important;
  border-color:#17526e!important;
  box-shadow:inset 3px 0 0 var(--cyan)!important;
}

.nav-symbol{
  flex:0 0 20px!important;
  width:20px!important;
  color:var(--cyan)!important;
  text-align:center!important;
  font-weight:900!important;
}

.nav-divider{
  margin:10px 10px 4px!important;
  padding-top:8px!important;
  border-top:1px solid rgba(41,230,255,.11)!important;
  color:#52778a!important;
  font:800 7px monospace!important;
  letter-spacing:.8px!important;
}

.sidebar-user{
  flex:0 0 auto!important;
  margin:6px 8px 10px!important;
  padding:8px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid #143e55!important;
  border-radius:9px!important;
  background:#071522!important;
}

.sidebar-user-icon{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#0a2d43!important;
  color:var(--cyan)!important;
  border:1px solid #17617e!important;
  font-size:12px!important;
  font-weight:900!important;
}

.sidebar-user strong{
  display:block!important;
  color:#fff!important;
  font-size:9px!important;
}

.sidebar-user small{
  display:block!important;
  margin-top:2px!important;
  color:var(--green)!important;
  font:7px monospace!important;
}

.mobile-topbar,
.sidebar-overlay,
.sidebar-mobile-head{
  display:none;
}

/* =========================================================
   MAIN - VISUAL ONLY
   IMPORTANT: no width/margin-right here
   ========================================================= */

main{
  min-height:100vh!important;
  min-width:0!important;
  overflow-x:hidden!important;
  background:transparent!important;
}

.desktop-header{
  width:100%!important;
  min-height:60px!important;
  padding:10px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  background:#06111c!important;
  border-bottom:1px solid #10374c!important;
}

.desktop-header h2{
  margin:0!important;
  color:#fff!important;
  font-size:17px!important;
}

.desktop-header-sub{
  display:block!important;
  margin-top:3px!important;
  color:#64879a!important;
  font:7px monospace!important;
}

.desktop-user{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#8cabba!important;
  font-size:9px!important;
}

.desktop-online-dot{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:var(--green)!important;
  box-shadow:0 0 7px var(--green)!important;
}

.page-content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:14px 16px 22px!important;
  overflow:hidden!important;
}

/* =========================================================
   COMMON DARK PANELS
   ========================================================= */

.panel,
.box,
.mc-panel,
.member-card,
.chart-panel{
  min-width:0!important;
  background:linear-gradient(145deg,var(--panel),var(--panel2))!important;
  border:1px solid #123c54!important;
  border-radius:12px!important;
  color:var(--text)!important;
  box-shadow:inset 0 0 24px rgba(41,230,255,.014)!important;
}

.panel{
  padding:13px!important;
  margin-bottom:12px!important;
}

/* =========================================================
   WHITE / LIGHT CARDS
   ========================================================= */

.stat,
.att-stat,
.leave-stat,
.penalty-stat,
.promotion-stat,
.user-card,
.user-card summary,
.user-body,
.permission-grid label,
.profile-card,
.profile-box,
.profile-info,
.info-card,
.staff-card,
.profile-side,
.profile-main,
.eligibility-card,
.eligibility-panel{
  color:var(--light-text)!important;
}

/* keep colored numbers */
.att-stat strong,
.leave-stat strong,
.penalty-stat strong,
.promotion-stat strong{
  color:#0d6fae!important;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.cyber-hero{
  width:100%!important;
  min-width:0!important;
  padding:13px 15px!important;
  margin:0 0 10px!important;
  border:1px solid #17607d!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#071724,#092338)!important;
}

.cyber-title{font-size:17px!important}
.cyber-sub{font-size:7px!important}
.cyber-clock{font-size:15px!important}

.cyber-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 9px!important;
}

.cyber-action{
  min-width:0!important;
  min-height:66px!important;
  padding:9px!important;
  border-radius:9px!important;
}

.cyber-action .ca-num{
  font-size:17px!important;
  line-height:1.1!important;
}

.cyber-action .ca-label{
  font-size:7px!important;
  line-height:1.35!important;
}

.cyber-extra-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:9px!important;
}

.cyber-extra{
  min-width:0!important;
  padding:10px!important;
}

.dashboard-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:10px!important;
}

.dashboard-two,
.chart-grid,
.chart-grid.equal{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:10px!important;
}

.chart-panel{
  padding:11px!important;
  min-height:270px!important;
}

.chart-box{
  width:100%!important;
  height:215px!important;
  position:relative!important;
}

.chart-box.donut{
  height:210px!important;
  max-width:330px!important;
  margin:auto!important;
}

.stat-card,
.stat,
.att-stat,
.leave-stat,
.penalty-stat,
.promotion-stat{
  min-width:0!important;
}

/* =========================================================
   FORMS
   ========================================================= */

.grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.grid .full{
  grid-column:1/-1!important;
}

label{
  display:block!important;
  color:#abc6d4!important;
  font-size:10px!important;
  font-weight:700!important;
}

input,
select,
textarea{
  width:100%!important;
  margin-top:5px!important;
  padding:9px 10px!important;
  border:1px solid #17445c!important;
  border-radius:8px!important;
  background:#081a28!important;
  color:#dff5ff!important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:var(--cyan)!important;
  box-shadow:0 0 0 2px rgba(41,230,255,.08)!important;
}

textarea{
  min-height:86px!important;
  resize:vertical!important;
}

option{
  background:#081a28!important;
  color:#dff5ff!important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button{
  border-radius:8px!important;
  padding:8px 12px!important;
  border:0!important;
  cursor:pointer!important;
  font-size:10px!important;
  font-weight:800!important;
}

.btn.green{background:#16885d!important;color:#fff!important}
.btn.gold{background:#ad8218!important;color:#fff!important}
.btn.red{background:#bd3948!important;color:#fff!important}
.btn.blue{background:#147fb9!important;color:#fff!important}

/* =========================================================
   TABLES
   ========================================================= */

table{
  width:100%!important;
  border-collapse:collapse!important;
}

th,
td{
  padding:8px 7px!important;
  text-align:right!important;
  border-bottom:1px solid #123044!important;
  font-size:9px!important;
}

th{
  background:#0b304a!important;
  color:#9befff!important;
  white-space:nowrap!important;
}

/* default table text stays readable on dark panels */
td{
  color:#c4dbe6!important;
}

/* =========================================================
   MEMBER
   ========================================================= */

body.member-mode .desktop-header{
  display:none!important;
}

body.member-mode .page-content{
  padding-top:12px!important;
}