/* ============================================================
   Visa Assessment CRM — Shopify-inspired admin theme
   Light / Dark via CSS classes only (html.dark / [data-theme])
   ============================================================ */

:root,
html.theme-light,
html:not(.dark) {
    --crm-primary: #2563eb;
    --crm-primary-hover: #1d4ed8;
    --crm-primary-soft: #eff6ff;
    --crm-bg: #f6f6f7;
    --crm-surface: #ffffff;
    --crm-surface-2: #fafafa;
    --crm-border: #e3e3e3;
    --crm-border-strong: #d4d4d4;
    --crm-text: #202223;
    --crm-text-muted: #6d7175;
    --crm-text-soft: #8c9196;
    --crm-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    --crm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --crm-radius: 0.75rem;
    --crm-sidebar-width: 16rem;
    --crm-header-height: 4rem;
    --crm-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark,
html.theme-dark,
html[data-theme="dark"] {
    --crm-primary: #3b82f6;
    --crm-primary-hover: #60a5fa;
    --crm-primary-soft: #1e3a5f;
    --crm-bg: #0b0c0e;
    --crm-surface: #16181d;
    --crm-surface-2: #1c1f26;
    --crm-border: #2a2e37;
    --crm-border-strong: #3a3f4b;
    --crm-text: #f1f2f4;
    --crm-text-muted: #a1a7b3;
    --crm-text-soft: #7b8290;
    --crm-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    --crm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html {
    color-scheme: light;
}

html.dark,
html.theme-dark {
    color-scheme: dark;
}

body {
    font-family: var(--crm-font);
    background: var(--crm-bg);
    color: var(--crm-text);
    -webkit-font-smoothing: antialiased;
}

#ajax-progress {
    transition: opacity 0.15s ease;
}

/* ----- Admin shell surfaces ----- */
#admin-app {
    background: var(--crm-bg);
    color: var(--crm-text);
    min-height: 100%;
}

#admin-sidebar {
    background: var(--crm-surface);
    border-color: var(--crm-border) !important;
    width: var(--crm-sidebar-width);
}

#admin-sidebar .sidebar-brand p:first-child,
#admin-app .text-gray-900 {
    color: var(--crm-text);
}

#admin-app .text-gray-500,
#admin-app .text-gray-400,
#admin-sidebar .text-gray-500 {
    color: var(--crm-text-muted) !important;
}

#admin-app .bg-white,
#admin-app .bg-white\/90,
#admin-app .bg-white\/80 {
    background-color: var(--crm-surface) !important;
}

#admin-app .bg-gray-50,
#admin-app .bg-gray-50\/80 {
    background-color: var(--crm-bg) !important;
}

#admin-app .border-gray-200,
#admin-app .border-gray-100,
#admin-sidebar .border-gray-200,
#admin-sidebar .border-gray-100 {
    border-color: var(--crm-border) !important;
}

#admin-app header.sticky {
    background: color-mix(in srgb, var(--crm-surface) 92%, transparent) !important;
    border-color: var(--crm-border) !important;
    backdrop-filter: blur(8px);
}

#admin-app main {
    background: var(--crm-bg);
}

/* Cards / tables Shopify feel */
#admin-app .rounded-xl.border.bg-white,
#admin-app [class*="shadow-sm"].bg-white {
    box-shadow: var(--crm-shadow-card);
    border-radius: var(--crm-radius);
}

/* Primary accents */
#admin-app .bg-blue-600 {
    background-color: var(--crm-primary) !important;
}

#admin-app .hover\:bg-blue-700:hover {
    background-color: var(--crm-primary-hover) !important;
}

#admin-app .text-blue-600,
#admin-app .text-blue-700 {
    color: var(--crm-primary) !important;
}

#admin-app .bg-blue-50 {
    background-color: var(--crm-primary-soft) !important;
}

#admin-app .focus\:ring-blue-500\/20:focus,
#admin-app .focus\:ring-blue-500\/30:focus {
    --tw-ring-color: color-mix(in srgb, var(--crm-primary) 25%, transparent);
}

#admin-app .focus\:border-blue-500:focus {
    border-color: var(--crm-primary) !important;
}

/* Inputs */
#admin-app input,
#admin-app select,
#admin-app textarea {
    background-color: var(--crm-surface);
    color: var(--crm-text);
    border-color: var(--crm-border);
}

#admin-app input::placeholder,
#admin-app textarea::placeholder {
    color: var(--crm-text-soft);
}

/* Sidebar menu */
#admin-sidebar .menu-item > a,
#admin-sidebar .menu-toggle {
    color: var(--crm-text);
}

#admin-sidebar .menu-item > a:hover,
#admin-sidebar .menu-toggle:hover {
    background: var(--crm-surface-2);
}

#admin-sidebar .menu-item > a.bg-blue-50,
#admin-sidebar .menu-toggle.bg-blue-50 {
    background: var(--crm-primary-soft) !important;
    color: var(--crm-primary) !important;
}

#admin-sidebar[data-collapsed='true'] {
    width: 5rem;
}

#admin-sidebar[data-collapsed='true'] .sidebar-brand,
#admin-sidebar[data-collapsed='true'] .menu-label,
#admin-sidebar[data-collapsed='true'] .menu-chevron,
#admin-sidebar[data-collapsed='true'] #sidebar-search-wrap,
#admin-sidebar[data-collapsed='true'] .submenu {
    display: none !important;
}

#admin-sidebar[data-collapsed='true'] .menu-item > a,
#admin-sidebar[data-collapsed='true'] .menu-toggle {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Global search panel */
#global-search-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 50;
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-card);
}

#global-search-panel.is-open {
    display: block;
}

#global-search-panel a,
#global-search-panel button.result {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    text-align: left;
    color: var(--crm-text);
    font-size: 0.875rem;
}

#global-search-panel a:hover,
#global-search-panel button.result:hover,
#global-search-panel a.is-active,
#global-search-panel button.result.is-active {
    background: var(--crm-surface-2);
}

#global-search-panel .result-meta {
    margin-left: auto;
    color: var(--crm-text-soft);
    font-size: 0.75rem;
}

/* Theme toggle icon swap via classes (no Alpine) */
html:not(.dark) .icon-when-dark {
    display: none !important;
}

html.dark .icon-when-light {
    display: none !important;
}

/* Dark mode dropdown / modal surfaces */
html.dark #admin-app [data-dropdown-content],
html.dark #admin-app [data-modal] > .relative > .relative {
    background: var(--crm-surface) !important;
    border-color: var(--crm-border) !important;
    color: var(--crm-text);
}

html.dark #admin-app .hover\:bg-gray-50:hover,
html.dark #admin-app .hover\:bg-gray-100:hover {
    background: var(--crm-surface-2) !important;
}

html.dark #admin-app .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--crm-border);
}

/* Loader overlay */
html.dark #global-loader {
    background: rgba(11, 12, 14, 0.65) !important;
}

/* Responsive helpers */
@media (max-width: 1023px) {
    #admin-sidebar {
        box-shadow: var(--crm-shadow-card);
    }
}

@media (max-width: 767px) {
    #global-search-form.mobile-open {
        display: block !important;
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 3.5rem;
        z-index: 30;
    }
}

/* Validation */
#admin-app .is-invalid,
#admin-app input.is-invalid,
#admin-app select.is-invalid,
#admin-app textarea.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

#admin-app [data-error-for] {
    color: #dc2626;
}

#admin-app [data-validation-summary] a {
    color: #b91c1c;
}

/* Fast paint: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}