/* ============================================================================
   EpochCore Support Portal — app-shell + support components.
   Builds on wxo.css (teal sub-brand). Client-facing, dependable, functional.
   ============================================================================ */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;}
@media(max-width:860px){.app{grid-template-columns:1fr;}}

/* ── sidebar ─────────────────────────────────────────────── */
.side{background:var(--surface);border-right:1px solid var(--line2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;}
@media(max-width:860px){.side{position:fixed;left:0;top:0;width:264px;z-index:60;transform:translateX(-100%);
  transition:transform .22s ease;box-shadow:0 0 60px rgba(18,40,38,0.2);}.side.open{transform:none;}}
.side-logo{display:flex;align-items:center;gap:11px;padding:20px 22px;border-bottom:1px solid var(--line);}
.side-logo img{width:30px;height:30px;}
.side-logo .lt{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;line-height:1.3;}
.side-logo .lt span{display:block;font-weight:400;font-size:9.5px;color:var(--teal);letter-spacing:1.2px;}
.side-sec{padding:18px 14px 4px;}
.side-sec-l{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);padding:0 10px 8px;}
.side-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--serif);font-size:15px;color:var(--dim);padding:10px 12px;border-radius:7px;transition:background .12s,color .12s;}
.side-link svg{width:17px;height:17px;flex:none;stroke:currentColor;}
.side-link:hover{background:var(--hi);color:var(--ink);}
.side-link.active{background:var(--teal-soft);color:var(--teal);font-weight:600;}
.side-link .ct{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--teal);color:#f6f2e6;
  border-radius:999px;padding:2px 8px;letter-spacing:0.3px;}
.side-foot{margin-top:auto;padding:18px 22px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:10px;letter-spacing:0.4px;color:var(--mute);line-height:1.6;}
.side-foot a{color:var(--teal);}

/* ── topbar ──────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;
  border-bottom:1px solid var(--line);background:rgba(236,231,216,0.86);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:30;}
.top h1{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:-0.5px;margin:0;}
.top .right{display:flex;align-items:center;gap:14px;}
.statuspill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.8px;
  text-transform:uppercase;color:var(--ok);border:1px solid rgba(31,138,91,0.4);background:rgba(31,138,91,0.08);padding:7px 13px;}
.statuspill .d{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(31,138,91,0.5);}
.statuspill.deg{color:var(--amber);border-color:rgba(181,131,42,0.4);background:rgba(181,131,42,0.1);}
.statuspill.deg .d{background:var(--amber);box-shadow:0 0 8px rgba(181,131,42,0.5);}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:7px;padding:8px;cursor:pointer;color:var(--ink);}
.burger svg{width:18px;height:18px;display:block;stroke:currentColor;}
@media(max-width:860px){.burger{display:block;}.top{padding:14px 18px;}}
.overlay{display:none;position:fixed;inset:0;background:rgba(18,40,38,0.4);z-index:55;}
.overlay.open{display:block;}

/* ── main content ────────────────────────────────────────── */
.content{padding:32px;max-width:1000px;}
@media(max-width:860px){.content{padding:24px 18px;}}
.view{display:none;}
.view.active{display:block;animation:vfade .3s ease both;}
@keyframes vfade{from{opacity:0;transform:translateY(6px);}}

/* cards */
.panel{background:var(--surface);border:1px solid var(--line2);padding:26px 28px;margin-bottom:20px;}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.panel-h .pt{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-0.4px;}
.panel-h .ps{font-size:13px;color:var(--mute);}
.lead{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.6vw,42px);letter-spacing:-1px;line-height:1.05;margin:0 0 14px;}
.lead em{font-style:italic;color:var(--teal);}
.leadsub{font-size:17px;line-height:1.55;color:var(--dim);max-width:62ch;margin:0 0 26px;}
.leadsub b{color:var(--ink);font-weight:600;}

/* search */
.search{display:flex;gap:1px;background:var(--line);border:1px solid var(--line2);}
.search input{flex:1;background:var(--field);border:none;color:var(--ink);font-family:var(--serif);font-size:17px;padding:16px 18px;}
.search input:focus{outline:none;}
.search .si{display:flex;align-items:center;padding:0 16px;background:var(--field);color:var(--mute);}
.search .si svg{width:18px;height:18px;stroke:currentColor;}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line2);margin-top:20px;}
@media(max-width:680px){.qa{grid-template-columns:1fr;}}
.qa-btn{background:var(--surface);border:none;cursor:pointer;text-align:left;padding:22px 24px;display:flex;flex-direction:column;gap:7px;transition:background .12s;}
.qa-btn:hover{background:var(--hi);}
.qa-btn .qi{width:30px;height:30px;color:var(--teal);}
.qa-btn .qi svg{width:30px;height:30px;stroke:currentColor;fill:none;}
.qa-btn .qt{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-0.3px;}
.qa-btn .qd{font-size:13px;color:var(--mute);line-height:1.45;}

/* KB list */
.kb-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.kb-cat{font-family:var(--mono);font-size:11px;letter-spacing:0.6px;text-transform:uppercase;padding:7px 13px;cursor:pointer;
  background:none;border:1px solid var(--line2);color:var(--mute);transition:color .12s,border-color .12s,background .12s;}
.kb-cat:hover{color:var(--ink);}
.kb-cat.active{background:var(--teal);border-color:var(--teal);color:#f6f2e6;font-weight:600;}
.kb-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line2);}
.kb-item{background:var(--surface);padding:0;transition:background .12s;}
.kb-item.hidden{display:none;}
.kb-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:18px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);}
.kb-q:hover{background:var(--hi);}
.kb-q .cat{font-family:var(--mono);font-size:9px;letter-spacing:0.6px;text-transform:uppercase;color:var(--teal);
  border:1px solid var(--teal-line);padding:3px 7px;flex:none;}
.kb-q .arr{color:var(--mute);transition:transform .2s;flex:none;}
.kb-item.open .kb-q .arr{transform:rotate(90deg);}
.kb-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.kb-item.open .kb-a{max-height:600px;}
.kb-a-in{padding:0 22px 20px;font-size:14.5px;line-height:1.6;color:var(--dim);}
.kb-a-in b{color:var(--ink);font-weight:600;}
.kb-a-in code{font-family:var(--mono);font-size:12.5px;background:var(--hi);padding:2px 6px;color:var(--teal);}
.kb-empty{padding:30px;text-align:center;color:var(--mute);font-size:14px;}

/* forms */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.fg{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:0.6px;text-transform:uppercase;color:var(--mute);}
.field input,.field select,.field textarea{background:var(--field);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--serif);font-size:15px;padding:12px 14px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{min-height:120px;resize:vertical;line-height:1.5;}
.field .hint{font-size:12px;color:var(--mute);line-height:1.4;}
.req{color:var(--teal);}

/* confirmation */
.confirm{background:var(--field);border:1px solid var(--teal-line);border-left:3px solid var(--teal);padding:24px 28px;margin-bottom:20px;display:none;}
.confirm.show{display:block;animation:vfade .3s ease both;}
.confirm .ct{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-0.3px;color:var(--teal-deep);}
.confirm .cref{font-family:var(--mono);font-size:14px;color:var(--ink);margin-top:8px;}
.confirm .cmeta{font-size:14px;color:var(--dim);margin-top:12px;line-height:1.6;}
.confirm .cmeta b{color:var(--ink);}

/* tickets table */
.tkt-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tkt-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line2);}
.tkt{background:var(--surface);padding:18px 22px;cursor:pointer;transition:background .12s;display:grid;
  grid-template-columns:auto 1fr auto;gap:16px;align-items:center;}
.tkt:hover{background:var(--hi);}
.tkt .tid{font-family:var(--mono);font-size:12px;color:var(--teal);font-weight:600;}
.tkt .tsub{font-family:var(--serif);font-size:16px;font-weight:600;}
.tkt .tmeta{font-family:var(--mono);font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:0.4px;margin-top:3px;}
.tkt .tright{display:flex;align-items:center;gap:12px;}
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:0.6px;text-transform:uppercase;padding:5px 9px;border:1px solid;white-space:nowrap;}
.badge.open{color:var(--teal);border-color:var(--teal-line);background:var(--teal-soft);}
.badge.prog{color:#2a6fb0;border-color:rgba(42,111,176,0.34);background:rgba(42,111,176,0.08);}
.badge.resolved{color:var(--ok);border-color:rgba(31,138,91,0.4);background:rgba(31,138,91,0.08);}
.badge.closed{color:var(--mute);border-color:var(--line2);}
.badge.p1{color:#b03a2e;border-color:rgba(176,58,46,0.4);background:rgba(176,58,46,0.08);}
.badge.p2{color:#b5832a;border-color:rgba(181,131,42,0.4);background:rgba(181,131,42,0.08);}
.badge.p3{color:var(--teal);border-color:var(--teal-line);}
.badge.p4{color:var(--mute);border-color:var(--line2);}
.empty{padding:40px;text-align:center;color:var(--mute);}
.empty .et{font-family:var(--serif);font-size:18px;color:var(--dim);margin-bottom:8px;}

/* ticket detail */
.detail-back{font-family:var(--mono);font-size:11px;letter-spacing:0.6px;text-transform:uppercase;color:var(--teal);
  cursor:pointer;background:none;border:none;padding:0;margin-bottom:18px;}
.thread{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line2);margin:18px 0;}
.msg{background:var(--surface);padding:16px 20px;}
.msg .mh{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:0.5px;color:var(--mute);margin-bottom:8px;}
.msg .mh .who{color:var(--teal);font-weight:600;}
.msg.team{background:var(--field);}
.msg .mb{font-size:14.5px;line-height:1.55;color:var(--dim);}

/* status board */
.status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  background:var(--surface);border:1px solid var(--line);margin-bottom:1px;}
.status-row .sn{font-family:var(--serif);font-size:16px;font-weight:600;}
.status-row .sd{font-size:12.5px;color:var(--mute);margin-top:2px;}
.status-state{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.6px;
  text-transform:uppercase;color:var(--ok);}
.status-state .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(31,138,91,0.5);}

/* SLA table */
.sla{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line2);}
.sla th{font-family:var(--mono);font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--mute);
  text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);}
.sla td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--dim);}
.sla tr:last-child td{border-bottom:none;}
.sla td b{color:var(--ink);font-weight:600;}
.sla td a{color:var(--teal);}
.sla .tier{font-family:var(--mono);font-size:12px;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}

/* contact cards */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line2);}
@media(max-width:600px){.contacts{grid-template-columns:1fr;}}
.contact{background:var(--surface);padding:22px 24px;}
.contact .ck{font-family:var(--mono);font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--mute);}
.contact .cv{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:7px;}
.contact .cv a{color:var(--teal);}
.contact .cnote{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.4;}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.note-inline{font-size:13px;color:var(--mute);}