at-container-registry/pkg/appview/src/css/main.css

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

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

@plugin "@tailwindcss/typography";

/*@layer base {
    .container {
        max-width: 1920px;
    }
}*/

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

/* ========================================
   BRAND COLOR OVERRIDES
   ======================================== */
@plugin "daisyui/theme" {
    name: "light";
    default: true;
    --color-primary: oklch(50% 0.08 230); /* slate blue (manatee body) */
    --color-secondary: oklch(78% 0.08 30); /* soft coral (nose/flippers) */
    --color-accent: oklch(85% 0.06 75); /* warm sand (manatee belly) */
}

@plugin "daisyui/theme" {
    name: "dark";
    --color-primary: oklch(60% 0.09 230); /* lighter slate blue for dark mode */
    --color-secondary: oklch(80% 0.08 30); /* soft coral */
    --color-accent: oklch(80% 0.05 75); /* warm sand (slightly muted for dark) */
}

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

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

/* ========================================
   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);
    }
}

/* ========================================
   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)
       ---------------------------------------- */
    .nav-search-wrapper {
        @apply relative flex items-center;
    }

    .nav-search-form {
        @apply absolute right-full mr-2;
        @apply w-0 opacity-0 overflow-hidden;
        @apply transition-all duration-300;
    }

    .nav-search-wrapper.expanded .nav-search-form {
        @apply w-62 opacity-100;
    }

    /* ----------------------------------------
       HELM BRAND COLOR (official Helm blue #0F1689)
       ---------------------------------------- */
    .text-helm {
        @apply text-[#0F1689];
    }

    [data-theme="dark"] .text-helm {
        @apply text-[#6B7FFF];
    }

    .badge-helm {
        --badge-color: #0F1689;
    }

    [data-theme="dark"] .badge-helm {
        --badge-color: #6B7FFF;
    }

    /* ----------------------------------------
       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 transition-all duration-500;
    }

    .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;
    }
}