/* ============================================================
   DACHOST panel — pages: Support (/support), Notifications (/notifications),
   Team (/team) and Back office → Tickets (/admin/tickets).
   Page-specific tweaks only; tokens, panels, tables, chips, kv, thread,
   msg and composer come from app.css. Every rule is scoped under a page class.
   ============================================================ */

/* ---------- thread blocks (customer + admin) ---------- */
.p-support .thread,.p-admin-tickets .thread{margin-top:4px}
.p-support .notice,.p-admin-tickets .notice{margin-bottom:20px}
.p-support .msg-in,.p-admin-tickets .msg-in{min-width:0}
.p-support .msg .who,.p-admin-tickets .msg .who{flex-wrap:wrap;row-gap:2px}
.p-support .msg .who time,.p-admin-tickets .msg .who time{font-size:var(--fs-125);color:var(--text-3);white-space:nowrap}
.p-support .msg .who .tag,.p-admin-tickets .msg .who .tag{height:18px;font-size:var(--fs-11)}
.p-support .msg .body,.p-admin-tickets .msg .body{font-size:var(--fs-135);color:var(--text)}
.p-support .msg.is-staff,.p-admin-tickets .msg.is-staff{border-radius:0 var(--r-sm) var(--r-sm) 0}
.p-support .avatar-staff,.p-admin-tickets .avatar-staff{background:var(--ink);color:var(--on-ink)}
/* internal notes: warn-soft body, no accent bar (a note is not an answer) */
.p-admin-tickets .msg.is-note{box-shadow:none;padding-left:0}
.p-admin-tickets .msg.is-note .body{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--text)}

/* ---------- sticky composer ---------- */
.p-support .composer,.p-admin-tickets .composer{z-index:var(--z-sticky);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.p-support .composer .f,.p-admin-tickets .composer .f{margin:0}
.p-support .composer textarea.in,.p-admin-tickets .composer textarea.in{width:100%;resize:vertical}
.p-support .composer .btns .meta,.p-admin-tickets .composer .btns .meta{font-size:var(--fs-125)}
.p-admin-tickets .composer-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.p-admin-tickets .composer-head .canned{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.p-admin-tickets .composer-head .canned select.in{max-width:260px}
.p-admin-tickets .tk-note-hint{display:none;margin:6px 0 0}
.p-admin-tickets .tk-composer:has(input[value="note"]:checked) textarea.in{background:var(--warn-soft);border-color:var(--warn-line)}
.p-admin-tickets .tk-composer:has(input[value="note"]:checked) .tk-note-hint{display:block}
.p-admin-tickets .tk-composer:has(input[value="note"]:checked) .btn-ink{background:var(--warn-text)}

/* ---------- customer list / new ticket ---------- */
.p-support .sup-sla{margin-top:12px}
.p-support .sup-form{max-width:640px}
.p-support .sup-form .seg{margin-top:2px}
.p-support .sup-form .f .seg label{cursor:pointer}
.p-support .sup-form > footer > span{flex:1 1 auto;min-width:0}

/* ---------- admin ticket list ---------- */
.p-admin-tickets .tbl .c-id{width:56px}
.p-admin-tickets .tbl .is-late{color:var(--bad-text)}
.p-admin-tickets .tbl tr.is-high .c-name a{font-weight:600}
.p-admin-tickets .assignee{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.p-admin-tickets .assignee .avatar{width:22px;height:22px;font-size:10px}

/* ---------- admin ticket detail: two columns + right rail ---------- */
.p-admin-tickets.tk-detail{margin-top:4px}
.p-admin-tickets.tk-detail > .col > .composer{margin-top:24px}
.p-admin-tickets .tk-cust{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.p-admin-tickets .tk-cust > div{display:grid;min-width:0}
.p-admin-tickets .tk-cust b{font-size:var(--fs-135);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-admin-tickets .tk-cust .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-admin-tickets .rail .kv.kv-tight{grid-template-columns:96px 1fr}
.p-admin-tickets .rail .kv dd.is-bad{color:var(--bad-text)}
.p-admin-tickets .rail .panel-body > .btns{margin-top:12px}
.p-admin-tickets .rail .fields{gap:12px}

/* ---------- notifications page ---------- */
.p-notifications .tbl-notif .c-when{width:190px;white-space:nowrap}
.p-notifications .tbl-notif tr.is-unread td:first-child{box-shadow:inset 3px 0 var(--accent)}
.p-notifications .tbl-notif tr.is-unread .c-name a,.p-notifications .tbl-notif tr.is-unread .notif-title{font-weight:600}
.p-notifications .tbl-notif .c-name{white-space:normal}
.p-notifications .tbl-notif .notif-kind{display:inline-flex;vertical-align:middle;margin-right:8px;color:var(--text-3)}
.p-notifications .tbl-notif .notif-kind svg{width:16px;height:16px}
.p-notifications .tbl-notif .c-actions form{display:inline-flex}
.p-notifications .tbl-toolbar .meta{font-size:var(--fs-13)}

/* ---------- team page ---------- */
.p-team .team-who{display:inline-grid;vertical-align:middle;min-width:0}
.p-team .tbl .c-name .avatar{float:none;display:inline-flex;margin:0 10px 0 0;vertical-align:middle}
.p-team .section{margin-top:28px}
.p-team .section .tblwrap{margin-top:12px}
.ph .team-invite{display:inline-flex;align-items:center;gap:8px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .p-support .msg,.p-admin-tickets .msg{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .p-support .msg .avatar,.p-admin-tickets .msg .avatar{width:28px;height:28px;font-size:var(--fs-11)}
  .p-support .msg.is-staff,.p-admin-tickets .msg.is-staff{padding-left:10px}
  .p-support .composer .btns,.p-admin-tickets .composer .btns{gap:6px}
  .p-support .composer .btns .meta,.p-admin-tickets .composer .btns .meta{flex-basis:100%;margin-left:0}
  .p-support .composer .btn-ink,.p-admin-tickets .composer .btn-ink{flex:1 1 auto;justify-content:center}
  .p-admin-tickets .composer-head .canned{margin-left:0;width:100%}
  .p-admin-tickets .composer-head .canned select.in{max-width:none;flex:1 1 auto}
  .p-notifications .tbl-notif tr.is-unread{box-shadow:inset 3px 0 var(--accent);padding-left:10px}
  .p-notifications .tbl-notif tr.is-unread td:first-child{box-shadow:none}
  .p-notifications .tbl-notif .c-when{width:auto}
}