/* NonprofitFinance customisations on top of the Cork (horizontal light menu) theme. */

:root {
    --hv-border: #e0e6ed;
    --hv-muted: #888ea8;
    --hv-surface: #fff;
    --hv-surface-alt: #f8fafc;
    --hv-gantt-track: #eef1f4;
    --hv-gantt-bar: #c2d5ff;
    --hv-gantt-done: #4361ee;
}
body.dark {
    --hv-border: #1b2e4b;
    --hv-muted: #888ea8;
    --hv-surface: #0e1726;
    --hv-surface-alt: #1b2e4b;
    --hv-gantt-track: #1b2e4b;
    --hv-gantt-bar: #3b3f5c;
    --hv-gantt-done: #4361ee;
}

/* ---------- Tabler font icons sized like Cork's inline SVG icons ---------- */
.ti { line-height: 1; vertical-align: middle; }
.header-container .header .header-item .h-link > .ti,
.header-container .header .search-animated > .ti { font-size: 22px; }
.header-container .header .theme-toggle .ti.dark-mode { display: inline-block; color: var(--dark_500, #3b3f5c); }
.header-container .header .theme-toggle .ti.light-mode { display: none; color: var(--warning_500, #e2a03f); }
body.dark .header-container .header .theme-toggle .ti.dark-mode { display: none; }
body.dark .header-container .header .theme-toggle .ti.light-mode { display: inline-block; }
.topbar-wrapper #topbar .admin-menu-toggle .menu-name .ti { font-size: 20px; margin-right: 6px; }
.topbar-wrapper #topbar .admin-menu-toggle .caret-arrow .ti { font-size: 14px; }
.topbar-wrapper #topbar .admin-menu-toggle[href] { cursor: pointer; }
#sidebar ul.menu-categories li.menu > .dropdown-toggle .ti { font-size: 22px; margin-right: 10px; }
#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:last-child .ti { font-size: 16px; margin-right: 0; transition: transform .2s; }
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"] > div:last-child .ti { transform: rotate(90deg); }
.search-list-icon .ti { font-size: 18px; }

/* Brand */
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #4361ee 0%, #805dca 100%); color: #fff;
}
.brand-mark .ti { font-size: 22px; }
.header-container .theme-text a, #sidebar .theme-text a { letter-spacing: .06em; }

/* Avatar initials */
.user-profile-dropdown .avatar-title { background: #4361ee; color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.profile-sidebar .profile-initials {
    display: flex !important; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #4361ee 0%, #805dca 100%);
}
.profile-sidebar .profile-content a { padding: .6rem 1rem; color: inherit; }

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.4rem; margin: 0; font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-header .subtitle { color: var(--hv-muted); font-size: .9rem; margin-top: .25rem; }
.page-header .subtitle a { font-weight: 500; }

/* ---------- Cards / widgets ---------- */
.card { border-radius: 10px; border: 1px solid var(--hv-border); box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.card-header { font-weight: 600; padding: .9rem 1.25rem; background: transparent; border-bottom: 1px solid var(--hv-border); }
.card-header .ti { color: #4361ee; margin-right: .25rem; }

.stat { padding: 1.1rem 1.25rem; height: 100%; }
.stat .label { color: var(--hv-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat .value { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; }
a.stat:hover { border-color: #4361ee; }

/* KPI tiles used on the dashboard (Cork widget look) */
.kpi { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; height: 100%; }
.kpi-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon .ti { font-size: 26px; }
.kpi .kpi-label { color: var(--hv-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .kpi-value { font-size: 1.65rem; font-weight: 700; line-height: 1.2; }
.kpi-primary .kpi-icon { background: #eaf1ff; color: #4361ee; }
.kpi-success .kpi-icon { background: #ddf5f0; color: #00ab55; }
.kpi-warning .kpi-icon { background: #fff9ed; color: #e2a03f; }
.kpi-info .kpi-icon { background: #e7f7ff; color: #2196f3; }
.kpi-danger .kpi-icon { background: #fff5f5; color: #e7515a; }
body.dark .kpi-icon { background: rgba(255,255,255,.06) !important; }

/* ---------- Tables ---------- */
.table { font-size: .875rem; margin-bottom: 0; }
.table > thead > tr > th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tfoot td { font-weight: 700; }
tr.row-warning > td { background: rgba(226,160,63,.10) !important; }
tr.row-danger > td { background: rgba(231,81,90,.10) !important; }

.progress { height: .5rem; border-radius: 1rem; }
.progress.thin { height: .35rem; }

dl.meta dt { color: var(--hv-muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
dl.meta dd { margin-bottom: .75rem; }

.form-section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #4361ee; font-weight: 700; margin: 1.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--hv-border); }
.form-section-title:first-of-type { margin-top: 0; }
.required::after { content: " *"; color: #e7515a; }

.nav-pills .nav-link { font-weight: 500; }

/* Workflow stepper (expense details) */
.stepper { display: flex; justify-content: space-between; position: relative; }
.stepper .step { flex: 1; text-align: center; position: relative; font-size: .8rem; }
.stepper .step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 60%; right: -40%; height: 2px; background: var(--hv-border); }
.stepper .step.done:not(:last-child)::after { background: #00ab55; }
.stepper .dot { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto .35rem; display: flex; align-items: center; justify-content: center; background: var(--hv-surface-alt); color: var(--hv-muted); border: 2px solid var(--hv-border); position: relative; z-index: 1; }
.stepper .step.done .dot { background: #00ab55; border-color: #00ab55; color: #fff; }
.stepper .step.done .label { font-weight: 600; }

/* ---------- Gantt timeline ---------- */
.gantt-row { display: grid; grid-template-columns: 260px 1fr; align-items: center; border-bottom: 1px solid var(--hv-border); min-height: 2.4rem; }
.gantt-label { padding: .3rem .5rem; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { position: relative; height: 2.4rem; background: repeating-linear-gradient(90deg, transparent 0, transparent 49px, var(--hv-gantt-track) 49px, var(--hv-gantt-track) 50px); }
.gantt-bar { position: absolute; top: .65rem; height: 1.1rem; border-radius: 1rem; background: var(--hv-gantt-bar); overflow: hidden; }
.gantt-bar .done { height: 100%; background: var(--hv-gantt-done); }
.gantt-bar.overdue { box-shadow: 0 0 0 2px #e7515a; }
.gantt-milestone { position: absolute; top: .65rem; width: 1rem; height: 1rem; background: #e2a03f; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e7515a; z-index: 2; }
.gantt-months { display: grid; grid-template-columns: 260px 1fr; font-size: .72rem; color: var(--hv-muted); border-bottom: 1px solid var(--hv-border); text-transform: uppercase; letter-spacing: .03em; }
.gantt-months .scale { position: relative; height: 1.6rem; }
.gantt-months .scale span { position: absolute; top: .3rem; border-left: 1px solid var(--hv-border); padding-left: .3rem; white-space: nowrap; }
.legend-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: middle; margin: 0 .2rem 0 .6rem; }
@media (max-width: 768px) { .gantt-row, .gantt-months { grid-template-columns: 130px 1fr; } }

/* Charts */
.apexcharts-canvas { margin: 0 auto; }
body.dark .apexcharts-text, body.dark .apexcharts-legend-text { fill: #bfc9d4 !important; color: #bfc9d4 !important; }

@media print {
    .header-container, .topbar-wrapper, .sidebar-wrapper, .footer-wrapper, .no-print, .btn { display: none !important; }
    .main-container, .main-content { padding: 0 !important; margin: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none; }
}

/* Cork defines .page-header for breadcrumbs with a clearfix :before that becomes a flex item here. */
.page-header::before, .page-header::after { display: none !important; }
.card.kpi { flex-direction: row; }

/* Dark mode: Cork leaves Bootstrap's dark body text colour on cards and a few elements. */
body.dark .card { --bs-card-color: #bfc9d4; color: #bfc9d4; }
body.dark dl.meta dd, body.dark .stepper .label, body.dark .table, body.dark .modal-content { color: #bfc9d4; }
body.dark .table { --bs-table-color: #bfc9d4; --bs-table-bg: transparent; --bs-table-hover-color: #e0e6ed; }
body.dark .stepper .step.done .label, body.dark .kpi .kpi-value, body.dark .stat .value, body.dark .fw-semibold { color: #e0e6ed; }
body.dark .text-reset { color: inherit !important; }
/* Outrank Cork's "body.dark .page-header { margin: 0 }". */
body .main-content .page-header { margin-bottom: 1.5rem; }
/* Cork's dark theme tints entered values green, which reads like a validation state. */
body.dark .form-control, body.dark .form-select { color: #e0e6ed; }
body.dark .form-control::placeholder { color: #6c7a91; }
/* Group / header rows */
.table > tbody > tr.table-light > td { --bs-table-bg: #f1f2f3; }
body.dark .table > tbody > tr.table-light > td { --bs-table-bg: #1b2e4b; background-color: #1b2e4b; color: #e0e6ed; }
/* Cork's light structure.css declares the base .profile-sidebar after its "active" rule, so it never opens. */
body.profile-sidebar-active .profile-sidebar { right: 0; }

/* Profile panel initials sized to Cork's 100px animated ring */
.profile-sidebar .profile-top .profile-image .profile-initials { width: 92px; height: 92px; border-radius: 50%; position: relative; z-index: 1; border: 4px solid var(--hv-surface); }

/* Slightly tighter table cells than Cork's 10px 21px so finance tables fit without scrolling */
body .main-content .table > thead > tr > th,
body .main-content .table > tbody > tr > td,
body .main-content .table > tfoot > tr > td { padding: .7rem .9rem; }
body .main-content .table-sm > thead > tr > th,
body .main-content .table-sm > tbody > tr > td,
body .main-content .table-sm > tfoot > tr > td { padding: .5rem .75rem; }
/* Cork makes every cell nowrap; let descriptive text wrap, keep numbers and dates on one line. */
body .main-content .table > tbody > tr > td { white-space: normal; }
body .main-content .table > tbody > tr > td.num,
body .main-content .table > tbody > tr > td.text-nowrap { white-space: nowrap; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--hv-border); border-radius: 4px; }
/* Record codes (EXP-2026-00001, WASH-2026…) should never break at their hyphens. */
body .main-content .table td > a:first-child, body .main-content .table td.code { white-space: nowrap; }
/* Amounts never break mid-number; scale down on small screens instead. */
.stat .value, .kpi .kpi-value { white-space: nowrap; font-size: clamp(1.05rem, 4.2vw, 1.5rem); }
@media (max-width: 575.98px) { .stat { padding: .9rem 1rem; } .stat .label { font-size: .68rem; } }

/* Organization branding */
.brand-logo { height: 36px; max-width: 150px; object-fit: contain; }
.header-container .theme-text .brand-name, #sidebar .theme-text .brand-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.auth-logo { max-height: 72px; max-width: 220px; object-fit: contain; }
.logo-preview { min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--hv-border); border-radius: 10px; padding: 1rem; background: var(--hv-surface-alt); }
.logo-preview img { max-height: 80px; max-width: 100%; object-fit: contain; }
.org-print-header { align-items: center; gap: 1rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 2px solid #3b3f5c; font-size: .8rem; color: #3b3f5c; }
.org-print-header img { max-height: 60px; max-width: 180px; object-fit: contain; }
.org-print-header .org-name { font-size: 1.15rem; font-weight: 700; }