/* ==========================================================================
   IT Command Center — Interface Refresh
   Loaded after styles.css. Redefines the shared design tokens so the whole
   app inherits the new look, then restyles the shell and core primitives.

   Earlier layers in styles.css lean heavily on !important, so contested
   properties are re-asserted the same way here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset + base typography
   Replaces the Tailwind Play CDN preflight that used to supply this.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* styles.css assumes headings carry no intrinsic size, so keep them inheriting
   by default and give size only to the ones the shell positions itself. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea, optgroup {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--border);
}

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

a:hover {
  text-decoration: underline;
}

[hidden],
.hidden {
  display: none !important;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* One consistent, visible focus ring everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: color-mix(in srgb, var(--primary) 24%, transparent);
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Inter", "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace;

  /* Type scale */
  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 27px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;
  --radius: var(--r-md);

  /* Neutral surfaces */
  --bg-primary: #eef2f9;
  --bg-secondary: #e2e9f5;
  --surface-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #eaf0fb;
  --surface-sunken: #f7f9fc;
  --border: #e2e7ef;
  --border-strong: #cbd3e0;
  --field-border: #7b8593;

  /* Text */
  --text-primary: #0a0f1a;
  --text-secondary: #414c60;
  /* 4.6:1 on --surface-elevated, so uppercase micro-labels still pass AA. */
  --text-muted: #5f6878;

  /* Brand + semantics */
  --primary: #1a45ff;
  --primary-hover: #0d33e0;
  --primary-contrast: #ffffff;
  --success: #00753f;
  --warning: #a34700;
  --danger: #d40024;
  --info: #0069b8;
  --focus: #1a45ff;

  /* Tinted fills, kept light enough for dark text to pass contrast */
  --primary-soft: #dbe5ff;
  --success-soft: #ccf2e0;
  --warning-soft: #ffe6c7;
  --danger-soft: #ffe6ea;
  --info-soft: #d2eaff;

  /* Sidebar rail */
  --shell-bg: #ffffff;
  --shell-ink: #10151f;
  --shell-muted: #6c7688;
  --shell-border: #e2e7ef;
  --shell-hover: #f2f5fa;
  --shell-active-bg: #eaf0fe;
  --shell-active-ink: #1f4bcc;
  --shell-sidebar: 252px;
  --shell-header: auto;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Legacy aliases used throughout styles.css */
  --bg: var(--bg-primary);
  --bg-soft: var(--bg-secondary);
  --surface-solid: var(--surface-elevated);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --faint: var(--text-muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --accent: var(--primary);
  --shell-panel: var(--shell-bg);
  --shell-panel-2: var(--shell-bg);
  --shell-active: var(--primary);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #05070e;
  --bg-secondary: #0b101b;
  --surface-elevated: #161d2b;
  --surface: #161d2b;
  --surface-hover: #1f2839;
  --surface-sunken: #0d131e;
  --border: #262f3f;
  --border-strong: #374256;
  --field-border: #66738b;

  --text-primary: #f2f6fc;
  --text-secondary: #bcc7d8;
  --text-muted: #8b96a9;

  --primary: #6f9dff;
  --primary-hover: #8fb4ff;
  --primary-contrast: #08121f;
  --success: #31e39b;
  --warning: #ffc247;
  --danger: #ff6b7d;
  --info: #3ec9ff;
  --focus: #6f9dff;

  --primary-soft: #17264a;
  --success-soft: #0d2f22;
  --warning-soft: #33260f;
  --danger-soft: #3a1620;
  --info-soft: #0c2839;

  --shell-bg: #0c111a;
  --shell-ink: #eef2f8;
  --shell-muted: #8b96a8;
  --shell-border: #1f2735;
  --shell-hover: #161d29;
  --shell-active-bg: #17253f;
  --shell-active-ink: #a8c4ff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.62);
}

/* --------------------------------------------------------------------------
   3. Shared text utilities
   -------------------------------------------------------------------------- */

.muted {
  color: var(--text-secondary) !important;
}

.eyebrow {
  color: var(--text-muted) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.section-title {
  color: var(--text-primary) !important;
  font-size: var(--text-md) !important;
  font-weight: 640 !important;
  letter-spacing: -0.01em !important;
}

/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */

.app {
  grid-template-columns: var(--shell-sidebar) minmax(0, 1fr) !important;
  min-height: 100vh;
  background: var(--bg-primary) !important;
}

/* --- Sidebar ---------------------------------------------------------- */

.sidebar {
  position: sticky !important;
  top: 0;
  height: 100vh;
  padding: 14px 12px !important;
  overflow: hidden;
  border-right: 1px solid var(--shell-border) !important;
  background: var(--shell-bg) !important;
  color: var(--shell-ink) !important;
  box-shadow: none !important;
}

body.rtl .sidebar {
  border-right: 0 !important;
  border-left: 1px solid var(--shell-border) !important;
  box-shadow: none !important;
}

.sidebar-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px !important;
  padding: 6px 6px 2px !important;
  background: transparent !important;
  border-radius: var(--r-md);
}

/* These were hardcoded near-white, which made them invisible once the rail
   turned light. Drive them from tokens so both themes stay readable. */
.brand strong {
  color: var(--shell-ink) !important;
  font-size: var(--text-base) !important;
  font-weight: 660 !important;
  letter-spacing: -0.01em !important;
}

.brand small {
  color: var(--shell-muted) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.logo {
  display: grid;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(140deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #10225c)) !important;
  color: #fff !important;
  font-size: var(--text-sm);
  font-weight: 750;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-xs);
}

.sidebar-search-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 34px;
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--r-sm);
  background: var(--surface-sunken) !important;
}

:root[data-theme="dark"] .sidebar-search-shell {
  background: var(--shell-hover) !important;
}

.sidebar-search-shell:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.sidebar-search-shell input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--shell-ink);
  font-size: var(--text-sm);
  outline: none;
}

#nav {
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

/* Another leftover near-white from the dark-rail design. */
.nav-section-toggle {
  color: var(--text-secondary) !important;
}

.nav-section-toggle span {
  color: var(--text-secondary) !important;
}

.nav-section-toggle small {
  color: var(--text-muted) !important;
}

.nav-group-title,
#nav .eyebrow {
  padding: 12px 10px 4px;
  color: var(--text-secondary) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 1 !important;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--shell-muted) !important;
  font-size: var(--text-base) !important;
  font-weight: 550 !important;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.14s ease, color 0.14s ease;
}

body.rtl .nav-btn {
  text-align: right;
}

.nav-btn:hover {
  background: var(--shell-hover) !important;
  color: var(--shell-ink) !important;
}

.nav-btn.active {
  background: var(--shell-active-bg) !important;
  color: var(--shell-active-ink) !important;
  font-weight: 640 !important;
  box-shadow: none !important;
}

body.rtl .nav-btn.active {
  box-shadow: none !important;
}

.nav-icon,
.nav-btn svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: currentColor;
  background: transparent !important;
  opacity: 0.85;
}

.nav-btn.active .nav-icon {
  background: transparent !important;
  color: currentColor;
  opacity: 1;
}

.sidebar-footer {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px !important;
  border: 1px solid var(--shell-border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-sunken) !important;
}

:root[data-theme="dark"] .sidebar-footer {
  background: var(--shell-hover) !important;
}

.sidebar-footer-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 20%, transparent);
}

.sidebar-footer strong {
  color: var(--shell-ink) !important;
  font-size: var(--text-sm) !important;
  font-weight: 620 !important;
}

.sidebar-footer small {
  color: var(--shell-muted) !important;
  font-size: var(--text-xs) !important;
}

/* --- Topbar ----------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent) !important;
  backdrop-filter: saturate(1.6) blur(10px);
  color: var(--text-primary);
}

/* The old fixed header height forced the breadcrumb to wrap underneath the
   page title. Let the row size to its content and keep the crumb on one line. */
.topbar-row {
  display: grid !important;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 520px) auto !important;
  align-items: center;
  gap: 18px !important;
  min-height: 0 !important;
  padding: 12px 22px !important;
}

.page-context {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.breadcrumbs {
  display: block !important;
  overflow: hidden;
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumbs::before {
  content: none !important;
}

.page-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#pageTitle {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-xl) !important;
  font-weight: 660 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-title-line .eyebrow {
  order: 2;
  flex: 0 0 auto;
  padding: 3px 8px !important;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  font-size: var(--text-2xs) !important;
}

.global-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-sunken) !important;
  color: var(--text-secondary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.global-search:focus-within {
  border-color: var(--primary) !important;
  background: var(--surface-elevated) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.global-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-base);
  outline: none;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-full) !important;
  background: var(--surface-elevated) !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-button:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}

.profile-button strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 620;
  line-height: 1.25;
}

.profile-button small {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: 1.25;
}

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #10225c));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}

.avatar.mini {
  width: 22px;
  height: 22px;
  font-size: var(--text-2xs);
}

.main {
  min-width: 0;
  background: transparent;
}

#content {
  padding: 20px 22px 40px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease;
}

.btn:active {
  transform: translateY(0.5px);
}

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-secondary {
  background: var(--surface-elevated) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.btn-secondary:hover {
  background: var(--surface-hover) !important;
  border-color: var(--text-muted) !important;
}

.btn-danger {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 32%, transparent) !important;
  color: var(--danger) !important;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-elevated)) !important;
}

.btn-warning {
  background: var(--warning-soft) !important;
  border-color: color-mix(in srgb, var(--warning) 32%, transparent) !important;
  color: var(--warning) !important;
}

.btn-warning:hover {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-elevated)) !important;
}

.btn.compact,
.btn.small {
  min-height: 28px;
  padding: 4px 10px !important;
  font-size: var(--text-xs) !important;
}

.btn.full {
  width: 100%;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-secondary) !important;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.icon-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.lang-toggle {
  min-height: 34px;
  font-size: var(--text-sm) !important;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px !important;
  /* A control's boundary is what identifies it, so this meets WCAG 1.4.11 (3:1).
     Decorative card hairlines deliberately stay lighter. */
  border: 1px solid var(--field-border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-base) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 78px;
  line-height: 1.55;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

label {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 570;
}

label > input,
label > select,
label > textarea {
  margin-top: 5px;
}

/* The markup already renders an asterisk inside .required, so a generated one
   doubled it up ("* *"). Style the existing marker instead of adding another. */
.required {
  color: var(--danger);
  margin-inline-start: 2px;
  white-space: nowrap;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. Surfaces, cards, panels
   -------------------------------------------------------------------------- */

.surface-card,
.command-panel,
.record-card,
.timeline-card,
.ticket-info-card,
.confirm-card,
.metric-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-xs) !important;
}

.surface-card,
.command-panel {
  padding: 18px !important;
}

.record-card {
  padding: 14px !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.record-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-sunken) !important;
}

:root[data-theme="dark"] .detail-field {
  background: var(--surface-sunken) !important;
}

.detail-field > span:first-child,
.detail-field .eyebrow {
  color: var(--text-muted) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 660 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.detail-field strong,
.detail-field > span:last-child {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 570;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   8. Badges and status indicators
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-full) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 660 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge.neutral,
.badge.archived,
.badge.inactive,
.badge.muted {
  background: var(--surface-sunken) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.badge.success,
.badge.active,
.badge.completed,
.badge.done,
.badge.published,
.badge.available {
  background: var(--success-soft) !important;
  border-color: color-mix(in srgb, var(--success) 26%, transparent) !important;
  color: var(--success) !important;
}

.badge.info,
.badge.open,
.badge.in_progress,
.badge.progress,
.badge.assigned {
  background: var(--info-soft) !important;
  border-color: color-mix(in srgb, var(--info) 26%, transparent) !important;
  color: var(--info) !important;
}

.badge.warning,
.badge.waiting,
.badge.expiring,
.badge.medium {
  background: var(--warning-soft) !important;
  border-color: color-mix(in srgb, var(--warning) 28%, transparent) !important;
  color: var(--warning) !important;
}

.badge.danger,
.badge.critical,
.badge.overdue,
.badge.lost,
.badge.breached,
.badge.high {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 26%, transparent) !important;
  color: var(--danger) !important;
}

.badge.purple {
  background: color-mix(in srgb, #7c3aed 11%, var(--surface-elevated)) !important;
  border-color: color-mix(in srgb, #7c3aed 26%, transparent) !important;
  color: #6d28d9 !important;
}

:root[data-theme="dark"] .badge.purple {
  color: #c4b5fd !important;
}

.workspace-indicator {
  padding: 2px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-full) !important;
  color: var(--text-secondary) !important;
  background: var(--surface-sunken) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 650 !important;
}

.workspace-indicator.critical {
  border-color: color-mix(in srgb, var(--danger) 26%, transparent) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

.workspace-indicator.waiting {
  border-color: color-mix(in srgb, var(--warning) 28%, transparent) !important;
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
}

.workspace-indicator.unassigned {
  border-color: color-mix(in srgb, var(--info) 26%, transparent) !important;
  background: var(--info-soft) !important;
  color: var(--info) !important;
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-elevated) !important;
}

table {
  width: 100%;
  font-size: var(--text-base);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
  color: var(--text-muted) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 680 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

body.rtl thead th {
  text-align: right;
}

tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0 !important;
}

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: var(--surface-hover) !important;
}

/* --------------------------------------------------------------------------
   10. Tabs
   -------------------------------------------------------------------------- */

.tabs,
.workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-sunken) !important;
}

.tabs button,
.workspace-tabs button {
  padding: 6px 13px !important;
  border: 0 !important;
  border-radius: var(--r-xs) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  transition: background 0.14s ease, color 0.14s ease;
}

.tabs button:hover,
.workspace-tabs button:hover {
  color: var(--text-primary) !important;
  background: color-mix(in srgb, var(--surface-elevated) 70%, transparent) !important;
}

.tabs button.active,
.workspace-tabs button.active {
  background: var(--surface-elevated) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* --------------------------------------------------------------------------
   11. Split workspaces (ticket / task / asset / people / vendor / contract)

   The list containers were CSS grids whose auto tracks mis-measured the
   nested-grid list rows, so rows were clamped to min-height and their content
   spilled over the row beneath. A flex column sizes each row to its content.
   -------------------------------------------------------------------------- */

.ticket-workspace-list,
.task-stack,
.record-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px !important;
  overflow-y: auto;
  min-height: 0;
}

.ticket-workspace-item,
.standard-workspace-item,
.asset-workspace-item,
.knowledge-workspace-item,
.vendor-workspace-item,
.contract-workspace-item,
.task-workspace-item,
.ticket-v2-list-item {
  flex: 0 0 auto !important;
  display: grid !important;
  gap: 6px !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

body.rtl .ticket-workspace-item,
body.rtl .ticket-v2-list-item {
  text-align: right;
}

.ticket-workspace-item:hover,
.standard-workspace-item:hover,
.asset-workspace-item:hover,
.knowledge-workspace-item:hover,
.vendor-workspace-item:hover,
.contract-workspace-item:hover,
.task-workspace-item:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border) !important;
}

.ticket-workspace-item.active,
.standard-workspace-item.active,
.asset-workspace-item.active,
.knowledge-workspace-item.active,
.vendor-workspace-item.active,
.contract-workspace-item.active,
.task-workspace-item.active,
.ticket-v2-list-item.active {
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 34%, transparent) !important;
  box-shadow: none !important;
}

.ticket-v2-list-top,
.workspace-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ticket-v2-list-top strong,
.workspace-ticket-top strong {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 620;
  letter-spacing: 0.01em;
}

.workspace-ticket-subject {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0 !important;
  color: var(--text-primary);
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  line-height: 1.4;
  white-space: normal !important;
  text-overflow: initial !important;
}

.ticket-v2-requester,
.workspace-ticket-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.ticket-v2-requester small {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

body.rtl .ticket-v2-requester small {
  margin-left: 0;
  margin-right: auto;
}

.ticket-v2-list-badges,
.workspace-ticket-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Status badges and the assignment indicator share one row so a ticket row
   stays four lines tall instead of five. */
.ticket-v2-list-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
}

.ticket-v2-list-item > .ticket-v2-list-top,
.ticket-v2-list-item > .workspace-ticket-subject,
.ticket-v2-list-item > .ticket-v2-requester {
  grid-column: 1 / -1;
}

.ticket-v2-list-item > .ticket-v2-list-badges {
  grid-column: 1;
}

.ticket-v2-list-item > .workspace-ticket-indicators {
  grid-column: 2;
  justify-content: flex-end;
}

.ticket-v2-sla {
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.ticket-workspace-list-panel,
.ticket-workspace-detail-panel {
  min-width: 0;
  background: var(--surface-elevated) !important;
}

.ticket-workspace-list-panel {
  border-right: 1px solid var(--border) !important;
}

body.rtl .ticket-workspace-list-panel {
  border-right: 0 !important;
  border-left: 1px solid var(--border) !important;
}

.ticket-workspace-list-tools {
  padding: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

.ticket-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Import summary reads as a compact row of counts, not a stacked list. */
.people-import-modal .detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.people-import-modal .import-problem-list {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  list-style: disc;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-height: 180px;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .people-import-modal .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Account actions for the selected person, in the row above the tabs. */
.person-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

/* Search plus the list-actions menu share one row in the People workspace. */
.people-list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.people-list-tools #searchBox {
  flex: 1 1 auto;
  min-width: 0;
}

.people-actions-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

/* Sized as a 38px icon button but labelled "More", so the text was clipped. */
.ticket-v2-more {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
}

/* More hardcoded slate-900 text that disappeared against the dark panels. */
.ticket-workspace-v2 .ticket-v2-list-head strong,
.ticket-workspace-v2 .ticket-v2-list-head small,
.ticket-v2-list-item .workspace-ticket-subject,
.contract-workspace-item .workspace-ticket-subject,
.vendor-workspace-item .workspace-ticket-subject {
  color: var(--text-primary) !important;
}

.manager-ticket-filter span,
.manager-ticket-filter label {
  color: var(--text-secondary) !important;
}

/* The ticket workspace hardcodes #fff on ten surfaces, so in dark mode these
   panels stayed white with light text on them. Several only appear on the
   Details/Files tabs, which is why they are easy to miss. */
.ticket-v2-side-panel,
.ticket-workspace-info,
.ticket-v2-summary-card,
.ticket-v2-more summary,
.ticket-workspace-v2 .ticket-overview-section,
.ticket-workspace-v2 .ticket-message,
.ticket-workspace-v2 .ticket-conversation-composer {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.ticket-workspace-v2 .ticket-workspace-actions select,
.ticket-workspace-v2 .manager-ticket-filter select {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.ticket-v2-related-row > strong,
.ticket-v2-related-row span {
  color: var(--text-secondary) !important;
}

.ticket-v2-side-panel .eyebrow,
.ticket-workspace-info .eyebrow {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   11b. Ticket detail: page flow instead of nested scroll panes

   The workspace was a viewport-bound shell with four independent scrolling
   regions (list, detail main, info rail, tab strip). Nested scrollbars make it
   hard to tell how much content there is or where you are in it. The detail
   side now flows at its natural height and the page scrolls once, with each
   region drawn as a bordered block so the structure stays legible.

   The ticket list keeps its own scroll — it is a navigator, not part of the
   record — but is bounded and sticks alongside the detail as the page scrolls.
   -------------------------------------------------------------------------- */

/* The tickets page was the only screen that locked the whole shell to the
   viewport: `body:has(.ticket-workspace-v2)` set overflow:hidden on the body,
   .main and #content, so the page itself could never scroll and anything taller
   than the viewport was clipped outright. Release it so tickets scroll like
   every other module. */
body:has(.ticket-workspace-v2) {
  overflow: visible !important;
}

body:has(.ticket-workspace-v2) .main {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

body:has(.ticket-workspace-v2) #content {
  display: block !important;
  flex: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.ticket-workspace.ticket-workspace-v2 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: start;
  background: transparent !important;
  border: 0 !important;
  gap: 14px;
}

.ticket-workspace-detail-panel,
.ticket-v2-detail-layout,
.ticket-v2-main,
.ticket-workspace-detail-body,
.ticket-v2-body,
.ticket-v2-side-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ticket-workspace-detail-panel {
  border: 0 !important;
  background: transparent !important;
}

.ticket-v2-detail-layout {
  align-items: start;
  gap: 14px;
}

/* Detail column reads as one page: header, tabs, then content blocks. */
.ticket-v2-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-elevated) !important;
}

.ticket-v2-head {
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

.ticket-v2-tabs {
  overflow: visible !important;
  flex-wrap: wrap;
}

.ticket-v2-body {
  padding: 0 !important;
}

/* Each content block gets its own frame. */
.ticket-conversation,
.ticket-overview-section,
.ticket-details-section,
.ticket-v2-summary-card {
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
}

/* Info rail: one frame, sections separated by rules. */
.ticket-v2-side-panel {
  display: grid;
  align-content: start;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-elevated) !important;
}

.ticket-v2-side-panel > section {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}

.ticket-v2-side-panel > section:last-child {
  border-bottom: 0 !important;
}

/* Navigator stays bounded and follows the page. */
.ticket-workspace-list-panel {
  height: auto !important;
  max-height: none !important;
  position: sticky;
  /* clears the sticky topbar */
  top: 84px;
  align-self: start;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-elevated) !important;
  overflow: hidden;
}

body.rtl .ticket-workspace-list-panel {
  border: 1px solid var(--border) !important;
}

.ticket-workspace-list {
  max-height: min(60vh, 620px);
  overflow-y: auto !important;
}

@media (max-width: 1100px) {
  /* Stacked columns: sticking the list would hide the record. */
  .ticket-workspace-list-panel {
    position: static;
  }
  .ticket-workspace-list {
    max-height: 420px;
  }
}

/* --------------------------------------------------------------------------
   12. Dashboard
   -------------------------------------------------------------------------- */

/* Below 1280px the base stylesheet absolutely positions .hero-actions over the
   copy and reserves room with a physical `padding-right: 190px`. The reserved
   gutter is narrower than the buttons, so they overlapped the heading in LTR —
   and in RTL the gutter is on the wrong side entirely. Keep the actions in
   normal flow as a grid item so the track sizes itself and mirrors correctly. */
.hero-command {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 20px !important;
  padding: 22px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 8%, var(--surface-elevated)),
    var(--surface-elevated) 62%) !important;
  box-shadow: var(--shadow-xs) !important;
}

.hero-command .hero-actions {
  position: static !important;
  inset: auto !important;
  justify-self: end;
  align-self: center;
}

.hero-command h2,
.hero-command h1 {
  color: var(--text-primary);
  font-size: var(--text-2xl) !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15;
}

.hero-command p {
  margin-top: 6px !important;
  color: var(--text-secondary);
  font-size: var(--text-base);
  max-width: 62ch;
}

.hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Six tiles: fixed column counts keep them in even rows instead of orphaning
   the last card on its own line. */
.command-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 900px) {
  .command-priority-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1320px) {
  .command-priority-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Flat cards with a single tinted accent read faster than full pastel fills. */
.command-priority-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  padding: 15px 16px !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-xs) !important;
}

.command-priority-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tone, var(--border-strong));
}

.command-priority-card.tone-danger { --tone: var(--danger); }
.command-priority-card.tone-warning { --tone: var(--warning); }
.command-priority-card.tone-success { --tone: var(--success); }
.command-priority-card.tone-info { --tone: var(--info); }

.command-priority-card strong,
.command-priority-card .metric-value {
  color: var(--text-primary);
  font-size: var(--text-2xl) !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.command-priority-card > span,
.command-priority-card small {
  color: var(--text-secondary);
  font-size: var(--text-sm) !important;
  font-weight: 600;
}

.command-priority-card small:last-child {
  color: var(--text-muted);
  font-size: var(--text-xs) !important;
  font-weight: 500;
}

.command-priority-card .record-icon,
.command-priority-card svg {
  color: var(--tone, var(--text-muted));
}

.command-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.command-attention-lane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
  overflow: hidden;
}

.command-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 640;
}

.command-lane-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px !important;
}

.command-queue-item {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-elevated) !important;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}

body.rtl .command-queue-item {
  text-align: right;
}

.command-queue-item:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-hover) !important;
}

.command-queue-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--surface-sunken) !important;
  color: var(--text-secondary);
}

.command-queue-item.tone-danger .command-queue-icon {
  background: var(--danger-soft) !important;
  color: var(--danger);
}

.command-queue-item.tone-warning .command-queue-icon {
  background: var(--warning-soft) !important;
  color: var(--warning);
}

.command-queue-item.tone-info .command-queue-icon {
  background: var(--info-soft) !important;
  color: var(--info);
}

.command-queue-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.command-queue-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-queue-copy small,
.command-queue-copy span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.command-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.command-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.command-quick-action:hover {
  border-color: var(--primary) !important;
  background: var(--primary-soft) !important;
}

.dashboard-activity-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.dashboard-activity-card:last-child {
  border-bottom: 0 !important;
}

.activity-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: var(--r-full);
  background: var(--primary);
}

.dashboard-activity-copy strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.dashboard-activity-copy small,
.dashboard-activity-copy span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   13. Modals, menus, toasts
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #05070c 52%, transparent) !important;
  backdrop-filter: blur(3px);
}

.modal {
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal.large {
  width: min(880px, 100%);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 {
  color: var(--text-primary);
  font-size: var(--text-lg) !important;
  font-weight: 660 !important;
  letter-spacing: -0.015em;
}

.modal-fields {
  display: grid;
  gap: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

#menuHost .menu,
.floating-menu,
.search-menu,
.notifications-menu {
  padding: 7px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: var(--r-xs) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: 550 !important;
  text-align: left;
}

body.rtl .menu-item {
  text-align: right;
}

.menu-item:hover {
  background: var(--surface-hover) !important;
}

.menu-item small {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 450;
}

.toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.rtl .toast-host {
  right: auto;
  left: 18px;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}

.toast strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 640;
}

.toast small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   14. Empty states + skeleton
   -------------------------------------------------------------------------- */

.empty-state,
.compact-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 34px 20px !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-sunken) !important;
  color: var(--text-secondary);
  text-align: center;
}

.empty-state strong {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 620;
}

.empty-state small,
.compact-empty small {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.skeleton {
  display: grid;
  gap: 11px;
  padding: 22px;
}

.skeleton-line {
  height: 13px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg,
    var(--surface-hover) 25%,
    color-mix(in srgb, var(--border) 60%, var(--surface-hover)) 37%,
    var(--surface-hover) 63%);
  background-size: 400% 100%;
  animation: itcc-shimmer 1.3s ease infinite;
}

@keyframes itcc-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
   15. Login
   -------------------------------------------------------------------------- */

.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
    var(--bg-primary) !important;
}

.login-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 0 !important;
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-lg) !important;
}

.login-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: auto !important;
  padding: 42px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-right: 1px solid var(--border) !important;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface-elevated)),
    var(--surface-elevated) 70%);
}

body.rtl .login-copy {
  border-right: 0 !important;
  border-left: 1px solid var(--border) !important;
}

.login-copy h1 {
  color: var(--text-primary);
  font-size: var(--text-2xl) !important;
  font-weight: 690 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15;
}

.login-copy .muted {
  font-size: var(--text-base);
  max-width: 42ch;
}

.product-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--primary), color-mix(in srgb, var(--primary) 58%, #10225c));
  color: #fff;
  font-size: var(--text-md);
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}

.login-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.login-pills span {
  padding: 5px 11px;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-full) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* The decorative grid block below the pills read as a broken image. */
.login-copy::after {
  display: none !important;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  padding: 42px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface-elevated) !important;
  box-shadow: none !important;
}

.auth-card h2 {
  color: var(--text-primary);
  font-size: var(--text-lg) !important;
  font-weight: 660 !important;
  letter-spacing: -0.015em;
}

.auth-card .hint {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.auth-splash {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--bg-primary);
}

.auth-splash-card {
  display: grid;
  justify-items: center;
  gap: 11px;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   15b. Right-to-left corrections
   -------------------------------------------------------------------------- */

/* Native date/time/number pickers render their own segmented placeholder. In an
   RTL container Chromium reverses it ("ةنس/رهش/موي"), so pin these controls to
   LTR while keeping them aligned to the start of the field. */
body.rtl input[type="date"],
body.rtl input[type="datetime-local"],
body.rtl input[type="time"],
body.rtl input[type="month"],
body.rtl input[type="number"],
body.rtl input[type="tel"],
body.rtl input[type="url"],
body.rtl input[type="email"] {
  direction: ltr;
  text-align: right;
}

body.rtl input[type="date"]::-webkit-calendar-picker-indicator,
body.rtl input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Labels keep their required marker on the same line. */
.field-label-text,
.modern-select-field > span:first-child {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 570;
}

.field-label-text .required {
  display: inline;
  width: auto;
}

/* Any string still in English inside an RTL page would otherwise have its
   trailing period pushed to the left (".Create the request"). Letting each run
   of text pick its own base direction keeps punctuation attached correctly, in
   both languages. */
body.rtl .muted,
body.rtl .hint,
body.rtl .field-help,
body.rtl .modal p,
body.rtl .section-title p,
body.rtl small,
body.rtl figcaption {
  unicode-bidi: plaintext;
}

body.rtl .modal-actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

body.rtl .modal-head {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   16. Motion + responsive
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1200px) {
  :root { --shell-sidebar: 224px; }
  .topbar-row { grid-template-columns: minmax(160px, 1fr) minmax(200px, 1fr) auto !important; }
}

@media (max-width: 980px) {
  /* Single column: the rail stacks above the content, matching the layout
     styles.css already defines (there is no drawer toggle to fall back on). */
  .app {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: relative !important;
    height: auto;
    overflow: visible;
    border-right: 0 !important;
    border-bottom: 1px solid var(--shell-border) !important;
  }
  body.rtl .sidebar {
    border-left: 0 !important;
    border-bottom: 1px solid var(--shell-border) !important;
  }
  .sidebar-inner {
    display: block;
  }
  #nav {
    max-height: 320px;
  }
  .sidebar-footer {
    margin-top: 12px;
  }
  .topbar-row {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  .global-search { display: none !important; }
  .login-panel { grid-template-columns: 1fr; }
  .login-copy {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding: 30px 26px !important;
  }
  .auth-card { padding: 30px 26px !important; }
  #content { padding: 16px 14px 32px; }
}

@media (max-width: 720px) {
  /* Stack the header so the page title keeps a full line of its own. */
  .topbar-row {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  #pageTitle {
    font-size: var(--text-lg) !important;
    white-space: normal;
  }
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .profile-button > span:not(.avatar) { display: none; }
  .collection-grid { grid-template-columns: 1fr; }

  /* Not enough width for a side-by-side track; stack copy above the actions. */
  .hero-command {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 14px !important;
    padding: 18px !important;
  }
  .hero-command .hero-actions {
    justify-self: stretch;
  }
  .hero-command h1,
  .hero-command h2 {
    font-size: var(--text-xl) !important;
  }
  .modal-backdrop { padding: 12px; }
  .modal { padding: 16px !important; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Company branding on the sign-in screen
   -------------------------------------------------------------------------- */

/* The HQ building sits behind the copy panel. A gradient scrim keeps the text
   readable regardless of how bright the photograph is. */
.login-copy {
  position: relative;
  gap: 20px !important;
  padding: 52px 46px !important;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, #0a2a5e 88%, transparent),
      color-mix(in srgb, #06122c 92%, transparent) 70%),
    url("/brand/hq-building.jpg") center / cover no-repeat !important;
}

.login-copy > * {
  position: relative;
  z-index: 1;
}

.login-copy h1,
.login-copy .company-name,
.login-copy .muted,
.login-copy .eyebrow {
  color: #ffffff !important;
}

.login-copy .muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* The mark is a transparent PNG, so it needs no plate behind it. */
.login-copy .product-mark {
  width: 72px;
  height: 72px;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain;
}

.company-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.company-name span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

.login-copy h1 {
  font-size: 19px !important;
  font-weight: 600 !important;
  opacity: 0.95;
}

.login-pills span {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Breathing room between the actions, which were previously stacked tightly. */
.auth-card {
  gap: 18px !important;
  padding: 46px 42px !important;
}

.auth-card .btn {
  min-height: 46px !important;
  margin-top: 6px;
  font-size: var(--text-md) !important;
}

.auth-card label {
  margin-bottom: 2px;
}

.auth-card .hint {
  margin-top: 10px;
  line-height: 1.6;
}

.auth-link {
  margin-top: 18px !important;
}

/* The mark used in the sidebar and the loading splash. */
.brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}

.auth-splash-card .brand-mark {
  width: 48px;
  height: 48px;
}

@media (max-width: 900px) {
  .login-copy {
    padding: 34px 26px !important;
  }

  .auth-card {
    padding: 32px 26px !important;
  }
}

/* --------------------------------------------------------------------------
   Interface refinements
   -------------------------------------------------------------------------- */

/* The search field stretched to 520px on every page, which made it the loudest
   thing in the header. It is a utility, so it now takes the width it needs and
   grows only on focus. */
.topbar-row {
  grid-template-columns: minmax(200px, 1fr) auto auto !important;
}

.global-search {
  /* Was min(520px, 48vw), which made a utility the widest thing in the header.
     A fixed, modest width reads as a tool rather than a headline. Expanding it on
     focus was tried and dropped: the grid track will not grow, so it half-worked. */
  width: 260px !important;
  min-height: 36px;
}

@media (max-width: 1200px) {
  .global-search { width: 210px !important; }
}

@media (max-width: 900px) {
  .topbar-row {
    grid-template-columns: 1fr auto !important;
  }
  .global-search {
    grid-column: 1 / -1;
    width: 100% !important;
  }
}

/* Sign-in: give the primary action room to breathe and sit lower than the field. */
.auth-card [data-login-step] {
  display: grid;
  gap: 18px;
}

.auth-card [data-login-step] .btn {
  margin-top: 10px !important;
}

.auth-card label {
  display: grid;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-secondary);
}

.auth-card input {
  min-height: 44px !important;
  font-size: var(--text-md) !important;
}

/* Softer, less boxy cards, and a clearer hover so rows feel interactive. */
.surface-card {
  border-radius: var(--r-lg) !important;
}

.record-card:hover,
.list-item:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border)) !important;
}

/* Primary actions carry a little more weight so the next step is obvious. */
.btn.btn-primary {
  font-weight: 650;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 32%, transparent);
}

.btn.btn-primary:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 38%, transparent);
}

/* Section headings were competing with body text for attention. */
.section-title h3 {
  letter-spacing: -0.015em;
}

.section-title .eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--text-2xs);
  opacity: 0.9;
}

/* Appearance settings: real choices rather than read-only cards. */
.appearance-options {
  display: grid;
  gap: 22px;
  max-width: 620px;
}

.appearance-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.appearance-group legend {
  padding: 0 0 9px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
}

.appearance-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.appearance-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  background: var(--surface-elevated);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.appearance-choice svg {
  width: 17px;
  height: 17px;
}

.appearance-choice:hover {
  border-color: var(--primary);
}

.appearance-choice.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Temporary password handover: shown once, so it must be easy to read aloud. */
.temp-password-card {
  width: min(460px, 100%);
  text-align: center;
}

.temp-password-value {
  margin: 16px 0 8px;
  padding: 16px;
  border: 1px dashed var(--field-border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Ticket sent: a paper aeroplane leaves the screen
   -------------------------------------------------------------------------- */

.ticket-sent-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Decoration only - it must never intercept a click. */
  pointer-events: none;
  display: grid;
  place-items: center;
}

.ticket-sent-plane {
  width: 76px;
  height: 76px;
  color: var(--primary);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--primary) 45%, transparent));
  transform-origin: 50% 50%;
  animation: ticket-plane-fly 1.15s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

/* A short vapour trail that fades as the plane pulls away. */
.ticket-sent-trail {
  position: absolute;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 60%, transparent));
  transform-origin: 100% 50%;
  animation: ticket-trail-fade 0.85s ease-out forwards;
}

@keyframes ticket-plane-fly {
  0% {
    transform: translate3d(0, 18px, 0) rotate(-8deg) scale(0.7);
    opacity: 0;
  }
  18% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
    opacity: 1;
  }
  38% {
    /* A small dip, the way a thrown plane settles before it climbs. */
    transform: translate3d(26px, 12px, 0) rotate(4deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(min(62vw, 760px), -58vh, 0) rotate(-24deg) scale(0.32);
    opacity: 0;
  }
}

@keyframes ticket-trail-fade {
  0%   { transform: translate3d(-70px, 6px, 0) scaleX(0); opacity: 0; }
  35%  { transform: translate3d(-40px, 2px, 0) scaleX(1); opacity: 0.65; }
  100% { transform: translate3d(120px, -34vh, 0) scaleX(0.2); opacity: 0; }
}

/* RTL: the plane should fly toward the reading direction. */
body.rtl .ticket-sent-plane {
  animation-name: ticket-plane-fly-rtl;
}

body.rtl .ticket-sent-trail {
  display: none;
}

@keyframes ticket-plane-fly-rtl {
  0% {
    transform: translate3d(0, 18px, 0) rotate(8deg) scaleX(-1) scale(0.7);
    opacity: 0;
  }
  18% {
    transform: translate3d(0, 0, 0) rotate(4deg) scaleX(-1) scale(1);
    opacity: 1;
  }
  38% {
    transform: translate3d(-26px, 12px, 0) rotate(-4deg) scaleX(-1) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(max(-62vw, -760px), -58vh, 0) rotate(24deg) scaleX(-1) scale(0.32);
    opacity: 0;
  }
}

/* Anyone who has asked for reduced motion gets nothing at all. */
@media (prefers-reduced-motion: reduce) {
  .ticket-sent-layer { display: none !important; }
}

/* --------------------------------------------------------------------------
   New ticket arrival - the receiving half of .ticket-sent-*
   The requester's plane flies away when they send; this is where it lands. The
   row then keeps a quiet marker until somebody opens the ticket, so one that
   arrived while nobody was watching is still obvious minutes later.
   -------------------------------------------------------------------------- */

.ticket-arrival-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  /* Decoration only - it must never intercept a click. */
  pointer-events: none;
  overflow: hidden;
}

/* Script positions this at the landing point; the margin centres it there. */
.ticket-arrival-plane {
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  color: var(--primary);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--primary) 45%, transparent));
  animation: ticket-plane-land 1.05s cubic-bezier(0.34, 0.8, 0.3, 1) forwards;
}

@keyframes ticket-plane-land {
  0%   { opacity: 0; transform: translate3d(210px, -200px, 0) rotate(38deg) scale(0.55); }
  20%  { opacity: 1; }
  /* A shallow flare just above the row before it touches down. */
  72%  { opacity: 1; transform: translate3d(40px, -32px, 0) rotate(8deg) scale(1); }
  100% { opacity: 0; transform: translate3d(0, 12px, 0) rotate(-2deg) scale(0.66); }
}

/* RTL: the plane arrives from the side the reader starts on. */
body.rtl .ticket-arrival-plane { animation-name: ticket-plane-land-rtl; }

@keyframes ticket-plane-land-rtl {
  0%   { opacity: 0; transform: translate3d(-210px, -200px, 0) rotate(-38deg) scaleX(-1) scale(0.55); }
  20%  { opacity: 1; }
  72%  { opacity: 1; transform: translate3d(-40px, -32px, 0) rotate(-8deg) scaleX(-1) scale(1); }
  100% { opacity: 0; transform: translate3d(0, 12px, 0) rotate(2deg) scaleX(-1) scale(0.66); }
}

@keyframes ticket-row-arrive {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ticket-row-pulse {
  0%   { box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--primary) 52%, transparent); }
  30%  { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 52%, transparent); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* --- Ticket workspace list item. It is a button, so it carries its own
       shadow. The base rule sets border and background with !important, so
       the marker has to answer in kind. --- */
.ticket-workspace-item.ticket-arrived {
  animation: ticket-row-arrive 0.42s cubic-bezier(0.22, 1, 0.36, 1) both,
             ticket-row-pulse 1s 0.42s ease-out 3;
}

/* :not(.active) so opening a ticket hands it straight back to the selected
   styling rather than leaving both treatments fighting over the same row. */
/* Longhands rather than the border/background shorthands. The base rule for
   these items sets both with !important, and in that fight the shorthand form
   loses its colour even where this selector wins on specificity - the width
   lands and the colour silently stays transparent. */
.ticket-workspace-item.ticket-unseen:not(.active) {
  border-inline-start-width: 3px !important;
  border-inline-start-style: solid !important;
  border-inline-start-color: var(--primary) !important;
  background-color: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)) !important;
}

/* --- Dashboard table row. The pulse rides on the cells, which paint a shadow
       reliably whichever border-collapse the table ends up resolving to. --- */
tr.ticket-arrived {
  animation: ticket-row-arrive 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

tr.ticket-arrived > td {
  animation: ticket-row-pulse 1s 0.42s ease-out 3;
}

tr.ticket-unseen > td {
  background-color: color-mix(in srgb, var(--primary-soft) 55%, transparent) !important;
}

tr.ticket-unseen > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--primary) !important;
}

body.rtl tr.ticket-unseen > td:first-child {
  box-shadow: inset -3px 0 0 0 var(--primary) !important;
}

/* The house rule set by .ticket-sent-layer is that reduced motion gets nothing.
   The marker is information rather than decoration, so it stays - only the
   movement goes. */
@media (prefers-reduced-motion: reduce) {
  .ticket-arrival-layer { display: none !important; }
  .ticket-workspace-item.ticket-arrived,
  tr.ticket-arrived,
  tr.ticket-arrived > td { animation: none !important; }
}

/* ==========================================================================
   Vibrancy and motion layer

   Added on request for a more intense, more animated interface. Two rules held
   throughout: every colour it leans on was measured against WCAG AA before
   being adopted, and all of it yields to prefers-reduced-motion.
   ========================================================================== */

/* --- gradient accents ---------------------------------------------------
   background-image, not background: the base rule sets the shorthand with
   !important, which resets background-image to none and would silently kill
   any gradient declared the obvious way. */
.btn-primary {
  background-image: linear-gradient(135deg, var(--primary) 0%,
    color-mix(in srgb, var(--primary) 72%, var(--info)) 100%) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 32%, transparent);
  transition: box-shadow .2s ease, transform .12s ease, filter .2s ease;
}

.btn-primary:hover {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 46%, transparent);
  filter: saturate(1.18);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.995);
}

/* --- staggered page reveal ----------------------------------------------
   #content is replaced wholesale on every render, so this plays once per page
   change. Deliberately capped: staggering a 500-row list would look broken and
   cost far more than the effect is worth. */
@keyframes itcc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

#content > * {
  animation: itcc-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#content > *:nth-child(2) { animation-delay: 25ms; }
#content > *:nth-child(3) { animation-delay: 50ms; }
#content > *:nth-child(4) { animation-delay: 75ms; }
#content > *:nth-child(5) { animation-delay: 95ms; }
#content > *:nth-child(6) { animation-delay: 110ms; }
#content > *:nth-child(n+7) { animation-delay: 120ms; }

/* Rows earn a lighter, quicker version of the same move. */
@keyframes itcc-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ticket-workspace-list > *:nth-child(-n+10),
.dashboard-ticket-table tbody tr:nth-child(-n+10) {
  animation: itcc-row-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ticket-workspace-list > *:nth-child(2),
.dashboard-ticket-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.ticket-workspace-list > *:nth-child(3),
.dashboard-ticket-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.ticket-workspace-list > *:nth-child(4),
.dashboard-ticket-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.ticket-workspace-list > *:nth-child(5),
.dashboard-ticket-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.ticket-workspace-list > *:nth-child(6),
.dashboard-ticket-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.ticket-workspace-list > *:nth-child(n+7),
.dashboard-ticket-table tbody tr:nth-child(n+7) { animation-delay: 175ms; }

/* --- surfaces lift on hover --------------------------------------------- */
.surface-card {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.surface-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 13%, transparent),
              0 2px 8px rgba(0, 0, 0, 0.06);
}

/* --- critical work announces itself -------------------------------------
   Severity you can read before you read the label. Slow on purpose: a fast
   blink on a queue screen is unbearable within a minute. */
@keyframes itcc-critical-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 40%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 0%, transparent); }
}

.badge.danger,
.badge.critical {
  animation: itcc-critical-breathe 2.6s ease-out infinite;
}

/* --- the arrival plane now lands with a ripple --------------------------- */
.ticket-arrival-ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: var(--r-full);
  border: 2px solid var(--primary);
  opacity: 0;
  /* Must finish before the plane's 1.05s animation ends: animationend bubbles
     from the child and tears the whole layer down on the first one to fire. */
  animation: itcc-land-ripple 0.44s 0.56s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes itcc-land-ripple {
  0%   { opacity: 0.85; transform: scale(0.3); }
  100% { opacity: 0;    transform: scale(6); }
}

/* --- everything above is decoration, so reduced motion opts out entirely -- */
@media (prefers-reduced-motion: reduce) {
  #content > *,
  .ticket-workspace-list > *,
  .dashboard-ticket-table tbody tr,
  .badge.danger,
  .badge.critical,
  .ticket-arrival-ripple {
    animation: none !important;
  }
  .surface-card,
  .btn-primary { transition: none !important; }
  .surface-card:hover { transform: none !important; }
}

/* --- palette ownership ---------------------------------------------------
   styles.css sets this same palette on `body.dark`, at two different points
   in its history. A custom property declared on <body> beats one declared on
   :root for every element inside body, regardless of specificity or which
   file loaded last, because the nearest ancestor wins. Without this block,
   7 of the 13 dark tokens below never reach the page - and the contrast
   auditor, which reads only the :root blocks, reports on values that are
   not the ones being rendered.

   Mirrored from :root[data-theme="dark"] above; keep the two in step.
   -------------------------------------------------------------------------- */
body.dark {
  --bg-primary: #05070e;
  --bg-secondary: #0b101b;
  --surface-elevated: #161d2b;
  --surface: #161d2b;
  --surface-hover: #1f2839;
  --surface-sunken: #0d131e;
  --border: #262f3f;
  --border-strong: #374256;
  --field-border: #66738b;
  --text-primary: #f2f6fc;
  --text-secondary: #bcc7d8;
  --text-muted: #8b96a9;
  --primary: #6f9dff;
  --primary-hover: #8fb4ff;
  --primary-contrast: #08121f;
  --success: #31e39b;
  --warning: #ffc247;
  --danger: #ff6b7d;
  --info: #3ec9ff;
  --focus: #6f9dff;
  --primary-soft: #17264a;
  --success-soft: #0d2f22;
  --warning-soft: #33260f;
  --danger-soft: #3a1620;
  --info-soft: #0c2839;
  --shell-bg: #0c111a;
  --shell-ink: #eef2f8;
  --shell-muted: #8b96a8;
  --shell-border: #1f2735;
  --shell-hover: #161d29;
  --shell-active-bg: #17253f;
  --shell-active-ink: #a8c4ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.62);
}

/* --------------------------------------------------------------------------
   Password reveal toggle
   The input is wrapped so the button can sit inside the field. .password-field
   has to behave like the input it replaced in the label's layout, hence the
   block/full-width treatment.
   -------------------------------------------------------------------------- */
.password-field {
  position: relative;
  display: block;
  width: 100%;
}

/* Specificity has to match the base field rule, which sets
   `padding: 7px 11px !important` at (0,2,1) via its two :not() clauses. A plain
   .password-field > input is (0,1,1) and loses, leaving revealed text to run
   underneath the button. */
.password-field > input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  /* Room for the button so revealed text never runs underneath it. Marked
     important because the base field rules set padding the same way. */
  padding-inline-end: 40px !important;
}

.password-toggle {
  position: absolute;
  inset-inline-end: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.password-toggle:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Revealed is a state worth seeing at a glance, not just hearing. */
.password-toggle[aria-pressed="true"] {
  color: var(--primary);
}

.password-toggle-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}

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

/* --------------------------------------------------------------------------
   Mobile navigation drawer

   Below 900px the sidebar kept its grid column and stacked above the content,
   so every page began with the whole navigation and the list was clipped part
   way down. It becomes an off-canvas drawer instead.
   -------------------------------------------------------------------------- */

/* Desktop: no toggle, no scrim. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  .app {
    /* One column: the sidebar leaves the flow entirely. */
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
  }
  .nav-toggle svg { width: 19px; height: 19px; }
  .nav-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(84vw, 320px) !important;
    max-width: none !important;
    z-index: 200;
    overflow-y: auto;
    /* Off-canvas until opened. translate rather than display so it animates and
       stays reachable by assistive tech. */
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
  }

  /* RTL: the drawer belongs on the side the reader starts from. */
  body.rtl .sidebar { transform: translateX(100%); }

  body.nav-open .sidebar { transform: none; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(4, 7, 14, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* The page heading was clipping to unreadable stubs ("Com... Center").
     Let it use the full row and wrap instead. */
  .topbar-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
  }
  .page-context {
    min-width: 0;
    grid-column: 2;
  }

  /* Both of these must span the row. Left to auto-placement they land in
     column 1, which then sizes itself to the widest of them - squeezing the
     page title into whatever is left (54px, in practice). */
  .global-search,
  .top-actions {
    grid-column: 1 / -1 !important;
  }

  .top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }
  .page-context h2,
  #pageTitle {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: var(--text-lg) !important;
    line-height: 1.25;
  }
  .breadcrumbs {
    white-space: normal !important;
    overflow: visible !important;
  }

  /* The nav is given a fixed height on desktop so it scrolls inside a fixed
     shell. In a drawer that hides half the modules behind an inner scrollbar
     nobody can see - let it size to its content and scroll the drawer instead. */
  .sidebar-inner {
    height: auto !important;
    min-height: 100%;
  }

  #nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* Body scroll would otherwise continue behind the open drawer. */
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
  .nav-scrim { transition: none !important; }
}

/* ==========================================================================
   Sign-in screen

   Single centred column: the brand above, the form in one card, a quiet
   footer. The company building sits behind, held back only where text falls
   outside the card — the card is opaque, so the photo cannot hurt its
   legibility. Deliberately restrained: this screen has one job.
   ========================================================================== */

.signin {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--bg-primary);
}

.signin-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.signin-photo {
  position: absolute;
  inset: 0;
  background: url("/brand/hq-building.jpg") center 38% / cover no-repeat;
  /* Recognisably the building; soft enough that it never competes with the
     form. Scaled slightly so the blur leaves no soft edge at the frame. */
  filter: blur(5px) saturate(0.92) brightness(0.74) contrast(1.04);
  transform: scale(1.08);
}

.signin-scrim {
  position: absolute;
  inset: 0;
  background:
    /* only behind the brand lockup and the footer, which sit on the photo */
    linear-gradient(180deg, rgba(5, 8, 14, 0.66) 0%, rgba(5, 8, 14, 0.10) 26%, transparent 44%),
    linear-gradient(0deg,   rgba(5, 8, 14, 0.72) 0%, rgba(5, 8, 14, 0.12) 22%, transparent 38%),
    radial-gradient(1200px 820px at 50% 46%, transparent 34%, rgba(5, 8, 14, 0.52) 92%),
    linear-gradient(180deg, rgba(24, 44, 110, 0.20), rgba(10, 16, 34, 0.16));
}

.signin-bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 50% -6%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 68%),
    radial-gradient(620px 520px at 88% 108%, color-mix(in srgb, var(--info) 12%, transparent), transparent 66%);
}

.signin-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 48px 24px 24px;
}

.signin-col { width: 100%; max-width: 436px; }

/* --- brand lockup ------------------------------------------------------- */
.signin-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
  /* The crop can put this over bright sky; the shadow keeps it readable. */
  text-shadow: 0 1px 12px rgba(4, 8, 18, 0.75);
}
.signin-brand img { display: block; width: 40px; height: 40px; }
.signin-brand > div { text-align: left; }
body.rtl .signin-brand > div { text-align: right; }

.signin-brand-ar {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}
.signin-brand-en {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* --- the card ----------------------------------------------------------- */
.signin-card {
  display: block;
  background: linear-gradient(180deg, #161c28, #10151f);
  border: 1px solid #232c3d;
  border-radius: var(--r-lg);
  padding: 34px 32px 28px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.signin-card h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f3f6fb;
}
.signin-card .signin-lede {
  margin: 8px 0 26px;
  font-size: 14px;
  line-height: 1.55;
  color: #9fabbf;
}

.signin-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9fabbf;
}

.signin-card input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  height: 52px !important;
  margin-top: 8px;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  color: #f3f6fb !important;
  background: #0b1018 !important;
  border: 1px solid #232c3d !important;
  border-radius: var(--r-md) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.signin-card input:not([type="checkbox"]):not([type="radio"])::placeholder { color: #6d7a8f; }
.signin-card input:not([type="checkbox"]):not([type="radio"]):hover { border-color: #2e3a50 !important; }
.signin-card input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--primary) !important;
  background: #0d131d !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  outline: none;
}

/* The password field wraps its input, so the reveal button needs room. */
.signin-card .password-field > input:not([type="checkbox"]):not([type="radio"]) {
  padding-inline-end: 46px !important;
}

.signin-card .btn {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border-radius: var(--r-md) !important;
  font-size: 14.5px;
  font-weight: 600;
}

.signin-card .btn-primary {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 78%, #ffffff),
    var(--primary)) !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--primary) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* The alternative route is a real button, not a link buried under a hint. */
.signin-alt {
  background: transparent !important;
  border: 1px solid #232c3d !important;
  color: #f3f6fb !important;
}
.signin-alt:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: #2e3a50 !important;
}

.signin-card .hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6d7a8f;
}

.signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  color: #6d7a8f;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signin-or::before,
.signin-or::after { content: ""; flex: 1; height: 1px; background: #1a2231; }

.signin-card .form-error:not([hidden]) {
  display: block;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  color: var(--danger);
}

/* --- language switch ---------------------------------------------------- */
.signin-lang { display: flex; justify-content: center; margin-top: 20px; }
.signin-lang-inner {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-full);
  background: rgba(10, 15, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.signin-lang button {
  padding: 6px 15px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.signin-lang button.on {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* --- footer ------------------------------------------------------------- */
.signin-foot {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 18px 24px 28px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 10px rgba(4, 8, 18, 0.7);
}

@media (max-width: 520px) {
  .signin-stage { padding: 30px 18px 18px; }
  .signin-card { padding: 28px 20px 24px; }
  .signin-card h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-card input,
  .signin-card .btn { transition: none !important; }
}

/* ==========================================================================
   Theme switching

   Present on <html> only while the theme is actually changing, then removed.
   !important is load-bearing: without it every element that declares its own
   `transition` keeps its own duration and the page re-colours in waves at
   120ms, 140ms, 160ms and 250ms, which is what looked like flickering.

   Longhands rather than the shorthand, so `transition-delay` on an element
   cannot survive and start its share of the change late.

   Only the three properties that actually differ between the themes are
   animated. box-shadow, fill and stroke are left out on purpose: shadows are
   the most expensive thing to animate across a whole page, and icons take
   their colour from currentColor, so they follow `color` already.
   ========================================================================== */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-property: background-color, color, border-color !important;
  transition-duration: 220ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-delay: 0s !important;
}

/* Nothing should move for someone who asked for less motion; the theme still
   changes, it just arrives in one frame. */
@media (prefers-reduced-motion: reduce) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition-duration: 0s !important;
  }
}

/* The whole-page cross-fade used when the theme changes. The default is 250ms
   with a slight ease; this matches it to the rest of the interface and keeps
   the two snapshots on one curve. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}