/* كير لينك v12 — تصميم متجاوب (جوال/كمبيوتر) بألوان وأيقونات ملوّنة */

/* الخطوط المعتمدة: ضع الملفات المرخّصة في assets/fonts (انظر assets/fonts/README.txt) */
@font-face{font-family:"GE SS Unique";src:local("GE SS Unique");font-display:swap}
@font-face{font-family:"SMOH";src:local("SMOH");font-display:swap}
@font-face{font-family:"Hassoub";src:local("Hassoub");font-display:swap}

:root{
  --font-body:"Helvetica Neue","GE SS Unique","Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;
  --font-head:"Gurmukhi MN","SMOH","Helvetica Neue","GE SS Unique","Segoe UI",Tahoma,sans-serif;
  --font-print:Helvetica,"Hassoub","GE SS Unique",Tahoma,Arial,sans-serif;
  --ink:#1b2a3a;--muted:#5d6e80;--line:#dde6ee;--bg:#f2f6fa;--card:#fff;
  --navy:#0f4c81;--navy2:#0a3a66;--blue:#1e6fd9;--teal:#0d9488;--green:#15803d;--amber:#b45309;--red:#c62828;--purple:#6d3fd1;--rose:#d6245f;--indigo:#4338ca;--slate:#475569;
  --radius:16px;--shadow:0 2px 10px rgba(15,60,100,.08)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px}
h1,h2,h3,.brand-font{font-family:var(--font-head)}
a{color:var(--blue)}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.sub,small{color:var(--muted);font-size:.86rem}
small{display:block}
.hide-sm{display:inline}
.empty{text-align:center;color:var(--muted);padding:22px 12px}
.empty .ic{margin:0 auto 8px}

/* ---------- أيقونات ملوّنة ---------- */
.ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;flex:none;vertical-align:middle}
.ic svg{width:19px;height:19px}
.ic-sm{width:26px;height:26px;border-radius:8px}.ic-sm svg{width:15px;height:15px}
.ic-lg{width:50px;height:50px;border-radius:14px}.ic-lg svg{width:26px;height:26px}
.ic-xl{width:58px;height:58px;border-radius:16px}.ic-xl svg{width:30px;height:30px}
.ic-blue{color:#1e6fd9;background:#e3eefd}.ic-teal{color:#0d9488;background:#d9f4f0}.ic-green{color:#15803d;background:#dcf5e5}
.ic-amber{color:#b45309;background:#fdf0d2}.ic-red{color:#c62828;background:#fde3e3}.ic-purple{color:#6d3fd1;background:#ece5fb}
.ic-rose{color:#d6245f;background:#fde1ea}.ic-indigo{color:#4338ca;background:#e5e4fb}.ic-slate{color:#475569;background:#e8edf2}

/* ---------- الترويسة والتنقل ---------- */
.topbar{background:linear-gradient(135deg,var(--navy2),var(--navy) 60%,#1d6fb5);color:#fff}
.head{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-inline-end:auto}
.brand-text b{display:block;font-size:1.3rem;line-height:1.2}.brand-text small{color:#cfe2f3;line-height:1}
.logo{border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.logo-sm{width:44px;height:44px}.logo-lg{width:84px;height:84px}
.userbox{text-align:end;line-height:1.4}.userbox b{display:block}.userbox small{color:#d3e4f3}
.site-chip{background:rgba(255,255,255,.18);border-radius:999px;padding:1px 9px}
.inline{margin:0}
.mainnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(15,60,100,.05)}
.navrow{display:flex;gap:6px;overflow-x:auto;padding-top:8px;padding-bottom:8px;scrollbar-width:thin}
.mainnav a{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap;border:1px solid transparent}
.mainnav a:hover{background:#f1f6fb}
.mainnav a.active{background:#e8f1fb;border-color:#c7dcf3;color:var(--navy)}
.badge{font-style:normal;background:var(--red);color:#fff;border-radius:999px;font-size:.75rem;padding:0 8px;min-width:22px;text-align:center;line-height:1.5}
.tabs .badge{background:#cfd9e4;color:#233}
.tabs a.active .badge{background:#fff;color:var(--navy)}
main.wrap{padding-top:10px;padding-bottom:30px;min-height:60vh}
.foot{color:var(--muted);font-size:.82rem;text-align:center;padding-bottom:26px}

/* ---------- عناصر عامة ---------- */
h2{font-size:1.3rem;margin:24px 0 8px;display:flex;align-items:center;gap:10px}
h3{margin:0 0 12px;display:flex;align-items:center;gap:10px;font-size:1.08rem}
.panel,.item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)}
.hello{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.hello h2{margin:0}
.alert{display:flex;align-items:center;gap:10px;border-radius:12px;padding:12px 14px;margin:14px 0;border:1px solid;font-weight:600}
.alert-error{background:#fff1f1;border-color:#f5c2c2;color:#8a1c1c}.alert-ok{background:#eefaf2;border-color:#bfe6cc;color:#14532d}.alert-warn{background:#fff8e6;border-color:#f3d99b;color:#7a4a05}
.alert a{color:inherit}
.hint{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;margin:8px 0}

/* ---------- نماذج وأزرار ---------- */
label{display:block;margin-bottom:14px;font-weight:600}
label small{font-weight:400}
input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%;min-height:46px;padding:11px 13px;margin-top:6px;font:inherit;font-size:16px;border:1.5px solid #b9c9d8;border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,111,217,.15)}
textarea{min-height:120px;resize:vertical}
.check{display:flex;align-items:center;gap:10px;font-weight:600}
.check input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.narrow{max-width:460px}
.help{background:#eef5fd;border:1px solid #cfe2f8;border-radius:12px;padding:10px 14px;margin:0 0 14px}
.help p{margin:4px 0 0}
.btn,button{font:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:12px;border:1.5px solid transparent;font-weight:700;text-decoration:none;line-height:1.3;transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:wait}
.btn .ic{background:rgba(255,255,255,.92)}
.btn-primary{background:linear-gradient(135deg,#1e6fd9,#0f55b3);color:#fff}
.btn-green{background:linear-gradient(135deg,#1a9b52,#15803d);color:#fff}
.btn-ghost{background:#eef3f8;color:#233648;border-color:#d5e0ea}
.btn-ghost .ic{background:#fff}
.btn-red-outline{background:#fff;color:var(--red);border-color:#efb4b4}
.btn-sm{min-height:36px;padding:4px 12px;font-size:.9rem}
.btn-block{width:100%}
.btn:hover{filter:brightness(1.06)}
.btn-row,.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-actions .action-form{margin:0}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 14px;align-items:end}
.filters .btn-row{margin-bottom:14px;grid-column:1/-1}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:14px 0 4px}
.tabs a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.tabs a.active{background:var(--navy);border-color:var(--navy);color:#fff}
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:16px 0;flex-wrap:wrap}
.pg{padding:8px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:700}.pg.current{border:0;background:none;color:var(--muted)}

/* ---------- المؤشرات ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border-inline-start:5px solid var(--blue)}
.stat strong{display:block;font-size:1.8rem;line-height:1.1;font-family:var(--font-head)}
.stat span{color:var(--muted);font-size:.9rem}
.stat-green{border-inline-start-color:#16a34a}.stat-amber{border-inline-start-color:#f59e0b}.stat-red{border-inline-start-color:#e5484d}.stat-blue{border-inline-start-color:#1e6fd9}
.top-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.top-employee{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fbfdff}
.top-employee-info{flex:1;min-width:0}.top-employee-info strong{display:block;overflow-wrap:anywhere}
.top-employee-count{text-align:center}.top-employee-count strong{font-size:1.5rem;display:block;line-height:1.1}
.rank-circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:#94a3b8;flex:none}
.rank-1 .rank-circle{background:linear-gradient(135deg,#f5b301,#d98e00)}.rank-2 .rank-circle{background:linear-gradient(135deg,#9aa9b8,#6b7b8b)}.rank-3 .rank-circle{background:linear-gradient(135deg,#d58a52,#a8602d)}
.metric{margin:16px 0}.metric-label{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}.metric-label span{color:var(--muted);font-size:.9rem}
.bar{display:block;width:100%;height:12px}.bar-bg{fill:#e3ebf3}.bar-fg{fill:#1e6fd9}.bar-teal .bar-fg{fill:#0d9488}
.num{font-weight:800}.num-green{color:#15803d}.num-amber{color:#b45309}.num-red{color:#c62828}
.checklist{list-style:none;padding:0;margin:0 0 12px}.checklist li{display:flex;gap:10px;align-items:center;padding:6px 0}

/* ---------- المهام ---------- */
.item{border-inline-start:6px solid #94a3b8}
.st-approved{border-inline-start-color:#16a34a}.st-pending{border-inline-start-color:#f59e0b}.st-returned{border-inline-start-color:#e5484d}
.itemtop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.item-title{font-size:1.05rem}
.meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin:6px 0}
.meta span{display:inline-flex;align-items:center;gap:6px}
.patient{display:flex;gap:8px 22px;flex-wrap:wrap;background:#f6f9fc;border:1px dashed #c8d6e4;border-radius:12px;padding:8px 12px;margin:8px 0;font-size:.92rem}
.patient span{display:inline-flex;align-items:center;gap:6px}
.details{margin:8px 0;overflow-wrap:anywhere}
.note{background:#fff8e6;border:1px solid #f3d99b;border-radius:12px;padding:8px 12px;overflow-wrap:anywhere}
.timeline{margin:8px 0}.timeline summary{cursor:pointer;color:var(--muted);font-weight:600}.timeline ol{margin:8px 0 0;padding-inline-start:22px}.timeline li{margin-bottom:4px}
.review{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.pill{display:inline-block;padding:2px 12px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.pill-approved{background:#dcf5e5;color:#14532d}.pill-pending{background:#fdf0d2;color:#7a4a05}.pill-returned{background:#fde3e3;color:#8a1c1c}.pill-off{background:#e5e9ee;color:#475569}.pill-draft{background:#e5e9ee;color:#475569}
.pill-role-employee{background:#d9f4f0;color:#0b5f57}.pill-role-supervisor{background:#e3eefd;color:#14498f}.pill-role-general{background:#ece5fb;color:#4a2899}

/* ---------- الجداول ---------- */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:start;border-bottom:1px solid #e8eef4;vertical-align:top}
th{background:#f3f7fb;color:#35516b;font-size:.88rem;white-space:nowrap}
td small{margin-top:2px;overflow-wrap:anywhere}

/* ---------- صفحات الدخول ---------- */
.auth-body{min-height:100vh;background:radial-gradient(circle at 15% 10%,#cfe3fb 0,transparent 45%),radial-gradient(circle at 90% 90%,#d4f1ee 0,transparent 40%),linear-gradient(160deg,#eaf2fb,#f7fafd)}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px 14px}
.auth-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);width:100%;max-width:1020px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(15,60,100,.18)}
.auth-brand{background:linear-gradient(155deg,#0a3a66,#0f4c81 55%,#1b78c2);color:#fff;padding:40px 36px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.auth-brand::before{width:320px;height:320px;inset-inline-end:-120px;top:-110px}.auth-brand::after{width:240px;height:240px;inset-inline-start:-90px;bottom:-90px}
.auth-brand>*{position:relative;z-index:1}
.auth-eyebrow{display:block;letter-spacing:.25em;font-size:.78rem;color:#bcd8f1;font-weight:700}
.auth-name{display:block;font-size:1.6rem;line-height:1.2}
.auth-slogan{font-size:2.1rem;line-height:1.35;margin:10px 0 0;font-family:var(--font-head)}
.auth-lead{color:#d6e7f6;margin:0}
.auth-features{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:12px}
.auth-features li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px 12px;font-weight:600}
.auth-brand-foot{margin-top:auto;color:#a9c9e6;font-size:.85rem;padding-top:14px}
.auth-form-wrap{padding:34px 40px 28px;display:flex;flex-direction:column;justify-content:center}
.auth-logo{display:block;width:210px;max-width:62%;margin:0 auto 6px}
.auth-head{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.auth-head h1{margin:0;font-size:1.6rem;line-height:1.3}.auth-head p{margin:2px 0 0}
.auth-form label{margin-top:4px}
.password-wrap{position:relative}
.password-wrap input{padding-inline-end:84px}
.password-toggle{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-35%);border:0;background:#e8f0f8;color:var(--navy);border-radius:9px;padding:6px 12px;font-weight:700}
.login-submit{margin-top:6px;min-height:50px;font-size:1.05rem}
.auth-links{display:flex;justify-content:center;gap:14px;margin:16px 0 4px;flex-wrap:wrap}
.auth-links a{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
.auth-test-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;padding:10px 12px;border-radius:12px;background:#fff8e6;color:#7a4a05;font-size:.85rem}
.auth-form-wrap .alert{margin-top:0}

/* ---------- الجوال ---------- */
@media (max-width:900px){
  .auth-card{grid-template-columns:1fr;max-width:520px;border-radius:22px}
  .auth-brand{padding:22px 22px 20px;gap:6px}.auth-slogan{font-size:1.45rem;margin:2px 0 0}.auth-lead,.auth-features,.auth-brand-foot{display:none}
  .auth-form-wrap{padding:22px 20px 20px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top-three{grid-template-columns:1fr}
}
@media (max-width:700px){
  .wrap{padding:0 12px}
  .hide-sm{display:none}
  .userbox small{display:none}.userbox{font-size:.92rem}
  .head{gap:8px}.brand-text small{display:none}
  .grid2{grid-template-columns:1fr}
  .stats-3{grid-template-columns:1fr}
  .stat{padding:12px}.stat strong{font-size:1.5rem}
  .panel,.item{padding:15px;border-radius:14px}
  .auth-logo{width:170px}
  .rtable thead{display:none}
  .rtable,.rtable tbody{display:block}
  .rtable tr{display:block;border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin-bottom:10px;background:#fcfdff}
  .rtable td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border:0;border-bottom:1px dashed #e3eaf1;padding:8px 0;text-align:end}
  .rtable td:last-child{border-bottom:0}
  .rtable td::before{content:attr(data-label);font-weight:700;color:#35516b;text-align:start;flex:none}
  .rtable td>small,.rtable td>b{text-align:end}
  .row-actions{justify-content:flex-end}
  .btn-row .btn,.review .btn{flex:1 1 auto}
}
@media (max-width:380px){.stats{grid-template-columns:1fr}}

/* ---------- الطباعة (خطوط Hassoub / Helvetica) ---------- */
@media print{
  body{background:#fff;font-family:var(--font-print);font-size:12px}
  .topbar,.mainnav,.no-print,.foot,.btn-row,.pager,.tabs,.filters,.review{display:none!important}
  .panel,.item{box-shadow:none;break-inside:avoid;border-color:#bbb}
  .rtable thead{display:table-header-group}.rtable{display:table}.rtable tbody{display:table-row-group}
  .rtable tr{display:table-row;border:0;padding:0;margin:0;background:none}
  .rtable td{display:table-cell;border-bottom:1px solid #ddd;padding:6px 8px;text-align:start}.rtable td::before{content:none}
  .bar-fg{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .ic{display:none}
}
[hidden]{display:none!important}
/* إضافات v12 */
.logo-badge{display:inline-grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);flex:none}
.logo-badge .logo{width:68px;height:68px;box-shadow:none;background:none}
.auth-brand-top{display:flex;align-items:center;gap:14px}
@media (max-width:900px){.logo-badge{width:56px;height:56px}.logo-badge .logo{width:48px;height:48px}}
img.logo{object-fit:cover}
.panel .grid2 small{display:block}
.panel .grid2 b{display:block}
@media (max-width:900px){.logo-badge{display:none}}

/* Fresh-install v13: explicit login visibility guard. */
.auth-card .auth-brand, .auth-card .auth-form-wrap { visibility:visible; opacity:1; }
.auth-form-wrap .auth-form, .auth-form-wrap .auth-head, .auth-form-wrap .auth-links { display:block; visibility:visible; opacity:1; }
.auth-form-wrap input { display:block; width:100%; }