/*
 * Ayrito shared theme contract
 *
 * This is the final visual layer loaded by the application bases.  Keep
 * colours, contrast and common component rules here; page templates should
 * only describe content and state, never duplicate the palette.
 */
:root {
    color-scheme: light;
    --ui-page: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafc;
    --ui-surface-3: #eef3f8;
    --ui-border: #dce5ef;
    --ui-text: #182337;
    --ui-text-strong: #101828;
    --ui-muted: #66758b;
    --ui-placeholder: #8b98aa;
    --ui-primary: #2373f4;
    --ui-primary-hover: #155cd4;
    --ui-primary-soft: rgba(35, 115, 244, .10);
    --ui-success: #168a63;
    --ui-success-soft: rgba(22, 138, 99, .12);
    --ui-warning: #a96500;
    --ui-warning-soft: rgba(245, 174, 62, .16);
    --ui-danger: #c33d55;
    --ui-danger-soft: rgba(195, 61, 85, .12);
    --ui-info: #1174a8;
    --ui-info-soft: rgba(17, 116, 168, .12);
    --ui-overlay: rgba(11, 20, 38, .58);
    --ui-shadow: 0 10px 28px rgba(25, 45, 80, .08);
    --ui-shadow-lg: 0 20px 48px rgba(25, 45, 80, .13);
    --ui-radius: 12px;
    --ui-radius-sm: 8px;

    /* Compatibility aliases: feature CSS can use one stable contract. */
    --app-bg: var(--ui-page);
    --app-surface: var(--ui-surface);
    --app-surface-muted: var(--ui-surface-2);
    --app-sidebar: var(--ui-surface);
    --app-sidebar-text: var(--ui-text);
    --app-sidebar-muted: var(--ui-muted);
    --app-sidebar-hover: var(--ui-primary-soft);
    --app-border: var(--ui-border);
    --app-text: var(--ui-text);
    --app-muted: var(--ui-muted);
    --app-primary: var(--ui-primary);
    --app-primary-hover: var(--ui-primary-hover);
    --app-primary-soft: var(--ui-primary-soft);
    --app-gold: #d18b20;
    --app-topbar: var(--ui-surface);
    --app-topbar-text: var(--ui-text);
    --bs-body-bg: var(--ui-page);
    --bs-body-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}

[data-bs-theme='dark'] {
    color-scheme: dark;
    --ui-page: #0f1728;
    --ui-surface: #182338;
    --ui-surface-2: #202d45;
    --ui-surface-3: #293752;
    --ui-border: #344764;
    --ui-text: #e9eff8;
    --ui-text-strong: #f8fbff;
    --ui-muted: #a9b7ca;
    --ui-placeholder: #8e9db2;
    --ui-primary: #76a8ff;
    --ui-primary-hover: #9ac0ff;
    --ui-primary-soft: rgba(118, 168, 255, .16);
    --ui-success: #5ed3aa;
    --ui-success-soft: rgba(94, 211, 170, .16);
    --ui-warning: #ffd06e;
    --ui-warning-soft: rgba(255, 208, 110, .16);
    --ui-danger: #ff9dad;
    --ui-danger-soft: rgba(255, 157, 173, .16);
    --ui-info: #72c7ee;
    --ui-info-soft: rgba(114, 199, 238, .16);
    --ui-overlay: rgba(3, 8, 18, .72);
    --ui-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    --ui-shadow-lg: 0 22px 52px rgba(0, 0, 0, .34);

    --app-bg: var(--ui-page);
    --app-surface: var(--ui-surface);
    --app-surface-muted: var(--ui-surface-2);
    --app-sidebar: #121c30;
    --app-sidebar-text: var(--ui-text-strong);
    --app-sidebar-muted: var(--ui-muted);
    --app-sidebar-hover: var(--ui-primary-soft);
    --app-border: var(--ui-border);
    --app-text: var(--ui-text);
    --app-muted: var(--ui-muted);
    --app-primary: var(--ui-primary);
    --app-primary-hover: var(--ui-primary-hover);
    --app-primary-soft: var(--ui-primary-soft);
    --app-gold: #ffd06e;
    --app-topbar: #121c30;
    --app-topbar-text: var(--ui-text-strong);
    --bs-body-bg: var(--ui-page);
    --bs-body-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}

html,
body {
    min-width: 320px;
    background-color: var(--ui-page) !important;
    color: var(--ui-text) !important;
}

body,
button,
input,
select,
textarea {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif;
}

a { color: var(--ui-primary); }
a:hover { color: var(--ui-primary-hover); }

/* Common Bootstrap surfaces */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group,
.list-group-item,
.accordion-item,
.toast,
.popover,
.tooltip-inner {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group,
.accordion-item,
.toast,
.popover { box-shadow: var(--ui-shadow) !important; }

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button,
.list-group-item {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--ui-primary) !important;
    background-color: var(--ui-primary-soft) !important;
}

.form-control,
.form-select,
.input-group-text,
.form-control:disabled,
.form-control[readonly] {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}

.form-control::placeholder,
textarea::placeholder { color: var(--ui-placeholder) !important; opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 .2rem var(--ui-primary-soft) !important;
}

label,
.form-label,
.form-check-label { color: var(--ui-text) !important; }
.form-text,
.text-muted,
.text-secondary { color: var(--ui-muted) !important; }
.text-dark,
.text-black { color: var(--ui-text-strong) !important; }
.text-primary { color: var(--ui-primary) !important; }
.text-success { color: var(--ui-success) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-danger { color: var(--ui-danger) !important; }
.bg-white,
.bg-light,
.bg-body,
.table-light { background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
.border,
.border-top,
.border-end,
.border-bottom,
.border-start { border-color: var(--ui-border) !important; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    color: var(--ui-text) !important;
}
.table > :not(caption) > * > * { color: inherit; border-bottom-color: var(--ui-border) !important; }
.table thead th { color: var(--ui-muted) !important; background: var(--ui-surface-2) !important; }
.table-hover > tbody > tr:hover > * { color: var(--ui-text) !important; background: var(--ui-primary-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--ui-text); background-color: color-mix(in srgb, var(--ui-surface-2) 62%, transparent); }

.dropdown-item { color: var(--ui-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus { color: var(--ui-text) !important; background-color: var(--ui-primary-soft) !important; }
.nav-tabs { border-color: var(--ui-border) !important; }
.nav-tabs .nav-link { color: var(--ui-muted); }
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active { color: var(--ui-primary); background: var(--ui-surface); border-color: var(--ui-border) var(--ui-border) var(--ui-surface); }
.pagination .page-link { color: var(--ui-primary); background: var(--ui-surface); border-color: var(--ui-border); }
.pagination .page-item.active .page-link { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.btn-close { filter: none; }
[data-bs-theme='dark'] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

.alert-info { color: var(--ui-info) !important; background: var(--ui-info-soft) !important; border-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-border)) !important; }
.alert-success { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)) !important; }
.alert-warning { color: var(--ui-warning) !important; background: var(--ui-warning-soft) !important; border-color: color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border)) !important; }
.alert-danger { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)) !important; }

/* Fix the most common legacy hard-coded light surfaces when dark mode is on. */
[data-bs-theme='dark'] [style*='background:#fff'],
[data-bs-theme='dark'] [style*='background: #fff'],
[data-bs-theme='dark'] [style*='background:#ffffff'],
[data-bs-theme='dark'] [style*='background: #ffffff'],
[data-bs-theme='dark'] [style*='background:white'],
[data-bs-theme='dark'] [style*='background: white'],
[data-bs-theme='dark'] [style*='background-color:#fff'],
[data-bs-theme='dark'] [style*='background-color: #fff'],
[data-bs-theme='dark'] [style*='background-color:#ffffff'],
[data-bs-theme='dark'] [style*='background-color: #ffffff'],
[data-bs-theme='dark'] [style*='background-color:white'],
[data-bs-theme='dark'] [style*='background-color: white'] {
    background-color: var(--ui-surface) !important;
}

[data-bs-theme='dark'] [style*='background:#f8'],
[data-bs-theme='dark'] [style*='background: #f8'],
[data-bs-theme='dark'] [style*='background:#f9'],
[data-bs-theme='dark'] [style*='background: #f9'],
[data-bs-theme='dark'] [style*='background:#fdf'],
[data-bs-theme='dark'] [style*='background: #fdf'],
[data-bs-theme='dark'] [style*='background-color:#f8'],
[data-bs-theme='dark'] [style*='background-color: #f8'],
[data-bs-theme='dark'] [style*='background-color:#f9'],
[data-bs-theme='dark'] [style*='background-color: #f9'] {
    background-color: var(--ui-surface-2) !important;
}

[data-bs-theme='dark'] [style*='color:#333'],
[data-bs-theme='dark'] [style*='color: #333'],
[data-bs-theme='dark'] [style*='color:#666'],
[data-bs-theme='dark'] [style*='color: #666'],
[data-bs-theme='dark'] [style*='color:#64748b'],
[data-bs-theme='dark'] [style*='color: #64748b'],
[data-bs-theme='dark'] [style*='color:#202427'],
[data-bs-theme='dark'] [style*='color: #202427'] {
    color: var(--ui-text) !important;
}

/* Feature pages frequently use these neutral utility containers. */
[data-bs-theme='dark'] .bg-light-subtle,
[data-bs-theme='dark'] .bg-body-secondary,
[data-bs-theme='dark'] .bg-body-tertiary,
[data-bs-theme='dark'] .background-light,
[data-bs-theme='dark'] .surface,
[data-bs-theme='dark'] .panel,
[data-bs-theme='dark'] .form-section,
[data-bs-theme='dark'] .invoice-card,
[data-bs-theme='dark'] .inv1,
[data-bs-theme='dark'] .inv2,
[data-bs-theme='dark'] .inv3,
[data-bs-theme='dark'] .inv4 {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

/* Neutral feature-page surfaces that historically owned their own palette. */
[data-bs-theme='dark'] .invoice-row,
[data-bs-theme='dark'] .order-form,
[data-bs-theme='dark'] .order-calculator,
[data-bs-theme='dark'] .quick-category-option,
[data-bs-theme='dark'] .product-option,
[data-bs-theme='dark'] .variant-option,
[data-bs-theme='dark'] .form-card,
[data-bs-theme='dark'] .card-auth,
[data-bs-theme='dark'] .sheet,
[data-bs-theme='dark'] .box,
[data-bs-theme='dark'] .ai-card,
[data-bs-theme='dark'] .ai-link-row,
[data-bs-theme='dark'] .filter-card,
[data-bs-theme='dark'] .report-card,
[data-bs-theme='dark'] .section-card {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

[data-bs-theme='dark'] .modal-backdrop.show { opacity: .72; background-color: var(--ui-overlay); }
[data-bs-theme='dark'] ::selection { color: var(--ui-text-strong); background: var(--ui-primary-soft); }

/* Public/auth screens can opt into the same contract without the dashboard shell. */
.theme-page {
    min-height: 100vh;
    color: var(--ui-text);
    background: var(--ui-page);
}
.theme-page .surface,
.theme-page .card { background-color: var(--ui-surface); border-color: var(--ui-border); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}