/* KlokIn Ops - Nordic Precision Design System Tokens */
:root {
    color-scheme: dark;

    /* Neutral palette consumed by the Tailwind theme and custom components. */
    --ops-shell-canvas: 9 9 11;
    --ops-shell-sidebar: var(--ops-shell-canvas);
    --ops-shell-topbar: var(--ops-shell-canvas);
    --ops-shell-surface: 24 24 27;
    --ops-shell-surface-elevated: 39 39 42;
    --ops-shell-border: var(--ops-shell-surface-elevated);
    --ops-shell-border-strong: 63 63 70;
    --ops-shell-text-primary: 250 250 250;
    --ops-shell-text-secondary: 161 161 170;
    --ops-shell-text-muted: 113 113 122;
    --ops-zinc-100: 244 244 245;
    --ops-zinc-200: 228 228 231;
    --ops-zinc-300: 212 212 216;
    --ops-zinc-600: 82 82 91;

    /* Brand and feedback palettes preserve opacity utilities such as bg-red-950/40. */
    --ops-shell-brand: 13 148 136;
    --ops-shell-brand-light: 45 212 191;
    --ops-brand-500: 15 118 110;
    --ops-teal-200: 204 251 241;
    --ops-teal-300: 94 234 212;
    --ops-teal-500: 20 184 166;
    --ops-teal-700: 15 118 110;
    --ops-teal-800: 17 94 89;
    --ops-teal-900: 19 78 74;
    --ops-teal-950: 4 47 46;
    --ops-red-200: 254 202 202;
    --ops-red-300: 252 165 165;
    --ops-red-400: 248 113 113;
    --ops-red-500: 239 68 68;
    --ops-red-800: 153 27 27;
    --ops-red-900: 127 29 29;
    --ops-red-950: 69 10 10;
    --ops-blue-300: 147 197 253;
    --ops-blue-400: 96 165 250;
    --ops-blue-800: 30 64 175;
    --ops-blue-950: 23 37 84;
    --ops-orange-300: 253 186 116;
    --ops-orange-800: 154 52 18;
    --ops-orange-950: 67 20 7;
    --ops-purple-300: 216 180 254;
    --ops-purple-800: 107 33 168;
    --ops-purple-950: 59 7 100;
    --ops-amber-300: 252 211 77;
    --ops-amber-400: 251 191 36;
    --ops-amber-900: 120 53 15;
    --ops-amber-800: 146 64 14;
    --ops-amber-950: 69 26 3;
    --ops-emerald-300: 110 231 183;
    --ops-emerald-400: 52 211 153;
    --ops-emerald-500: 16 185 129;
    --ops-emerald-800: 6 95 70;
    --ops-emerald-950: 2 44 34;

    /* Shared shell geometry. */
    --ops-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ops-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ops-shell-sidebar-width: 15rem;
    --ops-shell-sidebar-compact-width: 4rem;
    --ops-shell-topbar-height: 3.5rem;
    --ops-shell-content-gutter: 1.5rem;
    --ops-shell-content-gutter-compact: 1rem;
    --ops-shell-radius-control: 0.375rem;
    --ops-shell-radius-card: 0.5rem;
    --ops-shell-radius-panel: 0.75rem;

    /* Compatibility aliases for custom components while they migrate to shell tokens. */
    --bg-canvas: rgb(var(--ops-shell-canvas));
    --bg-surface: rgb(var(--ops-shell-surface));
    --bg-surface-elevated: rgb(var(--ops-shell-surface-elevated));
    --border-subtle: rgb(var(--ops-shell-border));
    --border-strong: rgb(var(--ops-shell-border-strong));
    --text-primary: rgb(var(--ops-shell-text-primary));
    --text-secondary: rgb(var(--ops-shell-text-secondary));
    --text-muted: rgb(var(--ops-shell-text-muted));
    --brand-teal: rgb(var(--ops-shell-brand));
    --brand-teal-light: rgb(var(--ops-shell-brand-light));
    --brand-teal-dim: rgb(var(--ops-teal-950));
}

/* Custom minimal scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Base resets & typography */
body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--ops-font-sans);
    letter-spacing: -0.01em;
}

.ops-desktop-sidebar {
    width: var(--ops-shell-sidebar-width);
}

.ops-sidebar-brand {
    height: var(--ops-shell-topbar-height);
}

.ops-topbar {
    height: var(--ops-shell-topbar-height);
    flex: 0 0 auto;
    padding-inline: var(--ops-shell-content-gutter);
}

.ops-main-content {
    padding: var(--ops-shell-content-gutter);
}

/* Nordic Precision Sidebar Link */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0.5rem;
    border-radius: var(--ops-shell-radius-control);
    font-size: 13px;
    font-weight: 500;
    color: #a1a1aa;
    transition: all 120ms ease;
}

.nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    background: #2dd4bf;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

/* KPI Cards matching KlokIn Admin dashboard.php */
.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--ops-shell-radius-card);
    padding: 1.25rem;
    transition: border-color 0.15s ease;
}
.kpi-card:hover {
    border-color: var(--border-strong);
}

.kpi-num {
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fafafa;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a1a1aa;
    margin-bottom: 0.5rem;
}

/* Flat clean tables */
.ops-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ops-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(24, 24, 27, 0.6);
}

.ops-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(39, 39, 42, 0.6);
    color: #e4e4e7;
}

.ops-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.badge-pro {
    background: rgba(13, 148, 136, 0.15);
    color: #2dd4bf;
    border: 1px solid rgba(13, 148, 136, 0.3);
}

.badge-free {
    background: rgba(113, 113, 122, 0.15);
    color: #a1a1aa;
    border: 1px solid rgba(113, 113, 122, 0.3);
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Event priority treatments */
.ops-activity-row {
    position: relative;
    border-inline-start: 3px solid transparent;
}

.ops-activity-row.ops-activity-high {
    background: rgba(120, 53, 15, 0.1);
    border-inline-start-color: #f59e0b;
}

.ops-activity-row.ops-activity-critical {
    background: rgba(127, 29, 29, 0.2);
    border-inline-start-color: #ef4444;
}

.ops-activity-row.ops-activity-high:hover { background: rgba(120, 53, 15, 0.18); }
.ops-activity-row.ops-activity-critical:hover { background: rgba(127, 29, 29, 0.28); }

.ops-priority-panel {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(39, 39, 42, 0.68), rgba(24, 24, 27, 0.94));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.ops-priority-panel-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fbbf24;
    background: rgba(120, 53, 15, 0.32);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 0.5rem;
}

.ops-priority-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
}

.ops-priority-card {
    display: block;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.ops-priority-card:hover,
.ops-priority-card:focus-visible { transform: translateY(-1px); }
.ops-priority-card-high { background: rgba(120, 53, 15, 0.16); border-color: rgba(245, 158, 11, 0.42); }
.ops-priority-card-high:hover, .ops-priority-card-high:focus-visible { background: rgba(120, 53, 15, 0.25); border-color: rgba(251, 191, 36, 0.72); }
.ops-priority-card-critical { background: rgba(127, 29, 29, 0.2); border-color: rgba(239, 68, 68, 0.52); }
.ops-priority-card-critical:hover, .ops-priority-card-critical:focus-visible { background: rgba(127, 29, 29, 0.3); border-color: rgba(248, 113, 113, 0.78); }

.ops-priority-label {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-priority-label-high { color: #fbbf24; background: rgba(120, 53, 15, 0.55); }
.ops-priority-label-critical { color: #fca5a5; background: rgba(127, 29, 29, 0.65); }

.ops-priority-empty {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.625rem;
    color: #a1a1aa;
    font-size: 0.75rem;
}

.ops-system-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(127, 29, 29, 0.24);
    border: 1px solid rgba(239, 68, 68, 0.52);
    border-radius: 0.625rem;
}

.ops-system-alert-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.5);
    border: 1px solid rgba(248, 113, 113, 0.46);
    border-radius: 0.5rem;
}

.ops-system-loading {
    contain: layout paint;
}

.ops-skeleton-card {
    min-height: 7.25rem;
}

.ops-skeleton {
    display: block;
    background: linear-gradient(100deg, rgba(63, 63, 70, 0.55) 8%, rgba(113, 113, 122, 0.3) 18%, rgba(63, 63, 70, 0.55) 33%);
    background-size: 200% 100%;
    animation: ops-skeleton-shimmer 1.35s ease-in-out infinite;
}

.ops-skeleton-line { height: 0.6rem; border-radius: 0.25rem; }
.ops-skeleton-line-title { width: 46%; }
.ops-skeleton-line-status { width: 61%; }
.ops-skeleton-line-detail { width: 86%; margin-top: 0.5rem; }
.ops-skeleton-pill { width: 3.75rem; height: 1.1rem; border-radius: 999px; }
.ops-skeleton-latency { width: 7rem; }
.ops-skeleton-line-metric-label { width: 68%; height: 0.5rem; }
.ops-skeleton-line-metric-value { width: 2.25rem; height: 1.35rem; margin-top: 0.5rem; }
.ops-skeleton-line-panel-title { width: 4.5rem; }
.ops-skeleton-line-panel-count { width: 5rem; height: 0.5rem; }
.ops-skeleton-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.7rem;
    padding: 0.625rem 0.7rem;
    background: rgba(39, 39, 42, 0.28);
    border: 1px solid rgba(63, 63, 70, 0.5);
    border-radius: 0.4rem;
}
.ops-skeleton-line-row { width: 56%; }
.ops-skeleton-line-time { width: 3.25rem; flex: 0 0 auto; }
.ops-skeleton-line-problem { width: min(50%, 24rem); margin-right: auto; }
.ops-skeleton-problem-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 4.25rem;
    padding: 0.875rem 1.25rem;
}

.ops-system-error-state {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(127, 29, 29, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 0.625rem;
}

@keyframes ops-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ops-service-card-error {
    background: rgba(127, 29, 29, 0.14);
    border-color: rgba(239, 68, 68, 0.48);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08);
}

.ops-problem-row {
    background: rgba(127, 29, 29, 0.1);
    border-inline-start: 3px solid #ef4444;
}

.ops-problem-row:hover { background: rgba(127, 29, 29, 0.18); }

.ops-coolify-section {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(24, 24, 27, 0.96));
    border: 1px solid rgba(13, 148, 136, 0.34);
    border-radius: 0.75rem;
}

.ops-coolify-metrics {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.625rem;
}

.ops-coolify-metric {
    min-width: 0;
    padding: 0.75rem;
    background: rgba(9, 9, 11, 0.48);
    border: 1px solid rgba(63, 63, 70, 0.8);
    border-radius: 0.5rem;
}

.ops-coolify-metric span {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ops-coolify-metric strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem;
    line-height: 1;
}

.ops-coolify-list-panel {
    min-width: 0;
    padding: 0.875rem;
    background: rgba(9, 9, 11, 0.42);
    border: 1px solid rgba(63, 63, 70, 0.72);
    border-radius: 0.625rem;
}

.ops-coolify-list-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.7rem;
    background: rgba(39, 39, 42, 0.34);
    border: 1px solid rgba(63, 63, 70, 0.58);
    border-radius: 0.4rem;
}

.ops-coolify-list-row-error {
    background: rgba(127, 29, 29, 0.18);
    border-color: rgba(239, 68, 68, 0.42);
}

.ops-coolify-unavailable {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    background: rgba(127, 29, 29, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 0.5rem;
}

/* Technical system log explorer */
.ops-log-filters { display: grid; grid-template-columns: minmax(16rem, 2fr) repeat(4, minmax(8rem, 1fr)); gap: 0.75rem; padding: 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.625rem; }
.ops-log-search, .ops-log-org-filter { grid-column: span 2; }
.ops-log-filter-action { display: flex; align-items: flex-end; }
.ops-filter-label { display: block; margin-bottom: 0.35rem; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ops-filter-control { width: 100%; min-width: 0; height: 2.25rem; padding: 0.45rem 0.65rem; color: #e4e4e7; background: #09090b; border: 1px solid #3f3f46; border-radius: 0.375rem; font-size: 12px; }
.ops-filter-control:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.16); }
.ops-log-list { overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.625rem; }
.ops-log-list-head, .ops-log-summary { display: grid; grid-template-columns: 9.75rem 5.5rem minmax(8rem, 0.9fr) minmax(14rem, 2fr) minmax(9rem, 1fr) minmax(7rem, 0.75fr) 1.25rem; gap: 0.75rem; align-items: center; }
.ops-log-list-head { padding: 0.7rem 1rem; color: var(--text-muted); background: rgba(9, 9, 11, 0.48); border-bottom: 1px solid var(--border-subtle); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ops-log-list-head a:hover { color: var(--brand-teal-light); }
.ops-log-entry { border-bottom: 1px solid rgba(39, 39, 42, 0.75); }
.ops-log-entry:last-child { border-bottom: 0; }
.ops-log-summary { min-height: 4rem; padding: 0.7rem 1rem; cursor: pointer; list-style: none; transition: background-color 120ms ease; }
.ops-log-summary::-webkit-details-marker { display: none; }
.ops-log-summary:hover, .ops-log-summary:focus-visible, .ops-log-entry[open] > .ops-log-summary { background: rgba(255, 255, 255, 0.025); }
.ops-log-summary:focus-visible { outline: 1px solid var(--brand-teal); outline-offset: -1px; }
.ops-log-time { color: #a1a1aa; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.ops-log-message { min-width: 0; overflow: hidden; color: #e4e4e7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ops-log-chevron { color: #71717a; font-size: 18px; transition: transform 120ms ease; }
.ops-log-entry[open] .ops-log-chevron { transform: rotate(180deg); }
.ops-log-detail { padding: 1rem; background: rgba(9, 9, 11, 0.52); border-top: 1px solid rgba(39, 39, 42, 0.7); }
.ops-log-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ops-log-detail-grid > div { min-width: 0; padding: 0.625rem; background: rgba(24, 24, 27, 0.72); border: 1px solid rgba(63, 63, 70, 0.55); border-radius: 0.375rem; }
.ops-log-detail-grid dt, .ops-log-code-grid h4 { margin-bottom: 0.3rem; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ops-log-detail-grid dd { overflow-wrap: anywhere; color: #d4d4d8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.ops-log-detail-wide { grid-column: span 2; }
.ops-log-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.ops-log-code-grid > div { min-width: 0; }
.ops-log-code-grid pre { max-height: 22rem; overflow: auto; padding: 0.75rem; color: #d4d4d8; background: #09090b; border: 1px solid #27272a; border-radius: 0.375rem; font-size: 10px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-page-link { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; padding: 0.35rem 0.6rem; color: #a1a1aa; background: #18181b; border: 1px solid #27272a; border-radius: 0.375rem; font-size: 11px; }
.ops-page-link:hover { color: #fff; border-color: #52525b; }
.ops-page-link.active { color: #5eead4; background: rgba(13, 148, 136, 0.14); border-color: rgba(13, 148, 136, 0.5); }

/* Responsive application shell */
html, body {
    min-height: 100%;
}

body.ops-app-shell {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    overflow-x: hidden;
}

.ops-mobile-brand,
.ops-mobile-bottom-nav,
.ops-more-sheet,
.ops-mobile-only {
    display: none;
}

.ops-tablet-more-toggle { display: none !important; }

.ops-main-content {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ops-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text-secondary);
    border-radius: 0.5rem;
}

.ops-icon-button:hover,
.ops-icon-button:focus-visible {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.ops-mobile-nav-item,
.ops-more-link {
    -webkit-tap-highlight-color: transparent;
}

.ops-card-list {
    display: grid;
    gap: 0.75rem;
}

.ops-data-card {
    display: block;
    min-width: 0;
    padding: 1rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
}

.ops-data-card:active {
    border-color: var(--brand-teal);
    background: var(--bg-surface-elevated);
}

.ops-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(39, 39, 42, 0.8);
}

.ops-card-label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ops-filter-scroll {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ops-filter-scroll::-webkit-scrollbar { display: none; }

.ops-filter-scroll > * { flex: 0 0 auto; min-height: 40px; }

@media (max-width: 1023px) {
    .ops-log-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-log-list-head { display: none; }
    .ops-log-summary { grid-template-columns: 8.75rem 5rem minmax(8rem, 1fr) minmax(12rem, 2fr) 1.25rem; }
    .ops-log-summary > :nth-child(5), .ops-log-summary > :nth-child(6) { display: none; }
    .ops-log-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-tablet-more-toggle { display: inline-flex !important; }
    .ops-sidebar-nav .nav-link {
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-inline: auto;
        padding: 0;
    }

    .ops-sidebar-nav .nav-link > span:last-child,
    .ops-desktop-sidebar > div:first-child > div:first-child > span:first-child,
    .ops-desktop-sidebar > div:first-child > div:first-child > span:last-child,
    .ops-desktop-sidebar > div:last-child {
        display: none;
    }

    .ops-desktop-sidebar { width: var(--ops-shell-sidebar-compact-width); }
    .ops-desktop-sidebar > div:first-child > div:first-child { justify-content: center; padding-inline: 0; }
    .ops-desktop-sidebar .nav-link.active::before { left: 0; }
    .ops-topbar { padding-inline: var(--ops-shell-content-gutter-compact); }
    .ops-main-content { padding: var(--ops-shell-content-gutter-compact); }

    .ops-more-sheet { position: fixed; inset: 0; z-index: 60; display: block; }
    .ops-more-sheet.hidden { display: none; }
    .ops-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.68); }
    .ops-sheet-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(24rem, calc(100vw - var(--ops-shell-sidebar-compact-width))); overflow-y: auto; padding: 1rem; background: var(--bg-surface); border-left: 1px solid var(--border-strong); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.35); }
    .ops-sheet-handle { display: none; }
    .ops-more-links { display: grid; gap: 0.25rem; }
    .ops-more-link { display: flex; min-height: 48px; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; color: var(--text-secondary); font-size: 0.875rem; border-radius: 0.5rem; }
    .ops-more-link.active, .ops-more-link:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
    .ops-more-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
}

@media (max-width: 767px) {
    .ops-log-filters { grid-template-columns: 1fr; }
    .ops-log-search, .ops-log-org-filter { grid-column: span 1; }
    .ops-log-summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem 0.75rem; padding: 0.875rem; }
    .ops-log-summary > :nth-child(1) { grid-column: 1; grid-row: 1; }
    .ops-log-summary > :nth-child(2) { grid-column: 2; grid-row: 1; }
    .ops-log-summary > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    .ops-log-summary > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ops-log-summary > :nth-child(5), .ops-log-summary > :nth-child(6) { display: block; grid-column: 1 / -1; }
    .ops-log-summary > :nth-child(7) { position: absolute; right: 0.85rem; bottom: 0.75rem; }
    .ops-log-detail { padding: 0.75rem; }
    .ops-log-detail-grid, .ops-log-code-grid { grid-template-columns: 1fr; }
    .ops-log-detail-wide { grid-column: span 1; }
    body.ops-sheet-open { overflow: hidden; }
    body.ops-app-shell { display: block; }

    /* Tailwind's generated .flex rule can be injected after this stylesheet. */
    .ops-desktop-sidebar,
    .ops-desktop-sidebar .ops-sidebar-nav { display: none !important; }
    .ops-tablet-more-toggle { display: none !important; }
    .ops-mobile-brand { display: inline-flex; }
    .ops-topbar {
        height: var(--ops-shell-topbar-height);
        padding-top: env(safe-area-inset-top);
        box-sizing: content-box;
    }
    .ops-topbar > div:first-child > h1 { display: none; }
    .ops-topbar > div:last-child { gap: 0; }
    .ops-topbar > div:last-child > a { min-height: 40px; padding-inline: 0.625rem; }
    .ops-topbar > div:last-child > a > span:nth-child(2) { display: none; }
    .ops-topbar > div:last-child > a > span:nth-child(3) { font-size: 10px; }

    .ops-main-shell { height: calc(100dvh - var(--ops-shell-topbar-height) - env(safe-area-inset-top)); }
    .ops-main-content {
        padding: var(--ops-shell-content-gutter-compact) var(--ops-shell-content-gutter-compact) calc(5.75rem + env(safe-area-inset-bottom));
        scrollbar-gutter: auto;
    }

    .ops-mobile-bottom-nav {
        position: fixed;
        z-index: 40;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
        background: rgba(24, 24, 27, 0.94);
        border-top: 1px solid var(--border-subtle);
        backdrop-filter: blur(18px);
    }

    .ops-mobile-nav-item {
        display: flex;
        min-width: 0;
        min-height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.25rem;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
    }

    .ops-mobile-nav-item.active,
    .ops-mobile-nav-item:focus-visible { color: var(--brand-teal-light); background: rgba(13, 148, 136, 0.12); }
    .ops-mobile-nav-item svg { width: 18px; height: 18px; }

    .ops-more-sheet { position: fixed; inset: 0; z-index: 60; display: block; }
    .ops-more-sheet.hidden { display: none; }
    .ops-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.68); }
    .ops-sheet-panel {
        position: absolute;
        right: 0;
        top: auto;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: min(85dvh, 720px);
        overflow-y: auto;
        padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
        background: var(--bg-surface);
        border-top: 1px solid var(--border-strong);
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.35);
    }
    .ops-sheet-handle { width: 2.25rem; height: 0.25rem; margin: 0 auto 0.75rem; border-radius: 999px; background: #52525b; }
    .ops-more-links { display: grid; gap: 0.25rem; }
    .ops-more-link { display: flex; min-height: 48px; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; color: var(--text-secondary); font-size: 0.875rem; border-radius: 0.5rem; }
    .ops-more-link.active, .ops-more-link:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
    .ops-more-link svg { width: 18px; height: 18px; flex: 0 0 auto; }

    .ops-mobile-only { display: block; }
    .ops-mobile-only.ops-card-list { display: grid; }
    .ops-desktop-only { display: none !important; }
    .ops-card-list.ops-desktop-only { display: none !important; }
    .kpi-card { padding: 1rem; }
    .kpi-label { font-size: 10px; }
    .kpi-num { font-size: clamp(24px, 8vw, 30px); }
    .ops-main-content .relative.w-64 { width: 100%; }
    .ops-main-content .inline-flex.rounded-md { max-width: 100%; overflow-x: auto; }
    .ops-main-content .space-y-6 > div:first-child,
    .ops-main-content .space-y-8 > div:first-child { gap: 1rem; }
    .ops-overview-attention { order: 1; }
    .ops-overview-activity { order: 2; }
    .ops-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-coolify-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #org-tabs-nav { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    #org-tabs-nav::-webkit-scrollbar { display: none; }
    #org-tabs-nav button { min-height: 44px; flex: 0 0 auto; white-space: nowrap; padding-inline: 0.875rem; }
    .ops-main-content h2 { overflow-wrap: anywhere; }
    .ops-table { font-size: 12px; }
    .ops-table th, .ops-table td { padding: 0.75rem; }
    .ops-main-content .ops-table { min-width: 0; }
    .ops-responsive-table { display: block; }
    .ops-responsive-table thead { display: none; }
    .ops-responsive-table tbody,
    .ops-responsive-table tr,
    .ops-responsive-table td { display: block; width: 100%; box-sizing: border-box; }
    .ops-responsive-table tr { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-subtle); }
    .ops-responsive-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border: 0; text-align: right; }
    .ops-responsive-table td > * { min-width: 0; overflow-wrap: anywhere; }
    .ops-responsive-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; }
    .ops-responsive-table td:first-child { display: block; padding-bottom: 0.5rem; text-align: left; }
    .ops-responsive-table td:first-child::before { display: none; }
    .ops-modal { align-items: flex-end; padding: 0; }
    .ops-modal-panel { max-height: 90dvh; overflow-y: auto; padding: 1rem; border-radius: 1rem 1rem 0 0; }
    .ops-priority-panel { padding: 0.875rem; }
    .ops-priority-grid { grid-template-columns: 1fr; }
    .ops-priority-panel > div:first-child { align-items: flex-start; }
    .ops-priority-panel > div:first-child > a { font-size: 10px; }
    .ops-activity-row { border-inline-start-width: 2px; }
    .ops-coolify-section { padding: 0.875rem; }
    .ops-coolify-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-coolify-metric strong { font-size: 1.2rem; }
    .ops-coolify-list-row { align-items: flex-start; }
}

@media (min-width: 768px) {
    .ops-mobile-only { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .ops-skeleton { animation: none; }
}