/* ========================================
   Global Styles — Design System Foundation
   ========================================

   This file establishes the design system for the entire application:
   - CSS custom properties (colors, typography, spacing, shadows, radii)
   - CSS reset / base normalization
   - Typography scale
   - Bulma overrides for consistent theming
   - Utility classes

   Loads BEFORE custom-components.css (see basehead.html).
*/

/* ========== Design Tokens ========== */
:root {
    /* --- Brand Colors --- */
    --color-primary: #7B9DFF;
    --color-primary-hover: #6A8EF5;
    --color-primary-light: rgba(123, 157, 255, 0.1);
    --color-primary-shadow: rgba(123, 157, 255, 0.3);

    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #F87171;

    /* --- Neutral Palette (warm-tinted, never pure black/white) --- */
    --color-bg-page: #FAFBFC;
    --color-bg-surface: #FFFFFF;
    --color-bg-subtle: #F9FAFB;
    --color-bg-muted: #F3F4F6;

    --color-border: #E5E7EB;
    --color-border-light: #E8EBF0;
    --color-border-muted: #F3F4F6;

    --color-text-primary: #374151;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #9CA3AF;
    --color-text-heading: #1F2937;

    /* --- Notification Semantic Colors --- */
    --color-info-bg: #EFF6FF;
    --color-info-border: #DBEAFE;
    --color-info-text: #1E40AF;

    --color-success-bg: #ECFDF5;
    --color-success-border: #D1FAE5;
    --color-success-text: #065F46;

    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-warning-text: #92400E;

    --color-danger-bg: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-danger-text: #991B1B;

    /* --- Typography --- */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Consolas,
        "Courier New", monospace;

    /* Modular type scale (1.25 ratio) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px — body default for dense panels */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* --- Spacing Scale (4px base) --- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* --- Shadows (tiered) --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* --- Border Radius --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* --- Transitions --- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Layout --- */
    --content-max-width: 1400px;
    --navbar-height: 5rem;
}

/* ========== CSS Reset / Base ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
}

/* Alpine.js Cloak */
[x-cloak] {
    display: none !important;
}

/* ========== Layout ========== */

/* Override Bulma container max-width */
.container {
    max-width: var(--content-max-width) !important;
}

/* Main content area — clears the fixed navbar */
.main-content {
    padding-top: var(--navbar-height);
}

/* Impersonation banner */
.impersonation-banner-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) 0;
}

.impersonation-banner {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impersonation-banner p {
    color: var(--color-warning-text);
    font-size: var(--text-base);
    margin: 0;
}

.impersonation-banner .btn-stop-impersonate {
    height: 2rem;
    padding: 0 var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    color: var(--color-warning-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-base);
}

.impersonation-banner .btn-stop-impersonate:hover {
    background: var(--color-warning-border);
}

/* ========== Typography Utilities ========== */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

/* ========== Links ========== */
a {
    color: var(--color-primary);
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-hover);
}

/* ========== Bulma Component Overrides ========== */

/* --- Buttons --- */
.button.is-primary {
    background-color: var(--color-primary);
    border-color: transparent;
    transition: all var(--transition-base);
}

.button.is-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-primary-shadow);
}

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

.button.is-loading {
    pointer-events: none;
}

/* --- Box / Card --- */
.box {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.box:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* --- Inputs --- */
.input:focus,
.textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* --- Tags --- */
.tag {
    border-radius: var(--radius-md);
    font-weight: 500;
}

/* --- Progress Bars --- */
.progress {
    border-radius: var(--radius-sm);
    background-color: var(--color-border);
}

.progress::-webkit-progress-value {
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
}

.progress::-moz-progress-bar {
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
}

.progress.is-primary::-webkit-progress-value {
    background-color: var(--color-primary);
}

/* --- Tables --- */
.table {
    background-color: var(--color-bg-surface);
}

.table thead {
    background-color: var(--color-bg-subtle);
}

.table thead th {
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--color-border);
}

.table tbody tr:hover {
    background-color: var(--color-bg-subtle);
}

.table td {
    border-bottom: 1px solid var(--color-border-muted);
    color: var(--color-text-primary);
}

/* --- Modals --- */
.modal-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.modal-card-head {
    background-color: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border);
}

.modal-card-foot {
    background-color: var(--color-bg-page);
    border-top: 1px solid var(--color-border);
}

/* --- Notifications --- */
.notification {
    border-radius: var(--radius-lg);
    border: 1px solid;
}

.notification.is-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

.notification.is-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.notification.is-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.notification.is-danger {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

/* ========== Utility Classes ========== */
.has-text-primary-custom {
    color: var(--color-primary) !important;
}

.has-text-muted {
    color: var(--color-text-secondary) !important;
}

.has-text-light {
    color: var(--color-text-tertiary) !important;
}

/* ========== Smooth Transitions (global interactive elements) ========== */
button,
.button,
a,
input,
textarea,
select {
    transition: all var(--transition-base);
}

/* ========== Loading State ========== */
.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ========== Responsive ========== */
@media screen and (max-width: 768px) {
    body {
        font-size: 0.9375rem;
    }
}