/* ============================================================
   Client Portal — professional revamp (dark + light).
   Loaded LAST on portal.html only, so it overrides the shared
   admin/portal styles for the CLIENT portal without touching
   the employee admin (admin.html doesn't link this file).
   ============================================================ */
:root{
  --p-bg:#0A0E16; --p-bg2:#0E131D; --p-surf:#141B27; --p-surf2:#1A2331;
  --p-ink:#F1F5F9; --p-soft:#C3CEDD; --p-dim:#8A99AD; --p-mute:#5F6E82;
  --p-line:#1E2A3A; --p-line2:#2A3A4E;
  --p-brand:#A3E635; --p-brand-ink:#0A0E16; --p-brand-soft:rgba(var(--accent-rgb), .12);
  --p-brand-txt:#A3E635; --p-brand-strong:#BEF264;
  --p-nav:rgba(10,14,22,.82); --p-shadow:rgba(0,0,0,.55);
  --p-sans:ui-sans-serif,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="light"], body.light{
  --p-bg:#F8FAFC; --p-bg2:#EDF1F6; --p-surf:#FFFFFF; --p-surf2:#F4F7FB;
  --p-ink:#141922; --p-soft:#3B4553; --p-dim:#5B6674; --p-mute:#8994A2;
  --p-line:#E5E9EF; --p-line2:#D3D9E2;
  --p-brand:#A3E635; --p-brand-ink:#14240A; --p-brand-soft:rgba(101,143,22,.12);
  --p-brand-txt:#4D7C0F; --p-brand-strong:#B4E85A;
  --p-nav:rgba(248,250,252,.85); --p-shadow:rgba(20,30,45,.13);
}

body{ background:var(--p-bg) !important; color:var(--p-ink); font-family:var(--p-sans); transition:background .35s ease,color .35s ease; }

/* ── top nav ── */
.navbar{ background:var(--p-nav); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--p-line); }
.nav-container{ height:66px; }
.nav-logo-text{ display:flex; align-items:center; }
.logo-priority{ color:var(--p-ink); font-weight:750; letter-spacing:-.02em; }
.logo-one{ color:var(--p-brand-txt); font-weight:750; }
.logo-cad{ color:var(--p-mute); }
.nav-links a{ color:var(--p-dim); font-weight:500; } .nav-links a:hover, .nav-links a.active{ color:var(--p-ink); }
.nav-user span{ color:var(--p-soft); }
.btn-sm{ background:transparent; border:1px solid var(--p-line2); color:var(--p-soft); border-radius:9px; padding:8px 14px; font-weight:600; cursor:pointer; transition:border-color .2s,color .2s; }
.btn-sm:hover{ border-color:var(--p-brand); color:var(--p-brand-txt); }

/* ── login screen ── */
.login-screen{ min-height:calc(100vh - 66px); display:grid; place-items:center; padding:40px 20px;
  background:radial-gradient(700px 400px at 50% -10%, var(--p-brand-soft), transparent 65%), var(--p-bg); }
.login-card{ width:100%; max-width:400px; background:var(--p-surf); border:1px solid var(--p-line2); border-radius:20px; padding:38px 34px; box-shadow:0 40px 90px -50px var(--p-shadow); }
.login-logo{ display:flex; align-items:center; justify-content:center; gap:2px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.login-logo .logo-priority{ color:var(--p-ink); } .login-logo .logo-one{ color:var(--p-brand-txt); }
.login-card h2{ text-align:center; font-size:1.35rem; font-weight:780; color:var(--p-ink); margin:18px 0 6px; letter-spacing:-.02em; }
.login-card > p{ text-align:center; color:var(--p-dim); font-size:.9rem; margin:0 0 24px; }
.login-error{ color:#fb7185; font-size:.85rem; min-height:1em; margin:2px 0 8px; }

/* ── forms (login + tickets) ── */
.form-group{ margin-bottom:15px; }
.form-group label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--p-dim); margin-bottom:7px; text-transform:uppercase; }
.form-group input, .form-group select, .form-group textarea, .create-form input, .create-form select, .create-form textarea{
  width:100%; padding:12px 14px; font-size:.95rem; font-family:inherit; color:var(--p-ink);
  background:var(--p-bg2); border:1px solid var(--p-line2); border-radius:10px; outline:none; transition:border-color .2s, box-shadow .2s; }
.form-group input::placeholder, .create-form textarea::placeholder{ color:var(--p-mute); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--p-brand); box-shadow:0 0 0 4px var(--p-brand-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── buttons ── */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--p-brand); color:var(--p-brand-ink); border:0; border-radius:11px; padding:12px 20px; font-size:.92rem; font-weight:700; font-family:inherit; cursor:pointer; text-decoration:none; transition:background .2s, transform .15s, box-shadow .2s; }
.btn-primary:hover{ background:var(--p-brand-strong); transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(var(--accent-rgb), .5); }
.btn-full{ width:100%; margin-top:6px; }
.btn-outline{ display:inline-flex; align-items:center; border:1px solid var(--p-line2); color:var(--p-ink); border-radius:11px; padding:11px 18px; font-weight:700; font-size:.92rem; text-decoration:none; background:transparent; }
.btn-outline:hover{ border-color:var(--p-brand); color:var(--p-brand-txt); }

/* ── dashboard shell ── */
.admin-dashboard{ display:flex; min-height:calc(100vh - 66px); background:var(--p-bg); }
.admin-sidebar{ width:250px; flex:none; padding:26px 16px; border-right:1px solid var(--p-line); background:var(--p-bg2); }
.sidebar-section{ margin-bottom:22px; }
.sidebar-section h4{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--p-mute); font-weight:700; padding:0 10px; margin:0 0 8px; }
.sidebar-btn{ display:block; width:100%; text-align:left; background:transparent; border:0; border-radius:9px; padding:9px 12px; font-size:.9rem; font-weight:540; color:var(--p-dim); font-family:inherit; cursor:pointer; transition:background .18s, color .18s; }
.sidebar-btn:hover{ background:var(--p-surf); color:var(--p-ink); }
.sidebar-btn.active{ background:var(--p-brand-soft); color:var(--p-brand-txt); font-weight:650; }

.admin-main{ flex:1; min-width:0; padding:34px 40px 80px; }
.admin-panel{ display:none; } .admin-panel.active{ display:block; animation:pfade .3s ease; }
@keyframes pfade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.panel-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.admin-panel h2{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--p-ink); }
.panel-sub{ color:var(--p-dim); font-size:.95rem; margin:6px 0 22px; max-width:60ch; }

/* ── generic cards / list rows inside panels (tickets, downloads, etc.) ── */
.admin-main .card, .admin-main .ticket-card, .admin-main .list-item, .admin-main .download-card, .admin-main .changelog-entry{
  background:var(--p-surf); border:1px solid var(--p-line); border-radius:14px; padding:18px 20px; margin-bottom:12px; transition:border-color .2s, transform .15s; }
.admin-main .card:hover, .admin-main .ticket-card:hover, .admin-main .list-item:hover{ border-color:var(--p-line2); }
.admin-main table{ width:100%; border-collapse:collapse; }
.admin-main th{ text-align:left; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--p-mute); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--p-line); }
.admin-main td{ padding:12px; border-bottom:1px solid var(--p-line); color:var(--p-soft); font-size:.92rem; }
.admin-main a{ color:var(--p-brand-txt); }

/* status / priority badges (common naming) */
.badge, .badge-open, .badge-closed, .badge-pending, .badge-normal, .badge-high, .badge-urgent, .badge-low, .status-badge, .priority-badge{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:100px; }
.badge-open, .badge-normal{ color:var(--p-brand-txt); background:var(--p-brand-soft); }
.badge-high, .badge-pending{ color:#fbbf24; background:rgba(251,191,36,.14); }
.badge-urgent{ color:#fb7185; background:rgba(251,113,133,.14); }
.badge-closed, .badge-low{ color:var(--p-mute); background:var(--p-surf2); }

.empty-state, .kb-empty{ text-align:center; padding:56px 20px; color:var(--p-dim); }

@media (max-width:820px){ .admin-dashboard{ flex-direction:column; } .admin-sidebar{ width:auto; border-right:0; border-bottom:1px solid var(--p-line); display:flex; flex-wrap:wrap; gap:6px; } .sidebar-section{ margin:0; } .admin-main{ padding:24px; } .form-row{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   TICKETS v2 — org-wide queue, threaded activity, attachments, CSAT
   Uses the portal's own --p-* tokens throughout so the light/dark
   toggle keeps working; no new colour system.
   ══════════════════════════════════════════════════════════════ */

/* scope toggle: "everyone at the agency" vs "filed by me" */
.tk-scope{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tk-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--p-line); background:var(--p-surf); color:var(--p-soft);
  font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s; }
.tk-chip:hover{ border-color:var(--p-line2); }
.tk-chip.on{ border-color:var(--p-brand); color:var(--p-brand-txt); background:var(--p-brand-soft); }
.tk-chip span{ font-size:.72rem; opacity:.75; font-variant-numeric:tabular-nums; }

.tk-group{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--p-mute);
  font-weight:700; margin:20px 0 10px; }
.tk-group:first-child{ margin-top:0; }

/* A ticket the customer owes us an answer on gets the one accent edge on
   this screen — it is the only row that needs an action from them. */
.admin-main .ticket-card.tk-needs-you{ border-left:3px solid var(--p-brand); }
.tk-flag{ margin-top:10px; font-size:.78rem; font-weight:700; color:var(--p-brand-txt); }
.tk-rated{ margin-top:8px; font-size:.78rem; color:var(--p-mute); }

.tk-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:8px; }
.tk-colleague{ margin:10px 0; padding:9px 12px; border-radius:8px; font-size:.85rem;
  background:var(--p-brand-soft); color:var(--p-brand-txt); }
.tk-linked{ margin-top:14px; padding:10px 12px; border-radius:8px; font-size:.85rem;
  background:var(--p-surf2); color:var(--p-soft); border:1px solid var(--p-line); }
.tk-resolution{ margin-top:14px; padding:12px 14px; border-radius:8px;
  background:var(--p-surf2); border:1px solid var(--p-line); }
.tk-resolution strong{ display:block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-mute); margin-bottom:6px; }
.tk-resolution p{ margin:0; color:var(--p-soft); font-size:.92rem; line-height:1.6; }

/* Activity events sit between replies as quiet rules, so the thread reads
   chronologically without a status change shouting like a message. */
.tk-event{ display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:.82rem; color:var(--p-mute); }
.tk-event-dot{ width:6px; height:6px; border-radius:50%; background:var(--p-line2); flex:none; }
.tk-event-time{ margin-left:auto; font-size:.75rem; opacity:.7; }

/* Attachments */
.tk-attach-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tk-attach-row:empty{ display:none; }
.tk-thumb{ display:block; width:92px; height:92px; border-radius:8px; overflow:hidden;
  border:1px solid var(--p-line); }
.tk-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tk-file-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--p-line); background:var(--p-surf2); font-size:.82rem; text-decoration:none; }
.tk-file-chip span{ color:var(--p-mute); font-size:.74rem; }
.tk-attach-btn{ display:inline-block; padding:8px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--p-line); background:var(--p-surf2); color:var(--p-soft);
  font-size:.85rem; font-weight:600; }
.tk-attach-btn:hover{ border-color:var(--p-line2); }
.tk-file-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:.82rem; color:var(--p-mute); }
.tk-file{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px;
  background:var(--p-surf2); border:1px solid var(--p-line); }
.tk-file button{ background:none; border:0; color:var(--p-mute); cursor:pointer; font-size:1rem; line-height:1; padding:0; }
.tk-hint{ font-weight:400; font-size:.76rem; color:var(--p-mute); text-transform:none; letter-spacing:0; }

/* KB deflection under the subject field — a suggestion, never a gate. */
#kbSuggest:empty{ display:none; }
.tk-suggest{ margin-top:10px; padding:12px 14px; border-radius:10px;
  background:var(--p-surf2); border:1px solid var(--p-line); }
.tk-suggest-h{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-mute); font-weight:700; margin-bottom:8px; }
.tk-suggest a{ display:block; padding:5px 0; font-size:.9rem; text-decoration:none; }
.tk-suggest a:hover{ text-decoration:underline; }

.tk-reply-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.tk-reply-actions .btn-primary{ margin-left:auto; }
.tk-reopen-note{ font-size:.85rem; color:var(--p-mute); margin:0 0 10px; }

/* Satisfaction — asked once, in place, at the moment it closes. */
.tk-csat{ margin:22px 0; padding:18px 20px; border-radius:14px;
  background:var(--p-surf); border:1px solid var(--p-line); }
.tk-csat-q{ font-weight:700; margin-bottom:10px; }
.tk-csat-stars{ display:flex; gap:4px; margin-bottom:12px; }
.tk-csat-stars button{ background:none; border:0; cursor:pointer; font-size:1.7rem; line-height:1;
  color:var(--p-line2); padding:0 2px; transition:color .12s; }
.tk-csat-stars button:hover, .tk-csat-stars button.on{ color:var(--p-brand); }
.tk-csat textarea{ width:100%; margin-bottom:10px; }
.tk-rated-box{ margin:22px 0; padding:14px 18px; border-radius:12px; font-size:.9rem;
  background:var(--p-brand-soft); color:var(--p-brand-txt); }

.badge-in-progress{ color:#38bdf8; background:rgba(56,189,248,.14); }
.badge-waiting{ color:#fbbf24; background:rgba(251,191,36,.14); }
.badge-resolved{ color:var(--p-brand-txt); background:var(--p-brand-soft); }