/**
 * KinKin POS — Light Mode Brand Theme (Orange)
 * Remaps blue/indigo UI accents to brand orange across admin + POS.
 * Does not affect Dark Mode ([data-theme="dark"]).
 * Keeps semantic green (success/cash) and red (danger/delete).
 */

html:not([data-theme="dark"]) {
    --brand-primary: #fc4b00;
    --brand-primary-hover: #e04500;
    --brand-secondary: #e05c00;
    --brand-deep: #c2410c;
    --brand-soft: #fff7ed;
    --brand-soft-2: #ffedd5;
    --brand-soft-3: #fed7aa;
    --brand-border: #fdba74;
    --brand-text: #c2410c;
    --brand-ring: rgba(252, 75, 0, 0.35);
    --primary-color: #fc4b00;
    --secondary-color: #e05c00;
}

/* Page shell — match login soft peach background */
html:not([data-theme="dark"]) body.admin-page,
html:not([data-theme="dark"]) body {
    --dm-bg: #fff5f0;
    --dm-main-bg: #fff5f0;
    --dm-card-hover: #fffaf7;
    --dm-border: #f3e8e0;
    --dm-chart-grid: #ffe8dc;
}

html:not([data-theme="dark"]) .admin-shell,
html:not([data-theme="dark"]) .bg-gradient-to-br.from-blue-50,
html:not([data-theme="dark"]) .bg-gradient-to-br.from-orange-50,
html:not([data-theme="dark"]) div.flex.h-screen.bg-gradient-to-br {
    background: linear-gradient(135deg, #ffe8dc 0%, #fff5f0 35%, #fffaf7 70%, #ffe8dc 100%) !important;
    background-image: linear-gradient(135deg, #ffe8dc 0%, #fff5f0 35%, #fffaf7 70%, #ffe8dc 100%) !important;
}

html:not([data-theme="dark"]) body.admin-page #mainContent > main,
html:not([data-theme="dark"]) #mainContent > main.bg-gray-50,
html:not([data-theme="dark"]) #mainContent > main {
    background-color: transparent !important;
}

html:not([data-theme="dark"]) body.admin-page {
    background-color: #fff5f0 !important;
}

/* Brand text / icons */
html:not([data-theme="dark"]) .text-blue-600,
html:not([data-theme="dark"]) .text-blue-500,
html:not([data-theme="dark"]) .text-blue-700,
html:not([data-theme="dark"]) .text-indigo-600,
html:not([data-theme="dark"]) .text-indigo-500,
html:not([data-theme="dark"]) .text-indigo-700 {
    color: var(--brand-primary) !important;
}

html:not([data-theme="dark"]) .text-blue-800,
html:not([data-theme="dark"]) .text-indigo-800 {
    color: var(--brand-deep) !important;
}

html:not([data-theme="dark"]) .text-blue-100,
html:not([data-theme="dark"]) .text-blue-50 {
    color: #ffedd5 !important;
}

/* Solid buttons / badges */
html:not([data-theme="dark"]) .bg-blue-600,
html:not([data-theme="dark"]) .bg-blue-500,
html:not([data-theme="dark"]) .bg-indigo-600,
html:not([data-theme="dark"]) .bg-indigo-500 {
    background-color: var(--brand-primary) !important;
}

html:not([data-theme="dark"]) .hover\:bg-blue-700:hover,
html:not([data-theme="dark"]) .hover\:bg-blue-600:hover,
html:not([data-theme="dark"]) .hover\:bg-indigo-700:hover,
html:not([data-theme="dark"]) .hover\:bg-indigo-600:hover {
    background-color: var(--brand-primary-hover) !important;
}

html:not([data-theme="dark"]) .bg-blue-100,
html:not([data-theme="dark"]) .bg-blue-50,
html:not([data-theme="dark"]) .bg-indigo-100,
html:not([data-theme="dark"]) .bg-indigo-50 {
    background-color: var(--brand-soft-2) !important;
}

html:not([data-theme="dark"]) .bg-blue-200,
html:not([data-theme="dark"]) .bg-indigo-200 {
    background-color: var(--brand-soft-3) !important;
}

/* Borders */
html:not([data-theme="dark"]) .border-blue-500,
html:not([data-theme="dark"]) .border-blue-600,
html:not([data-theme="dark"]) .border-blue-400,
html:not([data-theme="dark"]) .border-indigo-500,
html:not([data-theme="dark"]) .border-indigo-600 {
    border-color: var(--brand-primary) !important;
}

html:not([data-theme="dark"]) .border-blue-200,
html:not([data-theme="dark"]) .border-blue-100,
html:not([data-theme="dark"]) .border-indigo-200 {
    border-color: var(--brand-border) !important;
}

html:not([data-theme="dark"]) .border-l-4.border-blue-500,
html:not([data-theme="dark"]) .border-l-4.border-blue-600 {
    border-left-color: var(--brand-primary) !important;
}

/* Rings / focus */
html:not([data-theme="dark"]) .ring-blue-500,
html:not([data-theme="dark"]) .focus\:ring-blue-500:focus,
html:not([data-theme="dark"]) .focus\:ring-blue-400:focus,
html:not([data-theme="dark"]) .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--brand-ring) !important;
    box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

html:not([data-theme="dark"]) .focus\:border-blue-500:focus,
html:not([data-theme="dark"]) .focus\:border-blue-300:focus {
    border-color: var(--brand-primary) !important;
}

/* Gradients commonly used on cards / CTAs */
html:not([data-theme="dark"]) .bg-gradient-to-r.from-blue-500.to-blue-600,
html:not([data-theme="dark"]) .bg-gradient-to-r.from-blue-600.to-blue-700,
html:not([data-theme="dark"]) .bg-gradient-to-r.from-blue-600.to-indigo-600,
html:not([data-theme="dark"]) .from-blue-500.to-blue-600,
html:not([data-theme="dark"]) .from-blue-600.to-indigo-600 {
    background-image: linear-gradient(to right, #fc4b00, #e05c00) !important;
}

html:not([data-theme="dark"]) .bg-gradient-to-r.from-blue-500,
html:not([data-theme="dark"]) .bg-gradient-to-br.from-blue-500,
html:not([data-theme="dark"]) .from-blue-500 {
    --tw-gradient-from: #fc4b00 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(252 75 0 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html:not([data-theme="dark"]) .to-blue-600,
html:not([data-theme="dark"]) .to-blue-700,
html:not([data-theme="dark"]) .to-indigo-600 {
    --tw-gradient-to: #e05c00 var(--tw-gradient-to-position) !important;
}

html:not([data-theme="dark"]) .hover\:from-blue-600:hover {
    --tw-gradient-from: #e04500 var(--tw-gradient-from-position) !important;
}

html:not([data-theme="dark"]) .hover\:to-blue-700:hover {
    --tw-gradient-to: #c2410c var(--tw-gradient-to-position) !important;
}

/* Brand gradient text (sidebar logo etc.) */
html:not([data-theme="dark"]) .bg-gradient-to-r.from-blue-600.to-indigo-600.bg-clip-text,
html:not([data-theme="dark"]) .from-blue-600.to-indigo-600.bg-clip-text {
    background-image: linear-gradient(to right, #fc4b00, #ea580c) !important;
}

/* Soft info / alert panels that used blue */
html:not([data-theme="dark"]) .bg-blue-100.border-l-4,
html:not([data-theme="dark"]) .bg-blue-50.border-l-4 {
    background-color: var(--brand-soft) !important;
    color: var(--brand-deep) !important;
}

html:not([data-theme="dark"]) .bg-blue-100.border-l-4.border-blue-500,
html:not([data-theme="dark"]) [role="alert"].bg-blue-100 {
    background-color: #fff7ed !important;
    color: #9a3412 !important;
    border-left-color: #fc4b00 !important;
}

/* Pagination / active chips */
html:not([data-theme="dark"]) .bg-blue-50,
html:not([data-theme="dark"]) .hover\:bg-blue-50:hover,
html:not([data-theme="dark"]) .hover\:bg-blue-100:hover {
    background-color: var(--brand-soft) !important;
}

html:not([data-theme="dark"]) .hover\:text-blue-700:hover,
html:not([data-theme="dark"]) .hover\:text-blue-600:hover {
    color: var(--brand-deep) !important;
}

/* Sidebar brand title only (must keep both classes — do not blank all menu text) */
html:not([data-theme="dark"]) #sidebar h1 span.sidebar-text.bg-clip-text {
    background-image: linear-gradient(to right, #fc4b00, #ea580c) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

html:not([data-theme="dark"]) #sidebar .sidebar-link .sidebar-text {
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

html:not([data-theme="dark"]) .sidebar-link.active {
    background: linear-gradient(135deg, #fc4b00 0%, #e05c00 100%) !important;
    box-shadow: 0 4px 12px rgba(252, 75, 0, 0.35) !important;
}

html:not([data-theme="dark"]) .sidebar-link:hover:not(.active):not(.logout-link) {
    background: #ffedd5 !important;
    color: #9a3412 !important;
}

/* Header accent icons */
html:not([data-theme="dark"]) header .text-blue-600 {
    color: var(--brand-primary) !important;
}

/* Forms / selects focus common patterns */
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus {
    outline-color: var(--brand-primary);
}

/* Links */
html:not([data-theme="dark"]) a.text-blue-600,
html:not([data-theme="dark"]) a.text-blue-500 {
    color: var(--brand-primary) !important;
}

/* Table / report accent numbers often blue */
html:not([data-theme="dark"]) .font-semibold.text-blue-600,
html:not([data-theme="dark"]) .font-bold.text-blue-600 {
    color: var(--brand-primary) !important;
}

/* Checkbox / radio accent where supported */
html:not([data-theme="dark"]) input[type="checkbox"],
html:not([data-theme="dark"]) input[type="radio"] {
    accent-color: var(--brand-primary);
}

/* SweetAlert2 confirm (when default blue appears) */
html:not([data-theme="dark"]) .swal2-confirm.swal2-styled {
    background-color: var(--brand-primary) !important;
}

html:not([data-theme="dark"]) .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

/* POS secondary actions keep muted style; primary pay uses brand via .pos-pay-btn */
html:not([data-theme="dark"]) body.pos-page .pos-secondary-actions #create-quotation-btn {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

html:not([data-theme="dark"]) body.pos-page .pos-secondary-actions #create-quotation-btn:hover {
    background-color: #fff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html:not([data-theme="dark"]) body.pos-page a[href="admin.php"] {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-deep) !important;
}