.app-topbar {
    background-color: rgb(255 255 255 / 0.95) !important;
    color: rgb(30 41 59) !important; /* slate-800 */
    border-color: rgb(226 232 240) !important; /* slate-200 */
}

html.dark .app-topbar {
    background-color: rgb(2 6 23 / 0.95) !important; /* slate-950 */
    color: rgb(241 245 249) !important; /* slate-100 */
    border-color: rgb(30 41 59) !important; /* slate-800 */
}

/* ===== Global Scrollbar Style ===== */
:root {
    --sb-track: #f1f5f9;        /* track (light) */
    --sb-thumb: #cbd5e1;        /* thumb (light) */
    --sb-thumb-hover: #94a3b8;  /* thumb hover (light) */
}

/* Dark mode variables */
html.dark {
    --sb-track: #0f172a;        /* slate-900-ish */
    --sb-thumb: #475569;        /* slate-600 */
    --sb-thumb-hover: #64748b;  /* slate-500 */
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--sb-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: 999px;
    border: 2px solid var(--sb-track);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}

/* ===== Dark mode <select> dropdown fix =====
   Native dropdown option styles are not fully controllable with Tailwind classes,
   so we set safe global defaults for dark mode.
*/
html.dark select {
    color-scheme: dark;
}

html.dark select option,
html.dark select optgroup {
    background-color: #0f172a;
    color: #f1f5f9;
}

/* Dark mode: native date/time inputs */
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark input[type="month"],
html.dark input[type="week"] {
    color-scheme: dark;
}

/* Reduce ugly yellow autofill in dark mode (Chromium) */
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    -webkit-text-fill-color: #f1f5f9;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px #0f172a inset;
}


/* ===== InvoiceCraft UI extras (Step 6) ===== */
.ic-toolbar,
.ic-toolbar-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ic-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid rgb(203 213 225); /* slate-300 */
    background: #fff;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(51 65 85); /* slate-700 */
    transition: background-color 150ms, border-color 150ms, color 150ms;
}
.ic-chip:hover { background: rgb(248 250 252); /* slate-50 */ }

.ic-chip-active {
    border-color: rgb(203 213 225);
    background: rgb(241 245 249); /* slate-100 */
    color: rgb(15 23 42); /* slate-900 */
}

html.dark .ic-chip {
    border-color: rgb(51 65 85); /* slate-700 */
    background: rgb(15 23 42); /* slate-900 */
    color: rgb(226 232 240); /* slate-200 */
}
html.dark .ic-chip:hover { background: rgb(30 41 59); /* slate-800 */ }
html.dark .ic-chip-active {
    border-color: rgb(71 85 105); /* slate-600 */
    background: rgb(30 41 59); /* slate-800 */
    color: #fff;
}

@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid rgb(203 213 225); /* slate-300 */
    border-top-color: rgb(51 65 85); /* slate-700 */
    animation: ic-spin 1s linear infinite;
}
html.dark .ic-spinner {
    border-color: rgb(51 65 85); /* slate-700 */
    border-top-color: rgb(226 232 240); /* slate-200 */
}

@keyframes ic-pulse { 50% { opacity: .5; } }
.ic-skeleton {
    animation: ic-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
    border-radius: 0.5rem;
    background: rgba(226, 232, 240, 0.8); /* slate-200/80 */
}
html.dark .ic-skeleton { background: rgb(30 41 59); /* slate-800 */ }

.ic-skeleton-line { height: 1rem; width: 100%; }
.ic-skeleton-chip { height: 2rem; width: 6rem; }


/* =========================================================
   Form-control fallback (for components that miss Tailwind utility / ic-* classes)
   - uses :where() to keep specificity at 0 so Tailwind utility classes still win
   ========================================================= */
:focus-visible { outline: auto; outline-offset: 2px; }

:where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                       textarea,
                       select) {
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;        /* slate-300 */
    background: #ffffff;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;              /* text-sm */
    line-height: 1.25rem;
    color: #0f172a;                   /* slate-900 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}

:where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                       textarea,
                       select)::placeholder {
    color: #94a3b8;                   /* slate-400 */
}

:where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                       textarea,
                       select):focus {
    border-color: #818cf8;            /* indigo-400 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.20);
}

html.dark :where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                                 textarea,
                                 select) {
    border-color: #334155;            /* slate-700 */
    background: #020617;              /* slate-950 */
    color: #f1f5f9;                   /* slate-100 */
}

html.dark :where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                                 textarea,
                                 select)::placeholder {
    color: #64748b;                   /* slate-500 */
}

html.dark :where(.ic-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                                 textarea,
                                 select):focus {
    border-color: #6366f1;            /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}
/* === Force visibility of inputs inside BlazorMHD modals/dialogs ===
   BlazorMHD.UI's mhd.css may reset native form controls (border/background),
   which makes inputs look like plain text in some dialogs. These rules
   ensure ic-field/ic-select are always visible.
*/
:where(input.ic-field, textarea.ic-field, select.ic-select) {
    border: 1px solid #94a3b8 !important;     /* slate-400 (more visible) */
    background: #f8fafc !important;           /* slate-50 */
    color: #0f172a !important;                /* slate-900 */
}

:where(input.ic-field, textarea.ic-field, select.ic-select)::placeholder {
    color: #64748b !important;                /* slate-500 */
}

:where(input.ic-field, textarea.ic-field, select.ic-select):focus {
    outline: none !important;
    border-color: #818cf8 !important;         /* indigo-400 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.20) !important;
    background: #ffffff !important;
}

html.dark :where(input.ic-field, textarea.ic-field, select.ic-select) {
    border-color: #475569 !important;         /* slate-600 */
    background: #0b1220 !important;           /* deep slate */
    color: #f1f5f9 !important;                /* slate-100 */
}

html.dark :where(input.ic-field, textarea.ic-field, select.ic-select)::placeholder {
    color: #94a3b8 !important;                /* slate-400 */
}

html.dark :where(input.ic-field, textarea.ic-field, select.ic-select):focus {
    border-color: #6366f1 !important;         /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.25) !important;
    background: #020617 !important;           /* slate-950 */
}


/* ===== Fallback styling for plain form controls =====
   Some pages use <InputText> / <input> without class, and BlazorMHD resets
   can make them look like plain text. This keeps them readable without
   affecting already-styled controls.
*/
.ic-app :where(input:not([class]), textarea:not([class]), select:not([class])) {
    width: 100%;
    border: 1px solid #cbd5e1 !important;     /* slate-300 */
    border-radius: 0.5rem !important;         /* ~rounded-lg */
    background: #ffffff !important;
    color: #0f172a !important;                /* slate-900 */
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;           /* text-sm */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.ic-app :where(input:not([class]), textarea:not([class]))::placeholder {
    color: #94a3b8 !important;                /* slate-400 */
}

.ic-app :where(input:not([class]), textarea:not([class]), select:not([class])):focus {
    outline: none !important;
    border-color: #818cf8 !important;         /* indigo-400 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.20) !important;
}

html.dark .ic-app :where(input:not([class]), textarea:not([class]), select:not([class])) {
    border-color: #475569 !important;         /* slate-600 */
    background: #0b1220 !important;
    color: #f1f5f9 !important;
}

html.dark .ic-app :where(input:not([class]), textarea:not([class]))::placeholder {
    color: #94a3b8 !important;
}

html.dark .ic-app :where(input:not([class]), textarea:not([class]), select:not([class])):focus {
    border-color: #6366f1 !important;         /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99,102,241,0.25) !important;
}


/* =========================================================
   InvoiceCraft form-control hardening
   - Fixes "inputs look like plain text" both in normal pages and MHD modals.
   - MHD modals can render outside MainLayout, so we scope to <body class="ic-root">.
   - Uses CSS variables so light/dark stay consistent.
   ========================================================= */

:root {
    --ic-input-bg: #ffffff;
    --ic-input-border: #cbd5e1;      /* slate-300 */
    --ic-input-text: #0f172a;        /* slate-900 */
    --ic-input-placeholder: #94a3b8; /* slate-400 */
    --ic-input-ring: rgba(99, 102, 241, 0.22); /* indigo */
}

html.dark {
    --ic-input-bg: #020617;          /* slate-950 */
    --ic-input-border: #334155;      /* slate-700 */
    --ic-input-text: #f1f5f9;        /* slate-100 */
    --ic-input-placeholder: #64748b; /* slate-500 */
    --ic-input-ring: rgba(99, 102, 241, 0.28);
}

/* Force our designed controls to remain visible even if vendor CSS uses !important resets */
:where(.ic-root) :where(input.ic-field, textarea.ic-textarea, textarea.ic-field, select.ic-select) {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--ic-input-border) !important;
    background-color: var(--ic-input-bg) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: var(--ic-input-text) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

:where(.ic-root) :where(input.ic-field, textarea.ic-textarea, textarea.ic-field, select.ic-select)::placeholder {
    color: var(--ic-input-placeholder) !important;
}

:where(.ic-root) :where(input.ic-field, textarea.ic-textarea, textarea.ic-field, select.ic-select):focus {
    outline: none !important;
    border-color: #818cf8 !important; /* indigo-400 */
    box-shadow: 0 0 0 3px var(--ic-input-ring) !important;
}

/* Generic fallback for any input/select/textarea (covers Blazor validation classes too) */
:where(.ic-root) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                         textarea,
                         select) {
    border-radius: 0.5rem;
    border: 1px solid var(--ic-input-border);
    background-color: var(--ic-input-bg);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ic-input-text);
}

:where(.ic-root) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                         textarea,
                         select)::placeholder {
    color: var(--ic-input-placeholder);
}

:where(.ic-root) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
                         textarea,
                         select):focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px var(--ic-input-ring);
}