/* ============================================================
   Help Desk — Modern Theme
   A contemporary reinterpretation of the HESK navy/blue brand.
   Drop-in stylesheet: shared tokens + components for all pages.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ---------- Fonts ----------
   Be Vietnam Pro — modern geometric sans with full Vietnamese
   diacritic + Unicode coverage. To self-host in HESK, drop the
   woff2 files in /assets/fonts and swap the @import for @font-face. */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — kept faithful to HESK */
  --navy-900: #0d2c44;
  --navy-800: #133e5e;   /* primary */
  --navy-700: #1b5079;
  --blue-600: #2b6d9e;   /* secondary */
  --blue-500: #1673e5;   /* tertiary / bright */
  --blue-400: #3f8ae6;
  --sky-300:  #8fc0ec;
  --sky-200:  #c7e2f7;
  --sky-100:  #e4f0fb;
  --sky-50:   #f2f8fd;
  --accent:   #00a6ec;   /* info cyan, used sparingly */

  /* Status */
  --success:  #1f9d6b;
  --success-bg: #e9f8f1;
  --danger:   #e0463f;
  --danger-bg: #fdecea;
  --warning:  #e6a209;
  --warning-bg: #fdf4dd;

  /* Cool neutrals */
  --ink-900: #0e2433;
  --ink-800: #1c3a4f;
  --ink-700: #2c4a60;
  --ink-600: #46627a;
  --ink-500: #5f7a8e;
  --ink-400: #859aa9;
  --ink-300: #a9bccb;
  --line:      #d8e3ec;
  --line-soft: #e8f0f6;
  --surface:   #ffffff;
  --surface-2: #f6fafd;
  --bg:        #eaf1f6;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(19,62,94,.06);
  --sh-sm: 0 2px 8px rgba(19,62,94,.07);
  --sh-md: 0 8px 24px -8px rgba(19,62,94,.18), 0 2px 6px rgba(19,62,94,.05);
  --sh-lg: 0 24px 60px -20px rgba(13,44,68,.30), 0 8px 20px -12px rgba(19,62,94,.16);
  --ring:  0 0 0 4px rgba(22,115,229,.16);
  --ring-danger: 0 0 0 4px rgba(224,70,63,.15);

  --font-sans: "Be Vietnam Pro", -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-800, #1c3a4f);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(22,115,229,.08), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(0,166,236,.07), transparent 55%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { color: var(--navy-800); margin: 0; line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--blue-600); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--navy-800); }
p { margin: 0 0 1em; }
img, svg { display: block; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- App shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--sh-sm);
}
.site-header__inner {
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--blue-500), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -4px rgba(0,166,236,.6);
  color: #fff;
}
.brand__mark .icon { width: 20px; height: 20px; }
.brand__name { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand__sub { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-300); margin-top: -2px; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  color: rgba(255,255,255,.86); font-weight: 700; font-size: 14.5px;
  padding: 8px 15px; border-radius: var(--r-pill); transition: all .15s var(--ease);
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.10); }
.site-nav a.is-primary { background: rgba(255,255,255,.14); }
.site-nav a.is-primary:hover { background: rgba(255,255,255,.24); }

/* Breadcrumbs */
.crumbs { max-width: 1180px; margin: 0 auto; padding: 16px 28px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13.5px; color: var(--ink-500); }
.crumbs a, .crumbs .current, .crumbs .sep { white-space: nowrap; }
.crumbs a { color: var(--blue-600); font-weight: 700; }
.crumbs .sep { color: var(--ink-300); }
.crumbs .current { color: var(--ink-600); font-weight: 700; }

/* Main */
.main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 26px 28px 64px; }
.main--narrow { max-width: 820px; }

/* Footer */
.site-footer { padding: 26px; text-align: center; color: var(--ink-500); font-size: 13.5px; border-top: 1px solid var(--line-soft); background: rgba(255,255,255,.5); }
.site-footer b { color: var(--navy-800); }
.site-footer a { font-weight: 700; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.card__pad { padding: 32px 34px; }

/* Page intro header (icon + title) */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.page-head__icon {
  width: 52px; height: 52px; border-radius: 15px; flex: none; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg, var(--navy-700), var(--blue-500));
  box-shadow: 0 10px 22px -10px rgba(22,115,229,.7);
}
.page-head__icon .icon { width: 24px; height: 24px; }
.page-head h1 { font-size: 27px; }
.page-head .sub { color: var(--ink-500); font-size: 14.5px; margin-top: 3px; }
.req-note { color: var(--ink-500); font-size: 13.5px; margin: 14px 0 4px; display: flex; align-items: center; gap: 6px; }
.req-star { color: var(--danger); font-weight: 700; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; }
.field { position: relative; }
.field > label.lbl {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-700);
  margin-bottom: 7px; letter-spacing: .005em;
}
.field .req-star { margin-left: 2px; }

.control {
  width: 100%; height: 52px; padding: 0 16px;
  font: inherit; font-size: 15.5px; color: var(--ink-900);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  outline: none; appearance: none;
}
textarea.control { height: auto; min-height: 150px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.control::placeholder { color: var(--ink-400); }
.control:hover { border-color: var(--sky-300); }
.control:focus { border-color: var(--blue-500); background: #fff; box-shadow: var(--ring); }
.control.is-error { border-color: var(--danger); background: var(--danger-bg); }
.control.is-error:focus { box-shadow: var(--ring-danger); }
.control.is-valid { border-color: var(--success); }

/* Floating-label variant */
.float { position: relative; }
.float .control { padding-top: 20px; padding-bottom: 4px; }
.float textarea.control { padding-top: 26px; }
.float label.lbl {
  position: absolute; left: 16px; top: 16px; margin: 0;
  font-size: 15.5px; font-weight: 400; color: var(--ink-400);
  pointer-events: none; transform-origin: left top;
  transition: transform .15s var(--ease), color .15s var(--ease);
}
.float .control:focus + label.lbl,
.float .control:not(:placeholder-shown) + label.lbl,
.float .control.has-value + label.lbl {
  transform: translateY(-11px) scale(.74); font-weight: 700; color: var(--blue-600); letter-spacing: .02em;
}
.float .control.is-error:focus + label.lbl,
.float .control.is-error:not(:placeholder-shown) + label.lbl { color: var(--danger); }

/* Hints / validation messages */
.hint { font-size: 12.5px; color: var(--ink-500); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hint .icon { width: 14px; height: 14px; }
.hint--error { color: var(--danger); font-weight: 700; }
.hint--ok { color: var(--success); font-weight: 700; }
.hint-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.counter { font-size: 12px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* Custom select */
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500);
  transform: translateY(-65%) rotate(45deg); pointer-events: none; transition: transform .15s var(--ease);
}
select.control { cursor: pointer; padding-right: 42px; }

/* Priority segmented control */
.priority-set { display: flex; flex-wrap: wrap; gap: 10px; }
.priority-opt { position: relative; }
.priority-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.priority-opt label {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 17px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface-2);
  font-weight: 700; font-size: 14px; color: var(--ink-600);
  transition: all .15s var(--ease);
}
.priority-opt label .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.priority-opt:hover label { border-color: var(--sky-300); }
.priority-opt input:checked + label { background: #fff; color: var(--navy-800); box-shadow: var(--sh-sm); }
.priority-opt input:focus-visible + label { box-shadow: var(--ring); }
.priority-opt[data-level="low"] input:checked + label { border-color: var(--sky-300); }
.priority-opt[data-level="medium"] input:checked + label { border-color: var(--success); }
.priority-opt[data-level="high"] input:checked + label { border-color: var(--warning); }
.priority-opt[data-level="critical"] input:checked + label { border-color: var(--danger); }
.dot--low { background: var(--blue-400); }
.dot--medium { background: var(--success); }
.dot--high { background: var(--warning); }
.dot--critical { background: var(--danger); }

/* Priority pill (read-only display) */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; }
.pill--low { background: var(--sky-100); color: var(--blue-600); }
.pill--medium { background: var(--success-bg); color: var(--success); }
.pill--high { background: var(--warning-bg); color: #9a6a00; }
.pill--critical { background: var(--danger-bg); color: var(--danger); }
.pill--new { background: var(--sky-100); color: var(--blue-600); }
.pill--open { background: var(--warning-bg); color: #9a6a00; }
.pill--resolved { background: var(--success-bg); color: var(--success); }

/* Divider */
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 4px 0; }

/* ---------- Dropzone ---------- */
.drop-zone {
  border: 2px dashed var(--sky-300); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--sky-50), var(--surface-2));
  text-align: center; color: var(--ink-600);
  transition: all .15s var(--ease); cursor: pointer; overflow: hidden;
}
.drop-zone:hover, .drop-zone.dz-drag-hover { border-color: var(--blue-500); background: var(--sky-100); }
.drop-zone__msg { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.drop-zone__msg .btn { pointer-events: all; }
.drop-zone__icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-sm); margin-bottom: 4px; }
.drop-zone__hint { font-size: 13.5px; color: var(--ink-500); max-width: 360px; line-height: 1.5; margin: 0; }
.drop-zone.dz-started .dz-message { display: none; }
.file-row { padding: 10px 16px; border-top: 1px solid var(--line-soft); text-align: left; }
.attachment-row { display: flex; align-items: center; gap: 10px; }
.name-size-delete { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.name-size { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.name-size .name p { font-size: 13.5px; font-weight: 600; color: var(--ink-700); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.name-size .size { font-size: 12px; color: var(--ink-400); white-space: nowrap; }
.delete-button .icon-delete { width: 18px; height: 18px; color: var(--danger); cursor: pointer; }
.upload-progress { height: 3px; background: var(--line-soft); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.upload-progress > div { height: 3px; background: var(--blue-500); border-radius: 2px; transition: width .2s; }
.file-row .error { font-size: 12px; color: var(--danger); margin-top: 4px; }
.dz-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12.5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--navy-700));
  box-shadow: 0 12px 24px -12px rgba(22,115,229,.65), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover { color:#fff; box-shadow: 0 16px 30px -12px rgba(22,115,229,.8), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.04); }
.btn--ghost { background: var(--surface); color: var(--blue-600); border-color: var(--line); box-shadow: var(--sh-xs); }
.btn--ghost:hover { color: var(--navy-800); border-color: var(--sky-300); background: var(--sky-50); }
.btn--block { width: 100%; }
.btn--lg { height: 56px; font-size: 16.5px; padding: 0 32px; }
.btn--sm { height: 40px; font-size: 14px; padding: 0 16px; }
.btn--subtle { background: var(--sky-100); color: var(--blue-600); }
.btn--subtle:hover { background: var(--sky-200); color: var(--navy-800); }

/* ---------- Steps / progress ---------- */
.steps { display: flex; align-items: center; gap: 0; margin: 6px 0 4px; }
.step { display: flex; align-items: center; gap: 12px; flex: 1; }
.step__num {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: var(--ink-400);
  background: var(--surface-2); border: 2px solid var(--line); transition: all .2s var(--ease);
}
.step__label { font-weight: 700; font-size: 14px; color: var(--ink-400); }
.step__line { height: 3px; flex: 1; border-radius: 3px; background: var(--line); margin: 0 8px; transition: background .25s var(--ease); }
.step.is-active .step__num { color: #fff; background: linear-gradient(150deg, var(--blue-500), var(--navy-700)); border-color: transparent; box-shadow: var(--ring); }
.step.is-active .step__label { color: var(--navy-800); }
.step.is-done .step__num { color: #fff; background: var(--success); border-color: transparent; }
.step.is-done .step__label { color: var(--ink-700); }
.step.is-done + .step__line, .step.is-done .step__line { background: var(--success); }

.progress-rail { height: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.progress-rail > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--blue-500)); transition: width .4s var(--ease); }

/* ---------- Glass side panel ---------- */
.guide-panel {
  border-radius: var(--r-lg); padding: 28px 26px; color: #eaf4ff;
  background: linear-gradient(160deg, rgba(19,62,94,.96), rgba(13,44,68,.97));
  position: relative; overflow: hidden; box-shadow: var(--sh-md);
}
.guide-panel::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(0,166,236,.35), transparent 70%); }
.guide-panel h3 { color: #fff; font-size: 18px; }
.guide-panel .lead { color: var(--sky-200); font-size: 14px; margin-top: 6px; }
.guide-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 16px; }
.guide-list li { display: flex; gap: 13px; }
.guide-list .gi { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.15); color: #d8efff; }
.guide-list .gi .icon { width: 17px; height: 17px; }
.guide-list b { color: #fff; display: block; font-size: 14.5px; }
.guide-list span { color: rgba(255,255,255,.72); font-size: 13px; }
.guide-stat { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; gap: 22px; }
.guide-stat .k { font-size: 22px; font-weight: 700; color: #fff; }
.guide-stat .l { font-size: 12px; color: var(--sky-300); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Alert ---------- */
.alert { border-radius: var(--r-md); padding: 16px 18px; display: flex; gap: 13px; font-size: 14px; }
.alert .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert--info { background: var(--sky-50); border: 1px solid var(--sky-200); color: var(--ink-700); }
.alert--info .icon { color: var(--blue-500); }
.alert b { color: var(--navy-800); }

/* ---------- Detail sidebar (ticket) ---------- */
.detail-list { display: grid; gap: 0; }
.detail-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.detail-row:last-child { border-bottom: 0; }
.detail-row .k { color: var(--ink-500); font-size: 13.5px; font-weight: 700; }
.detail-row .v { color: var(--ink-900); font-size: 14px; font-weight: 700; text-align: right; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .04em; }

/* ---------- Ticket thread ---------- */
.msg { display: flex; gap: 14px; }
.msg__avatar { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; background: linear-gradient(150deg, var(--blue-600), var(--navy-700)); }
.msg__avatar.is-agent { background: linear-gradient(150deg, var(--accent), var(--blue-500)); }
.msg__body { flex: 1; }
.msg__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.msg__name { font-weight: 700; color: var(--navy-800); font-size: 15px; }
.msg__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sky-100); color: var(--blue-600); }
.msg__tag.is-agent { background: var(--success-bg); color: var(--success); }
.msg__time { color: var(--ink-400); font-size: 13px; margin-left: auto; }
.msg__bubble { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px var(--r-md) var(--r-md) var(--r-md); padding: 16px 18px; color: var(--ink-700); font-size: 14.5px; }
.msg.is-agent .msg__bubble { background: var(--sky-50); border-color: var(--sky-200); }
.msg__attach { margin-top: 12px; display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--blue-600); background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-xs); }
.thread-line { width: 2px; background: var(--line-soft); margin: 4px 0 4px 21px; flex: none; }

/* ---------- Hub cards ---------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hub-card {
  display: flex; align-items: flex-start; gap: 18px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
}
.hub-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(var(--blue-500), var(--accent)); opacity:0; transition: opacity .18s var(--ease); }
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--sky-200); }
.hub-card:hover::before { opacity: 1; }
.hub-card__icon { width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--navy-700), var(--blue-500)); box-shadow: 0 12px 24px -12px rgba(22,115,229,.7); }
.hub-card__icon .icon { width: 27px; height: 27px; }
.hub-card > div { flex: 1; min-width: 0; }
.hub-card h3 { font-size: 19px; color: var(--navy-800); }
.hub-card p { margin: 6px 0 0; color: var(--ink-500); font-size: 14px; }
.hub-card .go { flex: none; margin-left: auto; color: var(--ink-300); align-self: center; transition: transform .18s var(--ease), color .18s var(--ease); }
.hub-card:hover .go { color: var(--blue-500); transform: translateX(3px); }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: var(--gap, 18px); }
.muted { color: var(--ink-500); }
.center { text-align: center; }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb0{margin-bottom:0}

/* ---------- User menu ---------- */
.user-btn { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:none; border-radius:var(--r-pill); color:#fff; padding:7px 14px 7px 8px; cursor:pointer; font:inherit; font-weight:700; font-size:14px; transition:background .15s; }
.user-btn:hover { background:rgba(255,255,255,.22); }
.user-avatar-sm { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--blue-500)); display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; flex:none; }
.user-menu { position:relative; }
.user-dropdown { position:absolute; right:0; top:calc(100% + 10px); min-width:210px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:6px; z-index:100; opacity:0; transform:translateY(-8px); pointer-events:none; transition:all .18s var(--ease); }
.user-menu.is-open .user-dropdown { opacity:1; transform:translateY(0); pointer-events:auto; }
.user-dropdown a, .user-dropdown button { display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--ink-700); font-weight:600; font-size:14px; border-radius:var(--r-sm); transition:background .12s; text-decoration:none; width:100%; background:transparent; border:none; cursor:pointer; font-family:inherit; }
.user-dropdown a:hover, .user-dropdown button:hover { background:var(--surface-2); color:var(--navy-800); }
.user-dropdown .drop-sep { height:1px; background:var(--line-soft); margin:4px 0; }
.user-dropdown .drop-danger { color:var(--danger); }
.user-dropdown .drop-danger:hover { background:var(--danger-bg); color:var(--danger); }

/* ---------- Auth layout ---------- */
.auth-wrap { min-height:calc(100vh - 68px - 60px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card { width:100%; max-width:500px; }
.auth-head { text-align:center; margin-bottom:28px; }
.auth-icon { width:58px; height:58px; border-radius:17px; background:linear-gradient(150deg,var(--navy-700),var(--blue-500)); display:grid; place-items:center; color:#fff; margin:0 auto 16px; box-shadow:0 10px 24px -10px rgba(22,115,229,.65); }
.auth-icon .icon { width:26px; height:26px; }
.auth-head h1 { font-size:28px; margin-bottom:6px; }
.auth-head p { color:var(--ink-500); font-size:15px; }

/* ---------- Radio set (remember login) ---------- */
.radio-set { display:flex; flex-direction:column; gap:10px; }
.radio-opt { position:relative; }
.radio-opt input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-opt label { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface-2); font-weight:600; font-size:14px; color:var(--ink-600); cursor:pointer; transition:all .15s; }
.radio-dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; display:grid; place-items:center; transition:all .15s; }
.radio-dot::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--blue-500); opacity:0; transition:opacity .15s; }
.radio-opt input:checked + label { border-color:var(--blue-500); background:#fff; color:var(--navy-800); box-shadow:var(--sh-xs); }
.radio-opt input:checked + label .radio-dot { border-color:var(--blue-500); }
.radio-opt input:checked + label .radio-dot::after { opacity:1; }
.radio-opt:hover label { border-color:var(--sky-300); }

/* ---------- Or-divider ---------- */
.or-divider { display:flex; align-items:center; gap:12px; margin:6px 0; color:var(--ink-400); font-size:13px; }
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:var(--line-soft); }

/* ---------- Modal overlay ---------- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(13,44,68,.45); z-index:200; place-items:center; }
.modal-overlay.is-open { display:grid; }
.modal-box { background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:36px 38px; width:100%; max-width:440px; margin:20px; position:relative; }
.modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:var(--r-sm); background:var(--surface-2); border:none; cursor:pointer; display:grid; place-items:center; color:var(--ink-500); transition:background .15s; }
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }

/* ---------- Password strength + toggle ---------- */
.pwd-strength { margin-top:10px; }
.pwd-strength__track { height:5px; background:var(--line-soft); border-radius:5px; overflow:hidden; }
.pwd-strength__fill { height:100%; border-radius:5px; width:0; transition:width .35s var(--ease), background .35s; }
.pwd-strength__meta { display:flex; justify-content:space-between; align-items:center; margin-top:5px; }
.pwd-strength__label { font-size:12px; font-weight:700; color:var(--ink-400); }
.pwd-strength__tips { font-size:11.5px; color:var(--ink-400); }
.pwd-wrap { position:relative; }
.pwd-wrap .control { padding-right:50px; }
.pwd-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--ink-400); padding:4px; line-height:0; transition:color .15s; }
.pwd-toggle:hover { color:var(--blue-600); }

/* ---------- Checkbox ---------- */
.check-opt { display:flex; align-items:flex-start; gap:12px; }
.check-opt input[type=checkbox] { width:18px; height:18px; border-radius:5px; accent-color:var(--blue-500); cursor:pointer; flex:none; margin-top:2px; }
.check-opt label { font-size:14px; color:var(--ink-600); cursor:pointer; line-height:1.5; }
.check-opt label a { font-weight:700; }

/* ---------- Hero + KB search ---------- */
.hero { text-align:center; padding:52px 20px 44px; }
.hero h1 { font-size:36px; letter-spacing:-.02em; }
.hero p { color:var(--ink-500); font-size:16.5px; margin-top:10px; margin-bottom:0; }
.search-wrap { position:relative; max-width:640px; margin:28px auto 0; }
.search-wrap input { width:100%; height:58px; padding:0 64px 0 22px; font:inherit; font-size:16px; color:var(--ink-900); background:#fff; border:1.5px solid var(--line-soft); border-radius:var(--r-xl); box-shadow:var(--sh-md); outline:none; transition:border-color .15s, box-shadow .15s; }
.search-wrap input::placeholder { color:var(--ink-400); }
.search-wrap input:focus { border-color:var(--blue-500); box-shadow:var(--ring), var(--sh-md); }
.search-wrap button { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--blue-600),var(--navy-700)); border:none; cursor:pointer; color:#fff; display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(22,115,229,.7); transition:filter .15s; }
.search-wrap button:hover { filter:brightness(1.1); }
.search-wrap button .icon { width:18px; height:18px; }

/* ---------- Hub grid 3-col / 2-col ---------- */
.hub-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hub-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:780px; margin:0 auto; }

/* ---------- KB section ---------- */
.kb-section { margin-top:36px; }
.kb-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:0; }
.kb-title { display:flex; align-items:center; gap:12px; }
.kb-title-icon { width:40px; height:40px; border-radius:12px; background:linear-gradient(150deg,var(--navy-700),var(--blue-500)); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px -8px rgba(22,115,229,.6); }
.kb-title-icon .icon { width:19px; height:19px; }
.kb-title h2 { font-size:21px; }
.kb-tabs { display:flex; gap:0; border-bottom:2px solid var(--line-soft); margin:16px 0 0; }
.kb-tab { padding:11px 22px; font:inherit; font-weight:700; font-size:14px; color:var(--ink-500); background:transparent; border:none; border-bottom:2.5px solid transparent; margin-bottom:-2px; cursor:pointer; transition:color .15s, border-color .15s; }
.kb-tab.is-active { color:var(--navy-800); border-bottom-color:var(--blue-500); }
.kb-tab:hover:not(.is-active) { color:var(--ink-700); }
.kb-panel { display:none; }
.kb-panel.is-visible { display:block; }

/* ---------- Article list ---------- */
.article-list { display:flex; flex-direction:column; gap:0; }
.article-item { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--line-soft); text-decoration:none; transition:background .12s; cursor:pointer; }
.article-item:last-child { border-bottom:0; }
.article-item:hover .article-title { color:var(--blue-500); }
.article-item-icon { width:38px; height:38px; border-radius:11px; background:var(--sky-100); display:grid; place-items:center; color:var(--blue-600); flex:none; margin-top:1px; }
.article-item-icon .icon { width:17px; height:17px; }
.article-title { font-weight:700; font-size:15px; color:var(--navy-800); margin-bottom:4px; transition:color .15s; }
.article-meta { font-size:13px; color:var(--ink-500); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.article-meta .cat { color:var(--blue-600); font-weight:600; }
.article-preview { color:var(--ink-600); font-size:13.5px; margin-top:5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-rating { display:flex; align-items:center; gap:4px; color:var(--warning); font-size:13px; font-weight:700; }
.article-views { display:flex; align-items:center; gap:4px; }

/* ---------- Service message ---------- */
.service-msg { border-radius:var(--r-md); padding:14px 18px; display:flex; gap:12px; align-items:flex-start; background:var(--warning-bg); border:1px solid rgba(230,162,9,.3); margin-bottom:24px; }
.service-msg .icon { width:18px; height:18px; color:var(--warning); flex:none; margin-top:2px; }
.service-msg b { color:var(--ink-800); }
.service-msg p { margin:0; font-size:14px; color:var(--ink-700); }

/* ---------- Page bar (my-tickets) ---------- */
.page-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-bar h1 { font-size:28px; }

/* ---------- Search + filter bar ---------- */
.search-filter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.search-field { flex:1; min-width:220px; position:relative; }
.search-field .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-400); pointer-events:none; }
.search-field select { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink-400); cursor:pointer; outline:none; padding:4px 2px; }
.search-field input { width:100%; height:44px; padding:0 100px 0 42px; font:inherit; font-size:14.5px; color:var(--ink-900); background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm); outline:none; transition:border-color .15s, box-shadow .15s; }
.search-field input:focus { border-color:var(--blue-500); box-shadow:var(--ring); background:#fff; }
.filter-tabs { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:4px; }
.filter-tab { padding:8px 16px; border-radius:var(--r-sm); font:inherit; font-weight:700; font-size:13.5px; color:var(--ink-500); border:none; background:transparent; cursor:pointer; display:flex; align-items:center; gap:7px; transition:all .15s; white-space:nowrap; }
.filter-tab.is-active { background:#fff; color:var(--navy-800); box-shadow:var(--sh-xs); }
.filter-tab .badge { font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); background:var(--sky-100); color:var(--blue-600); }
.filter-tab.is-active .badge { background:var(--blue-500); color:#fff; }

/* ---------- Tickets table ---------- */
.tickets-table { width:100%; border-collapse:collapse; }
.tickets-table thead th { padding:12px 16px; text-align:left; font-size:13px; font-weight:700; color:var(--ink-500); border-bottom:2px solid var(--line-soft); white-space:nowrap; }
.tickets-table thead th.sortable { cursor:pointer; user-select:none; transition:color .12s; }
.tickets-table thead th.sortable:hover { color:var(--navy-800); }
.tickets-table tbody td { padding:14px 16px; font-size:14px; color:var(--ink-700); border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tickets-table tbody tr:last-child td { border-bottom:0; }
.tickets-table tbody tr:hover td { background:var(--sky-50); }
.track-mono { font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:12.5px; color:var(--ink-500); letter-spacing:.04em; }
.ticket-link { font-weight:700; color:var(--navy-800); text-decoration:none; }
.ticket-link:hover { color:var(--blue-500); }
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--blue-500); display:inline-block; margin-right:6px; flex:none; }
.tickets-table tbody tr.is-new td { background:linear-gradient(90deg,var(--sky-50) 0%,transparent 100%); }

/* ---------- Pager ---------- */
.pager { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1px solid var(--line-soft); flex-wrap:wrap; gap:12px; }
.pager__info { font-size:13.5px; color:var(--ink-500); }
.pager__pages { display:flex; gap:4px; }
.pg { width:36px; height:36px; border-radius:var(--r-sm); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--ink-600); border:1.5px solid transparent; cursor:pointer; background:transparent; transition:all .12s; font-family:inherit; text-decoration:none; }
.pg:hover { background:var(--surface-2); border-color:var(--line); color:var(--ink-900); }
.pg.is-active { background:var(--blue-500); color:#fff; border-color:transparent; }
.pg.is-disabled { color:var(--ink-300); cursor:default; pointer-events:none; }

/* ---------- Empty state ---------- */
.empty-state { padding:60px 20px; text-align:center; }
.empty-state__icon { width:64px; height:64px; border-radius:20px; background:var(--sky-100); display:grid; place-items:center; margin:0 auto 18px; color:var(--blue-400); }
.empty-state h3 { font-size:20px; color:var(--navy-800); margin-bottom:8px; }
.empty-state p { color:var(--ink-500); font-size:15px; margin-bottom:24px; }

/* ---------- Ticket detail layout ---------- */
.ticket-layout { display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; }
.ticket-aside { position:sticky; top:92px; }

/* ---------- Alert variants ---------- */
.alert--success { background:var(--success-bg); border:1px solid rgba(31,157,107,.3); color:var(--ink-700); }
.alert--success .icon { color:var(--success); }
.alert--error { background:var(--danger-bg); border:1px solid rgba(224,70,63,.3); color:var(--ink-700); }
.alert--error .icon { color:var(--danger); }
.alert--warning { background:var(--warning-bg); border:1px solid rgba(230,162,9,.3); color:var(--ink-700); }
.alert--warning .icon { color:var(--warning); }

/* ---------- KB folder grid ---------- */
.kb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.kb-folder { background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); text-decoration:none; display:block; }
.kb-folder:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.kb-folder__icon { width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg,var(--navy-700),var(--blue-500)); display:grid; place-items:center; color:#fff; margin-bottom:16px; }
.kb-folder__icon .icon { width:20px; height:20px; }
.kb-folder h3 { font-size:17px; color:var(--navy-800); margin-bottom:4px; }
.kb-folder__count { font-size:13px; color:var(--ink-500); margin-bottom:16px; }
.kb-folder__articles { list-style:none; padding:0; margin:0; border-top:1px solid var(--line-soft); padding-top:14px; display:grid; gap:8px; }
.kb-folder__articles li { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--blue-600); font-weight:600; }
.kb-folder__articles li::before { content:"›"; color:var(--ink-400); font-size:16px; }

/* ---------- HESK Dropzone compatibility ---------- */
/* fileinput-button is a class added by HESK's dropzone. Since our button now
   lives inside the drop-zone container as a .btn--ghost, just neutralise the
   legacy widths so the ghost style wins. */
.fileinput-button { display: inline-flex !important; width: auto !important; }
.btn-full { width: 100%; }

/* ---------- Profile grid ---------- */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ---------- Nav mobile-only dropdown item ---------- */
.user-dropdown a.nav-mobile-only { display: none; }

/* ---------- Category-select centered header ---------- */
.page-category-select .page-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.page-category-select .page-head__icon { width: 64px; height: 64px; border-radius: 18px; }
.page-category-select .page-head__icon .icon { width: 30px; height: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .site-header__inner, .crumbs, .main { padding-left: 18px; padding-right: 18px; }
  .hub-grid, .hub-grid-2, .hub-grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr !important; }
  .card__pad { padding: 24px 20px; }
  .brand__sub { display: none; }
  .ticket-layout { grid-template-columns: 1fr; }
  .ticket-aside { position: static; }
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Hide non-primary nav links (long text) on narrow screens */
  .site-nav > a:not(.is-primary) { display: none; }
  /* Show the submit-ticket dropdown item on mobile */
  .user-dropdown a.nav-mobile-only { display: flex; }
  /* Reduce msg avatar for tighter mobile layout */
  .msg__avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
  .msg { gap: 10px; }
  /* Stack msg__time below name on very narrow screens */
  .msg__time { margin-left: 0; }
}
@media (max-width: 540px) {
  .filter-tabs { flex-wrap: wrap; }
  .auth-card { max-width: 100%; }
  /* Tighter card padding on small phones */
  .card__pad { padding: 18px 16px; }
  /* Main content breathing room */
  .site-header__inner, .crumbs, .main { padding-left: 14px; padding-right: 14px; }
  /* Reduce hub-card padding so text doesn't overflow on narrow phones */
  .hub-card { padding: 18px; gap: 12px; }
  .hub-card__icon { width: 46px; height: 46px; }
  .hub-card h3 { font-size: 16px; }
}

/* Responsive 2-column grid (collapses to 1 on mobile) */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Article sidebar narrower than ticket sidebar (desktop only) */
@media (min-width: 861px) {
  .ticket-layout--article { grid-template-columns: 1fr 280px; }
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
  .grid-2col { grid-template-columns: 1fr; }
  /* Wizard nav: back button on row 1, actions (next/submit) wrap to full-width row 2 */
  .wiz-nav { flex-wrap: wrap; gap: 10px; }
  .wiz-nav__actions { flex: 0 0 100%; min-width: 0; }
  .wiz-nav__actions #wiz-next,
  #recaptcha-submit { width: 100%; justify-content: center; }
  .g-recaptcha { max-width: 100%; overflow: hidden; }
  /* KB header: stack title and button vertically, centered */
  .kb-header { flex-direction: column; align-items: center; text-align: center; }
  .kb-title { justify-content: center; }
}

/* Hide HESK license footer */
footer.footer { display: none !important; }

/* TinyMCE editor border matches theme */
.tox-tinymce { border: 1.5px solid var(--line) !important; border-radius: var(--r-sm) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__primary { background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important; }

/* Prevent inline images from overflowing their column (articles, ticket messages) */
.browser-default img { max-width: 100%; height: auto; }
.tox .tox-edit-area__iframe { background: #fff; }