/* ========================================
   TAILWIND + DAISYUI
   ======================================== */
@import "tailwindcss";

/* Content sources for class detection */
@source "../../templates/**/*.html";
@source "../../public/js/**/*.js";
@source "../../../hold/admin/templates/**/*.html";

@plugin "@tailwindcss/typography";

@plugin "daisyui" {
    themes:
        light --default,
        dark --prefersdark;
}

/* ============================================
   DARK - "Deep Ocean"
   ============================================ */
@plugin "daisyui/theme" {
    name: "dark";
    default: false;
    prefersdark: true;
    color-scheme: "dark";
    --color-base-100: oklch(19.5% 0.036 257.7);
    --color-base-200: oklch(23.2% 0.041 253.9);
    --color-base-300: oklch(28% 0.049 252);
    --color-base-content: oklch(95.4% 0.022 211);
    --color-primary: oklch(60% 0.126 221.723);
    --color-primary-content: oklch(10% 0.126 221.723);
    --color-secondary: oklch(76.43% 0.135 57.94);
    --color-secondary-content: oklch(26% 0.079 36.259);
    --color-accent: oklch(77.32% 0.1 187.98);
    --color-accent-content: oklch(27% 0.046 192.524);
    --color-neutral: oklch(32.3% 0.032 259.7);
    --color-neutral-content: oklch(93.3% 0.026 208.7);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

/* ============================================
   LIGHT - "Surface / Shallow Water"
   ============================================ */
@plugin "daisyui/theme" {
    name: "light";
    default: true
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: oklch(99.4% 0.004 214.3);
    --color-base-200: oklch(97.3% 0.01 212.5);
    --color-base-300: oklch(93.7% 0.02 212.5);
    --color-base-content: oklch(21.1% 0.037 254.4);
    --color-primary: oklch(60% 0.126 221.723);
    --color-primary-content: oklch(10% 0.126 221.723);
    --color-secondary: oklch(76.43% 0.135 57.94);
    --color-secondary-content: oklch(26% 0.079 36.259);
    --color-accent: oklch(77.32% 0.1 187.98);
    --color-accent-content: oklch(27% 0.046 192.524);
    --color-neutral: oklch(32.3% 0.032 259.7);
    --color-neutral-content: oklch(93.3% 0.026 208.7);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

/* ========================================
   ADDITIONAL CSS VARIABLES
   ======================================== */
:root {
    --shadow-card-hover:
        0 8px 25px oklch(67.1% 0.05 145 / 0.25), 0 4px 12px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] {
    --shadow-card-hover:
        0 8px 25px oklch(67.1% 0.05 145 / 0.2), 0 4px 12px oklch(0% 0 0 / 0.2);
}

[data-theme="light"] {
    --shadow-card-hover:
        0 8px 25px oklch(53.1% 0.1 144.8 / 0.25), 0 4px 12px oklch(0% 0 0 / 0.1);
}

[data-theme="dark"] {
    --shadow-card-hover:
        0 8px 25px oklch(63.1% 0.07 144.7 / 0.2), 0 4px 12px oklch(0% 0 0 / 0.2);
}

/* ========================================
   NAVBAR GHOST BUTTON HOVER
   Override DaisyUI's neutral hover for nav icons
   ======================================== */
.navbar .btn-ghost:hover {
    --btn-bg: oklch(from var(--color-secondary) l c h / 0.15);
    --btn-border: transparent;
}

/* ========================================
   THEME-AWARE ICON SWITCHING
   ======================================== */
.icon-light {
    display: block;
}
.icon-dark {
    display: none;
}
[data-theme="dark"] .icon-light {
    display: none;
}
[data-theme="dark"] .icon-dark {
    display: block;
}

/* ========================================
   STICKY FOOTER LAYOUT
   ======================================== */
@layer base {
    body {
        @apply min-h-screen flex flex-col;
    }

    main {
        @apply flex-1;
    }
}

/* ========================================
   TYPOGRAPHY (PROSE) THEME INTEGRATION
   ======================================== */
@layer base {
    /* Make prose inherit DaisyUI theme colors */
    .prose {
        --tw-prose-body: var(--color-base-content);
        --tw-prose-headings: var(--color-base-content);
        --tw-prose-lead: var(--color-base-content);
        --tw-prose-links: var(--color-primary);
        --tw-prose-bold: var(--color-base-content);
        --tw-prose-counters: var(--color-base-content);
        --tw-prose-bullets: var(--color-base-content);
        --tw-prose-hr: var(--color-base-300);
        --tw-prose-quotes: var(--color-base-content);
        --tw-prose-quote-borders: var(--color-base-300);
        --tw-prose-captions: var(--color-base-content);
        --tw-prose-code: var(--color-base-content);
        --tw-prose-pre-code: var(--color-base-content);
        --tw-prose-pre-bg: var(--color-base-200);
        --tw-prose-th-borders: var(--color-base-300);
        --tw-prose-td-borders: var(--color-base-300);
    }
}

/* ========================================
   SVG SPRITE ICONS
   ======================================== */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: -0.125em;
}

/* Icon sizes (matching Tailwind size-* utilities) */
.icon.size-3 { width: 0.75rem; height: 0.75rem; }
.icon.size-4 { width: 1rem; height: 1rem; }
.icon.size-5 { width: 1.25rem; height: 1.25rem; }
.icon.size-6 { width: 1.5rem; height: 1.5rem; }
.icon.size-8 { width: 2rem; height: 2rem; }

/* Special size for slightly larger than 1rem (used in star/pull count) */
.icon.size-\[1\.1rem\] { width: 1.1rem; height: 1.1rem; }

/* Animate spin for loader icons */
.icon.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */
@layer utilities {
    /* Screen reader only - visually hidden but accessible */
    .sr-only {
        @apply absolute w-px h-px p-0 -m-px overflow-hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
}

/* ========================================
   CUSTOM COMPONENTS (Not in DaisyUI)
   ======================================== */
@layer components {
    /* ----------------------------------------
       COMMAND / CODE DISPLAY
       ---------------------------------------- */
    .cmd {
        @apply flex items-center gap-2 relative w-full overflow-hidden;
        @apply bg-base-200 border border-base-300 rounded-md;
        @apply px-3 py-2;
    }

    .cmd code {
        @apply font-mono text-sm truncate;
    }

    /* ----------------------------------------
       EXPANDABLE SEARCH (nav-specific)
       Uses transform instead of width for GPU-accelerated animation
       ---------------------------------------- */
    .nav-search-wrapper {
        @apply relative flex items-center;
    }

    .nav-search-form {
        @apply absolute right-full mr-2;
        @apply w-62 opacity-0;
        @apply transition-[transform,opacity] duration-300;
        transform: scaleX(0);
        transform-origin: right;
    }

    .nav-search-wrapper.expanded .nav-search-form {
        @apply opacity-100;
        transform: scaleX(1);
    }

    /* ----------------------------------------
       HELM BRAND COLOR (official Helm blue #0F1689)
       ---------------------------------------- */
    .text-helm {
        @apply text-[oklch(31%_0.181_267.5)];
    }

    [data-theme="dark"] .text-helm {
        @apply text-[oklch(64.6%_0.19_273.2)];
    }

    .badge-helm {
        --badge-color: oklch(31% 0.181 267.5);
    }

    [data-theme="dark"] .badge-helm {
        --badge-color: oklch(64.6% 0.19 273.2);
    }

    /* ----------------------------------------
       TIER BADGE COLORS
       ---------------------------------------- */
    .badge-owner {
        @apply badge-primary;
    }

    .badge-deckhand {
        @apply badge-ghost;
    }

    .badge-bosun {
        @apply badge-secondary;
    }

    /* ----------------------------------------
       CARD EXTENSIONS
       ---------------------------------------- */
    .card-interactive {
        @apply cursor-pointer duration-500;
        transition-property: box-shadow, transform;
    }

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

    /* ----------------------------------------
       ACTOR-TYPEAHEAD COMPONENT STYLING
       ---------------------------------------- */
    actor-typeahead {
        /* Use DaisyUI CSS variables - they auto-switch with theme */
        --color-background: var(--color-base-100);
        --color-border: var(--color-base-300);
        --color-shadow: var(--color-base-content);
        --color-hover: var(--color-base-200);
        --color-avatar-fallback: var(--color-base-300);
        --radius: 0.5rem;
        --padding-menu: 0.25rem;
        z-index: 50;
    }

    actor-typeahead::part(handle) {
        @apply text-base-content;
    }

    actor-typeahead::part(menu) {
        @apply shadow-lg;
        margin-top: 0.25rem;
    }

    /* ----------------------------------------
       RECENT ACCOUNTS DROPDOWN
       ---------------------------------------- */
    .recent-accounts-dropdown {
        @apply absolute top-full left-0 right-0;
        @apply bg-base-100 border border-base-300;
        @apply rounded-lg shadow-lg;
        @apply max-h-60 overflow-y-auto z-50;
        margin-top: 0.25rem;
    }

    .recent-accounts-header {
        @apply px-3 py-2 text-xs font-semibold uppercase;
        @apply text-base-content/60 border-b border-base-300;
    }

    .recent-accounts-item {
        @apply px-3 py-2.5;
        @apply cursor-pointer transition-colors duration-150;
        @apply text-base-content;
    }

    .recent-accounts-item:hover,
    .recent-accounts-item.focused {
        @apply bg-base-200;
    }

    /* ----------------------------------------
       MENU FORM ITEM (styled like menu <a>)
       For forms inside DaisyUI menu dropdowns
       Uses label as visible element, button is sr-only
       ---------------------------------------- */
    .menu li > form {
        @apply w-full;
    }

    .menu li > form > label {
        @apply block w-full;
    }
}