/**
 * Force Light Theme for SEC Ghana Recruitment Portal
 * Overrides browser/system dark mode preference
 */

/* ============================================
   FORCE LIGHT MODE - OVERRIDE DARK MODE
   ============================================ */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
    /* Force light mode colors regardless of system preference */
    --bg-primary: #ffffff !important;
    --bg-secondary: #f8f9fa !important;
    --bg-tertiary: #e9ecef !important;
    --text-primary: #212529 !important;
    --text-secondary: #6c757d !important;
    --text-muted: #adb5bd !important;
    --border-color: #dee2e6 !important;
    --card-bg: #ffffff !important;
    --card-shadow: rgba(0, 0, 0, 0.1) !important;
    --input-bg: #ffffff !important;
    --input-border: #ced4da !important;
    --gold-primary: #d4a853 !important;
    --gold-secondary: #f1c40f !important;
    --blue-primary: #2c3e50 !important;
    --blue-secondary: #34495e !important;
    --link-color: #2c3e50 !important;
    --link-hover: #1a252f !important;
    
    /* Force light color scheme */
    color-scheme: light !important;
}

/* Override system dark mode preference */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light !important;
    }
}

/* ============================================
   FORCE LIGHT MODE ON ALL ELEMENTS
   ============================================ */
body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */
.card,
.forgot-password-card,
.change-password-card,
.login-card,
.register-card {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px var(--card-shadow) !important;
}

.card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.bg-white {
    background-color: var(--card-bg) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(212, 168, 83, 0.25) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.form-floating > label {
    color: var(--text-secondary) !important;
}

.form-text,
.text-muted,
small.text-muted {
    color: var(--text-muted) !important;
}

/* ============================================
   TABLES
   ============================================ */
.table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table > :not(caption) > * > * {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-secondary) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bg-tertiary) !important;
}

.table thead {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    border-color: var(--border-color) !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: var(--text-primary) !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: var(--text-primary) !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modal-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

.modal-footer {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.modal-backdrop {
    background-color: #000 !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-top-color: var(--border-color) !important;
}

/* ============================================
   NAVIGATION & SIDEBAR
   ============================================ */
.navbar {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.sidebar {
    background-color: var(--card-bg) !important;
    border-right-color: var(--border-color) !important;
}

.nav-pills .nav-link {
    color: var(--text-primary) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--gold-primary) !important;
}

/* ============================================
   BREADCRUMBS & PAGINATION
   ============================================ */
.breadcrumb {
    background-color: var(--bg-secondary) !important;
}

.breadcrumb-item a {
    color: var(--link-color) !important;
}

.page-link {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.page-link:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--link-color) !important;
}

a:hover {
    color: var(--link-hover) !important;
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-color) !important;
}

/* ============================================
   TEXT UTILITIES
   ============================================ */
.text-dark {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* Keep gold and blue theme colors visible in dark mode */
.text-primary,
.bg-primary {
    /* Keep original colors - don't override */
}

/* ============================================
   LIST GROUPS
   ============================================ */
.list-group-item {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.list-group-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    /* Keep original colors for visibility */
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
    background-color: var(--bg-secondary) !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
.tooltip-inner {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.popover {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.popover-body {
    color: var(--text-primary) !important;
}

/* ============================================
   ACCORDIONS
   ============================================ */
.accordion-item {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.accordion-button {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--gold-primary) !important;
    color: white !important;
}

/* ============================================
   OFFCANVAS
   ============================================ */
.offcanvas {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON - HIDDEN
   ============================================ */
.dark-mode-toggle {
    display: none !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}
