:root,
:root[data-theme="midnight"] {
    --color-background: 11 19 38;
    --color-surface: 11 19 38;
    --color-surface-dim: 11 19 38;
    --color-surface-container: 23 31 51;
    --color-surface-container-low: 19 27 46;
    --color-surface-container-lowest: 6 14 32;
    --color-surface-container-high: 34 42 61;
    --color-surface-container-highest: 45 52 73;
    --color-surface-bright: 49 57 77;
    --color-primary: 179 197 255;
    --color-primary-container: 0 81 206;
    --color-on-primary: 18 27 48;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 89 218 209;
    --color-secondary-fixed: 121 246 237;
    --color-on-secondary: 9 45 43;
    --color-tertiary: 183 200 225;
    --color-tertiary-fixed: 211 228 254;
    --color-error: 255 180 171;
    --color-on-error-container: 255 218 214;
    --color-on-error: 83 27 24;
    --color-on-surface: 218 226 253;
    --color-on-surface-variant: 195 198 214;
    --color-outline-variant: 67 70 84;
    --color-control-switch-off-bg: 45 52 73;
    --color-control-switch-off-border: 95 108 135;
    --color-control-switch-off-thumb: 218 226 253;
    --color-control-switch-on-bg: 89 218 209;
    --color-control-switch-on-border: 121 246 237;
    --color-control-switch-on-thumb: 9 45 43;
    --color-control-switch-focus: 89 218 209;
    --color-control-primary-bg: 0 81 206;
    --color-control-primary-hover: 19 95 222;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 0 81 206;
    --color-control-primary-disabled-text: 210 222 248;
    --color-control-primary-disabled-border: 66 118 212;
    color-scheme: dark;
}

:root[data-theme="daylight"] {
    --color-background: 244 247 252;
    --color-surface: 250 251 255;
    --color-surface-dim: 236 241 249;
    --color-surface-container: 236 241 249;
    --color-surface-container-low: 243 246 252;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-high: 228 235 246;
    --color-surface-container-highest: 217 226 241;
    --color-surface-bright: 209 220 238;
    --color-primary: 37 66 138;
    --color-primary-container: 77 115 214;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 15 132 126;
    --color-secondary-fixed: 37 158 150;
    --color-on-secondary: 255 255 255;
    --color-tertiary: 75 95 136;
    --color-tertiary-fixed: 108 131 177;
    --color-error: 191 68 62;
    --color-on-error-container: 99 34 31;
    --color-on-error: 255 255 255;
    --color-on-surface: 22 31 53;
    --color-on-surface-variant: 78 88 110;
    --color-outline-variant: 167 177 197;
    --color-control-switch-off-bg: 217 226 241;
    --color-control-switch-off-border: 167 177 197;
    --color-control-switch-off-thumb: 40 58 95;
    --color-control-switch-on-bg: 77 115 214;
    --color-control-switch-on-border: 37 66 138;
    --color-control-switch-on-thumb: 255 255 255;
    --color-control-switch-focus: 77 115 214;
    --color-control-primary-bg: 77 115 214;
    --color-control-primary-hover: 64 100 197;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 148 168 218;
    --color-control-primary-disabled-text: 236 241 249;
    --color-control-primary-disabled-border: 120 146 209;
    color-scheme: light;
}

:root[data-theme="graphite"] {
    --color-background: 18 22 28;
    --color-surface: 18 22 28;
    --color-surface-dim: 14 18 24;
    --color-surface-container: 30 35 43;
    --color-surface-container-low: 24 29 36;
    --color-surface-container-lowest: 10 13 18;
    --color-surface-container-high: 41 47 57;
    --color-surface-container-highest: 52 59 71;
    --color-surface-bright: 61 68 81;
    --color-primary: 198 205 219;
    --color-primary-container: 96 108 134;
    --color-on-primary: 20 24 31;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 135 195 181;
    --color-secondary-fixed: 162 219 206;
    --color-on-secondary: 14 45 39;
    --color-tertiary: 182 191 207;
    --color-tertiary-fixed: 209 216 229;
    --color-error: 238 167 161;
    --color-on-error-container: 246 212 208;
    --color-on-error: 82 28 25;
    --color-on-surface: 230 235 243;
    --color-on-surface-variant: 176 184 199;
    --color-outline-variant: 86 94 109;
    --color-control-switch-off-bg: 52 59 71;
    --color-control-switch-off-border: 102 112 131;
    --color-control-switch-off-thumb: 230 235 243;
    --color-control-switch-on-bg: 135 195 181;
    --color-control-switch-on-border: 162 219 206;
    --color-control-switch-on-thumb: 14 45 39;
    --color-control-switch-focus: 135 195 181;
    --color-control-primary-bg: 96 108 134;
    --color-control-primary-hover: 113 126 154;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 96 108 134;
    --color-control-primary-disabled-text: 222 228 239;
    --color-control-primary-disabled-border: 128 140 165;
    color-scheme: dark;
}

:root[data-theme="slate-ocean"] {
    --color-background: 28 34 42;
    --color-surface: 32 39 48;
    --color-surface-dim: 24 30 38;
    --color-surface-container: 43 51 62;
    --color-surface-container-low: 37 45 55;
    --color-surface-container-lowest: 20 25 32;
    --color-surface-container-high: 54 63 76;
    --color-surface-container-highest: 66 76 90;
    --color-surface-bright: 78 89 104;
    --color-primary: 120 170 255;
    --color-primary-container: 52 108 214;
    --color-on-primary: 8 31 62;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 86 196 182;
    --color-secondary-fixed: 120 221 208;
    --color-on-secondary: 7 49 43;
    --color-tertiary: 214 170 98;
    --color-tertiary-fixed: 230 193 132;
    --color-error: 255 168 160;
    --color-on-error-container: 255 217 213;
    --color-on-error: 87 26 23;
    --color-on-surface: 226 232 240;
    --color-on-surface-variant: 170 180 194;
    --color-outline-variant: 92 104 120;
    --color-control-switch-off-bg: 66 76 90;
    --color-control-switch-off-border: 118 134 160;
    --color-control-switch-off-thumb: 226 232 240;
    --color-control-switch-on-bg: 120 170 255;
    --color-control-switch-on-border: 158 196 255;
    --color-control-switch-on-thumb: 8 31 62;
    --color-control-switch-focus: 120 170 255;
    --color-control-primary-bg: 52 108 214;
    --color-control-primary-hover: 66 123 230;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 52 108 214;
    --color-control-primary-disabled-text: 214 226 250;
    --color-control-primary-disabled-border: 85 135 227;
    color-scheme: dark;
}

:root[data-theme="sand-stone"] {
    --color-background: 242 238 230;
    --color-surface: 247 244 237;
    --color-surface-dim: 231 225 215;
    --color-surface-container: 234 228 217;
    --color-surface-container-low: 241 236 228;
    --color-surface-container-lowest: 252 250 245;
    --color-surface-container-high: 223 216 204;
    --color-surface-container-highest: 212 205 193;
    --color-surface-bright: 203 195 183;
    --color-primary: 85 103 140;
    --color-primary-container: 117 136 175;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 103 129 92;
    --color-secondary-fixed: 132 158 120;
    --color-on-secondary: 255 255 255;
    --color-tertiary: 176 123 73;
    --color-tertiary-fixed: 201 148 99;
    --color-error: 181 74 67;
    --color-on-error-container: 107 42 38;
    --color-on-error: 255 255 255;
    --color-on-surface: 42 46 54;
    --color-on-surface-variant: 91 96 106;
    --color-outline-variant: 171 166 157;
    --color-control-switch-off-bg: 212 205 193;
    --color-control-switch-off-border: 171 166 157;
    --color-control-switch-off-thumb: 68 67 71;
    --color-control-switch-on-bg: 176 123 73;
    --color-control-switch-on-border: 201 148 99;
    --color-control-switch-on-thumb: 255 255 255;
    --color-control-switch-focus: 176 123 73;
    --color-control-primary-bg: 117 136 175;
    --color-control-primary-hover: 101 121 161;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 157 170 195;
    --color-control-primary-disabled-text: 247 244 237;
    --color-control-primary-disabled-border: 131 149 183;
    color-scheme: light;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Inter", sans-serif;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-on-surface));
    transition: background-color 220ms ease, color 220ms ease;
}

* {
    border-color: rgb(var(--color-outline-variant) / 0.35);
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.row-selectable {
    cursor: pointer;
}

.providers-table .row-selectable > td {
    transition: background-color 180ms ease, color 180ms ease;
}

.providers-table .row-selectable:hover > td,
.providers-table .row-selectable:focus-within > td {
    background-color: rgb(var(--color-surface-container-high) / 0.4);
}

.hidden-by-filter {
    display: none;
}

.table-number-header,
.table-number-cell {
    text-align: right !important;
}

.table-number-cell {
    font-variant-numeric: tabular-nums;
}

.errors-table-sticky thead th {
    position: sticky;
    top: 4rem;
    z-index: 30;
    background-color: rgb(var(--color-surface-container-lowest));
}

.errors-table-sticky [data-sticky-col-index] {
    position: sticky;
}

.errors-table-sticky tbody td[data-sticky-col-index] {
    z-index: 20;
    background-color: inherit;
}

.errors-table-sticky thead th[data-sticky-col-index] {
    z-index: 35;
}

.errors-table-sticky [data-sticky-col-index="0"] {
    left: 0;
}

.errors-table-sticky [data-sticky-col-index="1"] {
    left: 90px;
}

.errors-table-sticky [data-sticky-col-index="2"] {
    left: 260px;
}

.errors-table-sticky [data-sticky-col-index="3"] {
    left: 440px;
}

.errors-table-sticky [data-sticky-col-index="3"] {
    box-shadow: 1px 0 0 rgb(var(--color-outline-variant) / 0.25);
}

.font-manrope {
    font-family: "Manrope", sans-serif;
}

.invoice-kpi-card {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.invoice-kpi-card .invoice-kpi-title,
.invoice-kpi-card .invoice-kpi-hint {
    color: rgb(var(--color-on-surface-variant));
}

.invoice-kpi-card .invoice-kpi-value {
    color: rgb(var(--color-on-surface));
}

.invoice-kpi-subtotal {
    background-color: rgb(var(--color-primary) / 0.06);
    border-color: rgb(var(--color-primary) / 0.2);
}

.invoice-kpi-discount {
    background-color: rgb(var(--color-tertiary) / 0.11);
    border-color: rgb(var(--color-tertiary) / 0.24);
}

.invoice-kpi-discount .invoice-kpi-title,
.invoice-kpi-discount .invoice-kpi-hint,
.invoice-kpi-discount .invoice-kpi-value {
    color: rgb(var(--color-tertiary));
}

.invoice-kpi-tax {
    background-color: rgb(var(--color-secondary) / 0.11);
    border-color: rgb(var(--color-secondary) / 0.24);
}

.invoice-kpi-tax .invoice-kpi-title,
.invoice-kpi-tax .invoice-kpi-hint,
.invoice-kpi-tax .invoice-kpi-value {
    color: rgb(var(--color-secondary));
}

.invoice-kpi-total {
    background-color: rgb(var(--color-primary-container) / 0.16);
    border-color: rgb(var(--color-primary-container) / 0.3);
}

.invoice-kpi-total .invoice-kpi-title,
.invoice-kpi-total .invoice-kpi-hint {
    color: rgb(var(--color-primary));
}

.invoice-kpi-total .invoice-kpi-value {
    color: rgb(var(--color-on-surface));
}

/* Compatibilidad: si Tailwind CDN no genera utilidades de color, estas clases mantienen el look. */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

.from-primary,
.from-primary-container,
.from-surface {
    --tw-gradient-to-position: ;
    --tw-gradient-from-position: ;
}

.from-primary {
    --tw-gradient-from: rgb(var(--color-primary)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-container {
    --tw-gradient-from: rgb(var(--color-primary-container)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-primary-container) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-surface {
    --tw-gradient-from: rgb(var(--color-surface)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-surface) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary {
    --tw-gradient-to: rgb(var(--color-primary)) var(--tw-gradient-to-position);
}

.to-primary-container {
    --tw-gradient-to: rgb(var(--color-primary-container)) var(--tw-gradient-to-position);
}

.to-secondary {
    --tw-gradient-to: rgb(var(--color-secondary)) var(--tw-gradient-to-position);
}

.bg-background { background-color: rgb(var(--color-background)) !important; }
.bg-background\/70 { background-color: rgb(var(--color-background) / 0.7) !important; }
.bg-surface { background-color: rgb(var(--color-surface)) !important; }
.bg-surface\/85 { background-color: rgb(var(--color-surface) / 0.85) !important; }
.bg-surface\/95 { background-color: rgb(var(--color-surface) / 0.95) !important; }
.bg-surface-bright { background-color: rgb(var(--color-surface-bright)) !important; }
.bg-surface-container { background-color: rgb(var(--color-surface-container)) !important; }
.bg-surface-container\/30 { background-color: rgb(var(--color-surface-container) / 0.3) !important; }
.bg-surface-container\/50 { background-color: rgb(var(--color-surface-container) / 0.5) !important; }
.bg-surface-container-low { background-color: rgb(var(--color-surface-container-low)) !important; }
.bg-surface-container-high { background-color: rgb(var(--color-surface-container-high)) !important; }
.bg-surface-container-highest { background-color: rgb(var(--color-surface-container-highest)) !important; }
.bg-surface-container-high\/25 { background-color: rgb(var(--color-surface-container-high) / 0.25) !important; }
.bg-surface-container-high\/30 { background-color: rgb(var(--color-surface-container-high) / 0.3) !important; }
.bg-surface-container-high\/40 { background-color: rgb(var(--color-surface-container-high) / 0.4) !important; }
.bg-surface-container-high\/50 { background-color: rgb(var(--color-surface-container-high) / 0.5) !important; }
.bg-surface-container-high\/70 { background-color: rgb(var(--color-surface-container-high) / 0.7) !important; }
.bg-primary { background-color: rgb(var(--color-primary)) !important; }
.bg-primary-container { background-color: rgb(var(--color-primary-container)) !important; }
.bg-primary\/5 { background-color: rgb(var(--color-primary) / 0.05) !important; }
.bg-primary\/10 { background-color: rgb(var(--color-primary) / 0.1) !important; }
.bg-primary\/15 { background-color: rgb(var(--color-primary) / 0.15) !important; }
.bg-primary\/20 { background-color: rgb(var(--color-primary) / 0.2) !important; }
.bg-secondary { background-color: rgb(var(--color-secondary)) !important; }
.bg-secondary\/5 { background-color: rgb(var(--color-secondary) / 0.05) !important; }
.bg-secondary\/10 { background-color: rgb(var(--color-secondary) / 0.1) !important; }
.bg-secondary\/15 { background-color: rgb(var(--color-secondary) / 0.15) !important; }
.bg-secondary\/20 { background-color: rgb(var(--color-secondary) / 0.2) !important; }
.bg-secondary\/30 { background-color: rgb(var(--color-secondary) / 0.3) !important; }
.bg-secondary\/40 { background-color: rgb(var(--color-secondary) / 0.4) !important; }
.bg-secondary\/50 { background-color: rgb(var(--color-secondary) / 0.5) !important; }
.bg-tertiary { background-color: rgb(var(--color-tertiary)) !important; }
.bg-tertiary\/5 { background-color: rgb(var(--color-tertiary) / 0.05) !important; }
.bg-tertiary\/10 { background-color: rgb(var(--color-tertiary) / 0.1) !important; }
.bg-error { background-color: rgb(var(--color-error)) !important; }
.bg-error\/10 { background-color: rgb(var(--color-error) / 0.1) !important; }
.bg-error\/15 { background-color: rgb(var(--color-error) / 0.15) !important; }
.bg-error\/20 { background-color: rgb(var(--color-error) / 0.2) !important; }
.bg-error\/25 { background-color: rgb(var(--color-error) / 0.25) !important; }
.bg-outline-variant\/10 { background-color: rgb(var(--color-outline-variant) / 0.1) !important; }
.bg-outline-variant\/30 { background-color: rgb(var(--color-outline-variant) / 0.3) !important; }
.bg-outline-variant\/60 { background-color: rgb(var(--color-outline-variant) / 0.6) !important; }

.hover\:bg-primary\/90:hover { background-color: rgb(var(--color-primary) / 0.9) !important; }
.hover\:bg-secondary\/30:hover { background-color: rgb(var(--color-secondary) / 0.3) !important; }
.hover\:bg-error\/25:hover { background-color: rgb(var(--color-error) / 0.25) !important; }
.hover\:bg-surface-bright:hover { background-color: rgb(var(--color-surface-bright)) !important; }
.hover\:bg-surface-container:hover { background-color: rgb(var(--color-surface-container)) !important; }
.hover\:bg-surface-container-high:hover { background-color: rgb(var(--color-surface-container-high)) !important; }
.hover\:bg-surface-container-highest:hover { background-color: rgb(var(--color-surface-container-highest)) !important; }

.text-on-surface { color: rgb(var(--color-on-surface)) !important; }
.text-on-surface-variant { color: rgb(var(--color-on-surface-variant)) !important; }
.text-on-surface-variant\/60 { color: rgb(var(--color-on-surface-variant) / 0.6) !important; }
.text-slate-300,
.text-slate-400,
.text-slate-500 { color: rgb(var(--color-on-surface-variant)) !important; }
.text-primary { color: rgb(var(--color-primary)) !important; }
.text-primary\/60 { color: rgb(var(--color-primary) / 0.6) !important; }
.text-secondary { color: rgb(var(--color-secondary)) !important; }
.text-tertiary { color: rgb(var(--color-tertiary)) !important; }
.text-error { color: rgb(var(--color-error)) !important; }
.text-surface { color: rgb(var(--color-surface)) !important; }

.hover\:text-primary:hover { color: rgb(var(--color-primary)) !important; }
.hover\:text-secondary:hover { color: rgb(var(--color-secondary)) !important; }
.hover\:text-on-surface:hover { color: rgb(var(--color-on-surface)) !important; }

.app-switch {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 1.5rem;
    align-items: center;
    cursor: pointer;
}

.app-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1px solid rgb(var(--color-control-switch-off-border) / 0.75);
    background-color: rgb(var(--color-control-switch-off-bg));
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.app-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background-color: rgb(var(--color-control-switch-off-thumb));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
    transition: transform 180ms ease, background-color 180ms ease;
}

.app-switch-input:checked + .app-switch-track {
    background-color: rgb(var(--color-control-switch-on-bg));
    border-color: rgb(var(--color-control-switch-on-border) / 0.95);
    box-shadow: 0 0 0 1px rgb(var(--color-control-switch-on-bg) / 0.36);
}

.app-switch-input:checked + .app-switch-track .app-switch-thumb {
    transform: translateX(1.25rem);
    background-color: rgb(var(--color-control-switch-on-thumb));
}

.app-switch-input:focus-visible + .app-switch-track {
    box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 4px rgb(var(--color-control-switch-focus) / 0.52);
}

@media (prefers-reduced-motion: reduce) {
    .app-switch-track,
    .app-switch-thumb {
        transition: none;
    }
}

button.bg-primary,
a.bg-primary,
button[class*=" bg-primary "],
a[class*=" bg-primary "],
button[class^="bg-primary "],
a[class^="bg-primary "] {
    color: rgb(var(--color-on-primary)) !important;
}

button.bg-primary-container,
a.bg-primary-container,
button[class*=" bg-primary-container "],
a[class*=" bg-primary-container "],
button[class^="bg-primary-container "],
a[class^="bg-primary-container "] {
    background-color: rgb(var(--color-control-primary-bg)) !important;
    color: rgb(var(--color-control-primary-text)) !important;
}

button.bg-primary-container:hover,
a.bg-primary-container:hover,
button[class*=" bg-primary-container "]:hover,
a[class*=" bg-primary-container "]:hover,
button[class^="bg-primary-container "]:hover,
a[class^="bg-primary-container "]:hover {
    background-color: rgb(var(--color-control-primary-hover)) !important;
}

button.bg-secondary,
a.bg-secondary,
button[class*=" bg-secondary "],
a[class*=" bg-secondary "],
button[class^="bg-secondary "],
a[class^="bg-secondary "] {
    color: rgb(var(--color-on-secondary)) !important;
}

button.bg-error,
a.bg-error,
button[class*=" bg-error "],
a[class*=" bg-error "],
button[class^="bg-error "],
a[class^="bg-error "] {
    color: rgb(var(--color-on-error)) !important;
}

button.bg-gradient-to-r,
a.bg-gradient-to-r,
button.bg-gradient-to-br,
a.bg-gradient-to-br,
button[class*=" bg-gradient-to-r "],
a[class*=" bg-gradient-to-r "],
button[class*=" bg-gradient-to-br "],
a[class*=" bg-gradient-to-br "],
button[class^="bg-gradient-to-r "],
a[class^="bg-gradient-to-r "],
button[class^="bg-gradient-to-br "],
a[class^="bg-gradient-to-br "] {
    color: rgb(var(--color-on-primary-container)) !important;
    border-color: rgb(var(--color-primary) / 0.22) !important;
}

button.bg-surface-container,
a.bg-surface-container,
button.bg-surface-container-high,
a.bg-surface-container-high,
button.bg-surface-container-highest,
a.bg-surface-container-highest,
button[class*=" bg-surface-container"],
a[class*=" bg-surface-container"],
button[class^="bg-surface-container"],
a[class^="bg-surface-container"] {
    color: rgb(var(--color-on-surface)) !important;
}

button.text-secondary.bg-surface-container-high,
a.text-secondary.bg-surface-container-high,
button.text-secondary[class*=" bg-surface-container"],
a.text-secondary[class*=" bg-surface-container"] {
    color: rgb(var(--color-secondary)) !important;
}

button:disabled,
button[aria-disabled="true"],
a[aria-disabled="true"] {
    color: rgb(var(--color-on-surface-variant) / 0.68) !important;
}

button.bg-primary:disabled,
button.bg-primary[aria-disabled="true"] {
    background-color: rgb(var(--color-primary) / 0.55) !important;
    color: rgb(var(--color-on-primary) / 0.92) !important;
}

button.bg-primary-container:disabled,
button.bg-primary-container[aria-disabled="true"],
button.bg-gradient-to-r:disabled,
button.bg-gradient-to-r[aria-disabled="true"],
button.bg-gradient-to-br:disabled,
button.bg-gradient-to-br[aria-disabled="true"] {
    background-image: none !important;
    background-color: rgb(var(--color-control-primary-disabled-bg) / 0.68) !important;
    color: rgb(var(--color-control-primary-disabled-text) / 0.95) !important;
    border-color: rgb(var(--color-control-primary-disabled-border) / 0.55) !important;
}

.border-primary { border-color: rgb(var(--color-primary)) !important; }
.border-primary\/20 { border-color: rgb(var(--color-primary) / 0.2) !important; }
.border-primary\/30 { border-color: rgb(var(--color-primary) / 0.3) !important; }
.border-primary\/40 { border-color: rgb(var(--color-primary) / 0.4) !important; }
.border-secondary\/30 { border-color: rgb(var(--color-secondary) / 0.3) !important; }
.border-surface { border-color: rgb(var(--color-surface)) !important; }
.border-outline-variant\/5 { border-color: rgb(var(--color-outline-variant) / 0.05) !important; }
.border-outline-variant\/10 { border-color: rgb(var(--color-outline-variant) / 0.1) !important; }
.border-outline-variant\/15 { border-color: rgb(var(--color-outline-variant) / 0.15) !important; }
.border-outline-variant\/20 { border-color: rgb(var(--color-outline-variant) / 0.2) !important; }
.border-outline-variant\/30 { border-color: rgb(var(--color-outline-variant) / 0.3) !important; }
.border-outline-variant\/40 { border-color: rgb(var(--color-outline-variant) / 0.4) !important; }

.app-is-busy {
    cursor: progress;
}

.app-interaction-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5rem 1rem 1rem;
    pointer-events: none;
    opacity: 0;
    background: rgb(var(--color-background) / 0);
    transition: opacity 160ms ease, background-color 160ms ease;
}

.app-interaction-mask.is-visible {
    pointer-events: auto;
    opacity: 1;
    background: rgb(var(--color-background) / 0.38);
    backdrop-filter: blur(2px);
}

.app-interaction-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(92vw, 24rem);
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(var(--color-outline-variant) / 0.35);
    border-radius: 0.5rem;
    background: rgb(var(--color-surface-container-high) / 0.96);
    color: rgb(var(--color-on-surface));
    box-shadow: 0 20px 45px rgb(0 0 0 / 0.28);
    font-size: 0.875rem;
    font-weight: 700;
    transform: translateY(-0.35rem);
    transition: transform 160ms ease;
}

.app-interaction-mask.is-visible .app-interaction-panel {
    transform: translateY(0);
}

.app-interaction-spinner,
.app-inline-spinner {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 2px solid rgb(var(--color-primary) / 0.28);
    border-top-color: rgb(var(--color-primary));
    animation: app-spin 760ms linear infinite;
}

.app-interaction-spinner {
    width: 1.35rem;
    height: 1.35rem;
}

.app-inline-spinner {
    width: 1rem;
    height: 1rem;
}

.is-processing {
    cursor: wait !important;
    opacity: 0.72;
}

button.is-processing,
a.is-processing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

button.is-processing::after,
a.is-processing::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 2px solid rgb(var(--color-primary) / 0.28);
    border-top-color: rgb(var(--color-primary));
    animation: app-spin 760ms linear infinite;
}

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}