:root{--pr:#1a3a5c;--pr2:#1e4d7b;--ac:#c8a95a;--ac2:#e2c97e;--ok:#1a6b45;--okb:#e8f5ee;--er:#7a1a1a;--erb:#fdeaea;--pe:#2c4a7a;--peb:#e8eef8;--wa:#7a4e00;--wab:#fff3dc;--bg:#f4f1ec;--sf:#faf8f5;--cd:#fff;--bd:#ddd9d0;--tx:#1a1a1a;--tm:#6b6760;--tl:#9b9690;--r:10px;--sw:240px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--tx);font-size:15px;line-height:1.6;direction:rtl}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sw);background:var(--pr);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;flex-shrink:0}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.1);padding:4px}
.sidebar-logo-fb{width:44px;height:44px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:var(--pr)}
.sidebar-title{color:#fff;font-size:12.5px;font-weight:700;line-height:1.3}
.sidebar-sub{color:var(--ac2);font-size:10px}
.sidebar-nav{flex:1;padding:10px 0}
.nav-section{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.35);padding:12px 14px 3px;letter-spacing:.06em}
.nav-link{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13px;color:rgba(255,255,255,.8);text-decoration:none;border-right:3px solid transparent;transition:background .15s}
.nav-link i{font-style:normal;width:18px;text-align:center}
.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-link.active{background:rgba(255,255,255,.12);color:#fff;border-right-color:var(--ac);font-weight:700}
.sidebar-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.1)}
.btn-logout{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);border-radius:7px;padding:7px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:'Tajawal',sans-serif;transition:background .15s}
.btn-logout:hover{background:rgba(255,255,255,.15);color:#fff}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--cd);border-bottom:1px solid var(--bd);padding:0 22px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.topbar-title{font-size:16px;font-weight:700;color:var(--pr)}
.topbar-user{display:flex;align-items:center;gap:10px}
.topbar-name{font-size:13px;color:var(--tm)}
.topbar-avatar{width:33px;height:33px;background:var(--pr);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
.role-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.r-admin{background:var(--erb);color:var(--er)}
.r-adept{background:var(--peb);color:var(--pe)}
.r-dept{background:var(--okb);color:var(--ok)}
.alert-bar{padding:10px 22px;font-size:13.5px;font-weight:500}
.alert-bar.success{background:var(--okb);color:var(--ok);border-right:3px solid var(--ok)}
.alert-bar.danger{background:var(--erb);color:var(--er);border-right:3px solid var(--er)}
.alert-bar.warn{background:var(--wab);color:var(--wa);border-right:3px solid #e67e00}
.page-content{flex:1;padding:22px}
.card{background:var(--cd);border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden;margin-bottom:18px}
.card-header{padding:13px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--sf)}
.card-title{font-size:14px;font-weight:700;color:var(--pr)}
.card-body{padding:18px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:20px}
.stat-card{background:var(--cd);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;border-right:4px solid transparent;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.stat-card.bl{border-right-color:var(--pr)}
.stat-card.gn{border-right-color:var(--ok)}
.stat-card.am{border-right-color:var(--ac)}
.stat-card.or{border-right-color:#e67e00}
.stat-card.re{border-right-color:var(--er)}
.stat-lbl{font-size:12px;color:var(--tm);margin-bottom:4px}
.stat-val{font-size:30px;font-weight:700;font-family:'Cairo',sans-serif;line-height:1}
.stat-card.bl .stat-val{color:var(--pr)}
.stat-card.gn .stat-val{color:var(--ok)}
.stat-card.am .stat-val{color:#7a5a10}
.stat-card.or .stat-val{color:#a05000}
.stat-card.re .stat-val{color:var(--er)}
.stat-sub{font-size:11px;color:var(--tl);margin-top:4px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-pend{background:var(--peb);color:var(--pe)}
.b-ok{background:var(--okb);color:var(--ok)}
.b-wa{background:var(--wab);color:var(--wa)}
.b-er{background:var(--erb);color:var(--er)}
.b-gr{background:#f0ede8;color:var(--tm)}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th{text-align:right;padding:9px 13px;font-weight:600;color:var(--tm);font-size:12px;border-bottom:1px solid var(--bd);background:var(--sf);white-space:nowrap}
.data-table td{padding:11px 13px;border-bottom:1px solid #f0ede8;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:#f9f7f4}
.progress-wrap{display:flex;align-items:center;gap:7px}
.progress-outer{flex:1;height:8px;background:#e8e4de;border-radius:4px;overflow:hidden}
.progress-inner{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ok),var(--ac));transition:width .5s}
.progress-lbl{font-size:11px;color:var(--tm);white-space:nowrap}
.tracker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:8px}
.ti{border:1px solid var(--bd);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:8px;background:var(--cd)}
.ti.done{border-color:#a8d5b8;background:#f3fbf6}
.ti.pend{border-color:#b8c8e0;background:#f3f6fb}
.ti.issue{border-color:#f0b8b8;background:#fdf4f4}
.ti-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ti-name{font-size:12px;font-weight:600}
.ti-st{font-size:11px;color:var(--tm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:12.5px;font-weight:600;color:var(--tm)}
.req{color:#c0392b}
.form-control{border:1px solid var(--bd);border-radius:7px;padding:9px 12px;font-size:14px;background:var(--sf);color:var(--tx);outline:none;width:100%;font-family:'Tajawal',sans-serif;transition:border-color .2s}
.form-control:focus{border-color:var(--pr2);box-shadow:0 0 0 3px rgba(30,77,123,.1)}
.form-control.is-invalid{border-color:var(--er)}
.field-validation-error{font-size:11.5px;color:var(--er);margin-top:2px}
.radio-grp{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.radio-opt{display:flex;align-items:center;gap:6px;border:1.5px solid var(--bd);border-radius:7px;padding:7px 12px;cursor:pointer;font-size:13px;user-select:none;transition:all .18s}
.radio-opt:has(input:checked){border-color:var(--pr);background:var(--peb);color:var(--pr);font-weight:700}
.radio-opt input{accent-color:var(--pr)}
.upload-zone{border:1.5px dashed var(--bd);border-radius:8px;padding:16px;text-align:center;background:var(--bg);cursor:pointer;color:var(--tm);font-size:13px;position:relative;transition:all .2s}
.upload-zone:hover{border-color:var(--pr2);background:#edf2f7}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:7px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;transition:all .18s;text-decoration:none;font-family:'Tajawal',sans-serif}
.btn-primary{background:var(--pr);color:#fff}
.btn-primary:hover{background:var(--pr2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,58,92,.3)}
.btn-accent{background:var(--ac);color:var(--pr)}
.btn-accent:hover{background:var(--ac2)}
.btn-success{background:var(--ok);color:#fff}
.btn-success:hover{background:#1e7d51}
.btn-danger{background:var(--er);color:#fff}
.btn-warning{background:#e67e00;color:#fff}
.btn-outline{background:transparent;color:var(--pr);border:1px solid var(--pr)}
.btn-outline:hover{background:var(--pr);color:#fff}
.btn-outline-light{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-xs{padding:3px 9px;font-size:11px;border-radius:5px}
.btn-block{width:100%;justify-content:center}
.info-box{background:var(--peb);border-right:3px solid var(--pe);padding:11px 13px;border-radius:7px;font-size:13px;color:var(--pe);margin-bottom:16px}
.warn-box{background:var(--wab);border-right:3px solid #e67e00;padding:11px 13px;border-radius:7px;font-size:13px;color:var(--wa);margin-bottom:14px}
.tl{position:relative;padding-right:24px}
.tl::before{content:'';position:absolute;right:7px;top:0;bottom:0;width:2px;background:var(--bd)}
.tl-item{position:relative;margin-bottom:16px}
.tl-dot{position:absolute;right:-24px;top:4px;width:14px;height:14px;border-radius:50%;border:2.5px solid}
.tl-dot.done{background:var(--ok);border-color:var(--ok)}
.tl-dot.active{background:var(--ac);border-color:var(--ac);animation:pulse 1.5s infinite}
.tl-dot.wait{background:#fff;border-color:var(--bd)}
.tl-dot.alert{background:var(--er);border-color:var(--er)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,169,90,.4)}50%{box-shadow:0 0 0 6px rgba(200,169,90,0)}}
.tl-time{font-size:11px;color:var(--tl);margin-bottom:2px}
.tl-text{font-size:13.5px}
.tl-sub{font-size:12px;color:var(--tm);margin-top:2px}
.portal-hero{background:linear-gradient(135deg,var(--pr),#0f2440);border-radius:14px;padding:28px;color:#fff;margin-bottom:18px;overflow:hidden;position:relative}
.portal-step{display:flex;align-items:flex-start;gap:13px;padding:12px 0;border-bottom:1px solid #f0ede8}
.portal-step:last-child{border-bottom:none}
.step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.step-num.done{background:var(--okb);color:var(--ok)}
.step-num.active{background:var(--wab);color:var(--wa)}
.step-num.wait{background:var(--bg);color:var(--tl)}
.step-title{font-size:13.5px;font-weight:700;margin-bottom:2px}
.step-desc{font-size:12.5px;color:var(--tm)}
.step-time{font-size:11px;color:var(--tl);margin-top:3px}
.cert-wrap{border:3px solid var(--ac);border-radius:14px;padding:34px 38px;text-align:center;max-width:700px;margin:0 auto;background:linear-gradient(160deg,#fefdfb,#faf7f0);position:relative;overflow:hidden}
.cert-wrap::before{content:'';position:absolute;inset:10px;border:1px solid var(--ac);border-radius:8px;opacity:.25;pointer-events:none}
.cert-logo{font-size:48px;margin-bottom:8px}
.cert-img{width:80px;height:80px;object-fit:contain;margin-bottom:10px}
.cert-title{font-size:23px;font-weight:900;color:var(--pr);font-family:'Cairo',sans-serif}
.cert-org{font-size:13px;color:var(--ac);font-weight:600;margin-bottom:20px}
.cert-text{font-size:15px;line-height:2.3;margin-bottom:16px}
.cert-bold{font-weight:700;color:var(--pr)}
.cert-foot{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:26px;padding-top:20px;border-top:1px solid var(--bd)}
.cert-sign{text-align:center}
.cert-stamp{width:84px;height:84px;border:3px solid;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;padding:8px;font-size:9px;font-weight:700;line-height:1.5;text-align:center}
.cert-stamp.red{border-color:#8b0000;color:#8b0000;background:rgba(139,0,0,.04)}
.cert-stamp.blue{border-color:var(--pr);color:var(--pr);background:rgba(26,58,92,.04)}
.cert-line{border-top:1.5px solid;margin:8px auto 6px;width:80%}
.cert-line.red{border-color:#8b0000}
.cert-line.blue{border-color:var(--pr)}
.cert-sname{font-size:13px;font-weight:700}
.cert-sname.red{color:#8b0000}
.cert-sname.blue{color:var(--pr)}
.cert-stitle{font-size:11px;color:var(--tm)}
.public-shell{min-height:100vh;display:flex;flex-direction:column}
.public-header{background:var(--pr);padding:13px 26px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.pub-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.1);padding:3px}
.pub-org{color:#fff;font-size:15px;font-weight:700}
.pub-sys{color:var(--ac2);font-size:11px}
.public-content{flex:1;max-width:700px;margin:36px auto;padding:0 20px;width:100%}
.login-card{max-width:420px;margin:56px auto}
.login-header{text-align:center;padding:26px 26px 0}
.login-logo{width:70px;height:70px;object-fit:contain;margin-bottom:10px}
.login-title{font-size:20px;font-weight:700;color:var(--pr);font-family:'Cairo',sans-serif}
.login-sub{font-size:13px;color:var(--tm);margin-top:3px}
.verf-card{border-right:4px solid var(--ac);padding:18px;border-radius:8px;background:var(--sf);border:1px solid var(--bd);margin-bottom:18px}
.verf-num{font-size:22px;font-weight:900;color:var(--pr);font-family:'Cairo',sans-serif;letter-spacing:.05em}
.type-pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:700}
.tp-dept{background:#e8eef8;color:#2c4a7a}
.tp-sec{background:#fff3dc;color:#7a4e00}
.tp-cnt{background:var(--okb);color:var(--ok)}
.lookup-box{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:28px;text-align:center;margin-bottom:20px}
.lookup-icon{font-size:48px;margin-bottom:12px}
.lookup-title{font-size:18px;font-weight:700;color:var(--pr);margin-bottom:6px;font-family:'Cairo',sans-serif}
.lookup-sub{font-size:13px;color:var(--tm);margin-bottom:20px}
.lookup-row{display:flex;gap:10px;max-width:500px;margin:0 auto}
@media print{.sidebar,.topbar,.alert-bar,.no-print,.btn,.card-header a{display:none!important}.page-content{padding:0!important}.app-shell,.main-area{display:block!important}}
@media(max-width:768px){:root{--sw:0px}.sidebar{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.tracker-grid{grid-template-columns:1fr 1fr}.cert-foot{grid-template-columns:1fr;gap:16px}.lookup-row{flex-direction:column}}

/* ── Public Employee Portal Nav ─────────────────────────── */
.pub-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; font-size: 13px;
  font-weight: 600; text-decoration: none; transition: all .18s;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25);
}
.pub-nav-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.pub-nav-active {
  background: var(--ac) !important; color: var(--pr) !important;
  border-color: var(--ac) !important; font-weight: 700 !important;
}

/* ── Notification Badges ─────────────────────────────────── */
.badge-notif {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--er); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-family: 'Cairo', sans-serif;
  flex-shrink: 0;
}
.nav-link .badge-notif { animation: pulse-notif 2s infinite; }
@keyframes pulse-notif {
  0%,100% { box-shadow: 0 0 0 0 rgba(122,26,26,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(122,26,26,0); }
}
.topbar-alert {
  display: flex; align-items: center; gap: 5px;
  background: var(--erb); color: var(--er);
  padding: 5px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid #f0c0c0;
}
.topbar-alert span {
  background: var(--er); color: #fff;
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ── Filter Bar ─────────────────────────────────────────── */
.filter-bar{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:4px;min-width:140px;flex:1}
.filter-label{font-size:11px;font-weight:700;color:var(--tm)}
.filter-control{border:1px solid var(--bd);border-radius:6px;padding:7px 10px;font-size:13px;font-family:'Tajawal',sans-serif;background:#fff;color:var(--tx);outline:none;width:100%}
.filter-control:focus{border-color:var(--pr2);box-shadow:0 0 0 2px rgba(30,77,123,.08)}
.filter-actions{display:flex;gap:6px;align-items:flex-end}
.filter-summary{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--peb);border-radius:7px;font-size:12.5px;color:var(--pe);margin-bottom:12px;flex-wrap:wrap}
.filter-tag{display:inline-flex;align-items:center;gap:4px;background:var(--pr);color:#fff;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.filter-tag a{color:rgba(255,255,255,.7);text-decoration:none;margin-right:2px;font-size:13px;line-height:1}
.filter-tag a:hover{color:#fff}
.search-wrap{position:relative;flex:2;min-width:200px}
.search-wrap input{padding-right:34px}
.search-wrap::before{content:"🔍";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none}

/* ── Notification Dropdown ─────────────────────────────── */
.notif-wrapper { position: relative; }
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 9999;
  overflow: hidden;
}
.notif-wrapper:hover .notif-dropdown,
.notif-wrapper.open .notif-dropdown { display: block; }
.notif-dropdown-header {
  padding: 12px 16px;
  background: var(--pr);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notif-dropdown-header a { color: rgba(255,255,255,.8); font-size: 11px; text-decoration: none; }
.notif-dropdown-header a:hover { color: #fff; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--bd);
  text-decoration: none;
  color: var(--tx);
  transition: background .15s;
}
.notif-item:hover { background: var(--sf); }
.notif-item:last-child { border-bottom: none; }
.notif-item-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; margin-top: 1px;
}
.ni-verif { background: var(--peb); color: var(--pe); }
.ni-approv { background: var(--erb); color: var(--er); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.notif-item-sub { font-size: 11px; color: var(--tm); margin-top: 2px; }
.notif-item-count {
  background: var(--er); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 12px;
  white-space: nowrap;
}
.notif-dropdown-empty { padding: 20px; text-align: center; color: var(--tm); font-size: 13px; }
.topbar-alert { cursor: pointer; user-select: none; }