/* =============================================================================
   Jarallah Clinic IT Helpdesk — stylesheet
   Ported from the prototype (same palette, components and layout) with
   responsive/mobile and accessibility improvements.
   ========================================================================== */
:root{
  --blue:#2952d0; --blue-dark:#1e3fa8; --bg:#f4f6fb; --card:#ffffff; --border:#e2e6ef;
  --text:#1f2530; --text-mut:#6b7280; --red:#dc2626; --orange:#f97316; --yellow:#eab308;
  --green:#16a34a; --gray:#6b7280; --indigo:#6366f1;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;}
a{color:inherit;text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
#app{min-height:100vh;display:flex;flex-direction:column;}
code{font-family:Consolas,Menlo,monospace;font-size:12px;background:#f2f4f8;padding:1px 5px;border-radius:4px;}

/* ---- top nav ---- */
header.topbar{background:var(--card);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;justify-content:space-between;min-height:58px;flex-shrink:0;gap:16px;flex-wrap:wrap;position:relative;}
header.topbar .brand{display:flex;align-items:center;gap:12px;padding:6px 0;color:var(--blue-dark);}
header.topbar .brand-logo{height:40px;width:auto;display:block;}
header.topbar .brand-mark{display:none;height:36px;width:36px;}
header.topbar .brand-text{font-weight:700;font-size:15px;line-height:1.2;border-left:1px solid var(--border);padding-left:12px;white-space:nowrap;}
header.topbar .brand-text small{display:block;font-weight:400;color:var(--text-mut);font-size:11px;}
nav.mainnav{display:flex;gap:4px;align-items:center;flex:1;justify-content:flex-end;flex-wrap:wrap;}
nav.mainnav a{padding:8px 14px;border-radius:6px;font-size:14px;color:var(--text-mut);font-weight:500;white-space:nowrap;}
nav.mainnav a.active{background:var(--blue);color:#fff;}
nav.mainnav a:hover:not(.active){background:#eef1f8;}
nav.mainnav a.has-alert:not(.active){color:var(--red);}
.nav-toggle{display:none;background:#fff;border:1px solid var(--border);border-radius:6px;font-size:18px;padding:4px 10px;cursor:pointer;}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-mut);margin-left:12px;padding-left:12px;border-left:1px solid var(--border);}
.userbox form{margin:0;}
.userbox button{background:#fff;border:1px solid var(--border);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;}
.userbox button:hover{background:#f2f4f8;}
.userbox .userlink{font-size:12px;color:var(--blue);}

main{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto;}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px;}
h1.pagetitle{font-size:20px;margin:0 0 16px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
h2.section{font-size:15px;margin:0 0 12px 0;color:var(--text);}
h2.section .muted{font-weight:400;font-size:13px;}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
.login-box{background:#fff;border-radius:12px;padding:36px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.06);border:1px solid var(--border);}
.login-logo{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 16px;}
.login-box h1{font-size:20px;text-align:center;color:var(--blue-dark);margin:0 0 2px;}
.login-box p.sub{text-align:center;color:var(--text-mut);font-size:13px;margin:0 0 22px;}
.login-help{margin:18px 0 0;font-size:12px;color:var(--text-mut);border-top:1px solid var(--border);padding-top:14px;text-align:center;}

/* ---- forms ---- */
label{display:block;font-size:12px;font-weight:600;color:var(--text-mut);margin-bottom:4px;margin-top:12px;}
label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin:0;color:var(--text);font-size:13px;}
label.inline input{width:auto;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:var(--text);
}
input[type=color]{width:50px;height:34px;padding:2px;border:1px solid var(--border);border-radius:6px;background:#fff;}
input[type=file]{font-size:13px;}
textarea{resize:vertical;min-height:70px;}
.row{display:flex;gap:14px;}
.row > *{flex:1;min-width:0;}
.row-top{align-items:flex-start;}
.btn{display:inline-block;padding:9px 16px;border-radius:6px;border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--text);}
.btn-secondary:hover{background:#f2f4f8;}
.btn-danger{background:#fff;border-color:#f3c2c2;color:var(--red);}
.btn-danger:hover{background:#fff5f5;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-block{width:100%;margin-top:16px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.field-error{color:var(--red);font-size:12px;margin-top:4px;}
.hint{color:var(--text-mut);font-size:12px;margin-top:4px;}
.form-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;align-items:center;}
.req-star{color:var(--red);}
.privacy-note{font-size:12px;color:#7a5b00;background:#fff8e6;border:1px solid #f3d98b;border-radius:6px;padding:6px 10px;margin-top:6px;}

/* ---- alerts / banners / toast ---- */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid transparent;}
.alert-success{background:#dcfce7;border-color:#bbf7d0;color:#15803d;}
.alert-error{background:#fee2e2;border-color:#fecaca;color:#b42318;}
.alert-info{background:#e8edfd;border-color:#c7d2fe;color:#3538cd;}
.banner{background:#fff8e6;border:1px solid #f3d98b;color:#7a5b00;padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:16px;}
.banner strong{display:block;margin-bottom:2px;}
.muted{color:var(--text-mut);}
.toast{position:fixed;bottom:20px;right:20px;background:#1f2530;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:999;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100vw - 40px);}
.toast.show{opacity:1;}
.empty{color:var(--text-mut);font-size:13px;padding:20px;text-align:center;}

/* ---- badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;line-height:1.4;}
.badge-outline{background:#fff;border:1px solid currentColor;}
.badge-soft{color:#374151;background:#e5e7eb;}
.pill-type-incident{background:#fde8e8;color:#b42318;}
.pill-type-sr{background:#e8edfd;color:#3538cd;}
.pill-type-hw{background:#e6f6ec;color:#166534;}
.sla-ok{background:#dcfce7;color:#15803d;}
.sla-warn{background:#fef3c7;color:#92400e;}
.sla-bad{background:#fee2e2;color:#b42318;}
.sla-na{background:#e5e7eb;color:#374151;}

/* ---- table ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.list{width:100%;border-collapse:collapse;font-size:13px;}
table.list th{text-align:left;padding:9px 10px;color:var(--text-mut);font-weight:600;border-bottom:2px solid var(--border);white-space:nowrap;}
table.list td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.list tr:hover td{background:#f9fafc;}
table.list tr.clickable{cursor:pointer;}
table.list td.num,table.list th.num{text-align:right;}
table.list .ticket-no{color:var(--blue);font-weight:600;white-space:nowrap;}
table.list .sub{color:var(--text-mut);font-size:11px;}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:flex-end;}
.filters > *{min-width:140px;flex:1;}
.filters label{margin-top:0;}
.filters .filter-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto;min-width:0;}
.list-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-mut);margin-bottom:10px;}
.pagination{display:flex;gap:4px;flex-wrap:wrap;margin-top:14px;justify-content:flex-end;}
.pagination a,.pagination span{padding:5px 10px;border:1px solid var(--border);border-radius:6px;font-size:12.5px;background:#fff;}
.pagination a:hover{background:#f2f4f8;}
.pagination .current{background:var(--blue);color:#fff;border-color:var(--blue);}
.pagination .gap{border:none;background:none;}

/* ---- dashboard ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;display:block;color:inherit;}
a.stat-card:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(41,82,208,.08);}
.stat-card .num{font-size:26px;font-weight:700;}
.stat-card .lbl{font-size:12px;color:var(--text-mut);margin-top:2px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;}
a.bar-row:hover .lbl{color:var(--blue);}
.bar-row .lbl{width:150px;flex-shrink:0;color:var(--text-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;background:#eef0f5;border-radius:4px;height:14px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;background:var(--blue);}
.bar-row .val{width:34px;text-align:right;font-weight:600;flex-shrink:0;}

/* ---- ticket detail ---- */
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:13px;}
.kv div.k{color:var(--text-mut);}
.kv.stacked{grid-template-columns:1fr;}
.kv.stacked .k{margin-top:6px;}
.prewrap{white-space:pre-wrap;word-wrap:break-word;font-size:14px;}
.timeline{border-left:2px solid var(--border);margin-left:6px;padding-left:16px;}
.timeline .item{position:relative;padding-bottom:16px;font-size:13px;}
.timeline .item::before{content:'';position:absolute;left:-21px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--blue);}
.timeline .item .meta{color:var(--text-mut);font-size:11px;}
.comment{background:#f8f9fc;border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:13px;}
.comment .meta{color:var(--text-mut);font-size:11px;margin-bottom:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.comment.internal{background:#fff8e6;border-color:#f3d98b;}
.attachment-list{list-style:none;padding:0;margin:8px 0 0;font-size:12.5px;}
.attachment-list li{display:flex;gap:8px;align-items:center;padding:4px 0;flex-wrap:wrap;}
.detail-main{flex:2;}
.detail-side{flex:1;}

/* ---- tabs (admin) ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;}
.tabs a,.tabs button{background:none;border:none;padding:9px 14px;font-size:13px;font-weight:600;color:var(--text-mut);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;}
.tabs a.active,.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);}
.inline-form{display:flex;gap:8px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;}
.inline-form > div{flex:1;min-width:120px;}
.inline-form label{margin-top:0;}

/* ---- error pages ---- */
.error-page{max-width:560px;margin:40px auto;text-align:center;}
.error-page .error-code{font-size:48px;font-weight:700;color:var(--blue);line-height:1;}
.error-page .pagetitle{justify-content:center;}
.error-page .debug{text-align:left;margin-top:20px;font-size:12px;}
.error-page pre{white-space:pre-wrap;word-break:break-word;background:#f8f9fc;border:1px solid var(--border);padding:10px;border-radius:6px;max-height:400px;overflow:auto;}

/* ---- responsive ---- */
@media (max-width: 900px){
  main{padding:16px;}
  .row{flex-direction:column;align-items:stretch;}
  .row > *{width:100%;}
  .kv{grid-template-columns:120px 1fr;}
  .bar-row .lbl{width:110px;}
}
@media (max-width: 720px){
  header.topbar{padding:0 12px;}
  header.topbar .brand-logo{display:none;}
  header.topbar .brand-mark{display:block;}
  header.topbar .brand-text{border-left:none;padding-left:0;}
  .nav-toggle{display:inline-block;}
  nav.mainnav{display:none;flex-direction:column;align-items:stretch;width:100%;padding-bottom:10px;}
  nav.mainnav.open{display:flex;}
  nav.mainnav a{padding:10px 12px;}
  .userbox{margin:8px 0 0;padding:10px 0 0;border-left:none;border-top:1px solid var(--border);justify-content:space-between;}
  .filters > *{min-width:100%;}
  .kv{grid-template-columns:1fr;gap:2px 0;}
  .kv div.k{margin-top:6px;}
  h1.pagetitle{font-size:18px;}
  .login-box{padding:26px 20px;}
}
@media print{
  header.topbar,.toast,.filters,.pagination,.btn,form{display:none !important;}
  main{padding:0;max-width:none;}
  .card{border:none;box-shadow:none;page-break-inside:avoid;}
}
.backlink{font-size:13px;color:var(--blue);}
.backlink:hover{text-decoration:underline;}
.edit-details summary::-webkit-details-marker{color:var(--blue);}
/* ---- action item inline edit (details/summary popover) ---- */
.ai-edit{position:relative;}
.ai-edit summary{display:inline-block;}
.ai-edit summary::-webkit-details-marker{display:none;}
.ai-edit-form{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 14px;width:320px;box-shadow:0 6px 24px rgba(0,0,0,.12);text-align:left;white-space:normal;}
.ai-edit-form label{margin-top:8px;}
@media (max-width:720px){.ai-edit-form{position:static;width:100%;margin-top:8px;}}