/* Atlantis admin theme tokens. Two themes: Zion (light) and Batman (dark).
 * All UI colors must reference these CSS variables (see tailwind.config in App.razor)
 * to keep both themes in sync.
 */

:root,
:root[data-theme="zion"] {
    color-scheme: light;

    --bg-app: #f6f1e7;
    --bg-surface: #fffaf0;
    --bg-surface-2: #efe7d6;
    --bg-overlay: rgba(46, 38, 24, 0.45);

    --border-subtle: #e0d5be;
    --border-strong: #c5b896;

    --text-primary: #2a2418;
    --text-secondary: #5b5240;
    --text-muted: #8c8369;
    --text-on-accent: #ffffff;

    --accent: #047857;
    --accent-hover: #036249;
    --accent-soft: #d1fae5;

    --status-success: #16a34a;
    --status-warning: #ca8a04;
    --status-danger: #dc2626;
    --status-info: #0284c7;

    --focus-ring: rgba(4, 120, 87, 0.35);

    --shadow-sm: 0 1px 2px rgba(80, 56, 20, 0.08);
    --shadow-md: 0 6px 16px -4px rgba(80, 56, 20, 0.12);
}

:root {
    --motion-fast:     160ms;
    --motion-base:     240ms;
    --motion-slow:     380ms;
    --motion-exit:     220ms;

    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:         cubic-bezier(0.55, 0, 1, 0.45);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="batman"] {
    color-scheme: dark;

    --bg-app: #0a0a0c;
    --bg-surface: #111114;
    --bg-surface-2: #17171c;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.14);

    --text-primary: #e6e4dd;
    --text-secondary: #a8a59a;
    --text-muted: #6b6960;
    --text-on-accent: #0a0a0c;

    --accent: #f4c100;
    --accent-hover: #ffd633;
    --accent-soft: rgba(244, 193, 0, 0.12);

    --status-success: #4ade80;
    --status-warning: #fbbf24;
    --status-danger: #f87171;
    --status-info: #60a5fa;

    --focus-ring: rgba(244, 193, 0, 0.45);

    --shadow-sm: none;
    --shadow-md: none;
}

html, body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Common reset for native form controls so Tailwind tokens apply cleanly. */
button { background: transparent; cursor: pointer; }
input, select, textarea { background: transparent; color: inherit; }

/* Focus-visible ring for keyboard users. */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbars match the surface colors. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    transition: background-color var(--motion-base) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Smooth-out every Tailwind `transition-*` utility across the admin.
 * Tailwind ships ease-in-out 150ms by default — override to our shared
 * out-curve and slightly longer base duration so hover/state changes
 * feel calmer without rewriting individual call sites. */
[class*="transition-"]:not(.transition-none) {
    transition-timing-function: var(--ease-out);
    transition-duration: var(--motion-base);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Toast container (used by ToastService). */
.tw-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.tw-toast-container > * { pointer-events: auto; }

/* Modal overlay (used by Modal). */
.tw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 1rem 1rem;
    z-index: 900;
    overflow-y: auto;
}

/* Popover hover-cards — render in browser top layer so they escape table overflow. */
.tw-popover-card {
    inset: unset;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    z-index: 1100;
}
.tw-popover-card:popover-open {
    display: block;
}

/* Sticky table headers — applies to <thead> inside any .tw-table wrapper. */
.tw-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-surface-2);
    backdrop-filter: blur(4px);
}

/* Density modes — controlled by data-density on <html>. Compact is default. */
:root,
:root[data-density="compact"] {
    --row-padding-y:  4px;
    --row-padding-x:  8px;
    --row-font-size: 12px;
}
:root[data-density="comfortable"] {
    --row-padding-y:  8px;
    --row-padding-x: 12px;
    --row-font-size: 13px;
}
:root[data-density="cozy"] {
    --row-padding-y: 12px;
    --row-padding-x: 16px;
    --row-font-size: 14px;
}
.tw-table tbody td {
    padding: var(--row-padding-y) var(--row-padding-x) !important;
    font-size: var(--row-font-size) !important;
    line-height: 1.4;
}
.tw-table thead th {
    padding: var(--row-padding-y) var(--row-padding-x) !important;
}