/* MediVantageRX look and feel: Inter, soft white cards on a light grey page, one blue accent. All colours are tokens so the
   dark theme (html[data-theme="dark"], set by js/common/theme-init.js) only has to redefine them. Bootstrap 5.1 has no
   built-in dark mode, so the "dark overrides" section at the end restyles the components this app uses. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --mvrx-blue: #1d4ed8;
    --mvrx-blue-hover: #1e40af;
    --mvrx-teal: #0d9488;
    --brand: var(--mvrx-blue);
    --brand-soft: #e8efff;
    --on-brand: #ffffff;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f3f5f8;
    --input-bg: #ffffff;
    --border: #e6e9ef;
    --text: #0f172a;
    --muted: #64748b;
    --faint: #94a3b8;
    --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    --radius: .85rem;
    --ring: rgba(29, 78, 216, .22);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --mvrx-blue: #5b8cff;
    --mvrx-blue-hover: #7aa2ff;
    --mvrx-teal: #2dd4bf;
    --brand: #4c7dff;
    --brand-soft: rgba(76, 125, 255, .16);
    --on-brand: #ffffff;
    --bg: #0b1020;
    --surface: #131a2c;
    --surface-2: #1a2339;
    --input-bg: #0f1627;
    --border: #263250;
    --text: #e7ebf5;
    --muted: #9aa7c0;
    --faint: #6b7a99;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);
    --ring: rgba(76, 125, 255, .35);
}

/* ---- base ---- */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "cv05", "cv11";
    background: var(--bg);
    color: var(--text);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; color: var(--text); }
a { color: var(--brand); }
a:hover { color: var(--mvrx-blue-hover); }
hr { border-color: var(--border); opacity: 1; }
table td, table th, .stat-value { font-variant-numeric: tabular-nums; }
::selection { background: var(--brand-soft); }

/* ---- top bar ---- */
.mvrx-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1020; min-height: 58px; }
.mvrx-nav .navbar-brand { color: var(--text) !important; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.mvrx-nav .navbar-brand span, .mvrx-nav .brand-rx { color: var(--brand); }
.mvrx-nav .navbar-brand small { color: var(--muted) !important; font-weight: 500; letter-spacing: 0; }
.mvrx-nav .text-white, .mvrx-nav .text-white-50 { color: var(--muted) !important; }
.mvrx-nav .btn-outline-light, .mvrx-nav .btn-light {
    color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .65rem; font-weight: 500;
}
.mvrx-nav .btn-outline-light:hover, .mvrx-nav .btn-light:hover, .mvrx-nav .btn-outline-light:focus { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 31px; padding: 0; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* ---- sidebar ---- */
.mvrx-sidebar { width: 250px; min-height: calc(100vh - 58px); background: var(--surface); border-right: 1px solid var(--border); flex-shrink: 0; padding: .35rem .5rem; }
.mvrx-sidebar .nav-link { color: var(--text); padding: .6rem .9rem; margin: .1rem 0; border-radius: .7rem; font-weight: 500; transition: background .12s, color .12s; }
.mvrx-sidebar .nav-link:hover { background: var(--surface-2); color: var(--text); }
.mvrx-sidebar .nav-link.active { color: var(--on-brand); background: var(--brand); font-weight: 600; box-shadow: 0 4px 12px var(--ring); }
.mvrx-sidebar .nav-section { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); padding: 1.1rem .9rem .3rem; list-style: none; }
.mvrx-content { min-width: 0; }
@media (max-width: 767.98px) { .mvrx-sidebar { width: 100%; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); } }

/* ---- cards, stats ---- */
.card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header, .card-footer { background: transparent; border-color: var(--border); }
.auth-card { max-width: 420px; margin: 6vh auto; }

.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-card .stat-label { color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.stat-card.accent-teal { border-left: 4px solid var(--mvrx-teal); }
.stat-card.accent-blue { border-left: 4px solid var(--brand); }
.stat-card.accent-amber { border-left: 4px solid #f59e0b; }
.stat-card.accent-red { border-left: 4px solid #ef4444; }

/* ---- buttons, forms ---- */
.btn { border-radius: .65rem; font-weight: 500; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--mvrx-blue-hover); border-color: var(--mvrx-blue-hover); color: var(--on-brand); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-outline-secondary { color: var(--text); border-color: var(--border); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-light { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-teal { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-teal:hover, .btn-teal:focus { background: var(--mvrx-blue-hover); border-color: var(--mvrx-blue-hover); color: var(--on-brand); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .22rem var(--ring); }

.form-control, .form-select, .input-group-text {
    background-color: var(--input-bg); border-color: var(--border); color: var(--text); border-radius: .65rem;
}
.input-group > .form-control, .input-group > .form-select { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: .65rem; border-bottom-left-radius: .65rem; }
.input-group > :last-child { border-top-right-radius: .65rem; border-bottom-right-radius: .65rem; }
.form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text); border-color: var(--brand); }
.form-control::placeholder { color: var(--faint); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--muted); }
.form-label { font-weight: 500; }
.form-check-input { background-color: var(--input-bg); border-color: var(--faint); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.text-muted { color: var(--muted) !important; }

/* ---- tables ---- */
.table {
    --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); --bs-table-active-bg: var(--surface-2);
    color: var(--text); border-color: var(--border);
}
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table thead th { white-space: nowrap; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text); color: var(--text); border-color: var(--border); }
table.dataTable thead th { white-space: nowrap; }
table.dataTable.table > tbody > tr { background-color: transparent; }
.empty-state { color: var(--faint); text-align: center; padding: 2rem 1rem; }
.page-link { background: var(--surface); border-color: var(--border); color: var(--text); }
.page-link:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.page-item.disabled .page-link { background: var(--surface-2); color: var(--faint); border-color: var(--border); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: var(--muted); }

/* ---- overlays and menus ---- */
.modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 1rem; }
.modal-header, .modal-footer { border-color: var(--border); }
.dropdown-menu { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: .8rem; box-shadow: var(--shadow); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-divider { border-color: var(--border); }
.list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); }
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link.active { background: var(--surface); color: var(--text); border-color: var(--border) var(--border) var(--surface); }
.nav-tabs .nav-link:hover { border-color: var(--border) var(--border) transparent; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.text-dark { color: var(--text) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
/* Bootstrap 5.1 (bundled) predates the text-bg-* helpers that the views use for badges. */
.badge { font-weight: 600; border-radius: .5rem; }
.text-bg-primary { background-color: var(--brand) !important; color: var(--on-brand) !important; }
.text-bg-secondary { background-color: #64748b !important; color: #fff !important; }
.text-bg-success { background-color: #16a34a !important; color: #fff !important; }
.text-bg-danger { background-color: #dc2626 !important; color: #fff !important; }
.text-bg-warning { background-color: #f59e0b !important; color: #1f2937 !important; }
.text-bg-info { background-color: #0ea5e9 !important; color: #fff !important; }
.text-bg-dark { background-color: #1e293b !important; color: #fff !important; }
.text-bg-light { background-color: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .text-bg-secondary { background-color: #3a4766 !important; }
html[data-theme="dark"] .text-bg-dark { background-color: #334155 !important; }
pre { color: var(--text); }
.app-loader { position: fixed; inset: 0; background: rgba(11, 16, 32, .55); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.app-loader.d-none { display: none !important; }

/* ---- select2 / sweetalert2 ---- */
.select2-container--bootstrap-5 .select2-selection { background-color: var(--input-bg); border-color: var(--border); color: var(--text); border-radius: .65rem; }
.select2-container--bootstrap-5 .select2-selection__rendered, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--text); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--brand); box-shadow: 0 0 0 .22rem var(--ring); }
.select2-container--bootstrap-5 .select2-dropdown { background-color: var(--surface); border-color: var(--border); color: var(--text); }
.select2-container--bootstrap-5 .select2-dropdown .select2-search__field { background: var(--input-bg); color: var(--text); border-color: var(--border); }
.select2-container--bootstrap-5 .select2-results__option { color: var(--text); }
.select2-container--bootstrap-5 .select2-results__option--highlighted, .select2-container--bootstrap-5 .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { background-color: var(--surface-2); color: var(--text); }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--brand) !important; color: var(--on-brand) !important; }
.swal2-popup { background: var(--surface); color: var(--text); border-radius: 1rem; }
.swal2-title, .swal2-html-container { color: var(--text); }
.swal2-input, .swal2-textarea { background: var(--input-bg); color: var(--text); border-color: var(--border); }

/* ---- tenant shell ---- */
.brand-logo { height: 28px; width: auto; max-width: 120px; background: #fff; border-radius: 6px; padding: 2px; }
.logo-preview img { max-height: 120px; }
.perm-matrix th, .perm-matrix td { text-align: center; vertical-align: middle; white-space: nowrap; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }
.perm-extra { font-size: .8rem; }

/* ---- dark overrides: parts of Bootstrap 5.1 that hard-code light colours ---- */
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa7c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; }
html[data-theme="dark"] .table-success { --bs-table-bg: rgba(34, 197, 94, .14); --bs-table-color: var(--text); color: var(--text); }
html[data-theme="dark"] .table-warning { --bs-table-bg: rgba(245, 158, 11, .15); --bs-table-color: var(--text); color: var(--text); }
html[data-theme="dark"] .table-danger { --bs-table-bg: rgba(239, 68, 68, .16); --bs-table-color: var(--text); color: var(--text); }
html[data-theme="dark"] .table-info, html[data-theme="dark"] .table-primary { --bs-table-bg: rgba(76, 125, 255, .15); --bs-table-color: var(--text); color: var(--text); }
html[data-theme="dark"] .table-secondary { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text); color: var(--text); }
html[data-theme="dark"] .alert { border-color: var(--border); }
html[data-theme="dark"] .alert-success { background: rgba(34, 197, 94, .14); color: #86efac; }
html[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .15); color: #fcd34d; }
html[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, .16); color: #fca5a5; }
html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { background: rgba(76, 125, 255, .15); color: #a9c1ff; }
html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .text-primary { color: var(--brand) !important; }
html[data-theme="dark"] .brand-logo { background: #fff; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33415f; border-radius: 8px; border: 2px solid var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }