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

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

@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(75% 0.12 175); /* #4ECDC4 teal */
    --color-accent: oklch(68% 0.18 25); /* #FF6B6B coral */
}

@plugin "daisyui/theme" {
    name: "dark";
    --color-primary: oklch(78% 0.12 175); /* #5ED4CB slightly brighter */
    --color-accent: oklch(72% 0.16 25); /* #FF8080 */
}

/* ========================================
   ADDITIONAL CSS VARIABLES
   ======================================== */
:root {
    --shadow-card-hover:
        0 8px 25px oklch(75% 0.12 175 / 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --shadow-card-hover:
        0 8px 25px oklch(78% 0.12 175 / 0.1), 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;
}

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

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