/* ============================================================
   TAQADUM — LUXURY DARK REBUILD
   Deep obsidian base + liquid gold/orange gradients + glass
   ============================================================ */

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

:root{
  --bg-0:#07080b;
  --bg-1:#0d0f14;
  --bg-2:#12151c;
  --glass:rgba(255,255,255,.04);
  --glass-brd:rgba(255,255,255,.08);
  --glass-brd-hi:rgba(255,187,102,.35);
  --gold-1:#ffb347;
  --gold-2:#f47a10;
  --gold-3:#c2410c;
  --amber-glow:#ff9d2e;
  --text-hi:#f5ede1;
  --text-mid:#b9b3ac;
  --text-dim:#726c66;
  --ok:#2fd97a;
  --danger:#ff5470;
}

/* ---------- base ---------- */
body{
  font-family:'Cairo','IBM Plex Sans Arabic',Tahoma,Arial,sans-serif !important;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(244,122,16,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, rgba(255,179,71,.08), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, rgba(194,65,12,.10), transparent 60%),
    var(--bg-0) !important;
  color:var(--text-hi) !important;
  min-height:100vh;
}
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}

/* ---------- sidebar ---------- */
aside{
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0)) !important;
  border-left:1px solid var(--glass-brd) !important;
  box-shadow:-30px 0 60px rgba(0,0,0,.5) !important;
  backdrop-filter:blur(20px);
}
.brand{border-bottom:1px solid var(--glass-brd) !important}
.brand b{
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800 !important;
}
.brand small{color:var(--text-dim) !important}

.profile{
  background:linear-gradient(135deg, rgba(244,122,16,.14), rgba(244,122,16,.03)) !important;
  border:1px solid var(--glass-brd-hi) !important;
  box-shadow:0 8px 24px rgba(244,122,16,.08) inset;
}
.profile>span{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-3)) !important;
  box-shadow:0 4px 14px rgba(244,122,16,.45);
  font-weight:700;
}
.profile b{color:var(--text-hi) !important}
.profile small{color:var(--text-dim) !important}

nav a{color:var(--text-mid) !important;transition:.2s !important}
nav a:hover{
  background:linear-gradient(90deg, rgba(244,122,16,.14), rgba(244,122,16,.02)) !important;
  color:var(--gold-1) !important;
}
nav a.on{
  background:linear-gradient(90deg, rgba(244,122,16,.22), rgba(244,122,16,.03)) !important;
  color:#fff !important;
  border-right:3px solid var(--gold-2) !important;
  box-shadow:0 4px 18px rgba(244,122,16,.15);
}
.logout{color:var(--danger) !important;opacity:.85}
.logout:hover{opacity:1}

/* ---------- header ---------- */
main{position:relative;z-index:1}
header{
  background:rgba(13,15,20,.6) !important;
  border-bottom:1px solid var(--glass-brd) !important;
  backdrop-filter:blur(16px);
}
h1{
  color:var(--text-hi) !important;
  background:linear-gradient(90deg,#fff,#d9cfc2 60%,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;
}
header p,.title p{color:var(--text-dim) !important}

.primary{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-3)) !important;
  box-shadow:0 8px 24px rgba(244,122,16,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-weight:700 !important;
  letter-spacing:.2px;
}
.primary:hover{
  box-shadow:0 12px 30px rgba(244,122,16,.5), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ---------- glass cards everywhere ---------- */
.card,.stats article,.branchGrid article,.project,.taskCard,.moduleHead,
.chartCard,.gaugeCard,.auth,.modal form,.trackHero>div{
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border:1px solid var(--glass-brd) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(18px);
}
.card:hover,.stats article:hover,.branchGrid article:hover,.project:hover,.taskCard:hover{
  border-color:var(--glass-brd-hi) !important;
}

.stats i{
  background:linear-gradient(135deg, rgba(244,122,16,.25), rgba(244,122,16,.05)) !important;
  color:var(--gold-1) !important;
  box-shadow:0 6px 16px rgba(244,122,16,.2) inset;
}
.stats small,.stats em{color:var(--text-dim) !important}
.stats b{
  color:var(--text-hi) !important;
  background:linear-gradient(90deg,#fff,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;
}

.title h2{color:var(--text-hi) !important}
.map{background:rgba(255,255,255,.02) !important}
.list>div:not(.title){border-top:1px solid var(--glass-brd) !important}
.list>div:not(.title):hover{background:rgba(244,122,16,.06) !important}

/* status dots keep saturated colors but with glow */
.active{background:#2fd97a !important;box-shadow:0 0 10px #2fd97a99}
.attention{background:#ffb84d !important;box-shadow:0 0 10px #ffb84d99}
.urgent{background:#ff5470 !important;box-shadow:0 0 10px #ff547099}
.inactive{background:#5a5f68 !important}

/* ---------- tables ---------- */
.table th{
  background:rgba(255,255,255,.03) !important;
  color:var(--text-dim) !important;
  font-weight:700;
  border-bottom:1px solid var(--glass-brd) !important;
}
.table td{color:var(--text-mid) !important;border-top:1px solid var(--glass-brd) !important}
.table tbody tr:hover{background:rgba(244,122,16,.05) !important}
.ref{color:var(--gold-1) !important;font-weight:700}
.badge{
  background:rgba(255,255,255,.05) !important;
  color:var(--text-hi) !important;
  border:1px solid var(--glass-brd);
}

/* ---------- gauge / bars ---------- */
.gauge{
  background:conic-gradient(var(--gold-1) 0 91%, rgba(255,255,255,.06) 91%) !important;
  box-shadow:0 0 30px rgba(244,122,16,.25);
}
.gauge:before{background:var(--bg-1) !important}
.gauge b{
  background:linear-gradient(90deg,var(--gold-1),#fff3);
  -webkit-background-clip:text;background-clip:text;color:var(--gold-1) !important;
}
.gauge span{color:var(--text-dim) !important}
.miniBars p{background:rgba(255,255,255,.05) !important;color:var(--text-dim) !important}
.miniBars p i{background:linear-gradient(90deg,var(--gold-1),var(--gold-3)) !important}

/* ---------- modal / auth ---------- */
.modal{background:rgba(3,4,6,.75) !important;backdrop-filter:blur(6px)}
.modal form{color:var(--text-hi)}
.formGrid input,.formGrid select,.formGrid textarea,.auth input{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--glass-brd) !important;
  color:var(--text-hi) !important;
}
.formGrid input:focus,.formGrid select:focus,.formGrid textarea:focus,.auth input:focus{
  outline:none;border-color:var(--gold-2) !important;
  box-shadow:0 0 0 3px rgba(244,122,16,.18);
}
.formGrid label,.auth label{color:var(--text-mid) !important}
.close{background:rgba(255,255,255,.06) !important;color:var(--text-hi) !important}

.center{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(244,122,16,.18), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(255,179,71,.08), transparent 60%),
    var(--bg-0) !important;
}
.auth{border-top:none !important;position:relative;overflow:hidden}
.auth::before{
  content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2),var(--gold-3));
}
.auth h1{
  background:linear-gradient(90deg,#fff,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.auth p{color:var(--text-dim) !important}

.success{background:rgba(47,217,122,.1) !important;color:#5df0a0 !important;border:1px solid rgba(47,217,122,.25)}
.error{background:rgba(255,84,112,.1) !important;color:#ff8ba0 !important;border:1px solid rgba(255,84,112,.25)}

/* ---------- module.php extras ---------- */
.moduleHead{position:relative;overflow:hidden}
.moduleHead::after{
  content:'';position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(244,122,16,.25), transparent 70%);
}
.moduleHead h2{
  background:linear-gradient(90deg,#fff,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.kanban>article{border-top:3px solid var(--gold-2) !important;background:rgba(255,255,255,.03) !important}
.project::before{background:linear-gradient(var(--gold-1),var(--gold-3)) !important}
.progress{background:rgba(255,255,255,.06) !important}
.progress i,.progress>*{background:linear-gradient(90deg,var(--gold-1),var(--gold-3)) !important}
.pdf{
  background:rgba(244,122,16,.12) !important;color:var(--gold-1) !important;
  border:1px solid rgba(244,122,16,.3) !important;
}
.pdf:before{background:linear-gradient(135deg,var(--gold-1),var(--gold-3)) !important}
.status,.live{color:var(--text-hi) !important}
.danger{color:var(--danger) !important}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(244,122,16,.35);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(244,122,16,.55)}

/* subtle entrance animation */
.card,.stats article,.branchGrid article,.project,.taskCard{
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}