@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
    --ga-bg: #0a0c10;
    --ga-surface: #11141a;
    --ga-surface-soft: #171b22;
    --ga-surface-strong: #1d232d;
    --ga-border: #222938;
    --ga-border-soft: rgba(255, 255, 255, 0.06);
    --ga-text: #f3f5fa;
    --ga-text-soft: #a0a9bb;
    --ga-text-dim: #6e788f;
    --ga-cyan: #22d3ee;
    --ga-blue: #3b82f6;
    --ga-green: #22c55e;
    --ga-yellow: #f59e0b;
    --ga-red: #ef4444;
    --ga-orange: #fb923c;
    --ga-purple: #a855f7;
    --ga-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
    --ga-radius: 16px;
    --ga-mono: 'Space Mono', monospace;
    --ga-page-shell-bg:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.07), transparent 24%),
        linear-gradient(180deg, #090b0f 0%, #0b0d11 100%);
    --ga-page-shell-border: rgba(255, 255, 255, 0.03);
    --ga-toolbar-chip-bg: rgba(255, 255, 255, 0.02);
    --ga-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.014));
    --ga-tab-bg: rgba(255, 255, 255, 0.02);
    --ga-tab-count-bg: rgba(255, 255, 255, 0.08);
    --ga-input-bg: rgba(255, 255, 255, 0.03);
    --ga-input-placeholder: #616b7f;
    --ga-table-head-bg: #0f1218;
    --ga-row-hover-bg: rgba(255, 255, 255, 0.03);
    --ga-chip-bg: rgba(255, 255, 255, 0.04);
    --ga-link: #7dd3fc;
    --ga-link-hover: #bae6fd;
    --ga-alert-reasons-bg: rgba(0, 0, 0, 0.18);
    --ga-home-shell-bg: var(--ga-page-shell-bg);
    --ga-home-shell-border: var(--ga-page-shell-border);
    --ga-home-stage-bg:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 25%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.08), transparent 22%),
        rgba(255, 255, 255, 0.03);
    --ga-home-stage-border: rgba(255, 255, 255, 0.05);
    --ga-home-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.016));
    --ga-home-main-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        #11141a;
    --ga-home-date-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.92), rgba(14, 165, 233, 0.88));
    --ga-home-date-text: #f9fbff;
    --ga-home-note-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    --ga-home-banner-border: var(--ga-border);
    --ga-home-banner-bg: linear-gradient(90deg, rgba(8, 145, 178, 0.22), rgba(14, 165, 233, 0.12));
    --ga-home-banner-text: #e0f2fe;
    --ga-home-return-border: rgba(34, 197, 94, 0.25);
    --ga-home-return-bg: rgba(34, 197, 94, 0.14);
    --ga-home-return-text: #86efac;
}

html[data-ga-theme="light"] {
    --ga-bg: #eef4fb;
    --ga-surface: #ffffff;
    --ga-surface-soft: #f6f9fd;
    --ga-surface-strong: #ebf1f8;
    --ga-border: #d7e0eb;
    --ga-border-soft: rgba(15, 23, 42, 0.08);
    --ga-text: #0f172a;
    --ga-text-soft: #516072;
    --ga-text-dim: #7b8798;
    --ga-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    --ga-page-shell-bg:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 24%),
        linear-gradient(180deg, #f9fbff 0%, #edf4fb 100%);
    --ga-page-shell-border: rgba(15, 23, 42, 0.06);
    --ga-toolbar-chip-bg: rgba(14, 165, 233, 0.08);
    --ga-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.96));
    --ga-tab-bg: rgba(255, 255, 255, 0.92);
    --ga-tab-count-bg: rgba(15, 23, 42, 0.08);
    --ga-input-bg: #ffffff;
    --ga-input-placeholder: #8491a4;
    --ga-table-head-bg: #edf3fa;
    --ga-row-hover-bg: rgba(14, 165, 233, 0.08);
    --ga-chip-bg: rgba(15, 23, 42, 0.04);
    --ga-link: #0369a1;
    --ga-link-hover: #075985;
    --ga-alert-reasons-bg: rgba(148, 163, 184, 0.12);
    --ga-home-stage-bg:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 25%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.08), transparent 22%),
        rgba(255, 255, 255, 0.72);
    --ga-home-stage-border: rgba(15, 23, 42, 0.06);
    --ga-home-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 252, 0.98));
    --ga-home-main-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.96)),
        #ffffff;
    --ga-home-note-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96));
    --ga-home-banner-bg: linear-gradient(90deg, rgba(8, 145, 178, 0.12), rgba(14, 165, 233, 0.06));
    --ga-home-banner-text: #0f4c6b;
}

.ga-page-shell {
    min-height: calc(100vh - 40px);
    background: var(--ga-page-shell-bg);
    border: 1px solid var(--ga-page-shell-border);
    border-radius: 24px;
    padding: 28px;
    color: var(--ga-text);
    box-shadow: var(--ga-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ga-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.ga-kicker {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ga-cyan);
    font-weight: 600;
    margin-bottom: 10px;
}

.ga-title {
    margin: 0;
    color: var(--ga-text);
    font-size: 31px;
    font-weight: 700;
    line-height: 1.1;
}

.ga-subtitle {
    margin: 8px 0 0;
    color: var(--ga-text-soft);
    font-size: 14px;
}

.ga-mono {
    font-family: var(--ga-mono);
}

.ga-page-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ga-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ga-border);
    background: var(--ga-toolbar-chip-bg);
    color: var(--ga-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.ga-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 42px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ga-border);
    background: var(--ga-toolbar-chip-bg);
    color: var(--ga-text) !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ga-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.12);
    color: var(--ga-text) !important;
}

.ga-theme-toggle__icon {
    color: var(--ga-cyan);
    font-size: 16px;
}

.ga-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ga-green);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.ga-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.ga-summary-card {
    background: var(--ga-panel-bg);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius);
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
}

.ga-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ga-cyan);
}

.ga-summary-card.ga-accent-purple::before {
    background: var(--ga-purple);
}

.ga-summary-card.ga-accent-blue::before {
    background: var(--ga-blue);
}

.ga-summary-card.ga-accent-red::before {
    background: #f87171;
}

.ga-summary-card.ga-accent-orange::before {
    background: var(--ga-orange);
}

.ga-summary-card.ga-accent-green::before {
    background: var(--ga-green);
}

.ga-summary-card.ga-accent-yellow::before {
    background: #fbbf24;
}

.ga-summary-label {
    display: block;
    color: var(--ga-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    font-weight: 700;
}

.ga-summary-value {
    font-size: 25px;
    line-height: 1;
    color: var(--ga-text);
    font-weight: 700;
    font-family: var(--ga-mono);
}

.ga-summary-meta {
    margin-top: 10px;
    color: var(--ga-text-soft);
    font-size: 12px;
}

.ga-filter-bar,
.ga-panel,
.ga-table-panel,
.ga-alert-card,
.ga-note-card,
.ga-detail-meta,
.ga-empty-state {
    background: var(--ga-panel-bg);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius);
    box-shadow: var(--ga-shadow);
}

.ga-filter-bar {
    padding: 16px;
    margin-bottom: 18px;
}

.ga-role-tabs-wrap {
    margin-bottom: 18px;
}

.ga-role-tabs {
    gap: 10px;
    border-bottom: 0;
}

.ga-role-tabs .nav-item {
    margin-bottom: 0;
}

.ga-role-tabs .nav-link {
    border: 1px solid var(--ga-border);
    background: var(--ga-tab-bg);
    color: var(--ga-text-soft);
    border-radius: 999px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.ga-role-tabs .nav-link:hover,
.ga-role-tabs .nav-link:focus {
    border-color: rgba(34, 211, 238, 0.38);
    color: var(--ga-text);
}

.ga-role-tabs .nav-link.active {
    border-color: rgba(34, 211, 238, 0.55);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.14));
    color: var(--ga-text);
}

.ga-tab-count {
    min-width: 26px;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ga-tab-count-bg);
    color: var(--ga-text);
    font-size: 11px;
    font-family: var(--ga-mono);
}

.ga-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(150px, 1fr)) auto;
    gap: 12px;
    align-items: center;
}

.ga-filter-grid-detail {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto auto;
}

.ga-filter-grid-employees {
    grid-template-columns: minmax(200px, 1.2fr) minmax(160px, 1fr) auto auto;
}

.ga-filter-grid-alerts {
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 1fr) minmax(160px, 1fr) auto auto;
}

.ga-input,
.ga-select,
.ga-textarea {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ga-border);
    background: var(--ga-input-bg);
    color: var(--ga-text);
    padding: 0 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ga-textarea {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

.ga-input:focus,
.ga-select:focus,
.ga-textarea:focus {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.ga-input::placeholder,
.ga-textarea::placeholder {
    color: var(--ga-input-placeholder);
}

.ga-input option,
.ga-select option {
    background: var(--ga-surface) !important;
    color: var(--ga-text) !important;
}

html[data-ga-theme="light"] .ga-input option,
html[data-ga-theme="light"] .ga-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

.ga-select-inline {
    min-width: 170px;
}

.ga-btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0 16px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    cursor: pointer;
}

.ga-btn-sm {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
}

.ga-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.ga-btn-primary {
    background: linear-gradient(90deg, #0891b2, #0ea5e9);
    color: #f9fbff;
}

.ga-btn-secondary {
    background: var(--ga-toolbar-chip-bg);
    color: var(--ga-text);
    border-color: var(--ga-border);
}

.ga-btn-danger {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.25);
}

.ga-btn-success {
    background: rgba(34, 197, 94, 0.16);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.25);
}

html[data-ga-theme="light"] .ga-btn-secondary {
    background: #eef4fb;
    color: #0f172a;
    border-color: #d4deea;
}

html[data-ga-theme="light"] .ga-btn-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.22);
}

html[data-ga-theme="light"] .ga-btn-success {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
}

.ga-panel {
    padding: 18px;
}

.ga-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ga-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ga-text);
}

.ga-panel-subtitle {
    font-size: 12px;
    color: var(--ga-text-soft);
}

.ga-table-panel {
    padding: 16px;
}

.ga-scroll-table {
    overflow: auto;
}

.ga-scroll-table-geo {
    max-height: 360px;
}

.ga-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
}

.ga-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ga-table-head-bg);
    color: var(--ga-text-dim);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 12px;
    border-bottom: 1px solid var(--ga-border);
    white-space: nowrap;
}

.ga-data-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--ga-border-soft);
    color: var(--ga-text);
    font-size: 13px;
    vertical-align: middle;
}

.ga-data-table tbody tr {
    transition: background 0.15s ease;
}

.ga-data-table tbody tr:hover {
    background: var(--ga-row-hover-bg);
}

.ga-table-pagination {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
}

.ga-table-pagination-length {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ga-text-soft);
    font-size: 12px;
    white-space: nowrap;
}

.ga-table-pagination-meta {
    color: var(--ga-text-soft);
    font-size: 12px;
    justify-self: center;
}

.ga-table-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-self: end;
}

.ga-page-size-select {
    width: auto;
    min-width: 78px;
    height: 36px;
    padding: 0 34px 0 12px;
    border-radius: 10px;
    border: 1px solid var(--ga-border);
    background: var(--ga-input-bg);
    color: var(--ga-text);
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ga-text-soft) 50%),
        linear-gradient(135deg, var(--ga-text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 14px,
        calc(100% - 12px) 14px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.ga-page-size-select option {
    background: var(--ga-panel-bg);
    color: var(--ga-text);
}

html[data-ga-theme="light"] .ga-page-size-select {
    color-scheme: light;
}

html:not([data-ga-theme="light"]) .ga-page-size-select {
    color-scheme: dark;
}

.ga-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.ga-sortable:hover {
    color: var(--ga-text);
}

.ga-sortable.is-active {
    color: var(--ga-text);
}

.ga-sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    margin-left: 6px;
    color: var(--ga-text-soft);
    font-size: 12px;
    line-height: 1;
}

.ga-sortable.is-active .ga-sort-icon {
    color: var(--ga-link);
}

.ga-clickable-row {
    cursor: pointer;
}

.ga-link {
    color: var(--ga-link);
    font-weight: 700;
    text-decoration: none;
}

.ga-link:hover {
    color: var(--ga-link-hover);
    text-decoration: underline;
}

.ga-status-badge,
.ga-alert-badge,
.ga-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
}

.ga-project-chip,
.ga-currency-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--ga-border);
}

.ga-project-chip {
    background: rgba(34, 211, 238, 0.09);
    color: #7dd3fc;
    border-color: rgba(34, 211, 238, 0.22);
}

.ga-currency-chip {
    background: var(--ga-chip-bg);
    color: var(--ga-text-soft);
}

.ga-status-enabled,
.ga-alert-ok {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.25);
}

.ga-status-paused,
.ga-alert-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.28);
}

.ga-status-removed,
.ga-status-disabled,
.ga-alert-severe {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.28);
}

html[data-ga-theme="light"] .ga-status-enabled,
html[data-ga-theme="light"] .ga-alert-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
}

html[data-ga-theme="light"] .ga-status-paused,
html[data-ga-theme="light"] .ga-alert-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.24);
}

html[data-ga-theme="light"] .ga-status-removed,
html[data-ga-theme="light"] .ga-status-disabled,
html[data-ga-theme="light"] .ga-alert-severe {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.22);
}

html[data-ga-theme="light"] .ga-alert-critical {
    background: rgba(251, 146, 60, 0.14);
    color: #9a3412;
    border-color: rgba(251, 146, 60, 0.24);
}

.ga-alert-critical {
    background: rgba(251, 146, 60, 0.16);
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.28);
}

.ga-cost-negative,
.ga-cost-accent {
    color: #fda4af;
    font-weight: 700;
}

.ga-metric-accent {
    color: #67e8f9;
    font-weight: 700;
}

.ga-soft {
    color: var(--ga-text-soft);
}

.ga-dim {
    color: var(--ga-text-dim);
}

.ga-detail-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.ga-info-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ga-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ga-border-soft);
}

.ga-info-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ga-info-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ga-text-dim);
    font-weight: 700;
}

.ga-info-value {
    color: var(--ga-text);
    font-weight: 700;
    text-align: right;
}

.ga-detail-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.ga-note-list,
.ga-alert-list {
    display: grid;
    gap: 14px;
}

.ga-note-card,
.ga-alert-card {
    padding: 18px;
}

.ga-alert-card-link {
    text-decoration: none !important;
    color: var(--ga-text);
    display: block;
}

.ga-alert-title {
    color: var(--ga-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ga-note-meta,
.ga-alert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--ga-text-soft);
    font-size: 12px;
}

.ga-alert-card.ga-alert-severe-card {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.42), rgba(46, 16, 16, 0.58));
}

.ga-alert-card.ga-alert-critical-card {
    border-color: rgba(251, 146, 60, 0.35);
    background: linear-gradient(180deg, rgba(124, 45, 18, 0.4), rgba(56, 26, 12, 0.55));
}

.ga-alert-card.ga-alert-warning-card {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, rgba(92, 62, 13, 0.38), rgba(43, 31, 8, 0.52));
}

.ga-alert-reasons {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ga-alert-reasons-bg);
    color: var(--ga-text-soft);
    font-size: 12px;
}

.ga-employee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ga-employee-card {
    background: var(--ga-panel-bg);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius);
    padding: 18px;
    box-shadow: var(--ga-shadow);
    position: relative;
}

html[data-ga-theme="light"] .ga-alert-card.ga-alert-severe-card {
    border-color: rgba(239, 68, 68, 0.24);
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.94), rgba(255, 241, 242, 0.98));
}

html[data-ga-theme="light"] .ga-alert-card.ga-alert-critical-card {
    border-color: rgba(251, 146, 60, 0.24);
    background: linear-gradient(180deg, rgba(255, 237, 213, 0.94), rgba(255, 247, 237, 0.98));
}

html[data-ga-theme="light"] .ga-alert-card.ga-alert-warning-card {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.94), rgba(255, 251, 235, 0.98));
}

@media (max-width: 768px) {
    .ga-theme-toggle__label {
        display: none;
    }

    .ga-theme-toggle {
        padding: 0 12px;
    }
}

.ga-employee-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ga-purple), #7c3aed);
}

.ga-employee-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
}

.ga-employee-email {
    color: var(--ga-text-soft);
    font-size: 13px;
    margin-bottom: 16px;
}

.ga-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ga-mini-stat-label {
    color: var(--ga-text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
    font-weight: 700;
}

.ga-mini-stat-value {
    color: var(--ga-text);
    font-family: var(--ga-mono);
    font-size: 20px;
    font-weight: 700;
}

.ga-empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--ga-text-soft);
}

.ga-loading {
    padding: 32px 20px;
    text-align: center;
    color: var(--ga-text-soft);
}

.ga-stack {
    display: grid;
    gap: 18px;
}

.ga-flex-between {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ga-employee-card .ga-flex-between> :first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ga-top-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ga-employee-card .ga-top-badges {
    width: 94px;
    min-width: 94px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-left: auto;
}

.ga-employee-card .ga-top-badges .ga-toolbar-chip {
    width: 100%;
    min-height: 30px;
    height: auto;
    justify-content: center;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    padding: 4px 8px;
    font-size: 11px;
}

.ga-note-form {
    display: grid;
    gap: 12px;
}

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

.ga-section-gap {
    margin-top: 18px;
}

.ga-summary-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ga-summary-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1400px) {
    .ga-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ga-employee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .ga-page-shell {
        min-height: auto;
        padding: 14px;
        border-radius: 16px;
    }

    .ga-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ga-detail-grid,
    .ga-detail-columns,
    .ga-employee-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ga-filter-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ga-filter-grid-detail,
    .ga-filter-grid-employees,
    .ga-filter-grid-alerts {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ga-filter-grid-employees {
        grid-template-columns: 1fr 1fr;
    }

    .ga-filter-grid-employees> :nth-child(1),
    .ga-filter-grid-employees> :nth-child(2) {
        grid-column: 1 / -1;
    }

    .ga-filter-grid-employees .ga-btn {
        width: 100%;
    }

    .ga-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
    }

    .ga-title {
        font-size: 24px;
    }

    .ga-subtitle {
        margin-top: 4px;
        font-size: 12px;
    }

    .ga-kicker {
        margin-bottom: 6px;
    }

    .ga-top-badges {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .ga-page-tools {
        width: 100%;
        gap: 8px;
    }

    .ga-page-tools .ga-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    .ga-filter-bar {
        padding: 12px;
        margin-bottom: 12px;
    }

    .ga-panel {
        padding: 12px;
    }

    .ga-panel-header {
        margin-bottom: 10px;
    }

    .ga-panel-title {
        font-size: 16px;
    }

    .ga-section-gap {
        margin-top: 12px;
    }

    .ga-table-pagination {
        padding-top: 8px;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .ga-table-pagination-controls {
        gap: 6px;
        justify-self: start;
    }

    .ga-inline-actions {
        gap: 8px;
    }

    .ga-mini-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ga-employee-card .ga-top-badges {
        width: 90px;
        min-width: 90px;
    }
}

@media (max-width: 640px) {
    .ga-page-shell {
        padding: 10px;
        border-radius: 12px;
    }
    .ga-summary-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 12px;
    }

    .ga-filter-bar {
        padding: 10px;
        margin-bottom: 10px;
    }

    .ga-filter-grid-employees {
        grid-template-columns: 1fr;
    }

    .ga-filter-grid-employees> :nth-child(1),
    .ga-filter-grid-employees> :nth-child(2) {
        grid-column: auto;
    }

    .ga-panel {
        padding: 10px;
    }

    .ga-page-header {
        gap: 8px;
        margin-bottom: 10px;
    }

    .ga-title {
        font-size: 21px;
    }

    .ga-subtitle {
        font-size: 12px;
    }

    .ga-inline-actions {
        gap: 6px;
    }

    .ga-btn {
        padding: 0 10px;
    }

    .ga-table-pagination-meta {
        width: 100%;
        justify-self: start;
    }

    .ga-table-pagination-controls {
        width: 100%;
        justify-self: start;
    }

    .ga-table-pagination-length {
        width: 100%;
    }

    .ga-mini-grid {
        grid-template-columns: 1fr;
    }

    .ga-panel-header {
        margin-bottom: 8px;
    }

    .ga-panel-title {
        font-size: 15px;
    }

    .ga-section-gap {
        margin-top: 10px;
    }

    .ga-top-badges {
        gap: 6px;
    }

    .ga-page-tools .ga-btn {
        flex-basis: 100%;
    }

    .ga-employee-card .ga-top-badges {
        width: 86px;
        min-width: 86px;
    }
}

/* Performance Chart & Metrics Bar */
.ga-chart-container {
    margin-bottom: 24px;
    background: var(--ga-panel-bg);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius);
    overflow: hidden;
    box-shadow: var(--ga-shadow);
}

.ga-metrics-selection-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--ga-border);
    background: rgba(255, 255, 255, 0.01);
}

.ga-metric-selection-card {
    padding: 16px 20px;
    cursor: pointer;
    border-right: 1px solid var(--ga-border);
    transition: all 0.2s ease;
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ga-metric-selection-card:last-child {
    border-right: none;
}

.ga-metric-selection-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ga-metric-selection-card.is-active {
    background: rgba(var(--metric-rgb), 0.06);
    border-top-color: var(--metric-color);
}

.ga-metric-selection-card .metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ga-text-dim);
    font-weight: 700;
}

.ga-metric-selection-card.is-active .metric-label {
    color: var(--metric-color);
}

.ga-metric-selection-card .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ga-text);
    font-family: var(--ga-mono);
}

.ga-metric-selection-card .metric-dropdown-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
}

.ga-performance-chart-body {
    padding: 20px;
    min-height: 350px;
}

/* Metric Colors */
.card-clicks { --metric-color: #3b82f6; --metric-rgb: 59, 130, 246; }
.card-impressions { --metric-color: #ef4444; --metric-rgb: 239, 68, 68; }
.card-cpc { --metric-color: #f59e0b; --metric-rgb: 245, 158, 11; }
.card-cost { --metric-color: #a855f7; --metric-rgb: 168, 85, 247; }

/* ApexCharts Overrides */
.apexcharts-tooltip {
    background: var(--ga-surface-strong) !important;
    border: 1px solid var(--ga-border) !important;
    box-shadow: var(--ga-shadow) !important;
    color: var(--ga-text) !important;
    border-radius: 8px !important;
}

.apexcharts-tooltip-title {
    background: var(--ga-surface) !important;
    border-bottom: 1px solid var(--ga-border) !important;
    font-weight: 700 !important;
}

.apexcharts-gridline {
    stroke: var(--ga-border-soft) !important;
}

.apexcharts-xaxis-label, .apexcharts-yaxis-label {
    fill: var(--ga-text-dim) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

@media (max-width: 767px) {
    .ga-chart-container {
        margin-bottom: 14px;
    }

    .ga-metrics-selection-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ga-metric-selection-card {
        min-width: 0;
        padding: 12px 14px;
    }

    .ga-metric-selection-card:nth-child(2n) {
        border-right: none;
    }

    .ga-metric-selection-card:nth-child(n + 3) {
        border-top: 1px solid var(--ga-border);
    }

    .ga-metric-selection-card.is-active:nth-child(n + 3) {
        border-top-color: var(--metric-color);
    }

    .ga-metric-selection-card .metric-label {
        font-size: 10px;
        letter-spacing: 0.06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ga-metric-selection-card .metric-value {
        font-size: 18px;
        line-height: 1.2;
    }

    .ga-performance-chart-body {
        padding: 14px 10px 8px;
        min-height: 300px;
    }
}

@media (max-width: 420px) {
    .ga-metric-selection-card {
        padding: 10px 8px;
    }

    .ga-metric-selection-card .metric-value {
        font-size: 16px;
    }

    .ga-performance-chart-body {
        padding-left: 4px;
        padding-right: 4px;
    }

    .apexcharts-xaxis-label, .apexcharts-yaxis-label {
        font-size: 10px !important;
    }
}

html[data-ga-theme="light"] .ga-metrics-selection-bar {
 background: #f8fbff;
}

html[data-ga-theme="light"] .ga-metric-selection-card:hover {
 background: #f1f6fc;
}