/* ==========================================================================
   enterprise.kolwrite.com — the portal's own layer on the shared design kit
   --------------------------------------------------------------------------
   This file is always the LAST stylesheet in <head>. Everything above it is
   either the shared kit (assets/kit/*, generated by scripts/sync_kit.js) or
   the portal's legacy sheets (themify-icons.css, admin_styles.css on the eight
   signed-in pages, enterprise_landing.css on index/login). The legacy sheets
   stay in place so that no shipped script, id, class or data attribute has to
   change; this layer restyles what they paint.

   Three jobs, in order:

     1. Re-points the legacy custom properties at kit tokens. Both sheets are
        variable-driven (admin_styles.css declares 42 properties and reads them
        736 times), so a remap restyles nearly every legacy rule for free.
        The `-light` and `-dark` families BOTH point at the same theme-aware
        kit token, which is what fixes the pre-existing bug where rules that
        used a `*-light` variable unconditionally (`.lang-dropdown`,
        `.group-card`, `.member-card-mobile`, `.filter-dropdown-content` and
        about thirty more) stayed paper-white in dark mode.
     2. Neutralises the legacy declarations that fight the house rules:
        nineteen gradients in admin_styles.css and nine in
        enterprise_landing.css, twelve `backdrop-filter` glass surfaces, the
        decorative particle, and the silver-blue primaries.
     3. Restyles the portal's own furniture — the sidebar that is this
        property's navigation, metric cards, widgets, tables, modals, toasts,
        badges, forms — as flat kit surfaces, and adds the two chrome pieces
        the kit does not ship: the signed-in navigation rail and the
        accessibility panel's option states.

   House rules: one hairline, one shadow, amber only on the primary action and
   the live state, no gradient, no glow, no glass. Light is warm paper, dark is
   charcoal, both first-class.

   Themes come from html[data-theme] (the kit). body[data-theme] and the
   legacy `kolwriteTheme` key are kept in sync by js/enterprise_chrome.js
   because admin_console.js and the Chart.js callers read them.
   ========================================================================== */

/* ==========================================================================
   1. Legacy variables, re-pointed at kit tokens
   --------------------------------------------------------------------------
   Declared on :root AND on both explicit themes so this wins over the legacy
   `[data-theme="light"]` / `[data-theme="dark"]` blocks in
   enterprise_landing.css whatever the source order. Declaring it on bare
   :root also matters: when the preference is "system" the kit removes the
   attribute entirely, and the landing sheet's variables would otherwise be
   undefined.
   ========================================================================== */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* --- css/admin_styles.css ------------------------------------------- */
  --primary-color: var(--kol-accent);
  --primary-hover: var(--kol-accent-hover);
  --primary-light: var(--kol-accent);
  --secondary-color: var(--kol-ink-muted);
  --accent-color: var(--kol-accent);

  /* Status: one ink, one amber, one red. No green/blue status palette. */
  --success-color: var(--kol-ink);
  --warning-color: var(--kol-accent);
  --error-color: #b3261e;
  --info-color: var(--kol-ink-muted);

  /* Both families resolve to the same theme-aware token. */
  --bg-color-light: var(--kol-paper);
  --bg-color-dark: var(--kol-paper);
  --bg-secondary-light: var(--kol-surface);
  --bg-secondary-dark: var(--kol-surface);
  --bg-tertiary-light: var(--kol-sunk);
  --bg-tertiary-dark: var(--kol-sunk);
  --text-color-light: var(--kol-ink);
  --text-color-dark: var(--kol-ink);
  --text-secondary-light: var(--kol-ink-muted);
  --text-secondary-dark: var(--kol-ink-muted);
  --text-muted-light: var(--kol-ink-faint);
  --text-muted-dark: var(--kol-ink-faint);
  --border-color-light: var(--kol-line);
  --border-color-dark: var(--kol-line);
  --card-bg-light: var(--kol-surface);
  --card-bg-dark: var(--kol-surface);
  --sidebar-bg-light: var(--kol-surface);
  --sidebar-bg-dark: var(--kol-surface);
  --sidebar-hover-light: var(--kol-sunk);
  --sidebar-hover-dark: var(--kol-sunk);

  /* One shadow level. The rest collapse to none. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--kol-shadow);
  --shadow-xl: var(--kol-shadow);

  --transition: all var(--kol-motion) var(--kol-ease);
  --transition-slow: all var(--kol-motion) var(--kol-ease);

  --sidebar-width: 264px;
  --sidebar-collapsed-width: 76px;
  --header-height: var(--kol-header-h);
  --border-radius: var(--kol-radius);
  --border-radius-sm: var(--kol-radius-sm);
  --border-radius-lg: var(--kol-radius-lg);

  /* --- css/enterprise_landing.css ------------------------------------- */
  --bg: var(--kol-paper);
  --surface: var(--kol-surface);
  --text: var(--kol-ink);
  --text-secondary: var(--kol-ink-muted);
  --primary: var(--kol-accent);
  --accent: var(--kol-accent);
  --border: var(--kol-line);
  --glass: var(--kol-surface);
  --shadow: none;
  --shadow-lg: var(--kol-shadow);

  --light-bg: var(--kol-paper);
  --light-surface: var(--kol-surface);
  --light-text: var(--kol-ink);
  --light-text-secondary: var(--kol-ink-muted);
  --light-primary: var(--kol-accent);
  --light-primary-hover: var(--kol-accent-hover);
  --light-accent: var(--kol-accent);
  --light-border: var(--kol-line);
  --light-glass: var(--kol-surface);
  --light-shadow: none;
  --light-shadow-lg: var(--kol-shadow);

  --dark-bg: var(--kol-paper);
  --dark-surface: var(--kol-surface);
  --dark-text: var(--kol-ink);
  --dark-text-secondary: var(--kol-ink-muted);
  --dark-primary: var(--kol-accent);
  --dark-primary-hover: var(--kol-accent-hover);
  --dark-accent: var(--kol-accent);
  --dark-border: var(--kol-line);
  --dark-glass: var(--kol-surface);
  --dark-shadow: none;
  --dark-shadow-lg: var(--kol-shadow);

  --font-body: var(--kol-font-sans);
  --font-heading: var(--kol-font-sans);
  --transition-base: var(--kol-motion) var(--kol-ease);
  --transition-smooth: var(--kol-motion) var(--kol-ease);
  --container-width: var(--kol-max);
  --nav-height: var(--kol-header-h);
}

/* enterprise_landing.css declares the six Google families through
   `--font-heading` / `--font-body` and then re-declares them per script with
   `:lang(he)`, `:lang(ar)` and `:lang(ru)`. Those match <body> as well as
   <html> at the same specificity as a bare :root, so the remap has to name the
   same selectors or Hebrew, Arabic and Russian keep Heebo, Almarai and Rubik
   instead of the app's own faces. The kit self-hosts Inter, Assistant and
   Noto Sans Arabic, so no property needs fonts.googleapis.com any more. */
:root,
:lang(he),
:lang(ar),
:lang(ru),
:lang(zh) {
  --font-heading: var(--kol-font-sans);
  --font-body: var(--kol-font-sans);
}

/* ==========================================================================
   2. The page shell
   ========================================================================== */
body,
body[data-theme],
body[data-theme="light"],
body[data-theme="dark"] {
  background-color: var(--kol-paper);
  color: var(--kol-ink);
  font-family: var(--kol-font-sans);
  font-size: var(--kol-text-base);
  line-height: var(--kol-leading);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--kol-font-sans);
  color: var(--kol-ink);
  letter-spacing: var(--kol-tracking-tight);
  line-height: var(--kol-leading-snug);
  font-weight: 600;
}

/* The legacy dark rules dim body copy with opacity; use the token instead so
   the muted step is the measured 6.0:1 one in both themes. */
body[data-theme] .welcome-section p,
body[data-theme] .metric-label,
body[data-theme] .pagination-info,
body[data-theme] .activity-description,
body[data-theme] .member-email,
body[data-theme] .ticket-meta,
body[data-theme] .notification-message,
body[data-theme] .billing-label,
body[data-theme] .summary-label,
body[data-theme] .insight-label,
body[data-theme] .metric-period,
body[data-theme] .integration-info p,
body[data-theme] .setting-details small,
body[data-theme] .form-group small,
body[data-theme] .upload-subtext {
  color: var(--kol-ink-muted);
  opacity: 1;
}

/* ==========================================================================
   3. No gradient, no glass, no particle
   ========================================================================== */
.metric-icon,
.resource-icon,
.entity-icon,
.member-avatar,
.member-avatar-mobile,
.member-item-avatar,
.member-profile-avatar,
.share-avatar,
.integration-icon,
.integration-icon.google,
.team-section-header-mobile,
.section-header,
body[data-theme="light"] .section-header,
body[data-theme="dark"] .section-header,
.brand-main-title,
[data-theme="light"] .brand-main-title,
.hero-title .hero-gradient,
.section-header h2,
.pricing-header h2,
.promo-banner,
.btn-primary {
  background-image: none;
}

/* Icon tiles and avatars are quiet fills with ink, not amber and not blue.
   Amber is reserved for the primary action and the live state. */
.metric-icon,
.resource-icon,
.entity-icon,
.integration-icon {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  box-shadow: none;
}

.member-avatar,
.member-avatar-mobile,
.member-item-avatar,
.member-profile-avatar,
.share-avatar {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
  border: 1px solid var(--kol-line);
  box-shadow: none;
}

.team-section-header-mobile {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
  border: 1px solid var(--kol-line);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* Gradient text is a gradient. */
.brand-main-title,
[data-theme="light"] .brand-main-title,
.hero-title .hero-gradient,
.section-header h2,
.pricing-header h2 {
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--kol-ink);
}

/* Progress and usage fills: flat amber, the one live state. */
.progress-fill,
.usage-fill,
.usage-fill-mobile {
  background-color: var(--kol-accent);
  background-image: none;
}

.usage-fill.warning,
.usage-fill.danger {
  background-color: var(--kol-accent);
  background-image: none;
}

.loading-skeleton,
.loading-skeleton.small {
  background-image: none;
  background-color: var(--kol-sunk);
  border-radius: var(--kol-radius-sm);
}

/* Glass and decoration. */
.glass-card,
.navbar,
.mega-menu-content,
.lang-dropdown,
.mobile-menu,
.promo-banner,
.hero-visual,
.feature-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The legacy landing sheet pairs translucent cards with blur. Once the kit
   removes that blur, keep generic public content cards fully opaque in the
   active theme. The qualified selector also outranks its light-theme rule. */
[data-theme] .glass-card {
  background: var(--kol-surface);
}

/* The landing page's decoration: two 50vw blurred blobs behind everything, a
   drifting particle and a divider glow. All four are house-rule violations. */
.flow-particle,
.section-divider,
.hero-bg,
.blob,
.blob-1,
.blob-2 {
  display: none;
}

/* The hero words faded in one at a time on a 2s stagger; nothing here moves
   for longer than 200ms, and the headline must be readable on the first frame. */
.hero-word {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn,
.btn-sm,
.action-btn,
.auth-button {
  font-family: var(--kol-font-sans);
  font-weight: 600;
  border-radius: var(--kol-radius-sm);
  transition: background-color var(--kol-motion) var(--kol-ease),
    border-color var(--kol-motion) var(--kol-ease), color var(--kol-motion) var(--kol-ease);
  box-shadow: none;
}

.btn-primary,
.auth-button {
  background-color: var(--kol-accent);
  border: 1px solid var(--kol-accent);
  color: var(--kol-accent-ink);
}

.btn-primary:hover,
.auth-button:hover {
  background-color: var(--kol-accent-hover);
  border-color: var(--kol-accent-hover);
  color: var(--kol-accent-ink);
  transform: none;
  box-shadow: none;
}

/* Generic public-navigation link rules appear later in this sheet, while
   admin_styles.css assigns dark page ink directly to every span. Primary
   anchors and their localized descendants must keep the amber control's ink
   in both themes and in every interaction state. */
[data-theme] a.btn-primary,
[data-theme] a.btn-primary:hover {
  color: var(--kol-accent-ink);
}

body[data-theme] .btn-primary span,
body[data-theme] .auth-button span {
  color: inherit;
}

.btn-secondary,
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.action-btn,
.btn-mobile,
.transfer-btn-enhanced {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  color: var(--kol-ink);
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.action-btn:hover,
.btn-mobile:hover,
.transfer-btn-enhanced:hover {
  background-color: var(--kol-sunk);
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
  transform: none;
  box-shadow: none;
}

.btn-danger {
  background-color: transparent;
  border: 1px solid var(--kol-line);
  color: var(--error-color);
}

.btn-danger:hover {
  background-color: var(--kol-sunk);
  border-color: var(--error-color);
}

.member-action-btn {
  border-color: var(--kol-line);
  color: var(--kol-ink-muted);
}

.member-action-btn:hover {
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
  background-color: var(--kol-sunk);
}

/* Legacy sheets declare `transition: all` on several text links. */
body a {
  transition: none !important;
}

/* One static focus ring everywhere: visible, but never a glow or pulse. */
:focus-visible {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
  animation: none;
  transition: none;
}

.mobile-nav-toggle:focus {
  background: var(--kol-surface) !important;
  color: var(--kol-ink) !important;
  border-color: var(--kol-line-strong) !important;
  transform: none !important;
  box-shadow: none;
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ==========================================================================
   5. The signed-in navigation rail
   --------------------------------------------------------------------------
   `.sidebar` is this property's own navigation: Dashboard, Transcriptions,
   Team, Billing, Audit log, Settings, Support, then language, theme,
   accessibility and sign-out. It keeps its markup, ids and the
   toggleSidebar()/toggleMobileNav() handlers; only the paint changes.
   ========================================================================== */
.sidebar {
  background-color: var(--kol-surface);
  border-right: 1px solid var(--kol-line);
  box-shadow: none;
}

[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--kol-line);
}

.sidebar-brand {
  border-bottom: 1px solid var(--kol-line);
  background: none;
}

.brand-name {
  color: var(--kol-ink);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
}

.brand-subtitle {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
}

.sidebar ul {
  padding: var(--kol-space-3) var(--kol-space-3) 0;
}

.sidebar a {
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 500;
  margin: 0 0 2px;
  padding: 10px var(--kol-space-3);
  gap: var(--kol-space-3);
  transition: background-color var(--kol-motion) var(--kol-ease),
    color var(--kol-motion) var(--kol-ease);
}

[dir="rtl"] .sidebar a {
  border-radius: var(--kol-radius-sm);
  margin: 0 0 2px;
}

.sidebar a i {
  width: 18px;
  font-size: 16px;
  color: currentColor;
  margin: 0 var(--kol-space-3) 0 0;
}

[dir="rtl"] .sidebar a i {
  margin: 0 0 0 var(--kol-space-3);
}

.sidebar a:hover {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
  transform: none;
}

/* The current page is the live state, so it is the one amber thing here. */
.sidebar a.active {
  background-color: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--kol-accent);
}

[dir="rtl"] .sidebar a.active {
  box-shadow: inset -2px 0 0 var(--kol-accent);
}

.sidebar-user-info {
  border-top: 1px solid var(--kol-line);
  background-color: var(--kol-sunk);
  margin: var(--kol-space-3);
  border-radius: var(--kol-radius-sm);
  padding: var(--kol-space-3);
}

.user-info-header,
.org-info-header {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.user-name {
  color: var(--kol-ink);
  font-weight: 600;
  font-size: var(--kol-text-sm);
}

.user-email {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
}

/* Language, theme and accessibility on one row at the foot of the rail. */
.toggle-container {
  border-top: 1px solid var(--kol-line);
  padding: var(--kol-space-3);
  gap: var(--kol-space-2);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.toggle-container .lang-dropdown-container {
  flex: none;
}

.sidebar-collapse-btn,
.lang-btn-globe,
.mobile-nav-toggle {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
}

.sidebar-collapse-btn:hover,
.lang-btn-globe:hover,
.mobile-nav-toggle:hover {
  background-color: var(--kol-sunk);
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
}

/* Language menu: flat surface, amber only on the live choice. */
.lang-dropdown {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  box-shadow: var(--kol-shadow);
  padding: var(--kol-space-2);
  gap: 2px;
}

.language-option {
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  padding: 8px var(--kol-space-3);
  cursor: pointer;
  white-space: nowrap;
}

.language-option:hover {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
}

.language-option.active {
  background-color: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-weight: 600;
}

.mobile-overlay {
  background-color: rgba(23, 24, 26, 0.45);
  backdrop-filter: none;
}

/* ==========================================================================
   6. The theme popover and the accessibility panel
   --------------------------------------------------------------------------
   The kit's own components; these rules only place them inside the rail and
   give the accessibility options their pressed state.
   ========================================================================== */
/* The kit already owns .kol-btn, .kol-btn-icon, .kol-pop and .kol-pop-panel,
   including the amber live state. The rail keeps a 44px touch target for all
   three utilities, and its popovers open upward because the tools are pinned
   to the bottom of the viewport. */
.toggle-container .kol-btn-icon {
  min-height: 44px;
  width: 44px;
  border-color: var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
}

.sidebar .toggle-container .lang-btn-globe {
  width: 44px;
  height: 44px;
}

/* The shared kit normally floats #a11y-toggle in the viewport. This instance
   is already a child of the sidebar utility row, so it must participate in
   that flex layout instead of covering content at the reading-direction end. */
.sidebar .toggle-container #a11y-toggle {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: var(--kol-radius-sm);
  box-shadow: none;
}

.toggle-container .kol-pop-panel {
  inset-block-end: calc(100% + var(--kol-space-2));
  inset-block-start: auto;
  inset-inline: 0 auto;
  z-index: 1003;
}

/* Accessibility panel: the kit styles the shell, this gives it its place.
   Scoped to `.enterprise-a11y`, the panel that is static markup on the eight
   signed-in pages. index.html and login.html load js/landing_app.js, which
   builds its own richer `#a11y-toggle`/`#a11y-menu` (it also offers text
   sizing) and opens it with an `.active` class; that one is left alone, and
   the kit's `openAccessibility()` finds it through the same `#a11y-toggle`
   id. */
#a11y-menu.enterprise-a11y {
  position: fixed;
  inset-block-end: var(--kol-space-5);
  inset-inline-end: var(--kol-space-5);
  z-index: 1200;
  display: none;
  width: min(320px, calc(100vw - 2 * var(--kol-gutter)));
  padding: var(--kol-space-4);
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  box-shadow: var(--kol-shadow);
}

#a11y-menu.enterprise-a11y[data-open] {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.a11y-option[aria-pressed="true"] {
  border-color: var(--kol-accent);
  background-color: var(--kol-accent-quiet);
  color: var(--kol-ink);
  font-weight: 600;
}

.a11y-reset {
  margin-top: var(--kol-space-3);
  width: 100%;
  justify-content: center;
}

/* The four accessibility effects. */
html[data-a11y-contrast="on"] {
  --kol-ink-muted: var(--kol-ink);
  --kol-ink-faint: var(--kol-ink);
  --kol-line: var(--kol-ink);
  --kol-line-strong: var(--kol-ink);
}

html[data-a11y-grayscale="on"] body {
  filter: grayscale(1);
}

html[data-a11y-underline="on"] a {
  text-decoration: underline;
}

html[data-a11y-readable="on"] body {
  --kol-font-sans: Verdana, "DejaVu Sans", Tahoma, sans-serif;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   7. Cards, widgets and sections
   ========================================================================== */
.metric-card,
.widget,
.group-card,
.member-card-mobile,
.current-plan-card,
.storage-card,
.analytics-card,
.resource-card,
.settings-section,
.feature-card,
.benefit-card,
.step-card,
.member-stat-card,
.member-selection-card,
.group-list-item,
.share-item,
.integration-item {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  box-shadow: none;
}

.metric-card:hover,
.widget:hover,
.group-card:hover,
.member-card-mobile:hover,
.resource-card:hover,
.feature-card:hover {
  border-color: var(--kol-line-strong);
  transform: none;
  box-shadow: none;
}

.widget-header,
.section-header,
.modal-header {
  border-bottom: 1px solid var(--kol-line);
  background: none;
}

.widget-header h2,
.section-header h2,
.modal-header h3 {
  font-size: var(--kol-text-lg);
  color: var(--kol-ink);
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
  min-width: 0;
  margin: 0;
}

.widget-header h2 i,
.section-header h2 i,
.modal-header h3 i {
  color: var(--kol-ink-faint);
}

/* admin_styles.css paints roughly forty headings, values and states with
   `color: var(--primary-color)`. That variable is now amber, and amber is only
   for the primary action and the live state, so everything that is really text
   goes back to ink. */
.metric-value,
.stat-number,
.summary-value,
.billing-value,
.welcome-section h1,
body[data-theme] .welcome-section h1,
.usage-value,
.plan-name,
.team-stat .stat-number,
.group-stat .stat-value,
.upload-icon,
body[data-theme] .metric-value {
  color: var(--kol-ink);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
}

.welcome-section h1 {
  font-size: var(--kol-text-2xl);
}

/* admin_styles.css repeats the same amber-on-dark list one specificity step
   up (`body[data-theme="dark"] .brand-name` and eleven siblings), so the
   override has to match it rather than rely on source order. */
body[data-theme] .brand-name,
body[data-theme] .section-header h2,
body[data-theme] .plan-name,
body[data-theme] .cost-amount,
body[data-theme] .package-price,
body[data-theme] .usage-value,
body[data-theme] .insight-value,
body[data-theme] .legend-percentage,
body[data-theme] .user-stats .stat-value,
body[data-theme] .team-metrics .metric-value,
body[data-theme] .primary-stat .stat-value {
  color: var(--kol-ink);
}

.user-role,
.clear-all-btn {
  color: var(--kol-ink-muted);
}

/* Selected tabs, filters and cards: the live state, so amber, but as the quiet
   wash with ink on top rather than amber text. */
.tab-button.active,
.member-tab-button.active,
.permission-tab-button.active,
.filter-option.active,
.import-method.active,
.view-toggle-btn.active,
.role-badge.admin,
.role-badge.owner,
.role-badge-mobile.admin,
.role-badge-mobile.owner {
  background-color: var(--kol-accent-quiet);
  border-color: var(--kol-accent);
  color: var(--kol-ink);
}

.tab-button:hover,
.member-tab-button:hover,
.filter-btn:hover,
.btn-icon:hover,
.view-toggle-btn:hover,
.file-upload-area:hover {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
}

.btn-mobile.primary {
  background-color: var(--kol-accent);
  border-color: var(--kol-accent);
  color: var(--kol-accent-ink);
}

/* Decorative icon tiles and counters were amber discs. Amber stays on the
   primary action and the live state (the current nav item, the current page
   in a pager, a switch that is on, a selected row), so these become the quiet
   fill with ink. */
.category-icon,
.contact-icon,
.article-icon,
.stat-icon,
.stat-icon.usage,
.rank-number,
.member-count,
.package-badge,
.entity-icon {
  background: var(--kol-sunk);
  background-image: none;
  border: 1px solid var(--kol-line);
  color: var(--kol-ink);
  box-shadow: none;
}

/* Status chips and the reader's own chat bubble: the wash, not a solid fill. */
.ticket-status.open,
.ticket-status-badge.open,
.message.user,
.user-role {
  background: var(--kol-accent-quiet);
  border: 1px solid var(--kol-accent);
  color: var(--kol-ink);
}

/* The last accent leaks, found by computing every element's colour rather than
   reading the sheets: billing's plan name and its "used" figures, and the
   landing page's menu and step glyphs. Data and glyphs are ink. */
body[data-theme] .plan-info h2,
body[data-theme] .current-plan-card h2,
body[data-theme] h2#current-plan-name,
body[data-theme] .metric-value .used,
body[data-theme] .storage-value .used {
  color: var(--kol-ink);
}

.mobile-sub-icon,
.icon-api-text,
.step-number,
.step-card .step-number,
.feature-icon i,
.service-icon i,
.mega-link i,
.mega-link .mobile-sub-icon,
.nav-links .mobile-sub-icon {
  color: var(--kol-ink);
}

/* Hovers are a quiet fill; only the selected item is amber. */
.page-btn:hover,
.time-btn:hover,
.member-action-btn:hover,
.lang-btn-globe:hover,
.lang-btn-globe[aria-expanded="true"],
.action-btn:hover,
.btn-mobile:hover,
.btn-outline-primary:hover {
  background-color: var(--kol-sunk);
  border-color: var(--kol-line-strong);
  color: var(--kol-ink);
}

.metric-label,
.stat-label {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

/* Movement indicators carry ink, not a second colour. */
.metric-change,
.metric-change.positive,
.metric-change.neutral,
body[data-theme] .metric-change.neutral {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.metric-change.negative,
body[data-theme] .metric-change.negative {
  color: var(--error-color);
}

.progress-bar {
  background-color: var(--kol-sunk);
  border-radius: var(--kol-radius-pill);
  overflow: hidden;
}

.view-all-link,
.template-link {
  color: var(--kol-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   8. Tables
   --------------------------------------------------------------------------
   Wide tables stay inside horizontal scroll containers at every width. Under
   768px they also get a sticky head, keeping the shipped row markup (and the
   JS that writes it) untouched. `.team-table` additionally keeps its existing
   card view, which team_management.js populates through `.mobile-team-cards`.
   ========================================================================== */
.team-table-container,
.tickets-table-container,
.data-table-container,
body[data-theme] .team-table-container,
body[data-theme] .tickets-table-container {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.team-table,
.tickets-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kol-text-sm);
}

.team-table th,
.tickets-table th,
.data-table th,
body[data-theme] .team-table th,
body[data-theme] .tickets-table th {
  background-color: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
  text-align: start;
  padding: var(--kol-space-3) var(--kol-space-4);
  border-bottom: 1px solid var(--kol-line);
}

.team-table td,
.tickets-table td,
.data-table td,
body[data-theme] .team-table td,
body[data-theme] .tickets-table td {
  color: var(--kol-ink);
  padding: var(--kol-space-3) var(--kol-space-4);
  border-bottom: 1px solid var(--kol-line);
  background: none;
}

.team-table tbody tr:last-child td,
.tickets-table tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.team-table tbody tr:hover,
.tickets-table tbody tr:hover,
.data-table tbody tr:hover,
body[data-theme] .tickets-table tbody tr:hover {
  background-color: var(--kol-sunk);
}

@media (max-width: 767px) {
  .team-table-container,
  .tickets-table-container,
  .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .team-table,
  .tickets-table,
  .data-table {
    min-width: 640px;
  }

  .team-table thead th,
  .tickets-table thead th,
  .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

/* ==========================================================================
   9. Forms
   ========================================================================== */
.form-group label,
.kol-label,
.setting-name {
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea,
.member-search-input,
.filter-select,
.search-bar input,
.share-input-group select,
.share-role-select,
.transfer-option select,
.chart-controls select,
body[data-theme] .form-group textarea,
body[data-theme] .member-search-input,
body[data-theme] .filter-select,
body[data-theme] .search-bar input,
body[data-theme] .transfer-option select,
body[data-theme] .chart-controls select,
body[data-theme] .reply-section textarea {
  background-color: var(--kol-paper);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink);
  font-family: var(--kol-font-sans);
  font-size: var(--kol-text-sm);
}

input::placeholder,
textarea::placeholder {
  color: var(--kol-ink-faint);
}

/* A <select> is as wide as its longest option unless it is told otherwise. In
   Hebrew, support.html's ticket filter measured 504px, which pushed its widget
   header to 690px and the whole grid column past a 390px viewport. Let every
   control and the rows that hold them shrink, and let those rows wrap. */
select,
.filter-select,
.share-role-select,
.chart-controls select,
.time-filter select {
  min-width: 0;
  max-width: 100%;
}

.widget-header,
.analytics-filters,
.chart-controls,
.time-filter,
.support-main,
.support-grid > * {
  min-width: 0;
}

.widget-header,
.analytics-filters,
.chart-controls {
  flex-wrap: wrap;
  gap: var(--kol-space-3);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kol-line-strong);
  outline: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--kol-ink);
  outline: 2px solid var(--kol-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.file-upload-area {
  background-color: var(--kol-sunk);
  border: 1px dashed var(--kol-line-strong);
  border-radius: var(--kol-radius);
  color: var(--kol-ink-muted);
  display: block;
  font: inherit;
  width: 100%;
}

.file-upload-area:hover {
  border-color: var(--kol-ink-faint);
}

.file-upload-area:focus-visible,
.toggle-icon:focus-within {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
}

#ticket-modal .ticket-attachment-local-notice,
#ticket-modal .ticket-create-status {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  line-height: 1.5;
  margin-block: var(--kol-space-2) 0;
}

#ticket-modal .ticket-attachment-selection {
  background: var(--kol-sunk);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  box-sizing: border-box;
  margin-block-start: var(--kol-space-3);
  max-inline-size: 100%;
  padding: var(--kol-space-3);
}

#ticket-modal .ticket-attachment-selection[hidden],
#ticket-modal .ticket-create-status[hidden] {
  display: none;
}

#ticket-modal .ticket-selected-files-label {
  color: var(--kol-ink);
  font-weight: 600;
  margin: 0;
}

#ticket-modal #ticket-selected-files {
  margin-block: var(--kol-space-2);
  padding-inline-start: var(--kol-space-5);
}

#ticket-modal .ticket-selected-file-name {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}

#ticket-modal #ticket-remove-files {
  margin-block-start: var(--kol-space-2);
  max-inline-size: 100%;
  white-space: normal;
}

.visually-hidden {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* Legacy form rules give every .form-group input full width and padding. Keep
   this operable file chooser in the accessibility tree without letting its
   clipped box enlarge the ticket modal, particularly from the RTL edge. */
#ticket-modal #ticket-files.visually-hidden {
  block-size: 1px;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  height: 1px;
  inline-size: 1px;
  margin: -1px;
  max-block-size: 1px;
  max-height: 1px;
  max-inline-size: 1px;
  max-width: 1px;
  min-block-size: 0;
  min-height: 0;
  min-inline-size: 0;
  min-width: 0;
  padding: 0;
  width: 1px;
}

.chart-data-details {
  border-block-start: 1px solid var(--kol-line);
  color: var(--kol-ink);
  margin-block-start: var(--kol-space-4);
  padding-block-start: var(--kol-space-3);
}

.chart-data-details summary {
  color: var(--kol-ink);
  cursor: pointer;
  font-size: var(--kol-text-sm);
  font-weight: 700;
  min-block-size: 2.75rem;
  padding: 0.75rem 0.25rem;
}

.chart-data-details summary:focus-visible {
  outline: 2px solid var(--kol-focus);
  outline-offset: 2px;
}

.chart-data-status {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  margin: var(--kol-space-2) 0;
}

.chart-data-status:empty {
  display: none;
}

.chart-data-status[data-state="error"] {
  color: var(--error-color);
}

.chart-data-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.chart-data-table {
  border-collapse: collapse;
  font-size: var(--kol-text-sm);
  inline-size: 100%;
  min-inline-size: 24rem;
}

.chart-data-table caption {
  color: var(--kol-ink);
  font-weight: 700;
  padding-block: var(--kol-space-2);
  text-align: start;
}

.chart-data-table th,
.chart-data-table td {
  border-block-end: 1px solid var(--kol-line);
  padding: 0.625rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

.chart-data-table th {
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-weight: 700;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-label {
  color: var(--kol-ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.direction-btn,
body[data-theme] .direction-btn {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
}

.direction-btn.active {
  border-color: var(--kol-accent);
  background-color: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

/* ==========================================================================
   10. Modals, toasts and badges
   ========================================================================== */
.modal {
  background-color: rgba(23, 24, 26, 0.5);
  backdrop-filter: none;
}

.modal-content {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  box-shadow: var(--kol-shadow);
  color: var(--kol-ink);
}

.modal-footer {
  border-top: 1px solid var(--kol-line);
  background: none;
}

.close-btn {
  background: none;
  border: 0;
  color: var(--kol-ink-faint);
  border-radius: var(--kol-radius-sm);
}

.close-btn:hover {
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
}

/* Modal warnings and close controls must retain readable, full-opacity theme
   tokens after the legacy admin sheet. Logical sizing is direction-neutral. */
body[data-theme] .modal-content .warning-text p,
body[data-theme] .modal-content .warning-list {
  color: var(--kol-ink-muted);
  opacity: 1;
}

body[data-theme] .modal .close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  color: var(--kol-ink);
  opacity: 1;
}

/* Support ticket values can contain mixed-script opaque IDs and user text.
   Isolate their direction without changing the exact displayed/copied value. */
.support-bidi-value {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}

#ticket-details-modal .modal-content,
#ticket-details-modal .modal-body,
#ticket-details-modal .ticket-details-heading,
#ticket-details-modal .ticket-messages,
#ticket-details-modal .messages-list,
#ticket-details-modal .message {
  min-inline-size: 0;
  box-sizing: border-box;
}

#ticket-details-modal .ticket-details-header {
  align-items: flex-start;
  gap: var(--kol-space-3);
}

#ticket-details-modal .ticket-details-heading {
  flex: 1 1 auto;
}

#ticket-details-modal .ticket-status-badge {
  flex: 0 0 auto;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

#ticket-details-modal .message-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

#ticket-details-modal .message-header .sender {
  flex: 1 1 12rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

#ticket-details-modal .message-header .time {
  flex: 0 0 auto;
  max-inline-size: 100%;
  white-space: nowrap;
}

#ticket-details-modal .message-content,
#ticket-details-modal .ticket-description p {
  overflow-wrap: anywhere;
}

/* Every toast type keeps the kit's surface and ink in both themes. The older
   admin_styles.css paints each type's background for white text; with the
   kit's ink text that read dark-on-dark (light theme) and white-on-white
   (dark theme). The type shows in the leading edge and the icon instead. */
.toast,
.toast.success,
.toast.error,
.toast.warning,
.toast.info,
.toast.loading {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-inline-start: 3px solid var(--kol-ink);
  border-radius: var(--kol-radius-sm);
  box-shadow: var(--kol-shadow);
  color: var(--kol-ink);
}

.toast.success {
  border-inline-start-color: var(--kol-accent);
}

.toast.error {
  border-inline-start-color: var(--error-color);
}

.toast.warning {
  border-inline-start-color: var(--warning-color);
}

.toast .toast-message,
.toast .toast-action {
  color: inherit;
}

.toast.success .toast-icon {
  color: var(--kol-accent);
}

.toast.error .toast-icon {
  color: var(--error-color);
}

.toast.warning .toast-icon {
  color: var(--warning-color);
}

.status-badge,
.role-badge,
.kol-tag {
  background-color: var(--kol-sunk);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 10px;
}

.status-badge.active {
  background-color: var(--kol-accent-quiet);
  border-color: var(--kol-accent);
  color: var(--kol-ink);
}

/* ==========================================================================
   11. index.html and login.html — the two signed-out pages
   ========================================================================== */
.navbar {
  background-color: var(--kol-surface);
  border-bottom: 1px solid var(--kol-line);
  box-shadow: none;
  height: var(--kol-header-h);
}

/* Override the legacy theme-qualified transparent shorthand before scroll as
   well as its separate scrolled and expanded variants. */
[data-theme] .navbar,
[data-theme] .navbar.scrolled,
[data-theme] .navbar.mega-open {
  background: var(--kol-surface);
}

.navbar.scrolled {
  box-shadow: none;
  border-bottom-color: var(--kol-line-strong);
}

.navbar.mega-open {
  height: auto;
}

/* enterprise_landing.css deliberately made this content transparent against
   an auto-height navbar. Keep both the expanded wrapper and its content panel
   solid now that the kit fixes the closed navbar to the header height. */
.navbar.mega-open .mega-menu-wrapper.active,
.navbar.mega-open .mega-menu-content.glass-card {
  background: var(--kol-surface) !important;
}

.nav-links a,
.mobile-menu a {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 500;
}

.nav-links a:hover,
.mobile-menu a:hover {
  color: var(--kol-ink);
}

.mega-menu-content,
.mobile-menu {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  box-shadow: var(--kol-shadow);
}

/* A full-viewport hero left a third of the page empty above the headline. */
.hero,
.hero-section {
  background: var(--kol-paper);
  min-height: 0;
  padding-block: calc(var(--kol-header-h) + var(--kol-space-7)) var(--kol-space-7);
  align-items: start;
}

.hero-title {
  font-size: var(--kol-text-hero);
  line-height: var(--kol-leading-tight);
  letter-spacing: var(--kol-tracking-tight);
  color: var(--kol-ink);
  font-weight: 600;
  margin: 0 0 var(--kol-space-4);
  text-wrap: balance;
}

.hero-subtitle {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-md);
  max-width: var(--kol-measure);
  margin: 0 auto var(--kol-space-6);
}

.hero-stats {
  gap: var(--kol-gap) !important;
  margin-top: var(--kol-space-7) !important;
}

.hero-stats .stat,
.hero-stat,
.stat-item {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  box-shadow: none;
  padding: var(--kol-space-4) var(--kol-space-5);
}

/* Only the hero's three cards get a floor width. `.stat-item` also appears in
   billing's narrow summary grid, where 160px overflowed a 390px column. */
.hero-stats .stat {
  min-width: 160px;
}

.hero-stats .stat .stat-number {
  font-size: var(--kol-text-lg);
  font-weight: 600;
  color: var(--kol-ink);
  letter-spacing: var(--kol-tracking-tight);
}

.hero-stats .stat .stat-label {
  font-size: var(--kol-text-sm);
  color: var(--kol-ink-muted);
}

.section {
  padding-block: var(--kol-section-y);
}

/* The landing sheet tints these with a hardcoded rgba(59,130,246,.1) blue and
   fills the glyph with the primary colour. One quiet fill, ink glyph. */
.feature-icon,
.service-icon,
.benefit-icon,
.step-number {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  background: var(--kol-sunk);
  background-image: none;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink);
  box-shadow: none;
  margin-bottom: var(--kol-space-4);
}

.feature-card h3,
.benefit-card h4,
.step-card h4 {
  font-size: var(--kol-text-lg);
  margin: 0 0 var(--kol-space-2);
}

.feature-card p,
.benefit-card p,
.step-card p {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  margin: 0;
}

/* js/landing_app.js pins its accessibility widget to the corner as an amber
   disc with a red dismiss badge and a 300ms scale. Amber is for the primary
   action, and a red dot reads as an error. */
#a11y-toggle {
  background: var(--kol-surface);
  border: 1px solid var(--kol-line);
  color: var(--kol-ink);
  box-shadow: var(--kol-shadow);
  transition: background-color var(--kol-motion) var(--kol-ease),
    border-color var(--kol-motion) var(--kol-ease);
}

#a11y-toggle:hover {
  background: var(--kol-sunk);
  border-color: var(--kol-line-strong);
  transform: none;
}

#a11y-toggle.active {
  background: var(--kol-accent-quiet);
  border-color: var(--kol-accent);
  color: var(--kol-ink);
  transform: none;
}

.a11y-toggle-close {
  background: var(--kol-sunk);
  border: 1px solid var(--kol-line);
  color: var(--kol-ink-muted);
}

.a11y-toggle-close:hover {
  background: var(--kol-surface);
  color: var(--kol-ink);
  transform: none;
}

/* login.html keeps the language menu at the inline start; the theme popover
   takes the inline end, where the old two-way toggle used to sit. */
.auth-tools {
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
}

/* The kit styles the popover itself; these two only need a 36px trigger to
   match the language globe beside them, and a z-index above the navbar. */
.auth-tools .kol-btn-icon,
.nav-controls .kol-btn-icon {
  min-height: 36px;
  width: 36px;
  border-color: var(--kol-line);
  border-radius: var(--kol-radius-sm);
  color: var(--kol-ink-muted);
}

.auth-tools .kol-pop-panel,
.nav-controls .kol-pop-panel {
  z-index: 1006;
}

.auth-container,
.auth-card {
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  box-shadow: var(--kol-shadow);
}

.footer,
footer {
  background-color: var(--kol-surface);
  border-top: 1px solid var(--kol-line);
  color: var(--kol-ink-muted);
}

.link-pill {
  color: var(--kol-ink-muted);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background: none;
}

.link-pill:hover {
  color: var(--kol-ink);
  border-color: var(--kol-line-strong);
  background-color: var(--kol-sunk);
}

/* ==========================================================================
   Responsive content containment
   --------------------------------------------------------------------------
   The legacy sheets give a few translated control rows a non-wrapping
   min-content width. Let the main flex item stay inside the sidebar lane and
   let those specific rows reflow without hiding actions or table content.
   ========================================================================== */
.main-content {
  min-width: 0;
  max-width: calc(100% - var(--sidebar-width));
}

.main-content.collapsed {
  max-width: calc(100% - var(--sidebar-collapsed-width));
}

.pagination,
.pagination > *,
.pagination-controls,
.page-numbers {
  min-width: 0;
  max-width: 100%;
}

.pagination-controls,
.page-numbers {
  flex-wrap: wrap;
}

.pagination-controls {
  gap: var(--kol-space-2) var(--kol-space-3);
}

.pagination-controls > .btn {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-numbers {
  gap: var(--kol-space-2);
}

.page-numbers .page-btn {
  flex: 0 0 32px;
}

.time-range-selector {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.time-range-selector .time-btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

/* The legacy analytics grid keeps a 12-column desktop split at every width.
   A desktop sidebar leaves too little inline space for the four-column file
   card well before the phone breakpoint, so stack the cards through tablet
   widths while retaining the original 8/4 and 6/6 desktop composition. */
.analytics-grid,
.analytics-grid > .analytics-card,
.analytics-grid .card-header,
.analytics-grid .card-content,
.analytics-grid .chart-controls,
.analytics-grid .file-type-legend,
.analytics-grid .legend-item,
.analytics-grid .legend-details,
.analytics-grid .chart-data-details,
.analytics-grid .chart-data-scroll {
  min-width: 0;
  max-width: 100%;
}

.analytics-grid .card-header,
.analytics-grid .chart-controls,
.analytics-grid .legend-details {
  flex-wrap: wrap;
  gap: var(--kol-space-2) var(--kol-space-3);
}

.analytics-grid .card-header > h3 {
  flex: 1 1 12rem;
  min-width: 0;
}

.analytics-grid .card-header > h3,
.analytics-grid .chart-data-details summary,
.analytics-grid .legend-name,
.analytics-grid .legend-percentage {
  overflow-wrap: anywhere;
  white-space: normal;
}

.analytics-grid .legend-color {
  flex: 0 0 12px;
}

.analytics-grid .legend-details {
  flex: 1 1 10rem;
}

@media (max-width: 1199px) {
  .analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-grid > .analytics-card {
    grid-column: 1 / -1;
  }
}

.usage-overview {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.usage-overview,
.usage-metric,
.usage-metric .metric-header,
.usage-metric .metric-display,
.usage-metric .metric-progress,
.usage-metric .progress-bar,
.current-plan-card .plan-header,
.current-plan-card .plan-info {
  min-width: 0;
}

.usage-metric .metric-header,
.current-plan-card .plan-header {
  flex-wrap: wrap;
  gap: var(--kol-space-2) var(--kol-space-3);
}

@media (max-width: 1024px) {
  .main-content,
  .main-content.collapsed {
    max-width: 100%;
  }
}

@media (max-width: 559px) {
  .analytics-grid .card-header,
  .analytics-grid .chart-controls {
    align-items: stretch;
    width: 100%;
  }

  .analytics-grid .chart-controls select,
  .analytics-filters .filter-field {
    width: 100%;
  }

  .analytics-filters .filter-field {
    flex-basis: 100%;
  }

  .pagination-controls {
    width: 100%;
    justify-content: center;
  }

  .rows-per-page {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .rows-per-page label {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Dashboard responsive reconciliation
   --------------------------------------------------------------------------
   admin_styles.css has several historical max-width: 1024px blocks. Together
   they collapse these four metrics to one tall column, centre only the icon,
   and stretch the two header actions. Keep this override dashboard-specific:
   the portal's other page headers, buttons and quick-action widget retain
   their own layouts.
   ========================================================================== */
.main-content > .dashboard-header {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: var(--kol-space-4) var(--kol-space-6);
  margin-bottom: var(--kol-space-5);
}

.main-content > .dashboard-header > .welcome-section {
  flex: 1 1 28rem;
  min-width: 0;
}

.main-content > .dashboard-header > .quick-actions {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--kol-space-2);
}

.main-content > .dashboard-header > .quick-actions .btn {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.main-content > .metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kol-space-4);
  margin-bottom: var(--kol-space-5);
}

.main-content > .metrics-grid > .metric-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: var(--kol-space-3);
  min-height: 0;
  height: 100%;
  padding: var(--kol-space-4);
  text-align: start;
}

.main-content > .metrics-grid > .metric-card > .metric-icon {
  width: 40px;
  height: 40px;
  margin: 0;
  align-self: start;
  font-size: var(--kol-text-base);
}

.main-content > .metrics-grid > .metric-card > .metric-content {
  min-width: 0;
  text-align: start;
}

.main-content > .metrics-grid .metric-value,
.main-content > .metrics-grid .metric-label {
  text-align: start;
  overflow-wrap: anywhere;
}

.main-content > .metrics-grid .metric-value {
  font-size: clamp(var(--kol-text-lg), 2vw, var(--kol-text-2xl));
  line-height: var(--kol-leading-tight);
}

.main-content > .metrics-grid .metric-label small {
  display: block;
}

.main-content > .metrics-grid .metric-change,
.main-content > .metrics-grid .metric-progress {
  justify-content: flex-start;
  min-width: 0;
}

@media (min-width: 1360px) {
  .main-content > .metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .main-content > .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--kol-space-3);
  }

  .main-content > .dashboard-header > .welcome-section {
    flex: 0 1 auto;
  }

  .main-content > .dashboard-header > .quick-actions {
    width: 100%;
    flex-direction: column;
  }

  .main-content > .dashboard-header > .quick-actions .btn {
    flex: 0 1 auto;
    width: 100%;
  }

  .main-content > .metrics-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   12. Phone: one sheet menu
   --------------------------------------------------------------------------
   The rail already slides in as an off-canvas panel through
   toggleMobileNav(); these rules make it read as the kit's sheet.
   ========================================================================== */
@media (max-width: 767px) {
  .sidebar {
    width: min(320px, 88vw);
    border-radius: 0;
    box-shadow: var(--kol-shadow);
  }

  .main-content {
    padding: calc(var(--kol-header-h) + var(--kol-space-4)) var(--kol-gutter) var(--kol-space-6);
  }

  .dashboard-header,
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kol-space-4);
  }

  .quick-actions,
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .quick-actions .btn,
  .header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .metrics-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--kol-space-4);
  }

  .modal-content {
    width: calc(100vw - 2 * var(--kol-gutter));
    max-height: 88vh;
    border-radius: var(--kol-radius-lg);
  }

  #ticket-details-modal .ticket-details-header {
    align-items: stretch;
    flex-direction: column;
  }

  #ticket-details-modal .ticket-status-badge {
    align-self: flex-start;
  }

  #ticket-details-modal .messages-list {
    inline-size: 100%;
    padding: var(--kol-space-3);
  }

  #ticket-details-modal .message {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: var(--kol-space-3);
  }

  #ticket-details-modal .message-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--kol-space-1);
  }

  #ticket-details-modal .message-header .sender {
    flex: 0 1 auto;
    inline-size: 100%;
  }

  #ticket-details-modal .message-header .time {
    inline-size: auto;
  }

  #ticket-details-modal .ticket-meta-info {
    grid-template-columns: minmax(0, 1fr);
  }

  #ticket-details-modal .reply-section textarea {
    box-sizing: border-box;
    max-inline-size: 100%;
  }

  #a11y-menu.enterprise-a11y {
    inset-inline: var(--kol-gutter);
    width: auto;
  }
}

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

/* ==========================================================================
   14. Acceptance repairs — 2026-09-18 (axe sweep of the local review)
   ========================================================================== */

/* Landing reveal: content never waits for a scroll animation or for JS.
   (enterprise_landing.css hid .animate-on-scroll at opacity 0 until an
   IntersectionObserver fired; the console kit made the same call.) */
body .animate-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Table headers and stat labels carried opacity .7/.8 from the legacy sheet,
   which drags the AA-compliant muted ink below 4.5:1 on light paper. */
body[data-theme] thead th,
body[data-theme] .stat-label,
body[data-theme] .metric-label {
  opacity: 1;
}

/* Pending-member avatar: ink on the strong hairline in both themes
   (was light ink on muted ink in dark mode, 2.3:1). */
body[data-theme] .member-avatar.pending {
  background: var(--kol-line-strong);
  color: var(--kol-ink);
}

/* Error text on dark paper: the light-theme red reads 2.7:1 there. */
body[data-theme="dark"] {
  --error-color: #ff8a80;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --error-color: #ff8a80;
  }
}

/* Floating accessibility button (public pages, js/landing_app.js): one fixed
   shell holds the toggle and a sibling "hide" button with a 24px target. It
   keeps the landing's own corner (bottom-left, physical, in both directions)
   so it stays under the #a11y-menu panel that enterprise_landing.css places
   at bottom: 80px / left: 20px, and its layer (1003) matches that panel. */
.a11y-widget-shell {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  z-index: 1003;
  width: 50px;
  height: 50px;
}

.a11y-widget-shell #a11y-toggle {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline-end: auto;
  width: 50px;
  height: 50px;
  margin: 0;
  z-index: auto; /* the shared kit's z-index 95 would cover the hide button */
}

.a11y-widget-shell .a11y-toggle-close {
  position: absolute;
  top: -6px;
  left: -6px;
  right: auto;
  inset-inline-start: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* enterprise_landing.css hides only #a11y-toggle while the phone menu is open;
   hide the whole shell so the sibling button goes with it. */
body.mobile-menu-open .a11y-widget-shell {
  transform: translateX(-200%);
  opacity: 0;
  pointer-events: none;
}

/* Member rows: the "organization remaining credits" figure is dimmed inline
   to opacity .5 by team_management.js, which halves its contrast. Keep it
   secondary through colour instead. */
body[data-theme] .usage-hours span[title] {
  opacity: 1 !important;
  color: var(--kol-ink-muted);
}

/* Landing contact form counter ("0/500") sat at opacity .7. */
body[data-theme] .form-group small,
body[data-theme] form small {
  opacity: 1 !important;
  color: var(--kol-ink-muted);
}

/* Role and status chips: ink on a quiet wash in both themes. The legacy
   sheet put light ink on the muted-ink swatch (2.3:1) and white on amber
   (1.6:1). */
body[data-theme] .role-badge.member {
  background: var(--kol-line-strong);
  color: var(--kol-ink);
}

body[data-theme] .status-badge.pending {
  background: var(--kol-accent-quiet);
  border: 1px solid var(--kol-accent);
  color: var(--kol-ink);
}

/* Landing link pills: enterprise_landing.css re-tints them blue with amber
   text under [data-theme="light"] (1.6:1); assert the kit chip in both. */
body[data-theme] .link-pill {
  background: none;
  color: var(--kol-ink-muted);
  border: 1px solid var(--kol-line);
}

body[data-theme] .link-pill:hover,
body[data-theme] .link-pill:focus-visible {
  background: var(--kol-sunk);
  color: var(--kol-ink);
  border-color: var(--kol-line-strong);
}

/* Analytics range buttons: admin_styles.css puts white on the amber primary
   (1.8:1) when active or hovered; the accent's own ink reads 9.7:1. */
body[data-theme] .time-btn:hover,
body[data-theme] .time-btn.active,
body[data-theme] .time-btn:focus-visible {
  background-color: var(--kol-accent);
  border-color: var(--kol-accent);
  color: var(--kol-accent-ink);
}

/* Scrollable lists must be reachable from the keyboard (WCAG 2.1.1). */
body[data-theme] .activity-list:focus-visible,
body[data-theme] .notifications-list:focus-visible {
  outline: 2px solid var(--kol-accent);
  outline-offset: 2px;
}

/* Billing plan chip: admin_styles.css paints white text on a light wash
   (1.1:1). Ink on the accent wash, like every other status chip here. */
body[data-theme] .plan-status {
  background: var(--kol-accent-quiet);
  border: 1px solid var(--kol-accent);
  color: var(--kol-ink);
}

/* Settings: integration "Not connected" chips were white on muted ink
   (2.6:1 dark); section subtitles sat at opacity .7 (3.3:1 light). */
body[data-theme] .status-badge.inactive {
  background: var(--kol-line-strong);
  color: var(--kol-ink);
}

body[data-theme] .section-header p,
body[data-theme] .settings-section .section-header p {
  opacity: 1;
  color: var(--kol-ink-muted);
}

/* Bootstrap-style .text-muted helper text sat at opacity .7 (3.3:1 light). */
body[data-theme] .text-muted {
  opacity: 1;
  color: var(--kol-ink-muted);
}

/* Outline "warning" buttons: amber text on paper is 1.8:1; keep the amber
   edge and put the label in ink. */
body[data-theme] .btn-outline-warning {
  color: var(--kol-ink);
  border-color: var(--kol-accent);
  background: none;
}

body[data-theme] .btn-outline-warning:hover,
body[data-theme] .btn-outline-warning:focus-visible {
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

/* ==========================================================================
   Content & Storage — files of both apps in the one table (js/org_content.js)
   --------------------------------------------------------------------------
   The page keeps its legacy cards, filters and table. These rules cover only
   what the unified files add: the source chip, the folder path under a name,
   the drive filter's folder tools, the selection bar and the dialogs' text.
   Logical properties only, so Hebrew and Arabic mirror.
   ========================================================================== */
.oc-type-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.status-badge.source-badge {
  white-space: nowrap;
}

/* Long names end in an ellipsis (the full name is the tooltip) instead of
   widening the table; the column takes the room the others leave. */
.team-table td.oc-content-cell {
  min-width: 190px;
}

.transcription-title .oc-file-name {
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-member-cell .member-details {
  min-width: 0;
}

.oc-member-cell .member-name,
.oc-member-cell .member-team {
  max-width: 17ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transcription-summary .oc-file-place {
  overflow-wrap: anywhere;
}

.transcription-summary .fas {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

.analytics-filters .oc-folder-tools {
  align-items: center;
}

.select-all-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-2, 8px) var(--kol-space-3, 12px);
  margin-block-end: var(--kol-space-3, 12px);
  padding: 10px 16px;
  background-color: var(--kol-sunk);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
}

.select-all-banner .oc-selection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.select-all-banner .btn-link {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--kol-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.oc-modal .oc-note,
.oc-modal .oc-muted-center {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

.oc-modal .oc-muted-center {
  text-align: center;
  padding: 20px 0;
}

.oc-modal .oc-plain-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--kol-leading);
}

.oc-modal .tab-content {
  display: none;
}

.oc-modal .tab-content.active {
  display: block;
}

.oc-modal .oc-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.oc-modal .oc-summary + .oc-summary {
  margin-block-start: 16px;
}

.oc-modal .oc-summary-date {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  margin-block-end: 4px;
}

.oc-modal .oc-chat-message {
  margin-block-end: 12px;
  padding: 10px 12px;
  border-radius: var(--kol-radius-sm);
  border-inline-start: 3px solid var(--kol-line-strong);
  background-color: var(--kol-sunk);
}

.oc-modal .oc-chat-message.user {
  border-inline-start-color: var(--kol-accent);
}

.oc-modal .oc-chat-message .message-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
  margin-block-end: 4px;
}

.oc-modal .oc-chat-role {
  font-weight: 600;
  color: var(--kol-ink);
}

.oc-modal .oc-description {
  margin-block-start: 20px;
}

.oc-modal .oc-description h4 {
  margin: 0 0 6px;
  font-size: var(--kol-text-base);
}

.oc-modal .oc-share-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-block-end: 1px solid var(--kol-line);
}

.oc-modal .oc-share-who {
  overflow-wrap: anywhere;
}

.oc-modal .oc-share-form {
  margin-block-start: 20px;
}

.oc-modal .oc-share-form h4 {
  margin: 0 0 4px;
  font-size: var(--kol-text-base);
}

.oc-modal .oc-result-list {
  margin: 0;
  padding-inline-start: 20px;
  line-height: var(--kol-leading);
}

.oc-modal .bulk-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 16px;
}

.oc-modal .option-section .form-group {
  margin-block-end: 12px;
}

.oc-menu {
  position: fixed;
  z-index: 3000;
  min-width: 180px;
  padding: 4px;
  background-color: var(--kol-surface);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  box-shadow: var(--kol-shadow);
}

.oc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--kol-ink);
  font: inherit;
  font-size: var(--kol-text-sm);
  text-align: start;
  cursor: pointer;
}

.oc-menu-item .fas {
  width: 16px;
  color: var(--kol-ink-muted);
}

.oc-menu-item:hover,
.oc-menu-item:focus-visible {
  background-color: var(--kol-sunk);
}

@media (min-width: 769px) {
  .analytics-filters #team-filter,
  .analytics-filters #drive-filter {
    max-width: 190px;
  }
}

/* Parity (enterprise-portal-sweep): a figure or badge the server did not report
   is hidden with the hidden attribute; component display rules must not show it. */
.metric-change[hidden],
.plan-status[hidden] {
  display: none !important;
}

/* Parity visual QA (enterprise-portal-sweep): the Dashboard's Quick Actions
   widget stacks its title above its buttons (the header's .quick-actions flex
   row rule must not apply to the widget), and Support's contact cards keep
   their text readable on phones, the button wrapping below. */
.widget.quick-actions {
  display: block;
}

.contact-method {
  flex-wrap: wrap;
}

.contact-info {
  flex: 1 1 10rem;
  min-width: 0;
}

/* Content & Storage: the Created date and time each stay on one line, as in the old table. */
.team-table .date-info .date,
.team-table .date-info .time {
  white-space: nowrap;
}

/* Member Details: the "Joined" icon gets the kit's quiet fill like its
   neighbours (the old success fill came out white on white), and stat labels
   wrap instead of being cut ("Credit Bud..."). */
.stat-icon.joined {
  background: var(--kol-sunk);
  background-image: none;
  border: 1px solid var(--kol-line);
  color: var(--kol-ink);
}

.member-stat-card .stat-label {
  white-space: normal;
  overflow: visible;
}

/* Dashboard Storage Used ("3.4 GB / 100 GB") stays on one line in its card. */
.metric-content > #storage-used {
  white-space: nowrap;
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
}

/* Content & Storage rows: up to five round buttons (view, summary, chat, more,
   delete) fit the Actions column without being cut. */
#transcriptions-list .action-buttons {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

#transcriptions-list .action-buttons .btn-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}