/* assets/css/theme.css - Unified Theme Variables & Dark/Light Mode System for Kishovarz */

:root,
body[data-theme="light"],
html[data-theme="light"] {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-subtle: #f1f5f9;
    --input-bg: #f8fafc;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #64748b;
    --primary: #16a34a;
    --primary-hover: #15803d;
    --danger: #dc2626;
    --card-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);

    /* CMS Variable Synchronization */
    --cms-bg: var(--bg);
    --cms-card-bg: var(--surface);
    --cms-surface-subtle: var(--surface-subtle);
    --cms-input-bg: var(--input-bg);
    --cms-border: var(--border);
    --cms-text: var(--text);
    --cms-text-muted: var(--text-secondary);
    --cms-topbar-bg: var(--surface);
    --cms-primary: var(--primary);
    --cms-danger: var(--danger);
}

body[data-theme="dark"],
html[data-theme="dark"],
body.cms-dark,
html.cms-dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-subtle: #162032;
    --input-bg: #334155;
    --border: #334155;
    --text: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #94a3b8;
    --primary: #16a34a;
    --primary-hover: #22c55e;
    --danger: #dc2626;
    --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);

    /* CMS Variable Synchronization */
    --cms-bg: #0f172a;
    --cms-card-bg: #1e293b;
    --cms-surface-subtle: #162032;
    --cms-input-bg: #334155;
    --cms-border: #334155;
    --cms-text: #f8fafc;
    --cms-text-muted: #94a3b8;
    --cms-topbar-bg: #1e293b;
    --cms-primary: #16a34a;
    --cms-danger: #dc2626;
}

/* Base Body Application */
body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==================== GLOBAL DARK THEME RULES (PUBLIC + ADMIN DASHBOARD) ==================== */
body[data-theme="dark"] .navbar,
body[data-theme="dark"] .sticky-top.navbar {
    background-color: rgba(30, 41, 59, 0.96) !important;
    border-bottom: 1px solid var(--border) !important;
}

body[data-theme="dark"] .navbar .nav-link {
    color: var(--text) !important;
}

body[data-theme="dark"] .navbar .nav-link:hover,
body[data-theme="dark"] .navbar .nav-link.active {
    color: #4ade80 !important;
    background-color: rgba(22, 163, 74, 0.15) !important;
}

body[data-theme="dark"] .navbar-collapse {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

body[data-theme="dark"] .breadcrumb-container {
    background-color: rgba(22, 32, 50, 0.9) !important;
    border-color: var(--border) !important;
}

body[data-theme="dark"] footer,
body[data-theme="dark"] footer.bg-white {
    background-color: var(--surface) !important;
    border-top-color: var(--border) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .card,
body[data-theme="dark"] .static-page-content,
body[data-theme="dark"] .article-card {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    box-shadow: var(--card-shadow) !important;
}

body[data-theme="dark"] .card-header,
body[data-theme="dark"] .card-footer {
    background-color: var(--surface-subtle) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .bg-light {
    background-color: var(--surface-subtle) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .text-dark:not(.btn-warning):not(.bg-warning):not(.badge):not(.btn-light),
body[data-theme="dark"] .article-card h5 a,
body[data-theme="dark"] .content-text h4,
body[data-theme="dark"] .content-text h5 {
    color: var(--text) !important;
}

body[data-theme="dark"] .btn-warning.text-dark,
body[data-theme="dark"] .badge.bg-warning.text-dark {
    color: #0f172a !important;
}

body[data-theme="dark"] .legacy-portal-banner,
html[data-theme="dark"] .legacy-portal-banner {
    background: linear-gradient(90deg, #272011 0%, #1e293b 100%) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #fef3c7 !important;
}

body[data-theme="dark"] .legacy-portal-banner .legacy-banner-icon,
html[data-theme="dark"] .legacy-portal-banner .legacy-banner-icon {
    color: #fbbf24 !important;
}

body[data-theme="dark"] .legacy-portal-banner .legacy-banner-text,
html[data-theme="dark"] .legacy-portal-banner .legacy-banner-text {
    color: #fef3c7 !important;
}

body[data-theme="dark"] .legacy-portal-banner .legacy-banner-btn,
html[data-theme="dark"] .legacy-portal-banner .legacy-banner-btn {
    color: #fde68a !important;
    border: 1.5px solid #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.16) !important;
}

body[data-theme="dark"] .legacy-portal-banner .legacy-banner-btn:hover,
html[data-theme="dark"] .legacy-portal-banner .legacy-banner-btn:hover {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #0f172a !important;
}

body[data-theme="dark"] .text-muted,
body[data-theme="dark"] .text-secondary,
body[data-theme="dark"] .content-text p,
body[data-theme="dark"] .content-text li {
    color: var(--text-secondary) !important;
}

body[data-theme="dark"] .border,
body[data-theme="dark"] .border-top,
body[data-theme="dark"] .border-bottom,
body[data-theme="dark"] .border-start,
body[data-theme="dark"] .border-end {
    border-color: var(--border) !important;
}

body[data-theme="dark"] .list-group-item {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .portal-article-item:hover {
    background-color: rgba(22, 163, 74, 0.08) !important;
}

/* Tables in Dark Mode */
body[data-theme="dark"] .table {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-striped-color: var(--text) !important;
    --bs-table-active-bg: rgba(255, 255, 255, 0.05) !important;
    --bs-table-active-color: var(--text) !important;
    --bs-table-hover-bg: rgba(22, 163, 74, 0.12) !important;
    --bs-table-hover-color: #ffffff !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

body[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

body[data-theme="dark"] .table thead,
body[data-theme="dark"] .table thead tr,
body[data-theme="dark"] .table thead th,
body[data-theme="dark"] .table th {
    background-color: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

/* Forms & Inputs in Dark Mode */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid #475569 !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25) !important;
}

body[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary) !important;
}

body[data-theme="dark"] .input-group-text {
    background-color: #273549 !important;
    border: 1px solid #475569 !important;
    color: #cbd5e1 !important;
}

/* Buttons & Badges in Dark Mode */
body[data-theme="dark"] .btn-light {
    background-color: var(--input-bg) !important;
    border-color: #475569 !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .btn-light:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-outline-dark,
body[data-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .btn-outline-dark:hover,
body[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--input-bg) !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .badge.bg-light {
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    border-color: #475569 !important;
}

/* Modals & Dropdowns in Dark Mode */
body[data-theme="dark"] .modal-content {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

body[data-theme="dark"] .modal-header:not(.bg-success):not(.bg-dark):not(.bg-danger):not(.bg-primary) {
    background-color: var(--surface-subtle) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .modal-body {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

body[data-theme="dark"] .modal-footer {
    background-color: var(--surface-subtle) !important;
    border-top-color: var(--border) !important;
}

body[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

body[data-theme="dark"] .dropdown-item {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .dropdown-item:hover,
body[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--input-bg) !important;
    color: #ffffff !important;
}

/* ==================== SCROLLABLE MODAL FORM & NEXT BUTTON VISIBILITY FIX ==================== */
/* Ensures modals where <form> wraps .modal-header/.modal-body/.modal-footer scroll properly and never clip buttons */
.modal-dialog-scrollable {
    max-height: calc(100vh - 2rem) !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.modal-dialog-scrollable .modal-content > form,
#articleModal #articleForm,
#confModal #confForm {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 2rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
#articleModal .modal-header,
#confModal .modal-header {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1056 !important;
}

.modal-dialog-scrollable .modal-content > form > .modal-body,
#articleModal .modal-body,
#confModal .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 1050 !important;
}

.modal-dialog-scrollable .modal-content > form > .modal-footer,
#articleModal .modal-footer,
#confModal .modal-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1065 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    background-color: var(--surface-subtle, #f8fafc) !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
}

#articleWizardNav,
#confWizardNav {
    position: sticky !important;
    top: -1rem !important;
    z-index: 1060 !important;
    background-color: var(--surface-subtle, #f1f5f9) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

#articleFooterNextBtn,
#articleTopNextBtn,
#confFooterNextBtn,
.wizard-next-btn {
    position: relative !important;
    z-index: 1070 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#articleFooterNextBtn.d-none,
#articleTopNextBtn.d-none,
#confFooterNextBtn.d-none,
.wizard-next-btn.d-none {
    display: none !important;
}