/* ==========================================================================
   Trieste Boulder - Boulder Park Dolina
   Admin Theme: GitLab Style — Catppuccin Mocha (Dark)
   ========================================================================== */

/* Catppuccin Mocha Palette Reference:
   - Base:      #1e1e2e (Default background)
   - Mantle:    #181825 (Header, sidebar, footer, cards)
   - Crust:     #11111b (Inputs, sunken containers, code)
   - Surface 0: #313244 (Card borders, dividers, subtle button bg)
   - Surface 1: #45475a (Active borders, secondary hover)
   - Surface 2: #585b70 (Highlight borders)
   - Overlay 0: #6c7086 (Muted icons)
   - Subtext 0: #a6adc8 (Muted text, helper labels)
   - Subtext 1: #bac2de (Secondary text)
   - Text:      #cdd6f4 (Primary text)
   - Mauve:     #cba6f7 (GitLab primary accent / active tab)
   - Blue:      #89b4fa (GitLab info / links / lines count)
   - Green:     #a6e3a1 (GitLab success / areas count)
   - Peach:     #fab387 (GitLab warning / covers count)
   - Red:       #f38ba8 (GitLab danger / delete / error)
*/

body.admin-theme-mocha {
    color-scheme: dark;

    /* Theme Tokens Scoped to Mocha */
    --color-bg: #1e1e2e;
    --color-surface: #181825;
    --color-surface-hover: #24273a;
    --color-surface-sunken: #11111b;
    --color-border: #313244;
    --color-border-dark: #45475a;
    --color-text: #cdd6f4;
    --color-text-muted: #a6adc8;
    --color-primary: #cba6f7;
    --color-primary-hover: #b48bf5;
    --color-on-accent: #11111b;

    /* GitLab Header & Footer Tokens */
    --color-header-bg: #181825;
    --color-header-border: #313244;
    --color-header-text: #cdd6f4;
    --color-header-text-hover: #ffffff;
    --color-header-hover-bg: #313244;

    --color-hero-bg: #181825;
    --color-hero-border: #313244;

    --color-footer-bg: #181825;
    --color-footer-border: #313244;

    /* Grayscale tokens mapped to Mocha dark spectrum */
    --gl-white: #ffffff;
    --gl-gray-50: #181825;
    --gl-gray-100: #24273a;
    --gl-gray-200: #313244;
    --gl-gray-300: #45475a;
    --gl-gray-400: #585b70;
    --gl-gray-600: #a6adc8;
    --gl-gray-700: #bac2de;
    --gl-gray-800: #cdd6f4;
    --gl-gray-900: #f5e0dc; /* High-contrast Rosewater for prominent headers */

    /* Catppuccin Mocha Accents */
    --gl-purple: #cba6f7;
    --gl-purple-hover: #b48bf5;
    --gl-purple-subtle: rgba(203, 166, 247, 0.15);
    --gl-purple-light: #cba6f7;

    --gl-blue: #89b4fa;
    --gl-blue-hover: #74a4f8;
    --gl-blue-subtle: rgba(137, 180, 250, 0.15);
    --gl-blue-light: #89b4fa;

    --gl-green: #a6e3a1;
    --gl-green-hover: #94d38f;
    --gl-green-subtle: rgba(166, 227, 161, 0.15);

    --gl-amber: #fab387;
    --gl-amber-hover: #e59d70;
    --gl-amber-subtle: rgba(250, 179, 135, 0.15);

    --gl-red: #f38ba8;
    --gl-red-hover: #e0708f;
    --gl-red-subtle: rgba(243, 139, 168, 0.15);

    /* Shadows (dark) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 28px -4px rgba(0, 0, 0, 0.65), 0 6px 12px -2px rgba(0, 0, 0, 0.45);

    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* Base Headings & Links */
body.admin-theme-mocha h1,
body.admin-theme-mocha h2,
body.admin-theme-mocha h3,
body.admin-theme-mocha h4 {
    color: var(--gl-gray-900) !important;
    letter-spacing: -0.01em;
}

body.admin-theme-mocha a {
    color: var(--gl-purple);
    text-decoration: none;
    transition: var(--transition);
}

body.admin-theme-mocha a:hover {
    color: var(--gl-purple-hover);
}

/* Header (GitLab Top Bar) */
body.admin-theme-mocha .header-nav {
    background-color: var(--color-header-bg) !important;
    border-bottom: 1px solid var(--color-header-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

body.admin-theme-mocha .brand {
    color: var(--gl-white) !important;
    font-weight: 600;
}

body.admin-theme-mocha .brand-icon {
    background: linear-gradient(135deg, #89b4fa, #cba6f7) !important;
    color: #11111b !important;
    font-weight: 700;
}

body.admin-theme-mocha .nav-links {
    gap: 0.25rem;
}

body.admin-theme-mocha .nav-link {
    color: var(--color-text-muted) !important;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
}

body.admin-theme-mocha .nav-link:hover {
    background-color: var(--gl-gray-200) !important;
    color: var(--gl-white) !important;
}

body.admin-theme-mocha .nav-link.active {
    background-color: rgba(203, 166, 247, 0.12) !important;
    color: var(--gl-purple) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--gl-purple);
}

/* GitLab Cards */
body.admin-theme-mocha .card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition);
}

body.admin-theme-mocha .card:hover {
    border-color: var(--color-border-dark) !important;
    box-shadow: var(--shadow-md) !important;
}

body.admin-theme-mocha .card-header {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 0.9rem 1.25rem !important;
}

body.admin-theme-mocha .card-body {
    padding: 1.25rem !important;
}

/* GitLab Buttons */
body.admin-theme-mocha .btn-primary {
    background-color: var(--gl-purple) !important;
    border-color: var(--gl-purple) !important;
    color: #11111b !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.admin-theme-mocha .btn-primary:hover {
    background-color: var(--gl-purple-hover) !important;
    border-color: var(--gl-purple-hover) !important;
    color: #11111b !important;
}

body.admin-theme-mocha .btn-default,
body.admin-theme-mocha .btn-secondary {
    background-color: var(--gl-gray-200) !important;
    border-color: var(--gl-gray-300) !important;
    color: var(--color-text) !important;
    font-weight: 500;
}

body.admin-theme-mocha .btn-default:hover,
body.admin-theme-mocha .btn-secondary:hover {
    background-color: var(--gl-gray-300) !important;
    border-color: var(--gl-gray-400) !important;
    color: var(--gl-white) !important;
}

body.admin-theme-mocha .btn-danger {
    background-color: var(--gl-red-subtle) !important;
    border-color: rgba(243, 139, 168, 0.35) !important;
    color: var(--gl-red) !important;
}

body.admin-theme-mocha .btn-danger:hover {
    background-color: rgba(243, 139, 168, 0.25) !important;
    border-color: var(--gl-red) !important;
    color: #ffffff !important;
}

/* GitLab Dark Form Inputs */
body.admin-theme-mocha .form-group {
    margin-bottom: 1.15rem;
}

body.admin-theme-mocha .form-label {
    color: var(--color-text) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.35rem;
}

body.admin-theme-mocha .form-input,
body.admin-theme-mocha .form-select,
body.admin-theme-mocha .form-textarea {
    background-color: var(--color-surface-sunken) !important;
    border: 1px solid var(--color-border-dark) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
    transition: var(--transition);
}

body.admin-theme-mocha .form-input::placeholder,
body.admin-theme-mocha .form-textarea::placeholder {
    color: #6c7086 !important;
}

body.admin-theme-mocha .form-input:focus,
body.admin-theme-mocha .form-select:focus,
body.admin-theme-mocha .form-textarea:focus {
    outline: none !important;
    border-color: var(--gl-purple) !important;
    box-shadow: 0 0 0 3px var(--gl-purple-subtle) !important;
}

body.admin-theme-mocha .form-select option {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* GitLab Dark Tables */
body.admin-theme-mocha .table {
    border-collapse: collapse;
    width: 100%;
}

body.admin-theme-mocha .table th {
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    border-bottom: 2px solid var(--color-border) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 0.9rem !important;
}

body.admin-theme-mocha .table td {
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 0.85rem 0.9rem !important;
    vertical-align: middle;
}

body.admin-theme-mocha .table tr:hover td {
    background-color: var(--color-surface-hover) !important;
}

/* Badges */
body.admin-theme-mocha .badge {
    border-radius: var(--radius-full);
    font-weight: 600;
}

body.admin-theme-mocha .badge-grade-mid {
    background-color: var(--gl-blue-subtle) !important;
    color: var(--gl-blue) !important;
    border-color: rgba(137, 180, 250, 0.3) !important;
}

body.admin-theme-mocha .badge-grade-easy {
    background-color: var(--gl-green-subtle) !important;
    color: var(--gl-green) !important;
    border-color: rgba(166, 227, 161, 0.3) !important;
}

body.admin-theme-mocha .badge-grade-hard {
    background-color: var(--gl-amber-subtle) !important;
    color: var(--gl-amber) !important;
    border-color: rgba(250, 179, 135, 0.3) !important;
}

body.admin-theme-mocha .badge-grade-expert {
    background-color: var(--gl-red-subtle) !important;
    color: var(--gl-red) !important;
    border-color: rgba(243, 139, 168, 0.3) !important;
}

body.admin-theme-mocha .line-label-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--gl-gray-200);
    color: var(--gl-white);
    border: 1px solid var(--color-border-dark);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Alerts */
body.admin-theme-mocha .alert-success {
    background-color: var(--gl-green-subtle) !important;
    border-color: rgba(166, 227, 161, 0.35) !important;
    color: var(--gl-green) !important;
}

body.admin-theme-mocha .alert-danger,
body.admin-theme-mocha .alert-error {
    background-color: var(--gl-red-subtle) !important;
    border-color: rgba(243, 139, 168, 0.35) !important;
    color: var(--gl-red) !important;
}

/* Code & Pre */
body.admin-theme-mocha code {
    background-color: var(--color-surface-sunken) !important;
    color: var(--gl-purple) !important;
    border: 1px solid var(--color-border) !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 4px !important;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* Footer */
body.admin-theme-mocha footer {
    background-color: var(--color-footer-bg) !important;
    border-top: 1px solid var(--color-footer-border) !important;
    color: var(--color-text-muted) !important;
}