From 974504365fd92fc8108a4139f7933008fabafe73 Mon Sep 17 00:00:00 2001 From: borhanst Date: Thu, 3 Sep 2026 13:33:53 +0600 Subject: [PATCH 1/8] feat: add WYSIWYG and array input widgets for enhanced form rendering --- .../templates/macros/form_fields.html | 93 +++++++++++++++++++ .../templates/macros/widgets.html | 41 ++++++++ fastapi_admin_kit/widgets/__init__.py | 9 +- 3 files changed, 142 insertions(+), 1 deletion(-) diff --git a/fastapi_admin_kit/templates/macros/form_fields.html b/fastapi_admin_kit/templates/macros/form_fields.html index 7b3e70d..415448c 100644 --- a/fastapi_admin_kit/templates/macros/form_fields.html +++ b/fastapi_admin_kit/templates/macros/form_fields.html @@ -38,6 +38,8 @@ {% elif m == "tag_input" %}{{ _tag_input(field_ctx) }} {% elif m == "relation_picker" %}{{ _relation_picker(field_ctx) }} {% elif m == "multi_relation" %}{{ _multi_relation(field_ctx) }} + {% elif m == "wysiwyg" %}{{ _wysiwyg(field_ctx) }} + {% elif m == "array_input" %}{{ _array_input(field_ctx) }} {% else %} {{ _text_input(field_ctx, model_name) }} {% endif %} {% endmacro %} @@ -657,3 +659,94 @@ {{ _help_text(field_ctx) }} {{ _field_wrapper_close() }} {% endmacro %} + +{# ─── WYSIWYG Editor ───────────────────────────────────────────────────── #} + +{% macro _wysiwyg(field_ctx) %} +{% set name = field_ctx.meta.name %} +{% set val = field_ctx.widget_context.value | default('') %} +{% set height = field_ctx.widget_context.height | default(200) %} +{{ _field_wrapper_open(field_ctx) }} + {{ _label(field_ctx) }} +
+ +
+
+ + + + {{ _errors(field_ctx) }} + {{ _help_text(field_ctx) }} +{{ _field_wrapper_close() }} +{% endmacro %} + +{# ─── Array Input ──────────────────────────────────────────────────────── #} + +{% macro _array_input(field_ctx) %} +{% set name = field_ctx.meta.name %} +{% set val = field_ctx.widget_context.value | default([]) %} +{% set min_items = field_ctx.widget_context.min_items | default(0) %} +{% set max_items = field_ctx.widget_context.max_items %} +{{ _field_wrapper_open(field_ctx) }} + {{ _label(field_ctx) }} +
+
+ +
+ {% if not field_ctx.meta.readonly %} +
+ + +
+ {% endif %} + +
+ {{ _errors(field_ctx) }} + {{ _help_text(field_ctx) }} +{{ _field_wrapper_close() }} +{% endmacro %} diff --git a/fastapi_admin_kit/templates/macros/widgets.html b/fastapi_admin_kit/templates/macros/widgets.html index ce3b0fe..569cc26 100644 --- a/fastapi_admin_kit/templates/macros/widgets.html +++ b/fastapi_admin_kit/templates/macros/widgets.html @@ -157,3 +157,44 @@ {# Options will be loaded via HTMX #} {% endmacro %} + +{% macro wysiwyg(name, label, value='', required=false, readonly=false, height=200, error=null, css_class='', toolbar_buttons=null) %} +
+ +
+
+ + +{% endmacro %} + +{% macro array_input(name, label, value=[], required=false, readonly=false, min_items=0, max_items=null, error=null, css_class='') %} +
+ +
+ +
+
+{% endmacro %} diff --git a/fastapi_admin_kit/widgets/__init__.py b/fastapi_admin_kit/widgets/__init__.py index 19d7f84..1d1850a 100644 --- a/fastapi_admin_kit/widgets/__init__.py +++ b/fastapi_admin_kit/widgets/__init__.py @@ -4,6 +4,7 @@ from fastapi_admin_kit.widgets.base import Widget from fastapi_admin_kit.widgets.inputs import ( + ArrayWidget, DatePickerWidget, DateTimePickerWidget, FileUploadWidget, @@ -17,9 +18,13 @@ TextareaWidget, TextInputWidget, ToggleWidget, + WysiwygWidget, ) from fastapi_admin_kit.widgets.registry import WidgetRegistry -from fastapi_admin_kit.widgets.relation import MultiRelationWidget, RelationPickerWidget +from fastapi_admin_kit.widgets.relation import ( + MultiRelationWidget, + RelationPickerWidget, +) from fastapi_admin_kit.widgets.resolver import WidgetResolver __all__ = [ @@ -41,4 +46,6 @@ "ImageUploadWidget", "RelationPickerWidget", "MultiRelationWidget", + "WysiwygWidget", + "ArrayWidget", ] From f832bc73543d19753a3cefeb713217533cda179d Mon Sep 17 00:00:00 2001 From: borhanst Date: Thu, 3 Sep 2026 17:45:56 +0600 Subject: [PATCH 2/8] refactor: update styles and structure for Tailwind CSS integration - Replaced Google Fonts with Inter and JetBrains Mono in login and head templates. - Updated stylesheet links to use Tailwind CSS compiled bundle. - Refactored form layout in inline_stacked.html for better responsiveness. - Enhanced list_table.html with Tailwind-first classes and improved accessibility. - Modified pagination.html for a more modern design and usability. - Adjusted sidebar.html to maintain state with sidebar collapse. - Improved topbar.html for better visibility and responsiveness on different screen sizes. - Updated tests to reflect changes in the topbar layout and search trigger. --- .gitignore | 8 + fastapi_admin_kit/admin/core.py | 5 +- fastapi_admin_kit/static/css/admin.css | 39 +- .../static/css/dist/tailwind.css | 2 + fastapi_admin_kit/static/css/style.css | 560 ++++++++++++++++++ .../templates/admin/base_list.html | 431 +++++++------- fastapi_admin_kit/templates/base.html | 7 +- .../templates/macros/form_fields.html | 27 +- .../templates/pages/2fa/verify.html | 7 +- .../templates/pages/dashboard.html | 255 ++++---- fastapi_admin_kit/templates/pages/login.html | 7 +- .../templates/partials/head.html | 6 +- .../templates/partials/head_minimal.html | 6 +- .../templates/partials/inline_stacked.html | 5 +- .../templates/partials/list_table.html | 97 ++- .../templates/partials/pagination.html | 51 +- .../templates/partials/sidebar.html | 2 +- .../templates/partials/topbar.html | 8 +- tests/test_shell_layout.py | 4 +- 19 files changed, 1035 insertions(+), 492 deletions(-) create mode 100644 fastapi_admin_kit/static/css/dist/tailwind.css create mode 100644 fastapi_admin_kit/static/css/style.css diff --git a/.gitignore b/.gitignore index a6bf120..e3d33ed 100644 --- a/.gitignore +++ b/.gitignore @@ -73,3 +73,11 @@ site/ .DS_Store Thumbs.db *.log + +# Node (Tailwind build, dev-only — compiled CSS is committed) +node_modules/ +.npm/ + +# Compiled Tailwind bundle IS tracked (exception to dist/ above) +!fastapi_admin_kit/static/css/dist/ +!fastapi_admin_kit/static/css/dist/** diff --git a/fastapi_admin_kit/admin/core.py b/fastapi_admin_kit/admin/core.py index bd5eb94..a0894e1 100644 --- a/fastapi_admin_kit/admin/core.py +++ b/fastapi_admin_kit/admin/core.py @@ -1305,9 +1305,8 @@ def _icon(name: str, size: str = "", **kwargs) -> str: _static_dir = _Path(__file__).parent.parent / "static" _hash_data = b"" for _f in ( - "css/tokens.css", - "css/presets.css", - "css/admin.css", + "css/style.css", + "css/dist/tailwind.css", "js/admin.js", ): _fp = _static_dir / _f diff --git a/fastapi_admin_kit/static/css/admin.css b/fastapi_admin_kit/static/css/admin.css index 089e08a..917d63d 100644 --- a/fastapi_admin_kit/static/css/admin.css +++ b/fastapi_admin_kit/static/css/admin.css @@ -680,9 +680,23 @@ img { max-width: 100%; display: block; } /* ── Field Wrapper ───────────────────────────────────────────────────────── */ .field-wrapper { - display: flex; - flex-direction: column; - gap: 6px; + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-3); + align-items: start; +} + +/* Default: input column is 70% of the row */ +.field-wrapper:not(.field-wrapper--full) .field-wrapper__body { + max-width: 70%; +} + +/* Opt-in: input column spans 100% of the row */ +.field-wrapper--full { + grid-template-columns: 180px 1fr; +} +.field-wrapper--full .field-wrapper__body { + max-width: 100%; } .field-wrapper.has-error .form-input, @@ -702,7 +716,9 @@ img { max-width: 100%; display: block; } .required-star { color: var(--danger-500); - font-weight: var(--font-normal); + font-weight: var(--font-semibold); + margin-left: 2px; + font-size: var(--text-sm); } .field-help { @@ -794,8 +810,8 @@ img { max-width: 100%; display: block; } } .fieldset__fields { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + display: flex; + flex-direction: column; gap: var(--space-4); } @@ -2369,8 +2385,6 @@ img { max-width: 100%; display: block; } .form-input:focus, .form-select:focus { border-color: var(--primary-500); box-shadow: var(--shadow-focus); } .form-input[readonly] { background: var(--surface-inset); color: var(--text-secondary); cursor: not-allowed; } -.field-wrapper { margin-bottom: var(--space-4); } -.field-label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-1); } .required-star { color: var(--danger-500); margin-left: 2px; } .field-errors { margin-top: var(--space-1); } .field-errors li { font-size: var(--text-xs); color: var(--danger-500); } @@ -2722,9 +2736,8 @@ img { max-width: 100%; display: block; } .table--relaxed th, .table--relaxed td { padding: var(--space-4) var(--space-5); } /* Form layout variants */ -.form--one-column .fieldset__fields { grid-template-columns: 1fr; } .form--compact .field-wrapper { gap: 4px; } -.form--relaxed .field-wrapper { gap: 12px; } +.form--relaxed .field-wrapper { gap: 16px; } /* Sidebar style variants */ .sidebar--compact .nav-link { padding: var(--space-1) 0; font-size: var(--text-xs); } @@ -2801,10 +2814,14 @@ img { max-width: 100%; display: block; } grid-template-columns: repeat(2, 1fr); } - .fieldset__fields { + .field-wrapper { grid-template-columns: 1fr; } + .field-wrapper .field-wrapper__body { + max-width: 100%; + } + .filter-bar { flex-direction: column; align-items: stretch; diff --git a/fastapi_admin_kit/static/css/dist/tailwind.css b/fastapi_admin_kit/static/css/dist/tailwind.css new file mode 100644 index 0000000..56dfeec --- /dev/null +++ b/fastapi_admin_kit/static/css/dist/tailwind.css @@ -0,0 +1,2 @@ +/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ +@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Fira Code", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-950:oklch(25.8% .092 26.042);--color-orange-500:oklch(70.5% .213 47.604);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-950:oklch(27.9% .077 45.635);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-950:oklch(26.2% .051 172.552);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-cyan-500:oklch(71.5% .143 215.221);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-700:oklch(50% .134 242.749);--color-sky-950:oklch(29.3% .066 243.157);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-500:oklch(58.5% .233 277.117);--color-violet-500:oklch(60.6% .25 292.717);--color-purple-500:oklch(62.7% .265 303.9);--color-pink-500:oklch(65.6% .241 354.308);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:1rem;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-display:"Inter", system-ui, -apple-system, sans-serif;--color-primary-50:#ecfdf5;--color-primary-100:#d1fae5;--color-primary-200:#a7f3d0;--color-primary-300:#6ee7b7;--color-primary-400:#34d399;--color-primary-500:#10b981;--color-primary-600:#059669;--color-primary-700:#047857;--color-primary-800:#065f46;--color-primary-900:#064e3b;--color-surface-base:#f8fafc;--color-surface-raised:#fff;--color-surface-overlay:#fff;--color-surface-border:#e2e8f0;--color-surface-inset:#f1f5f9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])),[x-cloak]{display:none!important}body{background-color:var(--color-surface-base);font-family:var(--font-sans);color:var(--color-slate-900);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark] body{background-color:var(--color-slate-950);color:var(--color-slate-100)}::selection{background-color:var(--color-primary-200);color:var(--color-slate-900)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--color-slate-300);border-radius:3.40282e38px}::-webkit-scrollbar-thumb:where(){background-color:var(--color-slate-700)}#loading-bar.htmx-request{z-index:200;height:calc(var(--spacing) * .5);background-color:var(--color-primary-500);inset-inline:0;position:fixed;top:0}}@layer legacy-bridge{.google-sans-flex-regular{font-optical-sizing:auto;font-variation-settings:"slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0;font-family:Google Sans Flex,sans-serif;font-style:normal;font-weight:400}.material-symbols-outlined{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";vertical-align:middle;-webkit-user-select:none;user-select:none;pointer-events:none;direction:ltr;flex-shrink:0;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.nav-link .material-symbols-outlined{opacity:.6;font-size:18px}.nav-link:hover .material-symbols-outlined{opacity:1}.nav-link.active .material-symbols-outlined{opacity:1;color:var(--primary-500)}.btn .material-symbols-outlined{width:16px;height:16px;font-size:16px}.btn-sm .material-symbols-outlined,.filter-chip .material-symbols-outlined{width:14px;height:14px;font-size:14px}.filter-bar-clear .material-symbols-outlined{width:16px;height:16px;font-size:16px}.filter-bar-action .material-symbols-outlined{width:18px;height:18px;font-size:18px}.actions-trigger .material-symbols-outlined,.actions-menu-item .material-symbols-outlined{width:16px;height:16px;font-size:16px}.actions-menu-item--danger .material-symbols-outlined{color:var(--color-danger)}.status-badge .material-symbols-outlined{width:14px;height:14px;font-size:14px}.topbar-search .material-symbols-outlined{color:var(--text-disabled);flex-shrink:0}.topbar-logo-icon .material-symbols-outlined{width:24px;height:24px;font-size:24px}.pagination .material-symbols-outlined{width:16px;height:16px;font-size:16px}.flash-message .material-symbols-outlined{flex-shrink:0;width:20px;height:20px;font-size:20px}.stat-icon .material-symbols-outlined{font-size:24px}.breadcrumb .material-symbols-outlined{width:16px;height:16px;font-size:16px}.back-link .material-symbols-outlined{width:20px;height:20px;font-size:20px}.page-header-back .material-symbols-outlined{width:16px;height:16px;font-size:16px}.empty-state .material-symbols-outlined{color:var(--text-disabled);font-size:48px}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary);background:var(--surface-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.6}body:before{content:"";pointer-events:none;z-index:9999;opacity:var(--admin-grain-opacity,.025);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit;text-decoration:none}ul,ol{margin:0;padding:0;list-style:none}img{max-width:100%;display:block}::selection{background:var(--primary-200);color:var(--text-primary)}[data-theme=dark] ::selection{background:var(--primary-800);color:var(--text-inverse)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}.admin-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.admin-topbar:after{content:"";background:linear-gradient(90deg, var(--primary-500), var(--primary-300), var(--primary-500));height:2px;opacity:var(--admin-accent-line-opacity,.4);position:absolute;bottom:-1px;left:0;right:0}.admin-body{flex:1;display:flex;overflow:hidden}.admin-sidebar__logo{height:var(--topbar-height);padding:0 var(--space-5);border-bottom:1px solid var(--surface-border);align-items:center;gap:var(--space-3);flex-shrink:0;display:flex}.admin-sidebar__logo-text{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);white-space:nowrap;overflow:hidden}.admin-sidebar__nav{padding:var(--space-3) var(--space-3);flex:1;overflow-y:auto}.nav-section-label{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.1em;color:var(--text-disabled);padding:var(--space-4) var(--space-3) var(--space-2)}.nav-link{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-out);cursor:pointer;text-align:left;background:0 0;border:none;width:100%;line-height:1.5;display:flex;position:relative}.nav-link svg{opacity:.6;flex-shrink:0;width:18px;height:18px}.nav-link:hover svg{opacity:1}.nav-link.active svg{opacity:1;color:var(--primary-500)}.nav-link__icon{opacity:.7;flex-shrink:0;width:16px;height:16px}.nav-link.active .nav-link__icon{opacity:1}.nav-link__badge{font-family:var(--font-mono);font-size:var(--text-2xs);background:var(--surface-inset);color:var(--text-secondary);border-radius:var(--radius-full);border:1px solid var(--surface-border);margin-left:auto;padding:1px 6px}.nav-group-items{padding-left:var(--space-5)}.nav-group-toggle{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);cursor:pointer;text-align:left;border-radius:var(--radius-md);width:100%;transition:all var(--duration-fast);background:0 0;border:none;display:flex}.nav-group-toggle:hover{background:var(--surface-inset);color:var(--primary-600)}.nav-group-chevron{width:14px;height:14px;transition:transform var(--duration-base) var(--easing-out);opacity:.5;margin-left:auto}.nav-group-toggle[aria-expanded=false] .nav-group-chevron{transform:rotate(-90deg)}.nav-group-items{padding-left:var(--space-5);overflow:hidden}.nav-link--child{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-normal);color:var(--text-secondary)}.nav-link--child:hover{color:var(--primary-600);background:var(--surface-inset)}.nav-link--child.active{color:var(--primary-600);background:var(--primary-50);font-weight:var(--font-medium)}.admin-sidebar__footer{border-top:1px solid var(--surface-border);padding:var(--space-3);flex-shrink:0}.admin-content{background:var(--surface-base);flex:1;overflow:hidden auto}.admin-content__inner{max-width:none;padding:var(--space-8) var(--content-padding);margin:0 auto}.page-header{padding-bottom:var(--space-5);border-bottom:2px solid var(--text-primary);margin-bottom:var(--space-6);justify-content:space-between;align-items:flex-start;display:flex}.page-header__left{flex:1;min-width:0}.page-header__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-normal);color:var(--text-primary);letter-spacing:-.01em;margin:0;line-height:1.2}.page-header__subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin:var(--space-1) 0 0}.page-header__subtitle--mono{font-family:var(--font-mono);color:var(--mono-accent)}.page-header__actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.back-link{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-3);transition:color var(--duration-fast);display:inline-flex}.back-link:hover{color:var(--primary-500)}.back-link svg{width:14px;height:14px}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--easing-out);white-space:nowrap;border:1px solid #0000;padding:8px 16px;line-height:1;text-decoration:none;display:inline-flex}.btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn svg{flex-shrink:0;width:15px;height:15px}.btn-primary:hover:not(:disabled){background:var(--primary-600);border-color:var(--primary-600)}.btn-primary:active:not(:disabled){background:var(--primary-700)}.btn-secondary:hover:not(:disabled){background:var(--surface-inset);border-color:var(--text-disabled)}.btn-danger:hover:not(:disabled){background:var(--danger-500);color:var(--text-inverse);border-color:var(--danger-500)}.btn-ghost:hover:not(:disabled){background:var(--surface-inset);color:var(--text-primary)}.btn-sm{font-size:var(--text-xs);padding:5px 10px}.btn-sm svg{width:13px;height:13px}.btn-lg{font-size:var(--text-base);padding:10px 20px}.btn--loading{pointer-events:none;position:relative;color:#0000!important}.btn--loading:after{content:"";border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite btn-spin;position:absolute}.btn-primary.btn--loading:after{border-color:var(--text-inverse);border-right-color:#0000}@keyframes btn-spin{to{transform:rotate(360deg)}}.form-input,.form-select,.form-textarea{width:100%;height:38px;padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);outline:none}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-disabled)}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary-500);box-shadow:var(--shadow-focus)}.form-input:read-only{background:var(--surface-inset);cursor:default}.form-input.has-error,.form-input[aria-invalid=true]{border-color:var(--danger-500);box-shadow:var(--shadow-focus-error)}.form-textarea{height:auto;min-height:80px;padding:var(--space-3);resize:vertical;line-height:1.6}.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:18px;padding-right:36px}.field-wrapper{gap:var(--space-3);grid-template-columns:180px 1fr;align-items:start;display:grid}.field-wrapper:not(.field-wrapper--full) .field-wrapper__body{max-width:70%}.field-wrapper--full{grid-template-columns:180px 1fr}.field-wrapper--full .field-wrapper__body{max-width:100%}.field-wrapper.has-error .form-input,.field-wrapper.has-error .form-select,.field-wrapper.has-error .form-textarea{border-color:var(--danger-500)}.field-label{align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);display:flex}.required-star{color:var(--danger-500);font-weight:var(--font-semibold);font-size:var(--text-sm);margin-left:2px}.field-help{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5}.field-errors{margin:0;padding:0}.field-errors li{align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--danger-500);display:flex}.field-errors li:before{content:"!";background:var(--danger-500);width:14px;height:14px;color:var(--text-inverse);font-size:9px;font-weight:var(--font-semibold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.fieldset{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:var(--space-5)}.fieldset__header{padding-bottom:var(--space-4);border-bottom:1px solid var(--surface-border);margin-bottom:var(--space-5);justify-content:space-between;align-items:center;display:flex}.fieldset__title{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin:0}.fieldset__toggle{cursor:pointer;padding:var(--space-1);color:var(--text-disabled);border-radius:var(--radius-sm);transition:color var(--duration-fast), background var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.fieldset__toggle:hover{color:var(--text-primary);background:var(--surface-inset)}.fieldset__toggle svg{width:16px;height:16px;transition:transform var(--duration-base) var(--easing-out)}.fieldset__fields{gap:var(--space-4);flex-direction:column;display:flex}.fieldset__fields>.field-wrapper--full{grid-column:1/-1}.badge{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--font-medium);border-radius:var(--radius-sm);letter-spacing:.02em;align-items:center;gap:4px;padding:2px 8px;line-height:1.5;display:inline-flex}.badge-primary{background:var(--primary-50);color:var(--primary-700)}.badge-mono{font-family:var(--font-mono);font-size:var(--text-2xs);background:var(--surface-inset);color:var(--mono-accent);border:1px solid var(--surface-border)}.toggle-switch{border-radius:var(--radius-full);background:var(--surface-border);cursor:pointer;width:38px;height:22px;transition:background var(--duration-fast);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.toggle-switch[aria-checked=true],.toggle-switch.active{background:var(--primary-500)}.toggle-knob{background:var(--text-inverse);width:16px;height:16px;box-shadow:var(--shadow-xs);transition:transform var(--duration-fast) var(--easing-spring);border-radius:50%;position:absolute;left:3px}.toggle-switch[aria-checked=true] .toggle-knob,.toggle-switch.active .toggle-knob{transform:translate(16px)}.table-container{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden}.table-wrapper{border-collapse:collapse;width:100%}.table-wrapper thead{background:var(--surface-inset)}.table-wrapper thead tr{border-bottom:2px solid var(--surface-border)}.table-wrapper th{padding:var(--space-3) var(--space-4);text-align:left;font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--font-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;-webkit-user-select:none;user-select:none}.table__th--sortable{cursor:pointer;transition:color var(--duration-fast)}.table__th--sortable:hover{color:var(--text-primary)}.table__th--checkbox{width:44px}.table__th--actions{text-align:right}.table-wrapper tbody tr{border-bottom:1px solid var(--surface-border);transition:background var(--duration-fast)}.table-wrapper tbody tr:last-child{border-bottom:none}.table-wrapper td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text-primary);white-space:nowrap;vertical-align:middle}.table__cell--checkbox{width:44px}.table-checkbox{border:1.5px solid var(--surface-border);border-radius:var(--radius-sm);cursor:pointer;appearance:none;background:var(--surface-raised);width:16px;height:16px;transition:all var(--duration-fast);position:relative}.table-checkbox:checked{background:var(--primary-500);border-color:var(--primary-500)}.table-checkbox:checked:after{content:"";border:solid var(--text-inverse);border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.table-checkbox:indeterminate{background:var(--primary-500);border-color:var(--primary-500)}.table-checkbox:indeterminate:after{content:"";border-bottom:2px solid var(--text-inverse);width:8px;height:0;position:absolute;top:6px;left:3px}.table__cell--mono{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--mono-accent)}.table__cell--actions{text-align:right;white-space:nowrap}.table-actions{justify-content:flex-end;align-items:center;gap:var(--space-1);display:flex}.table-actions__separator{background:var(--text-disabled);border-radius:50%;flex-shrink:0;width:3px;height:3px}.table-action{font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;transition:color var(--duration-fast);font-family:var(--font-body);background:0 0;border:none;padding:2px 4px}.table-action:hover{color:var(--text-primary)}.table-action--danger:hover{color:var(--danger-500)}.table-delete-confirm{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--danger-500);display:flex}.filter-bar{align-items:center;gap:var(--space-2);padding-bottom:var(--space-4);flex-wrap:wrap;display:flex}.filter-bar__search-wrap{flex:1;min-width:200px;max-width:360px;position:relative}.filter-bar__search-icon{width:15px;height:15px;color:var(--text-disabled);pointer-events:none;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.filter-bar__search{height:36px;padding:0 var(--space-3) 0 32px;font-size:var(--text-sm)}.filter-chip{align-items:center;gap:var(--space-1);height:36px;padding:0 var(--space-3);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);font-family:var(--font-body);display:inline-flex}.filter-chip--active{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-700)}.filter-chip svg{width:14px;height:14px}.filter-bar__clear{font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);padding:var(--space-2);transition:color var(--duration-fast);background:0 0;border:none}.filter-bar__clear:hover{color:var(--danger-500)}.filter-bar__divider{background:var(--surface-border);flex-shrink:0;width:1px;height:24px}.filter-chip-wrap{align-items:center;gap:var(--space-1);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);height:36px;transition:all var(--duration-fast);display:inline-flex}.filter-chip-label{padding-left:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}.filter-input-date:focus,.filter-input-datetime:focus,.filter-input-time:focus,.filter-input-text:focus,.filter-input-number:focus{outline:none}.filter-clear-btn{width:20px;height:20px;margin-right:var(--space-1);border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--duration-fast);justify-content:center;align-items:center;font-size:14px;line-height:1;text-decoration:none;display:inline-flex}.filter-clear-btn:hover{background:var(--danger-50);color:var(--danger-500)}.bulk-action-bar{align-items:center;gap:var(--space-3);height:48px;padding:0 var(--space-4);background:var(--primary-50);border:1px solid var(--primary-200);border-radius:var(--radius-lg);margin-bottom:var(--space-4);display:flex}.bulk-action-bar__count{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--primary-700)}.pagination{padding:var(--space-3) var(--space-4);border-top:1px solid var(--surface-border);justify-content:space-between;align-items:center;display:flex}.pagination__info{font-size:var(--text-xs);color:var(--text-secondary)}.pagination__info strong{font-family:var(--font-mono);color:var(--mono-accent);font-weight:var(--font-normal)}.pagination__links{align-items:center;gap:3px;display:flex}.pagination__link{min-width:30px;height:30px;padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.pagination__link:hover{background:var(--surface-inset);color:var(--text-primary)}.pagination__link--active{background:var(--primary-500);color:var(--text-inverse);font-weight:var(--font-medium)}.pagination__link--disabled{opacity:.4;cursor:not-allowed}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:modal-fade-in var(--duration-base) var(--easing-out);background:#14121099;position:fixed;inset:0}.modal{z-index:51;background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:520px;max-width:calc(100vw - 32px);max-height:85vh;animation:modal-scale-in var(--duration-slow) var(--easing-out);flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--sm{width:420px}.modal--lg{width:720px}.modal__header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:center;display:flex}.modal__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);margin:0}.modal__close{cursor:pointer;padding:var(--space-1);color:var(--text-disabled);border-radius:var(--radius-sm);transition:all var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.modal__close:hover{color:var(--text-primary);background:var(--surface-inset)}.modal__close svg{width:18px;height:18px}.modal__body{padding:var(--space-6);font-size:var(--text-sm);flex:1;line-height:1.6;overflow-y:auto}.modal__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--surface-border);justify-content:flex-end;gap:var(--space-2);display:flex}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-scale-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.toast-container{top:calc(var(--topbar-height) + var(--space-4));right:var(--space-4);z-index:100;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);width:100%;max-width:380px;box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-4);align-items:flex-start;gap:var(--space-3);pointer-events:auto;animation:toast-slide-in var(--duration-slow) var(--easing-out);display:flex}.toast__icon{flex-shrink:0;width:18px;height:18px;margin-top:1px}.toast__content{flex:1;min-width:0}.toast__message{font-size:var(--text-sm);color:var(--text-primary);line-height:1.5}.toast__close{cursor:pointer;color:var(--text-disabled);border-radius:var(--radius-sm);transition:all var(--duration-fast);background:0 0;border:none;flex-shrink:0;padding:2px;display:flex}.toast__close:hover{color:var(--text-primary);background:var(--surface-inset)}.toast-success .toast__icon{color:var(--success-500)}.toast-error .toast__icon{color:var(--danger-500)}.toast-warning .toast__icon{color:var(--warning-500)}.toast-info .toast__icon{color:var(--info-500)}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.form-save-bar{background:var(--surface-raised);border-top:1px solid var(--surface-border);padding:var(--space-3) var(--content-padding);z-index:20;justify-content:space-between;align-items:center;display:flex;position:sticky;bottom:0;box-shadow:0 -2px 8px #1c19170a}.form-save-bar__left{align-items:center;display:flex}.form-save-bar__right{align-items:center;gap:var(--space-2);display:flex}.empty-state{padding:var(--space-16) var(--space-4);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state__icon{width:48px;height:48px;color:var(--text-disabled);margin-bottom:var(--space-4);opacity:.5}.empty-state__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-secondary);margin:0 0 var(--space-2)}.empty-state__text{font-size:var(--text-sm);color:var(--text-disabled);margin:0 0 var(--space-5)}.tag-chip{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);background:var(--primary-50);color:var(--primary-700);font-size:var(--text-xs);font-weight:var(--font-medium);padding:2px 10px;display:inline-flex}.tag-chip__remove{cursor:pointer;color:var(--primary-400);transition:color var(--duration-fast);display:inline-flex}.tag-chip__remove:hover{color:var(--danger-500)}.relation-picker{position:relative}.relation-picker-dropdown{z-index:15;margin-top:var(--space-1);background:var(--surface-overlay);border:1px solid var(--surface-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:240px;animation:dropdown-enter var(--duration-base) var(--easing-out);position:absolute;top:100%;left:0;right:0;overflow-y:auto}.relation-option{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);cursor:pointer;transition:background var(--duration-fast)}.relation-option:hover{background:var(--primary-50)}.relation-option--selected{background:var(--primary-50);color:var(--primary-700);font-weight:var(--font-medium)}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.json-editor-wrapper{border:1px solid var(--surface-border);border-radius:var(--radius-md);background:var(--surface-inset);min-height:200px;overflow:hidden}.json-editor-wrapper .cm-editor{min-height:200px}.stat-cards{gap:var(--space-4);margin-bottom:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.stat-card{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--duration-fast);cursor:pointer;text-decoration:none;display:block}.stat-card:hover{box-shadow:var(--shadow-sm);border-color:var(--text-disabled)}.stat-card__label{font-size:var(--text-2xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:var(--space-2)}.stat-card__value{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text-primary);margin-bottom:var(--space-2);line-height:1}.stat-card__change{font-family:var(--font-mono);font-size:var(--text-2xs)}.stat-card__change--positive{color:var(--success-500)}.stat-card__change--negative{color:var(--danger-500)}.activity-feed{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden}.activity-feed__header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--surface-border)}.activity-feed__title{font-family:var(--font-display);font-size:var(--text-lg);margin:0}.activity-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--surface-border);transition:background var(--duration-fast);display:flex}.activity-item:last-child{border-bottom:none}.activity-item:hover{background:var(--surface-inset)}.activity-item__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.activity-item__dot--create{background:var(--success-500)}.activity-item__dot--update{background:var(--warning-500)}.activity-item__dot--delete{background:var(--danger-500)}.activity-item__content{min-width:0;font-size:var(--text-sm);flex:1}.activity-item__time{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-secondary);flex-shrink:0}.audit-timeline{gap:var(--space-3);flex-direction:column;display:flex}.audit-entry{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);border-left:3px solid var(--surface-border);padding:var(--space-4) var(--space-5);cursor:pointer;transition:all var(--duration-fast)}.audit-entry:hover{box-shadow:var(--shadow-xs)}.audit-entry--create{border-left-color:var(--success-500)}.audit-entry--update{border-left-color:var(--warning-500)}.audit-entry--delete{border-left-color:var(--danger-500)}.audit-entry__header{align-items:center;gap:var(--space-3);font-size:var(--text-sm);display:flex}.audit-entry__time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}.audit-entry__user{color:var(--text-secondary)}.audit-entry__model{font-family:var(--font-mono);color:var(--mono-accent);font-size:var(--text-xs)}.permissions-matrix{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden}.permissions-matrix table{border-collapse:collapse;width:100%}.permissions-matrix th{padding:var(--space-3) var(--space-4);font-size:var(--text-2xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);text-align:center;background:var(--surface-inset);border-bottom:2px solid var(--surface-border)}.permissions-matrix th:first-child{text-align:left}.permissions-matrix td{padding:var(--space-3) var(--space-4);text-align:center;border-bottom:1px solid var(--surface-border);font-size:var(--text-sm)}.permissions-matrix td:first-child{text-align:left;font-weight:var(--font-medium)}.permissions-matrix tr:last-child td{border-bottom:none}.permissions-matrix tr:hover{background:var(--surface-inset)}.matrix-checkbox{border:1.5px solid var(--surface-border);border-radius:var(--radius-sm);cursor:pointer;appearance:none;background:var(--surface-raised);width:18px;height:18px;transition:all var(--duration-fast);position:relative}.matrix-checkbox:checked{background:var(--primary-500);border-color:var(--primary-500)}.matrix-checkbox:checked:after{content:"";border:solid var(--text-inverse);border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:2px;left:5px;transform:rotate(45deg)}.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-flex}.htmx-swapping{opacity:0;transition:opacity var(--duration-fast)}.htmx-settling{opacity:1;transition:opacity var(--duration-fast)}.htmx-indicator-loading{background:var(--primary-500);z-index:1000;transform-origin:0;height:2px;transition:transform .3s var(--easing-out);position:fixed;top:0;left:0;right:0;transform:scaleX(0)}.htmx-request>.htmx-indicator-loading{transform:scaleX(.3)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar-logo{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);white-space:nowrap;text-decoration:none;display:flex}.topbar-logo img{max-width:120px;height:28px}.topbar-logo-icon{color:var(--primary-500);justify-content:center;align-items:center;display:flex}.topbar-user-name{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);line-height:1.2}.topbar-divider{background:var(--surface-border);width:1px;height:24px;margin:0 var(--space-2)}.breadcrumb{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.breadcrumb-segment{color:var(--text-secondary);align-items:center;display:flex}.breadcrumb-separator{color:var(--text-disabled)}.user-avatar{border-radius:var(--radius-full);background:var(--primary-100);width:32px;height:32px;color:var(--primary-700);font-size:var(--text-xs);font-weight:var(--font-semibold);justify-content:center;align-items:center;display:flex}.user-dropdown-name{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.sidebar-section-label{font-size:var(--text-2xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.1em;color:var(--text-disabled);text-align:left}.page-header-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-primary);margin:0;line-height:1.2}.page-header-back{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-1);text-decoration:none;display:inline-flex}.page-header-back:hover{color:var(--primary-500)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--easing-out);white-space:nowrap;border:1px solid #0000;line-height:1.5;text-decoration:none;display:inline-flex}.btn-primary:hover{background:var(--primary-600)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-danger{background:var(--danger-500);color:#fff;border-color:var(--danger-500)}.btn-danger:hover{background:var(--danger-700)}.badge{align-items:center;gap:var(--space-1);padding:2px var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-full);line-height:1.5;display:inline-flex}.badge-success{background:var(--success-50);color:var(--success-700)}.badge-warning{background:var(--warning-50);color:var(--warning-700)}.badge-danger{background:var(--danger-50);color:var(--danger-700)}.badge-info{background:var(--info-50);color:var(--info-700)}.stat-cards{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.stat-card{gap:var(--space-1);padding:var(--space-5);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--easing-out);flex-direction:column;text-decoration:none;display:flex}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.stat-card__label{font-size:var(--text-sm);color:var(--text-secondary)}.stat-card__value{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text-primary)}.filter-bar-clear{right:var(--space-2);cursor:pointer;color:var(--text-disabled);padding:var(--space-1);background:0 0;border:none;position:absolute;top:50%;transform:translateY(-50%)}.filter-bar-action{border-radius:var(--radius-md);border:1px solid var(--surface-border);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);background:0 0;justify-content:center;align-items:center;display:inline-flex}.filter-bar-action:hover{background:var(--surface-inset)}.filter-bar-clear-all{font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;background:0 0;border:none}.filter-chip{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);border:1px solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface-raised);color:var(--text-secondary);cursor:pointer;display:inline-flex}.filter-chip:hover,.filter-chip.active{border-color:var(--primary-500);color:var(--primary-500)}.filter-chip-count{border-radius:var(--radius-full);background:var(--primary-500);color:#fff;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;display:inline-flex}.filter-chip-wrap{align-items:center;gap:var(--space-2);display:flex}.filter-chip-label{font-size:var(--text-xs);color:var(--text-secondary)}.filter-dropdown-header{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);justify-content:space-between;align-items:center;display:flex}.filter-dropdown-clear{font-size:var(--text-xs);color:var(--primary-500);cursor:pointer;background:0 0;border:none}.filter-dropdown-item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);cursor:pointer;display:flex}.filter-dropdown-item input[type=radio]{accent-color:var(--primary-500)}.filter-clear-btn{color:var(--text-disabled);cursor:pointer;font-size:var(--text-lg);background:0 0;border:none}.filter-input-date,.filter-input-datetime,.filter-input-time,.filter-input-text,.filter-input-number{padding:var(--space-1) var(--space-2);border:1px solid var(--surface-border);border-radius:var(--radius-md);font-size:var(--text-xs);background:var(--surface-base)}.table-wrapper{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden}.table-wrapper table{border-collapse:collapse;width:100%}.table-wrapper th{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.table-wrapper td,.table-wrapper th{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border)}.table-wrapper tbody tr:hover{background:var(--surface-inset)}.table-sort-btn{align-items:center;gap:var(--space-1);color:inherit;text-decoration:none;display:flex}.table-sort-btn:hover{color:var(--primary-500)}.table-sort-btn.active{color:var(--primary-500);font-weight:var(--font-medium)}.list-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--surface-border);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.list-footer-left{align-items:center;gap:var(--space-3);display:flex}.btn-danger-outline{background:var(--surface-raised);color:var(--danger-500);border:1px solid var(--danger-500)}.btn-danger-outline:hover{background:var(--danger-50)}[data-theme=dark] .btn-danger-outline{border-color:var(--danger-700)}[data-theme=dark] .btn-danger-outline:hover{background:#f871711a}.form-input,.form-select{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--surface-border);border-radius:var(--radius-md);background:var(--surface-raised);font-size:var(--text-sm);color:var(--text-primary);transition:all var(--duration-fast);outline:none}.form-input:focus,.form-select:focus{border-color:var(--primary-500);box-shadow:var(--shadow-focus)}.form-input[readonly]{background:var(--surface-inset);color:var(--text-secondary);cursor:not-allowed}.required-star{color:var(--danger-500);margin-left:2px}.field-errors{margin-top:var(--space-1)}.field-errors li{font-size:var(--text-xs);color:var(--danger-500)}.field-help{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1)}.has-error .form-input,.has-error .form-select{border-color:var(--danger-500)}.toast{border-radius:var(--radius-lg)}.toast-success{border-left:4px solid var(--success-500)}.toast-error{border-left:4px solid var(--danger-500)}.toast-warning{border-left:4px solid var(--warning-500)}.toast-info{border-left:4px solid var(--info-500)}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.space-x-2>*+*{margin-left:var(--space-2)}.space-y-2>*+*{margin-top:var(--space-2)}.space-y-3>*+*{margin-top:var(--space-3)}.space-y-6>*+*{margin-top:var(--space-6)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.ml-2{margin-left:var(--space-2)}.ml-auto{margin-left:auto}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-3{padding-left:var(--space-3);padding-right:var(--space-3)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}.w-full{width:100%}.w-3{width:var(--space-3)}.w-4{width:1rem}.w-5{width:1.25rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-32{width:8rem}.w-48{width:12rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.min-w-0{min-width:0}.h-3{height:var(--space-3)}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-32{height:8rem}.min-h-200px{min-height:200px}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.inline{display:inline}.inline-flex{display:inline-flex}.inline-block{display:inline-block}.block{display:block}.hidden{display:none}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.inset-0{inset:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-4{top:var(--space-4)}.bottom-0{bottom:0}.z-10{z-index:10}.z-50{z-index:50}.pointer-events-none{pointer-events:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.object-cover{object-fit:cover}.select-none{-webkit-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.font-sans{font-family:var(--font-body)}.font-mono{font-family:var(--font-mono)}.font-display{font-family:var(--font-display)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-secondary{color:var(--text-secondary)}.text-primary-color{color:var(--primary-500)}.mono{font-family:var(--font-mono)}.rounded{border-radius:var(--radius-sm)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:calc(var(--radius-lg) + 4px)}.rounded-full{border-radius:var(--radius-full)}.bg-white{background:var(--surface-raised)}.bg-red-50{background:var(--danger-50)}.bg-green-50{background:var(--success-50)}.bg-yellow-50{background:var(--warning-50)}.bg-blue-50{background:var(--info-50)}.bg-green-100{background:#dcfce7}.bg-yellow-100{background:#fef9c3}.bg-red-100{background:#fee2e2}.bg-gray-100{background:var(--surface-inset)}.text-red-700{color:var(--danger-700)}.text-green-700{color:#15803d}.text-green-800{color:#166534}.text-yellow-700{color:#b45309}.text-yellow-800{color:#92400e}.text-blue-700{color:var(--info-700)}.text-gray-400{color:var(--text-disabled)}.text-gray-500{color:var(--text-secondary)}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:var(--text-primary)}.border{border:1px solid var(--surface-border)}.border-red-200{border-color:#fecaca}.border-green-200{border-color:#bbf7d0}.border-yellow-200{border-color:#fde68a}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:var(--surface-border)}.border-gray-300{border-color:#d1d5db}[data-theme=dark] .border-red-200{border-color:var(--danger-500)}[data-theme=dark] .border-green-200{border-color:var(--success-500)}[data-theme=dark] .border-yellow-200{border-color:var(--warning-500)}[data-theme=dark] .border-blue-200{border-color:var(--info-500)}[data-theme=dark] .border-gray-300{border-color:var(--surface-border)}[data-theme=dark] .text-green-700,[data-theme=dark] .text-green-800{color:var(--success-700)}[data-theme=dark] .text-yellow-700,[data-theme=dark] .text-yellow-800{color:var(--warning-700)}[data-theme=dark] .text-gray-600,[data-theme=dark] .text-gray-700{color:var(--text-secondary)}[data-theme=dark] .bg-green-100{background:var(--success-50)}[data-theme=dark] .bg-yellow-100{background:var(--warning-50)}[data-theme=dark] .bg-red-100{background:var(--danger-50)}.divide-y>*+*{border-top:1px solid var(--surface-border)}.transition-colors{transition:color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast)}.transition-transform{transition:transform var(--duration-fast)}.transition-ease-out{transition-timing-function:var(--easing-out)}.duration-100{transition-duration:var(--duration-fast)}.duration-200{transition-duration:var(--duration-base)}.duration-300{transition-duration:var(--duration-slow)}.ease-out{transition-timing-function:var(--easing-out)}.ease-in{transition-timing-function:var(--easing-in)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.-rotate-90{transform:rotate(-90deg)}.translate-y-2{transform:translateY(var(--space-2))}.translate-x-1{transform:translateX(var(--space-1))}.translate-x-6{transform:translate(1.5rem)}:is(.hover\\:bg-gray-50:hover,[class*=hover\:bg-][class*=gray-50]:hover){background:var(--surface-inset)}[class*=hover\:text-primary-600]:hover{color:var(--primary-600)}.hover\\:text-primary-600:hover{color:var(--primary-600)}.hover\\:underline:hover{text-decoration:underline}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.login-page{background:var(--surface-base);min-height:100vh;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.login-card{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);width:100%;max-width:400px;padding:var(--space-8);box-shadow:var(--shadow-md)}.login-card__logo{text-align:center;margin-bottom:var(--space-6)}.login-card__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-primary);margin:0 0 var(--space-6);text-align:center}.login-card__error{background:var(--danger-50);border:1px solid var(--danger-500);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--danger-700)}.skeleton{background:var(--surface-inset);border-radius:var(--radius-sm);position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);animation:1.5s infinite skeleton-shimmer;position:absolute;inset:0}[data-theme=dark] .skeleton:after{background:linear-gradient(90deg,#0000,#ffffff0a,#0000)}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-text{height:14px;margin-bottom:8px}.skeleton-text:last-child{width:60%}.table--striped tbody tr:nth-child(2n){background:var(--surface-inset)}.table--bordered,.table--bordered td,.table--bordered th{border:1px solid var(--surface-border)}.table--compact th,.table--compact td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.table--relaxed th,.table--relaxed td{padding:var(--space-4) var(--space-5)}.form--compact .field-wrapper{gap:4px}.form--relaxed .field-wrapper{gap:16px}.sidebar--compact .nav-link{padding:var(--space-1) 0;font-size:var(--text-xs)}.sidebar--minimal .nav-link__label{display:none}.sidebar--minimal .nav-link{padding:var(--space-2);justify-content:center}.dashboard--2col .stat-cards{grid-template-columns:repeat(2,1fr)}.dashboard--3col .stat-cards{grid-template-columns:repeat(3,1fr)}.dashboard--4col .stat-cards{grid-template-columns:repeat(4,1fr)}.stat-card--outlined{border:2px solid var(--surface-border);background:0 0}.stat-card--flat{box-shadow:none;background:var(--surface-inset);border:none}.stat-card--small .stat-card__value{font-size:var(--text-xl)}.stat-card--large .stat-card__value{font-size:3.5rem}.topbar--minimal{border-bottom:none}.topbar--minimal:after{display:none}.topbar--transparent{background:0 0;border-bottom:none}.topbar--transparent:after{display:none}.content--narrow .admin-content__inner{max-width:800px}.content--wide .admin-content__inner{max-width:1600px}.content--full .admin-content__inner{max-width:none}.sidebar--right .admin-body{flex-direction:row-reverse}.sidebar--right .admin-sidebar{border-right:none;border-left:1px solid var(--surface-border)}@media (max-width:1024px){.admin-sidebar{width:var(--admin-sidebar-width,var(--sidebar-width));z-index:40;height:100vh;transition:transform var(--duration-slow) var(--easing-out);position:fixed;top:0;left:0;transform:translate(-100%)}.admin-sidebar.open{transform:translate(0)}.sidebar-backdrop{z-index:35;background:#14121080;position:fixed;inset:0}.admin-content__inner{padding:var(--space-5) var(--space-4)}.page-header__title{font-size:var(--text-xl)}}@media (max-width:768px){.page-header{gap:var(--space-3);flex-direction:column}.stat-cards{grid-template-columns:repeat(2,1fr)}.field-wrapper{grid-template-columns:1fr}.field-wrapper .field-wrapper__body{max-width:100%}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar__search-wrap{max-width:none}.table-wrapper{font-size:var(--text-xs)}.table-wrapper th,.table-wrapper td{padding:var(--space-2) var(--space-3)}.pagination{gap:var(--space-3);flex-direction:column}.modal{width:calc(100vw - 16px);max-height:90vh}}@media (max-width:480px){.admin-content__inner{padding:var(--space-4) var(--space-3)}.stat-cards{grid-template-columns:1fr}.login-card{padding:var(--space-5)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.dashboard-stat-card{border-radius:var(--radius-lg);color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--surface-border);flex-direction:column;gap:14px;padding:20px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.dashboard-stat-card:hover{box-shadow:var(--shadow-card-hover);border-color:#14b8a64d;transform:translateY(-4px)}.dashboard-stat-card .stat-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.dashboard-stat-card .stat-icon svg{flex-shrink:0;width:20px;height:20px;display:block}.dashboard-stat-card .stat-header{align-items:center;gap:10px;display:flex}.dashboard-stat-card .stat-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--text-tertiary)}.dashboard-stat-card .stat-count{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--text-primary);letter-spacing:-.03em;font-weight:700;line-height:1}.dashboard-stat-card .stat-subtitle{font-size:var(--text-xs);color:var(--text-tertiary)}.dashboard-stat-card .stat-trend{font-size:var(--text-2xs);font-weight:var(--font-semibold);border-radius:var(--radius-full);align-items:center;gap:4px;padding:3px 8px;display:inline-flex}.dashboard-stat-card .stat-trend.up{color:#16a34a;background:#22c55e1a}.dashboard-stat-card .stat-trend.down{color:#dc2626;background:#ef44441a}.dashboard-stat-card .stat-trend-period{font-size:var(--text-2xs);color:var(--text-tertiary);margin-left:4px}.dashboard-stat-card .stat-wave{opacity:.15;width:80px;height:30px;position:absolute;bottom:0;right:0}.stat-icon--teal{color:#14b8a6;background:#14b8a61f}.stat-icon--purple{color:#8b5cf6;background:#8b5cf61f}.stat-icon--blue{color:#3b82f6;background:#3b82f61f}.stat-icon--orange{color:#f97316;background:#f973161f}.stat-icon--green{color:#22c55e;background:#22c55e1f}.stat-icon--yellow{color:#eab308;background:#eab3081f}.stat-icon--pink{color:#ec4899;background:#ec48991f}.stat-icon--red{color:#ef4444;background:#ef44441f}.stat-icon--indigo{color:#6366f1;background:#6366f11f}.stat-icon--cyan{color:#06b6d4;background:#06b6d41f}.system-overview-card{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);flex-direction:column;gap:20px;padding:24px;display:flex}.system-overview-card .overview-header{align-items:center;gap:10px;display:flex}.system-overview-card .overview-header-icon{border-radius:var(--radius-md);background:var(--primary-50);justify-content:center;align-items:center;width:36px;height:36px;display:flex}.system-overview-card .overview-header-icon svg{width:18px;height:18px;color:var(--primary-600)}.system-overview-card .overview-title{font-size:var(--text-md);font-family:var(--font-display);color:var(--text-primary);font-weight:700}.system-overview-card .overview-body{align-items:center;gap:28px;display:flex}.system-overview-card .overview-chart{flex-shrink:0;width:160px;height:160px}.system-overview-card .overview-legend{flex-direction:column;flex:1;gap:10px;display:flex}.system-overview-card .overview-legend-item{justify-content:space-between;align-items:center;gap:10px;display:flex}.system-overview-card .overview-legend-label{font-size:var(--text-sm);color:var(--text-secondary);align-items:center;gap:8px;display:flex}.system-overview-card .overview-legend-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.system-overview-card .overview-legend-value{font-size:var(--text-sm);font-weight:var(--font-semibold);font-family:var(--font-mono);color:var(--text-primary)}.system-overview-card .overview-total{border-top:1px solid var(--surface-border);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);justify-content:space-between;align-items:center;padding-top:10px;display:flex}.quick-actions-grid{flex-direction:column;gap:4px;padding:8px;display:flex}.quick-action-item{border-radius:var(--radius-md);color:var(--text-primary);border:1px solid #0000;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;transition:all .15s;display:flex}.quick-action-item:hover{background:var(--primary-50);border-color:var(--primary-200)}[data-theme=dark] .quick-action-item:hover{background:#14b8a614;border-color:#2dd4bf33}.quick-action-item .action-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex;overflow:hidden}.quick-action-item .action-icon svg{flex-shrink:0;width:16px;height:16px;display:block}.quick-action-item .action-text{flex:1;min-width:0}.quick-action-item .action-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.quick-action-item .action-desc{font-size:var(--text-xs);color:var(--text-tertiary);white-space:nowrap;text-overflow:ellipsis;margin-top:1px;overflow:hidden}.quick-action-item .action-chevron{width:14px;height:14px;color:var(--text-tertiary);flex-shrink:0}.breadcrumb{align-items:center;gap:var(--space-2);font-size:var(--text-sm);margin-bottom:var(--space-4);display:flex}.breadcrumb-link{color:var(--text-secondary);transition:color var(--duration-fast)}.breadcrumb-link:hover{color:var(--primary-500)}.breadcrumb-sep{color:var(--text-disabled)}.breadcrumb-current{color:var(--text-primary);font-weight:var(--font-medium)}.page-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.page-header-left{gap:var(--space-1);flex-direction:column;display:flex}.page-header-right{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.page-header-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-primary);margin:0;font-weight:600;line-height:1.2}.page-header-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.filter-bar{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.filter-bar-search{flex:1;min-width:240px;position:relative}.filter-bar-search-icon{left:var(--space-3);width:18px;height:18px;color:var(--text-disabled);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.filter-bar-search-input{width:100%;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-10);border:1px solid var(--surface-border);border-radius:var(--radius-md);background:var(--surface-base);font-size:var(--text-sm);color:var(--text-primary);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);outline:none}.filter-bar-search-input::placeholder{color:var(--text-disabled)}.filter-bar-search-input:focus{border-color:var(--primary-500);box-shadow:var(--shadow-focus)}.filter-bar-clear{right:var(--space-2);cursor:pointer;color:var(--text-disabled);padding:var(--space-1);border-radius:var(--radius-sm);transition:all var(--duration-fast);background:0 0;border:none;position:absolute;top:50%;transform:translateY(-50%)}.filter-bar-clear:hover{color:var(--text-primary);background:var(--surface-inset)}.filter-bar-clear svg{width:16px;height:16px}.filter-bar-chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.filter-bar-right{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}.filter-bar-action{border-radius:var(--radius-md);border:1px solid var(--surface-border);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);transition:all var(--duration-fast);background:0 0;justify-content:center;align-items:center;display:inline-flex}.filter-bar-action:hover{background:var(--surface-inset);color:var(--text-primary)}.filter-bar-action svg{width:18px;height:18px}.filter-bar-clear-all{font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;transition:color var(--duration-fast);background:0 0;border:none}.filter-bar-clear-all:hover{color:var(--danger-500)}.filter-bar-divider{background:var(--surface-border);width:1px;height:24px}.filter-chip{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);border:1px solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface-raised);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);height:36px;display:inline-flex}.filter-chip:hover{border-color:var(--text-disabled);color:var(--text-primary)}.filter-chip.active{border-color:var(--primary-500);color:var(--primary-600);background:var(--primary-50)}.filter-chip svg{width:14px;height:14px;transition:transform var(--duration-fast)}.filter-chip-count{border-radius:var(--radius-full);background:var(--primary-500);color:#fff;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:10px;font-weight:600;display:inline-flex}.filter-chip-wrap{align-items:center;gap:var(--space-2);padding:0 var(--space-3);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);height:36px;transition:all var(--duration-fast);display:inline-flex}.filter-chip-wrap:hover{border-color:var(--text-disabled)}.filter-chip-wrap.filter-chip--active{background:var(--primary-50);border-color:var(--primary-200)}.filter-chip-label{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap}.filter-chip--active .filter-chip-label{color:var(--primary-600);font-weight:var(--font-medium)}.filter-input-date,.filter-input-datetime,.filter-input-time,.filter-input-text,.filter-input-number{height:34px;padding:0 var(--space-2);font-size:var(--text-sm);font-family:var(--font-body);color:var(--text-primary);cursor:pointer;background:0 0;border:none;outline:none}.filter-clear-btn{color:var(--text-disabled);cursor:pointer;transition:color var(--duration-fast);background:0 0;border:none;padding:0;font-size:18px;line-height:1}.filter-clear-btn:hover{color:var(--danger-500)}.filter-dropdown{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-lg);z-index:50;padding:var(--space-2) 0;position:absolute;top:calc(100% + 4px);left:0}.filter-dropdown-header{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-secondary);border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:center;display:flex}.filter-dropdown-clear{font-size:var(--text-xs);color:var(--primary-500);cursor:pointer;transition:color var(--duration-fast);background:0 0;border:none}.filter-dropdown-clear:hover{color:var(--primary-600)}.filter-dropdown-item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;transition:background var(--duration-fast);display:flex}.filter-dropdown-item:hover{background:var(--surface-inset)}.filter-dropdown-item input[type=radio]{width:16px;height:16px;accent-color:var(--primary-500);cursor:pointer}.filter-dropdown-item label{cursor:pointer;flex:1}.bulk-bar{padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;display:flex}.bulk-bar-left{align-items:center;gap:var(--space-3);display:flex}.bulk-bar-label{font-size:var(--text-sm);color:var(--text-primary);font-weight:500}.bulk-bar-select{height:36px;padding:0 var(--space-8) 0 var(--space-3);font-size:var(--text-sm);font-family:var(--font-body);color:var(--text-primary);background:var(--surface-base);border:1px solid var(--surface-border);border-radius:var(--radius-md);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:18px;outline:none;min-width:180px}.bulk-bar-select:focus{border-color:var(--primary-500);box-shadow:var(--shadow-focus)}.bulk-bar-right{align-items:center;gap:var(--space-2);display:flex}.table-container{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);position:relative}.table-container .overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--surface-border) transparent;overflow-x:auto}.table-container .data-table,.actions-dropdown{position:relative}.data-table{border-collapse:collapse;width:100%}.data-table thead{border-radius:var(--radius-lg) var(--radius-lg) 0 0}.data-table thead tr:first-child th:first-child{border-top-left-radius:var(--radius-lg)}.data-table thead tr:first-child th:last-child{border-top-right-radius:var(--radius-lg)}.data-table thead{background:var(--surface-base);border-bottom:1px solid var(--surface-border)}.data-table th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;-webkit-user-select:none;user-select:none;font-weight:600}.data-table th.col-checkbox{text-align:center;width:48px}.data-table th.col-actions{text-align:right;width:100px}.col-header-link{align-items:center;gap:var(--space-1);color:inherit;transition:color var(--duration-fast);display:inline-flex}.col-header-link:hover{color:var(--primary-500)}.col-header-link.active{color:var(--primary-600);font-weight:600}.sort-icon{width:14px;height:14px}.sort-icon--asc{transform:rotate(0)}.sort-icon--desc{transform:rotate(180deg)}.data-table tbody tr{border-bottom:1px solid var(--surface-border);transition:background var(--duration-fast)}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody tr:hover{background:var(--surface-inset)}.data-table td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text-primary);vertical-align:middle}.data-table td.col-checkbox{text-align:center}.data-table td.col-actions{text-align:right}.row-checkbox{border:1.5px solid var(--surface-border);border-radius:var(--radius-sm);cursor:pointer;appearance:none;background:var(--surface-raised);width:16px;height:16px;transition:all var(--duration-fast);position:relative}.row-checkbox:checked{background:var(--primary-500);border-color:var(--primary-500)}.row-checkbox:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.status-badge{border-radius:var(--radius-full);font-size:var(--text-xs);align-items:center;gap:4px;padding:4px 10px;font-weight:500;display:inline-flex}.status-badge--success{background:var(--success-50);color:var(--success-700)}.status-badge--success svg{color:var(--success-500)}.status-badge--muted{background:var(--surface-inset);color:var(--text-secondary)}.status-badge--muted svg{color:var(--text-disabled)}.actions-dropdown{display:inline-flex;position:relative}.actions-trigger{border-radius:var(--radius-md);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.actions-trigger:hover{background:var(--surface-inset);color:var(--text-primary)}.actions-trigger svg{width:16px;height:16px}.actions-menu{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);min-width:120px;box-shadow:var(--shadow-lg);z-index:9999;padding:var(--space-1) 0;transform-origin:100% 0;position:fixed;top:auto;right:auto}.actions-menu-item{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;text-align:left;transition:background var(--duration-fast);background:0 0;border:none;font-weight:500;text-decoration:none;display:flex}.actions-menu-item:hover{background:var(--surface-inset)}.actions-menu-item svg{width:16px;height:16px;color:var(--text-secondary);flex-shrink:0}.actions-menu-item--danger,.actions-menu-item--danger svg{color:var(--danger-500)}.actions-menu-item--danger:hover{background:var(--danger-50)}.empty-cell{text-align:center;padding:var(--space-12) var(--space-4)!important}.empty-state{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.empty-state-icon{width:48px;height:48px;color:var(--text-disabled);opacity:.5}.empty-state-text{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.text-muted{color:var(--text-disabled)}.table-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--surface-border);background:var(--surface-base);justify-content:flex-end;align-items:center;display:flex}.bulk-actions{align-items:center;gap:var(--space-2);display:flex}.bulk-actions-label{font-size:var(--text-sm);color:var(--text-secondary)}.pagination{align-items:center;gap:var(--space-4);display:flex}.pagination-info{font-size:var(--text-sm);color:var(--text-secondary)}.pagination-links{align-items:center;gap:var(--space-1);display:flex}.pagination-link{min-width:32px;height:32px;padding:0 var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;font-weight:500;text-decoration:none;display:inline-flex}.pagination-link:hover:not(.pagination-link--disabled):not(.pagination-link--active){background:var(--surface-inset);color:var(--text-primary)}.pagination-link--active{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}.pagination-link--disabled{opacity:.4;cursor:not-allowed}.pagination-ellipsis{padding:0 var(--space-2);color:var(--text-disabled);font-size:var(--text-sm)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast);white-space:nowrap;border:1px solid #0000;font-weight:500;line-height:1.5;text-decoration:none;display:inline-flex}.btn svg{width:16px;height:16px}.btn-primary{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}.btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}.btn-secondary{background:var(--surface-raised);color:var(--text-primary);border-color:var(--surface-border)}.btn-secondary:hover{background:var(--surface-inset)}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-inset);color:var(--text-primary)}.btn-outline-danger{background:var(--surface-raised);color:var(--danger-500);border-color:var(--danger-500)}.btn-outline-danger:hover{background:var(--danger-500);color:#fff}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.admin-topbar{height:var(--topbar-height);background:var(--surface-raised);border-bottom:1px solid var(--surface-border);padding:0 var(--content-padding);z-index:30;flex-shrink:0;align-items:center;display:flex;position:relative}.admin-topbar:after{display:none}.topbar-left{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.topbar-center{flex:1;justify-content:center;display:flex}.topbar-right{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.topbar-logo{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);white-space:nowrap;font-weight:600;text-decoration:none;display:flex}.topbar-logo-icon{background:var(--primary-500);border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.topbar-logo-icon svg{width:20px;height:20px}.topbar-search{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface-inset);border:1px solid var(--surface-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast);min-width:320px;display:flex}.topbar-search:hover{border-color:var(--primary-300)}.topbar-search svg{color:var(--text-disabled);flex-shrink:0}.topbar-search-placeholder{color:var(--text-disabled);font-size:var(--text-sm);flex:1}.topbar-search-shortcut{gap:4px;display:flex}.topbar-search-shortcut kbd{font-size:var(--text-2xs);font-family:var(--font-mono);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--text-secondary);justify-content:center;align-items:center;padding:2px 6px;display:inline-flex}.topbar-user{position:relative}.topbar-user-btn{align-items:center;gap:var(--space-2);padding:var(--space-1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;display:flex}.topbar-user-btn:hover{background:var(--surface-inset)}.user-avatar{border-radius:var(--radius-full);background:var(--primary-100);width:36px;height:36px;color:var(--primary-700);font-size:var(--text-sm);justify-content:center;align-items:center;font-weight:600;display:flex}.topbar-user-info{text-align:left;flex-direction:column;display:flex}.topbar-user-name{font-size:var(--text-sm);color:var(--text-primary);font-weight:500;line-height:1.2}.topbar-user-role{font-size:var(--text-2xs);color:var(--text-secondary);line-height:1.2}.user-dropdown{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-lg);z-index:50;padding:var(--space-1) 0;position:absolute;top:calc(100% + 4px);right:0}.user-dropdown-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border)}.user-dropdown-name{font-size:var(--text-sm);color:var(--text-primary);font-weight:500}.user-dropdown-email{font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px}.user-dropdown-item{text-align:left;width:100%;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;display:block}.user-dropdown-item:hover{background:var(--surface-inset);color:var(--text-primary)}.user-dropdown-item.danger{color:var(--danger-500)}.user-dropdown-item.danger:hover{background:var(--danger-50)}.collapse-toggle,.icon-btn{border-radius:var(--radius-md);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.collapse-toggle:hover,.icon-btn:hover{background:var(--surface-inset);color:var(--text-primary)}.collapse-toggle svg,.icon-btn svg{width:20px;height:20px}.admin-sidebar{width:var(--sidebar-width);background:var(--surface-raised);border-right:1px solid var(--surface-border);transition:width var(--duration-slow) var(--easing-out);z-index:20;text-align:left;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-nav{padding:var(--space-3);text-align:left;flex:1;overflow-y:auto}.sidebar-nav-list{text-align:left;margin:0;padding:0;list-style:none}.sidebar-nav-item{text-align:left;margin-bottom:2px}.sidebar-section{padding:var(--space-4) 0 var(--space-2);text-align:left}.sidebar-section-label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-disabled);text-align:left;font-weight:600}.sidebar-section-toggle{cursor:pointer;width:100%;color:inherit;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;margin:0;padding:0;display:flex}.sidebar-section-toggle:hover{color:var(--text-secondary)}.sidebar-section-toggle .sidebar-section-label{flex:1}.sidebar-section-chevron{color:var(--text-disabled);flex-shrink:0;transition:transform .2s}.sidebar-section-chevron.collapsed{transform:rotate(0)}.sidebar-section-chevron:not(.collapsed){transform:rotate(90deg)}.sidebar-section-items{text-align:left;margin:0;padding:0;list-style:none}.sidebar-bottom{border-top:1px solid var(--surface-border);padding:var(--space-3);text-align:left;flex-shrink:0}.nav-link{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--text-sm);color:var(--text-primary);border-radius:var(--radius-md);transition:all var(--duration-fast);cursor:pointer;text-align:left;background:0 0;border:none;width:100%;font-weight:500;line-height:1.5;text-decoration:none;display:flex}.nav-link svg,.nav-link .material-symbols-outlined{opacity:.6;flex-shrink:0;width:18px;height:18px;font-size:18px}.nav-link:hover{background:var(--surface-inset);color:var(--primary-600)}.nav-link:hover svg,.nav-link:hover .material-symbols-outlined{opacity:1}.nav-link.active{background:var(--primary-50);color:var(--primary-600);font-weight:600}.nav-link.active svg,.nav-link.active .material-symbols-outlined{opacity:1;color:var(--primary-500)}.nav-link.active:before{content:"";background:var(--primary-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;width:3px;position:absolute;top:6px;bottom:6px;left:0}.nav-link-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.nav-link--no-icon .nav-link-label{padding-left:0}.nav-link--no-icon{gap:0}.nav-link-badge{font-family:var(--font-mono);font-size:var(--text-2xs);background:var(--surface-inset);color:var(--text-secondary);border-radius:var(--radius-full);border:1px solid var(--surface-border);margin-left:auto;padding:1px 6px}.nav-tooltip{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);white-space:nowrap;box-shadow:var(--shadow-md);z-index:50;color:var(--text-primary);display:none;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.sidebar.collapsed .nav-tooltip{display:block}.admin-sidebar-overlay{z-index:35;background:#0006;display:none;position:fixed;inset:0}.admin-sidebar-overlay.open{display:block}.toggle-switch{border-radius:var(--radius-full);cursor:pointer;width:40px;height:22px;transition:background var(--duration-fast);background:var(--surface-border);border:none;align-items:center;padding:0;display:inline-flex;position:relative}.toggle-switch--on{background:var(--primary-500)}.toggle-switch__thumb{border-radius:var(--radius-full);width:18px;height:18px;transition:transform var(--duration-fast) var(--easing-out);box-shadow:var(--shadow-sm);background:#fff;position:absolute;top:2px;left:2px}.toggle-switch--on .toggle-switch__thumb{transform:translate(18px)}@media (max-width:1024px){.admin-sidebar{width:var(--admin-sidebar-width,var(--sidebar-width));z-index:40;height:100vh;transition:transform var(--duration-slow) var(--easing-out);position:fixed;top:0;left:0;transform:translate(-100%)}.admin-sidebar.open{transform:translate(0)}.admin-content__inner{padding:var(--space-5) var(--space-4)}.page-header-title{font-size:var(--text-xl)}}@media (max-width:768px){.page-header{gap:var(--space-3);flex-direction:column}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar-search{min-width:auto}.filter-bar-right{justify-content:flex-end;margin-left:0}.table-footer,.pagination{gap:var(--space-3);flex-direction:column}.topbar-center{display:none}}@media (max-width:480px){.admin-content__inner{padding:var(--space-4) var(--space-3)}.data-table th,.data-table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}}.command-palette-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;justify-content:center;align-items:flex-start;padding-top:15vh;display:flex;position:fixed;inset:0}.command-palette{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-xl);width:100%;max-width:560px;box-shadow:var(--shadow-xl);overflow:hidden}.command-palette-header{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border);display:flex}.command-palette-header svg{color:var(--text-disabled);flex-shrink:0}.command-palette-input{font-size:var(--text-base);color:var(--text-primary);font-family:var(--font-sans);background:0 0;border:none;outline:none;flex:1}.command-palette-input::placeholder{color:var(--text-disabled)}.command-palette-esc{font-size:var(--text-2xs);font-family:var(--font-mono);background:var(--surface-inset);border:1px solid var(--surface-border);border-radius:var(--radius-xs);color:var(--text-secondary);justify-content:center;align-items:center;padding:2px 6px;display:inline-flex}.command-palette-results{max-height:360px;padding:var(--space-2) 0;overflow-y:auto}.command-palette-result{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);color:var(--text-primary);transition:background var(--duration-fast);cursor:pointer;text-decoration:none;display:flex}.command-palette-result:hover,.command-palette-result--active{background:var(--surface-inset)}.command-palette-result-icon{border-radius:var(--radius-md);background:var(--surface-inset);width:32px;height:32px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.command-palette-result-text{flex-direction:column;flex:1;min-width:0;display:flex}.command-palette-result-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.command-palette-result-sublabel{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.command-palette-result-badge{font-size:var(--text-2xs);font-weight:var(--font-medium);border-radius:var(--radius-full);text-transform:capitalize;flex-shrink:0;padding:2px 8px}.badge-model{background:var(--primary-100);color:var(--primary-700)}.badge-field{background:var(--surface-inset);color:var(--text-secondary)}.command-palette-empty{padding:var(--space-8) var(--space-4);text-align:center;color:var(--text-secondary);font-size:var(--text-sm)}.command-palette-footer{align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);border-top:1px solid var(--surface-border);font-size:var(--text-2xs);color:var(--text-disabled);display:flex}.command-palette-footer kbd{font-family:var(--font-mono);background:var(--surface-inset);border:1px solid var(--surface-border);border-radius:var(--radius-xs);justify-content:center;align-items:center;margin-right:2px;padding:1px 4px;display:inline-flex}.inline-edit-row{background:var(--surface-inset)}.inline-edit-row td{border-bottom:1px solid var(--surface-border);padding:0!important}.inline-edit-container{padding:var(--space-4);animation:.15s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.inline-edit-form{gap:var(--space-3);flex-direction:column;display:flex}.inline-edit-fields{gap:var(--space-3);flex-wrap:wrap;display:flex}.inline-edit-fields .field-wrapper{flex:180px;min-width:150px}.inline-edit-fields .field-wrapper .field-label{font-size:var(--text-xs);margin-bottom:var(--space-1)}.inline-edit-fields .field-wrapper input,.inline-edit-fields .field-wrapper select,.inline-edit-fields .field-wrapper textarea{font-size:var(--text-sm);padding:var(--space-1) var(--space-2)}.inline-edit-actions{gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--surface-border);justify-content:flex-end;display:flex}.inline-edit-error{color:var(--color-danger-600);font-size:var(--text-sm);padding:var(--space-2)}.inline-formset{position:relative}.inline-formset table,.inline-formset tbody,.inline-formset tr{position:static!important}.inline-formset td{position:static!important;overflow:visible!important}.topbar-notifications{position:relative}.notification-badge{min-width:16px;height:16px;font-family:var(--font-mono);font-size:10px;font-weight:var(--font-bold);color:var(--text-inverse);background:var(--danger-500);border-radius:var(--radius-full);border:2px solid var(--surface-raised);box-shadow:var(--shadow-xs);justify-content:center;align-items:center;padding:0 4px;animation:2s ease-in-out infinite badge-pulse;display:flex;position:absolute;top:-4px;right:-4px}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.notification-dropdown{background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-lg);width:380px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg);z-index:50;animation:dropdown-enter var(--duration-base) var(--easing-out);position:absolute;top:calc(100% + 8px);right:0;overflow:hidden}.notification-dropdown-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border);background:var(--surface-inset);justify-content:space-between;align-items:center;display:flex}.notification-dropdown-header h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-normal);color:var(--text-primary);margin:0}.notification-list{max-height:400px;overflow-y:auto}.notification-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-border);color:inherit;transition:background var(--duration-fast);text-decoration:none;display:flex}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:var(--surface-inset)}.notification-item.unread{background:var(--primary-25)}.notification-item.unread:hover{background:var(--primary-50)}.notification-icon{border-radius:var(--radius-full);background:var(--surface-inset);width:28px;height:28px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.notification-icon .material-symbols-outlined{font-size:16px}.notification-content{flex:1;min-width:0}.notification-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:2px;line-height:1.3}.notification-body{font-size:var(--text-xs);color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.notification-time{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-disabled);margin-top:4px}.notification-unread-dot{background:var(--primary-500);border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.notification-empty,.notification-loading{padding:var(--space-6) var(--space-4);text-align:center;font-size:var(--text-sm);color:var(--text-disabled)}.notification-dropdown-footer{padding:var(--space-3) var(--space-4);border-top:1px solid var(--surface-border);background:var(--surface-inset)}.notification-dropdown-footer .btn{width:100%}}@layer components{.admin-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.admin-body{flex:1;min-height:0;display:flex;overflow:hidden}.admin-content{flex:1;min-width:0;overflow:hidden auto}.admin-content__inner{width:100%;max-width:1400px;padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 6);margin-inline:auto}@media (min-width:40rem){.admin-content__inner{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.admin-content__inner{padding-inline:calc(var(--spacing) * 8);padding-block:calc(var(--spacing) * 8)}}.btn{justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:inline-flex}.btn:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#10b98166}@supports (color:color-mix(in lab, red, red)){.btn:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-primary-500) 40%, transparent)}}.btn:focus-visible{--tw-outline-style:none;outline-style:none}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background-color:var(--color-primary-500);color:var(--color-white)}@media (hover:hover){.btn-primary:hover{background-color:var(--color-primary-600)}}.btn-primary:active{background-color:var(--color-primary-700)}.btn-secondary{background-color:var(--color-white);color:var(--color-slate-900);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200)}@media (hover:hover){.btn-secondary:hover{background-color:var(--color-slate-50)}}.btn-secondary:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800);color:var(--color-slate-100);--tw-ring-color:var(--color-slate-700)}@media (hover:hover){.btn-secondary:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-700)}}.btn-danger{background-color:var(--color-white);color:var(--color-red-600);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200)}@media (hover:hover){.btn-danger:hover{background-color:var(--color-red-600);color:var(--color-white);--tw-ring-color:var(--color-red-600)}}.btn-danger:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800);--tw-ring-color:var(--color-slate-700)}.btn-ghost{color:var(--color-slate-500)}@media (hover:hover){.btn-ghost:hover{background-color:var(--color-slate-100);color:var(--color-slate-900)}}.btn-ghost:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}@media (hover:hover){.btn-ghost:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800);color:var(--color-slate-100)}}.btn-sm{padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.btn-lg{padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 2.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.form-input,.form-select,.form-textarea,.input{height:calc(var(--spacing) * 10);border-radius:var(--radius-lg);background-color:var(--color-white);width:100%;padding-inline:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-slate-900);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);--tw-outline-style:none;outline-style:none}:is(.form-input,.form-select,.form-textarea,.input)::placeholder{color:var(--color-slate-400)}:is(.form-input,.form-select,.form-textarea,.input):focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-primary-500)}:is(.form-input,.form-select,.form-textarea,.input):where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);color:var(--color-slate-100);--tw-ring-color:var(--color-slate-700)}:is(.form-input,.form-select,.form-textarea,.input):where([data-theme=dark],[data-theme=dark] *)::placeholder{color:var(--color-slate-500)}.form-textarea{height:auto;min-height:calc(var(--spacing) * 20);padding-block:calc(var(--spacing) * 2.5);--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.field-label{align-items:center;gap:var(--spacing);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-slate-900);display:flex}.field-label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-100)}.field-help{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);color:var(--color-slate-500)}.field-help:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.card{border-radius:var(--radius-xl);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200)}.card:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-800)}.badge{align-items:center;gap:var(--spacing);border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);display:inline-flex}.badge-success{background-color:var(--color-emerald-50);color:var(--color-emerald-700)}.badge-success:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-emerald-950);color:var(--color-emerald-300)}.badge-warning{background-color:var(--color-amber-50);color:var(--color-amber-700)}.badge-warning:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-amber-950);color:var(--color-amber-300)}.badge-danger{background-color:var(--color-red-50);color:var(--color-red-700)}.badge-danger:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-red-950);color:var(--color-red-300)}.badge-info{background-color:var(--color-sky-50);color:var(--color-sky-700)}.badge-info:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-sky-950);color:var(--color-sky-300)}.badge-primary{background-color:var(--color-primary-50);color:var(--color-primary-700)}.badge-primary:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-emerald-950);color:var(--color-emerald-300)}.badge-neutral{background-color:var(--color-slate-100);color:var(--color-slate-600)}.badge-neutral:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800);color:var(--color-slate-300)}.nav-link{align-items:center;gap:calc(var(--spacing) * 3);border-radius:var(--radius-lg);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-slate-700);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}@media (hover:hover){.nav-link:hover{background-color:var(--color-slate-100);color:var(--color-slate-900)}}.nav-link:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-300)}@media (hover:hover){.nav-link:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800);color:var(--color-white)}}.nav-link.active{background-color:var(--color-slate-200);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-slate-900)}.nav-link.active:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-700);color:var(--color-white)}.nav-link.active .material-symbols-outlined,.nav-link.active svg{color:currentColor;opacity:1}.nav-link.active:before{background-color:var(--color-slate-400)}.nav-link.active:before:where(){background-color:var(--color-slate-500)}.nav-link--child{padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-slate-500)}.nav-link--child:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.nav-link--child:hover{background-color:var(--color-slate-100);color:var(--color-slate-900)}.nav-link--child:hover:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800);color:var(--color-white)}.nav-link--child.active{background-color:var(--color-slate-200);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-slate-900)}.nav-link--child.active:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-700);color:var(--color-white)}@media (min-width:1025px){.admin-sidebar.collapsed:not(.open){overflow:visible}.admin-sidebar.collapsed:not(.open) .sidebar-nav{padding:var(--space-3) var(--space-2);overflow:visible}.admin-sidebar.collapsed:not(.open) .sidebar-nav-item{position:relative}.admin-sidebar.collapsed:not(.open) .nav-link-label,.admin-sidebar.collapsed:not(.open) .nav-link-badge,.admin-sidebar.collapsed:not(.open) .sidebar-section-label,.admin-sidebar.collapsed:not(.open) .sidebar-sub-items{display:none}.admin-sidebar.collapsed:not(.open) .nav-link{justify-content:center}.admin-sidebar.collapsed:not(.open) .sidebar-section{padding:var(--space-1) 0}.admin-sidebar.collapsed:not(.open) .sidebar-section-toggle{display:none}.admin-sidebar.collapsed:not(.open) .nav-tooltip{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);white-space:nowrap;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--surface-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-out);z-index:60;align-items:center;display:flex;position:absolute;top:50%;left:calc(100% + 14px);transform:translateY(-50%)}.admin-sidebar.collapsed:not(.open) .sidebar-nav-item:hover>.nav-link>.nav-tooltip,.admin-sidebar.collapsed:not(.open) .sidebar-bottom .sidebar-nav-item:hover>.nav-link>.nav-tooltip{opacity:1}.admin-sidebar.collapsed:not(.open).sidebar--right .nav-tooltip{left:auto;right:calc(100% + 14px)}}.table-container{border-radius:var(--radius-xl);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);overflow:hidden}.table-container:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-800)}.table-wrapper{border-collapse:collapse;width:100%}.table-wrapper thead{background-color:var(--color-slate-50)}.table-wrapper thead:where([data-theme=dark],[data-theme=dark] *){background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.table-wrapper thead:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.table-wrapper th{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);text-align:left;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider);white-space:nowrap;color:var(--color-slate-500);text-transform:uppercase;-webkit-user-select:none;user-select:none}.table-wrapper th:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.table-wrapper tbody tr{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-slate-200);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.table-wrapper tbody tr:first-child{border-top-style:var(--tw-border-style);border-top-width:0}@media (hover:hover){.table-wrapper tbody tr:hover{background-color:var(--color-slate-50)}}.table-wrapper tbody tr:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}@media (hover:hover){.table-wrapper tbody tr:where([data-theme=dark],[data-theme=dark] *):hover{background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.table-wrapper tbody tr:where([data-theme=dark],[data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}}.table-wrapper td{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));white-space:nowrap;color:var(--color-slate-900)}.table-wrapper td:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-100)}.table-wrapper--compact th,.table-wrapper--compact td{padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.table-wrapper--relaxed th,.table-wrapper--relaxed td{padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 4)}.table-wrapper--striped tbody tr:nth-child(2n){background-color:var(--color-slate-50)}.table-wrapper--striped tbody tr:nth-child(2n):where([data-theme=dark],[data-theme=dark] *){background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.table-wrapper--striped tbody tr:nth-child(2n):where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.table-wrapper--bordered th,.table-wrapper--bordered td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-slate-200)}:is(.table-wrapper--bordered th,.table-wrapper--bordered td):where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}.sort-link{align-items:center;gap:var(--spacing);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:inline-flex}@media (hover:hover){.sort-link:hover{color:var(--color-slate-900)}.sort-link:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-white)}}.sort-link--active{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-slate-900)}.sort-link--active:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white)}.table-checkbox{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);cursor:pointer;accent-color:var(--color-emerald-600);border-radius:.25rem}.actions-trigger-btn{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);border-radius:var(--radius-lg);color:var(--color-slate-400);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));justify-content:center;align-items:center;display:inline-flex}@media (hover:hover){.actions-trigger-btn:hover{background-color:var(--color-slate-100);color:var(--color-slate-700)}.actions-trigger-btn:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800);color:var(--color-slate-200)}}.actions-menu-panel{width:calc(var(--spacing) * 44);border-radius:var(--radius-xl);background-color:var(--color-white);padding:var(--spacing);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200)}.actions-menu-panel:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-700)}.actions-menu-btn{align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-slate-700);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}@media (hover:hover){.actions-menu-btn:hover{background-color:var(--color-slate-100)}}.actions-menu-btn:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-200)}@media (hover:hover){.actions-menu-btn:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800)}}.actions-menu-btn--danger{color:var(--color-red-600)}.actions-menu-btn--danger:where([data-theme=dark],[data-theme=dark] *){color:var(--color-red-400)}.actions-menu-btn--danger:hover{background-color:var(--color-red-50)}.actions-menu-btn--danger:hover:where([data-theme=dark],[data-theme=dark] *){background-color:#46080966}@supports (color:color-mix(in lab, red, red)){.actions-menu-btn--danger:hover:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-red-950) 40%, transparent)}}.filter-chip{height:calc(var(--spacing) * 9);align-items:center;gap:calc(var(--spacing) * 1.5);border-radius:var(--radius-lg);background-color:var(--color-white);padding-inline:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-slate-500);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:inline-flex}@media (hover:hover){.filter-chip:hover{color:var(--color-slate-900)}}.filter-chip:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);color:var(--color-slate-400);--tw-ring-color:var(--color-slate-700)}@media (hover:hover){.filter-chip:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-white)}}.filter-chip--active{background-color:var(--color-slate-200);color:var(--color-slate-900);--tw-ring-color:var(--color-slate-300)}.filter-chip--active:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-700);color:var(--color-white);--tw-ring-color:var(--color-slate-600)}.filter-chip-count{height:calc(var(--spacing) * 5);min-width:calc(var(--spacing) * 5);background-color:var(--color-slate-900);padding-inline:var(--spacing);font-family:var(--font-mono);--tw-font-weight:var(--font-weight-semibold);font-size:11px;font-weight:var(--font-weight-semibold);color:var(--color-white);border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex}.filter-chip-count:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-white);color:var(--color-slate-900)}.filter-chip-wrap{align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);background-color:var(--color-slate-50);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}.filter-chip-wrap:where([data-theme=dark],[data-theme=dark] *){background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.filter-chip-wrap:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.filter-chip-wrap:where([data-theme=dark],[data-theme=dark] *){--tw-ring-color:var(--color-slate-700)}.filter-chip-wrap--active{background-color:var(--color-slate-100);--tw-ring-color:var(--color-slate-400)}.filter-chip-wrap--active:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800);--tw-ring-color:var(--color-slate-500)}.filter-chip-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-slate-500)}.filter-chip-label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.filter-chip-wrap--active .filter-chip-label{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-slate-900)}.filter-chip-wrap--active .filter-chip-label:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white)}.filter-input{height:calc(var(--spacing) * 8);border-radius:var(--radius-md);background-color:var(--color-white);padding-inline:calc(var(--spacing) * 2.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-slate-900);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);--tw-outline-style:none;outline-style:none}.filter-input::placeholder{color:var(--color-slate-400)}.filter-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-primary-500)}.filter-input:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);color:var(--color-slate-100);--tw-ring-color:var(--color-slate-700)}.filter-clear-btn{padding:calc(var(--spacing) * .5);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:1;color:var(--color-slate-400);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-radius:.25rem;line-height:1}@media (hover:hover){.filter-clear-btn:hover{color:var(--color-slate-700)}.filter-clear-btn:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-slate-200)}}.bulk-bar-select{height:calc(var(--spacing) * 9);cursor:pointer;border-radius:var(--radius-lg);background-color:var(--color-white);min-width:180px;padding-right:calc(var(--spacing) * 8);padding-left:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-slate-900);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);--tw-outline-style:none;outline-style:none}.bulk-bar-select:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-primary-500)}.bulk-bar-select:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);color:var(--color-slate-100);--tw-ring-color:var(--color-slate-700)}.pagination{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-slate-200);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);justify-content:space-between;align-items:center;display:flex}.pagination:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}.pagination__link{height:calc(var(--spacing) * 8);min-width:calc(var(--spacing) * 8);border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 2);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-slate-500);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));justify-content:center;align-items:center;display:inline-flex}@media (hover:hover){.pagination__link:hover{background-color:var(--color-slate-100);color:var(--color-slate-900)}}.pagination__link:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}@media (hover:hover){.pagination__link:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800);color:var(--color-white)}}.pagination__link--active{background-color:var(--color-primary-500);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-white)}.modal-backdrop{z-index:50;background-color:#02061899;position:fixed;inset:0}@supports (color:color-mix(in lab, red, red)){.modal-backdrop{background-color:color-mix(in oklab, var(--color-slate-950) 60%, transparent)}}.modal-backdrop{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.modal{z-index:51;--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);width:520px;max-width:calc(100vw - 2rem);max-height:85vh;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:var(--radius-xl);background-color:var(--color-white);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);flex-direction:column;display:flex;position:fixed;top:50%;left:50%}.modal:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-700)}.modal--sm{width:420px}.modal--lg{width:720px}.modal__header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-slate-200);padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 4);justify-content:space-between;align-items:center;display:flex}.modal__header:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}.modal__body{padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);flex:1;overflow-y:auto}.modal__footer{justify-content:flex-end;gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-slate-200);padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 4);display:flex}.modal__footer:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}.toast{pointer-events:auto;align-items:flex-start;gap:calc(var(--spacing) * 3);border-radius:var(--radius-xl);background-color:var(--color-white);width:100%;max-width:380px;padding:calc(var(--spacing) * 4);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);display:flex}.toast:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-700)}.fieldset{border-radius:var(--radius-xl);background-color:var(--color-white);padding:calc(var(--spacing) * 5);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200)}.fieldset:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-800)}.fieldset__title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider);color:var(--color-slate-500);text-transform:uppercase}.fieldset__title:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.empty-state{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 16);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.stat-card{border-radius:var(--radius-xl);background-color:var(--color-white);padding:calc(var(--spacing) * 5);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-slate-200);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:block}@media (hover:hover){.stat-card:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.stat-card:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900);--tw-ring-color:var(--color-slate-800)}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-20{top:calc(var(--spacing) * 20)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.bottom-0{bottom:0}.left-0{left:0}.left-3{left:calc(var(--spacing) * 3)}.isolate{isolation:isolate}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-px{margin-top:1px}.mr-1{margin-right:var(--spacing)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-4\.5{width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-\[34px\]{width:34px;height:34px}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-64{height:calc(var(--spacing) * 64)}.h-\[30px\]{height:30px}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[85vh\]{max-height:85vh}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-36{width:calc(var(--spacing) * 36)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-\[520px\]{width:520px}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-52{min-width:calc(var(--spacing) * 52)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-2{--tw-translate-y:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7{gap:calc(var(--spacing) * 7)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[var\(--color-gray-100\)\]>:not(:last-child)){border-color:var(--color-gray-100)}:where(.divide-slate-200>:not(:last-child)){border-color:var(--color-slate-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--color-gray-200\)\]{border-color:var(--color-gray-200)}.border-\[var\(--color-gray-300\)\]{border-color:var(--color-gray-300)}.border-\[var\(--danger-100\)\]{border-color:var(--danger-100)}.border-\[var\(--info-100\)\]{border-color:var(--info-100)}.border-\[var\(--success-100\)\]{border-color:var(--success-100)}.border-\[var\(--surface-border\)\]{border-color:var(--surface-border)}.border-\[var\(--warning-100\)\]{border-color:var(--warning-100)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.border-red-500{border-color:var(--color-red-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-200\/80{border-color:#e2e8f0cc}@supports (color:color-mix(in lab, red, red)){.border-slate-200\/80{border-color:color-mix(in oklab, var(--color-slate-200) 80%, transparent)}}.border-slate-300{border-color:var(--color-slate-300)}.border-slate-500{border-color:var(--color-slate-500)}.border-slate-900{border-color:var(--color-slate-900)}.border-transparent{border-color:#0000}.bg-\[var\(--color-gray-50\)\]{background-color:var(--color-gray-50)}.bg-\[var\(--color-primary-50\)\]{background-color:var(--color-primary-50)}.bg-\[var\(--color-primary-600\)\]{background-color:var(--color-primary-600)}.bg-\[var\(--danger-50\)\]{background-color:var(--danger-50)}.bg-\[var\(--info-50\)\]{background-color:var(--info-50)}.bg-\[var\(--primary-500\)\]{background-color:var(--primary-500)}.bg-\[var\(--success-50\)\]{background-color:var(--success-50)}.bg-\[var\(--surface-inset\)\]{background-color:var(--surface-inset)}.bg-\[var\(--surface-overlay\)\]{background-color:var(--surface-overlay)}.bg-\[var\(--warning-50\)\]{background-color:var(--warning-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.bg-cyan-500\/10{background-color:#00b7d71a}@supports (color:color-mix(in lab, red, red)){.bg-cyan-500\/10{background-color:color-mix(in oklab, var(--color-cyan-500) 10%, transparent)}}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-indigo-500\/10{background-color:#625fff1a}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/10{background-color:color-mix(in oklab, var(--color-indigo-500) 10%, transparent)}}.bg-orange-500\/10{background-color:#fe6e001a}@supports (color:color-mix(in lab, red, red)){.bg-orange-500\/10{background-color:color-mix(in oklab, var(--color-orange-500) 10%, transparent)}}.bg-pink-500\/10{background-color:#f6339a1a}@supports (color:color-mix(in lab, red, red)){.bg-pink-500\/10{background-color:color-mix(in oklab, var(--color-pink-500) 10%, transparent)}}.bg-primary-50{background-color:var(--color-primary-50)}.bg-primary-500{background-color:var(--color-primary-500)}.bg-purple-500\/10{background-color:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/10{background-color:color-mix(in oklab, var(--color-purple-500) 10%, transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-sky-50{background-color:var(--color-sky-50)}.bg-sky-500{background-color:var(--color-sky-500)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-50\/60{background-color:#f8fafc99}@supports (color:color-mix(in lab, red, red)){.bg-slate-50\/60{background-color:color-mix(in oklab, var(--color-slate-50) 60%, transparent)}}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-200{background-color:var(--color-slate-200)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950\/60{background-color:#02061899}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/60{background-color:color-mix(in oklab, var(--color-slate-950) 60%, transparent)}}.bg-teal-500\/10{background-color:#00baa71a}@supports (color:color-mix(in lab, red, red)){.bg-teal-500\/10{background-color:color-mix(in oklab, var(--color-teal-500) 10%, transparent)}}.bg-violet-500\/10{background-color:#8d54ff1a}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/10{background-color:color-mix(in oklab, var(--color-violet-500) 10%, transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/80{background-color:#fffc}@supports (color:color-mix(in lab, red, red)){.bg-white\/80{background-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.bg-white\/85{background-color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.bg-white\/85{background-color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-500\/10{background-color:#edb2001a}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/10{background-color:color-mix(in oklab, var(--color-yellow-500) 10%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-2\.5{padding-top:calc(var(--spacing) * 2.5)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pl-9{padding-left:calc(var(--spacing) * 9)}.pl-10{padding-left:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.text-\[18px\]{font-size:18px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.03em\]{--tw-tracking:-.03em;letter-spacing:-.03em}.tracking-\[0\.5em\]{--tw-tracking:.5em;letter-spacing:.5em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--color-danger\)\]{color:var(--color-danger)}.text-\[var\(--color-gray-400\)\]{color:var(--color-gray-400)}.text-\[var\(--color-gray-500\)\]{color:var(--color-gray-500)}.text-\[var\(--color-gray-600\)\]{color:var(--color-gray-600)}.text-\[var\(--color-gray-700\)\]{color:var(--color-gray-700)}.text-\[var\(--color-gray-900\)\]{color:var(--color-gray-900)}.text-\[var\(--color-info\)\]{color:var(--color-info)}.text-\[var\(--color-primary-600\)\]{color:var(--color-primary-600)}.text-\[var\(--color-primary-700\)\]{color:var(--color-primary-700)}.text-\[var\(--color-success\)\]{color:var(--color-success)}.text-\[var\(--color-warning\)\]{color:var(--color-warning)}.text-\[var\(--danger-500\)\]{color:var(--danger-500)}.text-\[var\(--info-500\)\]{color:var(--info-500)}.text-\[var\(--success-500\)\]{color:var(--success-500)}.text-\[var\(--text-primary\)\]{color:var(--text-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-\[var\(--warning-500\)\]{color:var(--warning-500)}.text-amber-600{color:var(--color-amber-600)}.text-amber-800{color:var(--color-amber-800)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-cyan-500{color:var(--color-cyan-500)}.text-emerald-500{color:var(--color-emerald-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-gray-600{color:var(--color-gray-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-indigo-500{color:var(--color-indigo-500)}.text-orange-500{color:var(--color-orange-500)}.text-pink-500{color:var(--color-pink-500)}.text-primary-700{color:var(--color-primary-700)}.text-purple-500{color:var(--color-purple-500)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-sky-700{color:var(--color-sky-700)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-900{color:var(--color-slate-900)}.text-teal-500{color:var(--color-teal-500)}.text-teal-600{color:var(--color-teal-600)}.text-violet-500{color:var(--color-violet-500)}.text-white{color:var(--color-white)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-800{color:var(--color-yellow-800)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-\[var\(--text-disabled\)\]::placeholder{color:var(--text-disabled)}.opacity-0{opacity:0}.opacity-15{opacity:.15}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[var\(--primary-500\)\]{--tw-ring-color:var(--primary-500)}.ring-primary-200{--tw-ring-color:var(--color-primary-200)}.ring-red-500{--tw-ring-color:var(--color-red-500)}.ring-slate-200{--tw-ring-color:var(--color-slate-200)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.peer-checked\:bg-blue-600:is(:where(.peer):checked~*){background-color:var(--color-blue-600)}.peer-focus\:ring-4:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.peer-focus\:ring-blue-300:is(:where(.peer):focus~*){--tw-ring-color:var(--color-blue-300)}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.placeholder\:text-slate-400::placeholder{color:var(--color-slate-400)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing) * 5)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing) * 5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:border-gray-300:after{content:var(--tw-content);border-color:var(--color-gray-300)}.after\:bg-white:after{content:var(--tw-content);background-color:var(--color-white)}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:after\:border-white:is(:where(.peer):checked~*):after{content:var(--tw-content);border-color:var(--color-white)}@media (hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-\[var\(--primary-400\)\]:hover{border-color:var(--primary-400)}.hover\:border-emerald-200:hover{border-color:var(--color-emerald-200)}.hover\:border-emerald-500:hover{border-color:var(--color-emerald-500)}.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:border-teal-500\/30:hover{border-color:#00baa74d}@supports (color:color-mix(in lab, red, red)){.hover\:border-teal-500\/30:hover{border-color:color-mix(in oklab, var(--color-teal-500) 30%, transparent)}}.hover\:bg-\[var\(--color-gray-50\)\]:hover{background-color:var(--color-gray-50)}.hover\:bg-\[var\(--color-primary-500\)\]:hover{background-color:var(--color-primary-500)}.hover\:bg-\[var\(--primary-600\)\]:hover{background-color:var(--primary-600)}.hover\:bg-emerald-50:hover{background-color:var(--color-emerald-50)}.hover\:bg-emerald-500\/5:hover{background-color:#00bb7f0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-emerald-500\/5:hover{background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)}}.hover\:bg-primary-600:hover{background-color:var(--color-primary-600)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:text-\[var\(--color-gray-600\)\]:hover{color:var(--color-gray-600)}.hover\:text-\[var\(--color-gray-900\)\]:hover{color:var(--color-gray-900)}.hover\:text-\[var\(--color-primary-500\)\]:hover{color:var(--color-primary-500)}.hover\:text-\[var\(--color-primary-600\)\]:hover{color:var(--color-primary-600)}.hover\:text-\[var\(--color-primary-700\)\]:hover{color:var(--color-primary-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:text-red-700:hover{color:var(--color-red-700)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-slate-700:hover{color:var(--color-slate-700)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-\[var\(--color-primary-500\)\]:focus{border-color:var(--color-primary-500)}.focus\:border-\[var\(--primary-500\)\]:focus{border-color:var(--primary-500)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-\[var\(--color-primary-500\)\]:focus{--tw-ring-color:var(--color-primary-500)}.focus\:ring-\[var\(--primary-500\)\]:focus{--tw-ring-color:var(--primary-500)}.focus\:ring-primary-500:focus{--tw-ring-color:var(--color-primary-500)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-500\/40:focus-visible{--tw-ring-color:#10b98166}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primary-500\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-primary-500) 40%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.data-\[active\]\:bg-primary-50[data-active]{background-color:var(--color-primary-50)}.data-\[active\]\:text-primary-700[data-active]{color:var(--color-primary-700)}.data-\[collapsed\]\:w-16[data-collapsed]{width:calc(var(--spacing) * 16)}.data-\[on\]\:bg-primary-500[data-on]{background-color:var(--color-primary-500)}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:items-start{align-items:flex-start}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:ml-auto{margin-left:auto}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[1fr_340px\]{grid-template-columns:1fr 340px}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:96rem){.\32 xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}:where(.dark\:divide-slate-800:where([data-theme=dark],[data-theme=dark] *)>:not(:last-child)){border-color:var(--color-slate-800)}.dark\:border-slate-100:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-100)}.dark\:border-slate-400:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-400)}.dark\:border-slate-600:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-600)}.dark\:border-slate-700:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-700)}.dark\:border-slate-800:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-slate-800)}.dark\:border-white:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-white)}.dark\:bg-slate-700:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-700)}.dark\:bg-slate-700\/50:where([data-theme=dark],[data-theme=dark] *){background-color:#31415880}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-700\/50:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-700) 50%, transparent)}}.dark\:bg-slate-800:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-800)}.dark\:bg-slate-800\/60:where([data-theme=dark],[data-theme=dark] *){background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-800\/60:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.dark\:bg-slate-900:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-slate-900)}.dark\:bg-slate-900\/80:where([data-theme=dark],[data-theme=dark] *){background-color:#0f172bcc}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-900\/80:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-900) 80%, transparent)}}.dark\:bg-slate-900\/85:where([data-theme=dark],[data-theme=dark] *){background-color:#0f172bd9}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-900\/85:where([data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-slate-900) 85%, transparent)}}.dark\:bg-white:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-white)}.dark\:text-amber-400:where([data-theme=dark],[data-theme=dark] *){color:var(--color-amber-400)}.dark\:text-emerald-400:where([data-theme=dark],[data-theme=dark] *){color:var(--color-emerald-400)}.dark\:text-red-400:where([data-theme=dark],[data-theme=dark] *){color:var(--color-red-400)}.dark\:text-slate-100:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-100)}.dark\:text-slate-300:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-300)}.dark\:text-slate-400:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-400)}.dark\:text-slate-500:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-500)}.dark\:text-slate-600:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-600)}.dark\:text-slate-900:where([data-theme=dark],[data-theme=dark] *){color:var(--color-slate-900)}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){color:var(--color-white)}.dark\:ring-slate-700:where([data-theme=dark],[data-theme=dark] *){--tw-ring-color:var(--color-slate-700)}@media (hover:hover){.dark\:hover\:border-emerald-500\/20:where([data-theme=dark],[data-theme=dark] *):hover{border-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:border-emerald-500\/20:where([data-theme=dark],[data-theme=dark] *):hover{border-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.dark\:hover\:border-slate-400:where([data-theme=dark],[data-theme=dark] *):hover{border-color:var(--color-slate-400)}.dark\:hover\:border-teal-400\/20:where([data-theme=dark],[data-theme=dark] *):hover{border-color:#00d3bd33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:border-teal-400\/20:where([data-theme=dark],[data-theme=dark] *):hover{border-color:color-mix(in oklab, var(--color-teal-400) 20%, transparent)}}.dark\:hover\:bg-emerald-500\/5:where([data-theme=dark],[data-theme=dark] *):hover{background-color:#00bb7f0d}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-emerald-500\/5:where([data-theme=dark],[data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)}}.dark\:hover\:bg-slate-800:where([data-theme=dark],[data-theme=dark] *):hover{background-color:var(--color-slate-800)}.dark\:hover\:bg-slate-800\/50:where([data-theme=dark],[data-theme=dark] *):hover{background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-slate-800\/50:where([data-theme=dark],[data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.dark\:hover\:bg-slate-800\/60:where([data-theme=dark],[data-theme=dark] *):hover{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-slate-800\/60:where([data-theme=dark],[data-theme=dark] *):hover{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.dark\:hover\:text-slate-200:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-slate-200)}.dark\:hover\:text-slate-300:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-slate-300)}.dark\:hover\:text-white:where([data-theme=dark],[data-theme=dark] *):hover{color:var(--color-white)}}}:root{--topbar-height:64px;--sidebar-width:260px;--sidebar-collapsed-width:64px;--sidebar-collapsed:64px;--admin-sidebar-width:260px;--content-max-width:1400px;--content-padding:32px;--form-max-width:860px;--surface-base:var(--color-surface-base);--surface-raised:var(--color-surface-raised);--surface-overlay:var(--color-surface-overlay);--surface-border:var(--color-surface-border);--surface-inset:var(--color-surface-inset);--surface-hover:var(--color-surface-inset);--text-primary:#0f172a;--text-secondary:#64748b;--text-tertiary:#94a3b8;--text-disabled:#94a3b8;--text-inverse:#fff;--mono-accent:#059669;--primary-25:#f0fdf9;--primary-50:var(--color-primary-50);--primary-100:var(--color-primary-100);--primary-200:var(--color-primary-200);--primary-300:var(--color-primary-300);--primary-400:var(--color-primary-400);--primary-500:var(--color-primary-500);--primary-600:var(--color-primary-600);--primary-700:var(--color-primary-700);--primary-800:var(--color-primary-800);--success-50:#f0fdf4;--success-100:#dcfce7;--success-500:#22c55e;--success-700:#15803d;--warning-50:#fffbeb;--warning-100:#fef3c7;--warning-500:#f59e0b;--warning-700:#b45309;--danger-50:#fef2f2;--danger-100:#fee2e2;--danger-500:#ef4444;--danger-700:#b91c1c;--error-50:#fef2f2;--error-100:#fee2e2;--error-200:#fecaca;--error-500:#ef4444;--info-50:#f0f9ff;--info-100:#dbeafe;--info-500:#3b82f6;--info-700:#1d4ed8;--color-primary-50:#eef2ff;--color-primary-500:#6366f1;--color-primary-600:#4f46e5;--color-primary-700:#4338ca;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-900:#111827;--color-success:#059669;--color-warning:#d97706;--color-danger:#dc2626;--color-info:#2563eb;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--font-display:"Inter", system-ui, -apple-system, sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Fira Code", monospace;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-md:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.25rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-xs:4px;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 1px 3px #00000014, 0 1px 2px #0000000a;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000a;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-card-hover:0 4px 12px #0000001a;--shadow-focus:0 0 0 3px #10b98133;--shadow-focus-error:0 0 0 3px #ef444433;--duration-fast:.15s;--duration-base:.2s;--duration-slow:.3s;--easing-out:cubic-bezier(.16, 1, .3, 1);--easing-in:cubic-bezier(.4, 0, 1, 1);--easing-spring:cubic-bezier(.34, 1.56, .64, 1);--admin-grain-opacity:0;--admin-accent-line-opacity:0}[data-theme=dark]{--surface-base:#0f172a;--surface-raised:#1e293b;--surface-overlay:#1e293b;--surface-border:#334155;--surface-inset:#1e293b;--surface-hover:#334155;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-tertiary:#64748b;--text-disabled:#64748b;--text-inverse:#0f172a;--mono-accent:#34d399;--primary-50:#022c22;--primary-100:#064e3b;--primary-200:#065f46;--primary-300:#047857;--primary-400:#059669;--primary-500:#10b981;--primary-600:#34d399;--primary-700:#6ee7b7;--primary-800:#a7f3d0;--success-50:#052e16;--warning-50:#451a03;--danger-50:#450a0a;--error-50:#450a0a;--info-50:#172554;--color-gray-50:#111827;--color-gray-100:#1f2937;--color-gray-200:#374151;--color-gray-300:#4b5563;--color-gray-400:#6b7280;--color-gray-500:#9ca3af;--color-gray-600:#d1d5db;--color-gray-700:#e5e7eb;--color-gray-900:#f9fafb;--shadow-focus:0 0 0 3px #10b9814d;--shadow-focus-error:0 0 0 3px #f871714d}[data-preset=midnight]{--surface-base:#0b0f19;--surface-raised:#151b2b;--surface-overlay:#1e2538;--surface-border:#2a3248;--surface-inset:#111726;--surface-hover:#1e2538;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-tertiary:#64748b;--text-disabled:#475569;--text-inverse:#0b0f19}[data-preset=minimal]{--radius-xs:0px;--surface-border:#e5e5e5;--surface-inset:#f5f5f5;--text-primary:#171717;--text-secondary:#737373;--text-disabled:#a3a3a3}[data-preset=midnight]{--color-surface-base:#0b0f19;--color-surface-raised:#151b2b;--color-surface-overlay:#1e2538;--color-surface-border:#2a3248;--color-surface-inset:#111726}[data-preset=minimal]{--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--radius-xl:0px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}} diff --git a/fastapi_admin_kit/static/css/style.css b/fastapi_admin_kit/static/css/style.css new file mode 100644 index 0000000..d4d9aa6 --- /dev/null +++ b/fastapi_admin_kit/static/css/style.css @@ -0,0 +1,560 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + FastAPI Admin Kit — Tailwind v4 source (SINGLE FILE) + Edit this file, then run: npm run build:css + Output: fastapi_admin_kit/static/css/dist/tailwind.css (committed, shipped in wheel) + Do NOT hand-edit dist/tailwind.css. + ═══════════════════════════════════════════════════════════════════════════ */ + +/* Layer order FIRST (valid: @layer statements may precede @imports): + theme < preflight(base) < legacy-bridge < components < utilities. + Legacy bridge sits ABOVE preflight so the legacy standalone stylesheet + behaves exactly as originally authored (preflight's universal + margin/padding/border reset must not defeat it), but BELOW components + and utilities so ported modern styles + template utilities always win. */ +@layer theme, base, legacy-bridge, components, utilities; + +@import "tailwindcss"; +@import "./admin.css" layer(legacy-bridge); + +/* Dark mode follows the existing admin toggle (), + not prefers-color-scheme, so the localStorage/Alpine toggle keeps working. */ +@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); + +/* Explicit content sources (v4 auto-detects, but be safe for packaged layout). */ +@source "../../templates/**/*.html"; +@source "../js/**/*.js"; + +@theme { + --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + --font-display: "Inter", system-ui, -apple-system, sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, "Fira Code", monospace; + + /* ── Primary — emerald (brand continuity from legacy tokens.css) ── */ + --color-primary-50: #ecfdf5; + --color-primary-100: #d1fae5; + --color-primary-200: #a7f3d0; + --color-primary-300: #6ee7b7; + --color-primary-400: #34d399; + --color-primary-500: #10b981; + --color-primary-600: #059669; + --color-primary-700: #047857; + --color-primary-800: #065f46; + --color-primary-900: #064e3b; + + /* ── Surfaces (maps legacy --surface-*) ── */ + --color-surface-base: #f8fafc; + --color-surface-raised: #ffffff; + --color-surface-overlay: #ffffff; + --color-surface-border: #e2e8f0; + --color-surface-inset: #f1f5f9; + + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; +} + +/* ── Runtime dims (overridable by ThemeConfig via theme_css) ── */ +:root { + --topbar-height: 64px; + --sidebar-width: 260px; + --sidebar-collapsed-width: 64px; + --sidebar-collapsed: 64px; + --admin-sidebar-width: 260px; + --content-max-width: 1400px; + --content-padding: 32px; + --form-max-width: 860px; +} + +/* ═══════════════════════════════════════════════════════════════════════════ + Legacy variable bridge (DEPRECATED — delete with admin.css import above) + Maps every var(--*) still referenced by admin.css / templates to the new + theme. Light aliases reference @theme vars (single source of truth). + Also defines ~20 vars templates used but which were NEVER defined + (previously silently broken declarations). + ═══════════════════════════════════════════════════════════════════════════ */ +:root { + /* Surfaces / text */ + --surface-base: var(--color-surface-base); + --surface-raised: var(--color-surface-raised); + --surface-overlay: var(--color-surface-overlay); + --surface-border: var(--color-surface-border); + --surface-inset: var(--color-surface-inset); + --surface-hover: var(--color-surface-inset); + --text-primary: #0f172a; + --text-secondary: #64748b; + --text-tertiary: #94a3b8; + --text-disabled: #94a3b8; + --text-inverse: #ffffff; + --mono-accent: #059669; + + /* Primary ramp (+ previously-missing 25) */ + --primary-25: #f0fdf9; + --primary-50: var(--color-primary-50); + --primary-100: var(--color-primary-100); + --primary-200: var(--color-primary-200); + --primary-300: var(--color-primary-300); + --primary-400: var(--color-primary-400); + --primary-500: var(--color-primary-500); + --primary-600: var(--color-primary-600); + --primary-700: var(--color-primary-700); + --primary-800: var(--color-primary-800); + + /* Semantic ramps */ + --success-50: #f0fdf4; --success-100: #dcfce7; + --success-500: #22c55e; --success-700: #15803d; + --warning-50: #fffbeb; --warning-100: #fef3c7; + --warning-500: #f59e0b; --warning-700: #b45309; + --danger-50: #fef2f2; --danger-100: #fee2e2; + --danger-500: #ef4444; --danger-700: #b91c1c; + --error-50: #fef2f2; --error-100: #fee2e2; --error-200: #fecaca; --error-500: #ef4444; + --info-50: #f0f9ff; --info-100: #dbeafe; + --info-500: #3b82f6; --info-700: #1d4ed8; + + /* Legacy variables.css names (indigo/gray scale) */ + --color-primary-50: #eef2ff; --color-primary-500: #6366f1; + --color-primary-600: #4f46e5; --color-primary-700: #4338ca; + --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; + --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-900: #111827; + --color-success: #059669; --color-warning: #d97706; + --color-danger: #dc2626; --color-info: #2563eb; + --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; + --color-danger-600: #dc2626; --color-danger-700: #b91c1c; + + /* Typography (literal stacks — must NOT self-reference @theme names) */ + --font-display: "Inter", system-ui, -apple-system, sans-serif; + --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, "Fira Code", monospace; + --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; + --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; + --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; + --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; + + /* Spacing (4px base) */ + --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; + --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; + --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; + + /* Radius / shadow / motion */ + --radius-xs: 4px; + --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.1); + --shadow-focus: 0 0 0 3px rgb(16 185 129 / 0.2); + --shadow-focus-error: 0 0 0 3px rgb(239 68 68 / 0.2); + --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; + --easing-out: cubic-bezier(0.16, 1, 0.3, 1); + --easing-in: cubic-bezier(0.4, 0, 1, 1); + --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + + /* Legacy admin knobs: grain + accent line default OFF (clean modern look) */ + --admin-grain-opacity: 0; + --admin-accent-line-opacity: 0; +} + +[data-theme="dark"] { + --surface-base: #0f172a; --surface-raised: #1e293b; --surface-overlay: #1e293b; + --surface-border: #334155; --surface-inset: #1e293b; --surface-hover: #334155; + --text-primary: #f1f5f9; --text-secondary: #94a3b8; + --text-tertiary: #64748b; --text-disabled: #64748b; --text-inverse: #0f172a; + --mono-accent: #34d399; + --primary-50: #022c22; --primary-100: #064e3b; --primary-200: #065f46; + --primary-300: #047857; --primary-400: #059669; --primary-500: #10b981; + --primary-600: #34d399; --primary-700: #6ee7b7; --primary-800: #a7f3d0; + --success-50: #052e16; --warning-50: #451a03; + --danger-50: #450a0a; --error-50: #450a0a; --info-50: #172554; + --color-gray-50: #111827; --color-gray-100: #1f2937; --color-gray-200: #374151; + --color-gray-300: #4b5563; --color-gray-400: #6b7280; --color-gray-500: #9ca3af; + --color-gray-600: #d1d5db; --color-gray-700: #e5e7eb; --color-gray-900: #f9fafb; + --shadow-focus: 0 0 0 3px rgb(16 185 129 / 0.3); + --shadow-focus-error: 0 0 0 3px rgb(248 113 113 / 0.3); +} + +[data-preset="midnight"] { + --surface-base: #0b0f19; --surface-raised: #151b2b; --surface-overlay: #1e2538; + --surface-border: #2a3248; --surface-inset: #111726; --surface-hover: #1e2538; + --text-primary: #e2e8f0; --text-secondary: #94a3b8; + --text-tertiary: #64748b; --text-disabled: #475569; --text-inverse: #0b0f19; +} +[data-preset="minimal"] { + --radius-xs: 0px; --surface-border: #e5e5e5; --surface-inset: #f5f5f5; + --text-primary: #171717; --text-secondary: #737373; --text-disabled: #a3a3a3; +} + +/* ── Curated presets (clean break: only midnight + minimal survive alongside default) ── */ +[data-preset="midnight"] { + --color-surface-base: #0b0f19; + --color-surface-raised: #151b2b; + --color-surface-overlay: #1e2538; + --color-surface-border: #2a3248; + --color-surface-inset: #111726; +} +[data-preset="minimal"] { + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; +} + +/* ═══════════════════════════════════════════════════════════════════════════ + Base layer — Alpine/htmx necessities + upgraded defaults + ═══════════════════════════════════════════════════════════════════════════ */ +@layer base { + [x-cloak] { + display: none !important; + } + + body { + @apply bg-surface-base font-sans text-slate-900 antialiased; + } + [data-theme="dark"] body { + @apply bg-slate-950 text-slate-100; + } + + ::selection { + @apply bg-primary-200 text-slate-900; + } + + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + ::-webkit-scrollbar-track { + background: transparent; + } + ::-webkit-scrollbar-thumb { + @apply rounded-full bg-slate-300 dark:bg-slate-700; + } + + /* htmx loading bar hook (markup lives in base.html) */ + #loading-bar.htmx-request { + @apply fixed inset-x-0 top-0 z-[200] h-0.5 bg-primary-500; + } +} + +/* ═══════════════════════════════════════════════════════════════════════════ + Components — only heavily-reused building blocks. + Everything else = utilities directly in templates. + ═══════════════════════════════════════════════════════════════════════════ */ +@layer components { + /* ── Shell ── */ + .admin-shell { + @apply flex h-screen flex-col overflow-hidden; + } + .admin-body { + @apply flex min-h-0 flex-1 overflow-hidden; + } + .admin-content { + @apply min-w-0 flex-1 overflow-x-hidden overflow-y-auto; + } + .admin-content__inner { + @apply mx-auto w-full max-w-[1400px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8; + } + + /* ── Buttons ── */ + .btn { + @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap transition focus-visible:ring-2 focus-visible:ring-primary-500/40 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50; + } + .btn-primary { + @apply bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700; + } + .btn-secondary { + @apply bg-white text-slate-900 ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-700 dark:hover:bg-slate-700; + } + .btn-danger { + @apply bg-white text-red-600 ring-1 ring-slate-200 hover:bg-red-600 hover:text-white hover:ring-red-600 dark:bg-slate-800 dark:ring-slate-700; + } + .btn-ghost { + @apply text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100; + } + .btn-sm { + @apply px-2.5 py-1.5 text-xs; + } + .btn-lg { + @apply px-5 py-2.5 text-base; + } + + /* ── Inputs ── */ + .form-input, + .form-select, + .form-textarea, + .input { + @apply h-10 w-full rounded-lg bg-white px-3 text-sm text-slate-900 ring-1 ring-slate-200 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-primary-500 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700 dark:placeholder:text-slate-500; + } + .form-textarea { + @apply h-auto min-h-20 py-2.5 leading-relaxed; + } + .field-label { + @apply flex items-center gap-1 text-sm font-medium text-slate-900 dark:text-slate-100; + } + .field-help { + @apply text-xs leading-relaxed text-slate-500 dark:text-slate-400; + } + + /* ── Cards / badges ── */ + .card { + @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-800; + } + .badge { + @apply inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium; + } + .badge-success { + @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300; + } + .badge-warning { + @apply bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300; + } + .badge-danger { + @apply bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300; + } + .badge-info { + @apply bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300; + } + .badge-primary { + @apply bg-primary-50 text-primary-700 dark:bg-emerald-950 dark:text-emerald-300; + } + .badge-neutral { + @apply bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300; + } + + /* ── Nav (sidebar keeps .nav-link hook for tests/overrides) ── */ + .nav-link { + @apply flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white; + } + .nav-link.active { + @apply bg-slate-200 font-semibold text-slate-900 dark:bg-slate-700 dark:text-white; + } + /* Neutralize legacy bridge greens (higher-specificity selectors live there) */ + .nav-link.active .material-symbols-outlined, + .nav-link.active svg { + @apply text-current opacity-100; + } + .nav-link.active::before { + @apply bg-slate-400 dark:bg-slate-500; + } + .nav-link--child { + @apply py-1.5 text-xs font-normal text-slate-500 dark:text-slate-400; + } + .nav-link--child:hover { + @apply bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white; + } + .nav-link--child.active { + @apply bg-slate-200 font-medium text-slate-900 dark:bg-slate-700 dark:text-white; + } + + /* ── Collapsed icon rail (desktop only; mobile drawer .open is excluded) ── + Rail shows icons only; the item name pops over on hover. Expanded mode + and the mobile drawer are untouched. */ + @media (min-width: 1025px) { + .admin-sidebar.collapsed:not(.open) { + overflow: visible; + } + .admin-sidebar.collapsed:not(.open) .sidebar-nav { + overflow: visible; + padding: var(--space-3) var(--space-2); + } + .admin-sidebar.collapsed:not(.open) .sidebar-nav-item { + position: relative; + } + .admin-sidebar.collapsed:not(.open) .nav-link-label, + .admin-sidebar.collapsed:not(.open) .nav-link-badge, + .admin-sidebar.collapsed:not(.open) .sidebar-section-label, + .admin-sidebar.collapsed:not(.open) .sidebar-sub-items { + display: none; + } + .admin-sidebar.collapsed:not(.open) .nav-link { + justify-content: center; + } + /* Group headers hidden in rail mode — groups themselves stay expanded + via `x-show="open || sidebarCollapsed"` in sidebar.html, so no + minimize/expand control is needed while collapsed. */ + .admin-sidebar.collapsed:not(.open) .sidebar-section { + padding: var(--space-1) 0; + } + .admin-sidebar.collapsed:not(.open) .sidebar-section-toggle { + display: none; + } + /* Hover popover — hidden until the icon is hovered */ + .admin-sidebar.collapsed:not(.open) .nav-tooltip { + display: flex; + align-items: center; + position: absolute; + left: calc(100% + 14px); + top: 50%; + transform: translateY(-50%); + padding: var(--space-1) var(--space-3); + font-size: var(--text-xs); + font-weight: var(--font-medium); + white-space: nowrap; + color: var(--text-primary); + background: var(--surface-raised); + border: 1px solid var(--surface-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + opacity: 0; + pointer-events: none; + transition: opacity var(--duration-fast) var(--easing-out); + z-index: 60; + } + .admin-sidebar.collapsed:not(.open) .sidebar-nav-item:hover > .nav-link > .nav-tooltip, + .admin-sidebar.collapsed:not(.open) .sidebar-bottom .sidebar-nav-item:hover > .nav-link > .nav-tooltip { + opacity: 1; + } + /* Right-positioned sidebar: pop over to the left */ + .admin-sidebar.collapsed:not(.open).sidebar--right .nav-tooltip { + left: auto; + right: calc(100% + 14px); + } + } + + /* ── Tables ── */ + .table-container { + @apply overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-800; + } + .table-wrapper { + @apply w-full border-collapse; + } + .table-wrapper thead { + @apply bg-slate-50 dark:bg-slate-800/60; + } + .table-wrapper th { + @apply px-4 py-3 text-left text-xs font-medium tracking-wider whitespace-nowrap text-slate-500 uppercase select-none dark:text-slate-400; + } + .table-wrapper tbody tr { + @apply border-t border-slate-200 transition first:border-t-0 hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/50; + } + .table-wrapper td { + @apply px-4 py-3 align-middle text-sm whitespace-nowrap text-slate-900 dark:text-slate-100; + } + .table-wrapper--compact th, + .table-wrapper--compact td { + @apply px-3 py-2 text-xs; + } + .table-wrapper--relaxed th, + .table-wrapper--relaxed td { + @apply px-5 py-4; + } + .table-wrapper--striped tbody tr:nth-child(even) { + @apply bg-slate-50 dark:bg-slate-800/40; + } + .table-wrapper--bordered th, + .table-wrapper--bordered td { + @apply border border-slate-200 dark:border-slate-800; + } + + /* ── List helpers: sort links, checkboxes, row actions ── */ + .sort-link { + @apply inline-flex items-center gap-1 transition hover:text-slate-900 dark:hover:text-white; + } + .sort-link--active { + @apply font-semibold text-slate-900 dark:text-white; + } + .table-checkbox { + @apply size-4 cursor-pointer rounded accent-emerald-600; + } + .actions-trigger-btn { + @apply inline-flex size-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200; + } + .actions-menu-panel { + @apply w-44 rounded-xl bg-white p-1 shadow-lg ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700; + } + .actions-menu-btn { + @apply flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium text-slate-700 transition hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800; + } + .actions-menu-btn--danger { + @apply text-red-600 dark:text-red-400; + } + .actions-menu-btn--danger:hover { + @apply bg-red-50 dark:bg-red-950/40; + } + + /* ── Filter bar ── */ + .filter-chip { + @apply inline-flex h-9 items-center gap-1.5 rounded-lg bg-white px-3 text-sm text-slate-500 ring-1 ring-slate-200 transition hover:text-slate-900 dark:bg-slate-900 dark:text-slate-400 dark:ring-slate-700 dark:hover:text-white; + } + .filter-chip--active { + @apply bg-slate-200 text-slate-900 ring-slate-300 dark:bg-slate-700 dark:text-white dark:ring-slate-600; + } + .filter-chip-count { + @apply inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-slate-900 px-1 font-mono text-[11px] font-semibold text-white dark:bg-white dark:text-slate-900; + } + .filter-chip-wrap { + @apply flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-1.5 ring-1 ring-slate-200 transition dark:bg-slate-800/60 dark:ring-slate-700; + } + .filter-chip-wrap--active { + @apply bg-slate-100 ring-slate-400 dark:bg-slate-800 dark:ring-slate-500; + } + .filter-chip-label { + @apply text-xs font-medium whitespace-nowrap text-slate-500 dark:text-slate-400; + } + .filter-chip-wrap--active .filter-chip-label { + @apply font-semibold text-slate-900 dark:text-white; + } + .filter-input { + @apply h-8 rounded-md bg-white px-2.5 text-sm text-slate-900 ring-1 ring-slate-200 outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-primary-500 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700; + } + .filter-clear-btn { + @apply rounded p-0.5 text-lg leading-none text-slate-400 transition hover:text-slate-700 dark:hover:text-slate-200; + } + + /* ── Bulk bar select ── */ + .bulk-bar-select { + @apply h-9 min-w-[180px] cursor-pointer rounded-lg bg-white pr-8 pl-3 text-sm text-slate-900 ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-primary-500 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700; + } + + /* ── Pagination ── */ + .pagination { + @apply flex items-center justify-between border-t border-slate-200 px-4 py-3 dark:border-slate-800; + } + .pagination__link { + @apply inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 font-mono text-xs text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white; + } + .pagination__link--active { + @apply bg-primary-500 font-medium text-white; + } + + /* ── Modal / toast ── */ + .modal-backdrop { + @apply fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm; + } + .modal { + @apply fixed top-1/2 left-1/2 z-[51] flex max-h-[85vh] w-[520px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700; + } + .modal--sm { + @apply w-[420px]; + } + .modal--lg { + @apply w-[720px]; + } + .modal__header { + @apply flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-800; + } + .modal__body { + @apply flex-1 overflow-y-auto px-6 py-5 text-sm leading-relaxed; + } + .modal__footer { + @apply flex justify-end gap-2 border-t border-slate-200 px-6 py-4 dark:border-slate-800; + } + .toast { + @apply pointer-events-auto flex w-full max-w-[380px] items-start gap-3 rounded-xl bg-white p-4 shadow-lg ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700; + } + + /* ── Misc (fieldset, empty state, stat cards) ── */ + .fieldset { + @apply rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-800; + } + .fieldset__title { + @apply text-xs font-medium tracking-wider text-slate-500 uppercase dark:text-slate-400; + } + .empty-state { + @apply flex flex-col items-center justify-center px-4 py-16 text-center; + } + .stat-card { + @apply block rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition hover:shadow-md dark:bg-slate-900 dark:ring-slate-800; + } +} diff --git a/fastapi_admin_kit/templates/admin/base_list.html b/fastapi_admin_kit/templates/admin/base_list.html index 3fea367..9a61593 100644 --- a/fastapi_admin_kit/templates/admin/base_list.html +++ b/fastapi_admin_kit/templates/admin/base_list.html @@ -1,4 +1,4 @@ -{# admin/base_list.html — block-based base for model list views. +{# admin/base_list.html — block-based base for model list views (Tailwind-first, no legacy classes). Extend this to customize individual sections of the list view. Available blocks: @@ -17,37 +17,37 @@ {% block title %}{{ registered.verbose_name_plural }} — {{ title | default("Admin") }}{% endblock %} {% block content %} -
+
{% block list_breadcrumb %} -