/* Oskies ERP — light / dark theme and small-screen layout.
   Dark mode uses Bootstrap 5.3's data-bs-theme="dark" plus the overrides
   below for the places the app uses fixed light colours. */

:root { --app-brand: #1f6f4a; --app-nav: #1f6f4a; --app-page: #f5f6f8; --app-thead: #eef2ee; --app-soft: #eef6f1; --app-track: #eef1f4; }
body { background: var(--app-page); }
.app-navbar { background: var(--app-nav); }
table.table thead { background: var(--app-thead); }

[data-bs-theme="dark"] {
  --app-nav: #0f2a1e; --app-page: #0e1512; --app-thead: #1a2621; --app-soft: #16241d; --app-track: #26332d;
  --bs-body-bg: #111a16; --bs-body-color: #dbe5df; --bs-secondary-color: #9fb0a7; --bs-tertiary-bg: #16211c;
  --bs-border-color: #2a3832; --bs-secondary-bg: #1a2621; --bs-emphasis-color: #f1f6f3;
  --bs-link-color: #6fc39a; --bs-link-hover-color: #93d6b4; --bs-link-color-rgb: 111, 195, 154;
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background: var(--app-page); }
[data-bs-theme="dark"] .card { background: #16211c; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu { background: #16211c; }
[data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: #1a2621 !important; color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .bg-light.text-dark, [data-bs-theme="dark"] .badge.bg-light { color: #dbe5df !important; }
[data-bs-theme="dark"] .text-muted { color: #9fb0a7 !important; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #dbe5df; --bs-table-border-color: #2a3832;
  --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table > thead.table-light > tr > *,
[data-bs-theme="dark"] tfoot.table-light > tr > *, [data-bs-theme="dark"] tr.table-light > * {
  --bs-table-bg: #1a2621; --bs-table-color: #e6eee9; background-color: #1a2621 !important; color: #e6eee9 !important; border-color: #2a3832; }
[data-bs-theme="dark"] .table-danger > *, [data-bs-theme="dark"] tr.table-danger > * { --bs-table-bg: rgba(220, 53, 69, .22); background-color: rgba(220, 53, 69, .22) !important; color: #ffd6d9 !important; }
[data-bs-theme="dark"] .table-warning > *, [data-bs-theme="dark"] tr.table-warning > * { --bs-table-bg: rgba(255, 193, 7, .16); background-color: rgba(255, 193, 7, .16) !important; color: #ffe9a8 !important; }
[data-bs-theme="dark"] .table-success > *, [data-bs-theme="dark"] tr.table-success > * { --bs-table-bg: rgba(25, 135, 84, .22); background-color: rgba(25, 135, 84, .22) !important; color: #c9f2dc !important; }
[data-bs-theme="dark"] .table-info > *, [data-bs-theme="dark"] tr.table-info > * { background-color: rgba(13, 202, 240, .15) !important; color: #c6f1fb !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f1814; border-color: #2e3d36; color: #e6eee9; }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: #1a2621; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #b8c7bf; --bs-btn-border-color: #3a4a43; --bs-btn-hover-bg: #2a3832; --bs-btn-hover-border-color: #3a4a43; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #33443c; --bs-btn-active-color: #fff; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #dbe5df; --bs-btn-border-color: #4a5b53; --bs-btn-hover-bg: #dbe5df; --bs-btn-hover-color: #111a16; }
[data-bs-theme="dark"] .alert-info { background: #10303a; color: #bfe9f5; border-color: #1c4a57; }
[data-bs-theme="dark"] .alert-success { background: #12301f; color: #bdebd1; border-color: #1f4a33; }
[data-bs-theme="dark"] .alert-warning { background: #33290c; color: #f7e3a3; border-color: #4d3e12; }
[data-bs-theme="dark"] .alert-danger { background: #3a1519; color: #f6c6cb; border-color: #5a2027; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-top { border-color: #2a3832 !important; }
[data-bs-theme="dark"] .dept-head { background: var(--app-soft) !important; }
[data-bs-theme="dark"] .bar-cell .track { background: var(--app-track) !important; }
[data-bs-theme="dark"] img.logo-on-dark { background: #fff; }

/* theme switch in the top bar */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; padding: 0; }
.theme-toggle:hover { background: rgba(255, 255, 255, .12); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .moon { display: inline; }

/* subnav: wraps on desktop, swipes sideways on phones */
.subnav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.subnav a { margin-right: 0 !important; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 767.98px) {
  body { font-size: .95rem; }
  .app-main { padding: .9rem .6rem 2rem !important; overflow-x: hidden; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: .5rem !important; scrollbar-width: thin; }
  .subnav a { padding: .35rem .7rem; border-radius: 999px; background: var(--bs-tertiary-bg, #eef1ef); text-decoration: none; font-size: .88rem; }
  .subnav a.fw-bold { background: var(--app-brand); color: #fff; }
  .table { font-size: .85rem; }
  .table td, .table th { white-space: nowrap; }
  .card { border-radius: .6rem; }
  .card.p-3 { padding: .8rem !important; }
  h5 { font-size: 1.1rem; }
  .btn { min-height: 36px; }
  .btn-sm { min-height: 32px; }
  .form-control, .form-select { font-size: 16px; } /* stops iPhone zooming into fields */
  .row.g-2 > [class*="col-auto"] { flex: 1 1 45%; }
  .row.g-2 > [class*="col-auto"] .form-select, .row.g-2 > [class*="col-auto"] .form-control { width: 100%; }
  .d-flex.justify-content-between { gap: .5rem; flex-wrap: wrap; }
}

[data-bs-theme="dark"] .viz-root { --surface-1: #16211c; --text-primary: #e6eee9; --text-secondary: #a9b8b0; --text-muted: #8a9a92; --gridline: #2a3832; --baseline: #3a4a43; }
.table td.text-end, .table th.text-end { white-space: nowrap; }
[data-bs-theme="dark"] .form-check-input { background-color: #0f1814; border-color: #5a6d64; }
[data-bs-theme="dark"] .form-check-input:checked { background-color: #2f9e6a; border-color: #2f9e6a; }
th.sorted-asc::after { content: " ▲"; font-size: .7em; opacity: .7; }
th.sorted-desc::after { content: " ▼"; font-size: .7em; opacity: .7; }
.user-chip { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #2fbf71; color: #062014; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.user-chip:hover { filter: brightness(1.08); }
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .app-navbar .nav-link { padding-left: .4rem !important; padding-right: .4rem !important; font-size: .9rem; }
  .app-navbar .navbar-brand { margin-right: .5rem; }
}
@media (max-width: 767.98px) {
  .period-bar form { flex: 1 1 100%; }
  .period-bar form input.form-control { flex: 1 1 0; min-width: 0; width: auto !important; }
  .period-bar .btn-group { width: 100%; }
  .period-bar .btn-group .btn { flex: 1 1 auto; }
}

/* collapsed (hamburger) top menu — below 1200px wide */
@media (max-width: 1199.98px) {
  .navbar-collapse { max-height: 80vh; overflow-y: auto; }
  .navbar-collapse .dropdown-menu { border: 0; background: rgba(255, 255, 255, .06); }
  .navbar-collapse .dropdown-item { color: #e8f2ec; padding: .5rem 1rem; }
  .navbar-collapse .dropdown-header { color: #9fc7b1; }
  .navbar-collapse .dropdown-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .app-navbar .nav-link { padding-left: .28rem !important; padding-right: .28rem !important; font-size: .84rem; }
  .app-navbar .navbar-brand { font-size: 1.1rem; }
  .app-navbar .navbar-brand img { display: none; }
}
/* the narrowest full-width bar (1200–1299px) has one more item since the budget module */
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .app-navbar .nav-link { padding-left: .2rem !important; padding-right: .2rem !important; font-size: .8rem; }
  .app-navbar .navbar-brand { font-size: 1rem; margin-right: .5rem; }
  .nav-search input { width: 4.5rem !important; }
}

/* ---------- tidy table rows ---------- */
/* action buttons (and the little forms that hold them) stay on one line */
.table td > form:not(.row):not(.d-flex):not(.d-inline-flex) { display: inline-block; margin: 0; }
.table td:has(> .btn), .table td:has(> form > .btn), .table td:has(> form > button) { white-space: nowrap; }
/* document numbers and amounts never break across lines */
.table td:first-child > a { white-space: nowrap; }
.table td { vertical-align: middle; }
/* labels in a filter / form row line up with fields that have none */
form.row.align-items-end .form-check { margin-bottom: .35rem; }

/* ---- Calendars (flatpickr) ---- */
input.js-cal.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M4 .5a.5.5 0 0 1 1 0V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5zM2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px;
  padding-right: 2rem; min-width: 9.5rem; cursor: pointer;
}
input.js-cal.form-control-sm { min-width: 8.5rem; background-position: right .5rem center; background-size: 12px; }
input.js-cal.form-control[readonly] { background-color: var(--bs-body-bg); }
.flatpickr-calendar { font-family: inherit; z-index: 1090; }  /* above Bootstrap modals */
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--app-brand); border-color: var(--app-brand); }
.flatpickr-day.today { border-color: var(--app-brand); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
[data-bs-theme=dark] .flatpickr-calendar { background: #2b3035; box-shadow: 0 3px 13px rgba(0,0,0,.6); }
[data-bs-theme=dark] .flatpickr-calendar.arrowTop:after { border-bottom-color: #2b3035; }
[data-bs-theme=dark] .flatpickr-calendar.arrowBottom:after { border-top-color: #2b3035; }
[data-bs-theme=dark] .flatpickr-months .flatpickr-month, [data-bs-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme=dark] .flatpickr-current-month input.cur-year, [data-bs-theme=dark] span.flatpickr-weekday,
[data-bs-theme=dark] .flatpickr-day { color: #dee2e6; fill: #dee2e6; background: transparent; }
[data-bs-theme=dark] .flatpickr-months .flatpickr-prev-month svg, [data-bs-theme=dark] .flatpickr-months .flatpickr-next-month svg { fill: #dee2e6; }
[data-bs-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #2b3035; }
[data-bs-theme=dark] .flatpickr-day:hover { background: #495057; border-color: #495057; }
[data-bs-theme=dark] .flatpickr-day.flatpickr-disabled, [data-bs-theme=dark] .flatpickr-day.prevMonthDay,
[data-bs-theme=dark] .flatpickr-day.nextMonthDay { color: #6c757d; }
[data-bs-theme=dark] .flatpickr-day.selected { color: #fff; background: var(--app-brand); }

/* ---- Search box in the top bar ---- */
.nav-search input { width: 11rem; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.nav-search input::placeholder { color: rgba(255,255,255,.75); }
.nav-search input:focus { background: #fff; color: #1b1b1b; box-shadow: none; border-color: #fff; }
.nav-search input:focus::placeholder { color: #8a8a8a; }
@media (min-width: 1200px) and (max-width: 1499.98px) { .nav-search input { width: 6rem; } }
@media (min-width: 1500px) and (max-width: 1699.98px) { .nav-search input { width: 8.5rem; } }
@media (max-width: 1199.98px) { .nav-search input { width: 9rem; } }
@media (max-width: 575.98px) { .nav-search input { width: 6.5rem; } }

/* Type-to-search drop-downs (static/select-search.js) */
.ss-box { position: fixed; z-index: 2000; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: 4px; }
.ss-list { max-height: 280px; overflow-y: auto; margin-top: 4px; }
.ss-opt { padding: 4px 8px; border-radius: .25rem; cursor: pointer; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt.ss-hi { background: var(--bs-primary); color: #fff; }
.ss-opt.ss-sel:not(.ss-hi) { font-weight: 600; }
.ss-opt.ss-dis { color: var(--bs-secondary-color); cursor: default; }
.ss-grp { float: right; font-size: .75rem; opacity: .7; margin-left: 8px; }
.ss-none { padding: 4px 8px; color: var(--bs-secondary-color); font-size: .875rem; }

/* a long menu name has a short form for the narrower full-width bars */
.app-navbar .nav-short { display: none; }
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .app-navbar .nav-long { display: none; }
  .app-navbar .nav-short { display: inline; }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .app-navbar .nav-link { padding-left: .15rem !important; padding-right: .15rem !important; font-size: .76rem; }
}
@media (min-width: 1300px) and (max-width: 1499.98px) {
  .app-navbar .nav-link { padding-left: .22rem !important; padding-right: .22rem !important; font-size: .8rem; }
}
@media (min-width: 1500px) and (max-width: 1919.98px) {
  .app-navbar .nav-link { padding-left: .28rem !important; padding-right: .28rem !important; font-size: .85rem; }
}
@media (min-width: 1500px) and (max-width: 1599.98px) {
  .app-navbar .nav-link { padding-left: .22rem !important; padding-right: .22rem !important; font-size: .82rem; }
}