/* KlokIn Ops - Nordic Precision Design System Tokens */
:root {
    --bg-canvas: #09090b;       /* zinc-950 */
    --bg-surface: #18181b;      /* zinc-900 */
    --bg-surface-elevated: #27272a; /* zinc-800 */
    --border-subtle: #27272a;   /* zinc-800 */
    --border-strong: #3f3f46;   /* zinc-700 */
    --text-primary: #fafafa;    /* zinc-50 */
    --text-secondary: #a1a1aa;  /* zinc-400 */
    --text-muted: #71717a;      /* zinc-500 */
    --brand-teal: #0d9488;      /* teal-600 */
    --brand-teal-light: #2dd4bf;/* teal-400 */
    --brand-teal-dim: #042f2e;  /* 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: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.01em;
}

/* 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: 0.375rem;
    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: 6px;
    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);
}