/* ============================================================================
   GPSPL ENTERPRISE SIGNAGE CMS — DISPLAY WORKSPACE
   Design Language: Warm paper, beige and charcoal
   ============================================================================ */

:root {
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Source Sans 3', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Enterprise High-Contrast Neutral Scale (Tailwind Slate) */
  --ink: #323232;
  --muted: #716961;
  --accent: #323232;

  /* Surfaces & Backgrounds */
  --bg-canvas: #f8f5f1;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f8f5f1;
  --bg-surface-hover: #f2ede8;

  /* Text Hierarchy */
  --text-main: #323232;
  --text-body: #484440;
  --text-secondary: #625b55;
  --text-muted: #716961;
  --text-light: #80776f;

  /* Brand colours */
  --brand-primary: #323232;
  --brand-hover: #242424;
  --brand-active: #323232;
  --brand-subtle: #f0e8e1;
  --brand-border: #d8c8ba;
  --brand-text: #323232;
  --brand-500: #323232;
  --brand-600: #242424;
  --brand-50: #f0e8e1;

  /* Crisp Borders */
  --border-default: #e3dbd4;
  --border-subtle: #f2ede8;
  --border-strong: #cfc3b9;
  --border-sidebar: #e3dbd4;

  /* Layout Dimensions & Radii */
  --header-height: 72px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(50, 50, 50, 0.25);
}

html, body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, a, input, select, textarea, [role=button] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Base Shell */
.app-shell {
  background: var(--bg-canvas);
}

/* Enterprise Sidebar */
.sidebar {
  width: 236px;
  min-width: 236px;
  background: var(--bg-sidebar);
  padding: 0;
  border-right: 1px solid var(--border-sidebar);
  box-shadow: var(--shadow-sm);
}

.sidebar-header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-frame {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 8px;
}

.brand-title {
  font-size: 16px;
  letter-spacing: -0.4px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 12px 10px;
}

.nav-section-title {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-light);
  margin: 20px 12px 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-item {
  min-height: 40px;
  padding: 9px 12px;
  margin: 3px 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}

.nav-item.active {
  color: var(--brand-primary);
  background: var(--brand-subtle);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  color: var(--brand-primary);
}

.nav-item.active::before {
  display: none;
}

.nav-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  color: var(--text-muted);
}

.nav-count-badge {
  background: #e3dbd4;
  border: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-sidebar);
}

.admin-profile-chip {
  background: var(--bg-surface-subtle);
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-avatar {
  background: #e9dfd6;
  color: #323232;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-name-text {
  font-size: 12px;
  max-width: 115px;
  font-weight: 600;
  color: var(--text-main);
}

.admin-role-text {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Main Viewport & Topbar */
.main-viewport {
  min-width: 0;
}

.topbar {
  background: #ffffff;
  height: var(--header-height);
  padding: 0 32px;
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  gap: 16px;
}

.topbar-left {
  gap: 18px;
  min-width: 0;
}

.breadcrumb-wrap {
  font-size: 13px;
  gap: 8px;
}

.breadcrumb-root {
  color: var(--text-muted);
}

.breadcrumb-current {
  color: var(--text-main);
  font-weight: 600;
}

.telemetry-radar-pill {
  font-size: 11px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 9999px;
  color: #047857;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.branch-selector-wrap {
  border: 1px solid var(--border-default);
  padding: 3px 8px;
  background: #ffffff;
  border-radius: var(--radius-md);
  max-width: 220px;
}

#branch-select {
  max-width: 200px;
  font-size: 12px;
  color: var(--text-body);
  font-weight: 500;
  border: 0;
  background: transparent;
  outline: none;
}

.btn-global-search-trigger {
  display: none;
}

.topbar-right {
  gap: 10px;
}

.topbar-right .btn {
  min-height: 34px;
  font-size: 12px;
  padding: 6px 14px;
}

#btn-manage-admins, .topbar-right a[href='/player'], #btn-power-schedule-modal {
  display: none !important;
}

#btn-refresh {
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.15s ease;
}

#btn-refresh:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}

.viewport-content {
  padding: 24px 32px 48px;
  overflow-x: hidden;
}

/* Page Intro */
.page-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 4px 0 28px;
}

.page-eyebrow {
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.page-intro h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-main);
}

.page-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.page-intro .btn {
  flex-shrink: 0;
}

/* Standard Buttons */
.btn {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.btn-primary {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 4px 12px rgba(50, 50, 50, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: #ffffff;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-main);
}

.btn-sm {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* KPI Overview Strip */
.fleet-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  overflow: hidden;
}

.kpi-cell {
  min-width: 0;
  padding: 24px 28px;
  border-right: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}

.kpi-cell:hover {
  background: #faf8f5;
}

.kpi-cell:nth-child(n+4) {
  display: none;
}

.kpi-cell:nth-child(3) {
  border-right: 0;
}

.kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 38px;
  color: var(--text-main) !important;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.kpi-subtext {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Section Cards */
.overview-sections-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 24px;
}

.overview-column {
  gap: 24px;
  min-width: 0;
}

.section-panel-card {
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #ffffff;
}

.section-panel-header {
  padding: 18px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-default);
}

.section-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-main) !important;
}

.section-panel-title svg {
  display: inline-block;
  margin-right: 6px;
  color: var(--brand-primary);
}

.section-panel-sub {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* ============================================================================
   ENTERPRISE DATA TABLES & GRID SYSTEM
   ============================================================================ */
.device-ops-table, .enterprise-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.device-ops-table thead, .enterprise-data-table thead {
  background: #f8f5f1;
  position: sticky;
  top: 0;
  z-index: 2;
}

.device-ops-table th, .enterprise-data-table th {
  padding: 11px 16px;
  background: #f8f5f1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #625b55;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.device-ops-table td, .enterprise-data-table td {
  padding: 13px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
  vertical-align: middle;
}

.device-ops-table tbody tr, .enterprise-data-table tbody tr {
  transition: background-color 0.12s ease;
}

.device-ops-table tbody tr:hover, .enterprise-data-table tbody tr:hover {
  background-color: #f8f5f1;
}

.enterprise-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}

/* Role Badges */
.badge-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.2px;
}

.badge-role.super-admin {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.06);
}

.badge-role.client-admin {
  background: #f0e8e1;
  color: #242424;
  border: 1px solid #d8c8ba;
  box-shadow: 0 1px 2px rgba(50, 50, 50, 0.06);
}

/* Status Pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.status-pill.online {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.status-pill.online .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.status-pill.offline {
  background: #f8f5f1;
  color: #716961;
  border: 1px solid var(--border-default);
}

.status-pill.offline .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #80776f;
}

/* Quota / Allocation Component */
.quota-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.quota-label-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.quota-count {
  font-weight: 700;
  color: var(--text-main);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.quota-divider {
  color: var(--text-light);
  font-weight: 400;
}

.quota-free {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.quota-track {
  width: 100%;
  max-width: 120px;
  height: 6px;
  background: #e3dbd4;
  border-radius: 9999px;
  overflow: hidden;
}

.quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #323232, #65594e);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.quota-fill.danger {
  background: linear-gradient(90deg, #ef4444, #f43f5e);
}

.unlimited-quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: #f2ede8;
  color: #625b55;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-default);
}

/* Action Buttons in Tables */
.table-actions-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.btn-table-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cfc3b9;
  background: #ffffff;
  color: #484440;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-table-action:hover {
  background: #f8f5f1;
  border-color: #80776f;
  color: #323232;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-table-action.danger {
  border-color: #fecaca;
  color: #dc2626;
  background: #ffffff;
}

.btn-table-action.danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.1);
}

.badge-root-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: #f8f5f1;
  color: #716961;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-default);
}

.btn-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Modals & Dialogs */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 50, 50, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.open {
  display: flex;
}

.modal-window-content {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  padding: 24px 28px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.modal-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}

.modal-title-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin: 0;
}

.modal-subtitle-text {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.btn-close-modal-x {
  background: #f2ede8;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-close-modal-x:hover {
  background: #e3dbd4;
  color: var(--text-main);
}

/* Form Controls */
.form-control-input, .form-control-select, textarea {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  min-height: 40px;
  font-size: 13px;
  color: var(--text-main);
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.form-control-input:focus, .form-control-select:focus, textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(50, 50, 50, 0.12);
  outline: none;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

/* Studio Composer */
.studio-layout {
  grid-template-columns: minmax(420px, 1.15fr) minmax(320px, 1fr);
  gap: 28px;
}

.inspector-card {
  order: 1;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #ffffff;
  min-width: 0;
}

.stage-wrapper-card {
  order: 2;
  position: sticky;
  top: 16px;
  padding: 24px;
  background: #323232;
  border: 1px solid #323232;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 0;
  gap: 20px;
  color: #f8f5f1;
}

.stage-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.stage-subtitle {
  font-size: 11px;
  color: #80776f;
}

.stage-note {
  font-size: 11px;
  line-height: 1.6;
  color: #716961;
  border-top: 1px solid #323232;
  padding-top: 14px;
  margin: 0;
}

.orient-btn-group {
  background: #323232;
  border: 1px solid #484440;
  border-radius: var(--radius-sm);
  padding: 3px;
}

.btn-orient {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  color: #80776f;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.btn-orient.active {
  background: var(--brand-primary);
  color: #ffffff;
}

.samsung-tv-frame {
  border: 6px solid #323232;
  border-radius: 8px;
  background: #020617;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  margin: 10px 0;
  width: 100%;
}

.composer-panel-label, .step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.composer-panel-box {
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}

#publish-form {
  gap: 16px !important;
}

.content-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #f2ede8;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.content-type-tabs .tab-btn {
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.content-type-tabs .tab-btn.active {
  background: #ffffff;
  color: var(--brand-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.playlist-drop-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 28px 16px;
  margin: 16px 0;
  border: 2px dashed #cfc3b9;
  background: #f8f5f1;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.playlist-drop-area:hover, .playlist-drop-area.is-dragging {
  background: var(--brand-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.playlist-track-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.playlist-track-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

#btn-broadcast-submit {
  min-height: 46px;
  font-weight: 700 !important;
  font-size: 14px;
  letter-spacing: -0.2px;
}

/* Responsive & Mobile Protection */
.nav-toggle {
  display: none;
}

@media (min-width: 1600px) {
  .viewport-content {
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .sidebar { width: 200px; min-width: 200px; }
  .topbar { padding: 0 20px; }
  .viewport-content { padding: 16px 20px 40px; }
  .studio-layout { grid-template-columns: minmax(360px, 1.1fr) minmax(260px, 1fr); gap: 20px; }
  .overview-sections-grid { grid-template-columns: 1fr; }
  .page-intro h1 { font-size: 28px; }
}

@media (max-width: 960px) {
  .studio-layout { grid-template-columns: 1fr; }
  .stage-wrapper-card { position: static; order: 2; }
  .sidebar { width: 184px; min-width: 184px; }
  .topbar-right { display: none; }
  .branch-selector-wrap { display: none; }
  .fleet-kpi-strip .kpi-cell { padding: 18px; }
}

@media (max-width: 680px) {
  .sidebar {
    display: none;
    position: fixed;
    width: 236px;
    z-index: 400;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.2);
  }
  body.nav-open .sidebar {
    display: flex;
  }
  .main-viewport {
    width: 100%;
  }
  .nav-toggle {
    display: inline-flex;
    padding: 6px 10px;
    min-height: 30px;
  }
  .topbar {
    height: 60px;
    padding: 0 16px;
  }
  .viewport-content {
    padding: 12px 16px 30px;
  }
  .page-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }
  .kpi-cell {
    padding: 14px 12px !important;
  }
  .kpi-value {
    font-size: 32px;
  }
  .studio-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-control-input, .form-control-select {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Warm workspace: quiet surfaces, strong hierarchy, readable operational controls. */
:root {
  --font-sans: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-mono: 'Source Sans 3', 'Segoe UI', sans-serif;
  --ink: #323232; --accent: #323232; --muted: #716961;
  --bg-canvas: #f7f4ef; --bg-sidebar: #eee6df; --bg-topbar: #f7f4ef;
  --bg-surface: #fffdfb; --bg-surface-subtle: #f4eee8; --bg-surface-hover: #e8ded5;
  --brand-primary: #323232; --brand-hover: #202020; --brand-active: #202020;
  --brand-subtle: #ddd0c8; --brand-border: #c5b5a9; --brand-text: #323232;
  --brand-50: #eee6df; --brand-500: #323232; --brand-600: #202020;
  --text-main: #323232; --text-body: #484440; --text-secondary: #625b55;
  --text-muted: #716961; --text-light: #776d64;
  --border-default: #e0d7ce; --border-subtle: #eee7e0; --border-strong: #bcaeA2;
  --border-sidebar: #d9ccc1; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: none; --shadow-md: 0 6px 22px #32323208;
}
html, body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
button, input, select, textarea, table { font-family: inherit !important; }
.sidebar { width: 238px; min-width: 238px; background: var(--bg-sidebar); box-shadow: none; }
.sidebar-header { padding: 28px 24px; border-bottom-color: var(--border-sidebar); }
.brand-title { font-size: 19px; font-weight: 600; letter-spacing: -.5px; }
.brand-sub { font-size: 10px; letter-spacing: 1.4px; font-weight: 500; }
.brand-logo-frame { background: #fffdfb; border-radius: 5px; padding: 3px; width: 38px; height: 42px; }
.sidebar-nav { padding: 18px 14px; }
.nav-section-title { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; margin: 22px 12px 10px; }
.nav-item { min-height: 44px; font-size: 15px; padding: 10px 12px; margin: 4px 0; }
.nav-item.active { background: #323232; color: #fffdfb; font-weight: 600; }
.nav-item.active .nav-icon { color: #fffdfb; }
.nav-item.active .nav-count-badge { background: #ffffff24; color: #fffdfb; }
.nav-count-badge { background: #ddd0c8; color: #484440; }
.admin-profile-chip { background: #f7f2ec; border-color: #d9ccc1; padding: 12px; }
.admin-avatar { background: #ddd0c8; color: #323232; }
.admin-name-text { font-size: 13px; } .admin-role-text { font-size: 11px; }
.topbar { background: #f7f4ef; box-shadow: none; padding: 0 36px; border-color: #e0d7ce; }
.breadcrumb-wrap { font-size: 14px; }
.telemetry-radar-pill { display: none; }
.viewport-content { padding: 32px 36px 52px; }
.page-intro { margin: 0 0 30px; align-items: end; }
.page-eyebrow { color: #78685b; font-size: 11px; font-weight: 600; letter-spacing: 1.7px; margin-bottom: 10px; }
.page-intro h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -1.25px; line-height: 1.12; margin-bottom: 10px; }
.page-intro p { font-size: 15px; color: #716961; max-width: 580px; }
.btn { min-height: 40px; font-size: 14px; font-weight: 600; padding: 9px 17px; box-shadow: none; letter-spacing: 0; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary:hover { box-shadow: none; transform: none; }
.btn-secondary { background: #fffdfb; color: #484440; border-color: #d9cec3; }
.btn-sm { min-height: 34px; font-size: 13px; padding: 6px 12px; }
.btn-danger { background: #fff4ef; color: #a03e30; border-color: #e6bdb3; }
.fleet-kpi-strip { background: #ddd0c8; border: 0; border-radius: 12px; margin-bottom: 28px; }
.kpi-cell { padding: 26px 28px; border-color: #cbbcb0; }
.kpi-cell:hover { background: #d6c7bc; }
.kpi-label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: #534a43; }
.kpi-value { font-weight: 500; font-size: 42px; letter-spacing: -1px; }
.kpi-subtext { font-size: 12px; color: #62594f; }
.stat-metric-card { background: #fffdfb; box-shadow: none; border: 1px solid #e0d7ce; border-radius: 10px; padding: 20px 22px; }
.stat-metric-card:hover { box-shadow: none; transform: none; }
.stat-metric-label { font-size: 14px; font-weight: 500; color: #625b55; }
.stat-metric-number { font-size: 34px; font-weight: 500; letter-spacing: -.7px; }
.stat-metric-sub { font-size: 12px; }
.stat-metric-icon { background: #f2ebe4; color: #716050; }
.section-panel-card, .inspector-card { background: #fffdfb; box-shadow: none; border-color: #e0d7ce; }
.section-panel-header { background: #fffdfb; padding: 19px 23px; border-color: #e9e1d9; }
.section-panel-title, .inspector-title { font-size: 17px; font-weight: 600; letter-spacing: -.25px; }
.section-panel-sub { font-size: 12px; }
.overview-sections-grid { gap: 24px; }
table { font-size: 14px; }
thead th { background: #f2ece5 !important; color: #716050 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .7px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
tbody td { border-bottom-color: #eee7e0 !important; }
tbody tr:hover { background: #faf6f1 !important; }
.device-display-icon { background: #f2ece5 !important; color: #716050 !important; border-color: #e0d7ce !important; }
.status-pill { font-weight: 600 !important; box-shadow: none !important; }
.segmented-control, .view-mode-toggle { background: #eee6df; border-color: #e0d7ce; }
.segmented-btn.active { background: #fffdfb; color: #323232; box-shadow: 0 1px 3px #3232320d; }
.form-control-input, .form-control-select, .search-input-group, textarea { background: #fffdfb; border-color: #d9cec3; border-radius: 7px; color: #323232; }
.form-control-input, .form-control-select { min-height: 42px; font-size: 15px; }
.form-label { font-size: 14px; color: #51483f; font-weight: 600; }
input:focus, select:focus, textarea:focus { border-color: #8c7765 !important; box-shadow: 0 0 0 3px #ddd0c870 !important; }
::placeholder { color: #8c8177; opacity: 1; }
.studio-layout { gap: 24px; grid-template-columns: minmax(380px, 1.1fr) minmax(320px, 1fr); align-items: start; }
.composer-panel-box { border-color: #e5dcd2; background: #fffdfb; border-radius: 8px; }
.composer-panel-label { color: #716050; font-size: 12px; font-weight: 600; letter-spacing: .7px; }
.inspector-section-header { padding-bottom: 20px; border-bottom: 1px solid #e9e1d9; margin-bottom: 22px; }
.stage-wrapper-card { background: #323232; border: none; box-shadow: none; }
.stage-subtitle, .stage-note { color: #d2c6bb; font-size: 13px; }
.stage-note { border-top-color: #5b524b; }
.stage-title { font-size: 17px; font-weight: 500; }
.layout-details { border-color: #e0d7ce; background: #faf6f1; }
.layout-details summary { font-size: 14px; padding: 14px; color: #625b55; }
.playlist-drop-area { background: #f7f2ec; border: 1px dashed #b8a493; padding: 28px 18px; color: #625346; }
.playlist-drop-area:hover, .playlist-drop-area.is-dragging { background: #eee3d9; border-color: #7b6859; }
.playlist-track-card { background: #fffdfb; box-shadow: none; }
.playlist-track-card:hover { box-shadow: none; }
.content-type-tabs { background: #eee6df; padding: 4px; }
.content-type-tabs .tab-btn { font-size: 13px; }
.content-type-tabs .tab-btn.active { color: #323232; background: #fffdfb; }
#btn-broadcast-submit { font-size: 15px; min-height: 46px; font-weight: 600 !important; }
.badge-brand { color: #625346; background: #eee3d9; border-color: #d8c6b7; }
.modal-box, .modal-content, .device-detail-drawer { background: #fffdfb; border-color: #e0d7ce; }
.modal-title-text, .drawer-title { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.modal-subtitle-text { color: #716961; font-size: 14px; }
.auth-gate-overlay { background: #ddd0c8; backdrop-filter: none; }
.auth-box { max-width: 440px; background: #fffdfb; padding: 40px; border-radius: 12px; border: 1px solid #cdbfb3; box-shadow: 0 20px 70px #51483f12; text-align: left; }
.auth-logo-frame { margin: 0 0 26px; box-shadow: none; background: transparent; border: 0; padding: 0; width: 52px; height: 58px; }
.auth-title { font-size: 34px; font-weight: 500; letter-spacing: -.8px; margin-bottom: 8px; }
.auth-subtitle { font-size: 15px; margin-bottom: 28px; }
.btn-auth-submit { background: #323232; color: #fffdfb; border-color: #323232; min-height: 46px; font-size: 15px; box-shadow: none; }
.auth-footer { font-size: 12px; color: #716961; }
@media (max-width: 1200px) { .sidebar { width: 210px; min-width: 210px; } .viewport-content { padding: 26px 24px 40px; } .studio-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 680px) {
  .sidebar { width: 238px; min-width: 238px; } .topbar { padding: 0 16px; }
  .viewport-content { padding: 24px 16px 36px; } .page-intro { align-items: start; margin-bottom: 24px; }
  .page-intro h1 { font-size: 34px; } .page-intro p { font-size: 14px; }
  .kpi-cell { padding: 18px 12px !important; } .kpi-value { font-size: 32px; }
  .kpi-label { font-size: 12px; } .kpi-subtext { font-size: 11px; }
  .auth-box { padding: 30px 24px; } .inspector-card, .stage-wrapper-card { padding: 20px; }
  .toolbar-actions-right { flex-wrap: wrap; } .btn { white-space: normal; }
}
.display-meta-strip[hidden], .fleet-maintenance[hidden] { display: none !important; }
.fleet-maintenance { position: relative; font-size: 13px; }
.fleet-maintenance summary { cursor: pointer; border: 1px solid #d9cec3; padding: 6px 12px; border-radius: 6px; background: #fffdfb; min-height: 34px; }
.maintenance-actions { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 10px; background: #fffdfb; border: 1px solid #d9cec3; border-radius: 8px; z-index: 60; box-shadow: 0 10px 30px #32323214; }
.maintenance-actions .btn { width: 100%; margin: 3px 0; }
.activity-feed-desc small { display: block; color: #716961; margin-top: 3px; }
.activity-feed-item { gap: 14px; align-items: start; padding: 14px 18px; }
.activity-feed-time { white-space: nowrap; color: #716961; }
.sidebar-header, .sidebar-footer { background: #eee6df; }
.admin-profile-chip { flex-wrap: wrap; gap: 6px; }
.admin-name-text { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-header-actions { flex-wrap: wrap; }
.stage-header-actions .btn-orient { color: #d2c6bb; }
.stage-header-actions .btn-orient.active { color: #fffdfb; background: #534a43; }
.stage-header-actions .badge { max-width: 100%; overflow-wrap: anywhere; }
.btn-rename-screen { font-size: 0 !important; }
.btn-rename-screen::after { content: '✎'; font-size: 16px; color: #716050; }
.connection-guide { max-width: 900px; display: grid; gap: 18px; }
.connection-step { display: flex; gap: 24px; padding: 28px; border: 1px solid #e0d7ce; border-radius: 12px; background: #fffdfb; }
.step-number { font-size: 24px; font-weight: 400; color: #927c69; line-height: 1.3; }
.connection-step > div { min-width: 0; flex: 1; }
.connection-step h2 { font-size: 21px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 6px; }
.connection-step p, .advanced-connection p { font-size: 15px; color: #716961; margin: 0 0 18px; line-height: 1.6; }
.player-address { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #d9ccc1; background: #f7f2ec; border-radius: 8px; }
.player-address code, .advanced-connection code { font-family: var(--font-sans); font-size: 14px; overflow-wrap: anywhere; }
.advanced-connection { padding: 8px 24px 20px; }
.advanced-connection code { display: block; margin-bottom: 18px; }
@media(max-width:680px) { .connection-step { padding: 22px 18px; gap: 14px; } .player-address { align-items: start; flex-direction: column; } }
.media-vault-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; }
.media-asset-card { min-width: 0; overflow: hidden; border: 1px solid #e0d7ce; border-radius: 10px; background: #fffdfb; }
.asset-thumbnail-box { position: relative; aspect-ratio: 16 / 10; background: #eee6df; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.asset-thumbnail-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-card-details { padding: 16px; }
.asset-name { font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asset-meta { color: #716961; font-size: 12px; margin-top: 5px; }
#tab-vault > div:not(.page-intro):first-of-type { flex-wrap: wrap; gap: 12px; }
.stat-metric-number.stat-online { color: #317255; }
.stat-metric-icon.status-green { background: #e8f1e9; color: #317255; }
@media(min-width:1100px) { .device-ops-table th, .device-ops-table td { padding-left: 12px; padding-right: 12px; } }
.modal-overlay, .modal-backdrop-wrap { background: #32323266; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-window-content, .modal-dialog, .modal-backdrop-wrap .modal-card { background: #fffdfb; border-color: #d9cec3; box-shadow: 0 24px 70px #32323226; }
@media(max-width:680px) {
  .modal-window-content, .modal-dialog { padding: 22px 18px; max-height: 90dvh; }
  #create-admin-form > div[style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
  #tab-vault > div[style*="justify-content"] { flex-wrap: wrap; gap: 14px; }
  .form-group { min-width: 0; }
}
.nav-item { transition: none; }
/* Editorial contrast across the shared Superadmin and subadmin workspace. */
:root { --bg-canvas: #f6f5f2; --bg-sidebar: #2e302e; --border-sidebar: #ffffff18; }
.auth-gate-overlay { padding: 0; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(420px,1fr); background: #f8f6f2; overflow-y: auto; }
.auth-story { background: #30332f; color: #f5f0e8; align-self: stretch; min-height: 100vh; padding: 42px 10%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-wordmark { font-size: 24px; font-weight: 650; letter-spacing: -.5px; display: flex; align-items: center; gap: 13px; }
.auth-wordmark span { font-size: 10px; letter-spacing: 3px; border-left: 1px solid #ffffff45; padding-left: 14px; font-weight: 500; }
.auth-story-content { padding: 54px 0 32px; }
.auth-kicker { color: #c7b5a3; font-size: 11px; letter-spacing: 2px; font-weight: 600; }
.auth-story h1 { color: #fffaf2; font-size: clamp(42px,4.7vw,72px); line-height: 1.04; letter-spacing: -2.5px; font-weight: 450; margin: 22px 0; }
.auth-story p { color: #c6c8bf; max-width: 375px; font-size: 16px; line-height: 1.65; }
.display-illustration { position: relative; height: 240px; margin-top: 36px; max-width: 460px; }
.illustration-wide { position: absolute; top: 30px; left: 0; width: 78%; height: 180px; background: #ddd0c8; color: #323232; border: 7px solid #171a17; border-radius: 9px; padding: 23px; box-shadow: 0 22px 30px #00000030; transform: rotate(-4deg); }
.illustration-wide span { display: block; font-size: 23px; line-height: 1.08; font-weight: 600; letter-spacing: -.5px; }
.illustration-wide em { font-family: Georgia,serif; font-weight: 400; }
.illustration-wide small { display: block; margin-top: 16px; font-size: 7px; letter-spacing: 1.2px; }
.illustration-tall { position: absolute; right: 0; top: 0; width: 32%; height: 226px; background: #b9c0a7; color: #30392a; border: 6px solid #171a17; border-radius: 9px; padding: 18px 12px; box-shadow: 0 22px 30px #00000035; transform: rotate(6deg); }
.illustration-tall > span { position: relative; z-index: 1; font-size: 27px; line-height: 1; letter-spacing: -.8px; }
.illustration-circle { width: 86px; height: 86px; margin-top: 14px; border: 17px solid #e4e8d8; border-radius: 50%; }
.illustration-tall small { position: absolute; bottom: 12px; left: 12px; font-size: 6px; letter-spacing: .5px; }
.auth-story-footer { font-size: 12px; color: #bfc3b9; border-top: 1px solid #ffffff25; padding-top: 20px; }
.auth-story-footer span { display: block; font-size: 8px; letter-spacing: 1px; margin-top: 9px; }
.auth-box { width: calc(100% - 70px); max-width: 430px; margin: 40px auto; border: 0; box-shadow: none; background: transparent; padding: 24px 12px; }
.auth-title { font-size: 38px; font-weight: 550; }
.auth-logo-frame { width: 46px; height: 52px; margin-bottom: 30px; }
.auth-box .form-control-input { background: #fff; min-height: 49px; border-color: #d8d3ca; }
.auth-box .form-group { margin-bottom: 22px; }
.auth-box .btn-auth-submit { min-height: 49px; margin-top: 8px; }
.auth-error-text:not(:empty) { background: #f9e9e3; color: #983f32; border: 1px solid #edd1c7; border-radius: 7px; padding: 10px 12px; text-align: left; }
.sidebar, .sidebar-header, .sidebar-footer { background: #2e302e; }
.sidebar-header { border-color: #ffffff18; padding: 28px 22px; }
.brand-title { color: #fffaf2; font-size: 19px; }
.brand-sub { color: #bdb9ae; }
.nav-section-title { color: #a7ab9f; font-size: 10px; }
.nav-item, .nav-icon { color: #d3d5cc; }
.nav-item:hover { background: #ffffff09; color: #fff; }
.nav-item.active { background: #ddd0c8; color: #30332f; box-shadow: 0 3px 10px #00000012; }
.nav-item.active .nav-icon { color: #30332f; }
.nav-item.active .nav-count-badge { background: #32323213; color: #323232; }
.nav-count-badge { background: #ffffff12; color: #d3d5cc; }
.sidebar-footer { border-color: #ffffff18; }
.admin-profile-chip { background: #ffffff08; border-color: #ffffff1c; }
.admin-name-text { color: #f5f0e8; } .admin-role-text { color: #babdb1; }
.topbar { background: #fffefa; border-color: #e9e5dd; }
.page-intro { padding: 8px 0 24px; border-bottom: 1px solid #e2ded5; margin-bottom: 26px; }
.page-intro h1 { font-weight: 550; letter-spacing: -1.5px; }
.page-eyebrow { display: flex; align-items: center; gap: 9px; }
.page-eyebrow::before { content: ''; width: 18px; height: 2px; background: #9c806a; }
.stat-metric-card { border: 1px solid #e7e2d9; border-radius: 12px; background: #fffefa; box-shadow: 0 3px 10px #32323203; }
.stat-metric-card:first-child { background: #ddd0c8; border-color: #ddd0c8; }
.stat-metric-number { font-size: 38px; font-weight: 550; }
.stat-metric-icon { border-radius: 8px; padding: 7px; width: 32px; height: 32px; }
.stat-metric-card:first-child .stat-metric-icon { background: #ffffff55; }
.fleet-kpi-strip { background: #fffefa; border: 1px solid #e7e2d9; }
.kpi-cell:first-child { background: #ddd0c8; }
.kpi-cell { border-color: #e7e2d9; }
.kpi-cell:hover { background: #eee9e1; }
.section-panel-card { border-color: #e5e0d6; box-shadow: 0 3px 12px #32323203; }
.section-panel-header { background: #fffefa; }
.btn-primary { background: #343b32 !important; border-color: #343b32 !important; }
.btn-primary:hover { background: #252d23 !important; border-color: #252d23 !important; box-shadow: 0 3px 8px #32323218; }
.btn-secondary { background: #fffefa; }
.device-ops-table thead th, .enterprise-data-table thead th { background: #eeeae3 !important; }
.device-ops-table tbody td { padding-top: 22px; padding-bottom: 22px; }
.device-ops-table tbody tr:hover { background: #f8f6f0 !important; }
.status-pill.online { background: #e9f1e7 !important; border-color: #c6dcc3 !important; color: #376339 !important; }
.status-pill.offline { background: #f2ede7 !important; border-color: #dfd4c8 !important; color: #776350 !important; }
.inspector-card, .media-asset-card { background: #fffefa; box-shadow: 0 4px 12px #32323204; }
@media(max-width:900px) { .auth-story { padding: 36px 9%; } .auth-story h1 { font-size: 48px; } .display-illustration { height: 220px; } .illustration-wide { padding: 17px; } .illustration-wide span { font-size: 20px; } }
@media(max-width:680px) {
  .auth-gate-overlay { display: flex; flex-direction: column; justify-content: flex-start; }
  .auth-story { min-height: auto; width: 100%; padding: 24px; }
  .auth-story-content { padding: 22px 0 0; } .auth-story h1 { font-size: 37px; margin: 12px 0; letter-spacing: -1.2px; }
  .auth-story h1 br { display: none; } .auth-story p, .display-illustration, .auth-story-footer, .auth-kicker { display: none; }
  .auth-box { width: 100%; max-width: 430px; margin: 0 auto; padding: 28px 24px; }
  .auth-box .auth-logo-frame { display: none; } .auth-title { font-size: 28px; }
  .page-intro { padding-bottom: 20px; } .page-intro h1 { font-size: 34px; }
}

.quiet-empty { padding: 24px; color: var(--text-muted); line-height: 1.6; }
#clients-table-body td:last-child { min-width: 270px; }
.btn-client-delete { color: #a43b30; }