@import 'tailwindcss';
@config '../../tailwind.config.js';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    :root {
        --surface: 245 240 232;
        --surface-2: 255 255 255;
        --ink: 24 21 17;
        --muted: 110 101 90;
        --border: 225 217 206;
        --brand: 21 96 85;
        --brand-strong: 15 78 69;
        --accent: 226 116 66;
        --success: 34 197 94;
        --warning: 245 158 11;
        --danger: 239 68 68;
        --grid: 24 21 17;
    }

    .dark {
        --surface: 9 14 13;
        --surface-2: 16 23 22;
        --ink: 240 236 230;
        --muted: 160 150 138;
        --border: 34 44 41;
        --brand: 76 185 170;
        --brand-strong: 124 222 199;
        --accent: 236 155 86;
        --success: 34 197 94;
        --warning: 251 191 36;
        --danger: 248 113 113;
        --grid: 255 255 255;
    }

    html[data-admin-theme='ocean'] {
        --brand: 14 116 165;
        --brand-strong: 9 95 130;
        --accent: 245 158 83;
    }

    html:not(.dark)[data-admin-theme='ocean'] {
        --surface: 236 245 250;
        --surface-2: 248 252 255;
        --border: 206 223 234;
        --grid: 17 37 54;
    }

    html[data-admin-theme='forest'] {
        --brand: 22 112 74;
        --brand-strong: 16 88 58;
        --accent: 217 119 6;
    }

    html:not(.dark)[data-admin-theme='forest'] {
        --surface: 236 244 236;
        --surface-2: 249 252 248;
        --border: 205 221 208;
        --grid: 24 46 34;
    }

    html[data-admin-theme='sunset'] {
        --brand: 185 64 52;
        --brand-strong: 147 47 39;
        --accent: 236 153 83;
    }

    html:not(.dark)[data-admin-theme='sunset'] {
        --surface: 250 242 234;
        --surface-2: 255 250 245;
        --border: 232 213 198;
        --grid: 54 29 20;
    }

    html[data-admin-theme='lavender'] {
        --brand: 107 70 167;
        --brand-strong: 84 50 136;
        --accent: 223 117 165;
    }

    html:not(.dark)[data-admin-theme='lavender'] {
        --surface: 246 242 250;
        --surface-2: 252 249 255;
        --border: 222 211 232;
        --grid: 46 34 60;
    }

    html[data-admin-theme='desert'] {
        --brand: 176 115 49;
        --brand-strong: 148 94 35;
        --accent: 199 82 61;
    }

    html:not(.dark)[data-admin-theme='desert'] {
        --surface: 249 241 231;
        --surface-2: 255 250 244;
        --border: 231 210 191;
        --grid: 74 46 30;
    }

    html[data-admin-theme='aurora'] {
        --brand: 20 132 125;
        --brand-strong: 14 108 102;
        --accent: 192 113 215;
    }

    html:not(.dark)[data-admin-theme='aurora'] {
        --surface: 236 246 245;
        --surface-2: 249 253 253;
        --border: 206 223 222;
        --grid: 20 54 52;
    }

    html[data-admin-theme='canyon'] {
        --brand: 168 74 42;
        --brand-strong: 136 58 32;
        --accent: 233 140 76;
    }

    html:not(.dark)[data-admin-theme='canyon'] {
        --surface: 249 238 230;
        --surface-2: 255 248 242;
        --border: 231 208 195;
        --grid: 69 33 22;
    }

    html[data-admin-theme='mist'] {
        --brand: 97 120 147;
        --brand-strong: 76 95 120;
        --accent: 149 170 196;
    }

    html:not(.dark)[data-admin-theme='mist'] {
        --surface: 241 244 248;
        --surface-2: 252 254 255;
        --border: 214 222 233;
        --grid: 38 52 68;
    }

    html[data-admin-theme='ember'] {
        --brand: 170 56 45;
        --brand-strong: 135 40 32;
        --accent: 245 123 72;
    }

    html:not(.dark)[data-admin-theme='ember'] {
        --surface: 250 238 236;
        --surface-2: 255 248 246;
        --border: 232 206 201;
        --grid: 66 24 18;
    }

    html[data-admin-theme='moss'] {
        --brand: 78 110 60;
        --brand-strong: 62 88 48;
        --accent: 210 169 78;
    }

    html:not(.dark)[data-admin-theme='moss'] {
        --surface: 242 246 238;
        --surface-2: 252 254 249;
        --border: 214 223 207;
        --grid: 33 46 25;
    }

    html[data-admin-theme='cobalt'] {
        --brand: 43 94 180;
        --brand-strong: 32 72 140;
        --accent: 233 176 80;
    }

    html:not(.dark)[data-admin-theme='cobalt'] {
        --surface: 236 242 250;
        --surface-2: 249 252 255;
        --border: 206 217 232;
        --grid: 20 34 66;
    }

    html[data-admin-theme='rose'] {
        --brand: 186 70 122;
        --brand-strong: 150 54 96;
        --accent: 242 150 174;
    }

    html:not(.dark)[data-admin-theme='rose'] {
        --surface: 250 239 244;
        --surface-2: 255 249 252;
        --border: 233 208 219;
        --grid: 64 26 46;
    }

    html[data-admin-theme='slate'] {
        --brand: 78 96 111;
        --brand-strong: 60 74 86;
        --accent: 200 141 96;
    }

    html:not(.dark)[data-admin-theme='slate'] {
        --surface: 240 242 244;
        --surface-2: 250 252 253;
        --border: 211 216 221;
        --grid: 35 45 54;
    }

    html[data-admin-theme='ivory'] {
        --brand: 160 122 68;
        --brand-strong: 132 98 52;
        --accent: 78 145 120;
    }

    html:not(.dark)[data-admin-theme='ivory'] {
        --surface: 250 247 241;
        --surface-2: 255 253 248;
        --border: 234 226 214;
        --grid: 62 46 30;
    }

    html[data-admin-theme='citrus'] {
        --brand: 224 120 28;
        --brand-strong: 188 92 20;
        --accent: 38 143 110;
    }

    html:not(.dark)[data-admin-theme='citrus'] {
        --surface: 252 244 232;
        --surface-2: 255 250 244;
        --border: 236 213 188;
        --grid: 70 39 12;
    }

    html[data-admin-theme='mint'] {
        --brand: 44 155 118;
        --brand-strong: 30 125 95;
        --accent: 246 170 82;
    }

    html:not(.dark)[data-admin-theme='mint'] {
        --surface: 236 248 244;
        --surface-2: 248 253 251;
        --border: 204 226 218;
        --grid: 19 52 42;
    }

    html[data-admin-theme='plum'] {
        --brand: 111 66 150;
        --brand-strong: 86 48 120;
        --accent: 214 120 86;
    }

    html:not(.dark)[data-admin-theme='plum'] {
        --surface: 245 240 248;
        --surface-2: 251 248 253;
        --border: 223 212 232;
        --grid: 42 26 58;
    }

    html[data-admin-theme='sapphire'] {
        --brand: 32 84 163;
        --brand-strong: 24 64 128;
        --accent: 244 160 85;
    }

    html:not(.dark)[data-admin-theme='sapphire'] {
        --surface: 235 242 250;
        --surface-2: 248 252 255;
        --border: 206 218 234;
        --grid: 18 32 60;
    }

    html[data-admin-theme='clay'] {
        --brand: 160 94 72;
        --brand-strong: 128 72 55;
        --accent: 106 138 160;
    }

    html:not(.dark)[data-admin-theme='clay'] {
        --surface: 249 240 235;
        --surface-2: 255 249 246;
        --border: 230 210 200;
        --grid: 62 35 28;
    }

    html[data-admin-theme='dune'] {
        --brand: 188 142 68;
        --brand-strong: 156 116 50;
        --accent: 68 124 162;
    }

    html:not(.dark)[data-admin-theme='dune'] {
        --surface: 250 244 234;
        --surface-2: 255 250 244;
        --border: 232 217 195;
        --grid: 76 54 22;
    }

    html[data-admin-theme='lagoon'] {
        --brand: 26 122 127;
        --brand-strong: 18 96 100;
        --accent: 233 126 80;
    }

    html:not(.dark)[data-admin-theme='lagoon'] {
        --surface: 236 246 246;
        --surface-2: 249 253 253;
        --border: 206 225 224;
        --grid: 16 56 56;
    }

    html[data-admin-theme='coral'] {
        --brand: 222 90 83;
        --brand-strong: 180 70 65;
        --accent: 88 132 156;
    }

    html:not(.dark)[data-admin-theme='coral'] {
        --surface: 250 239 238;
        --surface-2: 255 249 248;
        --border: 233 208 206;
        --grid: 64 30 30;
    }

    html[data-admin-theme='copper'] {
        --brand: 167 92 49;
        --brand-strong: 134 72 36;
        --accent: 90 126 94;
    }

    html:not(.dark)[data-admin-theme='copper'] {
        --surface: 249 240 234;
        --surface-2: 255 249 245;
        --border: 232 211 201;
        --grid: 62 33 22;
    }

    html[data-admin-theme='storm'] {
        --brand: 60 86 112;
        --brand-strong: 46 66 86;
        --accent: 164 124 82;
    }

    html:not(.dark)[data-admin-theme='storm'] {
        --surface: 239 242 246;
        --surface-2: 249 251 253;
        --border: 210 217 226;
        --grid: 24 34 46;
    }

    html[data-admin-theme='glacier'] {
        --brand: 84 146 176;
        --brand-strong: 62 118 146;
        --accent: 244 182 95;
    }

    html:not(.dark)[data-admin-theme='glacier'] {
        --surface: 236 246 249;
        --surface-2: 248 253 255;
        --border: 204 223 232;
        --grid: 20 49 60;
    }

    html[data-admin-theme='meadow'] {
        --brand: 76 139 74;
        --brand-strong: 58 110 56;
        --accent: 214 151 74;
    }

    html:not(.dark)[data-admin-theme='meadow'] {
        --surface: 238 246 236;
        --surface-2: 249 252 248;
        --border: 208 223 204;
        --grid: 26 52 24;
    }

    html[data-admin-theme='orchid'] {
        --brand: 148 79 171;
        --brand-strong: 118 60 140;
        --accent: 245 140 188;
    }

    html:not(.dark)[data-admin-theme='orchid'] {
        --surface: 248 242 250;
        --surface-2: 253 249 255;
        --border: 227 214 234;
        --grid: 52 30 64;
    }

    html[data-admin-theme='terracotta'] {
        --brand: 191 78 59;
        --brand-strong: 153 60 45;
        --accent: 222 140 96;
    }

    html:not(.dark)[data-admin-theme='terracotta'] {
        --surface: 250 239 234;
        --surface-2: 255 249 245;
        --border: 232 207 199;
        --grid: 70 32 24;
    }

    html[data-admin-theme='graphite'] {
        --brand: 72 80 90;
        --brand-strong: 54 60 68;
        --accent: 140 102 68;
    }

    html:not(.dark)[data-admin-theme='graphite'] {
        --surface: 238 240 243;
        --surface-2: 248 250 252;
        --border: 208 214 221;
        --grid: 30 34 40;
    }

    body {
        background-color: rgb(var(--surface));
        color: rgb(var(--ink));
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-image:
            radial-gradient(circle at 15% 20%, rgb(var(--accent) / 0.18), transparent 42%),
            radial-gradient(circle at 85% 10%, rgb(var(--brand) / 0.18), transparent 38%);
    }

    ::selection {
        background: rgb(var(--accent) / 0.35);
    }
}

@layer components {
    .panel {
        @apply rounded-2xl border border-border bg-surface-2/80 shadow-soft backdrop-blur;
    }

    .admin-sidebar {
        scrollbar-width: none;
        scrollbar-color: rgb(var(--ink) / 0.18) transparent;
    }

    .admin-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .admin-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .admin-sidebar::-webkit-scrollbar-thumb {
        background-color: rgb(var(--ink) / 0.18);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .admin-sidebar::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

    .admin-sidebar::-webkit-scrollbar-thumb:hover {
        background-color: rgb(var(--ink) / 0.3);
    }

    .theme-card {
        @apply relative w-full overflow-hidden rounded-2xl border text-left transition;
        border-color: rgb(var(--theme-border) / 0.9);
        background-color: rgb(var(--theme-surface-2) / 0.92);
    }

    .theme-card:hover {
        @apply border-brand/40 shadow-soft;
    }

    .theme-card[aria-pressed='true'] {
        @apply border-brand/40 shadow-soft ring-1 ring-brand/30;
    }

    .theme-card:focus-visible {
        outline: 2px solid rgb(var(--brand) / 0.45);
        outline-offset: 2px;
    }

    .theme-card-preview {
        display: block;
        height: 4.5rem;
        background: linear-gradient(135deg, rgb(var(--theme-brand) / 0.95), rgb(var(--theme-accent) / 0.95));
        position: relative;
    }

    .theme-card-preview::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgb(255 255 255 / 0.22), transparent 55%);
    }

    .theme-card-body {
        @apply flex items-center justify-between gap-3 px-4 py-3 text-sm;
        background-color: rgb(var(--theme-surface) / 0.65);
    }

    .theme-card-title {
        @apply font-semibold text-ink;
    }

    .theme-card-palette {
        @apply flex items-center gap-2;
    }

    .theme-card-chip {
        height: 0.85rem;
        width: 0.85rem;
        border-radius: 999px;
        border: 1px solid rgb(var(--theme-border) / 0.7);
        background-color: rgb(var(--theme-chip) / 1);
    }

    .theme-card-active {
        @apply absolute right-3 top-3 hidden items-center rounded-full border border-brand/30 bg-brand/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-widest text-brand;
    }

    .theme-card[aria-pressed='true'] .theme-card-active {
        @apply inline-flex;
    }

    .panel-heading {
        @apply text-xs font-semibold uppercase tracking-[0.2em] text-muted;
    }

    .nav-item {
        @apply flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium text-muted transition hover:text-ink hover:bg-surface-2/80;
    }

    .nav-item-active {
        @apply bg-brand/15 text-ink shadow-soft;
    }

    .icon-button {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface-2/80 text-ink/80 transition hover:text-ink hover:border-brand/40;
    }

    .hub-card {
        @apply relative flex items-center gap-4 rounded-2xl border border-border bg-surface-2/80 p-4 transition-all duration-200;
    }
    .scope-badge {
        @apply absolute top-2.5 right-2.5 rounded-md px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ring-1 ring-inset;
    }
    .scope-badge-frontend {
        @apply bg-sky-500/10 text-sky-600 ring-sky-500/20;
    }
    .scope-badge-admin {
        @apply bg-violet-500/10 text-violet-600 ring-violet-500/20;
    }
    .scope-badge-both {
        @apply bg-emerald-500/10 text-emerald-600 ring-emerald-500/20;
    }
    .hub-card:hover {
        @apply border-brand/40 shadow-soft;
        background: rgb(var(--brand) / 0.04);
    }
    .dark .hub-card:hover {
        background: rgb(var(--brand) / 0.08);
    }
    .hub-card-icon {
        @apply flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-brand/20 text-brand;
        background: rgb(var(--brand) / 0.08);
    }

    @media (min-width: 640px) {
        .icon-button {
            height: 2.5rem;
            width: 2.5rem;
        }
    }

    .media-card {
        @apply relative z-0 flex flex-col rounded-[22px] border bg-surface-2 shadow-soft transition-all duration-300;
        border-color: rgb(var(--border) / 0.85);
        overflow: visible;
    }

    .dark .media-card {
        @apply bg-surface-2/60 shadow-none;
        border-color: rgb(var(--border) / 0.4);
    }

    .media-card:focus-within {
        z-index: 40;
    }

    .media-card-body {
        @apply flex flex-col gap-2 px-4 py-4;
    }

    .media-meta {
        @apply flex flex-wrap items-center gap-3 text-[12px] text-muted;
    }

    .media-actions {
        @apply flex items-center justify-end gap-3 px-4 pb-4;
    }

    .media-icon-button {
        @apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/80 bg-surface-2 text-ink/80 shadow-soft transition hover:border-brand/40 hover:text-ink;
    }

    .media-dropdown {
        @apply min-w-[220px] rounded-2xl border border-border/70 bg-white p-2 shadow-lg;
    }

    .dark .media-dropdown {
        @apply bg-surface-2;
    }

    .media-dropdown-list {
        @apply flex flex-col gap-1;
    }

    .media-dropdown-item {
        @apply flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-ink transition hover:bg-muted/10;
    }

    .media-dropdown-item svg {
        height: 18px;
        width: 18px;
        color: rgb(var(--ink) / 0.85);
    }

    .media-dropdown-item-danger {
        @apply text-danger hover:bg-danger/10;
    }

    .dropdown-panel {
        background-color: rgb(var(--surface-2));
    }

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

    .bg-dot-grid {
        background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
        background-size: 8px 8px;
    }

    .bg-line-grid {
        background-image: linear-gradient(0deg, #f1f5f9 1px, transparent 1px), linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
        background-size: 10px 10px;
    }

    .no-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .blend-hard-light {
        mix-blend-mode: hard-light;
    }

    .blend-plus-darker {
        mix-blend-mode: plus-darker;
    }

    .tracking-pixel {
        display: none;
        visibility: hidden;
    }

    @keyframes scan {
        0% { top: 0% }
        50% { top: 100% }
        100% { top: 0% }
    }

    .badge-soft {
        @apply inline-flex items-center rounded-full border border-border/80 bg-surface-2/80 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-muted;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-soft ring-1 ring-brand/30 transition hover:bg-brand-strong;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-xl border border-border bg-surface-2/90 px-5 py-2 text-xs font-semibold uppercase tracking-widest text-ink/80 transition hover:border-brand/40 hover:text-ink;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center rounded-xl bg-danger/90 px-5 py-2 text-xs font-semibold uppercase tracking-widest text-white transition hover:bg-danger disabled:cursor-not-allowed disabled:opacity-60;
    }

    .input-field {
        @apply w-full rounded-xl border border-border bg-surface-2/90 px-4 py-2.5 text-sm text-ink placeholder:text-muted/70 focus:border-brand focus:ring-2 focus:ring-brand/40;
    }

    .filter-form :is(select, input:not([type='checkbox']):not([type='radio'])) {
        width: 100%;
    }

    .file-uploader {
        @apply relative grid gap-3;
    }

    .file-uploader-input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .file-uploader-drop {
        @apply flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-border bg-surface-2/80 px-4 py-6 text-sm text-muted transition;
    }

    .file-uploader.is-dragover .file-uploader-drop,
    .file-uploader-drop:hover {
        @apply border-brand/50 bg-brand/5 text-ink shadow-soft;
    }

    .file-uploader-cloud {
        @apply flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/10 text-brand;
    }

    .file-uploader-cloud svg {
        height: 28px;
        width: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .file-uploader-title {
        @apply text-sm font-semibold text-ink;
    }

    .file-uploader-subtitle {
        @apply text-xs text-muted;
    }

    .file-uploader-list {
        @apply grid gap-2;
    }

    .file-uploader-item {
        @apply flex items-center gap-3 rounded-2xl border border-border bg-surface-2/80 px-4 py-3 text-sm;
    }

    .file-uploader-file {
        @apply flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10 text-brand;
    }

    .file-uploader-file svg {
        height: 22px;
        width: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .file-uploader-meta {
        @apply flex-1 min-w-0;
    }

    .file-uploader-name {
        @apply block truncate text-sm font-semibold text-ink;
    }

    .file-uploader-info {
        @apply block text-xs text-muted;
    }

    .file-uploader-progress {
        display: block;
        height: 0.35rem;
        border-radius: 999px;
        background-color: rgb(var(--border) / 0.6);
        margin-top: 0.4rem;
        overflow: hidden;
    }

    .file-uploader-progress span {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background-color: rgb(var(--brand));
        transition: width 0.2s ease;
    }

    .file-uploader-status {
        @apply text-xs font-semibold uppercase tracking-widest text-muted;
    }

    .file-uploader-item.is-uploading .file-uploader-status {
        color: rgb(var(--brand));
    }

    .file-uploader-item.is-complete .file-uploader-status {
        color: rgb(var(--success));
    }

    .file-uploader-item.is-complete .file-uploader-progress span {
        background-color: rgb(var(--success));
    }

    .quill-shell {
        @apply mt-1 w-full min-w-0 rounded-xl border border-border bg-surface-2/90 text-ink;
    }

    .quill-shell .ql-toolbar.ql-snow {
        @apply border-0 border-b border-border bg-surface-2/80;
    }

    .quill-shell .ql-container.ql-snow {
        @apply border-0;
    }

    .quill-shell .ql-editor {
        @apply min-h-[140px] bg-transparent px-4 py-3 text-sm;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .quill-shell .ql-editor * {
        max-width: 100%;
    }

    .quill-shell .ql-editor.ql-blank::before {
        @apply not-italic text-muted/70;
    }

    .badge {
        @apply inline-flex items-center rounded-full border border-border bg-surface-2/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-widest text-muted;
    }
}

/* Fix checkbox checked state being hidden by bg-* utility classes */
input[type='checkbox']:checked,
input[type='checkbox']:indeterminate {
    background-color: currentColor !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    border-color: transparent !important;
}

@layer utilities {
    .bg-grid {
        background-image:
            linear-gradient(to right, rgb(var(--grid) / 0.08) 1px, transparent 1px),
            linear-gradient(to bottom, rgb(var(--grid) / 0.08) 1px, transparent 1px);
        background-size: 56px 56px;
        background-position: center;
    }

    .filter-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 640px) {
        .filter-form {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .filter-form {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .filter-form > div:last-child {
        justify-self: start;
    }

    html[data-sidebar-open='true'] .admin-sidebar {
        translate: 0;
    }

    html[data-sidebar-open='true'] .admin-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== Collapsed Sidebar (Desktop) ===== */
    @media (min-width: 1024px) {
        .admin-sidebar {
            transition: width 0.3s ease;
        }

        html[data-sidebar-collapsed='true'] .admin-sidebar {
            width: 5rem;
            display: flex;
            flex-direction: column;
        }

        /* Header: center toggle button only */
        html[data-sidebar-collapsed='true'] .admin-sidebar > div:first-child {
            display: flex;
            justify-content: center;
            padding: 0.5rem;
        }

        /* Hide brand from header when collapsed */
        html[data-sidebar-collapsed='true'] .sidebar-brand {
            display: none;
        }

        /* Nav takes remaining space */
        html[data-sidebar-collapsed='true'] .admin-sidebar nav {
            flex: 1;
            overflow-y: auto;
        }

        /* Show brand icon at bottom */
        html[data-sidebar-collapsed='true'] .sidebar-brand-bottom {
            display: flex !important;
            justify-content: center;
            padding: 0.75rem 0;
            border-top: 1px solid rgb(var(--border) / 0.5);
        }

        /* Hide sidebar info panel when collapsed */
        html[data-sidebar-collapsed='true'] .sidebar-info-panel {
            display: none;
        }

        /* Hide brand text */
        html[data-sidebar-collapsed='true'] .sidebar-label {
            display: none;
        }

        /* Reduce nav padding */
        html[data-sidebar-collapsed='true'] .admin-sidebar nav {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        /* Hide section category headings (Users, Business, System) */
        html[data-sidebar-collapsed='true'] .admin-sidebar nav > div > p {
            display: none;
        }

        /* Hide text in regular nav links */
        html[data-sidebar-collapsed='true'] .admin-sidebar a.nav-item > span {
            display: none;
        }

        /* System Settings button: hide inner text span */
        html[data-sidebar-collapsed='true'] .admin-sidebar button.nav-item > span > span {
            display: none;
        }

        /* System Settings button: hide chevron arrow */
        html[data-sidebar-collapsed='true'] .admin-sidebar button.nav-item > svg:last-of-type {
            display: none;
        }

        /* Center all nav items when collapsed */
        html[data-sidebar-collapsed='true'] .admin-sidebar .nav-item {
            justify-content: center;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        /* Hide submenu dropdown items */
        html[data-sidebar-collapsed='true'] .admin-sidebar .ml-7 {
            display: none !important;
        }

        /* Flip collapse toggle icon to indicate expand */
        html[data-sidebar-collapsed='true'] .sidebar-collapse-icon {
            transform: scaleX(-1);
        }
    }

    /* On mobile, position notification & user dropdowns relative to the header
       instead of the small trigger button so they don't overflow the viewport */
    @media (max-width: 639px) {
        [data-notification-scope] > .relative {
            position: static;
        }

        [data-notification-scope] > .relative > [x-show] {
            inset-inline-end: 0.75rem;
            inset-inline-start: 0.75rem;
            width: auto;
            max-width: none;
        }
    }

    [data-view-mode='grid'] .view-list {
        display: none;
    }

    [data-view-mode='list'] .view-grid {
        display: none;
    }

    @media print {
        .admin-sidebar,
        header.sticky,
        .admin-overlay,
        .bg-grid,
        .no-print,
        button,
        .btn-primary,
        .btn-secondary,
        .btn-danger,
        form,
        nav,
        footer,
        [aria-label="Pagination"],
        [role="navigation"],
        .pagination,
        [data-admin-search],
        [data-notification-scope],
        [data-gdpr-banner],
        .icon-button,
        .panel-heading,
        .badge,
        .fixed,
        .media-actions,
        input,
        select,
        textarea,
        th:first-child:has(input),
        td:first-child:has(input),
        th:last-child,
        td:last-child,
        p.text-muted {
            display: none !important;
        }

        /* Re-show useful text-muted that are not summaries if needed, but usually simpler is better */
        th, td {
            display: table-cell !important;
        }
        
        /* Force hide first and last columns for data-only view */
        thead tr th:first-child, 
        tbody tr td:first-child,
        thead tr th:last-child, 
        tbody tr td:last-child {
            display: none !important;
        }

        html,
        body {
            background: white !important;
            color: black !important;
            padding: 0 !important;
            margin: 0 !important;
            height: auto !important;
            overflow: visible !important;
            background-image: none !important;
        }

        .relative.flex.h-full {
            display: block !important;
        }

        [data-admin-scroll],
        main {
            display: block !important;
            height: auto !important;
            overflow: visible !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .panel {
            box-shadow: none !important;
            border: none !important;
            background: transparent !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            backdrop-filter: none !important;
        }

        /* Hide the first panel if it only contains filters/titles (common pattern) */
        .space-y-6 > .panel:first-child:has(form),
        .space-y-6 > .panel:first-child:has(.btn-secondary) {
            display: none !important;
        }

        table {
            width: 100% !important;
            border-collapse: collapse !important;
            font-size: 12px !important;
            color: black !important;
        }

        th {
            border-bottom: 2px solid black !important;
            padding: 8px !important;
            text-align: left !important;
            background: transparent !important;
            color: black !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
        }

        td {
            border-bottom: 1px solid #ddd !important;
            padding: 8px !important;
            color: black !important;
        }

        /* Ensure text is black for printing */
        .text-ink, .text-muted, .text-brand {
            color: black !important;
        }

        .view-list {
            display: block !important;
        }
        
        /* Grid views are messy in print, force list */
        .view-grid {
            display: none !important;
        }
    }
}