/* Page styles: IT Support, Admin, Profile, Messages and the sign-in gate.
   Loaded after design.css; use its tokens and read its header before adding rules.
   Scopes: .support-page, #support-detail and #support-form (tickets.js); .admin-page, #admin-user-dialog and
   #admin-role-dialog (admin.js); .profile-page (profile.js); #inbox-dialog (inbox.js).
   Layout: square blocks 2px apart, sections as panels (off-white blocks) whose tables run edge to edge, the headline
   number in PP Editorial New italic on a dark block, and every dialog as the design's sheet. */

/* ---------- Shared: page rhythm, panels with edge-to-edge tables, hints ---------- */
/* IT Support and Admin show their counts inside their panels, so the shell's count line is not needed there. */
.work-surface:has(> #content > .support-page)>.surface-meta,.work-surface:has(> #content > .admin-page)>.surface-meta{display:none}
.support-page,.admin-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);min-width:0}
.support-page>*,.admin-page>*{min-width:0}
.support-panel,.admin-panel{gap:var(--s4);min-width:0}
/* position:relative keeps hidden header labels (.sr-only) inside the scroll box, so they never widen the page. */
.support-panel .table-wrap,.admin-panel .table-wrap{position:relative;margin-inline:calc(var(--s5) * -1);border:0;background:transparent}
.support-panel :is(th,td):first-child,.admin-panel :is(th,td):first-child{padding-inline-start:var(--s5)}
.support-panel :is(th,td):last-child,.admin-panel :is(th,td):last-child{padding-inline-end:var(--s5)}
.support-panel th,.admin-panel th{padding-top:var(--s2)}
.admin-hint{margin:0;max-width:78ch;font-size:13px;line-height:1.5;color:var(--ink-soft)}
:is(.support-panel,.admin-panel) tbody tr:hover>td:is(.support-empty,.admin-empty){background:none}
:is(.support-panel,.admin-panel) td:is(.support-empty,.admin-empty){padding:var(--s6) var(--s4);color:var(--ink-soft);font-weight:500;text-align:center;white-space:normal}
:is(.support-page,.admin-page,#support-detail) .num{font-variant-numeric:tabular-nums}
/* A filter that is set reads as a selected chip (accent block). */
.support-filters select:not(:has(option[value=""]:checked)),.admin-filters select:not(:has(option[value=""]:checked)){border-color:var(--accent);background-color:var(--accent);color:var(--dark-teal)}

/* ---------- IT Support: status cards ---------- */
.support-cards{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0}
.support-card{display:grid;align-content:start;gap:var(--s2);min-width:0;min-height:148px;padding:var(--s5) var(--s4) var(--s5) var(--s5);background:var(--panel);color:var(--ink)}
.support-card h3{margin:0;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.support-card strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s2);margin:0;font:700 28px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.support-card small{font:600 13px/1.2 var(--sans);letter-spacing:0;color:var(--ink-soft)}
.support-card p{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-soft)}
.support-card.main{gap:var(--s3);background:var(--dark-teal);color:var(--off-white)}
.support-card.main strong{font:italic 200 64px/.9 var(--editorial);letter-spacing:-.04em;color:inherit}
.support-card.main :is(h3,small,p){color:inherit;opacity:.85}
.support-card.main p{display:inline-flex;align-items:center;gap:var(--s2)}
.support-card.main p::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--yellow)}

/* ---------- IT Support: notices ---------- */
.support-notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin:0;padding:var(--s4) var(--s5);border:0;border-inline-start:3px solid var(--line-strong);background:var(--panel);color:var(--ink);font-size:13.5px;line-height:1.5}
.support-notice>span{flex:1 1 280px;min-width:0}
.support-notice .button{min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.support-notice:has(> a){border-inline-start-color:var(--dark-teal);background:var(--accent);color:var(--dark-teal)}
.support-notice:has(> a) .button{border-color:var(--dark-teal);background:transparent;color:var(--dark-teal)}
.support-notice:has(> a) .button:not(:disabled):hover{border-color:var(--dark-teal);background:var(--white)}
.support-notice.error{border-inline-start-color:var(--danger);background:var(--danger-soft);color:var(--ink)}

/* ---------- IT Support: tickets panel ---------- */
.support-head{gap:var(--s3)}
.support-head .admin-profile-title{margin:0;font:700 17px/1.2 var(--sans);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.support-count{margin-inline-end:auto;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.support-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.support-setup{margin:0;padding:var(--s3) var(--s4);background:var(--sand);color:var(--dark-teal);font-size:13.5px;font-weight:600;line-height:1.45}
.support-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.support-filters select{width:auto;min-width:150px;max-width:240px}
.support-filters .search-box{flex:1 1 220px;max-width:320px;margin-inline-start:auto}
.support-table table{font-size:13.5px}
/* Names and categories wrap so the eight All tickets columns fit a laptop; codes, pills, dates and Teams stay on one line. */
.support-table :is(th,td){padding-inline:12px}
.support-table td{white-space:normal}
.support-table td:is(.support-number,.num,:last-child){white-space:nowrap}
.support-table td.support-number{min-width:0;font-weight:600}
.support-table td.support-number button{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-decoration-color:transparent}
.support-table td.support-number button:hover{color:var(--ink);text-decoration-color:currentColor}
.support-table td.support-subject{min-width:200px;max-width:420px;font-weight:700}
.support-table td.support-subject button{color:var(--ink);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.support-urgent::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:6px;border-radius:50%;background:var(--orange);vertical-align:1px}
.support-status.waiting{background:var(--yellow);color:var(--dark-teal)}
.support-status.open{background:var(--light-teal);color:var(--dark-teal)}
.support-status.progress{background:var(--lavender);color:var(--dark-teal)}
.support-status.closed{border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft)}
.support-teams{display:inline-flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}
.support-teams .i{width:16px;height:16px;stroke-width:1.8}
.support-panel .pagination{padding:var(--s2) 0 0}

/* ---------- IT Support: ticket sheet ---------- */
.support-ricon{display:grid;place-items:center;width:36px;height:36px;flex:none;background:var(--accent);color:var(--dark-teal)}
:is(#support-detail,#support-form) .dialog-heading{justify-content:flex-start}
:is(#support-detail,#support-form) .dialog-heading strong{flex:1;min-width:0}
#support-detail h2{margin:0 0 var(--s5);font:700 22px/1.25 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.support-fields{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px var(--s4);margin:0;font-size:13.5px;line-height:1.45}
.support-fields dt{color:var(--ink-soft)}
.support-fields dd{min-width:0;margin:0;font-weight:600;overflow-wrap:anywhere}
.support-fields .pre-line{display:block;padding:var(--s3) var(--s4);background:var(--panel);font-weight:500;line-height:1.55}
.support-fields .pill{vertical-align:middle}
.support-foot{justify-content:space-between}
.support-foot>.support-closed-note{flex:1 1 220px;margin:0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.support-status-actions{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;padding:0;border:0}
.support-status-actions>span{margin-inline-end:auto;font:700 13px/1.2 var(--sans);color:var(--ink)}
.support-status-actions .button[aria-pressed="true"],.support-status-actions .button[aria-pressed="true"]:hover{border-color:var(--accent);background:var(--accent);color:var(--dark-teal);opacity:1;filter:none;cursor:default}
.support-status-actions .button[aria-pressed="true"]::before{content:"";width:5px;height:9px;margin-inline-end:2px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.support-lock{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2) var(--s3)}
.support-lock>span{margin-inline-end:auto;font-size:13px;color:var(--ink-soft)}

/* ---------- IT Support: new ticket sheet ---------- */
#support-form form>label,#support-form .support-grid>label{margin:0 0 var(--s4)}
#support-form .support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
.support-from{margin:0 0 var(--s4);font-size:13px;color:var(--ink-soft)}
.support-from b{color:var(--ink)}
#support-form .support-upload input[type=file]{width:100%;min-height:52px;padding:var(--s2);border:1px dashed var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink-soft);font:500 13px/1.3 var(--sans);cursor:pointer}
#support-form .support-upload input[type=file]:hover{border-color:var(--ink)}
#support-form .support-upload input[type=file]:disabled{opacity:.45;cursor:not-allowed}
#support-form .support-upload input[type=file]::file-selector-button{min-height:var(--control-sm);margin-inline-end:var(--s3);padding:0 var(--s3);border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 13px/1 var(--sans);cursor:inherit}
#support-form .support-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:2px;margin:calc(var(--s2) * -1) 0 var(--s4)}
#support-form .support-shots:empty{display:none}
#support-form .support-shots figure{display:grid;justify-items:stretch;gap:0;margin:0;background:var(--panel)}
#support-form .support-shots img{display:block;width:100%;height:96px;object-fit:cover;border:0;border-radius:0;background:var(--panel)}
#support-form .support-shots figcaption .button{display:flex;justify-content:center;width:100%;min-height:var(--control-sm);border:0;border-top:1px solid var(--line);font-size:13px}
.support-hint{margin:0 0 var(--s4);padding:var(--s3) var(--s4);background:var(--panel);font-size:13px;line-height:1.5;color:var(--ink-soft)}
#support-form .support-form-status{margin:0 0 var(--s4);font:600 13px/1.45 var(--sans);color:var(--ink)}
#support-form .support-form-status:empty{margin:0}
#support-form .support-form-status.error{display:flex;align-items:flex-start;gap:var(--s2);color:var(--ink)}
#support-form .support-form-status.error::before{content:"";width:8px;height:8px;flex:none;margin-top:5px;border-radius:50%;background:var(--orange)}

/* ---------- Admin: section tabs, add forms, people list ---------- */
.admin-page .admin-bar{flex-wrap:nowrap}
.admin-page .admin-tabs{min-width:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.admin-page .admin-tabs::-webkit-scrollbar{display:none}
.admin-page .admin-bar>.button{flex:none}
.admin-page .admin-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);margin:0}
.admin-page .admin-add label{flex:1 1 240px;min-width:0;margin:0}
.admin-page .admin-add .button{flex:none}
.admin-panel>.panel-head .admin-hint{flex:1 1 320px}
.admin-list-head .search-box{flex:0 1 320px;max-width:none;margin-inline-start:auto}
.admin-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0}
.admin-page .admin-filters select{width:auto;max-width:220px;min-height:var(--control-sm);padding:0 var(--s2) 0 10px;font:700 13px/1.2 var(--sans)}
.admin-filters .button{min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.admin-filter-count{margin-inline-start:auto;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.admin-page .admin-table{overflow:auto}
.admin-table table{font-size:13.5px}
.admin-table :is(th,td){padding-inline:12px}
.admin-table td:first-child{min-width:220px}
.admin-table td:is(.num,:has(> .admin-status)){white-space:normal}
.admin-person{display:flex;align-items:center;gap:var(--s3);min-width:0}
.admin-person strong{display:block;font:700 14px/1.3 var(--sans);color:var(--ink)}
.admin-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--lavender);color:var(--dark-teal);font:700 12.5px/1 var(--sans);letter-spacing:0}
.admin-avatar.tone-1{background:var(--light-teal)}
.admin-avatar.tone-2{background:var(--sand)}
.admin-avatar.tone-3{background:var(--slate-300)}
.admin-sub{display:block;margin-top:2px;font-size:12px;font-weight:500;line-height:1.35;color:var(--ink-soft)}
.admin-page .admin-badge{margin-inline-start:var(--s2);vertical-align:middle}
.admin-page .admin-status{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;color:var(--ink)}
.admin-page .admin-status::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--success)}
.admin-page .admin-status.paused::before{background:var(--orange)}
.admin-page .admin-status.off::before{background:var(--danger)}
.admin-page .admin-status.archived::before{border:1.5px solid var(--line-strong);background:transparent}
.admin-page .admin-row-actions{text-align:end;white-space:nowrap}
.admin-page .admin-row-actions>*+*{margin-left:0;margin-inline-start:var(--s2)}
.admin-role{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.admin-role .admin-badge{margin:0}
.admin-role button{font-weight:700}
.admin-table td.admin-list{min-width:200px;max-width:360px;color:var(--ink-soft);white-space:normal}
.admin-table td.admin-change{min-width:260px;white-space:normal}
/* On wider screens the row actions stay in view while a narrow window scrolls the table sideways. */
@media (min-width:861px){
 .admin-table td.admin-row-actions,.admin-table:has(td.admin-row-actions) th:last-child{position:sticky;right:0;z-index:1;background:var(--panel)}
 .admin-table tbody tr:hover>td.admin-row-actions{background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
 .admin-table td.admin-row-actions:has(.admin-menu[open]){z-index:2}
}

/* ---------- Admin: Manage menu (the design's menu; a fixed layer placed by admin.js) ---------- */
.admin-menu summary.button{gap:4px;padding-inline:var(--s3) var(--s2)}
.admin-menu summary .i{width:16px;height:16px;transition:transform .15s ease}
.admin-menu[open] summary .i{transform:rotate(180deg)}
.admin-menu[open] summary.button{border-color:var(--ink);background:var(--panel)}
.admin-menu-list{position:fixed;inset:var(--menu-top,-9999px) auto auto var(--menu-left,-9999px);z-index:45;display:grid;width:260px;max-width:calc(100vw - 16px);padding:6px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);box-shadow:none;text-align:start;white-space:normal}
.admin-menu .admin-menu-list button{display:flex;align-items:center;width:100%;min-height:40px;padding:10px;border:0;border-radius:0;background:none;color:var(--ink);font:600 13.5px/1.25 var(--sans);text-align:start;text-decoration:none}
.admin-menu .admin-menu-list button:hover,.admin-menu .admin-menu-list button:focus-visible{background:var(--panel);text-decoration:none}
.admin-menu .admin-menu-list button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.admin-menu .admin-menu-list button.danger{color:var(--danger)}
.admin-menu-list small{margin-top:4px;padding:10px 10px 6px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--ink-soft)}

/* ---------- Admin: dialogs (person actions, Odoo profile, role editor) ---------- */
:is(#admin-user-dialog,#admin-role-dialog) form>label{margin:0 0 var(--s4)}
#admin-user-dialog form>p{margin:0 0 var(--s4);font-size:13.5px;line-height:1.55}
.admin-who{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5);padding:var(--s3) var(--s4);background:var(--panel)}
.admin-who strong{display:block;font:700 14px/1.3 var(--sans)}
#admin-profile-body{display:grid;align-content:start}
#admin-profile-body>.admin-hint{margin-bottom:var(--s2)}
#admin-user-dialog .admin-profile-title{margin:var(--s4) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--line);font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.admin-fields{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px var(--s4);margin:0;font-size:13.5px;line-height:1.45}
.admin-fields dt{color:var(--ink-soft)}
.admin-fields dd{min-width:0;margin:0;font-weight:600;overflow-wrap:anywhere}
.admin-fields dd .muted,.support-table td .muted{font-size:inherit;font-weight:500;line-height:inherit}
.admin-none{margin:0;font-size:13.5px;color:var(--ink-soft)}
.admin-error{margin:var(--s2) 0 0;padding:var(--s3) var(--s4);border-inline-start:3px solid var(--danger);background:var(--danger-soft);color:var(--ink);font-size:13.5px}
/* Role editor: pages as checkbox chips, actions as checkbox tiles; a ticked box shows a check, not only a color. */
#admin-role-dialog .admin-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;min-width:0;margin:0 0 var(--s5);padding:0;border:0}
#admin-role-dialog .admin-checks.admin-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
#admin-role-dialog .admin-checks legend{margin:0 0 var(--s2);padding:0;font:700 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
#admin-role-dialog .admin-check{position:relative;display:block;margin:0;font:inherit;cursor:pointer}
#admin-role-dialog .admin-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#admin-role-dialog .admin-check span{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:2px var(--s2);height:100%;padding:8px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:700 13px/1.3 var(--sans)}
#admin-role-dialog .admin-checks:not(.admin-chips) .admin-check span{align-items:start;padding:12px}
#admin-role-dialog .admin-check span::before{content:"";width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--line-strong);background:var(--bg)}
#admin-role-dialog .admin-checks:not(.admin-chips) .admin-check span::before{margin-top:1px}
#admin-role-dialog .admin-check small{grid-column:2;margin:0;font:500 12px/1.4 var(--sans);color:var(--ink-soft)}
#admin-role-dialog .admin-check:hover span{border-color:var(--ink)}
#admin-role-dialog .admin-check input:checked+span{border-color:var(--accent);background:var(--accent);color:var(--dark-teal)}
#admin-role-dialog .admin-check input:checked+span small{color:var(--dark-teal)}
#admin-role-dialog .admin-check input:checked+span::before{border-color:var(--dark-teal);background:var(--dark-teal)}
#admin-role-dialog .admin-check input:checked+span::after{content:"";position:absolute;inset-inline-start:17.5px;top:calc(50% - 7px);width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
#admin-role-dialog .admin-checks:not(.admin-chips) .admin-check input:checked+span::after{top:15px}
#admin-role-dialog .admin-check input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
/* Pages by menu section; an action none of whose pages is ticked is off, with the page that would allow it. */
#admin-role-dialog .admin-checks.admin-sections{display:grid;align-items:start;gap:var(--s3)}
#admin-role-dialog .admin-section{display:grid;gap:6px;min-width:0}
#admin-role-dialog .admin-section-name{font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#admin-role-dialog .admin-section-pages{display:flex;flex-wrap:wrap;gap:var(--s2)}
#admin-role-dialog .admin-section-note{font:500 12px/1.4 var(--sans);color:var(--ink-soft)}
#admin-role-dialog .admin-check small[hidden]{display:none}
#admin-role-dialog .admin-check .admin-needs{color:var(--ink-soft)}
#admin-role-dialog .admin-check .admin-needs-off{color:var(--danger)}
#admin-role-dialog .admin-check-off,#admin-role-dialog .admin-check-off input{cursor:not-allowed}
#admin-role-dialog .admin-check-off span{border-style:dashed;color:var(--ink-soft)}
#admin-role-dialog .admin-check-off:hover span{border-color:var(--line-strong)}

/* ---------- Profile (profile.js): hero with badge, Role and Schedule, current allocation, previous allocations ---------- */
.profile-page #content{display:grid;gap:var(--s5);padding:0}
.profile-page .page-heading{display:none}
.pf-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,340px);align-items:center;gap:var(--s5);overflow:hidden;padding:var(--s5);background:var(--dark-teal);color:var(--off-white)}
.pf-hero :focus-visible{outline-color:var(--light-teal)}
.pf-orb{position:absolute;inset-inline-end:calc(340px + var(--s5) + var(--s4));width:72px;height:72px;border-radius:50%;background:var(--teal-700);opacity:.7}
.pf-orb:first-child{top:-36px}
.pf-orb+.pf-orb{top:46px}
.pf-avatar{position:relative;display:grid;place-items:center;width:126px;height:126px;flex:none;overflow:hidden;border-radius:50%;background:var(--lavender);color:var(--dark-teal);font:italic 400 52px/1 var(--editorial);letter-spacing:-.03em}
.pf-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.pf-id{position:relative;display:grid;justify-items:start;gap:var(--s2);min-width:0}
.pf-company{margin:0;font:700 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-300)}
.pf-name{margin:0;font:700 44px/1.08 var(--sans);letter-spacing:-.03em;color:var(--off-white);overflow-wrap:anywhere}
.pf-name em{font:italic 400 1.06em/1 var(--editorial);letter-spacing:-.03em;color:var(--light-teal)}
.pf-title{margin:0;font-size:16px;color:var(--slate-300)}
.pf-id .profile-link-status{white-space:normal}
.pf-chips{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:100%;margin-top:var(--s3)}
.pf-chip{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;max-width:100%;min-height:var(--control);padding:0 var(--s3);border:1px solid var(--teal-700);font-size:14px;font-weight:600;color:var(--off-white)}
.pf-chip>span{min-width:0;overflow-wrap:anywhere}
.pf-chip .i{width:16px;height:16px;color:var(--slate-300)}
.pf-copy{flex:none;padding:0;border:0;background:none;color:inherit;font:700 13.5px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pf-chip .pf-copy{color:var(--light-teal)}
.pf-badge{position:relative;display:grid;align-content:start;gap:var(--s2);min-width:0;min-height:200px;padding:var(--s5) var(--s4) var(--s4);background:var(--light-teal);color:var(--dark-teal)}
.pf-badge-wait{background:var(--teal-800)}
.pf-slot{position:absolute;top:var(--s3);left:50%;width:48px;height:6px;border-radius:3px;background:var(--slate);opacity:.55;transform:translateX(-50%)}
.pf-badge-head,.pf-badge-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-width:0}
.pf-badge-logo{display:block;width:calc(15px * 923.74 / 212.24);height:15px;fill:var(--dark-teal)}
.pf-badge .pf-label{color:var(--dark-teal);opacity:.75}
.pf-badge-id{font:700 34px/1.1 var(--sans);letter-spacing:.05em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pf-badge-id.pf-unset{font-size:20px;letter-spacing:0}
.pf-barcode{display:block;width:100%;height:44px;fill:var(--dark-teal)}
.pf-badge-foot{margin-top:var(--s1);font-size:13.5px;font-weight:600}
.pf-badge-foot>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-label{font:700 11.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pf-unset{font-weight:500!important;color:var(--ink-soft)}
.pf-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch;gap:var(--s5)}
.pf-panel{display:grid;align-content:start;gap:var(--s4);min-width:0;padding:var(--s5);background:var(--panel)}
.pf-panel h3{margin:0;font:700 17px/1.2 var(--sans);letter-spacing:-.015em}
.pf-tiles{display:grid;gap:2px}
.pf-role .pf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-tile{display:grid;align-content:start;gap:6px;min-width:0;padding:var(--s4);background:var(--bg)}
.pf-tile strong{font:700 16px/1.3 var(--sans);overflow-wrap:anywhere}
.pf-tile small{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.pf-tile .pf-clock{margin-top:var(--s2);font:italic 400 48px/1 var(--editorial);letter-spacing:-.03em}
.pf-person{display:flex;align-items:center;gap:var(--s2);min-width:0}
.pf-mini{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--sand);color:var(--dark-teal);font:700 11px/1 var(--sans)}
.pf-current{display:grid;gap:var(--s4);padding:var(--s5);background:var(--light-teal);color:var(--dark-teal)}
.pf-current-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.pf-current h3{margin:0;font:700 12.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.pf-left{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;background:var(--yellow);color:var(--dark-teal);font:700 12.5px/1 var(--sans);white-space:nowrap}
.pf-units{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.pf-unit{display:grid;align-content:start;gap:var(--s2);min-width:0;padding:var(--s4);background:color-mix(in srgb,var(--light-teal) 45%,var(--white))}
.pf-unit .pf-label{color:var(--dark-teal);opacity:.75}
.pf-unit strong{font:italic 400 40px/1.05 var(--editorial);letter-spacing:-.03em;overflow-wrap:anywhere}
.pf-unit strong.pf-unset{font:500 16px/1.3 var(--sans);color:var(--dark-teal);opacity:.75}
.pf-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s3)}
.pf-range{margin:0;font-size:13px;color:var(--ink-soft)}
.pf-tone-a{--tone:var(--light-teal)}
.pf-tone-b{--tone:var(--lavender)}
.pf-tone-now{--tone:var(--yellow)}
.pf-timeline{display:flex;gap:2px;min-height:50px}
.pf-timeline span{display:flex;align-items:center;flex:0 1 0;min-width:0;padding:0 var(--s2);background:var(--tone);color:var(--dark-teal)}
.pf-timeline b{overflow:hidden;font:700 12.5px/1.2 var(--sans);text-overflow:ellipsis;white-space:nowrap}
.pf-ticks{position:relative;display:flex;gap:2px;margin-top:calc(var(--s2) * -1);font-size:12.5px;color:var(--ink-soft)}
.pf-ticks span{flex:0 1 0;min-width:0;overflow:hidden;white-space:nowrap}
.pf-ticks .pf-tick-end{position:absolute;top:0;inset-inline-end:0;padding-inline-start:var(--s2);background:var(--panel)}
.pf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.pf-card{display:grid;align-content:start;gap:var(--s3);min-width:0;padding:var(--s4);border-top:4px solid var(--tone);background:var(--bg)}
.pf-card header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.pf-card h4{margin:0;font:italic 400 30px/1 var(--editorial);letter-spacing:-.03em}
.pf-card header small{flex:none;font:700 12.5px/1.2 var(--sans);color:var(--ink-soft)}
.pf-card p{margin:0;font-size:14.5px;font-weight:600}
.pf-card dl{display:grid;gap:var(--s2);margin:0}
.pf-card dl div{display:flex;justify-content:space-between;gap:var(--s3);min-width:0}
.pf-card dt{flex:none;margin:0;font-size:14px;color:var(--ink-soft)}
.pf-card dd{min-width:0;margin:0;font-weight:700;text-align:end;overflow-wrap:anywhere}
.pf-none{margin:0;color:var(--ink-soft)}
.pf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);font-size:13.5px;color:var(--ink-soft)}
.pf-foot p{margin:0}
.pf-foot>div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.pf-warning{margin:0;padding:var(--s3) var(--s4);border-inline-start:3px solid var(--orange);background:var(--panel);color:var(--ink);font-size:13.5px;line-height:1.5}
.pf-error{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-inline-start:3px solid var(--danger);background:var(--danger-soft);color:var(--ink)}
.pf-error p{margin:0}
.pf-wait{min-height:220px;background:var(--panel)}
.pf-current.pf-wait{min-height:170px;background:var(--panel)}
.profile-page .pf-empty{background:var(--panel)}

/* ---------- Messages ---------- */
#inbox-dialog .inbox-list{display:grid;gap:0}
#inbox-dialog .inbox-item{display:grid;gap:6px;padding:var(--s4) 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
#inbox-dialog .inbox-item:first-child{padding-top:0;border-top:0}
#inbox-dialog .inbox-item header{display:grid;gap:2px}
#inbox-dialog .inbox-item strong{font:600 14.5px/1.35 var(--sans);overflow-wrap:anywhere}
#inbox-dialog .inbox-item.unread strong{font-weight:700}
#inbox-dialog .inbox-item.unread strong::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:var(--s2);border-radius:50%;background:var(--orange);vertical-align:1px}
#inbox-dialog .inbox-item small{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
#inbox-dialog .inbox-item p{margin:0;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
#inbox-dialog .inbox-note{margin:0;padding:var(--s6) var(--s4);color:var(--ink-soft);font-size:14px;text-align:center}
#inbox-dialog .inbox-error{margin:0;padding:var(--s3) var(--s4);border-inline-start:3px solid var(--danger);background:var(--danger-soft);color:var(--ink);font-size:13.5px}

/* ---------- Dark theme: the headline card turns light teal (as the design's main KPI); the profile block lifts ---------- */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .support-card.main{background:var(--light-teal);color:var(--dark-teal)}
 :root:not([data-theme="light"]) .support-card.main p::before{background:var(--dark-teal)}
 :root:not([data-theme="light"]) .pf-hero{background:var(--teal-900)}
}
:root[data-theme="dark"] .support-card.main{background:var(--light-teal);color:var(--dark-teal)}
:root[data-theme="dark"] .support-card.main p::before{background:var(--dark-teal)}
:root[data-theme="dark"] .pf-hero{background:var(--teal-900)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
 .pf-hero{grid-template-columns:auto minmax(0,1fr)}
 .pf-badge{grid-column:1 / -1;width:100%;max-width:420px}
 .pf-orb{display:none}
 .pf-row{grid-template-columns:minmax(0,1fr)}
 .pf-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 .support-page,.admin-page,.profile-page #content{gap:var(--s4)}
 .support-panel,.admin-panel,.pf-panel,.pf-current{padding:var(--s4)}
 .support-panel .table-wrap,.admin-panel .table-wrap{margin-inline:calc(var(--s4) * -1)}
 .support-panel :is(th,td):first-child,.admin-panel :is(th,td):first-child{padding-inline-start:var(--s4)}
 .support-panel :is(th,td):last-child,.admin-panel :is(th,td):last-child{padding-inline-end:var(--s4)}
 .support-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .support-card{min-height:0;padding:var(--s4)}
 .support-card.main{grid-column:1 / -1}
 .support-card.main strong{font-size:52px}
 .support-notice{padding:var(--s3) var(--s4)}
 .support-actions{width:100%}
 .support-actions .button{flex:1}
 .support-filters select{flex:1 1 140px;max-width:none}
 .support-filters .search-box{flex:1 1 100%;max-width:none;margin:0}
 .admin-list-head .search-box{flex:1 1 100%}
 .admin-filter-count{flex:1 1 100%;margin:0}
 .admin-page .admin-add .button{flex:1 1 100%}
 /* The Manage menu is a bottom sheet over a scrim (the open summary's backdrop closes it). */
 .admin-menu[open]>summary::before{content:"";position:fixed;inset:0;z-index:60;background:var(--scrim);cursor:default}
 .admin-menu-list{inset:auto 0 0;z-index:61;width:auto;max-width:none;padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line-strong)}
 .admin-menu .admin-menu-list button{min-height:48px;padding-inline:var(--s4);font-size:15px}
 .admin-menu-list small{padding-inline:var(--s4)}
 .pf-hero{gap:var(--s4);padding:var(--s4)}
 .pf-avatar{width:72px;height:72px;font-size:30px}
 .pf-name{font-size:32px}
 .pf-badge{max-width:none}
 .pf-units,.pf-cards{grid-template-columns:minmax(0,1fr)}
 .pf-unit strong{font-size:32px}
 .support-fields,.admin-fields{grid-template-columns:minmax(0,1fr);gap:2px}
 .support-fields dd,.admin-fields dd{margin-bottom:var(--s2)}
}
@media (max-width:480px){
 #support-form .support-grid,#admin-role-dialog .admin-checks:not(.admin-chips){grid-template-columns:minmax(0,1fr)}
 .support-status-actions>span{flex:1 1 100%}
 .support-status-actions .button{flex:1 1 0;padding-inline:var(--s2)}
 .pf-role .pf-tiles,.pf-hero{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
 .admin-menu summary .i{transition:none}
}