:root {--bg:#071221;--surface:#10233a;--card:#10253f;--line:#27415c;--soft:#8fa9c3;--white:#ecf6ff;--blue:#177df2;--cyan:#2addc0;--amber:#ffac48;--red:#ff6879;--purple:#a594ff;--shadow:0 16px 48px #0004}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.hidden{display:none!important}
.layout{display:grid;grid-template-columns:254px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#081829,#0b2037);border-left:1px solid #24415f;padding:22px 14px;overflow:auto}.brand{display:flex;align-items:center;gap:12px;padding:8px 12px 26px}.flame{height:46px;width:43px;background:linear-gradient(155deg,#ff7d49 32%,#117bf1 33%,#0089d5);clip-path:polygon(54% 0%,84% 40%,100% 68%,82% 97%,37% 100%,4% 72%,19% 45%);border-radius:20px}.brand strong{display:block;font-size:22px;letter-spacing:.5px}.brand small{color:#7bbbe9}.navtitle{color:#7594b3;padding:18px 13px 10px;font-size:11px;letter-spacing:1px}.nav{display:flex;flex-direction:column;gap:4px}.nav button{background:transparent;border:0;color:#b1c8dd;border-radius:11px;text-align:right;padding:12px 14px;width:100%;display:flex;align-items:center;gap:13px}.nav button:hover,.nav button.active{background:linear-gradient(90deg,#0f79ef,#0950a3);color:white}.nav span{font-size:17px;width:22px;text-align:center}.main{min-width:0}.header{position:sticky;top:0;z-index:10;background:#0b1d31e8;backdrop-filter:blur(14px);height:76px;border-bottom:1px solid #264461;display:flex;align-items:center;justify-content:space-between;padding:10px 30px;gap:15px}.header h1{margin:0;font-size:20px}.header small{display:block;color:#82a4c1;margin-top:4px}.header-right{display:flex;gap:16px;align-items:center}.user-chip{background:#152e48;padding:10px 15px;border:1px solid #294c71;border-radius:12px}.content{padding:26px 30px 50px;max-width:1750px;margin:auto}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 13% 50%,#1967bc55,transparent 32%),linear-gradient(115deg,#0d2237,#0c3b6d 65%,#0a1e31);border-radius:20px;min-height:168px;padding:30px;border:1px solid #326293;display:flex;align-items:center;justify-content:space-between}.hero h2{font-size:28px;margin:6px 0}.hero p{margin:0;color:#b6d0e7}.hero-art{font-size:80px;opacity:.7}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:18px 0}.stat{border:1px solid var(--line);background:linear-gradient(145deg,#123253,#0e2036);border-radius:16px;padding:20px;min-height:118px}.stat small{color:#95b4ce}.stat b{font-size:30px;display:block;margin-top:9px}.stat .symbol{float:left;font-size:26px;opacity:.8}.section{background:var(--surface);border:1px solid #25435f;border-radius:16px;padding:22px;margin-top:18px;min-width:0}.section h3{margin:0 0 20px;font-size:18px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:15px}.section-head h3{margin:0}.muted{color:var(--soft)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field span{color:#b8cbe0;font-size:12px}input,select,textarea{width:100%;background:#0b1c30;color:var(--white);border:1px solid #31516b;border-radius:10px;padding:12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px #177df222}select option{background:#0b1c30}textarea{resize:vertical;min-height:90px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:end}.full{grid-column:1/-1}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{padding:11px 17px;border-radius:9px;border:1px solid #356292;background:#153653;color:white}.btn:hover{filter:brightness(1.15)}.btn.primary{background:var(--blue);border-color:var(--blue)}.btn.ok{border-color:#23866c;color:#38e2a9}.btn.danger{border-color:#844157;color:#ff9aac}.btn:disabled{opacity:.4;cursor:not-allowed}.table-wrap{overflow:auto;border-radius:12px;border:1px solid #29445c}table{width:100%;border-collapse:collapse;min-width:650px;text-align:right}th,td{border-bottom:1px solid #213c55;padding:13px 14px;vertical-align:middle}th{background:#14304e;color:#bcd6ee;font-weight:600}td{color:#dceafb}tr:last-child td{border-bottom:0}tr:hover td{background:#ffffff04}.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#31516b;color:#d7ecff;white-space:nowrap}.pill.good{background:#083e38;color:#52efbd}.pill.bad{background:#4a2734;color:#ff9fae}.pill.warn{background:#594126;color:#ffca7d}.pill.blue{background:#154179;color:#8bc4ff}.settings-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.toggle{display:flex;align-items:center;justify-content:space-between;background:#0c1e33;border:1px solid #294963;padding:13px 16px;border-radius:12px;gap:12px}.toggle b{font-size:13px}.toggle small{display:block;color:var(--soft);margin-top:4px}.toggle input{appearance:none;width:46px;height:25px;border-radius:99px;background:#536275;position:relative;flex-shrink:0;cursor:pointer}.toggle input:checked{background:#0e86ef}.toggle input:after{content:'';position:absolute;width:18px;height:18px;top:2px;right:3px;background:white;border-radius:50%;transition:.18s}.toggle input:checked:after{right:23px}.empty{padding:35px;text-align:center;color:var(--soft)}.login-outer{min-height:100vh;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 70% 30%,#0a4a86,#071221 55%)}.login-card{width:min(460px,100%);background:#0c243c;border:1px solid #33628c;border-radius:24px;padding:34px;box-shadow:var(--shadow)}.login-card h1{font-size:30px;margin:0}.login-card p{color:#afcce5}.login-card .field{margin-top:19px}.login-card button{margin-top:23px;width:100%}#toast{position:fixed;bottom:20px;left:24px;z-index:100;max-width:430px}.toast{background:#1b425e;padding:15px 20px;border:1px solid #5c99be;border-radius:11px;box-shadow:var(--shadow);margin-top:8px}.loading{display:grid;place-items:center;height:90vh;color:var(--soft)}.tiny{font-size:12px}.rightpane{padding:15px;background:#0c2036;border-radius:12px}.pillbox{display:flex;gap:8px;flex-wrap:wrap}.banner{background:#563a1c;color:#ffdcad;padding:14px;border-radius:12px;border:1px solid #956a38;margin-bottom:12px}.mobile-toggle{display:none}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.settings-list{grid-template-columns:1fr}}
@media(max-width:760px){.layout{display:block}.sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-110%);transition:.2s;z-index:40;box-shadow:var(--shadow);width:270px;direction:rtl}.sidebar.open{transform:translateX(0)}.mobile-toggle{display:block}.header{padding:10px 15px;height:65px}.content{padding:14px}.hero{padding:23px;min-height:130px}.hero h2{font-size:22px}.hero-art{font-size:46px}.stats{gap:9px}.stat{padding:13px;min-height:98px}.stat b{font-size:23px}.form-grid{grid-template-columns:1fr}.header-right .user-chip{display:none}.section{padding:14px}}

/* v4 Digital Attendance UX */
.attendance-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:24px;border:1px solid rgba(35,182,245,.3);background:linear-gradient(110deg,#082747,#111c39 72%,#19233e);margin-bottom:20px}
.attendance-hero h2{margin:11px 0;font-size:clamp(23px,3vw,34px);color:#f0f7ff}.attendance-hero p{color:#aac8e6;line-height:1.8;max-width:670px}
.attendance-icon{font-size:75px;color:#42d5ec;text-shadow:0 0 22px #00bcff77}
.key-row{display:flex;justify-content:space-between;align-items:center;padding:13px;gap:16px;border-bottom:1px solid #ffffff14}
.key-row small{display:block;margin-top:5px}
@media(max-width:680px){.attendance-hero{padding:19px}.attendance-icon{font-size:42px}.key-row{flex-wrap:wrap}}

/* ERP Modern UI layer */
:root{
  --bg:#f4f7fb;--surface:#ffffff;--card:#ffffff;--line:#e4eaf2;--soft:#718096;
  --white:#162235;--blue:#2563eb;--cyan:#0f9f9a;--amber:#d97706;--red:#dc3f57;
  --purple:#6956d8;--shadow:0 10px 28px rgba(31,48,78,.08);--shadow-lg:0 18px 45px rgba(31,48,78,.12)
}
*{scrollbar-width:thin;scrollbar-color:#b8c5d6 transparent}
html{background:var(--bg)}
body{background:linear-gradient(135deg,#f8fafc 0%,#eef4fb 100%);color:var(--white);font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.55;direction:rtl}
.layout{grid-template-columns:280px minmax(0,1fr);background:transparent}
.sidebar{position:sticky;right:0;left:auto;background:#0c1d33;border:0;border-left:1px solid #203b5b;padding:20px 14px;box-shadow:8px 0 24px rgba(14,32,58,.08)}
.main{background:transparent}
.brand{padding:9px 12px 28px;gap:11px}.brand strong{font-size:19px;color:#fff}.brand small{color:#9db7d3;font-size:10px}
.flame{height:42px;width:39px;filter:drop-shadow(0 8px 12px #1985e955)}
.navtitle{color:#7f9abb;padding:20px 13px 9px;font-weight:700;font-size:10px;letter-spacing:.8px}
.nav{gap:5px}.nav button{color:#b9c9dc;border-radius:12px;padding:12px 14px;font-weight:600;transition:all .18s ease}
.nav button:hover{background:#183554;color:#fff;transform:translateX(-2px)}.nav button.active{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 8px 18px #2563eb35;color:#fff}
.header{height:82px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(31,48,78,.04);padding:12px 34px;color:var(--white)}
.header h1{font-size:22px;letter-spacing:-.2px}.header small{color:#8190a5}.header-right{gap:10px}.user-chip{background:#f0f5fb;border:1px solid #dbe5f0;color:#2d405c;padding:9px 14px;border-radius:10px;font-size:12px}
.content{padding:30px 34px 54px;max-width:1800px}
.hero{border:0;border-radius:20px;min-height:188px;padding:34px;background:linear-gradient(110deg,#0d2b4d 0%,#164f86 68%,#176c95 100%);box-shadow:var(--shadow-lg)}
.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#6be7de18;left:-80px;bottom:-150px}.hero h2{font-size:31px;letter-spacing:-.5px}.hero p{color:#d7e8f9}.hero-art{font-size:90px;filter:drop-shadow(0 12px 20px #001a3c55)}
.stats{gap:16px;margin:22px 0}.stat{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;min-height:128px;padding:21px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat:after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}.stat small{color:#7b8ca3;font-weight:600}.stat b{font-size:32px;color:#182943}.stat .symbol{color:var(--blue)}
.section{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:20px;box-shadow:var(--shadow)}.section h3{color:#243752;font-size:18px;letter-spacing:-.2px}
.muted{color:#7b8ca3}.grid2{gap:20px}.field{gap:8px}.field span{color:#63748b;font-weight:700;font-size:12px}
input,select,textarea{background:#fbfcfe;color:#17263d;border:1px solid #d5dfeb;border-radius:10px;padding:12px 13px;transition:border-color .18s,box-shadow .18s,background .18s}input::placeholder,textarea::placeholder{color:#a2afbf}input:focus,select:focus,textarea:focus{background:#fff;border-color:#5e8ff2;box-shadow:0 0 0 4px #2563eb16}
select option{background:#fff;color:#17263d}.btn{padding:11px 17px;border-radius:10px;border:1px solid #d1dceb;background:#f1f5fa;color:#2b4563;font-weight:700;transition:all .18s ease;box-shadow:0 2px 4px #243b5a0b}.btn:hover{filter:none;background:#e7eef8;transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#2563eb;color:#fff;box-shadow:0 8px 16px #2563eb2b}.btn.primary:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af)}.btn.ok{background:#ecfdf7;border-color:#a7ead1;color:#087b5f}.btn.danger{background:#fff1f3;border-color:#ffc6cf;color:#c3314b}.btn:disabled{background:#e9eef5;color:#9aa8ba;border-color:#e1e7ef}
.table-wrap{border:1px solid var(--line);border-radius:12px;box-shadow:inset 0 1px #fff;overflow:auto}table{min-width:700px;text-align:right}th,td{border-bottom:1px solid #edf1f6;padding:14px 15px}th{background:#f5f8fc;color:#52657d;font-size:12px;position:sticky;top:0;z-index:1}td{color:#344861}tr:hover td{background:#f8fbff}
.pill{background:#eef3f9;color:#52657d;font-weight:700;font-size:12px}.pill.good{background:#e8faf4;color:#087b5f}.pill.bad{background:#fff0f2;color:#c3314b}.pill.warn{background:#fff7e7;color:#a45f00}.pill.blue{background:#eaf2ff;color:#2058b6}
.settings-list{gap:14px}.toggle{background:#fbfcfe;border:1px solid var(--line);padding:14px 16px;transition:border-color .18s,box-shadow .18s}.toggle:hover{border-color:#b8c9e1;box-shadow:var(--shadow)}.toggle b{color:#30445f}.toggle input{background:#bcc8d6}.toggle input:checked{background:#2563eb}
.rightpane{background:#f6f9fc;border:1px solid #e7edf5}.banner{background:#fff8e9;color:#8d5a05;border-color:#f2d49a}.empty{color:#8493a7}
.login-outer{background:radial-gradient(circle at 20% 15%,#dbeafe 0,#f4f7fb 40%,#e9f1fa 100%);padding:22px}.login-card{background:rgba(255,255,255,.96);border:1px solid #d9e4f0;border-radius:22px;padding:38px;box-shadow:var(--shadow-lg);color:var(--white)}.login-card h1{color:#1b2d47}.login-card p{color:#718096}.login-card .brand{padding:0 0 26px}.login-card .brand strong{color:#1c3555}.login-card .brand small{color:#6d91b7}
#toast{left:auto;right:24px;bottom:24px}.toast{background:#1c3553;color:#fff;border:1px solid #3d638d;border-radius:12px;box-shadow:var(--shadow-lg)}
.attendance-hero{border:1px solid #bfdbfe;background:linear-gradient(110deg,#eff6ff,#ecfeff 75%);box-shadow:var(--shadow)}.attendance-hero h2{color:#1d3557}.attendance-hero p{color:#5c718b}.attendance-icon{color:#1677d8;text-shadow:0 0 22px #1684ff35}
.key-row{border-bottom:1px solid #e9eef5}.loading{color:#70839a}
@media(max-width:1100px){.layout{grid-template-columns:235px minmax(0,1fr)}.header{padding-inline:23px}.content{padding-inline:23px}}
@media(max-width:760px){.layout{display:block}.sidebar{right:0;left:auto;transform:translateX(110%);width:285px;border-left:0;border-right:1px solid #203b5b}.sidebar.open{transform:translateX(0)}.header{padding:10px 15px;height:68px}.header h1{font-size:18px}.content{padding:16px 13px 35px}.hero{padding:24px;min-height:155px}.hero h2{font-size:24px}.hero-art{font-size:54px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:15px;min-height:108px}.stat b{font-size:25px}.section{padding:16px;margin-top:14px}.login-card{padding:25px 20px}.login-card h1{font-size:26px}.login-card .brand{padding-bottom:18px}.header-right{gap:5px}.header-right .user-chip{display:none}}
@media(max-width:390px){.stats{grid-template-columns:1fr}.hero-art{display:none}.content{padding-inline:10px}.section{padding:13px}}

/* Cloud ERP theme */
:root{--cloud-blue:#2563eb;--cloud-indigo:#4f46e5;--cloud-ink:#17243b;--cloud-muted:#71809a;--cloud-border:#e6ebf3;--cloud-bg:#f6f8fc}
body{background:var(--cloud-bg);font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;color:var(--cloud-ink)}
.layout{grid-template-columns:292px minmax(0,1fr);min-height:100vh}
.sidebar{background:#fff;border-left:1px solid var(--cloud-border);box-shadow:0 4px 20px rgba(24,43,75,.06);padding:22px 16px}
.sidebar .brand{padding:6px 12px 30px}.sidebar .brand strong{color:#1e2d46;font-size:20px}.sidebar .brand small{color:#8292ab;font-weight:600;letter-spacing:.4px}
.sidebar .flame{background:linear-gradient(145deg,#6d5df4 15%,#2563eb 55%,#19b9c8);box-shadow:0 8px 18px #2563eb2b}
.navtitle{color:#9aa8bc;font-size:10px;font-weight:800;letter-spacing:.8px;padding:18px 12px 9px}.nav{gap:3px}.nav button{color:#5d6e86;border-radius:12px;padding:11px 13px;font-weight:600}.nav button:hover{background:#f1f5ff;color:#315ec4;transform:none}.nav button.active{background:linear-gradient(135deg,#eef3ff,#e5edff);color:#2456c4;box-shadow:inset -3px 0 #3569e8}.nav span{color:#8292aa}.nav button.active span{color:#3569e8}
.header{height:88px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--cloud-border);padding:13px 38px}.header h1{color:#16263f;font-size:23px;font-weight:800}.header small{color:#8a98ab}.user-chip{background:#f5f8ff;border:1px solid #dce5f5;color:#536783;border-radius:10px;font-size:12px}.content{padding:32px 38px 60px;max-width:1850px}
.hero{min-height:204px;border-radius:22px;padding:38px;background:linear-gradient(120deg,#172c53 0%,#245b9c 68%,#287bb0 100%);box-shadow:0 16px 34px #254d7d20}.hero h2{font-size:32px;font-weight:800}.hero p{font-size:14px;color:#dcecff}.hero-art{font-size:86px}
.stats{gap:18px;margin:24px 0}.stat{border:1px solid var(--cloud-border);border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(24,43,75,.055);padding:22px}.stat small{color:#8593a8;font-size:12px}.stat b{color:#1c2b43;font-size:32px}.stat .symbol{color:#4f7df0}
.section{border:1px solid var(--cloud-border);border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(24,43,75,.045);padding:25px}.section h3{color:#21334f;font-size:19px;font-weight:800}.section-head{margin-bottom:18px}.muted{color:var(--cloud-muted)}
.field span{color:#63748b;font-weight:700}input,select,textarea{background:#fbfcfe;border-color:#dce4ef;border-radius:11px;color:#253650}input:focus,select:focus,textarea:focus{border-color:#6b8eef;box-shadow:0 0 0 4px #4f46e512}.btn{border-radius:10px;font-weight:700}.btn.primary{background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 7px 15px #4f46e526}.btn.primary:hover{background:linear-gradient(135deg,#1d4ed8,#4338ca)}
.table-wrap{border-color:var(--cloud-border);border-radius:13px}.table-wrap table{min-width:720px}th{background:#f7f9fc;color:#60728b;font-weight:800}td{color:#344963}tr:hover td{background:#f7faff}.pill.blue{background:#edf3ff;color:#315ec4}.pill.good{background:#eafaf5;color:#087b5f}
.login-outer{background:radial-gradient(circle at 12% 10%,#dfe8ff 0,#f6f8fc 42%,#eaf3fb 100%)}.login-card{border-radius:24px;background:#fff;box-shadow:0 20px 55px rgba(30,56,101,.13)}.login-card .brand strong{font-weight:800}.login-card h1{font-weight:800}
.attendance-hero{border-color:#cfe0ff;background:linear-gradient(115deg,#eff5ff,#effcfc);border-radius:20px}.attendance-hero h2{font-weight:800}.key-row{padding:15px 12px}
@media(max-width:1100px){.layout{grid-template-columns:245px minmax(0,1fr)}.content{padding-inline:24px}.header{padding-inline:24px}}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain}.sidebar-brand{justify-content:center;padding:8px 4px 24px!important}.sidebar-brand .brand-logo{max-width:230px}.login-brand{justify-content:center;padding:0 0 22px!important}.login-brand .brand-logo{max-width:390px}
@media(max-width:760px){.sidebar{background:#fff;width:292px;box-shadow:0 12px 40px #203b5b2b}.header{height:72px;padding-inline:15px}.content{padding:18px 14px 40px}.hero{padding:25px;min-height:165px}.hero h2{font-size:25px}.stats{gap:11px}.stat{padding:16px}.section{padding:17px}}