/* Villa Tracker -- deep green and white, terracotta for the things you act on.
   The same palette as the Flutter app (lib/src/theme.dart). */
:root {
  --vt-primary: #1E4D47;
  --vt-ink: #142421;
  --vt-accent: #C4572F;
  --vt-accent-dark: #A9471F;
  --vt-muted: #66736F;
  --vt-page: #F4F3EF;
  --vt-line: #E3E6EB;
  --vt-rail: #142421;
  --vt-rail-hi: #263A35;
  --viz-material: #2A78D6;
  --viz-wages: #EB6834;
  --viz-other: #1BAF7A;
  --viz-used: #EDA100;
  --bs-body-bg: var(--vt-page);
  --bs-body-color: var(--vt-ink);
  --bs-primary: #1E4D47;
  --bs-primary-rgb: 30, 77, 71;
  --bs-success: #2E7D32;
  --bs-success-rgb: 46, 125, 50;
  --bs-warning-rgb: 217, 131, 0;
  --bs-danger: #C62828;
  --bs-danger-rgb: 198, 40, 40;
  --bs-border-color: var(--vt-line);
  --bs-link-color: var(--vt-primary);
  --bs-link-color-rgb: 30, 77, 71;
  --bs-link-hover-color: var(--vt-accent);
}
body { background: var(--vt-page); font-size: .925rem; }
body.lang-ta { font-family: 'Noto Sans Tamil', system-ui, sans-serif; }

/* Shell */
.shell { display: flex; min-height: 100vh; }
.rail { width: 240px; background: var(--vt-rail); color: #fff; position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.rail-offcanvas { background: var(--vt-rail); color: #fff; width: 260px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 24px; }
.brand-name { font-weight: 800; font-size: 1.1rem; }
.brand-sub { color: #9DB3AE; font-size: .75rem; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--vt-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.logo.sm { width: 28px; height: 28px; font-size: .9rem; border-radius: 8px; }
.rail-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 8px; color: #CBD8D4; text-decoration: none; font-weight: 500; }
.rail-link i { font-size: 1.1rem; color: #B2C3BF; }
.rail-link:hover { background: #1c302c; color: #fff; }
.rail-link.active { background: var(--vt-rail-hi); color: #fff; font-weight: 700; }
.rail-link.active i { color: var(--vt-accent); }
.rail-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 14px 14px; border-top: 1px solid #2A3B37; }
.rail-user .name { font-weight: 600; font-size: .85rem; }
.rail-user .role { color: #9DB3AE; font-size: .75rem; }
.rail-more { color: #B2C3BF; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(196,87,47,.18); color: var(--vt-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.content { flex: 1; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 1020; background: #fff; display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--vt-line); }
.page { padding: 22px 26px 60px; max-width: 1440px; }
@media (max-width: 575.98px) { .page { padding: 14px 12px 60px; } }
.view-only { background: rgba(30,77,71,.08); color: var(--vt-primary); font-weight: 600; }
.view-only.dark { background: var(--vt-rail-hi); color: #CBD8D4; }

/* Headings & cards */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 1.45rem; font-weight: 800; margin: 0; }
.page-head .sub { color: var(--vt-muted); margin: 2px 0 0; font-size: .85rem; }
.card { border: 1px solid rgba(0,0,0,.07); border-radius: 12px; box-shadow: none; }
.card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-title-row h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.card-title-row .icon { color: var(--vt-primary); }
.card-title-row .sub { color: var(--vt-muted); font-size: .78rem; }
.muted { color: var(--vt-muted); }
.small-muted { color: var(--vt-muted); font-size: .8rem; }

/* Buttons: terracotta for the one action that matters on a screen */
.btn-accent { --bs-btn-bg: var(--vt-accent); --bs-btn-border-color: var(--vt-accent); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--vt-accent-dark); --bs-btn-hover-border-color: var(--vt-accent-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--vt-accent-dark); --bs-btn-disabled-bg: var(--vt-accent); --bs-btn-disabled-border-color: var(--vt-accent); font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--vt-primary); --bs-btn-border-color: var(--vt-primary); --bs-btn-hover-bg: #173c37; --bs-btn-hover-border-color: #173c37; --bs-btn-active-bg: #173c37; }
.btn-outline-primary { --bs-btn-color: var(--vt-primary); --bs-btn-border-color: var(--vt-primary); --bs-btn-hover-bg: var(--vt-primary); --bs-btn-hover-border-color: var(--vt-primary); --bs-btn-active-bg: var(--vt-primary); }
.bg-primary { background-color: var(--vt-primary) !important; }
.text-primary { color: var(--vt-primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 .2rem rgba(30,77,71,.15); }
.form-label { font-weight: 600; font-size: .82rem; color: #475569; margin-bottom: 4px; }

/* Stat tiles */
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { border-color: rgba(30,77,71,.35); }
.stat .card-body { padding: 14px; }
.stat-label { color: var(--vt-muted); font-weight: 600; font-size: .8rem; display: flex; align-items: center; gap: 8px; }
.stat-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(30,77,71,.09); color: var(--vt-primary); }
.stat-value { font-size: 1.5rem; font-weight: 800; margin-top: 8px; line-height: 1.15; }
.stat-sub { color: var(--vt-muted); font-size: .78rem; margin-top: 2px; }
.tone-warning .stat-icon { background: rgba(217,131,0,.12); color: #B06A00; }
.tone-danger .stat-icon { background: rgba(198,40,40,.1); color: var(--bs-danger); }
.tone-success .stat-icon { background: rgba(46,125,50,.1); color: var(--bs-success); }
.tone-material .stat-icon { background: rgba(42,120,214,.1); color: var(--viz-material); }
.tone-wages .stat-icon { background: rgba(235,104,52,.12); color: var(--viz-wages); }
.tone-other .stat-icon { background: rgba(27,175,122,.12); color: #128a5f; }

/* Progress */
.progress.slim { height: 7px; background: rgba(30,77,71,.12); border-radius: 7px; }
.pct { width: 44px; text-align: right; font-weight: 700; font-size: .8rem; }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--vt-primary) calc(var(--p) * 1%), #E4EEFB 0);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.ring.lg { width: 110px; height: 110px; font-size: 1.4rem; }

/* Lists */
.today-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: .85rem; }
.today-chip.done { background: rgba(46,125,50,.08); color: var(--bs-success); }
.today-chip.todo { background: rgba(217,131,0,.1); color: #8A5A00; }
.activity { display: flex; gap: 10px; padding: 9px 4px; border-radius: 8px; text-decoration: none; color: inherit; }
.activity:hover { background: #F7F7F4; }
.activity .ic { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic.entry { background: rgba(30,77,71,.09); color: var(--vt-primary); }
.ic.purchase { background: rgba(42,120,214,.1); color: var(--viz-material); }
.entry-card { text-decoration: none; color: inherit; display: block; }
.entry-card:hover { border-color: rgba(30,77,71,.35); }
.date-block { width: 58px; text-align: center; border-radius: 8px; padding: 6px 0; background: rgba(30,77,71,.06); flex-shrink: 0; }
.date-block .dow { font-size: .68rem; font-weight: 700; color: var(--vt-muted); text-transform: uppercase; }
.date-block .day { font-size: 1.35rem; font-weight: 800; color: var(--vt-primary); line-height: 1.1; }
.date-block .mon { font-size: .72rem; color: var(--vt-muted); }
.date-block.today { background: rgba(196,87,47,.1); }
.date-block.today .day { color: var(--vt-accent); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 600; background: rgba(30,77,71,.08); color: var(--vt-primary); }
.chip.warn { background: rgba(217,131,0,.12); color: #8A5A00; }
.chip.danger { background: rgba(198,40,40,.1); color: var(--bs-danger); }
.chip.ok { background: rgba(46,125,50,.1); color: var(--bs-success); }
.chip.muted { background: #EEF0F2; color: var(--vt-muted); }
.chip.accent { background: rgba(196,87,47,.12); color: var(--vt-accent); }
.facts { display: flex; flex-wrap: wrap; gap: 12px; color: var(--vt-muted); font-size: .8rem; }

/* Tables */
.table { --bs-table-bg: transparent; font-size: .87rem; }
.table thead th { background: var(--vt-page); font-size: .78rem; font-weight: 700; white-space: nowrap; border-bottom-width: 1px; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table tfoot td { font-weight: 800; background: rgba(30,77,71,.05); }
.table-report td { max-width: 380px; }

/* Photos */
.thumb { width: 104px; height: 104px; border-radius: 8px; object-fit: cover; border: 1px solid var(--vt-line); background: var(--vt-page); }
.thumb.lg { width: 150px; height: 150px; }
@media (max-width: 575.98px) { .thumb.lg { width: 100px; height: 100px; } }

/* The entry form's line rows */
.line-row { background: #FAFAF7; border: 1px solid var(--vt-line); border-radius: 10px; padding: 10px 6px 2px 10px; margin-bottom: 10px; }
.line-row .form-control, .line-row .form-select { font-size: .88rem; }
.line-note { font-size: .78rem; font-weight: 600; margin: -4px 0 8px; }

/* Bars drawn in HTML (ranked lists) */
.hbar { height: 11px; border-radius: 0 4px 4px 0; min-width: 3px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-box { position: relative; height: 240px; }
.chart-box.donut { height: 230px; max-width: 230px; }

/* Login */
.login-bg { min-height: 100vh; background: linear-gradient(135deg, var(--vt-ink), var(--vt-primary)); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 410px; border-radius: 14px; }

/* Print: reports print cleanly without the rail and buttons */
@media print {
  .rail, .topbar, .no-print, .alert { display: none !important; }
  .page { padding: 0; max-width: none; }
  .card { break-inside: avoid; border-color: #ccc; }
  body { background: #fff; }
}

/* Inputs stay white on the off-white page (Bootstrap reads --bs-body-bg for them). */
.form-control, .form-select, .input-group-text { background-color: #fff; }
.form-control:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select { background-color: #F1F2F0; }
.card { --bs-card-bg: #fff; background-color: #fff; }
.modal-content, .dropdown-menu { background-color: #fff; }

/* ---- Layout v4: the rail is fixed, so it never scrolls out of sight; the
   page never scrolls sideways (wide tables scroll inside their own box);
   and the footer sits at the bottom of every page, however short. ------- */
:root { --rail-w: 240px; --redfox: #e63946; --redfox-ember: #ff6b57; }
html, body { overflow-x: hidden; }
.shell { display: block; min-height: 100vh; }
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); height: auto; overflow-y: auto; z-index: 1030; }
.content { margin-left: var(--rail-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }
@media (max-width: 991.98px) { .content { margin-left: 0; } }
.page { flex: 1 0 auto; width: 100%; max-width: 1440px; }
.table-responsive { max-width: 100%; }

.site-footer { margin-top: auto; border-top: 1px solid var(--vt-line); background: #fff; }
.footer-inner { max-width: 1440px; padding: 14px 26px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--vt-muted); }
@media (max-width: 575.98px) { .footer-inner { padding: 14px 12px; justify-content: center; text-align: center; } }
.footer-app { display: flex; align-items: center; gap: 8px; color: var(--vt-ink); }
.logo.xs { width: 22px; height: 22px; font-size: .7rem; border-radius: 6px; }
a.redfox { color: var(--redfox); font-weight: 700; text-decoration: none; }
a.redfox:hover { color: var(--redfox-ember); text-decoration: underline; }
.login-bg { flex-direction: column; gap: 18px; }
.login-footer { color: rgba(255,255,255,.7); font-size: .82rem; }
.login-footer a { color: #fff; font-weight: 700; text-decoration: none; }
.login-footer a:hover { color: var(--redfox-ember); }
@media print { .site-footer { border: 0; } .content { margin-left: 0; } }

/* Wide tables: the first column (the material, the date) stays pinned while
   the rest scrolls, so a row never loses its name. Status chips never wrap. */
.chip { white-space: nowrap; }
.table-pin-first > :is(thead, tbody, tfoot) > tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--vt-line); }
.table-pin-first > thead > tr > :first-child { background: var(--vt-page); }
.table-pin-first > tfoot > tr > :first-child { background: #F1F4F3; }
.table-report > thead > tr > :first-child, .table-report > tbody > tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--vt-line); }
.table-report > thead > tr > :first-child { background: var(--vt-page); }