@import "./mktec-theme-0.1.0.css";

/* HelpDesk aliases keep tenant branding independent of the MTI platform theme. */
:root {
  --bg: var(--mti-canvas);
  --bg-accent: var(--mti-selection);
  --ink: var(--mti-ink);
  --muted: var(--mti-muted);
  --subtle: var(--mti-border-strong);
  --line: var(--mti-border);
  --line-strong: var(--mti-border-strong);
  --panel: var(--mti-surface);
  --brand: var(--mti-action);
  --brand-hover: var(--mti-action-hover);
  --brand-bright: var(--mti-action);
  --brand-muted: var(--mti-selection);
  --brand-subtle: var(--mti-canvas);
  --brand-ink: var(--mti-on-action);
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-line: #fecaca;
  --warn: #b45309;
  --radius: 8px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --font-display: var(--font-dm-sans), var(--mti-font);
  --font-body: var(--font-dm-sans), var(--mti-font);
  --shadow: var(--mti-shadow);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Customer portal: --brand / --tenant-glow set per tenant via PortalTheme */
.portal-theme {
  min-height: 100%;
  background:
    radial-gradient(1100px 520px at 15% -10%, var(--tenant-glow, #ede9fe) 0%, transparent 60%),
    var(--bg);
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.15rem;
  line-height: 1.3;
}

h3 {
  font-size: 1rem;
}

.muted {
  color: var(--muted);
}

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  min-width: 0;
  padding: 1.5rem 1.1rem;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 1.4rem;
  color: var(--ink);
}

.nav a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-btn);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.nav a:hover {
  background: var(--bg-accent);
  color: var(--ink);
  text-decoration: none;
}

/* A gold marker supplements the active fill without relying on color alone. */
.nav a.active {
  box-shadow: inset 3px 0 var(--mti-accent);
  background: var(--brand-muted);
  color: var(--brand-hover);
  font-weight: 600;
  text-decoration: none;
}

.main {
  min-width: 0;
  padding: 1.5rem 1.75rem 3rem;
}

.main .panel, .main .field, .main .stack, .main .split > * {
  min-width: 0;
  max-width: 100%;
}

.main input, .main textarea, .main select {
  min-width: 0;
  max-width: 100%;
}

.main pre {
  max-width: 100%;
  overflow-x: auto;
}

.main .msg, .main .tag-chip, .main h1, .main h2 {
  overflow-wrap: anywhere;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
}

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Square-ish rather than the old pill, matching StoreSync's 6px buttons. */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-btn);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  text-decoration: none;
}

/* Neutral, not a violet outline: a screen with several secondary buttons was
   reading as several competing calls to action. */
.btn.secondary {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn.secondary:hover {
  background: var(--bg-accent);
  border-color: var(--line-strong);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--brand);
  border-color: var(--brand);
}

.btn.secondary:disabled:hover {
  background: var(--panel);
}

/* One visible focus treatment everywhere. `appearance: none` had stripped the
   platform ring off buttons, leaving keyboard users with nothing to follow. */
.btn:focus-visible,
a:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.nav a:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* The label text itself — inputs reset their own size and weight below. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 0.5rem 0.7rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 400;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-muted);
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field textarea,
  .field select {
    transition: none;
  }
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--radius-btn);
  transition: background-color 100ms ease;
}

/* Rows are links; giving the whole row a hover makes the target obvious
   without adding a border that would fight the separators. */
.list li:hover {
  background: var(--bg-accent);
}

@media (prefers-reduced-motion: reduce) {
  .list li {
    transition: none;
  }
}

.list li:last-child {
  border-bottom: 0;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-muted);
  color: var(--brand-hover);
}

/* Urgent carries a word, not just a colour — see the design brief. */
.badge.urgent {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-line);
  font-weight: 600;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.35rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-accent);
  color: var(--ink);
  border: 1px solid var(--line);
}

.tag-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.9rem;
}

.tag-add {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.tag-add input {
  width: 8rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.auth-card {
  width: min(420px, 100%);
}

/* Visitor stays neutral and the agent carries the brand tint, so the two sides
   of a conversation separate on hue as well as on alignment. */
.msg {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--bg-accent);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  max-width: 80%;
}

.msg.agent {
  background: var(--brand-subtle);
  border-color: var(--brand-muted);
  margin-left: auto;
}

/* Internal notes must never be mistaken for something the visitor can see:
   amber, plus a dashed border that survives being printed or colour-blind. */
.msg.internal {
  background: #fffbeb;
  border: 1px dashed var(--warn);
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 55vh;
  overflow: auto;
  padding: 0.25rem;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1rem;
  min-height: 60vh;
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1rem;
    gap: 0.6rem;
  }
  .sidebar .brand { margin-bottom: 0; }
  .sidebar .nav { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.25rem 0; }
  .sidebar .nav a { flex: 0 0 auto; white-space: nowrap; }
  .split {
    grid-template-columns: 1fr;
  }
}

.error {
  color: var(--danger);
  font-size: 0.95rem;
}

.hero-home {
  max-width: 720px;
  margin: 4rem auto;
  padding: 0 1.25rem;
}

/* Ink, not brand. A full-width violet heading was the loudest thing on the
   portal and pushed everything else down the hierarchy. */
.hero-home h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: 0;
  color: var(--ink);
}

/* Rendered knowledge-base article body (see app/lib/markdown.ts). */
.prose {
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-display);
  line-height: 1.25;
  margin: 1.6rem 0 0.6rem;
}
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.15rem; }
.prose p { margin: 0 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.prose li { margin: 0.25rem 0; }
.prose a { color: var(--brand); }
.prose code {
  background: var(--bg-accent);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.prose pre {
  background: var(--bg-accent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  margin: 0 0 0.9rem;
}
.prose pre code { background: none; padding: 0; font-size: 0.875rem; }
.prose blockquote {
  margin: 0 0 0.9rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.prose table { width: 100%; border-collapse: collapse; }

/* Unread indicators (see app/lib/unread.ts). */
.badge.unread {
  background: var(--brand);
  color: var(--brand-ink);
  margin-left: 0.4rem;
}
.nav a .badge.unread {
  float: right;
  min-width: 1.4em;
  text-align: center;
}
/* Unread is carried by weight and a rule, not by colour alone. */
.unread-row {
  border-left: 3px solid var(--brand);
  background: var(--brand-subtle);
  font-weight: 600;
}

/* Canned-response picker (see app/lib/macros.ts). */
.macro-composer { position: relative; display: grid; gap: 0.35rem; }
.macro-picker {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.macro-picker li { margin: 0; }
.macro-picker button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  cursor: pointer;
}
.macro-picker button.selected { background: var(--bg-accent); }
.macro-preview {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}

/* Ticket activity timeline (see describeTicketEvent in app/lib/types.ts). */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--line);
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.75rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.timeline time { white-space: nowrap; font-size: 0.82rem; }

/* Reporting page: stat tiles and the volume chart. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.stat-value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.stat-label { margin-top: 0.15rem; }
.stat-note { font-size: 0.78rem; margin-top: 0.25rem; }

.chart { margin: 0; position: relative; }
.chart svg { width: 100%; height: 188px; display: block; }
/* Recessive axis, single-hue bars — one series needs no legend. */
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-bar { fill: var(--brand); transition: opacity 120ms ease; }
.chart-bar:hover { opacity: 0.75; }
.chart-axis-labels { position: relative; height: 1.1rem; }
.chart-axis-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.count-list li { display: flex; justify-content: space-between; gap: 1rem; }

/* Inline assignee control in the ticket list. */
.assign-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
}
.assign-inline select { padding: 0.2rem 0.4rem; font-size: 0.82rem; }

/* --- Failure surfaces -------------------------------------------------- */
/* A request that fails must never look like an empty success. These are the
   two shapes that says: an informational notice, and a load failure with a
   retry. Keep app/globals.css and public/helpdesk.css identical. */

.notice {
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-accent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
}

.load-error .btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
}

.error-page {
  max-width: 640px;
  margin: 4rem auto;
  padding: 0 1.25rem;
}

.error-page pre {
  overflow-x: auto;
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg-accent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-word;
}

.staff-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 720px;
  margin: 1rem auto 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  background: var(--bg-accent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.staff-banner .btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
}

/* Live password-requirement checklist on sign-up. Each rule carries a tick or a
   dot as well as colour, so it is readable without seeing green. */
.password-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.password-rules li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.password-rules li.met {
  color: var(--brand-hover);
}

.password-rules li span[aria-hidden] {
  width: 1em;
  text-align: center;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A selectable row in a list — the conversation inbox, for one.
   Deliberately not `.btn`: that is a flex row that centres its children, which
   laid a conversation's name, email and preview out side by side and pushed
   long previews past the edge of the card. Rows stack and truncate instead. */
.row-select {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  appearance: none;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}

.row-select[aria-pressed="true"] {
  background: var(--brand-subtle);
  border-color: var(--brand);
  box-shadow: inset 3px 0 var(--brand);
}

.page-more { display: grid; justify-items: center; gap: 0.5rem; }
.page-more:empty { display: none; }
.ticket-create { border-block: 1px solid var(--line); padding: 0.75rem 0; }
.ticket-create summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.account-controls summary { cursor: pointer; padding-block: 0.5rem; }
.account-controls { overflow-wrap: anywhere; }
.ticket-create form { max-width: 680px; padding-top: 1rem; }
.msg { overflow-wrap: anywhere; }
.list li > a { min-width: 0; overflow-wrap: anywhere; }
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

.row-select:hover {
  background: var(--bg-accent);
  border-color: var(--line-strong);
}

.row-select-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* min-width: 0 on both — a flex child will not shrink below its content width
   without it, which is what let an unbroken preview string escape the card. */
.row-select-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-select-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.row-select.unread-row .row-select-title {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .row-select {
    transition: none;
  }
}