/* ============ Typography: IBM Plex (self-hosted, offline-safe) ============ */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
list-style-type: none;
}
*::before,
*::after {
list-style: none;
list-style-type: none;
}
*::marker {
content: none !important;
display: none !important;
font-size: 0 !important;
color: transparent !important;
}
/* Nuclear button reset */
button {
list-style: none !important;
list-style-type: none !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button::marker,
button::before,
button::after {
content: none !important;
display: none !important;
}
:root {
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--primary-bg: #0f1419;
--secondary-bg: #1a1f2e;
--card-bg: #1e2433;
--sidebar-bg: #151b26;
--bg-dark: #0d1117;
--bg-secondary: #1a1f2e;
--bg-primary: #0f1419;
--accent-blue: #3b82f6;
--accent-blue-dim: rgba(59, 130, 246, 0.2);
--accent-purple: #8b5cf6;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-orange: #f59e0b;
--accent-primary: #3b82f6;
--text-primary: #ffffff;
--text-secondary: #9ca3af;
--text-color: #ffffff;
--border-color: #2d3748;
--border: #2d3748;
--hover-bg: #252b3b;
--input-bg: #1a1f2e;
}
body {
font-family: var(--font-sans);
background: var(--primary-bg);
color: var(--text-primary);
overflow-x: hidden;
}
/* Layout */
.app-container {
display: flex;
min-height: 100vh;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
/* Sidebar */
.sidebar {
width: 260px;
background: var(--sidebar-bg);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 100;
transition: width 0.3s ease, transform 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-item span:not(.nav-item-icon),
.sidebar.collapsed .nav-section-title {
opacity: 0;
width: 0;
overflow: hidden;
white-space: nowrap;
}
.sidebar-toggle {
position: absolute;
top: 20px;
right: 10px;
width: 30px;
height: 30px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
font-size: 14px;
z-index: 101;
transition: transform 0.3s ease;
}
.sidebar-toggle:hover {
background: var(--hover-bg);
transform: scale(1.1);
}
.sidebar.collapsed .sidebar-toggle {
transform: rotate(180deg);
}
.sidebar-header {
padding: 24px 20px;
border-bottom: 1px solid var(--border-color);
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
.sidebar-logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar-nav {
padding: 20px 12px;
flex: 1;
}
.nav-section {
margin-bottom: 28px;
}
.nav-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-secondary);
padding: 8px 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 6px;
transition: background 0.15s;
user-select: none;
}
.nav-section-title:hover {
background: var(--hover-bg);
}
.nav-section-title .chevron {
font-size: 10px;
transition: transform 0.2s;
opacity: 0.5;
}
.nav-section-title .chevron.open {
transform: rotate(90deg);
}
.nav-section-items {
overflow: hidden;
transition: max-height 0.25s ease;
}
.nav-section-items.collapsed {
max-height: 0 !important;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
margin-bottom: 4px;
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
font-weight: 500;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.nav-item:hover {
background: var(--hover-bg);
color: var(--text-primary);
}
.nav-item.active {
background: var(--accent-blue);
color: var(--text-primary);
}
.nav-item-icon {
font-size: 18px;
width: 20px;
text-align: center;
}
.sidebar-footer {
padding: 20px;
padding-bottom: 32px;
border-top: 1px solid var(--border-color);
}
.user-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--card-bg);
border-radius: 8px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
.user-info {
flex: 1;
}
.user-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.user-role {
font-size: 12px;
color: var(--text-secondary);
}
/* Main Content */
.main-content {
flex: 1;
margin-left: 260px;
background: var(--primary-bg);
transition: margin-left 0.3s ease;
width: calc(100% - 260px);
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.main-content.sidebar-collapsed {
margin-left: 70px;
width: calc(100% - 70px);
}
.topbar {
height: 72px;
background: var(--secondary-bg);
border-bottom: 1px solid var(--border-color);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 50;
}
.topbar-left {
display: flex;
align-items: center;
gap: 12px;
list-style: none;
}
.topbar-left *, .topbar-left *::before, .topbar-left *::after, .topbar-left *::marker {
list-style: none !important;
content: none;
}
.topbar-left h1 {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.topbar-right {
display: flex;
align-items: center;
gap: 16px;
padding-right: 8px;
}
.topbar-stats {
display: flex;
gap: 16px;
}
.topbar-stat {
display: flex;
align-items: center;
gap: 6px;
min-width: 70px;
}
.topbar-stat-icon {
font-size: 16px;
}
.topbar-stat-value {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.topbar-stat-label {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
.btn-logout {
margin-top: 16px;
padding: 8px 16px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
width: 100%;
}
.btn-logout:hover {
background: var(--hover-bg);
}
/* Content Area */
.content {
padding: 20px;
overflow-x: hidden;
box-sizing: border-box;
max-width: 100%;
width: 100%;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 32px;
}
/* Stat Cards */
.stat-card {
background: var(--card-bg);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
}
.stat-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.stat-card-title {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-card-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.stat-card-icon.blue {
background: rgba(59, 130, 246, 0.1);
color: var(--accent-blue);
}
.stat-card-icon.green {
background: rgba(16, 185, 129, 0.1);
color: var(--accent-green);
}
.stat-card-icon.orange {
background: rgba(245, 158, 11, 0.1);
color: var(--accent-orange);
}
.stat-card-icon.purple {
background: rgba(139, 92, 246, 0.1);
color: var(--accent-purple);
}
.stat-card-value {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.stat-card-footer {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.stat-trend {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
}
.stat-trend.up {
background: rgba(16, 185, 129, 0.1);
color: var(--accent-green);
}
.stat-trend.down {
background: rgba(239, 68, 68, 0.1);
color: var(--accent-red);
}
.stat-secondary {
color: var(--text-secondary);
}
/* Data Cards */
.data-card {
background: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
.data-card > div {
max-width: 100%;
box-sizing: border-box;
}
/* Data card padding containers */
.data-card [style*="padding"] {
max-width: 100%;
box-sizing: border-box;
}
/* Data card grids */
.data-card [style*="display: grid"],
.data-card [style*="display: 'grid'"] {
max-width: 100%;
box-sizing: border-box;
}
/* Legacy card class for pages that still use it */
.card {
background: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
padding: 32px;
margin-bottom: 24px;
overflow-x: auto;
}
.card h2 {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
}
.card table {
margin-top: 20px;
}
/* Page Header */
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-color);
}
.page-header h1 {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.page-header .text-muted {
font-size: 14px;
color: var(--text-secondary);
}
.page-actions {
display: flex;
gap: 12px;
align-items: center;
}
.data-card-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.data-card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.data-card-actions {
display: flex;
gap: 12px;
}
.btn-primary {
padding: 10px 20px;
background: var(--accent-blue);
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary:hover {
background: #2563eb;
transform: translateY(-1px);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-secondary {
padding: 10px 20px;
background: var(--card-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--hover-bg);
}
.btn-secondary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-warning {
padding: 10px 20px;
background: #d97706;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-warning:hover {
background: #b45309;
transform: translateY(-1px);
}
.btn-warning:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Modal buttons should be full width */
.modal button[type="submit"],
.modal .btn-primary {
width: 100%;
}
.modal .btn-secondary {
width: 100%;
}
.btn-small {
padding: 6px 12px;
min-width: 70px;
font-size: 13px;
background: var(--accent-blue);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.btn-small:hover {
background: #2563eb;
transform: translateY(-1px);
}
.btn-small.btn-secondary {
background: var(--card-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-small.btn-secondary:hover {
background: var(--hover-bg);
}
.btn-small.btn-danger {
background: var(--accent-red);
color: white;
}
.btn-small.btn-danger:hover {
background: #dc2626;
}
.btn-small.btn-success {
background: var(--accent-green);
color: white;
}
.btn-small.btn-success:hover {
background: #059669;
}
.btn-danger {
padding: 10px 20px;
background: var(--accent-red);
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-danger:hover {
background: #dc2626;
transform: translateY(-1px);
}
.btn-success {
padding: 10px 20px;
background: var(--accent-green);
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-success:hover {
background: #059669;
transform: translateY(-1px);
}
/* Table */
.data-table, table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.data-table thead, table thead {
background: var(--secondary-bg);
}
.data-table th, table th {
padding: 10px 8px;
text-align: left;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.data-table td, table td {
padding: 8px;
border-top: 1px solid var(--border-color);
font-size: 13px;
color: var(--text-primary);
overflow: visible;
}
.data-table tr:hover, table tbody tr:hover {
background: var(--hover-bg);
}
.action-buttons {
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
}
.action-buttons button {
white-space: nowrap;
min-width: auto;
padding: 4px 8px;
font-size: 12px;
}
.action-buttons .btn-small {
padding: 4px 8px;
}
/* Badge */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.badge.success, .badge-success {
background: rgba(16, 185, 129, 0.1);
color: var(--accent-green);
}
.badge.danger, .badge-danger, .badge.error {
background: rgba(239, 68, 68, 0.1);
color: var(--accent-red);
}
.badge.warning {
background: rgba(245, 158, 11, 0.1);
color: var(--accent-orange);
}
.badge.info {
background: rgba(59, 130, 246, 0.1);
color: var(--accent-blue);
}
/* Modal Backdrop - for overlay modals */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 1100;
padding: 20px;
backdrop-filter: blur(4px);
}
.modal-backdrop .modal {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
background: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
padding: 24px;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
/* When .modal is used as content container inside modal-overlay */
.modal-overlay .modal {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
background: var(--card-bg);
border-radius: 16px;
border: 1px solid var(--border-color);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
padding: 0;
display: block;
}
.modal-content {
background: var(--card-bg);
border-radius: 16px;
border: 1px solid var(--border-color);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
padding: 32px;
}
.modal-content h2 {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
}
.modal-content form {
display: flex;
flex-direction: column;
}
.modal-header {
padding: 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 24px;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s;
}
.modal-close:hover {
color: var(--text-primary);
}
.modal-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 20px 24px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 12px;
}
/* Form */
.form-group {
margin-bottom: 24px;
}
/* ============ SETTINGS SHELL (rebuilt Settings UI) ============ */
.settings-shell {
--settings-field-width: 520px;
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 28px;
align-items: start;
margin-bottom: 80px;
}
.settings-nav {
position: sticky;
top: 92px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 10px 0;
display: flex;
flex-direction: column;
gap: 1px;
max-height: calc(100vh - 110px);
overflow-y: auto;
}
.settings-nav-item {
display: block;
padding: 9px 16px;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
border-left: 3px solid transparent;
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
line-height: 1.3;
}
.settings-nav-item:hover {
background: var(--hover-bg);
color: var(--text-primary);
}
.settings-nav-item.active {
background: rgba(59, 130, 246, 0.10);
color: var(--accent-blue);
border-left-color: var(--accent-blue);
font-weight: 600;
}
.settings-nav-item.parent {
font-weight: 600;
color: var(--text-primary);
cursor: default;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.4px;
padding-top: 12px;
padding-bottom: 4px;
}
.settings-nav-item.parent:hover {
background: transparent;
color: var(--text-primary);
}
.settings-nav-item.nested {
padding-left: 28px;
font-size: 13px;
}
.settings-panel {
min-width: 0;
}
.settings-section-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.settings-section-desc {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 24px 0;
line-height: 1.5;
max-width: 720px;
}
.settings-section-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--settings-field-width)), var(--settings-field-width)));
gap: 20px 28px;
align-items: start;
max-width: calc((var(--settings-field-width) * 2) + 28px);
}
/* Any direct child of section body that isn't a .settings-field spans the full row
   (sub-headers, info banners, stat panels, action buttons, embedded components). */
.settings-section-body > *:not(.settings-field) {
grid-column: 1 / -1;
}
.settings-field {
margin-bottom: 0;
min-width: 0;
}
.settings-field.wide {
grid-column: 1 / -1;
max-width: var(--settings-field-width);
}
.settings-field-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.settings-field-help {
font-size: 12px;
color: var(--text-secondary);
margin-top: 6px;
line-height: 1.5;
max-width: var(--settings-field-width);
}
.settings-field-help a {
color: var(--accent-blue);
}
.settings-field-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* Inputs INSIDE settings shell always cap at a uniform width regardless of column.
   The .wide modifier only widens the field CONTAINER (for info panels), not the input. */
.settings-shell .settings-field input[type="text"],
.settings-shell .settings-field input[type="password"],
.settings-shell .settings-field input[type="email"],
.settings-shell .settings-field input[type="number"],
.settings-shell .settings-field input[type="url"],
.settings-shell .settings-field input[type="date"],
.settings-shell .settings-field input[type="datetime-local"],
.settings-shell .settings-field select,
.settings-shell .settings-field textarea {
width: 100%;
max-width: var(--settings-field-width);
box-sizing: border-box;
}
/* Improve native <select> option highlight — best effort across browsers */
.settings-shell .settings-field select option {
padding: 8px 12px;
background: var(--secondary-bg);
color: var(--text-primary);
}
.settings-shell .settings-field select option:checked,
.settings-shell .settings-field select option:hover {
background: var(--accent-blue) linear-gradient(0deg, var(--accent-blue), var(--accent-blue));
color: white;
}
.settings-field-info {
margin-top: 10px;
padding: 12px 14px;
background: var(--secondary-bg);
border-radius: 8px;
border-left: 3px solid var(--accent-blue);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.6;
max-width: var(--settings-field-width);
width: 100%;
box-sizing: border-box;
}
.settings-field-info.success {
border-left-color: var(--accent-green, #10b981);
}
.settings-field-info.warn {
border-left-color: var(--accent-orange, #f59e0b);
}
.settings-field-info strong {
color: var(--text-primary);
}
.settings-field-info code {
background: var(--card-bg);
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
}
.dirty-bar {
position: fixed;
left: 260px;
right: 0;
bottom: 0;
padding: 14px 32px;
background: var(--card-bg);
border-top: 1px solid var(--border-color);
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
z-index: 100;
transform: translateY(110%);
transition: transform 0.25s ease;
}
.main-content.sidebar-collapsed ~ * .dirty-bar,
.main-content.sidebar-collapsed .dirty-bar {
left: 70px;
}
.dirty-bar.active {
transform: translateY(0);
}
.dirty-bar-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.dirty-bar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-orange, #f59e0b);
animation: dirty-pulse 1.5s ease-in-out infinite;
}
@keyframes dirty-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.dirty-bar-actions {
display: flex;
gap: 10px;
}
.dirty-bar .btn-secondary,
.dirty-bar .btn-primary {
padding: 8px 18px;
font-size: 13px;
}
@media (max-width: 900px) {
.settings-shell {
grid-template-columns: 1fr;
gap: 12px;
}
.settings-section-body {
grid-template-columns: 1fr;
max-width: none;
gap: 18px;
}
.settings-field.wide {
max-width: none;
}
.settings-shell .settings-field input[type="text"],
.settings-shell .settings-field input[type="password"],
.settings-shell .settings-field input[type="email"],
.settings-shell .settings-field input[type="number"],
.settings-shell .settings-field input[type="url"],
.settings-shell .settings-field input[type="date"],
.settings-shell .settings-field input[type="datetime-local"],
.settings-shell .settings-field select,
.settings-shell .settings-field textarea,
.settings-field-help,
.settings-field-info {
max-width: 100%;
}
.settings-nav {
position: static;
flex-direction: row;
overflow-x: auto;
max-height: none;
padding: 6px;
gap: 2px;
}
.settings-nav-item {
flex-shrink: 0;
border-left: none;
border-bottom: 3px solid transparent;
padding: 8px 14px;
}
.settings-nav-item.active {
border-left: none;
border-bottom-color: var(--accent-blue);
}
.settings-nav-item.parent {
display: none;
}
.settings-nav-item.nested {
padding-left: 14px;
}
.dirty-bar {
left: 0;
padding: 12px 16px;
}
}
@media (max-width: 560px) {
.dirty-bar {
align-items: stretch;
flex-direction: column;
}
.dirty-bar-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.dirty-bar .btn-secondary,
.dirty-bar .btn-primary {
width: 100%;
}
}
.form-group label {
display: block;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.form-label {
display: block;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
width: 100%;
padding: 12px 16px;
background: var(--secondary-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 15px;
transition: all 0.2s;
}
/* Fix dropdown options for dark theme */
select option {
background: var(--secondary-bg);
color: var(--text-primary);
padding: 10px;
}
select option:hover,
select option:focus,
select option:checked {
background: var(--accent-blue);
color: white;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-textarea,
textarea {
min-height: 100px;
resize: vertical;
font-family: inherit;
}
select {
cursor: pointer;
}
input::placeholder,
textarea::placeholder {
color: var(--text-secondary);
opacity: 0.6;
}
/* Loading */
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
color: var(--text-secondary);
}
/* Login */
.login-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #0f1419 0%, #1e2433 100%);
}
.login-box {
background: var(--card-bg);
border: 1px solid var(--border-color);
padding: 48px;
border-radius: 16px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.login-logo {
text-align: center;
margin-bottom: 32px;
}
.login-logo-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 16px;
}
.login-title {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.login-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
/* Alert */
.alert {
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.alert-error, .alert-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--accent-red);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 14px;
}
.alert-warning {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.alert-info {
background: rgba(59, 130, 246, 0.1);
border: 1px solid var(--accent-blue);
color: var(--accent-blue);
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 14px;
}
/* Responsive */
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: repeat(2, 1fr);
}

/* ============ TABLET RESPONSIVE FIXES ============ */
/* 4-column grids become 2-column */
[style*="gridTemplateColumns: 'repeat(4"],
[style*="grid-template-columns: repeat(4"],
div[style*="repeat(4, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
}

/* Data cards prevent overflow but allow dropdowns */
.data-card {
max-width: 100% !important;
overflow: visible !important;
}

/* Reduce content padding */
.content {
padding: 16px !important;
}

/* Stat values slightly smaller */
[style*="fontSize: '28px'"] {
font-size: 24px !important;
}

/* Modal max width */
.modal-content {
max-width: 90vw !important;
}
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0,0,0,0.3);
padding-top: env(safe-area-inset-top, 0px);
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-toggle {
display: none;
}
.main-content {
margin-left: 0 !important;
width: 100%;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.topbar-stats {
display: none;
}
.topbar {
height: 60px;
padding: 0 16px;
}
.topbar-left {
gap: 16px;
}
.topbar-left h1, .topbar-left > span {
font-size: 18px;
}
.btn-logout {
padding: 8px 12px;
font-size: 13px;
}
/* Stack stat cards in grid-2 */
.grid-2 {
grid-template-columns: 1fr;
}
/* Improve code blocks on mobile */
code {
word-break: break-all;
}
/* Remove table styles - handled by card layout above */
}
.form-group input,
.form-group select,
.form-group textarea {
font-size: 16px; /* Prevents zoom on iOS */
}
/* Compact stat cards on mobile */
.stat-card-value {
font-size: 28px;
}
.stat-card-title {
font-size: 13px;
}
/* Better button sizing on mobile */
.btn-primary,
.btn-secondary {
min-height: 44px; /* iOS touch target size */
padding: 12px 20px;
}
.btn-small {
min-height: 36px;
padding: 8px 14px;
}
/* Improve modal on mobile */
.modal-content {
margin: 20px;
max-width: calc(100% - 40px);
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* Better card spacing on mobile */
.card,
.data-card {
margin-bottom: 16px;
}
/* Improve action buttons in tables */
.action-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Better header spacing */
.content > div > div:first-child {
flex-wrap: wrap;
gap: 12px;
}
/* Improve code blocks on mobile */
code {
word-break: break-all;
}
}
/* Hamburger Menu Button */
.hamburger {
position: relative;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
padding: 0;
margin: 0;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
font-size: 0;
overflow: hidden;
outline: none;
}
.hamburger:hover {
background: var(--hover-bg);
}
.hamburger-line {
position: absolute;
left: 11px;
width: 20px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s ease;
pointer-events: none;
}
.hamburger-line:nth-child(1) { top: 13px; }
.hamburger-line:nth-child(2) { top: 20px; }
.hamburger-line:nth-child(3) { top: 27px; }
.hamburger:hover .hamburger-line {
background: var(--accent-blue);
}
.hamburger.active .hamburger-line:nth-child(1) {
top: 20px;
transform: rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3) {
top: 20px;
transform: rotate(-45deg);
}
/* Mobile overlay */
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.active {
display: block;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--secondary-bg);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hover-bg);
}

/* ============ ENHANCED MOBILE RESPONSIVE ============ */
/* Small phones */
@media (max-width: 480px) {
/* Ensure text doesn't overflow */
* {
max-width: 100%;
word-wrap: break-word;
}

/* ============ FORCE SINGLE COLUMN ON SMALL PHONES ============ */
/* All 4-column and 3-column grids become single column */
[style*="gridTemplateColumns: 'repeat(4"],
[style*="grid-template-columns: repeat(4"],
[style*="gridTemplateColumns: repeat(4"],
div[style*="repeat(4, 1fr)"],
[style*="gridTemplateColumns: 'repeat(3"],
[style*="grid-template-columns: repeat(3"],
div[style*="repeat(3, 1fr)"],
[style*="gridTemplateColumns: 'repeat(2"],
[style*="grid-template-columns: repeat(2"],
div[style*="repeat(2, 1fr)"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}

/* Dashboard grid single column */
.dashboard-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}

/* Modal improvements */
.modal-content {
margin: 10px;
max-width: calc(100vw - 20px) !important;
max-height: calc(100vh - 20px);
padding: 16px;
width: calc(100vw - 20px) !important;
}
.modal-content h2 {
font-size: 18px;
margin-bottom: 16px;
}
/* Form inputs full width */
.form-input, .form-select, select, input, textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* Buttons stack vertically */
.modal-content > div:last-child {
flex-direction: column !important;
}
.modal-content > div:last-child button {
width: 100%;
}
/* Data cards compact */
.data-card {
min-height: auto !important;
max-width: 100% !important;
overflow: hidden !important;
margin-bottom: 12px !important;
}
.data-card-header {
padding: 12px !important;
}
.data-card-title {
font-size: 13px !important;
}
/* Page titles smaller */
.page-title, h1 {
font-size: 18px !important;
}
h2, .data-card h3 {
font-size: 14px !important;
}
/* Hide non-essential columns in inline tables (only for non-card tables) */
table.no-mobile-cards th:nth-child(n+4),
table.no-mobile-cards td:nth-child(n+4) {
display: none;
}
/* Keep action buttons visible (only for non-card tables) */
table.no-mobile-cards th:last-child,
table.no-mobile-cards td:last-child {
display: table-cell !important;
}
/* Stat cards smaller */
.stat-card {
padding: 10px;
}
.stat-value, .stat-card-value {
font-size: 20px !important;
}
.stat-label {
font-size: 11px !important;
}
/* Live Insights stat values */
[style*="fontSize: '28px'"],
[style*="fontSize: '24px'"],
[style*="fontSize: '20px'"] {
font-size: 18px !important;
}
[style*="fontSize: '14px'"],
[style*="fontSize: '13px'"] {
font-size: 11px !important;
}
/* Server infrastructure grid */
.data-card[style*="minHeight: 400px"] {
min-height: 200px !important;
}
/* Topbar compact */
.topbar {
height: 54px;
padding: 0 10px;
}
.topbar-left h1, .topbar-left > span {
font-size: 15px !important;
}
/* Content padding reduced */
.content {
padding: 10px !important;
}
/* Login box full width */
.login-box {
width: 100%;
max-width: calc(100vw - 40px);
padding: 24px 20px;
}
/* Badge text smaller */
.badge {
font-size: 9px;
padding: 2px 6px;
}
/* Buttons smaller */
.btn, button:not(.hamburger) {
padding: 8px 12px !important;
font-size: 12px !important;
}
.btn-sm, button.btn-sm {
padding: 4px 8px !important;
font-size: 11px !important;
}
/* Tabs even more compact */
.tab-btn, [style*="padding: '12px 24px'"] {
padding: 8px 12px !important;
font-size: 12px !important;
}
/* Hide mini charts and sparklines entirely */
[style*="width: '60px'"][style*="height"],
svg[width="60"],
.sparkline {
display: none !important;
}
/* Progress bars thinner */
[style*="height: '8px'"],
[style*="height: 8px"] {
height: 6px !important;
}
/* Reduce gaps everywhere */
[style*="gap: '20px'"],
[style*="gap: 20px"] {
gap: 10px !important;
}
[style*="gap: '16px'"],
[style*="gap: 16px"] {
gap: 8px !important;
}
/* Action icons only (hide text) */
.action-buttons button span:not(:first-child),
[style*="gap: 6px"] button span:not(:first-child) {
display: none;
}
/* Full width action buttons */
.action-buttons {
flex-wrap: wrap !important;
justify-content: flex-end !important;
}
/* Sidebar overlay darker */
.sidebar-overlay {
background: rgba(0,0,0,0.7) !important;
}
/* Hamburger button - prevent mobile button overrides */
.hamburger {
position: relative !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
font-size: 0 !important;
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
}

/* ============ COMPREHENSIVE MOBILE LAYOUT FIXES ============ */
@media (max-width: 768px) {

/* --- ALL tables: card-based layout on mobile --- */
/* Transform ANY table (not just .data-table) into stacked cards */
table:not(.no-mobile-cards) thead {
  display: none !important;
}
table:not(.no-mobile-cards),
table:not(.no-mobile-cards) tbody,
table:not(.no-mobile-cards) tr {
  display: block !important;
  width: 100% !important;
}
table:not(.no-mobile-cards) {
  table-layout: auto !important;
}
table:not(.no-mobile-cards) tr {
  margin-bottom: 12px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
table:not(.no-mobile-cards) td {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
  border: none !important;
  text-align: right !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
table:not(.no-mobile-cards) td:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* data-label pseudo-element for all tables */
table:not(.no-mobile-cards) td[data-label]::before {
  content: attr(data-label) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  padding-right: 12px !important;
  font-size: 12px !important;
}
/* Hide checkbox column on mobile */
table:not(.no-mobile-cards) td:first-child:not([data-label]) {
  display: none !important;
}

/* --- Action buttons: icon grid on mobile --- */
table td .action-buttons,
table td > div[style*="flexWrap"] ,
table td > div[style*="gap: '6px'"],
table td > div[style*="gap: 6px"] {
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
/* Action buttons cell: no label, full width */
table td:last-child:not([data-label]) {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
table td:last-child:not([data-label])::before {
  content: '' !important;
  display: none !important;
}
/* Action buttons smaller on mobile */
table td button,
table td .btn-small {
  padding: 6px 10px !important;
  font-size: 12px !important;
  min-width: auto !important;
  white-space: nowrap !important;
}

/* --- Lines table: fix fixed-width columns --- */
table[style*="tableLayout"] {
  table-layout: auto !important;
}
table[style*="tableLayout"] th,
table[style*="tableLayout"] td {
  width: auto !important;
}

/* --- Reseller action buttons: wrap into grid --- */
table td > div[style*="flexWrap: 'nowrap'"],
table td > div[style*="flex-wrap: nowrap"],
table td[style*="whiteSpace: 'nowrap'"] > div {
  flex-wrap: wrap !important;
  white-space: normal !important;
}
table td[style*="whiteSpace"] {
  white-space: normal !important;
}

/* --- Page headers: stack on mobile --- */
div[style*="justifyContent: 'space-between'"][style*="alignItems: 'center'"] {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
/* Keep button groups horizontal but allow wrap */
div[style*="justifyContent: 'space-between'"] > div[style*="gap"] {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

/* --- Search/filter bars: stack vertically --- */
div[style*="gap: '15px'"][style*="flexWrap"],
div[style*="gap: 15px"][style*="flexWrap"],
div[style*="gap: '15px'"][style*="marginBottom"],
div[style*="gap: 15px"][style*="marginBottom"] {
  flex-direction: column !important;
  gap: 8px !important;
}
/* Search inputs full width */
div[style*="gap: '15px'"] input,
div[style*="gap: '15px'"] select,
div[style*="gap: 15px"] input,
div[style*="gap: 15px"] select {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
}

/* --- Form grids: single column on mobile --- */
div[style*="gridTemplateColumns: '1fr 1fr'"],
div[style*="grid-template-columns: 1fr 1fr"],
div[style*="gridTemplateColumns"][style*="gap: '15px'"] {
  grid-template-columns: 1fr !important;
}

/* --- Info alert boxes: compact --- */
.alert, .alert-info, div[style*="marginBottom: '20px'"] > strong ~ span {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* --- Badges in tables: better sizing --- */
table td .badge {
  font-size: 10px !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
}

/* --- Code blocks in tables: truncate on mobile --- */
table td code {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  font-size: 11px !important;
}

/* --- Monospace text in cells: truncate --- */
table td[style*="fontFamily: 'monospace'"],
table td[style*="fontFamily: monospace"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* --- Pagination: compact on mobile --- */
div[style*="justifyContent: 'center'"][style*="gap"] button {
  padding: 6px 10px !important;
  font-size: 12px !important;
  min-width: 32px !important;
}

/* --- Modal: full width on mobile --- */
.modal-content {
  max-width: calc(100vw - 20px) !important;
  width: calc(100vw - 20px) !important;
  margin: 10px !important;
  padding: 16px !important;
  max-height: calc(100vh - 40px) !important;
}

/* --- Tabs: horizontal scroll --- */
div[style*="borderBottom"][style*="gap"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
}
div[style*="borderBottom"][style*="gap"]::-webkit-scrollbar {
  display: none !important;
}
div[style*="borderBottom"][style*="gap"] button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}

/* --- Two-column detail grids: single column --- */
div[style*="gridTemplateColumns: '1fr 1fr'"],
div[style*="gridTemplateColumns: 'repeat(2"],
div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr !important;
}

/* --- Cards with excessive padding: compact --- */
div[style*="padding: '32px'"],
div[style*="padding: 32px"] {
  padding: 16px !important;
}
div[style*="padding: '24px'"],
div[style*="padding: 24px"] {
  padding: 12px !important;
}

/* --- Empty space fix: prevent wide left gutters --- */
.content {
  padding: 12px !important;
  overflow-x: hidden !important;
}
.content > div {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* --- Prevent any element from causing horizontal scroll --- */
* {
  max-width: 100vw;
}
body {
  overflow-x: hidden !important;
}
}

/* ============ EXTRA SMALL PHONE TWEAKS (< 400px) ============ */
@media (max-width: 400px) {
/* Even tighter padding */
.content {
  padding: 8px !important;
}
table:not(.no-mobile-cards) tr {
  padding: 8px !important;
}
table:not(.no-mobile-cards) td {
  font-size: 12px !important;
}
/* Stack ALL action buttons vertically on very small screens */
table td > div[style*="flex"],
table td.action-buttons {
  flex-direction: column !important;
  align-items: stretch !important;
}
table td > div[style*="flex"] button,
table td.action-buttons button {
  width: 100% !important;
  text-align: center !important;
}
/* Topbar even tighter */
.topbar {
  height: 48px !important;
  padding: 0 8px !important;
}
.topbar h1, .topbar span[style*="fontSize"] {
  font-size: 13px !important;
}
}

/* Tablet and small desktop */
@media (max-width: 768px) {
/* Horizontal scroll containers for tables */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Flex containers wrap */
[style*="display: flex"][style*="gap"]:not([style*="flex-direction: column"]) {
flex-wrap: wrap !important;
}
/* Server cards in grid */
[style*="grid-template-columns: repeat(auto-fit"] {
grid-template-columns: 1fr !important;
}
/* Action buttons compact */
.action-buttons, [style*="display: flex"][style*="gap: 6px"] {
gap: 4px !important;
}
.action-buttons button, [style*="gap: 6px"] button {
padding: 6px 10px !important;
font-size: 12px !important;
}
/* Headers flex-wrap */
[style*="justifyContent: 'space-between'"] {
flex-wrap: wrap !important;
gap: 10px !important;
}

/* ============ FIX INLINE GRID LAYOUTS FOR MOBILE ============ */
/* Target all inline 4-column grids (Live Insights, Stats, etc.) */
[style*="gridTemplateColumns: 'repeat(4"],
[style*="grid-template-columns: repeat(4"],
[style*="gridTemplateColumns: repeat(4"],
div[style*="repeat(4, 1fr)"] {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}

/* Target 3-column grids */
[style*="gridTemplateColumns: 'repeat(3"],
[style*="grid-template-columns: repeat(3"],
div[style*="repeat(3, 1fr)"] {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}

/* Data cards - prevent overflow */
.data-card {
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}

.data-card > div {
max-width: 100% !important;
overflow-x: auto !important;
}

/* Content container - prevent horizontal scroll */
.content {
max-width: 100vw !important;
overflow-x: hidden !important;
padding: 12px !important;
}

/* Live Insights specific fixes */
.data-card-title {
font-size: 14px !important;
}

/* Stat values in Live Insights */
[style*="fontSize: '28px'"],
[style*="fontSize: '24px'"] {
font-size: 20px !important;
}

/* Progress bars - ensure they fit */
[style*="background: 'var(--secondary-bg)'"][style*="height: '8px'"],
[style*="background: var(--secondary-bg)"][style*="height: 8px"] {
max-width: 100% !important;
}

/* Page headers - stack buttons below title */
[style*="justifyContent: 'space-between'"][style*="alignItems: 'center'"] {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}

/* Button groups wrap */
[style*="display: 'flex'"][style*="gap: '10px'"],
[style*="display: 'flex'"][style*="gap: '8px'"],
[style*="display: flex"][style*="gap: 10px"],
[style*="display: flex"][style*="gap: 8px"] {
flex-wrap: wrap !important;
}

/* Tabs scroll horizontally if needed */
.tabs, [style*="borderBottom: '1px solid var(--border-color)'"] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
}

/* Tab buttons don't shrink */
.tab-btn, [style*="padding: '12px 24px'"] {
flex-shrink: 0 !important;
padding: 10px 16px !important;
font-size: 13px !important;
white-space: nowrap !important;
}

/* Charts and large visualizations */
[style*="height: '300px'"],
[style*="height: '400px'"] {
height: auto !important;
min-height: 200px !important;
max-height: 300px !important;
}

/* Mini charts in stats */
[style*="width: '60px'"][style*="height: '30px'"] {
display: none !important;
}

/* Server status cards */
[style*="minWidth: '200px'"],
[style*="min-width: 200px"] {
min-width: 100% !important;
}

/* Wide content boxes */
[style*="width: '100%'"][style*="overflowX"],
[style*="width: 100%"][style*="overflow-x"] {
max-width: calc(100vw - 24px) !important;
}

/* Reset all minWidth on mobile */
[style*="minWidth: '200px'"],
[style*="minWidth: '250px'"],
[style*="minWidth: '300px'"],
[style*="minWidth: '320px'"],
[style*="minWidth: '400px'"],
[style*="minWidth: '500px'"],
[style*="min-width: 200px"],
[style*="min-width: 250px"],
[style*="min-width: 300px"],
[style*="min-width: 320px"],
[style*="min-width: 400px"],
[style*="min-width: 500px"] {
min-width: 0 !important;
width: 100% !important;
}

/* Fixed widths become max-widths */
[style*="width: '500px'"],
[style*="width: '600px'"],
[style*="width: '700px'"],
[style*="width: '800px'"],
[style*="width: 500px"],
[style*="width: 600px"],
[style*="width: 700px"],
[style*="width: 800px"] {
width: 100% !important;
max-width: 100% !important;
}

/* Ensure all flex children can shrink */
[style*="display: flex"] > *,
[style*="display: 'flex'"] > * {
min-width: 0 !important;
flex-shrink: 1 !important;
}

/* Tables horizontal scroll (only for non-card tables) */
table.no-mobile-cards {
display: block;
overflow-x: auto;
max-width: 100%;
}

/* Form groups stack vertically */
[style*="display: 'flex'"][style*="gap"][style*="marginBottom"],
[style*="display: flex"][style*="gap"][style*="margin-bottom"] {
flex-direction: column !important;
}

/* Two-column form layouts become single column */
[style*="gridTemplateColumns: '1fr 1fr'"],
[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}

/* Checkbox/radio inline groups wrap */
[style*="display: 'flex'"][style*="alignItems: 'center'"][style*="gap"] {
flex-wrap: wrap !important;
}

/* Search and filter bars */
[style*="display: 'flex'"][style*="justifyContent: 'space-between'"] input,
[style*="display: flex"][style*="justify-content: space-between"] input {
width: 100% !important;
min-width: 0 !important;
}
}

/* Mobile Responsive Tables - Card Layout */
@media (max-width: 768px) {
/* Hide table headers on mobile */
.data-table thead {
display: none;
}
/* Make each row a card */
.data-table,
.data-table tbody,
.data-table tr {
display: block;
width: 100%;
}
.data-table tr {
margin-bottom: 16px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
}
.data-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border: none;
text-align: right;
}
.data-table td:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
/* Add labels before data on mobile */
.data-table td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-secondary);
text-align: left;
flex: 1;
padding-right: 10px;
}
/* Action buttons column - no label needed */
.data-table td.action-buttons::before {
content: '';
}
.data-table td.action-buttons {
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
/* Status badges stay inline */
.data-table td .badge {
margin-left: auto;
}
/* Code blocks in tables */
.data-table td code {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
}
/* Grid layouts */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
/* Modal overlay improvements */
.modal-overlay {
animation: fadeIn 0.2s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Better form styling in modals */
.modal .form-input,
.modal .form-select,
.modal .form-textarea {
background: var(--primary-bg);
border: 1px solid var(--border-color);
}
/* Inline form styling (for add user, etc) */
.inline-form {
background: var(--secondary-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
.inline-form h3 {
color: var(--text-primary);
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
}
/* Button group */
.button-group {
display: flex;
gap: 12px;
margin-top: 20px;
}
/* Quick action buttons */
.quick-action-btn {
width: 100%;
padding: 16px;
background: var(--secondary-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.quick-action-btn:hover {
background: var(--hover-bg);
border-color: var(--accent-blue);
transform: translateY(-2px);
}
.quick-action-btn.primary {
background: var(--accent-blue);
border-color: var(--accent-blue);
}
.quick-action-btn.primary:hover {
background: #2563eb;
}
/* Inline form container */
div[style*="background: 'var(--card-bg)'"],
div[style*="background: var(--card-bg)"] {
color: var(--text-primary);
}
div[style*="background: 'var(--card-bg')"] h3,
div[style*="background: var(--card-bg)"] h3 {
color: var(--text-primary) !important;
}
/* Grid layouts in forms */
div[style*="gridTemplateColumns"] {
gap: 15px;
}
/* Button styling consistency */
button[style*="background: '#dc3545'"],
button[style*="background: '#28a745'"],
button[style*="background: '#666'"] {
border-radius: 6px;
padding: 8px 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
/* Table styling for dark theme */
.table-container table {
background: var(--card-bg);
}
.table-container th {
background: var(--secondary-bg);
color: var(--text-secondary);
}
.table-container td {
color: var(--text-primary);
border-top: 1px solid var(--border-color);
}
.table-container tr:hover {
background: var(--hover-bg);
}

/* Shadow UI refinement layer - global pass, 2026-05-20 */
:root {
--primary-bg: #0b0d10;
--secondary-bg: #111418;
--card-bg: #171b20;
--sidebar-bg: #0f1216;
--bg-dark: #080a0d;
--bg-secondary: #111418;
--bg-primary: #0b0d10;
--surface-0: #0b0d10;
--surface-1: #111418;
--surface-2: #171b20;
--surface-3: #20262d;
--surface-hover: #222932;
--accent-blue: #2f8cff;
--accent-blue-dim: rgba(47, 140, 255, 0.16);
--accent-purple: #7c6df0;
--accent-green: #23c483;
--accent-red: #ff5c5c;
--accent-orange: #f6a72a;
--accent-yellow: #e8b931;
--accent-primary: #2f8cff;
--text-primary: #f4f7fb;
--text-secondary: #9aa6b2;
--text-muted: #6f7b88;
--text-color: #f4f7fb;
--border-color: #2a313a;
--border: #2a313a;
--hover-bg: #20262d;
--input-bg: #0f1318;
--shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
--shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
--radius-sm: 5px;
--radius-md: 8px;
--radius-lg: 8px;
}

html {
background: var(--primary-bg);
scrollbar-color: #3a4450 var(--surface-0);
}

body {
background:
linear-gradient(180deg, #0d1014 0%, var(--primary-bg) 360px),
var(--primary-bg);
font-size: 14px;
line-height: 1.45;
letter-spacing: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

body *,
body *::before,
body *::after {
letter-spacing: 0 !important;
}

::selection {
background: rgba(47, 140, 255, 0.32);
color: #fff;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: var(--surface-0);
}

::-webkit-scrollbar-thumb {
background: #323b46;
border: 2px solid var(--surface-0);
border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
background: #46515f;
}

.sidebar {
background: linear-gradient(180deg, #10141a 0%, #0d1014 100%);
border-right-color: #252c35;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02), 14px 0 40px rgba(0, 0, 0, 0.18);
}

.sidebar-header {
padding: 18px 16px;
border-bottom-color: #252c35;
}

.sidebar-logo {
font-size: 17px;
font-weight: 700;
}

.sidebar-logo-icon,
.user-avatar,
.login-logo-icon {
background: #182333;
border: 1px solid rgba(47, 140, 255, 0.28);
box-shadow: var(--shadow-subtle);
}

.sidebar-nav {
padding: 14px 10px;
display: flex;
flex-direction: column;
}

.nav-section {
margin-bottom: 16px;
}

.nav-section-system {
order: 90;
}

.nav-section-footer {
order: 100;
}

.nav-section-title {
padding: 7px 10px;
font-size: 10px;
font-weight: 700;
color: #7d8996;
}

.nav-item {
min-height: 36px;
padding: 9px 10px;
margin-bottom: 2px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 550;
color: #a3adba;
}

.nav-item:hover {
background: rgba(255, 255, 255, 0.045);
color: var(--text-primary);
}

.nav-item.active {
background: rgba(47, 140, 255, 0.16);
color: #dbeafe;
box-shadow: inset 3px 0 0 var(--accent-blue);
}

.nav-item-icon {
font-size: 16px;
}

.sidebar-footer {
padding: 14px;
padding-bottom: 18px;
border-top-color: #252c35;
}

.user-profile {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: var(--radius-md);
}

.main-content {
background: transparent;
}

.topbar {
height: 64px;
background: rgba(15, 18, 22, 0.92);
backdrop-filter: blur(14px);
border-bottom-color: #252c35;
padding: 0 24px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

.topbar-left {
min-width: 0;
flex: 1 1 auto;
}

.topbar-left h1 {
font-size: 20px;
font-weight: 700;
}

.topbar-left > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.topbar-version-pill {
height: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.045);
color: var(--text-muted);
font-size: 11px;
font-weight: 650;
letter-spacing: 0;
white-space: nowrap;
}

.topbar-right {
min-width: 0;
gap: 8px;
flex: 0 1 auto;
overflow: hidden;
}

.topbar-stats {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
flex-wrap: nowrap;
}

.topbar-stat {
min-width: 0;
flex: 0 0 auto;
height: 38px;
min-height: 38px;
padding: 0 8px;
gap: 5px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: var(--radius-sm);
box-sizing: border-box;
}

.topbar-stat-icon {
font-size: 14px;
line-height: 1;
flex: 0 0 auto;
}

.topbar-stat > div {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}

.topbar-stat-value {
font-size: 12px;
line-height: 14px;
}

.topbar-stat-label {
font-size: 10px;
line-height: 12px;
color: var(--text-muted);
}

.topbar-stat-network {
min-width: 86px;
}

.topbar-stat-library {
min-width: 72px;
}

.topbar-stat-requests .topbar-stat-value {
color: #f59e0b;
}

.topbar .btn-logout {
margin-top: 0;
width: auto;
min-width: 82px;
height: 38px;
min-height: 38px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
white-space: nowrap;
font-size: 13px;
}

.content {
padding: 22px;
}

/* Topbar owns page identity; suppress duplicate page-level headings in content. */
.content > div > h1:first-child,
.content > div > h2:first-child,
.content > div > .page-title:first-child,
.content > div > div:first-child > h1:first-child,
.content > div > div:first-child > h2:first-child,
.content > div > div:first-child > .page-title:first-child {
display: none !important;
}

.content > div > .page-header:first-child {
border-bottom: 0;
padding-bottom: 0;
}

.content > div > .page-header:first-child > h1:first-child,
.content > div > .page-header:first-child > .page-title:first-child,
.content > div > .page-header:first-child > div:first-child:has(> h1:first-child),
.content > div > .page-header:first-child > div:first-child:has(> .page-title:first-child) {
display: none !important;
}

.content > div > .page-header:first-child:has(> h1:first-child),
.content > div > .page-header:first-child:has(> .page-title:first-child),
.content > div > .page-header:first-child:has(> div:first-child > h1:first-child),
.content > div > .page-header:first-child:has(> div:first-child > .page-title:first-child) {
justify-content: flex-end;
}

.content > .channels-page > .data-card-header > .data-card-title {
display: none !important;
}

.content > .channels-page > .data-card-header {
justify-content: flex-start;
}

.content > .channels-page > .data-card-header > .channels-toolbar {
justify-content: flex-start !important;
max-width: none !important;
width: 100%;
}

.custom-epg-page {
font-family: inherit;
position: relative;
padding-top: 56px;
min-height: calc(100vh - 180px);
height: auto !important;
align-items: stretch;
}

.custom-epg-section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 18px !important;
}

.custom-epg-page > .custom-epg-sidebar > .custom-epg-section-header:first-child {
position: absolute;
top: 0;
left: 0;
right: 0;
}

.custom-epg-page > .custom-epg-sidebar > .custom-epg-section-header:first-child .btn-primary {
margin-left: auto;
}

.custom-epg-sidebar,
.custom-epg-detail {
min-height: 0;
}

.custom-epg-section-title {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.25;
letter-spacing: 0;
color: var(--text-primary);
margin: 0 !important;
}

.custom-epg-config-card {
font-family: inherit;
}

.custom-epg-config-title {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3;
letter-spacing: 0;
color: var(--text-primary);
}

.custom-epg-page .btn-primary,
.custom-epg-page .btn-secondary,
.custom-epg-page .btn-icon {
font-family: inherit;
}

.settings-domains-table th:last-child,
.settings-domains-table td:last-child {
width: 92px;
min-width: 92px;
white-space: nowrap;
text-align: right;
}

.settings-domain-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
white-space: nowrap;
}

.settings-domain-actions .btn-small {
margin: 0 !important;
flex: 0 0 auto;
}

.page-header {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom-color: #252c35;
}

.page-header h1 {
font-size: 24px;
font-weight: 700;
}

.dashboard-grid {
gap: 14px;
margin-bottom: 22px;
}

.stat-card,
.data-card,
.card,
.inline-form,
.login-box,
.modal-content,
.modal-overlay .modal,
.modal-backdrop .modal {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)), var(--card-bg);
border-color: #2a313a;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft), var(--shadow-subtle);
}

.stat-card {
padding: 18px;
}

.stat-card::before {
height: 2px;
background: var(--accent-blue);
}

.stat-card-title {
font-size: 12px;
font-weight: 650;
color: var(--text-secondary);
}

.stat-card-value {
font-size: 28px;
line-height: 1.05;
margin-bottom: 6px;
}

.stat-card-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
font-size: 20px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.055);
}

.data-card-header {
padding: 16px 18px;
border-bottom-color: #252c35;
}

.data-card-title {
font-size: 16px;
font-weight: 700;
}

.card {
padding: 22px;
margin-bottom: 18px;
}

.card-header {
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 1px solid #252c35;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.card-header h2,
.card-header h3 {
margin: 0;
line-height: 1.25;
}

.card-body {
padding-top: 2px;
}

.card h2 {
font-size: 22px;
margin-bottom: 18px;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-small,
.quick-action-btn,
.btn-logout {
border-radius: var(--radius-md);
box-shadow: none;
transform: none;
font-weight: 650;
}

.btn-primary,
.btn.btn-primary,
.quick-action-btn.primary {
background: rgba(59, 130, 246, 0.16) !important;
border: 1px solid rgba(59, 130, 246, 0.42) !important;
color: #bfdbfe !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.quick-action-btn.primary:hover {
background: rgba(59, 130, 246, 0.24) !important;
border-color: rgba(96, 165, 250, 0.62) !important;
transform: none !important;
}

.btn-secondary,
.btn.btn-secondary,
.btn-small,
.btn-logout,
.quick-action-btn {
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid #313945 !important;
color: var(--text-primary) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-small:hover,
.btn-logout:hover,
.quick-action-btn:hover {
background: rgba(255, 255, 255, 0.065) !important;
border-color: #465261 !important;
transform: none !important;
}

.btn-danger,
.btn-small.btn-danger {
background: rgba(255, 92, 92, 0.12) !important;
border: 1px solid rgba(255, 92, 92, 0.34) !important;
color: #ffb4b4 !important;
}

.btn-danger:hover,
.btn-small.btn-danger:hover {
background: rgba(255, 92, 92, 0.18) !important;
border-color: rgba(255, 92, 92, 0.5) !important;
}

.btn-success,
.btn-small.btn-success {
background: rgba(35, 196, 131, 0.12) !important;
border: 1px solid rgba(35, 196, 131, 0.34) !important;
color: #99f0cd !important;
}

.btn-success:hover,
.btn-small.btn-success:hover {
background: rgba(35, 196, 131, 0.18) !important;
border-color: rgba(35, 196, 131, 0.5) !important;
}

.btn-warning {
background: rgba(245, 158, 11, 0.13) !important;
border: 1px solid rgba(245, 158, 11, 0.36) !important;
color: #fcd58b !important;
}

.btn-warning:hover {
background: rgba(245, 158, 11, 0.2) !important;
border-color: rgba(245, 158, 11, 0.55) !important;
}

.form-input,
.form-select,
select,
input,
textarea {
background: var(--input-bg);
border-color: #303946;
border-radius: var(--radius-md);
color: var(--text-primary);
}

.form-input:focus,
.form-select:focus,
select:focus,
input:focus,
textarea:focus {
border-color: rgba(47, 140, 255, 0.72);
box-shadow: 0 0 0 3px rgba(47, 140, 255, 0.14);
outline: none;
}

.form-label {
font-size: 12px;
font-weight: 650;
color: #b0bac6;
}

.data-table thead,
table thead,
.table-container th {
background: #12171d;
}

.data-table th,
table th {
padding: 9px 10px;
font-size: 11px;
color: #8e9aa8;
}

.data-table td,
table td {
padding: 9px 10px;
border-top-color: #252c35;
}

.data-table tr:hover,
table tbody tr:hover,
.table-container tr:hover {
background: rgba(47, 140, 255, 0.055);
}

.badge {
border-radius: 999px;
border: 1px solid currentColor;
padding: 3px 9px;
font-size: 11px;
background: transparent;
}

.provider-format-badges {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
white-space: nowrap;
}

.provider-format-badges .badge {
margin-left: 0 !important;
line-height: 1;
}

.media-server-actions,
.action-buttons {
display: grid;
grid-template-columns: repeat(4, minmax(42px, 1fr));
gap: 6px;
max-width: 300px;
}

.media-server-actions .btn-small,
.action-buttons .btn-small {
min-width: 0;
height: 36px;
padding: 0 10px;
font-size: 12px;
line-height: 1;
white-space: nowrap;
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid #313945;
color: var(--text-primary);
}

.epg-source-actions {
grid-template-columns: repeat(3, minmax(76px, max-content));
max-width: none;
justify-content: start;
}

.epg-source-actions .btn-small {
padding: 0 12px;
min-width: 76px;
}

.reseller-action-buttons {
grid-template-columns: repeat(6, 36px);
max-width: 252px;
}

.reseller-action-buttons .btn-small {
width: 36px;
padding: 0;
font-size: 13px;
}

.lines-row-actions {
display: grid !important;
align-items: center;
justify-content: start;
gap: 6px;
max-width: none;
}

.lines-row-actions .btn-small {
width: 100%;
min-width: 0 !important;
height: 36px;
padding: 0 8px !important;
}

.lines-row-actions > div {
width: 36px;
min-width: 36px;
}

.lines-row-actions > div .btn-small {
width: 36px;
padding: 0 !important;
}

.subscription-plans-page {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

.subscription-plans-page > div:first-child {
padding: 0 0 18px 0;
border-bottom: 1px solid #252c35;
}

.subscription-plan-form,
.subscription-plan-card,
.subscription-empty-state {
background: var(--card-bg) !important;
border: 1px solid #252c35 !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
}

.subscription-plan-list {
display: grid !important;
gap: 10px !important;
}

.subscription-plan-card {
padding: 16px !important;
}

.subscription-plan-card > div:first-child {
align-items: center !important;
gap: 16px;
}

.subscription-plan-card .subscription-plan-actions {
display: flex;
gap: 6px;
flex-wrap: nowrap;
}

.subscription-plan-card .subscription-plan-actions .btn-secondary {
height: 34px;
padding: 0 12px !important;
font-size: 12px !important;
}

.subscription-package-pill {
background: rgba(139, 92, 246, 0.12) !important;
border: 1px solid rgba(139, 92, 246, 0.28);
color: #d8c6ff !important;
border-radius: 999px !important;
}

.channels-page {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
/* The .data-card defaults strip out the page-level padding for the
   channels view (we don't want the card chrome around the table) — but
   without re-introducing horizontal+vertical breathing room here, the
   header, search bar, pagination buttons and table all run flush to the
   viewport edge. Match the standard content-area inset used by the rest
   of the admin pages. */
padding: 22px 24px !important;
}

.channels-page .data-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 0 0 18px 0;
margin-bottom: 18px;
border-bottom: 1px solid #252c35;
background: transparent;
}

.channels-page .data-card-title {
font-size: 28px;
line-height: 1.15;
margin: 0;
}

.channels-toolbar {
display: flex !important;
gap: 8px !important;
align-items: center !important;
justify-content: flex-end;
flex-wrap: wrap;
max-width: 1180px;
}

.channels-toolbar .form-input,
.channels-toolbar .form-select,
.channels-filter-row .form-input,
.channels-filter-row .form-select {
height: 38px;
min-width: 138px;
font-size: 12px;
}

.channels-toolbar .btn-primary,
.channels-toolbar .btn-secondary,
.channels-toolbar .btn-danger,
.channels-toolbar .btn-warning,
.channels-filter-row .btn-primary,
.channels-filter-row .btn-secondary,
.channels-filter-row .btn-warning {
height: 38px;
padding: 0 12px !important;
font-size: 12px !important;
white-space: nowrap;
}

.channels-body {
padding: 0 !important;
}

.channels-filter-row {
display: flex !important;
gap: 8px !important;
align-items: center !important;
flex-wrap: wrap;
margin-bottom: 14px !important;
}

.channels-filter-row .form-input[type="text"] {
min-width: 260px;
flex: 1 1 320px;
}

.channels-table-wrap {
background: var(--card-bg);
border: 1px solid #252c35;
border-radius: var(--radius-md);
overflow: hidden;
}

.channels-table-wrap .data-table {
border-collapse: collapse;
}

.channels-table-wrap .data-table th {
padding: 11px 10px;
}

.channels-table-wrap .data-table td {
padding: 8px 10px;
}

/* Inset only the first and last columns so the leftmost checkbox + the
   rightmost action buttons aren't kissing the card border. Putting the
   padding on the cells (not on the wrap) preserves the header row's
   dark background extending edge-to-edge of the card — exactly what the
   border-rounded-card look wants. !important is required because the
   React render hard-codes inline `style={{ padding: '8px 4px' }}` on
   the checkbox th and similar on the action-button td — inline styles
   beat normal external CSS regardless of selector specificity. */
.channels-table-wrap .data-table th:first-child,
.channels-table-wrap .data-table td:first-child {
padding-left: 16px !important;
}
.channels-table-wrap .data-table th:last-child,
.channels-table-wrap .data-table td:last-child {
padding-right: 14px !important;
}

.channels-chip {
background: rgba(59, 130, 246, 0.12) !important;
border: 1px solid rgba(59, 130, 246, 0.26);
color: #bfdbfe;
border-radius: 999px !important;
}

.channels-chip.secondary {
background: rgba(148, 163, 184, 0.09) !important;
border-color: rgba(148, 163, 184, 0.22);
color: #cbd5e1;
}

.channels-row-actions {
display: grid !important;
grid-template-columns: repeat(4, 32px);
gap: 5px !important;
justify-content: center !important;
max-width: 222px;
}

.channels-row-actions .btn-small {
width: 32px;
height: 30px;
padding: 0 !important;
font-size: 12px !important;
}

.series-actions {
grid-template-columns: minmax(122px, max-content) repeat(2, minmax(54px, max-content));
justify-content: start;
max-width: none;
}

.series-actions .btn-small {
width: auto;
min-width: 54px;
padding: 0 12px !important;
}

.series-actions .btn-small:first-child {
min-width: 122px;
}

.stream-activity-controls {
display: flex !important;
gap: 8px !important;
align-items: center !important;
flex-wrap: wrap;
}

.stream-activity-controls input,
.stream-activity-controls select {
height: 36px;
border-radius: var(--radius-md) !important;
border: 1px solid #313945 !important;
background: var(--input-bg) !important;
color: var(--text-primary) !important;
font-size: 12px !important;
}

.stream-activity-controls button {
height: 34px;
padding: 0 10px !important;
font-size: 12px !important;
}

@media (max-width: 640px) {
.stream-activity-controls {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px !important;
align-items: stretch !important;
width: 100%;
}

.stream-activity-controls > * {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin-left: 0 !important;
box-sizing: border-box;
}

.stream-activity-controls > div:first-child,
.stream-activity-controls > div:last-child {
grid-column: 1 / -1;
}

.stream-activity-controls > button {
height: 38px !important;
}

.stream-activity-controls input,
.stream-activity-controls select,
.stream-activity-controls button {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 38px !important;
box-sizing: border-box;
text-overflow: ellipsis;
}

.stream-activity-controls > div:not(:first-child):not(:last-child) {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}

.stream-activity-controls > div:not(:first-child):not(:last-child) > select {
flex: 1 1 auto !important;
}

.stream-activity-controls > div:last-child {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px !important;
align-items: center !important;
}

.stream-activity-controls > div:last-child > select,
.stream-activity-controls > div:last-child > button {
width: 100% !important;
}

.stream-activity-controls > div:last-child > span {
justify-self: end;
white-space: nowrap;
}
}

.stream-actions {
grid-template-columns: repeat(2, 32px);
max-width: 74px;
}

.stream-actions .btn-small {
width: 32px;
height: 30px;
padding: 0 !important;
font-size: 12px !important;
}

.server-pill {
display: inline-block;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
padding: 3px 9px;
border-radius: 999px;
font-weight: 650;
background: rgba(148, 163, 184, 0.09) !important;
border: 1px solid rgba(148, 163, 184, 0.22);
color: #cbd5e1 !important;
}

.server-pill.main {
background: rgba(255, 92, 92, 0.1) !important;
border-color: rgba(255, 92, 92, 0.28);
color: #ffb4b4 !important;
}

/* Global UI normalization layer
   The app still has many older pages with inline styles. These rules make
   those pages inherit the current panel language without editing every button
   and card one by one. */
.content .card,
.content .data-card,
.content .inline-form,
.content .modal-content {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)), var(--card-bg) !important;
border: 1px solid #252c35 !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
}

.content button[style],
.content a[style*="button"],
.content .btn[style],
.content .btn-small[style],
.content .btn-primary[style],
.content .btn-secondary[style],
.content .btn-danger[style],
.content .btn-success[style] {
background: rgba(255, 255, 255, 0.035) !important;
background-image: none !important;
border: 1px solid #313945 !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
color: var(--text-primary) !important;
font-weight: 650 !important;
line-height: 1 !important;
min-height: 34px;
text-shadow: none !important;
transform: none !important;
}

.content button[style]:hover,
.content .btn[style]:hover,
.content .btn-small[style]:hover {
background: rgba(255, 255, 255, 0.065) !important;
border-color: #465261 !important;
transform: none !important;
}

.content button[style*="background: none"],
.content button[style*="background:none"],
.content button[style*="background: transparent"],
.content button[style*="background:transparent"] {
background: transparent !important;
border: 0 !important;
border-radius: var(--radius-sm) !important;
color: var(--text-primary) !important;
min-width: 32px;
padding: 0 8px !important;
}

.content button[style*="background: none"]:hover,
.content button[style*="background:none"]:hover,
.content button[style*="background: transparent"]:hover,
.content button[style*="background:transparent"]:hover {
background: rgba(255, 255, 255, 0.055) !important;
}

.content .btn-primary,
.content button.btn-primary,
.content button[style*="accent-blue"],
.content button[style*="#3b82f6"],
.content button[style*="rgb(59, 130, 246)"] {
background: rgba(59, 130, 246, 0.16) !important;
border-color: rgba(59, 130, 246, 0.42) !important;
color: #bfdbfe !important;
}

.content .btn-danger,
.content button.btn-danger,
.content button[title*="Delete"],
.content button[title*="delete"],
.content button[style*="#ef4444"],
.content button[style*="#dc3545"],
.content button[style*="rgb(239, 68, 68)"],
.content button[style*="rgb(220, 53, 69)"] {
background: rgba(255, 92, 92, 0.12) !important;
border-color: rgba(255, 92, 92, 0.34) !important;
color: #ffb4b4 !important;
}

.content .btn-success,
.content button.btn-success,
.content button[title*="Deploy"],
.content button[title*="Sync"],
.content button[title*="Test"],
.content button[title*="Health"],
.content button[style*="#10b981"],
.content button[style*="rgb(16, 185, 129)"] {
background: rgba(35, 196, 131, 0.12) !important;
border-color: rgba(35, 196, 131, 0.34) !important;
color: #99f0cd !important;
}

.content button:disabled,
.content .btn:disabled,
.content .btn-small:disabled {
opacity: 0.48 !important;
cursor: not-allowed !important;
}

.content td > div[style*="display: flex"],
.content td > div[style*="display:flex"],
.content .card > div[style*="display: flex"],
.content .card > div[style*="display:flex"] {
gap: 6px !important;
}

.content td button[style],
.content .card button[style],
.content .data-card button[style] {
font-size: 12px !important;
min-width: 34px;
min-height: 32px;
padding: 0 10px !important;
white-space: nowrap;
}

.content [style*="linear-gradient"] {
background: rgba(59, 130, 246, 0.07) !important;
border: 1px solid rgba(59, 130, 246, 0.22) !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
}

.content [style*="var(--secondary-bg)"] {
border-color: #252c35 !important;
}

.content .badge,
.content span[class*="badge"] {
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 650 !important;
line-height: 1 !important;
padding: 4px 8px !important;
}

.content input,
.content select,
.content textarea {
border-radius: var(--radius-md) !important;
box-shadow: none !important;
}

.unified-page {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
max-width: none !important;
padding: 0 !important;
}

.unified-page > div:first-child {
align-items: center !important;
border-bottom: 1px solid #252c35;
display: flex !important;
gap: 12px !important;
justify-content: space-between !important;
margin-bottom: 18px !important;
padding-bottom: 18px;
}

.unified-page > div:first-child h1,
.unified-page > div:first-child h2 {
font-size: 28px !important;
line-height: 1.15 !important;
margin: 0 !important;
}

.unified-page > div:first-child > div {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
}

.unified-page > div:first-child button,
.unified-page > div:first-child select {
height: 38px !important;
font-size: 12px !important;
padding: 0 12px !important;
}

.content-org-page > div[style*="display: grid"],
.content-org-page > div[style*="display:grid"] {
gap: 12px !important;
}

.content-org-page .card {
padding: 16px !important;
}

.content-org-page .card h3 {
font-size: 17px !important;
line-height: 1.25 !important;
margin-bottom: 6px !important;
}

.content-org-page .card p,
.content-org-page .card div,
.content-org-page .card span {
letter-spacing: 0 !important;
}

.content-org-page .card > div:last-child button,
.content-org-page .card button {
height: 34px !important;
}

.content-org-surface {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}

.content-org-page .content-org-note {
align-items: flex-start !important;
background: rgba(59, 130, 246, 0.055) !important;
border: 1px solid rgba(59, 130, 246, 0.18) !important;
border-radius: var(--radius-md) !important;
display: flex !important;
gap: 10px !important;
margin-bottom: 14px !important;
padding: 12px 14px !important;
}

.content-org-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 12px !important;
}

.content-org-item {
align-items: stretch !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)), var(--card-bg) !important;
border: 1px solid #252c35 !important;
border-radius: var(--radius-md) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
justify-content: space-between !important;
margin: 0 !important;
min-height: 150px;
padding: 15px !important;
}

.content-org-bouquet-item,
.content-org-package-item {
gap: 8px !important;
min-height: 0 !important;
padding: 12px !important;
}

.content-org-bouquet-list,
.content-org-package-list {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 12px !important;
}

.content-org-item:hover {
border-color: #384250 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)), var(--card-bg) !important;
}

.content-org-category-list,
.content-org-bouquet-list,
.content-org-package-list {
display: grid !important;
gap: 16px !important;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

.content-org-category-item,
.content-org-bouquet-item,
.content-org-package-item {
align-items: start !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)), #151a20 !important;
border: 1px solid #2a323d !important;
border-radius: 8px !important;
box-shadow: none !important;
padding: 16px !important;
}

.content-org-bouquet-item,
.content-org-package-item {
align-items: stretch !important;
}

.content-org-bouquet-item > div,
.content-org-package-item > div {
box-sizing: border-box !important;
width: 100% !important;
}

.content-org-category-item {
cursor: default !important;
display: grid !important;
gap: 12px !important;
grid-template-columns: 20px minmax(0, 1fr) 34px 34px;
grid-template-rows: auto auto 42px;
min-height: 0;
}

.content-org-category-item[style*="accent-blue-dim"] {
background: rgba(59, 130, 246, 0.1) !important;
border-color: rgba(59, 130, 246, 0.34) !important;
}

.content-org-category-item > input[type="checkbox"] {
align-self: center;
grid-column: 1;
grid-row: 1;
height: 18px !important;
justify-self: center;
margin: 0 !important;
max-height: 18px !important;
max-width: 18px !important;
min-height: 18px !important;
min-width: 18px !important;
position: static;
width: 18px !important;
}

.content-org-category-item .content-org-item-title,
.content-org-item h3 {
color: var(--text-primary) !important;
font-size: 16px !important;
font-weight: 750 !important;
line-height: 1.25 !important;
margin: 0 !important;
}

.content-org-category-item .content-org-item-title {
align-items: center !important;
display: flex !important;
gap: 8px !important;
grid-column: 2 / 4;
grid-row: 1;
min-width: 0;
overflow: visible;
padding-left: 0;
text-overflow: clip;
white-space: normal;
}

.content-org-category-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.25;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}

.content-org-adult-badge {
background: rgba(239, 68, 68, 0.18) !important;
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 4px;
color: #fecaca !important;
flex: 0 0 auto;
font-size: 10px !important;
font-weight: 750 !important;
line-height: 16px !important;
padding: 0 6px !important;
white-space: nowrap;
}

.content-org-section-label {
color: var(--text-muted);
font-size: 11px;
font-weight: 750;
letter-spacing: 0;
margin: 0 0 8px;
text-transform: uppercase;
}

.content-org-bulkbar {
align-items: center;
background: rgba(255, 255, 255, 0.025);
border: 1px solid #252d37;
border-radius: 8px;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
padding: 12px 14px;
}

.content-org-bulkbar-status {
color: var(--text-muted);
flex: 1 1 180px;
font-size: 13px;
}

.content-org-select {
accent-color: var(--accent-blue);
cursor: pointer;
flex: 0 0 auto;
height: 16px;
margin: 0;
width: 16px;
}

.content-org-chip-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-height: 58px;
}

.content-org-chip {
align-items: center;
background: rgba(59, 130, 246, 0.08) !important;
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 5px;
color: #bfdbfe !important;
display: inline-flex;
font-size: 11px !important;
font-weight: 650;
line-height: 18px;
max-width: 100%;
min-height: 22px;
padding: 1px 7px !important;
}

.content-org-chip-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.content-org-chip-count {
color: var(--text-muted);
font-size: 10px;
font-weight: 750;
margin-left: 6px;
white-space: nowrap;
}

.content-org-chip-more {
background: rgba(255, 255, 255, 0.035) !important;
border-color: #313945;
color: var(--text-muted) !important;
}

.content-org-chip-danger {
background: rgba(239, 68, 68, 0.11) !important;
border-color: rgba(239, 68, 68, 0.32) !important;
color: #fecaca !important;
}

.content-org-chip-success {
background: rgba(16, 185, 129, 0.1) !important;
border-color: rgba(16, 185, 129, 0.28) !important;
color: #bbf7d0 !important;
}

.content-org-category-meta {
grid-column: 1 / 5;
grid-row: 2;
min-height: 58px;
}

.content-org-category-meta,
.content-org-bouquet-item > div:nth-child(2),
.content-org-package-item > div:nth-child(2),
.content-org-package-item > div:nth-child(3) {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid #252d37;
border-radius: 7px !important;
padding: 12px !important;
}

.content-org-bouquet-item > div:nth-child(2),
.content-org-package-item > div:nth-child(3) {
min-height: 0;
}

.content-org-bouquet-item .content-org-chip-list {
min-height: 0 !important;
}

.content-org-package-item > div:nth-child(2) {
margin-bottom: 12px !important;
}

.content-org-package-item > div:nth-child(2) [style*="fontSize: '20px'"],
.content-org-package-item > div:nth-child(2) [style*="font-size: 20px"] {
color: var(--text-primary) !important;
font-size: 18px !important;
}

.content-org-category-item > label {
align-self: center !important;
grid-column: 4 / 5;
grid-row: 1;
justify-self: end;
margin: 0 !important;
min-height: 30px;
white-space: nowrap;
}

.content-org-actions {
border-top: 1px solid #252c35;
display: flex !important;
gap: 6px !important;
margin-top: auto !important;
padding-top: 12px !important;
}

.content-org-category-item > button {
align-items: center !important;
display: inline-flex !important;
grid-row: 1;
justify-content: center !important;
line-height: 1.25 !important;
margin: 0 !important;
max-width: 34px !important;
min-width: 34px !important;
overflow: visible !important;
padding: 0 !important;
width: 34px !important;
}

.content-org-category-item > button:first-of-type {
grid-column: 1 / 4;
justify-self: stretch;
margin-left: 0 !important;
max-width: none !important;
padding: 0 12px !important;
width: 100% !important;
}

.content-org-category-item > button:last-of-type {
grid-column: 4;
justify-self: end;
}

.content-org-actions button,
.content-org-category-item > button {
align-items: center !important;
display: inline-flex !important;
height: 34px !important;
justify-content: center !important;
font-size: 12px !important;
line-height: 1.25 !important;
overflow: visible !important;
padding: 0 12px !important;
}

.content-org-category-item > button {
align-self: end !important;
grid-row: 3;
padding: 0 !important;
}

.content-org-actions {
align-items: center !important;
flex-wrap: nowrap !important;
min-height: 42px;
}

.content-org-actions button {
min-width: 38px !important;
white-space: nowrap !important;
}

.content-org-bouquet-item .content-org-actions {
display: grid !important;
grid-template-columns: minmax(76px, 1fr) 36px 36px;
}

.content-org-bouquet-item .content-org-actions button:nth-child(2),
.content-org-bouquet-item .content-org-actions button:nth-child(3) {
font-size: 14px !important;
padding: 0 !important;
}

.content-org-package-item .content-org-actions {
display: grid !important;
grid-template-columns: minmax(58px, 1fr) minmax(58px, 1fr) 38px;
}

.content-org-package-item .content-org-actions button {
padding: 0 10px !important;
}

.content-org-package-bouquets {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-height: 114px;
}

.content-org-package-bouquet-row {
align-items: center !important;
display: flex !important;
justify-content: space-between !important;
min-height: 34px;
}

.content-org-package-more {
align-items: center;
background: rgba(255, 255, 255, 0.035);
border: 1px dashed #313945;
border-radius: 6px;
color: var(--text-muted);
display: flex;
font-size: 12px;
font-weight: 650;
justify-content: center;
min-height: 34px;
}

.content-org-actions .btn-danger {
max-width: 38px !important;
min-width: 38px !important;
padding: 0 !important;
}

.content-org-actions .btn-danger .action-label {
display: none !important;
}

.content-org-bouquet-item > div:first-child,
.content-org-package-item > div:first-child {
align-items: flex-start !important;
display: grid !important;
gap: 8px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
margin-bottom: 2px !important;
}

.content-org-bouquet-item > div:first-child > div,
.content-org-package-item > div:first-child > div {
min-width: 0 !important;
}

.content-org-bouquet-item > div:first-child h3,
.content-org-package-item > div:first-child h3 {
display: flex !important;
gap: 6px !important;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.content-org-bouquet-item > div:first-child p,
.content-org-package-item > div:first-child p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.35 !important;
overflow: hidden;
}

.content-org-package-item > div:nth-child(2),
.content-org-package-item > div:nth-child(3) {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid #252c35;
border-radius: var(--radius-md) !important;
}

.content-org-package-item > div:nth-child(2) {
margin-bottom: 6px !important;
padding: 9px 10px !important;
}

.content-org-package-item > div:nth-child(3) {
margin-bottom: 4px !important;
padding: 10px !important;
}

@media (max-width: 640px) {
.content-org-list {
grid-template-columns: 1fr !important;
}
.content-org-category-item > button:first-of-type {
margin-left: 0 !important;
}
}

@media (max-width: 900px) {
.unified-page > div:first-child {
align-items: flex-start !important;
flex-direction: column !important;
}
.unified-page > div:first-child > div {
justify-content: flex-start !important;
width: 100%;
}
.unified-page > div:first-child button,
.unified-page > div:first-child select {
flex: 1 1 150px;
}
}

@media (max-width: 900px) {
.channels-page .data-card-header {
flex-direction: column;
}
.channels-toolbar {
justify-content: flex-start;
max-width: none;
}
}

.media-server-actions .btn-small:hover,
.action-buttons .btn-small:hover {
background: rgba(255, 255, 255, 0.065) !important;
border-color: #465261;
}

.media-server-actions .btn-small.btn-danger,
.action-buttons .btn-small.btn-danger,
.action-buttons .btn-small[title*="Delete"],
.action-buttons .btn-small[title*="Reboot"],
.action-buttons .btn-small[title*="delete"],
.action-buttons .btn-small[title*="reboot"] {
background: rgba(255, 92, 92, 0.12) !important;
border-color: rgba(255, 92, 92, 0.34);
color: #ffb4b4;
}

.media-server-actions .btn-small.btn-success,
.action-buttons .btn-small.btn-success,
.action-buttons .btn-small[title*="Deploy"],
.action-buttons .btn-small[title*="Sync"],
.action-buttons .btn-small[title*="Test"],
.action-buttons .btn-small[title*="Health"] {
background: rgba(35, 196, 131, 0.12) !important;
border-color: rgba(35, 196, 131, 0.34);
color: #99f0cd;
}

button.btn-small:not(.btn-danger):not(.btn-success),
button.btn-primary:not(.btn-danger):not(.btn-success):not(.btn-warning),
button.btn-secondary,
button.quick-action-btn {
box-shadow: none !important;
}

button.btn-small[style],
button.btn-primary[style],
button.btn-secondary[style],
button.btn[style] {
background: rgba(255, 255, 255, 0.035) !important;
background-image: none !important;
border: 1px solid #313945 !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}

button.btn-primary[style],
button.btn.btn-primary[style] {
background: rgba(59, 130, 246, 0.16) !important;
border-color: rgba(59, 130, 246, 0.42) !important;
color: #bfdbfe !important;
}

button.btn-danger[style],
button.btn-small.btn-danger[style] {
background: rgba(255, 92, 92, 0.12) !important;
border-color: rgba(255, 92, 92, 0.34) !important;
color: #ffb4b4 !important;
}

button.btn-success[style],
button.btn-small.btn-success[style] {
background: rgba(35, 196, 131, 0.12) !important;
border-color: rgba(35, 196, 131, 0.34) !important;
color: #99f0cd !important;
}

.updates-container button[style] {
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid #313945 !important;
border-radius: var(--radius-md) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
font-weight: 650;
}

.updates-container button[style]:hover {
background: rgba(255, 255, 255, 0.065) !important;
border-color: #465261 !important;
}

.updates-container .settings-header button,
.updates-container button[style*="width: 100%"],
.updates-container button[style*="accent-blue"] {
background: rgba(59, 130, 246, 0.16) !important;
border-color: rgba(59, 130, 246, 0.42) !important;
color: #bfdbfe !important;
}

.updates-container button:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
}

.badge.success,
.badge-success {
background: rgba(35, 196, 131, 0.11);
}

.badge.danger,
.badge-danger,
.badge.error {
background: rgba(255, 92, 92, 0.11);
}

.badge.warning {
background: rgba(246, 167, 42, 0.12);
}

.badge.info {
background: rgba(47, 140, 255, 0.12);
}

.alert {
border-radius: var(--radius-md);
border-width: 1px;
}

.modal-overlay,
.modal,
.modal-backdrop {
background: rgba(3, 5, 8, 0.78);
backdrop-filter: blur(12px);
}

.modal-header {
padding: 18px 20px;
border-bottom-color: #252c35;
}

.login-container {
background:
linear-gradient(180deg, rgba(47, 140, 255, 0.07) 0%, rgba(47, 140, 255, 0) 45%),
var(--primary-bg);
}

.login-box {
max-width: 420px;
padding: 30px;
}

.login-title {
font-size: 25px;
}

.login-subtitle {
color: var(--text-secondary);
}

/* Theme system - dark remains default; light is opt-in and reversible. */
:root[data-theme="dark"] {
color-scheme: dark;
}

:root[data-theme="light"] {
color-scheme: light;
--primary-bg: #f4f7fb;
--secondary-bg: #edf2f7;
--card-bg: #ffffff;
--sidebar-bg: #ffffff;
--bg-dark: #eef3f8;
--bg-secondary: #edf2f7;
--bg-primary: #f4f7fb;
--surface-0: #f4f7fb;
--surface-1: #ffffff;
--surface-2: #ffffff;
--surface-3: #e7edf5;
--surface-hover: #eef4fb;
--accent-blue: #2563eb;
--accent-blue-dim: rgba(37, 99, 235, 0.12);
--accent-purple: #6d5df2;
--accent-green: #059669;
--accent-red: #dc2626;
--accent-orange: #d97706;
--accent-yellow: #b7791f;
--accent-primary: #2563eb;
--text-primary: #17202c;
--text-secondary: #536173;
--text-muted: #748196;
--text-color: #17202c;
--border-color: #d7e0ea;
--border: #d7e0ea;
--hover-bg: #eef4fb;
--input-bg: #ffffff;
--shadow-soft: 0 10px 26px rgba(27, 39, 55, 0.08);
--shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.82) inset;
}

.theme-toggle {
height: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.055);
background: rgba(255, 255, 255, 0.025);
color: var(--text-muted);
font-size: 11px;
font-weight: 650;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
background: rgba(255, 255, 255, 0.065);
border-color: #465261;
color: var(--text-primary);
}

.theme-toggle-icon {
font-size: 13px;
line-height: 1;
}

html[data-theme="light"] {
background: var(--primary-bg);
scrollbar-color: #c5d0dc var(--surface-0);
}

html[data-theme="light"] body {
background:
linear-gradient(180deg, #ffffff 0%, var(--primary-bg) 390px),
var(--primary-bg);
color: var(--text-primary);
}

html[data-theme="light"] ::selection {
background: rgba(37, 99, 235, 0.18);
color: #0f172a;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
background: var(--surface-0);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
background: #c5d0dc;
border-color: var(--surface-0);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: #aebccd;
}

html[data-theme="light"] .sidebar {
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border-right-color: var(--border-color);
box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04), 14px 0 34px rgba(27, 39, 55, 0.05);
}

html[data-theme="light"] .sidebar-header,
html[data-theme="light"] .sidebar-footer,
html[data-theme="light"] .topbar,
html[data-theme="light"] .modal-header {
border-color: var(--border-color) !important;
}

html[data-theme="light"] .sidebar-logo-icon,
html[data-theme="light"] .user-avatar,
html[data-theme="light"] .login-logo-icon {
background: #e9f1ff;
border-color: rgba(37, 99, 235, 0.18);
box-shadow: var(--shadow-subtle);
}

html[data-theme="light"] .nav-section-title {
color: #6f7b88;
}

html[data-theme="light"] .nav-item {
color: #536173;
}

html[data-theme="light"] .nav-item:hover {
background: rgba(37, 99, 235, 0.07);
color: var(--text-primary);
}

html[data-theme="light"] .nav-item.active {
background: rgba(37, 99, 235, 0.11);
color: #1d4ed8;
box-shadow: inset 3px 0 0 var(--accent-blue);
}

html[data-theme="light"] .user-profile,
html[data-theme="light"] .topbar-stat,
html[data-theme="light"] .topbar-version-pill,
html[data-theme="light"] .theme-toggle {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .topbar {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 12px 32px rgba(27, 39, 55, 0.04);
}

html[data-theme="light"] .topbar-stat:hover,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .topbar .btn-logout:hover {
background: #f7faff !important;
border-color: #b9c7d8 !important;
}

html[data-theme="light"] .data-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .content-card,
html[data-theme="light"] .server-card,
html[data-theme="light"] .package-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .bouquet-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-overlay .modal,
html[data-theme="light"] .modal-backdrop .modal,
html[data-theme="light"] .table-container,
html[data-theme="light"] .login-box {
background: var(--card-bg) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .data-card-header,
html[data-theme="light"] .card-header,
html[data-theme="light"] .table-container th,
html[data-theme="light"] thead,
html[data-theme="light"] .settings-tabs,
html[data-theme="light"] .tab-nav {
background: #f7faff !important;
border-color: var(--border-color) !important;
}

html[data-theme="light"] .table-container td,
html[data-theme="light"] table td,
html[data-theme="light"] table th,
html[data-theme="light"] tr {
border-color: var(--border-color) !important;
}

html[data-theme="light"] .table-container tr:hover,
html[data-theme="light"] tbody tr:hover {
background: var(--hover-bg) !important;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background: var(--input-bg) !important;
border-color: #cbd6e2 !important;
color: var(--text-primary) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
color: #8a96a6 !important;
}

html[data-theme="light"] select option {
background: #ffffff;
color: var(--text-primary);
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn.btn-secondary,
html[data-theme="light"] .btn-logout {
background: #ffffff !important;
border-color: #cbd6e2 !important;
color: var(--text-primary) !important;
}

html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn.btn-secondary:hover {
background: #f3f7fc !important;
border-color: #aebccd !important;
}

html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .modal-backdrop {
background: rgba(15, 23, 42, 0.36) !important;
}

html[data-theme="light"] .alert,
html[data-theme="light"] .info-box,
html[data-theme="light"] .notice,
html[data-theme="light"] .hint-box {
border-color: var(--border-color) !important;
}

html[data-theme="light"] .login-container {
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.09) 0%, rgba(37, 99, 235, 0) 44%),
var(--primary-bg);
}

html[data-theme="light"] .xterm,
html[data-theme="light"] .terminal,
html[data-theme="light"] .code-editor,
html[data-theme="light"] pre,
html[data-theme="light"] code {
background-color: #101820 !important;
color: #dbeafe !important;
}

html[data-theme="light"] .theme-toggle-label {
color: inherit;
}

/* Settings navigation and shell for light mode */
html[data-theme="light"] .settings-nav {
background: var(--card-bg);
border-color: var(--border-color);
box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .settings-nav-item {
color: var(--text-secondary);
}

html[data-theme="light"] .settings-nav-item:hover {
background: var(--hover-bg);
color: var(--text-primary);
}

html[data-theme="light"] .settings-nav-item.active {
background: rgba(37, 99, 235, 0.10);
color: var(--accent-blue);
}

html[data-theme="light"] .settings-nav-item.parent {
color: var(--text-primary);
}

html[data-theme="light"] .settings-section-title,
html[data-theme="light"] .settings-field-label {
color: var(--text-primary);
}

html[data-theme="light"] .settings-section-desc,
html[data-theme="light"] .settings-field-help {
color: var(--text-secondary);
}

html[data-theme="light"] .settings-field-info {
background: var(--surface-3);
border-color: var(--border-color);
}

html[data-theme="light"] .settings-field-info.warn {
background: rgba(217, 119, 6, 0.08);
border-color: rgba(217, 119, 6, 0.25);
}

/* Dirty bar (unsaved changes) for light mode */
html[data-theme="light"] .dirty-bar {
background: var(--card-bg);
border-color: var(--border-color);
box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1320px) {
.topbar-stats .topbar-stat-lines {
display: none !important;
}
}

@media (max-width: 1200px) {
.topbar-stats .topbar-stat-247 {
display: none !important;
}
}

@media (max-width: 1100px) {
.dashboard-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topbar-stats {
display: flex !important;
}
.topbar-stats .topbar-stat-library {
display: none !important;
}
}

@media (max-width: 960px) {
.topbar-stats .topbar-stat-live,
.topbar-stats .topbar-stat-requests {
display: none !important;
}
.topbar .btn-logout {
min-width: 68px;
padding: 0 10px;
}
}

@media (max-width: 768px) {
.topbar-right {
margin-left: auto;
gap: 6px;
}
.topbar-stats {
display: flex !important;
gap: 5px;
overflow: hidden;
flex: 0 1 auto;
}
.topbar-stats .topbar-stat {
display: none !important;
}
.topbar-stats .topbar-stat-active-connections,
.topbar-stats .topbar-stat-requests,
.topbar-stats .topbar-stat-approvals,
.topbar-stats .topbar-stat-tickets {
display: flex !important;
height: 36px;
min-height: 36px;
padding: 0 7px;
}
.topbar-stats .topbar-stat-active-connections .topbar-stat-icon,
.topbar-stats .topbar-stat-requests .topbar-stat-icon,
.topbar-stats .topbar-stat-approvals .topbar-stat-icon,
.topbar-stats .topbar-stat-tickets .topbar-stat-icon {
font-size: 13px;
}
.topbar-stats .topbar-stat-active-connections .topbar-stat-value,
.topbar-stats .topbar-stat-requests .topbar-stat-value,
.topbar-stats .topbar-stat-approvals .topbar-stat-value,
.topbar-stats .topbar-stat-tickets .topbar-stat-value {
font-size: 12px;
line-height: 14px;
}
.topbar-stats .topbar-stat-active-connections .topbar-stat-label,
.topbar-stats .topbar-stat-requests .topbar-stat-label,
.topbar-stats .topbar-stat-approvals .topbar-stat-label,
.topbar-stats .topbar-stat-tickets .topbar-stat-label {
font-size: 9px;
line-height: 11px;
}
}

@media (max-width: 640px) {
.theme-toggle-label,
.topbar-version-pill {
display: none;
}
.topbar {
height: 58px;
padding: 0 14px;
}
.topbar .btn-logout {
min-width: 58px;
height: 36px;
min-height: 36px;
padding: 0 8px;
font-size: 12px;
}
.content {
padding: 14px;
}
.dashboard-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.page-header h1 {
font-size: 22px;
}
.stat-card {
padding: 16px;
}
}

@media (max-width: 520px) {
.topbar {
padding-left: 10px;
padding-right: 10px;
}
.topbar-left {
gap: 6px;
}
.topbar-stats {
gap: 4px;
}
.topbar-stats .topbar-stat-active-connections,
.topbar-stats .topbar-stat-requests,
.topbar-stats .topbar-stat-approvals,
.topbar-stats .topbar-stat-tickets {
height: 34px;
min-height: 34px;
padding: 0 6px;
}
.topbar .btn-logout {
display: none !important;
}
}

@media (max-width: 480px) {
.topbar-stats .topbar-stat-network {
display: none !important;
}
}

/* ================================================================
   Enterprise polish layer — 2026-06-10
   Typography discipline, SVG icon primitives, tinted badges,
   focus states. Builds on the May refinement layer above.
   ================================================================ */

/* --- SVG icon primitives --- */
.sp-icon {
display: inline-block;
vertical-align: -0.185em;
flex-shrink: 0;
}
.nav-item-icon,
.topbar-stat-icon,
.theme-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item-icon {
width: 20px;
color: #8e9aa8;
}
.nav-item:hover .nav-item-icon,
.nav-item.active .nav-item-icon {
color: inherit;
}
.sidebar-logo-icon,
.login-logo-icon {
color: var(--accent-blue);
}
.stat-card-icon .sp-icon {
vertical-align: 0;
}

/* --- Status dots (replaces 🟢🔴🟡 emoji circles) --- */
.sp-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
vertical-align: 0.02em;
}
.sp-dot-green  { background: #23c483; box-shadow: 0 0 0 3px rgba(35, 196, 131, 0.15); }
.sp-dot-red    { background: #ff5c5c; box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.15); }
.sp-dot-yellow { background: #e8b931; box-shadow: 0 0 0 3px rgba(232, 185, 49, 0.15); }
.sp-dot-blue   { background: #2f8cff; box-shadow: 0 0 0 3px rgba(47, 140, 255, 0.15); }
.sp-dot-orange { background: #f6a72a; box-shadow: 0 0 0 3px rgba(246, 167, 42, 0.15); }
.sp-dot-gray   { background: #6f7b88; box-shadow: 0 0 0 3px rgba(111, 123, 136, 0.15); }
.sp-dot-purple { background: #7c6df0; box-shadow: 0 0 0 3px rgba(124, 109, 240, 0.15); }
.sp-dot-dark   { background: #3a4450; box-shadow: 0 0 0 3px rgba(58, 68, 80, 0.2); }

/* --- Typography discipline --- */
.data-table td,
table td,
.stat-card-value,
.stat-value,
.topbar-stat-value,
.sparkline {
font-variant-numeric: tabular-nums;
}
code,
pre,
kbd,
.data-table td code,
.settings-field-info code {
font-family: var(--font-mono);
font-size: 0.92em;
}
.data-table th,
table th {
text-transform: uppercase;
letter-spacing: 0.06em !important;
font-weight: 600;
}
.nav-section-title {
letter-spacing: 0.09em !important;
font-weight: 600;
}
.stat-card-value {
font-weight: 650;
}

/* --- Badges: tinted fill (replaces outline-only chips) --- */
.badge {
border-radius: 6px;
font-weight: 600;
border: 1px solid #313945;
background: rgba(255, 255, 255, 0.045);
color: var(--text-secondary);
}
.badge.success,
.badge-success {
color: #7ee2b8;
background: rgba(35, 196, 131, 0.12);
border-color: rgba(35, 196, 131, 0.32);
}
.badge.danger,
.badge-danger,
.badge.error {
color: #ffb4b4;
background: rgba(255, 92, 92, 0.12);
border-color: rgba(255, 92, 92, 0.32);
}
.badge.warning {
color: #fcd58b;
background: rgba(246, 167, 42, 0.12);
border-color: rgba(246, 167, 42, 0.34);
}
.badge.info {
color: #9ec9ff;
background: rgba(47, 140, 255, 0.13);
border-color: rgba(47, 140, 255, 0.36);
}
html[data-theme="light"] .badge {
border-color: #d0d9e4;
background: rgba(23, 32, 44, 0.04);
color: var(--text-secondary);
}
html[data-theme="light"] .badge.success,
html[data-theme="light"] .badge-success {
color: #047857;
background: rgba(5, 150, 105, 0.09);
border-color: rgba(5, 150, 105, 0.28);
}
html[data-theme="light"] .badge.danger,
html[data-theme="light"] .badge-danger,
html[data-theme="light"] .badge.error {
color: #b91c1c;
background: rgba(220, 38, 38, 0.08);
border-color: rgba(220, 38, 38, 0.26);
}
html[data-theme="light"] .badge.warning {
color: #92580a;
background: rgba(217, 119, 6, 0.1);
border-color: rgba(217, 119, 6, 0.28);
}
html[data-theme="light"] .badge.info {
color: #1d4ed8;
background: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.26);
}

/* --- Focus visibility (keyboard navigation) --- */
button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.tab-btn:focus-visible,
a:focus-visible {
outline: 2px solid rgba(47, 140, 255, 0.65);
outline-offset: 2px;
}
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] .nav-item:focus-visible {
outline-color: rgba(37, 99, 235, 0.55);
}

/* --- Buttons: icon + label alignment --- */
.btn-small,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-logout,
.quick-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
}

/* --- Modal: depth + separation --- */
.modal-overlay,
.modal-backdrop {
backdrop-filter: blur(3px);
}

/* --- Initial loader logo (SVG) --- */
#initial-loader .logo svg {
display: block;
}

/* ================================================================
   Mobile enterprise polish — 2026-06-10
   Findings from 390x844 Playwright audit: stacked filter walls,
   demo badge over the topbar, FAB overlapping controls.
   ================================================================ */
@media (max-width: 768px) {
/* Channels-page toolbars: horizontal swipe rails, not stacked walls */
.channels-toolbar,
.channels-filter-row {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.channels-toolbar::-webkit-scrollbar,
.channels-filter-row::-webkit-scrollbar {
display: none;
}
.channels-toolbar > *,
.channels-filter-row > * {
flex: 0 0 auto !important;
}
.channels-toolbar .form-input,
.channels-toolbar .form-select,
.channels-filter-row .form-input,
.channels-filter-row .form-select {
width: auto !important;
max-width: none !important;
}
.channels-filter-row .form-input[type="text"] {
min-width: 220px !important;
}

/* Topbar de-clutter */
.topbar-version-pill {
display: none !important;
}
.theme-toggle .theme-toggle-label {
display: none;
}

/* Claude assistant bubble: compact + safe-area aware */
.claude-bubble-btn {
width: 48px !important;
height: 48px !important;
font-size: 20px !important;
right: 14px !important;
bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Keep the last rows of content reachable above the bubble */
.content {
padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Demo badge: dock bottom-left pill instead of covering the topbar */
#demo-mode-badge {
top: auto !important;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
left: 14px !important;
right: auto !important;
padding: 6px 11px !important;
font-size: 11px !important;
border-radius: 999px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
}

@media (max-width: 768px) {
/* Older mobile rules force flex-direction: column on ANY flex container with
   gap+margin ("search/filter bars: stack vertically"). For containers that
   actually hold filter <select>s, restore row+wrap so the pairing rules below
   can lay them out 2-up. Genuine vertical stacks (no selects) keep stacking. */
.content div[style*="display: flex"][style*="gap"]:has(> select) {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
}
}

@media (max-width: 480px) {
/* Inline filter rows (Movies/Series/Episodes/...): selects pair up
   two-per-row instead of the full-width single-column wall the generic
   `width: 100% !important` rule above produces. Search inputs stay full
   width; buttons share rows. */
.content div[style*="display: flex"][style*="gap"] > .form-select,
.content div[style*="display: flex"][style*="gap"] > select {
width: calc(50% - 5px) !important;
flex: 0 0 calc(50% - 5px) !important;
min-width: 0 !important;
}
.content div[style*="display: flex"][style*="gap"] > .form-input[type="text"],
.content div[style*="display: flex"][style*="gap"] > input[type="text"] {
width: 100% !important;
flex: 1 1 100% !important;
}
.content div[style*="display: flex"][style*="gap"] > button {
width: auto !important;
flex: 1 1 auto !important;
}
}

/* ================================================================
   Style unification — 2026-06-10
   Inline "stat wells" (background: var(--bg-dark)) appear on EPG
   Sources and a handful of other pages as heavy dark pits. Bring
   them in line with the stat-card language: raised surface +
   hairline border instead of a hole in the card.
   ================================================================ */
.content [style*="background: var(--bg-dark)"],
.content [style*="background:var(--bg-dark)"] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)), var(--card-bg) !important;
border: 1px solid #2a313a !important;
border-radius: var(--radius-md) !important;
}
html[data-theme="light"] .content [style*="background: var(--bg-dark)"],
html[data-theme="light"] .content [style*="background:var(--bg-dark)"] {
background: #ffffff !important;
border: 1px solid #d7e0ea !important;
}

/* --- Security page stat icons: tinted chips instead of solid accent squares --- */
.stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.stat-icon[style*="var(--accent-orange)"] {
background: rgba(246, 167, 42, 0.14) !important;
color: #fcd58b;
}
.stat-icon[style*="var(--accent-red)"] {
background: rgba(255, 92, 92, 0.13) !important;
color: #ffb4b4;
}
.stat-icon[style*="var(--accent-green)"] {
background: rgba(35, 196, 131, 0.13) !important;
color: #99f0cd;
}
.stat-icon[style*="var(--accent-blue)"] {
background: rgba(47, 140, 255, 0.14) !important;
color: #9ec9ff;
}
.stat-icon[style*="var(--accent-purple)"] {
background: rgba(124, 109, 240, 0.14) !important;
color: #c9c2f8;
}
html[data-theme="light"] .stat-icon[style*="var(--accent-orange)"] { background: rgba(217, 119, 6, 0.12) !important; color: #92580a; }
html[data-theme="light"] .stat-icon[style*="var(--accent-red)"]    { background: rgba(220, 38, 38, 0.1) !important;  color: #b91c1c; }
html[data-theme="light"] .stat-icon[style*="var(--accent-green)"]  { background: rgba(5, 150, 105, 0.11) !important; color: #047857; }
html[data-theme="light"] .stat-icon[style*="var(--accent-blue)"]   { background: rgba(37, 99, 235, 0.1) !important;  color: #1d4ed8; }
html[data-theme="light"] .stat-icon[style*="var(--accent-purple)"] { background: rgba(109, 93, 242, 0.12) !important; color: #5b4bd1; }

/* ================================================================
   Mobile lateral-scroll elimination — 2026-06-10 (audit v2)
   Inner scroll containers the document-level audit missed: tables
   with inline desktop min-widths, nowrap headings/code chips, and
   fixed-width flex rows that never wrap.
   ================================================================ */
@media (max-width: 768px) {
/* Card-ified tables: inline min-width (e.g. Providers' 800px) is a desktop
   column-layout concern; rows are stacked cards on mobile. */
.content table[style*="min-width"],
.content table[style*="minWidth"] {
min-width: 0 !important;
}
/* Inline-nowrap headings (Bouquets card titles etc.) must wrap, not scroll */
.content h1, .content h2, .content h3, .content h4 {
white-space: normal !important;
overflow-wrap: anywhere;
}
/* URL/code chips wrap instead of widening their card */
.content code {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-all;
}
/* Any inline-styled flex row wraps on mobile (covers rows without `gap`
   that the older rules miss — e.g. Billing tax-settings input row).
   Swipe rails opt out by class. */
.content div[style*="display: flex"]:not(.channels-toolbar):not(.channels-filter-row):not([style*="flex-direction: column"]) {
flex-wrap: wrap !important;
}
/* Fixed-width inline inputs/selects can't exceed their container */
.content input[style*="width"],
.content select[style*="width"] {
max-width: 100% !important;
}
}

@media (max-width: 480px) {
/* The legacy "form inputs full width" rule above also catches CHECKBOXES —
   a 275px-wide checkbox inside e.g. the Bouquets card title pushed the
   bouquet name into hidden overflow (title invisible on phones). Checkboxes
   and radios keep their natural size everywhere. */
.content input[type="checkbox"],
.content input[type="radio"] {
width: auto !important;
max-width: none !important;
}
/* Inline grids with FIXED column templates (e.g. Billing tax card's
   '200px 240px auto') — repeat() patterns are already collapsed by the
   rules above; this collapses the explicit-width ones too. */
.content div[style*="display: grid"][style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}


/* ================================================================
   Short viewports (phone landscape, roughly 360-520px tall).
   A modal's explanatory hint costs more vertical room than it
   explains once the screen is that short, leaving the scrollable
   body with barely one row. Opt a hint in with .sp-modal-hint.
   ================================================================ */
@media (max-height: 520px) {
.sp-modal-hint {
display: none !important;
}
.modal-content {
padding: 16px !important;
}
}


/* ================================================================
   Nested scroll traps on small screens.
   A list carrying its own max-height + overflow, inside a modal
   that is itself scrollable, gives a phone a ~300px window onto a
   2000px list -- and that window sits below the fold, so the list
   reads as missing entirely. On phones (and short landscape) let
   the list grow and make the modal the single scroller.
   Opt in with .sp-inner-scroll.
   ================================================================ */
@media (max-width: 768px), (max-height: 560px) {
.sp-inner-scroll {
max-height: none !important;
overflow: visible !important;
}
}