@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Theme tokens. The accent scale and font are overwritten per workspace on <html> (components/theme-head);
 * these are the defaults (Tailwind's indigo) so a page without the partial still looks right.
 */
:root {
    --accent-50: 238 242 255;
    --accent-100: 224 231 255;
    --accent-200: 199 210 254;
    --accent-300: 165 180 252;
    --accent-400: 129 140 248;
    --accent-500: 99 102 241;
    --accent-600: 79 70 229;
    --accent-700: 67 56 202;
    --accent-800: 55 48 163;
    --accent-900: 49 46 129;
    --accent-950: 30 27 75;
    --on-accent: 255 255 255;
    --font-sans: 'Manrope';
    --btn-radius: 0.5rem;

    /* Sidebar: dark by default. */
    --sb-bg: #0f172a;
    --sb-fg: #cbd5e1;
    --sb-muted: #64748b;
    --sb-line: #1e293b;
    --sb-hover: rgba(255, 255, 255, 0.07);
    --sb-hover-fg: #ffffff;
    --sb-active-bg: rgb(var(--accent-600));
    --sb-active-fg: rgb(var(--on-accent));
}

html[data-sidebar='light'] {
    --sb-bg: #ffffff;
    --sb-fg: #475569;
    --sb-muted: #94a3b8;
    --sb-line: #e5e7eb;
    --sb-hover: #f3f4f6;
    --sb-hover-fg: #111827;
    --sb-active-bg: rgb(var(--accent-50));
    --sb-active-fg: rgb(var(--accent-700));
}

html.dark[data-sidebar='light'] {
    --sb-bg: #1f2937;
    --sb-fg: #cbd5e1;
    --sb-muted: #6b7280;
    --sb-line: #374151;
    --sb-hover: rgba(255, 255, 255, 0.06);
    --sb-hover-fg: #ffffff;
    --sb-active-bg: rgb(var(--accent-500) / 0.18);
    --sb-active-fg: rgb(var(--accent-300));
}

html[data-sidebar='accent'] {
    --sb-bg: rgb(var(--accent-700));
    --sb-fg: rgb(var(--accent-100));
    --sb-muted: rgb(var(--accent-300));
    --sb-line: rgb(var(--accent-600));
    --sb-hover: rgba(255, 255, 255, 0.1);
    --sb-hover-fg: #ffffff;
    --sb-active-bg: #ffffff;
    --sb-active-fg: rgb(var(--accent-700));
}

/* Button shape (admin: Settings > Appearance). */
html[data-buttons='pill'] {
    --btn-radius: 9999px;
}

html[data-buttons='square'] {
    --btn-radius: 0.125rem;
}

/* Solid accent buttons written directly in views follow the chosen shape too. */
button[class*='bg-indigo-6'],
button[class*='bg-indigo-5'],
a[class*='bg-indigo-6'],
a[class*='bg-indigo-5'],
input[type='submit'][class*='bg-indigo-'] {
    border-radius: var(--btn-radius);
}

@layer components {
    .btn-radius {
        border-radius: var(--btn-radius);
    }

    .sb-link {
        @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition;
        color: var(--sb-fg);
    }

    .sb-link:hover {
        background: var(--sb-hover);
        color: var(--sb-hover-fg);
    }

    .sb-link-active,
    .sb-link-active:hover {
        background: var(--sb-active-bg);
        color: var(--sb-active-fg);
    }

    .sb-section {
        @apply px-3 pt-5 pb-1 text-[11px] font-semibold uppercase tracking-wider;
        color: var(--sb-muted);
    }
}

[x-cloak] {
    display: none !important;
}

/*
 * Shared look for every screen. The views use a small set of repeating patterns (cards, tables, inputs), so the
 * refinements live here once rather than being repeated in each page.
 */
body {
    background-color: #f3f5f9;
}

html.dark body {
    background-color: rgb(17 24 39);
}

/* Cards */
.rounded-xl {
    border-radius: 0.875rem;
}

/* Tables: quiet uppercase headers, clear row hover. */
table thead th[class],
table thead td[class] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(100 116 139);
}

html.dark table thead th[class] {
    color: rgb(148 163 184);
}

table tbody tr:hover > td {
    background-color: rgb(var(--accent-50) / 0.45);
}

html.dark table tbody tr:hover > td {
    background-color: rgb(255 255 255 / 0.03);
}

/* Form controls share one corner radius. */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
select,
textarea {
    border-radius: 0.625rem;
}

/* Brand switcher: a segmented control, like the design. */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 0.75rem;
    background: rgb(238 241 247);
}

html.dark .seg {
    background: rgb(31 41 55);
}

.seg > button {
    border-radius: 0.55rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgb(100 116 139);
    white-space: nowrap;
}

.seg > button[aria-pressed='true'] {
    background: #fff;
    color: rgb(15 23 42);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html.dark .seg > button[aria-pressed='true'] {
    background: rgb(55 65 81);
    color: #fff;
}

/* Buttons used by the page headers. */
@layer components {
    .btn-primary,
    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 h-10 px-4 text-sm font-semibold whitespace-nowrap transition;
        border-radius: var(--btn-radius);
    }

    .btn-primary {
        @apply bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700;
        color: rgb(var(--on-accent));
    }

    .btn-secondary {
        @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700;
    }
}

/* Numbers and actions never wrap, so a narrow column cannot stack digits. */
table td.text-right,
table th.text-right {
    white-space: nowrap;
}

/* Table chrome: quieter header band, roomier rows. */
table thead tr:first-child th[class] {
    background-color: transparent;
}

table thead tr + tr th {
    background-color: rgb(248 250 252);
    border-top: 1px solid rgb(241 245 249);
}

html.dark table thead tr + tr th {
    background-color: rgb(17 24 39 / 0.4);
}

table tbody td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* The filter row's inputs: same soft style as the rest of the app. */
table thead tr + tr input:not([type='checkbox']),
table thead tr + tr select {
    min-height: 2.1rem;
    background-color: #fff;
}

html.dark table thead tr + tr input:not([type='checkbox']),
html.dark table thead tr + tr select {
    background-color: rgb(31 41 55);
}

/* Inputs inside filter bars. */
@layer components {
    .field {
        @apply block w-full h-10 text-sm rounded-lg border-gray-300 bg-white text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 dark:placeholder:text-gray-500;
    }
}

/* More page-header buttons. */
@layer components {
    .btn-danger,
    .btn-danger-outline {
        @apply inline-flex items-center justify-center gap-2 h-10 px-4 text-sm font-semibold whitespace-nowrap transition;
        border-radius: var(--btn-radius);
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-500;
    }

    .btn-danger-outline {
        @apply border border-red-200 text-red-600 hover:bg-red-50 dark:border-red-500/30 dark:text-red-400 dark:hover:bg-red-500/10;
    }
}

/* Pop-up dialogs: softer corners, a blurred backdrop. */
div.rounded-lg.shadow-xl {
    border-radius: 1rem;
}

div[class*='bg-gray-500/75'] {
    backdrop-filter: blur(2px);
}

/* Row actions are icon buttons so a table fits on one screen. */
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: rgb(100 116 139);
    transition: background-color 0.15s, color 0.15s;
}

.row-action:hover {
    background-color: rgb(241 245 249);
    color: rgb(15 23 42);
}

.row-action-edit:hover {
    background-color: rgb(var(--accent-50));
    color: rgb(var(--accent-700));
}

.row-action-delete:hover {
    background-color: rgb(254 242 242);
    color: rgb(220 38 38);
}

html.dark .row-action {
    color: rgb(148 163 184);
}

html.dark .row-action:hover {
    background-color: rgb(55 65 81);
    color: #fff;
}

html.dark .row-action-edit:hover {
    background-color: rgb(var(--accent-500) / 0.2);
    color: rgb(var(--accent-300));
}

html.dark .row-action-delete:hover {
    background-color: rgb(239 68 68 / 0.15);
    color: rgb(248 113 113);
}

.space-x-3 > .row-action,
.space-x-2 > .row-action {
    margin-left: 0.125rem;
}

/* Dense tables (products): tighter columns so every column and the row actions fit on one screen. */
table.compact th[class],
table.compact td[class] {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}