@font-face{font-family:CairoB;src:url('fonts/cairo-badge-black.woff2');font-weight:900}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 18px}
.badge3d{height:48px;width:auto;display:inline-block;vertical-align:middle;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.idtext p.bdesc{color:#e8edf5;font-size:15px;font-weight:600;margin:24px 0 0}
@media (max-width:600px){.badge3d{height:36px}.idtext p.bdesc{font-size:12px;margin-top:17px}}

/* ===== 4D depth mockup (preview only) ===== */
.btn,.tabs a{
  border:1px solid #9fb2cc;border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#dbe4f1 55%,#c3d0e3 100%);
  box-shadow:0 4px 0 #9fb2cc,0 8px 14px rgba(15,27,45,.18),inset 0 1px 0 #fff;
  text-shadow:0 1px 0 #fff;transition:all .08s}
.btn:hover,.tabs a:hover{transform:translateY(-1px);filter:brightness(1.03);
  box-shadow:0 5px 0 #9fb2cc,0 10px 16px rgba(15,27,45,.2),inset 0 1px 0 #fff}
.btn:active,.tabs a:active{transform:translateY(3px);
  box-shadow:0 1px 0 #9fb2cc,0 3px 6px rgba(15,27,45,.15),inset 0 1px 0 #fff}
.btn.primary,.tabs a.sel{
  background:linear-gradient(180deg,#2f6fd0 0%,#1a4a9c 55%,#123a7d 100%);
  border-color:#0e2f66;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:0 4px 0 #0c2a5c,0 8px 14px rgba(15,27,45,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover,.tabs a.sel:hover{box-shadow:0 5px 0 #0c2a5c,0 10px 16px rgba(15,27,45,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:active,.tabs a.sel:active{box-shadow:0 1px 0 #0c2a5c,0 3px 6px rgba(15,27,45,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.danger{
  background:linear-gradient(180deg,#fdf0f1 0%,#f6d5d8 55%,#ecb9be 100%);
  border-color:#d9a3a8;color:var(--bad);
  box-shadow:0 4px 0 #d9a3a8,0 8px 14px rgba(120,20,30,.15),inset 0 1px 0 #fff}
.card{
  border:1px solid #d7e0ee;border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);
  box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(15,27,45,.12),0 2px 4px rgba(15,27,45,.08)}
.stat{
  background:linear-gradient(180deg,#ffffff 0%,#eef3fa 60%,#dfe8f4 100%);
  border:1px solid #c6d4e8;border-radius:14px;
  box-shadow:0 5px 0 #c0cfe4,0 10px 18px rgba(15,27,45,.15),inset 0 1px 0 #fff}
.stat strong{text-shadow:0 1px 0 #fff}
a.stat:hover{transform:translateY(-2px);box-shadow:0 7px 0 #c0cfe4,0 14px 22px rgba(15,27,45,.18),inset 0 1px 0 #fff}
/* tables, forms, print: stay flat — no changes to .tbl, inputs, @media print */

/* ===== alerts entry popup: turquoise 4D (darkened per Amr) ===== */
#de-popup{background:rgba(4,48,53,.64)}
#de-popup .modal{border-radius:22px;border:2px solid #0b6a73;overflow:hidden;
  background:linear-gradient(180deg,#dcf9f5 0%,#aee9e3 45%,#8fded7 100%);
  box-shadow:0 10px 0 #095a63,0 24px 50px rgba(6,66,72,.5),inset 0 2px 0 rgba(255,255,255,.9)}
#de-popup .mhead{background:linear-gradient(180deg,#1fc4b6 0%,#0d9a94 55%,#077a80 100%);
  border-bottom:2px solid #055a60;padding:16px 20px}
#de-popup .mhead h2{color:#fff;font-size:24px;font-weight:800;
  text-shadow:0 2px 0 #04484d,0 4px 10px rgba(0,0,0,.35)}
#de-popup .mhead .btn{background:linear-gradient(180deg,#f2fffd 0%,#c4efeb 55%,#9adfd9 100%);
  border:1px solid #09646b;color:#063f44;text-shadow:0 1px 0 #fff;
  box-shadow:0 4px 0 #09646b,0 8px 14px rgba(6,66,72,.32),inset 0 1px 0 #fff}
#de-popup .mhead .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #09646b,0 3px 6px rgba(6,66,72,.28),inset 0 1px 0 #fff}
#de-popup .mbody{color:#063336;font-weight:600}
#de-popup .mbody>p{color:#083f45}
#de-popup .pd-summary{background:linear-gradient(180deg,#ffffff 0%,#d8f6f2 60%,#bdeae5 100%);
  border:1px solid #5fc4bc;border-radius:14px;
  box-shadow:0 5px 0 #6cc4bd,0 10px 18px rgba(6,66,72,.2),inset 0 1px 0 #fff}
#de-popup .pd-summary b{color:#043e43;font-size:17px}
#de-popup .pd-summary p{color:#083f45}
#de-popup .pd-summary .btn{background:linear-gradient(180deg,#1fc4b6 0%,#0d9a94 55%,#077a80 100%);
  border:1px solid #055a60;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:0 4px 0 #04484d,0 8px 14px rgba(6,66,72,.32),inset 0 1px 0 rgba(255,255,255,.4)}
#de-popup .pd-summary .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #04484d,0 3px 6px rgba(6,66,72,.28),inset 0 1px 0 rgba(255,255,255,.3)}
@media(max-width:500px){#de-popup .modal{border-radius:18px}#de-popup .mhead h2{font-size:19px}}

/* ===== alerts entry notice (floating summary): turquoise 4D ===== */
.al-notice{background:linear-gradient(160deg,#dcf9f5f2 0%,#aee9e3f2 55%,#8fded7f5 100%);
  border:2px solid #0b6a73;color:#063336;
  box-shadow:0 8px 0 #095a63,0 24px 50px rgba(6,66,72,.45),inset 0 2px 0 rgba(255,255,255,.9)}
.al-notice-icon{background:linear-gradient(135deg,#1fc4b6,#077a80);box-shadow:0 3px 0 #04484d,0 6px 10px rgba(6,66,72,.35)}
.al-notice-head b{color:#043e43}
.al-notice-head small{color:#0a5560}
.al-notice-close{background:#ffffff70;color:#06565e}
.al-notice p{color:#083f45}
.al-notice-counts button{background:linear-gradient(180deg,#ffffff 0%,#d8f6f2 60%,#bdeae5 100%);
  border:1px solid #5fc4bc;color:#063f44;
  box-shadow:0 3px 0 #6cc4bd,inset 0 1px 0 #fff;transition:all .08s}
.al-notice-counts button:hover{filter:brightness(1.03)}
.al-notice-counts button:active{transform:translateY(2px);box-shadow:0 1px 0 #6cc4bd,inset 0 1px 0 #fff}
.al-notice-foot{color:#0a5560}