/*
 * ui-redesign.css — Frappe-style UI redesign (feature/UI-Redesing1)
 *
 * A cohesive design-system layer applied on top of the existing
 * Bootstrap 4 markup. Implements GitHub issues #347–#365. Loaded after
 * Bootstrap and style.css so it can refine those components, and it
 * honours the existing [data-theme="light|dark"] switch.
 *
 * Section map (issue → section):
 *   #346 tokens (foundation)   → :root / [data-theme]
 *   #361 typography            → "Typography"
 *   #350 thin scrollbars       → "Scrollbars"
 *   #349 cards                 → "Cards"
 *   #348 badges + avatars      → "Status badges & avatars"
 *   #347 inputs + buttons      → "Forms & buttons"
 *   #358 modal/dialog          → "Modals"
 *   #359 dropdowns             → "Dropdowns"
 *   #363 tooltips              → "Tooltips"
 *   #364 toasts                → "Toasts"
 *   #362 tabs                  → "Tabs"
 *   #365 search bar            → "Search bar"
 *   #356 empty state           → "Empty state"
 *   #355 filter pills          → "Filter bar"
 *   #351 sidebar               → "Sidebar"
 *   #352 ticket list           → "Ticket list"
 *   #353 ticket thread         → "Ticket thread"
 *   #354 metadata sidebar      → "Ticket metadata panel"
 *   #357 WYSIWYG toolbar       → "Editor toolbar"
 *   #360 responsive            → "Responsive" (mobile-first rules throughout + media queries)
 */

/* ============================================================
 * #346 Design tokens (surface / ink / outline) — foundation
 * ============================================================ */
:root,
[data-theme="light"] {
  --ui-surface: #ffffff;
  --ui-surface-2: #f4f5f6;
  --ui-surface-3: #ebeef0;
  --ui-ink: #1f272e;
  --ui-ink-muted: #6b7280;
  --ui-ink-subtle: #98a1a9;
  --ui-outline: #e2e6e9;
  --ui-outline-strong: #cfd6dc;

  --ui-primary: #2490ef;
  --ui-primary-hover: #1d7fd6;
  --ui-primary-soft: #e8f2fe;
  --ui-success: #28a745;
  --ui-success-soft: #e6f5ec;
  --ui-warning: #ed8d1c;
  --ui-warning-soft: #fdf0e1;
  --ui-danger: #e03636;
  --ui-danger-soft: #fce8e8;
  --ui-info: #5e64ff;
  --ui-info-soft: #ecedff;

  --ui-radius-sm: 6px;
  --ui-radius: 8px;     /* rounded-lg */
  --ui-radius-lg: 12px;
  --ui-radius-2xl: 16px;
  --ui-radius-pill: 999px;

  --ui-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --ui-shadow: 0 2px 6px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --ui-shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);

  --ui-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui-font-size: 14px;
  --ui-font-weight: 420;
  --ui-line-height: 1.55;

  --ui-scrollbar: #c7c7c7;
}

[data-theme="dark"] {
  --ui-surface: #1c2127;
  --ui-surface-2: #161a1f;
  --ui-surface-3: #232a31;
  --ui-ink: #e6eaee;
  --ui-ink-muted: #9aa4ad;
  --ui-ink-subtle: #6b7682;
  --ui-outline: #2c343c;
  --ui-outline-strong: #3a444e;

  --ui-primary: #4aa3f5;
  --ui-primary-hover: #6fb6f7;
  --ui-primary-soft: #15324d;
  --ui-success-soft: #16331f;
  --ui-warning-soft: #3a2a13;
  --ui-danger-soft: #3a1d1d;
  --ui-info-soft: #20223f;

  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ui-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  --ui-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.6);

  --ui-scrollbar: #4a525a;
}

/* Bootstrap utility backgrounds are not theme-aware. Flip the light/white
   panels to the dark surface so sub-panels and summary rows — e.g. the finance
   "Total framtida kostnad" row and the Energiuppföljning forms — don't render
   as white blocks in dark mode. */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--ui-surface-2) !important;
  color: var(--ui-ink);
}
[data-theme="dark"] .bg-light .text-muted,
[data-theme="dark"] .bg-white .text-muted {
  color: var(--ui-ink-muted) !important;
}

[data-theme="dark"] .alert-success {
  color: #8ee8a1;
  background-color: #12301c;
  border-color: #245f36;
}

[data-theme="dark"] .alert-warning {
  color: #f6d98a;
  background-color: #34250e;
  border-color: #6c501a;
}

[data-theme="dark"] .alert-danger {
  color: #ff9b9b;
  background-color: #351818;
  border-color: #743030;
}

[data-theme="dark"] .alert-info {
  color: #91d3ff;
  background-color: #102a3b;
  border-color: #255f83;
}

/* ============================================================
 * #361 Typography — Inter var, 14px base, weight 420
 * ============================================================ */
body {
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  font-weight: var(--ui-font-weight);
  line-height: var(--ui-line-height);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ui-ink);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ui-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ui-ink);
}
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
.text-muted { color: var(--ui-ink-muted) !important; }
a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-hover); }
code, kbd, pre, samp { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }

/* ============================================================
 * #350 Thin custom scrollbars (6px, #C7C7C7)
 * ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ui-scrollbar);
  border-radius: var(--ui-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ui-outline-strong); }

/* ============================================================
 * #349 Modern cards — rounded corners, subtle borders
 * ============================================================ */
.card,
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-outline);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
}
.card:hover,
.ui-card:hover { box-shadow: var(--ui-shadow); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ui-outline);
  font-weight: 600;
  border-top-left-radius: var(--ui-radius-lg) !important;
  border-top-right-radius: var(--ui-radius-lg) !important;
}
.card-footer {
  background: var(--ui-surface-2);
  border-top: 1px solid var(--ui-outline);
}

/* ============================================================
 * #348 Pill-shaped status badges & avatars
 * ============================================================ */
.badge,
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 500;
  font-size: 0.78em;
  padding: 0.3em 0.7em;
  border-radius: var(--ui-radius-pill);
  letter-spacing: 0.01em;
}
.ui-badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.ui-badge--open,    .badge-open    { color: var(--ui-primary); background: var(--ui-primary-soft); }
.ui-badge--progress,.badge-progress{ color: var(--ui-warning); background: var(--ui-warning-soft); }
.ui-badge--closed,  .badge-closed  { color: var(--ui-ink-muted); background: var(--ui-surface-3); }
.ui-badge--success, .badge-success { color: var(--ui-success); background: var(--ui-success-soft); }
.ui-badge--danger,  .badge-danger  { color: var(--ui-danger); background: var(--ui-danger-soft); }

.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ui-info-soft);
  color: var(--ui-info);
  font-weight: 600;
  font-size: 0.8rem;
  flex: 0 0 auto;
  text-transform: uppercase;
  border: 1px solid var(--ui-outline);
}
.ui-avatar--sm { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
.ui-avatar--lg { width: 2.6rem; height: 2.6rem; font-size: 1rem; }

/* ============================================================
 * #347 Compact form inputs (28px) & button redesign
 * ============================================================ */
.form-control,
.custom-select,
.ui-input {
  min-height: 28px;
  height: auto;
  padding: 0.25rem 0.6rem;
  font-size: var(--ui-font-size);
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-outline-strong);
  border-radius: var(--ui-radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-control:focus,
.custom-select:focus,
.ui-input:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-primary-soft);
  outline: none;
}
.form-control::placeholder { color: var(--ui-ink-subtle); }
label, .form-label { font-weight: 500; color: var(--ui-ink); margin-bottom: 0.25rem; }

.btn {
  font-weight: 500;
  border-radius: var(--ui-radius-sm);
  padding: 0.3rem 0.85rem;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.18rem 0.6rem; font-size: 0.82rem; }
.btn-primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  box-shadow: 0 0 0 3px var(--ui-primary-soft);
}
.btn-outline-secondary,
.btn-secondary {
  border-radius: var(--ui-radius-sm);
}
.btn-outline-secondary {
  color: var(--ui-ink);
  border-color: var(--ui-outline-strong);
  background: var(--ui-surface);
}
.btn-outline-secondary:hover {
  background: var(--ui-surface-2);
  color: var(--ui-ink);
  border-color: var(--ui-outline-strong);
}

/* ============================================================
 * #358 Modal / dialog redesign — rounded-2xl + soft overlay
 * ============================================================ */
.modal-backdrop.show { opacity: 0.45; background: #0b1116; }
.modal-content,
.ui-dialog {
  border: none;
  border-radius: var(--ui-radius-2xl);
  box-shadow: var(--ui-shadow-lg);
  background: var(--ui-surface);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--ui-outline);
  padding: 1rem 1.25rem;
}
.modal-header .modal-title { font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--ui-outline); padding: 0.85rem 1.25rem; }
@media (min-width: 576px) {
  .modal-dialog { max-width: 540px; }
}

/* ============================================================
 * #359 Dropdown menus — rounded-lg + shadow-lg
 * ============================================================ */
.dropdown-menu,
.ui-menu {
  border: 1px solid var(--ui-outline);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-lg);
  background: var(--ui-surface);
  padding: 0.35rem;
  font-size: var(--ui-font-size);
  color: var(--ui-ink);
}
.dropdown-item,
.ui-menu-item {
  border-radius: var(--ui-radius-sm);
  padding: 0.4rem 0.6rem;
  color: var(--ui-ink);
}
.dropdown-item:hover,
.dropdown-item:focus,
.ui-menu-item:hover {
  background: var(--ui-surface-2);
  color: var(--ui-ink);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--ui-primary);
  color: #fff;
}
.dropdown-divider { border-top-color: var(--ui-outline); }

/* ============================================================
 * #363 Tooltips — dark background + shadow
 * ============================================================ */
[data-ui-tooltip] { position: relative; }
[data-ui-tooltip]::after {
  content: attr(data-ui-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #11181f;
  color: #f4f6f8;
  padding: 0.35rem 0.6rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.78rem;
  font-weight: 450;
  white-space: nowrap;
  box-shadow: var(--ui-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 1080;
}
[data-ui-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #11181f;
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 1080;
}
[data-ui-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-ui-tooltip]:hover::before { opacity: 1; }

/* ============================================================
 * #364 Toast notifications — slide-in animation
 * ============================================================ */
.ui-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(360px, calc(100vw - 2rem));
}
.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-outline);
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-lg);
  padding: 0.7rem 0.9rem;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.ui-toast.ui-toast--in { transform: translateX(0); opacity: 1; }
.ui-toast.ui-toast--out { transform: translateX(120%); opacity: 0; }
.ui-toast--success { border-left-color: var(--ui-success); }
.ui-toast--warning { border-left-color: var(--ui-warning); }
.ui-toast--danger  { border-left-color: var(--ui-danger); }
.ui-toast__icon { font-size: 1rem; line-height: 1.3; }
.ui-toast__body { flex: 1 1 auto; font-size: 0.86rem; }
.ui-toast__title { font-weight: 600; display: block; margin-bottom: 0.1rem; }
.ui-toast__close {
  background: none; border: none; color: var(--ui-ink-subtle);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.ui-toast__close:hover { color: var(--ui-ink); }

/* ============================================================
 * #362 Tab navigation — underline indicator
 * ============================================================ */
.nav-tabs,
.ui-tabs {
  border-bottom: 1px solid var(--ui-outline);
  gap: 0.25rem;
}
.nav-tabs .nav-link,
.ui-tabs .ui-tab {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ui-ink-muted);
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  background: none;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-tabs .nav-link:hover,
.ui-tabs .ui-tab:hover { color: var(--ui-ink); border-bottom-color: var(--ui-outline-strong); }
.nav-tabs .nav-link.active,
.ui-tabs .ui-tab.active {
  color: var(--ui-primary);
  background: none;
  border-bottom-color: var(--ui-primary);
}

/* ============================================================
 * #365 Search bar — icon + clear button
 * ============================================================ */
.ui-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
}
.ui-search__icon {
  position: absolute;
  left: 0.6rem;
  color: var(--ui-ink-subtle);
  pointer-events: none;
  display: inline-flex;
}
.ui-search input,
.ui-search .form-control {
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: var(--ui-radius-pill);
}
.ui-search__clear {
  position: absolute;
  right: 0.5rem;
  border: none;
  background: var(--ui-surface-3);
  color: var(--ui-ink-muted);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  line-height: 1;
  font-size: 0.8rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.ui-search__clear:hover { background: var(--ui-outline-strong); color: var(--ui-ink); }
.ui-search.ui-search--has-value .ui-search__clear { display: inline-flex; }

/* ============================================================
 * #356 Empty state — icon + centered message
 * ============================================================ */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ui-ink-muted);
}
.ui-empty__icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-surface-2);
  color: var(--ui-ink-subtle);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.ui-empty__title { font-weight: 600; color: var(--ui-ink); margin-bottom: 0.35rem; }
.ui-empty__text { max-width: 26rem; margin: 0 auto 1rem; }
/* Compact variant for inline section empties (attachments, comments…). */
.ui-empty--compact { padding: 1.25rem 1rem; }
.ui-empty--compact .ui-empty__icon { width: 2.2rem; height: 2.2rem; font-size: 1rem; margin-bottom: 0.5rem; }
.ui-empty--compact .ui-empty__title { font-weight: 500; font-size: 0.9rem; }

/* ============================================================
 * #355 Filter bar — active filter pills
 * ============================================================ */
.ui-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
}
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.ui-pill__remove {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0; opacity: 0.7;
}
.ui-pill__remove:hover { opacity: 1; }
.ui-pill--muted { background: var(--ui-surface-3); color: var(--ui-ink-muted); }
.ui-filter-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-ink-subtle);
  margin-right: 0.25rem;
}
a.ui-pill, a.ui-pill:hover { text-decoration: none; }

/* ============================================================
 * #544 Slide-in filter drawer (right-anchored, Frappe-style)
 * ============================================================ */
.ui-drawer {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  pointer-events: none;
}
.ui-drawer[aria-hidden="false"] {
  display: block;
  pointer-events: auto;
}
.ui-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 22, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ui-drawer[aria-hidden="false"] .ui-drawer__backdrop { opacity: 1; }
.ui-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-outline);
  box-shadow: var(--ui-shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-drawer[aria-hidden="false"] .ui-drawer__panel { transform: translateX(0); }
.ui-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ui-outline);
}
.ui-drawer__title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--ui-ink); }
.ui-drawer__close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ui-ink-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ui-radius-sm);
}
.ui-drawer__close:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
}
.ui-drawer__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--ui-outline);
  background: var(--ui-surface-2);
}
.ui-drawer__footer .btn { flex: 1 1 0; }
body.ui-drawer-open { overflow: hidden; }
/* Multi-select status filter checkboxes (#692). */
.filter-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.filter-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .ui-drawer__panel { width: 100vw; }
}

/* ============================================================
 * #351 Modern sidebar — icons, active states (collapsible via JS)
 * ============================================================ */
.sidebar-menu {
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-outline);
}
.sidebar-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-ink-subtle);
  font-weight: 600;
  padding: 0 0.25rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: var(--ui-radius-sm);
  padding: 0.4rem 0.6rem;
  color: var(--ui-ink-muted);
  font-weight: 450;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar-link:hover {
  background: var(--ui-surface-2);
  color: var(--ui-ink);
  text-decoration: none;
}
.sidebar-link.active,
.sidebar-link[aria-current="page"] {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-weight: 600;
}
.sidebar-link::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.35; flex: 0 0 auto;
}
.sidebar-section.is-collapsed .sidebar-link { display: none; }
.sidebar-section-title { cursor: pointer; user-select: none; }

/* ============================================================
 * #352 Data tables — row hover + typography (Frappe-style)
 * ============================================================ */
.table,
.ui-ticket-list .table {
  color: var(--ui-ink);
  background: var(--ui-surface);
}
.table thead th,
.ui-ticket-list .table thead th {
  background: var(--ui-surface-2);
  border-bottom: 1px solid var(--ui-outline-strong);
  color: var(--ui-ink-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
}
.table td,
.ui-ticket-list .table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-top: 1px solid var(--ui-outline);
}
.table-hover tbody tr,
.ui-ticket-list .table tbody tr,
.ui-ticket-row {
  transition: background-color 0.1s ease;
  cursor: pointer;
}
.table-hover tbody tr:hover,
.ui-ticket-list .table tbody tr:hover,
.ui-ticket-row:hover {
  background: var(--ui-surface-2) !important;
}
.table-responsive {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-outline);
  overflow: hidden;
}

/* ============================================================
 * #353 Ticket detail thread — avatars + comment bubbles
 * ============================================================ */
.ui-thread { display: flex; flex-direction: column; gap: 1rem; }
.ui-thread__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.ui-thread__item--self { flex-direction: row-reverse; }
.ui-bubble {
  background: var(--ui-surface);
  border: 1px solid var(--ui-outline);
  border-radius: var(--ui-radius-lg);
  padding: 0.7rem 0.9rem;
  max-width: 80%;
  box-shadow: var(--ui-shadow-sm);
}
.ui-thread__item--self .ui-bubble {
  background: var(--ui-primary-soft);
  border-color: transparent;
}
.ui-bubble__meta {
  display: flex; gap: 0.5rem; align-items: baseline;
  font-size: 0.78rem; color: var(--ui-ink-muted); margin-bottom: 0.25rem;
}
.ui-bubble__author { font-weight: 600; color: var(--ui-ink); }

/* ============================================================
 * #354 Ticket metadata panel (right side)
 * ============================================================ */
.ui-ticket-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.ui-ticket-main { flex: 1 1 auto; min-width: 0; }
.ui-ticket-meta {
  flex: 0 0 280px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-outline);
  border-radius: var(--ui-radius-lg);
  padding: 1rem;
  box-shadow: var(--ui-shadow-sm);
}
.ui-ticket-meta__row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--ui-outline); }
.ui-ticket-meta__row:last-child { border-bottom: none; }
.ui-ticket-meta__label { color: var(--ui-ink-muted); font-size: 0.82rem; }
.ui-ticket-meta__value { font-weight: 500; text-align: right; }

/* ============================================================
 * #357 WYSIWYG editor toolbar — Lucide-style icon buttons
 * ============================================================ */
.ui-editor {
  border: 1px solid var(--ui-outline-strong);
  border-radius: var(--ui-radius);
  overflow: hidden;
  background: var(--ui-surface);
}
.ui-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem;
  border-bottom: 1px solid var(--ui-outline);
  background: var(--ui-surface-2);
}
.ui-editor__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: none;
  background: none;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-ink-muted);
  cursor: pointer;
}
.ui-editor__btn:hover { background: var(--ui-surface-3); color: var(--ui-ink); }
.ui-editor__btn.active { background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-editor__btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.ui-editor__sep { width: 1px; background: var(--ui-outline); margin: 0.2rem 0.25rem; }
.ui-editor__area { min-height: 8rem; padding: 0.75rem; outline: none; }

/* ============================================================
 * App-wide adoption (#529-#538) — covers areas not individually
 * migrated: Bootstrap .badge-* → Frappe dot-pills, search inputs →
 * magnifier + pill, all .table rows get hover, .empty-state styling.
 * ============================================================ */
/* Soft token colours for the remaining Bootstrap badge variants
 * (success/danger already aliased above). */
.badge-primary { color: var(--ui-primary); background: var(--ui-primary-soft); }
.badge-warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.badge-info    { color: var(--ui-info);    background: var(--ui-info-soft); }
.badge-secondary,
.badge-light,
.badge-dark    { color: var(--ui-ink-muted); background: var(--ui-surface-3); }
/* Give every semantic Bootstrap badge the dot-pill marker (.badge is
 * already inline-flex w/ gap, so the dot sits before the label). */
.badge-primary::before, .badge-success::before, .badge-warning::before,
.badge-danger::before,  .badge-info::before,    .badge-secondary::before,
.badge-light::before,   .badge-dark::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
  flex: 0 0 auto;
}

/* #538 — row hover for ALL data tables (not just .table-hover). */
.table:not(.table-borderless) tbody tr { transition: background-color 0.1s ease; }
.table:not(.table-borderless) tbody tr:hover { background: var(--ui-surface-2); }

/* #529/#530/#535 — search inputs get the magnifier + pill even when not
 * wrapped in .ui-search (icon is a static muted SVG). */
input[type="search"],
input[name="search"] {
  border-radius: var(--ui-radius-pill);
  padding-left: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2398a1a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.6rem center;
}
.ui-search input[type="search"],
.ui-search input[name="search"] { background-image: none; }

/* Legacy .empty-state blocks get the centered, muted treatment. */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--ui-ink-muted);
}

/* ============================================================
 * #360 Responsive / mobile-first
 * ============================================================ */
.app-surface { background: var(--ui-surface-2); }
@media (max-width: 768px) {
  :root { --ui-font-size: 13.5px; }
  .ui-ticket-layout { flex-direction: column; }
  .ui-ticket-meta { flex-basis: auto; width: 100%; }
  .ui-bubble { max-width: 100%; }
  .ui-search { max-width: 100%; }
  .modal-dialog { margin: 0.5rem; }
  .card-body { padding: 0.85rem; }
  .ui-toast-container { left: 1rem; right: 1rem; max-width: none; }
}

/* ============================================================
 * #693 Kundtjänst (and other header-container pages) mobile layout.
 * The header actions get consistent spacing and wrap instead of
 * overlapping the page title; on phones the title sits on its own
 * row above the buttons, the content shell uses (almost) the full
 * width, and the wide ticket table scrolls inside its own container
 * rather than forcing the whole page to scroll sideways.
 * ============================================================ */
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }
  .header-container h1 {
    margin-bottom: 0;
  }
  .header-actions {
    width: 100%;
  }
  .page-content-shell,
  .page-content-shell--narrow {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  /* Keep the wide ticket table inside its card and let only it scroll
     horizontally, instead of spilling the whole page off-screen. */
  .ui-ticket-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ui-ticket-list .table {
    min-width: 680px;
  }
}

/* ============================================================
 * #694 Ticket attachment list + in-ticket preview modal.
 * ============================================================ */
.ticket-attachment-list { list-style: none; padding-left: 0; margin-bottom: 0.5rem; }
.ticket-attachment-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.ticket-attachment-link { font-weight: 500; cursor: pointer; word-break: break-word; }
.ticket-attachment-size { font-size: 0.85em; }
.ticket-attachment-download { margin-left: auto; text-decoration: none; font-size: 1.1em; flex: 0 0 auto; }

.ticket-attachment-modal { display: none; position: fixed; inset: 0; z-index: 1080; }
.ticket-attachment-modal.is-open { display: flex; align-items: center; justify-content: center; }
.ticket-attachment-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 17, 22, 0.72); }
.ticket-attachment-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 92vw;
  height: 90vh;
  max-width: 1100px;
  background: var(--ui-surface, #ffffff);
  color: var(--ui-ink, #11181c);
  border-radius: var(--ui-radius, 10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.ticket-attachment-modal__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--ui-outline, #e3e8ee);
  background: var(--ui-surface-2, #f6f8fa);
}
.ticket-attachment-modal__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-attachment-modal__spacer { flex: 1 1 auto; }
.ticket-attachment-modal__nav,
.ticket-attachment-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ui-ink-muted, #51606e);
  padding: 0 0.35rem;
}
.ticket-attachment-modal__nav:disabled { opacity: 0.3; cursor: default; }
.ticket-attachment-modal__close { font-size: 1.7rem; }
.ticket-attachment-modal__download { white-space: nowrap; }
.ticket-attachment-modal__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1rem;
  background: var(--ui-surface, #ffffff);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ticket-attachment-image { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.ticket-attachment-frame { width: 100%; height: 100%; border: 0; }
.ticket-attachment-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--ui-mono, monospace);
  font-size: 0.85rem;
}
/* Office/ODF documents render on a light page regardless of theme. */
.ticket-attachment-doc { width: 100%; background: #ffffff; color: #111111; padding: 0.5rem; }
.ticket-attachment-sheet table { border-collapse: collapse; }
.ticket-attachment-sheet td,
.ticket-attachment-sheet th { border: 1px solid #cccccc; padding: 2px 6px; font-size: 0.8rem; }
.ticket-attachment-fallback { text-align: center; margin: auto; max-width: 380px; }
.ticket-attachment-fallback__icon { font-size: 3rem; }
.ticket-attachment-fallback__name { font-weight: 600; word-break: break-word; }
.ticket-attachment-fallback__msg { color: var(--ui-ink-muted, #51606e); }
.ticket-attachment-loading { margin: auto; color: var(--ui-ink-muted, #51606e); }
body.ticket-attachment-modal-open { overflow: hidden; }
@media (max-width: 768px) {
  .ticket-attachment-modal__dialog { width: 100vw; height: 100vh; border-radius: 0; max-width: none; }
}