/**
 * Nucleo V3 Custom Theme for Authentik
 * Beneficio Rio Frio - Coffee Production System
 *
 * Color Palette:
 * - Royal Blue: #1e3a8a (deep), #2563eb (standard), #3b82f6 (light)
 * - Gold: #d97706 (dark), #f59e0b (standard), #fbbf24 (light)
 * - Dark Mode: Deep royal blue background with gold illumination
 * - Light Mode: Intense gold with strong royal blue accents
 */

:root {
    /* Royal Blue Palette */
    --royal-blue-900: #0f1729;
    --royal-blue-800: #1e3a8a;
    --royal-blue-700: #1d4ed8;
    --royal-blue-600: #2563eb;
    --royal-blue-500: #3b82f6;
    --royal-blue-400: #60a5fa;
    --royal-blue-300: #93c5fd;

    /* Gold Palette */
    --gold-900: #78350f;
    --gold-800: #92400e;
    --gold-700: #b45309;
    --gold-600: #d97706;
    --gold-500: #f59e0b;
    --gold-400: #fbbf24;
    --gold-300: #fcd34d;
    --gold-200: #fde68a;

    /* Obsidian (Dark Mode Cards) */
    --obsidian-base: #0a0e1a;
    --obsidian-light: #151b2e;
    --obsidian-glow: rgba(245, 158, 11, 0.1);

    /* Porcelain (Light Mode Cards) */
    --porcelain-base: #fefefe;
    --porcelain-shadow: rgba(30, 58, 138, 0.08);
    --porcelain-border: rgba(30, 58, 138, 0.12);
}

/* ========================================
   LIGHT MODE - Golden Elegance
   ======================================== */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Background with dot pattern */
    --pf-v5-global-BackgroundColor--100: #fef3c7;
    --pf-v5-global-BackgroundColor--200: #fde68a;

    /* Primary colors - Gold dominant */
    --pf-v5-global-primary-color--100: var(--gold-600);
    --pf-v5-global-primary-color--200: var(--gold-700);
    --pf-v5-global-link-Color: var(--royal-blue-700);
    --pf-v5-global-link-Color--hover: var(--royal-blue-800);

    /* Accent - Royal Blue */
    --pf-v5-global-active-color--100: var(--royal-blue-700);
    --pf-v5-global-active-color--200: var(--royal-blue-800);

    /* Text colors */
    --pf-v5-global-Color--100: var(--royal-blue-900);
    --pf-v5-global-Color--200: var(--royal-blue-800);

    /* Border colors */
    --pf-v5-global-BorderColor--100: var(--royal-blue-300);
    --pf-v5-global-BorderColor--200: var(--royal-blue-400);
}

[data-theme="light"] body,
:root:not([data-theme="dark"]) body {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    position: relative;
}

/* Dot pattern for light mode */
[data-theme="light"] body::before,
:root:not([data-theme="dark"]) body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(30, 58, 138, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* Porcelain effect for cards in light mode */
[data-theme="light"] .pf-v5-c-card,
[data-theme="light"] .pf-v5-c-login__main,
[data-theme="light"] .pf-v5-c-modal-box,
[data-theme="light"] .ak-flow-executor,
:root:not([data-theme="dark"]) .pf-v5-c-card,
:root:not([data-theme="dark"]) .pf-v5-c-login__main,
:root:not([data-theme="dark"]) .pf-v5-c-modal-box,
:root:not([data-theme="dark"]) .ak-flow-executor {
    background: var(--porcelain-base) !important;
    border: 1px solid var(--porcelain-border) !important;
    box-shadow:
        0 1px 3px var(--porcelain-shadow),
        0 10px 40px rgba(30, 58, 138, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(30, 58, 138, 0.05) !important;
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
}

/* Subtle shine effect for porcelain */
[data-theme="light"] .pf-v5-c-card::after,
[data-theme="light"] .pf-v5-c-login__main::after,
:root:not([data-theme="dark"]) .pf-v5-c-card::after,
:root:not([data-theme="dark"]) .pf-v5-c-login__main::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

[data-theme="light"] .pf-v5-c-card:hover::after,
[data-theme="light"] .pf-v5-c-login__main:hover::after,
:root:not([data-theme="dark"]) .pf-v5-c-card:hover::after,
:root:not([data-theme="dark"]) .pf-v5-c-login__main:hover::after {
    opacity: 1;
}

/* ========================================
   DARK MODE - Royal Depths with Gold Light
   ======================================== */
[data-theme="dark"] {
    /* Background - Deep royal blue */
    --pf-v5-global-BackgroundColor--100: var(--royal-blue-900);
    --pf-v5-global-BackgroundColor--200: var(--royal-blue-800);

    /* Primary colors - Gold illumination */
    --pf-v5-global-primary-color--100: var(--gold-500);
    --pf-v5-global-primary-color--200: var(--gold-400);
    --pf-v5-global-link-Color: var(--gold-400);
    --pf-v5-global-link-Color--hover: var(--gold-300);

    /* Accent colors */
    --pf-v5-global-active-color--100: var(--gold-500);
    --pf-v5-global-active-color--200: var(--gold-400);

    /* Text colors */
    --pf-v5-global-Color--100: #f8fafc;
    --pf-v5-global-Color--200: #e2e8f0;
    --pf-v5-global-Color--300: var(--gold-300);

    /* Border colors */
    --pf-v5-global-BorderColor--100: rgba(245, 158, 11, 0.2);
    --pf-v5-global-BorderColor--200: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, var(--royal-blue-900) 0%, #0f1e42 50%, var(--royal-blue-800) 100%);
    position: relative;
}

/* Dot pattern for dark mode - illuminated by gold */
[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(245, 158, 11, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* Additional subtle glow pattern */
[data-theme="dark"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Obsidian effect for cards in dark mode */
[data-theme="dark"] .pf-v5-c-card,
[data-theme="dark"] .pf-v5-c-login__main,
[data-theme="dark"] .pf-v5-c-modal-box,
[data-theme="dark"] .ak-flow-executor {
    background: linear-gradient(135deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    box-shadow:
        0 0 1px rgba(245, 158, 11, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 8px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(245, 158, 11, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 0 80px rgba(245, 158, 11, 0.05) !important;
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
}

/* Gold glow effect on hover */
[data-theme="dark"] .pf-v5-c-card:hover,
[data-theme="dark"] .pf-v5-c-login__main:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow:
        0 0 2px rgba(245, 158, 11, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 8px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(245, 158, 11, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 0 100px rgba(245, 158, 11, 0.1) !important;
}

/* Obsidian glass-like reflection */
[data-theme="dark"] .pf-v5-c-card::before,
[data-theme="dark"] .pf-v5-c-login__main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(245, 158, 11, 0.05) 0%,
        transparent 100%
    );
    pointer-events: none;
}

/* ========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

/* Primary buttons - Gold in dark, Royal blue in light */
[data-theme="dark"] .pf-v5-c-button.pf-m-primary,
[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary) {
    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%) !important;
    border: 1px solid var(--gold-400) !important;
    color: var(--royal-blue-900) !important;
    font-weight: 600;
    box-shadow:
        0 0 10px rgba(245, 158, 11, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

[data-theme="dark"] .pf-v5-c-button.pf-m-primary:hover,
[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary):hover {
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%) !important;
    box-shadow:
        0 0 20px rgba(245, 158, 11, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

[data-theme="light"] .pf-v5-c-button.pf-m-primary,
[data-theme="light"] button[type="submit"]:not(.pf-m-secondary),
:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary,
:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary) {
    background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-600) 100%) !important;
    border: 1px solid var(--royal-blue-800) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow:
        0 0 10px rgba(30, 58, 138, 0.2),
        0 4px 12px rgba(30, 58, 138, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .pf-v5-c-button.pf-m-primary:hover,
[data-theme="light"] button[type="submit"]:not(.pf-m-secondary):hover,
:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary:hover,
:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary):hover {
    background: linear-gradient(135deg, var(--royal-blue-800) 0%, var(--royal-blue-700) 100%) !important;
    box-shadow:
        0 0 15px rgba(30, 58, 138, 0.3),
        0 6px 16px rgba(30, 58, 138, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* Input fields */
[data-theme="dark"] .pf-v5-c-form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: rgba(10, 14, 26, 0.6) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    color: #f8fafc !important;
    transition: all 0.3s ease;
}

[data-theme="dark"] .pf-v5-c-form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--gold-500) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
    outline: none;
}

[data-theme="light"] .pf-v5-c-form-control,
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
:root:not([data-theme="dark"]) .pf-v5-c-form-control,
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) select {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--porcelain-border) !important;
    color: var(--royal-blue-900) !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .pf-v5-c-form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
:root:not([data-theme="dark"]) .pf-v5-c-form-control:focus,
:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) select:focus {
    border-color: var(--royal-blue-600) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
    outline: none;
}

/* ========================================
   NAVIGATION & HEADER
   ======================================== */

[data-theme="dark"] .pf-v5-c-page__header,
[data-theme="dark"] .pf-v5-c-masthead {
    background: linear-gradient(90deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.05) !important;
}

[data-theme="light"] .pf-v5-c-page__header,
[data-theme="light"] .pf-v5-c-masthead,
:root:not([data-theme="dark"]) .pf-v5-c-page__header,
:root:not([data-theme="dark"]) .pf-v5-c-masthead {
    background: var(--porcelain-base) !important;
    border-bottom: 1px solid var(--porcelain-border) !important;
    box-shadow: 0 2px 12px var(--porcelain-shadow) !important;
}

/* Logo area gold accent in dark mode */
[data-theme="dark"] .pf-v5-c-brand {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
}

/* ========================================
   SCROLLBARS
   ======================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--royal-blue-900);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-600) 100%);
    border-radius: 6px;
    border: 2px solid var(--royal-blue-900);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
}

[data-theme="light"] ::-webkit-scrollbar,
:root:not([data-theme="dark"]) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="light"] ::-webkit-scrollbar-track,
:root:not([data-theme="dark"]) ::-webkit-scrollbar-track {
    background: #fef3c7;
}

[data-theme="light"] ::-webkit-scrollbar-thumb,
:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--royal-blue-600) 0%, var(--royal-blue-700) 100%);
    border-radius: 6px;
    border: 2px solid #fef3c7;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-800) 100%);
}

/* ========================================
   SPECIAL EFFECTS
   ======================================== */

/* Gold shimmer animation for important elements in dark mode */
@keyframes gold-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

[data-theme="dark"] .ak-flow-executor .pf-v5-c-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2 {
    background: linear-gradient(
        90deg,
        var(--gold-400) 0%,
        var(--gold-200) 50%,
        var(--gold-400) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Porcelain shine in light mode */
[data-theme="light"] h1,
[data-theme="light"] h2,
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2 {
    color: var(--royal-blue-900);
    text-shadow: 0 1px 2px rgba(30, 58, 138, 0.1);
}

/* Loading spinners */
[data-theme="dark"] .pf-v5-c-spinner {
    color: var(--gold-500) !important;
}

[data-theme="light"] .pf-v5-c-spinner,
:root:not([data-theme="dark"]) .pf-v5-c-spinner {
    color: var(--royal-blue-600) !important;
}

/* Alerts and notifications */
[data-theme="dark"] .pf-v5-c-alert {
    border-left: 4px solid var(--gold-500) !important;
    background: rgba(10, 14, 26, 0.8) !important;
}

[data-theme="light"] .pf-v5-c-alert,
:root:not([data-theme="dark"]) .pf-v5-c-alert {
    border-left: 4px solid var(--royal-blue-600) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   COFFEE THEME EASTER EGG
   ======================================== */

/* Subtle coffee bean pattern overlay (very subtle, only visible on close inspection) */
.pf-v5-c-login__main::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zM6 1v3M10 1v3M14 1v3"/></svg>');
    opacity: 0.05;
    pointer-events: none;
}

[data-theme="dark"] .pf-v5-c-login__main::after {
    color: var(--gold-500);
}

[data-theme="light"] .pf-v5-c-login__main::after,
:root:not([data-theme="dark"]) .pf-v5-c-login__main::after {
    color: var(--royal-blue-600);
}