/* =========================================================
   VII STAR HERITAGE - GLOBAL UI THEME
   Typography + Light/Dark appearance
   ========================================================= */

:root {
    font-size: 14px;
    --vii-bg: #eef2f7;
    --vii-surface: #ffffff;
    --vii-surface-2: #f8fafc;
    --vii-border: #e2e8f0;
    --vii-text: #172033;
    --vii-muted: #64748b;
    --vii-sidebar: #0b1326;
    --vii-sidebar-border: #1e293b;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-size: .875rem;
    line-height: 1.5;
    background: var(--vii-bg);
    color: var(--vii-text);
}

/* Keep common Tailwind typography from becoming oversized. */
.text-5xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
.text-4xl { font-size: 1.95rem !important; line-height: 1.15 !important; }
.text-3xl { font-size: 1.65rem !important; line-height: 1.2 !important; }
.text-2xl { font-size: 1.35rem !important; line-height: 1.25 !important; }
.text-xl  { font-size: 1.18rem !important; line-height: 1.3 !important; }
.text-lg  { font-size: 1.05rem !important; line-height: 1.35 !important; }

.vii-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
    box-sizing: border-box !important;
}

.vii-theme-toggle:hover {
    background: #f1f5f9 !important;
    color: #2563eb !important;
    border-color: #cbd5e1 !important;
}

.vii-theme-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: block;
}

.vii-theme-label {
    display: none !important;
}

.vii-brand-logo {
    width: 52px !important;
    height: 52px !important;
    padding: 7px !important;
    border-radius: 13px !important;
    background: #0b1326 !important;
    border: 1px solid #334155 !important;
    object-fit: contain !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html.vii-dark {
    color-scheme: dark;
    --vii-bg: #070d18;
    --vii-surface: #0f172a;
    --vii-surface-2: #111c2f;
    --vii-border: #263449;
    --vii-text: #e5edf7;
    --vii-muted: #94a3b8;
}

html.vii-dark,
html.vii-dark body {
    background: #070d18 !important;
    color: #e5edf7 !important;
}

/* Main page surfaces */
html.vii-dark .bg-white,
html.vii-dark [class~="bg-white"] {
    background-color: #0f172a !important;
}

html.vii-dark .bg-gray-50,
html.vii-dark [class~="bg-gray-50"] {
    background-color: #111c2f !important;
}

html.vii-dark .bg-gray-100,
html.vii-dark [class~="bg-gray-100"] {
    background-color: #070d18 !important;
}

html.vii-dark .bg-slate-50,
html.vii-dark [class~="bg-slate-50"] {
    background-color: #0b1424 !important;
}

html.vii-dark .bg-slate-100,
html.vii-dark [class~="bg-slate-100"] {
    background-color: #111c2f !important;
}

html.vii-dark .bg-slate-200,
html.vii-dark [class~="bg-slate-200"] {
    background-color: #1b2940 !important;
}

/* Common text colours */
html.vii-dark .text-gray-900,
html.vii-dark .text-gray-800,
html.vii-dark .text-gray-700,
html.vii-dark .text-slate-900,
html.vii-dark .text-slate-800,
html.vii-dark .text-slate-700,
html.vii-dark .text-slate-600 {
    color: #e5edf7 !important;
}

html.vii-dark .text-gray-600,
html.vii-dark .text-gray-500,
html.vii-dark .text-gray-400,
html.vii-dark .text-slate-500,
html.vii-dark .text-slate-400 {
    color: #94a3b8 !important;
}

/* Preserve intentional white text on coloured buttons/sidebar */
html.vii-dark .text-white {
    color: #ffffff !important;
}

/* Borders */
html.vii-dark .border-gray-100,
html.vii-dark .border-gray-200,
html.vii-dark .border-gray-300,
html.vii-dark .border-slate-100,
html.vii-dark .border-slate-200,
html.vii-dark .border-slate-300 {
    border-color: #263449 !important;
}

/* Cards, tables and common custom components */
html.vii-dark .card,
html.vii-dark .bg-faded + *,
html.vii-dark table,
html.vii-dark .modal-content {
    border-color: #263449;
}

html.vii-dark .card {
    background: #0f172a !important;
    color: #e5edf7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

html.vii-dark .table-head,
html.vii-dark thead {
    background: #111c2f !important;
    color: #dbe7f5 !important;
}

html.vii-dark tbody tr {
    border-color: #263449 !important;
}

html.vii-dark tbody tr:hover {
    background: #142137 !important;
}

/* Forms */
html.vii-dark input,
html.vii-dark select,
html.vii-dark textarea {
    background-color: #0b1424 !important;
    color: #e5edf7 !important;
    border-color: #334155 !important;
}

html.vii-dark input::placeholder,
html.vii-dark textarea::placeholder {
    color: #718096 !important;
}

html.vii-dark input:focus,
html.vii-dark select:focus,
html.vii-dark textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* Common dropdowns/modals */
html.vii-dark .header-dropdown,
html.vii-dark [role="dialog"],
html.vii-dark .dropdown-menu,
html.vii-dark .modal,
html.vii-dark .menu-dropdown {
    background: #0f172a !important;
    color: #e5edf7 !important;
    border-color: #263449 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
}

html.vii-dark .dropdown-link {
    color: #dbe7f5 !important;
}

html.vii-dark .dropdown-link:hover {
    background: #17243a !important;
}

/* Header */
html.vii-dark header {
    background: #0b1326 !important;
    border-color: #263449 !important;
    color: #e5edf7 !important;
}

html.vii-dark #globalSearch {
    background: #111c2f !important;
    color: #e5edf7 !important;
    border-color: #334155 !important;
}

html.vii-dark .header-icon,
html.vii-dark .vii-theme-toggle {
    background: #111c2f !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.vii-dark .header-icon:hover,
html.vii-dark .vii-theme-toggle:hover {
    background: #1a2940 !important;
    color: #ffffff !important;
}

/* Sidebar always remains dark; its logo no longer has a white box. */
aside.bg-slate-900,
html.vii-dark aside.bg-slate-900 {
    background: #0b1326 !important;
}

html.vii-dark .vii-brand-logo {
    background: #0b1326 !important;
    border-color: #334155 !important;
}

/* Light-mode logo also stays dark */
.vii-brand-logo {
    background: #0b1326 !important;
}

/* Scrollbars */
html.vii-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.vii-dark ::-webkit-scrollbar-track {
    background: #070d18;
}

html.vii-dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

/* Make very light decorative panels dark without affecting blue buttons. */
html.vii-dark .bg-blue-50,
html.vii-dark .bg-indigo-50,
html.vii-dark .bg-emerald-50,
html.vii-dark .bg-green-50,
html.vii-dark .bg-red-50,
html.vii-dark .bg-yellow-50,
html.vii-dark .bg-purple-50 {
    background-color: #111c2f !important;
}

/* Links remain visible */
html.vii-dark a:not(.bg-blue-600):not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-red-600) {
    color: #93c5fd;
}

/* Don't recolour sidebar links */
html.vii-dark aside a {
    color: inherit;
}

/* Chart containers */
html.vii-dark canvas {
    filter: none;
}

/* Mobile */
@media (max-width: 768px) {
    :root,
    html {
        font-size: 14px;
    }

    .vii-theme-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .vii-theme-icon {
        width: 17px !important;
        height: 17px !important;
    }
}

/* Variables used by the Finance Verification interface */
html.vii-dark {
    --navy: #07111f;
    --navy2: #0d1b2d;
    --navy3: #12243a;
    --bg: #070d18;
    --card: #0f172a;
    --text: #e5edf7;
    --muted: #94a3b8;
    --border: #263449;
    --shadow: 0 12px 32px rgba(0,0,0,.24);
    --shadow2: 0 20px 50px rgba(0,0,0,.45);
}

/* Finance Verification page */
html.vii-dark .vc-topbar,
html.vii-dark .vc-card,
html.vii-dark .vc-form-head,
html.vii-dark .vc-btn,
html.vii-dark .vc-profile,
html.vii-dark .vc-menu-btn,
html.vii-dark .vc-modal-card {
    background: #0f172a !important;
    color: #e5edf7 !important;
    border-color: #263449 !important;
}

html.vii-dark .vc-topbar {
    background: #0b1326 !important;
}

html.vii-dark .vc-h1,
html.vii-dark .vc-member h2,
html.vii-dark .vc-section-title2,
html.vii-dark .vc-form-title,
html.vii-dark .vc-metric-value,
html.vii-dark .vc-table td:last-child,
html.vii-dark .vc-stat-value,
html.vii-dark .vc-audit-value {
    color: #e5edf7 !important;
}

html.vii-dark .vc-top-sub,
html.vii-dark .vc-lead,
html.vii-dark .vc-breadcrumb,
html.vii-dark .vc-member-meta,
html.vii-dark .vc-table td:first-child,
html.vii-dark .vc-form-help,
html.vii-dark .vc-label,
html.vii-dark .vc-help,
html.vii-dark .vc-effect,
html.vii-dark .vc-audit-label,
html.vii-dark .vc-top-chip,
html.vii-dark .vc-profile-role {
    color: #94a3b8 !important;
}

html.vii-dark .vc-top-chip {
    background: #111c2f !important;
    border-color: #334155 !important;
}

html.vii-dark .vc-section-head,
html.vii-dark .vc-table td,
html.vii-dark .vc-form-head,
html.vii-dark .vc-form-footer,
html.vii-dark .vc-audit-item {
    border-color: #263449 !important;
}

html.vii-dark .vc-statbox,
html.vii-dark .vc-preview {
    background: #111c2f !important;
    border-color: #263449 !important;
}

html.vii-dark .vc-input,
html.vii-dark .vc-textarea,
html.vii-dark .vc-select {
    background: #0b1424 !important;
    color: #e5edf7 !important;
    border-color: #334155 !important;
}

html.vii-dark .vc-input::placeholder,
html.vii-dark .vc-textarea::placeholder {
    color: #718096 !important;
}

html.vii-dark .vc-modal-card {
    box-shadow: 0 25px 70px rgba(0,0,0,.55) !important;
}

html.vii-dark .vc-brand img {
    background: #0b1326 !important;
    border: 1px solid #334155 !important;
}

html.vii-dark .vc-footer {
    color: #64748b !important;
}