/* =========================================================================
   Tender Brawus — Theme System
   Light / Dark / Auto (follows operating system)
   - Design tokens
   - Works with the DZ/Gymove template's native dark palette
   - Responsive & mobile refinements
   ========================================================================= */

/* ------------------------------ Tokens ---------------------------------- */
:root,
html[data-theme="light"] {
    --tb-bg: #f4f6fb;
    --tb-surface: #ffffff;
    --tb-surface-2: #f9fafb;
    --tb-elevated: #ffffff;

    --tb-text: #2f2b3d;
    --tb-text-muted: #7d7a89;
    --tb-heading: #1a1730;

    --tb-primary: var(--ds-brand, #415598);
    --tb-primary-hover: var(--ds-brand-hover, #33447d);
    --tb-primary-soft: rgba(65, 85, 152, 0.12);
    --tb-link: #2f4aa0;

    --tb-success: #1f9d6b;
    --tb-success-soft: rgba(31, 157, 107, 0.12);
    --tb-danger: #dc3545;
    --tb-danger-soft: rgba(220, 53, 69, 0.12);
    --tb-warning: #c98a00;
    --tb-warning-soft: rgba(201, 138, 0, 0.12);
    --tb-info: #2f80ed;
    --tb-info-soft: rgba(47, 128, 237, 0.12);

    --tb-border: #e6e8f0;
    --tb-border-strong: #d5d9e6;

    --tb-input-bg: #ffffff;
    --tb-input-text: #2f2b3d;

    --tb-header-bg: #ffffff;
    --tb-sidebar-bg: #ffffff;
    --tb-footer-bg: #f9fafb;

    --tb-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --tb-radius: 12px;
    --tb-radius-sm: 8px;

    --tb-scrollbar: #cbd5e1;
    --tb-scrollbar-hover: #94a3b8;
    --tb-overlay: rgba(15, 23, 42, 0.5);

    color-scheme: light;
}

html[data-theme="dark"] {
    --tb-bg: #101322;
    --tb-surface: #1e2746;
    --tb-surface-2: #181f39;
    --tb-elevated: #232c4d;

    --tb-text: #e6e8ef;
    --tb-text-muted: #9aa3b8;
    --tb-heading: #ffffff;

    --tb-primary: #7c8fe0;
    --tb-primary-hover: #93a3ea;
    --tb-primary-soft: rgba(124, 143, 224, 0.18);
    --tb-link: #93a8ff;

    --tb-success: #2bc155;
    --tb-success-soft: rgba(43, 193, 85, 0.16);
    --tb-danger: #f5496b;
    --tb-danger-soft: rgba(245, 73, 107, 0.16);
    --tb-warning: #ffbc11;
    --tb-warning-soft: rgba(255, 188, 17, 0.16);
    --tb-info: #2ea7c5;
    --tb-info-soft: rgba(46, 167, 197, 0.16);

    --tb-border: #333a54;
    --tb-border-strong: #414a6b;

    --tb-input-bg: #181f39;
    --tb-input-text: #ffffff;

    --tb-header-bg: #181f39;
    --tb-sidebar-bg: #181f39;
    --tb-footer-bg: #181f39;

    --tb-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tb-scrollbar: #333a54;
    --tb-scrollbar-hover: #46506f;
    --tb-overlay: rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}

/* --------------------------- Base surfaces ------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--tb-bg);
}

html,
body {
    background-color: var(--tb-bg);
}

body {
    color: var(--tb-text);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#main-wrapper,
.content-body {
    background-color: transparent;
    color: var(--tb-text);
}

.nav-header,
.header {
    background-color: var(--tb-header-bg) !important;
    transition: background-color 0.2s ease;
}

.deznav {
    background-color: var(--tb-sidebar-bg) !important;
    transition: background-color 0.2s ease;
}

.footer {
    background-color: var(--tb-footer-bg) !important;
    color: var(--tb-text-muted);
    transition: background-color 0.2s ease;
}

/* ------------------------------ Typography ------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--tb-heading);
}

.text-muted,
.text-gray,
small.text-muted {
    color: var(--tb-text-muted) !important;
}

a {
    color: var(--tb-link);
    transition: color 0.15s ease;
}

a:hover,
a:focus {
    color: var(--tb-primary-hover);
}

.text-primary {
    color: var(--tb-primary) !important;
}

/* Header page title and dark-on-light helpers that the template hard-codes */
html[data-theme="dark"] .header .dashboard_bar,
html[data-theme="dark"] .header-left .dashboard_bar {
    color: var(--tb-heading);
}

html[data-theme="dark"] .text-black {
    color: var(--tb-text) !important;
}

/* ------------------------------ Surfaces -------------------------------- */
html body .card,
html body .page-titles,
html body .modal-content,
html body .profile,
html body .list-group-item,
html body .accordion .card,
html body .dropdown-menu {
    background-color: var(--tb-surface);
    color: var(--tb-text);
    border-color: var(--tb-border);
}

html body .card {
    box-shadow: var(--tb-card-shadow);
}

html body .card-header,
html body .card-footer,
html body .modal-header,
html body .modal-footer {
    border-color: var(--tb-border);
    background-color: transparent;
}

html body .dropdown-item {
    color: var(--tb-text);
}

html body .dropdown-item:hover,
html body .dropdown-item:focus {
    background-color: var(--tb-primary-soft);
    color: var(--tb-heading);
}

html body .list-group-item-action:hover,
html body .list-group-item-action:focus {
    background-color: var(--tb-primary-soft);
    color: var(--tb-heading);
}

/* ------------------------------- Borders -------------------------------- */
html body .border,
html body .border-top,
html body .border-right,
html body .border-bottom,
html body .border-left,
html body .border-0 { border-color: var(--tb-border) !important; }

html body hr {
    border-top-color: var(--tb-border);
}

/* ------------------------------- Forms ---------------------------------- */
html body .form-control,
html body .custom-select,
html body .custom-file-label,
html body .selectpicker,
html body .bootstrap-select .dropdown-toggle,
html body textarea.form-control {
    background-color: var(--tb-input-bg);
    color: var(--tb-input-text);
    border-color: var(--tb-border);
}

html body .form-control:focus,
html body .custom-select:focus {
    background-color: var(--tb-input-bg);
    color: var(--tb-input-text);
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 0.2rem var(--tb-primary-soft);
}

html body .form-control::placeholder {
    color: var(--tb-text-muted);
    opacity: 0.85;
}

/* ------------------------------- Tables --------------------------------- */
html body .table {
    color: var(--tb-text);
}

html body .table thead th {
    color: var(--tb-heading);
    border-color: var(--tb-border);
}

html body .table td,
html body .table th {
    border-color: var(--tb-border);
}

html body .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tb-surface-2);
}

html body .table-hover tbody tr:hover {
    background-color: var(--tb-primary-soft);
    color: var(--tb-text);
}

/* --------------------------- Pagination / nav --------------------------- */
html body .page-link {
    background-color: var(--tb-surface);
    color: var(--tb-text);
    border-color: var(--tb-border);
}

html body .page-link:hover {
    background-color: var(--tb-primary-soft);
    color: var(--tb-primary);
    border-color: var(--tb-border);
}

html body .page-item.active .page-link {
    background-color: var(--tb-primary);
    border-color: var(--tb-primary);
    color: #fff;
}

html body .nav-tabs {
    border-color: var(--tb-border);
}

html body .nav-tabs .nav-link.active {
    background-color: var(--tb-surface);
    border-color: var(--tb-border) var(--tb-border) var(--tb-surface);
    color: var(--tb-heading);
}

html body .nav-tabs .nav-link {
    color: var(--tb-text-muted);
}

/* ------------------------------- Alerts --------------------------------- */
html body .alert-success {
    background-color: var(--tb-success-soft);
    color: var(--tb-success);
    border-color: var(--tb-success);
}

html body .alert-danger {
    background-color: var(--tb-danger-soft);
    color: var(--tb-danger);
    border-color: var(--tb-danger);
}

html body .alert-warning {
    background-color: var(--tb-warning-soft);
    color: var(--tb-warning);
    border-color: var(--tb-warning);
}

html body .alert-info {
    background-color: var(--tb-info-soft);
    color: var(--tb-info);
    border-color: var(--tb-info);
}

/* ----------------------------- Theme toggle ----------------------------- */
#theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--tb-border);
    background-color: var(--tb-surface-2);
    color: var(--tb-text);
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}

#theme-toggle-btn:hover {
    background-color: var(--tb-primary-soft);
    color: var(--tb-primary);
    border-color: var(--tb-primary);
    transform: translateY(-1px);
}

#theme-toggle-btn:active {
    transform: translateY(0);
}

#theme-toggle-btn:focus-visible {
    outline: 3px solid var(--tb-primary-soft);
    outline-offset: 2px;
}

#theme-toggle-btn .theme-icon {
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* --------------------------- Scrollbars --------------------------------- */
html {
    scrollbar-color: var(--tb-scrollbar) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--tb-scrollbar);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tb-scrollbar-hover);
    background-clip: content-box;
}

/* --------------------------- Accessibility ------------------------------ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--tb-primary-soft);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================ Responsive ================================ */

/* Fluid page gutters so layouts scale smoothly between breakpoints */
.content-body .container-fluid {
    padding-left: clamp(12px, 2.2vw, 30px);
    padding-right: clamp(12px, 2.2vw, 30px);
}

.content-body img {
    max-width: 100%;
    height: auto;
}

/* Keep wide tables usable on small screens */
html body .table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1199.98px) {
    .header .dashboard_bar,
    .header-left .dashboard_bar {
        font-size: clamp(18px, 1.1rem + 0.6vw, 26px);
    }
}

@media (max-width: 991.98px) {
    .content-body {
        padding-top: 5rem;
    }

    .content-body .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header .header-content {
        padding-left: 4rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px) {
    .content-body .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-body {
        padding: 1rem;
    }

    .page-titles {
        padding: 0.875rem 1rem;
    }

    .header-right .nav-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-profile .header-info {
        display: none;
    }

    .admin-dashboard .page-heading,
    .page-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-dashboard .page-heading h2,
    .page-heading h2 {
        font-size: 24px;
    }

    .modal-dialog {
        margin: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .card-body {
        padding: 0.875rem;
    }

    .content-body .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn {
        min-height: 40px;
    }

    .admin-dashboard .page-heading h2,
    .page-heading h2 {
        font-size: 22px;
    }

    #theme-toggle-btn {
        width: 36px;
        height: 36px;
    }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================= Page-level dark theme overrides ====================== */
/* These pages ship their own inline styles with hard-coded light colors.
   Selectors below are scoped to html[data-theme="dark"] and have higher
   specificity, so they win even though the page styles come later. */

/* --- Admin dashboard (/admin/dashboard) --------------------------------- */
html[data-theme="dark"] .admin-dashboard {
    --admin-primary: #93a8ff;
    --admin-text: var(--tb-text);
    --admin-muted: var(--tb-text-muted);
    --admin-border: var(--tb-border);
    --admin-surface: var(--tb-surface);
}

html[data-theme="dark"] .admin-dashboard .stat-card,
html[data-theme="dark"] .admin-dashboard .panel-card {
    box-shadow: var(--tb-card-shadow);
}

html[data-theme="dark"] .admin-dashboard .stat-icon {
    background: var(--tb-primary-soft);
}

html[data-theme="dark"] .admin-dashboard .action-button {
    background: var(--tb-surface-2);
}

html[data-theme="dark"] .admin-dashboard .action-button:hover,
html[data-theme="dark"] .admin-dashboard .action-button:focus {
    background: var(--tb-primary-soft);
    border-color: var(--tb-primary);
    color: var(--tb-heading);
}

html[data-theme="dark"] .admin-dashboard .ticket-status--closed {
    color: var(--tb-text-muted);
}

html[data-theme="dark"] .admin-dashboard .btn-admin-primary,
html[data-theme="dark"] .admin-dashboard .badge-count {
    background: var(--ds-brand, #415598);
    border-color: var(--ds-brand, #415598);
    color: #fff;
}

html[data-theme="dark"] .admin-dashboard .btn-admin-primary:hover,
html[data-theme="dark"] .admin-dashboard .btn-admin-primary:focus {
    background: #34467f;
    border-color: #34467f;
    color: #fff;
}

/* --- Admin tickets (/admin/tickets) ------------------------------------- */
html[data-theme="dark"] .admin-tickets {
    --primary: #93a8ff;
    --text: var(--tb-text);
    --muted: var(--tb-text-muted);
    --border: var(--tb-border);
    --surface-soft: var(--tb-surface-2);
}

html[data-theme="dark"] .admin-tickets .tickets-card {
    background: var(--tb-surface);
    box-shadow: var(--tb-card-shadow);
}

html[data-theme="dark"] .admin-tickets .ticket-tabs {
    border-color: rgba(147, 168, 255, 0.45);
}

html[data-theme="dark"] .admin-tickets .ticket-tab {
    background: var(--tb-surface);
    border-color: rgba(147, 168, 255, 0.45);
}

html[data-theme="dark"] .admin-tickets .ticket-tab:hover,
html[data-theme="dark"] .admin-tickets .ticket-tab:focus {
    background: var(--tb-primary-soft);
}

html[data-theme="dark"] .admin-tickets .ticket-tab.active,
html[data-theme="dark"] .admin-tickets .ticket-tab.active:hover,
html[data-theme="dark"] .admin-tickets .ticket-tab.active:focus {
    background: var(--ds-brand, #415598);
    color: #fff;
}

html[data-theme="dark"] .admin-tickets .tickets-table td {
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .admin-tickets .ticket-view {
    background: var(--ds-brand, #415598);
    color: #fff;
}

html[data-theme="dark"] .admin-tickets .ticket-view:hover,
html[data-theme="dark"] .admin-tickets .ticket-view:focus {
    background: #34467f;
    color: #fff;
}

/* --- Tender request form (/tendernew) ----------------------------------- */
html[data-theme="dark"] .admin-request-page {
    --primary: #93a8ff;
    --text: var(--tb-text);
    --muted: var(--tb-text-muted);
    --border: var(--tb-border);
    --surface: var(--tb-surface);
}

html[data-theme="dark"] .admin-request-card {
    border-color: var(--tb-border);
    box-shadow: var(--tb-card-shadow);
}

html[data-theme="dark"] .admin-request-card__header {
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .admin-request-form__group input,
html[data-theme="dark"] .admin-request-form__group textarea {
    background: var(--tb-input-bg);
    color: var(--tb-text);
}

html[data-theme="dark"] .admin-request-form__group input::placeholder,
html[data-theme="dark"] .admin-request-form__group textarea::placeholder {
    color: var(--tb-text-muted);
    opacity: 0.85;
}

html[data-theme="dark"] .admin-request-submit,
html[data-theme="dark"] .admin-request-submit:hover,
html[data-theme="dark"] .admin-request-submit:focus {
    background: var(--ds-brand, #415598);
}

html[data-theme="dark"] .admin-request-submit:hover,
html[data-theme="dark"] .admin-request-submit:focus {
    background: #34467f;
}

/* --- Verification lists (/verifyAuth, /verifyMinus) --------------------- */
html[data-theme="dark"] .verification-list-card {
    background: var(--tb-surface);
    border-color: var(--tb-border);
    box-shadow: var(--tb-card-shadow);
}

html[data-theme="dark"] .verification-list-head {
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .verification-list-head h1 {
    color: var(--tb-heading);
}

html[data-theme="dark"] .verification-list-table th {
    background: var(--tb-surface-2);
    color: var(--tb-text-muted);
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .verification-list-table td {
    color: var(--tb-text-muted);
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .verification-list-table tbody tr:hover {
    background: var(--tb-primary-soft);
}

html[data-theme="dark"] .verification-list-table td.verification-list-title {
    color: var(--tb-heading);
}

html[data-theme="dark"] .verification-list-table td[colspan] {
    color: var(--tb-text-muted) !important;
}

html[data-theme="dark"] .verification-reason {
    background: var(--tb-danger-soft);
    color: var(--tb-danger);
}

html[data-theme="dark"] .verification-list-btn {
    background: var(--ds-brand, #415598);
    color: #fff !important;
}

html[data-theme="dark"] .verification-list-btn:hover,
html[data-theme="dark"] .verification-list-btn:focus {
    background: #34467f;
    color: #fff !important;
}

/* --- Verification detail cards (/cardClient, /cardClose) ---------------- */
html[data-theme="dark"] .verification-admin-title {
    color: var(--tb-heading);
}

html[data-theme="dark"] .verification-admin-subtitle {
    color: var(--tb-text-muted);
}

html[data-theme="dark"] .verification-admin-email {
    color: var(--tb-primary);
}

html[data-theme="dark"] .verification-admin-card {
    background: var(--tb-surface);
    border-color: var(--tb-border);
    box-shadow: var(--tb-card-shadow);
}

html[data-theme="dark"] .verification-admin-card__head {
    border-bottom-color: var(--tb-border);
}

html[data-theme="dark"] .verification-admin-card__head h2 {
    color: var(--tb-heading);
}

html[data-theme="dark"] .verification-admin-status {
    background: var(--tb-primary-soft);
    color: var(--tb-primary);
}

html[data-theme="dark"] .verification-admin-status.is-rejected {
    background: var(--tb-danger-soft);
    color: var(--tb-danger);
}

html[data-theme="dark"] .verification-admin-label {
    color: var(--tb-text-muted);
}

html[data-theme="dark"] .verification-admin-value {
    background: var(--tb-input-bg);
    border-color: var(--tb-border);
    color: var(--tb-text);
}

html[data-theme="dark"] .verification-admin-btn--danger {
    background: var(--tb-danger-soft);
    color: var(--tb-danger);
}

html[data-theme="dark"] .verification-admin-btn--danger:hover,
html[data-theme="dark"] .verification-admin-btn--danger:focus {
    background: rgba(245, 73, 107, 0.24);
    color: var(--tb-danger);
}

html[data-theme="dark"] .verification-admin-btn--primary {
    background: var(--ds-brand, #415598);
    color: #fff;
}

html[data-theme="dark"] .verification-admin-btn--primary:hover,
html[data-theme="dark"] .verification-admin-btn--primary:focus {
    background: var(--ds-brand-hover, #344984);
    color: #fff;
}

html[data-theme="dark"] #rejectVerificationModal .modal-content {
    background: var(--tb-surface);
    border-color: var(--tb-border);
}

html[data-theme="dark"] #rejectVerificationModal .modal-header,
html[data-theme="dark"] #rejectVerificationModal .modal-footer {
    border-color: var(--tb-border);
}

html[data-theme="dark"] #rejectVerificationModal .close {
    color: var(--tb-text);
    text-shadow: none;
    opacity: 0.8;
}