/* ==========================================================================
   BlessingTV — house typography and surface styling.  v44, 10-08-2026
   One stylesheet, loaded from views/header.ejs, which 67 screens include.

   Fonts are system fonts only. No CDN: the office runs on an internal network
   and a blocked webfont would leave the Tamil rendering in a fallback that
   does not shape it correctly. The stack names a Tamil face on each platform
   so Latin and Tamil are each drawn by a face designed for them.
   ========================================================================== */

:root{
  --btv-ink:#16202b;          --btv-ink-soft:#5a6b7c;
  --btv-line:#dfe5ec;         --btv-line-soft:#eef2f6;
  --btv-navy:#123a63;         --btv-navy-dk:#0d2b4a;
  --btv-accent:#0b6bcb;       --btv-good:#1a7f37;
  --btv-warn:#8a6100;         --btv-bad:#b42318;
  --btv-surface:#ffffff;      --btv-surface-2:#f7f9fb;
  --btv-radius:10px;
  --btv-shadow:0 1px 2px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.06);
}

/* Latin face first, then a Tamil face per platform. A browser walks the list
   per character, so Tamil picks up Noto/Nirmala/Latha/Sangam and Latin does not. */
html, body, .btv, input, select, textarea, button, table, .form-control, .btn{
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial,
    "Noto Sans Tamil", "Nirmala UI", "Latha", "Tamil Sangam MN", "Tamil MN",
    sans-serif !important;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body{ color:var(--btv-ink); font-size:15px; line-height:1.6; letter-spacing:.005em; }

h1,h2,h3,h4,h5,h6{ color:var(--btv-navy); font-weight:650; letter-spacing:-.011em; line-height:1.25; }
h4{ font-size:1.3rem; } h5{ font-size:1.12rem; }

/* Tamil sits taller than Latin; give a bilingual label room and a lighter
   second line so the English reads as a gloss rather than competing. */
.btv-ta{ display:block; font-size:1em; line-height:1.5; }
.btv-en{ display:block; font-size:.78em; color:var(--btv-ink-soft); font-weight:500;
         letter-spacing:.02em; text-transform:none; margin-top:1px; }

/* ---------- navigation ---------- */
.navbar.bg-light{
  background:var(--btv-surface) !important;
  border-bottom:1px solid var(--btv-line);
  box-shadow:0 1px 0 rgba(16,32,48,.03);
  padding:0 .25rem !important;
}
.navbar .nav-link{
  color:var(--btv-ink) !important; font-weight:550; font-size:.95rem;
  padding:.72rem .95rem !important; border-radius:8px; transition:background .15s, color .15s;
}
.navbar .nav-link:hover{ background:var(--btv-surface-2); color:var(--btv-navy) !important; }
.navbar .dropdown-menu{
  border:1px solid var(--btv-line); border-radius:var(--btv-radius);
  box-shadow:var(--btv-shadow); padding:.35rem; margin-top:.25rem; min-width:15rem;
}
.navbar .dropdown-item{ border-radius:7px; padding:.5rem .7rem; font-size:.92rem; color:var(--btv-ink); }
.navbar .dropdown-item:hover{ background:var(--btv-surface-2); color:var(--btv-navy); }
.navbar .dropdown-menu hr{ margin:.35rem .5rem; border-top:1px solid var(--btv-line-soft); }

/* ---------- tables ---------- */
table{ border-collapse:separate !important; border-spacing:0; width:100%; }
table thead th, table thead td, .thead-dark th{
  background:var(--btv-navy) !important; color:#fff !important;
  font-weight:600; font-size:.84rem; letter-spacing:.02em;
  padding:.62rem .7rem !important; border:0 !important; vertical-align:bottom; white-space:nowrap;
}
table tbody td{
  padding:.58rem .7rem !important; border:0 !important;
  border-bottom:1px solid var(--btv-line-soft) !important; vertical-align:top;
}
table tbody tr:hover td{ background:var(--btv-surface-2); }
.table-striped tbody tr:nth-of-type(odd){ background:transparent; }
.btv-num, td.text-right, th.text-right{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.btv-repeat{ color:#b7c2cd; }              /* the " mark for an unchanged address */

/* ---------- forms ---------- */
.form-control, input[type=text], input[type=number], input[type=date], select, textarea{
  border:1px solid var(--btv-line) !important; border-radius:8px !important;
  padding:.5rem .7rem !important; font-size:.95rem; color:var(--btv-ink);
  background:var(--btv-surface); transition:border-color .15s, box-shadow .15s;
}
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--btv-accent) !important; outline:0;
  box-shadow:0 0 0 3px rgba(11,107,203,.14) !important;
}
label, .col-form-label{ font-weight:600; font-size:.9rem; color:var(--btv-ink); }

/* ---------- buttons ---------- */
.btn{ border-radius:8px; font-weight:600; font-size:.92rem; padding:.48rem .95rem;
      letter-spacing:.005em; transition:filter .15s, box-shadow .15s; }
.btn:hover{ filter:brightness(.96); }
.btn:active{ transform:translateY(.5px); }
.btn-primary{ background:var(--btv-accent); border-color:var(--btv-accent); }
.btn-success{ background:var(--btv-good); border-color:var(--btv-good); }
.btn-secondary{ background:#5a6b7c; border-color:#5a6b7c; }
.badge{ border-radius:7px; font-weight:600; padding:.42rem .6rem; font-size:.82rem; letter-spacing:.01em; }

/* ---------- surfaces ---------- */
.card, .pref, .pref1{ background:var(--btv-surface); border:1px solid var(--btv-line);
                      border-radius:var(--btv-radius); box-shadow:var(--btv-shadow); }
.pagination a{ border-radius:7px; padding:.4rem .7rem; font-weight:600; font-size:.9rem; }

/* ---------- keep long tables readable ---------- */
.btv-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media print{
  .navbar, .btn, .pagination{ display:none !important; }
  body{ font-size:12px; } table thead th{ background:#000 !important; }
}

/* --------------------------------------------------------------------------
   v45 correction. The rules above set padding on .form-control and inherited
   body line-height 1.6 into <select>. A select has a fixed intrinsic height,
   so the text was being clipped vertically - "CHB" read as "CHR", "Bro." as
   "Bro", "CHENNAI" cut through the middle. Give form controls their own
   line-height and let the height grow from the content.
   -------------------------------------------------------------------------- */
select, .form-control, input[type=text], input[type=number], input[type=date],
input[type=tel], input[type=email], textarea{
  line-height:1.35 !important;
  height:auto !important;
  min-height:38px;
  padding:.42rem .6rem !important;
  font-size:.95rem;
}
select{
  padding-right:1.9rem !important;          /* room for the chevron */
  text-overflow:ellipsis;
  appearance:auto;
}
select option{ line-height:1.4; padding:.2rem .3rem; }

/* the receipt screen sets its own colours on a blue panel; keep our type but
   do not fight its palette */
.form-control:disabled, input:disabled{ background:#eef2f6 !important; color:#5a6b7c; }

/* labels beside inputs sit on the control's centre line */
label, .col-form-label{ line-height:1.35; margin-bottom:.25rem; }

/* the top navigation: two-line bilingual labels need a little breathing room
   but must not make the bar tall */
.navbar .nav-link{ padding:.5rem .8rem !important; }
.navbar .btv-ta{ line-height:1.35; }
.navbar .btv-en{ line-height:1.2; margin-top:0; }

/* --------------------------------------------------------------------------
   v46. Action columns. View / Print / transfer / Delete were wrapping one per
   line, so a single receipt row stood 4 buttons tall and the grid became
   unreadable. Keep them on one line, size them down, and align the row.
   Applies to every grid with a trailing Action cell - no view edits needed.
   -------------------------------------------------------------------------- */
.table tbody td:last-child, table.table tbody td:last-child{ white-space:nowrap; text-align:right; }
.table tbody td:last-child .btn,
.table tbody td:last-child button{
  display:inline-flex !important; align-items:center; justify-content:center;
  margin:1px 2px; padding:.24rem .55rem !important;
  font-size:.79rem !important; line-height:1.25 !important;
  min-height:0 !important; border-radius:6px; vertical-align:middle;
}

.table tbody td:last-child .btn-sm{ font-weight:600; }

/* rows read better centred once the buttons are one line high */
.table tbody td{ vertical-align:middle; }
/* long free-text columns still need to wrap - address, fund, name */
/* (v49) overflow-wrap:anywhere removed - it split datepicker day numbers */

/* money and counts right-aligned with tabular figures wherever they appear */
.table td:nth-last-child(2), .table td:nth-last-child(3){ font-variant-numeric:tabular-nums; }

/* filter bars sitting above a grid */
.btv-filterbar, form .form-inline{ gap:.5rem; }
input[type=date]{ min-width:9.5rem; }

/* the plain <button> elements the older screens use, with no bootstrap class */
button:not([class]){
  font:inherit; font-size:.86rem; font-weight:600; color:var(--btv-ink);
  background:var(--btv-surface); border:1px solid var(--btv-line);
  border-radius:7px; padding:.34rem .7rem; cursor:pointer;
  transition:background .15s, border-color .15s;
}
button:not([class]):hover{ background:var(--btv-surface-2); border-color:#c9d4df; }

/* ==========================================================================
   v47. RICHNESS PASS
   1. login + /datas gateway cards          2. receipt Amount row collision
   3. whole-page compaction so the action buttons land above the fold
   ========================================================================== */

/* -- 1a. Login ---------------------------------------------------------- */
body:has(.login){
  background:linear-gradient(160deg,#0f2c1e 0%,#17472f 45%,#0d2440 100%) fixed;
  min-height:100vh;
}
.login{
  width:min(420px,92vw); margin:0 auto; padding:2.4rem 2.2rem 2rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:18px;
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;
}
.container:has(.login){
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login h1, .login h3{
  font-weight:700; letter-spacing:-.015em; color:#fff; margin-bottom:.35rem;
}
.login .btv-sub{
  display:block; text-align:center; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.6rem;
}
.login label{
  font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:.3rem;
}
.login .form-control{
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.25);
  border-radius:10px; min-height:44px; font-size:.98rem; color:#12242f;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.login .form-control:focus{
  background:#fff; border-color:#7fd0a8;
  box-shadow:0 0 0 3px rgba(127,208,168,.35);
}
.login .btn{
  min-height:44px; border-radius:10px; font-weight:700; letter-spacing:.02em;
  padding-inline:1.6rem;
}
.login .btn-light{
  background:linear-gradient(180deg,#ffffff,#e8f3ec); border:0; color:#123a26;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
}
.login .btn-light:hover{ background:#fff; transform:translateY(-1px); }
.login .btn-outline-light{ border-color:rgba(255,255,255,.4); }
.login form > div + div{ margin-top:1rem; }

/* -- 1b. /datas gateway card -------------------------------------------- */
body:has(.wise1){ background:#eef2ee; }
.container:has(.wise1){ padding-top:6vh; padding-bottom:6vh; }
.wise1{
  width:min(560px,94vw); background:#fff; border:1px solid #dde5de;
  border-radius:16px; padding:0 0 1.6rem;
  box-shadow:0 20px 48px -20px rgba(16,40,26,.35);
  overflow:hidden;
}
.wise1::before{
  content:"Receipt session / ரசீது அமர்வு";
  display:block; padding:1rem 1.6rem; margin-bottom:1.4rem;
  background:linear-gradient(100deg,#14532d,#1c7a45);
  color:#fff; font-weight:700; font-size:1.02rem; letter-spacing:.01em;
}
.wise1 form{ padding:0 1.6rem; }
.wise1 label{
  font-weight:600; color:#2c3e34; font-size:.9rem; margin:0;
}
.wise1 .form-control{
  border:1px solid #cfdad2; border-radius:9px; min-height:42px; background:#fbfdfb;
}
.wise1 .form-control:focus{
  background:#fff; border-color:#1c7a45; box-shadow:0 0 0 3px rgba(28,122,69,.15);
}
.wise1 .btn, .wise1 button{
  min-width:130px; min-height:42px; border-radius:9px; font-weight:700;
  background:linear-gradient(180deg,#1c7a45,#14532d); color:#fff; border:0;
  box-shadow:0 8px 20px -8px rgba(20,83,45,.7);
}
.wise1 .btn:hover, .wise1 button:hover{ filter:brightness(1.08); }

/* -- 2. Amount / type / date row: they had no gap and ran into each other */
input[name=amount], input[name=nrct_type], input[name=document_date]{
  margin-left:.55rem !important; border-radius:8px;
}
input[name=amount]{
  max-width:15rem; font-weight:700; font-size:1.02rem;
  font-variant-numeric:tabular-nums; text-align:right;
}
input[name=nrct_type], input[name=document_date]{
  max-width:11rem; background:#eef2f6 !important; color:#48606f;
  font-weight:600; text-align:center;
}
input[name=mochq], input[name=mooffice]{ margin-left:.5rem; max-width:13rem; }

/* -- 3. Compaction: get the New/Save/…/Close row above the fold ---------- */
.form-control, select, input[type=text], input[type=password], input[type=date]{
  min-height:34px !important; padding:.28rem .55rem !important;
}
.login .form-control, .wise1 .form-control{ min-height:42px !important; padding:.5rem .8rem !important; }
form .mt-2{ margin-top:.4rem !important; }
form .mb-1{ margin-bottom:.15rem !important; }
form label{ margin-bottom:.15rem; }
.card, .panel{ margin-bottom:.6rem; }

/* v48. Cancel was inheriting a solid white background from style.css and read
   as a second primary button. Make it a ghost. */
.login .btn-outline-light, .login button[type=reset]{
  background:transparent !important; color:rgba(255,255,255,.9) !important;
  border:1px solid rgba(255,255,255,.42) !important; box-shadow:none !important;
}
.login .btn-outline-light:hover, .login button[type=reset]:hover{
  background:rgba(255,255,255,.12) !important; color:#fff !important;
}
/* Tamil never has case - stop the uppercase transform mangling its spacing */
.login label{ text-transform:none; letter-spacing:.02em; font-size:.8rem; }


/* v49. jQuery-UI widgets must be immune to the app's table/form styling. */
.ui-datepicker{
  width:19rem !important; padding:.35rem; border:1px solid var(--btv-line);
  border-radius:12px; box-shadow:0 18px 44px -16px rgba(16,40,26,.45);
  background:#fff; font-size:.9rem; z-index:9999;
}
.ui-datepicker table{ width:100%; margin:0; table-layout:fixed; }
.ui-datepicker td, .ui-datepicker th{
  width:14.28% !important; padding:1px !important; text-align:center !important;
  white-space:nowrap !important; word-break:keep-all !important;
  overflow-wrap:normal !important; vertical-align:middle !important;
}
.ui-datepicker td a, .ui-datepicker td span{
  display:block; padding:.32rem 0; text-align:center; border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.ui-datepicker td a:hover{ background:var(--btv-surface-2); }
.ui-datepicker .ui-datepicker-title{ font-weight:700; }
.ui-autocomplete{
  border-radius:10px; border:1px solid var(--btv-line); padding:.25rem;
  box-shadow:0 16px 40px -14px rgba(16,40,26,.4); background:#fff; z-index:9999;
  max-height:16rem; overflow-y:auto;
}
.ui-autocomplete .ui-menu-item-wrapper{ padding:.4rem .6rem; border-radius:7px; }

/* ==========================================================================
   v50. RECEIPT ENTRY - built for 500+ keystrokes-per-day operators.
   Layout, field order and tab sequence are untouched on purpose: the clerks
   have these memorised. What changes is what the eye lands on.
   ========================================================================== */

/* the active field must be unmistakable when you are heads-down keying.
   v72 2026-09-05: was a green ring on a cream ground - Bright asked for the
   green out. Same job, done in the page's own accent blue. */
input.form-control:focus, select.form-control:focus, textarea:focus{
  outline:none !important;
  border-color:#0b6bcb !important;
  box-shadow:0 0 0 3px rgba(11,107,203,.26), 0 1px 2px rgba(0,0,0,.06) !important;
  background:#fbfdff !important;
}

/* Amount is the one number that must never be wrong - give it weight */
input[name=amount]{
  font-size:1.25rem !important; font-weight:700 !important; letter-spacing:.01em;
  min-height:44px !important; border:2px solid #b9c9d6 !important; background:#fff !important;
}
input[name=amount]:focus{ border-color:#0b6bcb !important; }

/* confirmation strip: who this receipt is about to land on, and for how much */
.btv-confirm{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin:.75rem auto .5rem; padding:.7rem 1.1rem; max-width:56rem;
  background:rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.08);
  border-left:5px solid #0b6bcb; border-radius:10px;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.45);
}
.btv-confirm .btv-lbl{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#6b8090; margin-bottom:.1rem;
}
.btv-confirm-who{ text-align:left; min-width:0; flex:1 1 22rem; }
.btv-who{
  font-size:1.02rem; font-weight:700; color:#12323f;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
.btv-who-empty{ color:#94a6b2 !important; font-weight:500 !important; }
.btv-who-warn{ color:#a8620a !important; }
.btv-confirm-amt{ text-align:right; flex:0 0 auto; }
.btv-amt{
  display:block; font-size:1.5rem; font-weight:800; color:#12323f; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.btv-amt-zero{ color:#b8c4cc !important; }
.btv-words{
  display:block; font-size:.72rem; color:#6b8090; font-style:italic;
  max-width:22rem; margin-left:auto;
}

/* Save must outrank the destructive buttons.
   v72 2026-09-05: the green gradient is gone at Bright's request - it read as
   an alert colour on a screen that is otherwise blue. Same prominence, built
   from the existing --btv-accent hue, so no new colour enters the palette. */
.submitbtn{
  background:linear-gradient(180deg,#1877d2,#0b6bcb) !important; border:0 !important;
  color:#fff !important; font-weight:700 !important; min-width:7.5rem;
  box-shadow:0 8px 18px -8px rgba(11,107,203,.55) !important;
}
.submitbtn:hover{ filter:brightness(1.1); }
.btv-confirm + div .btn{ min-height:38px; border-radius:8px; font-weight:600; }

/* --------------------------------------------------------------------------
   v55. Bilingual menu labels. Both spans were display:block, so every menu
   entry stacked Tamil above English - the bar stood two lines tall and each
   dropdown row read as a block instead of a line. Put the pair on one line:
   Tamil leads, English follows as a lighter gloss. In dropdowns the English
   is pushed right so both languages form clean columns down the menu.
   Only the navbar is touched; stacked labels elsewhere are unchanged.
   -------------------------------------------------------------------------- */
.navbar .nav-link{
  display:flex !important; align-items:baseline; gap:.42rem; white-space:nowrap;
}
.navbar .nav-link .btv-ta,
.navbar .nav-link .btv-en{ display:inline !important; margin:0 !important; }
.navbar .nav-link .btv-en{ font-size:.76em; }

.navbar .dropdown-menu{ min-width:23rem; padding:.3rem 0; }
.navbar .dropdown-item{
  display:flex !important; align-items:baseline; justify-content:space-between;
  gap:1.5rem; white-space:nowrap; padding:.34rem 1rem;
}
.navbar .dropdown-item .btv-ta,
.navbar .dropdown-item .btv-en{
  display:inline !important; margin:0 !important; line-height:1.45;
}
.navbar .dropdown-item .btv-en{ font-size:.8em; text-align:right; }

/* on a phone the bar collapses and there is no room for two columns, so the
   pair goes back to stacked - which is the right shape at that width */
@media (max-width:575.98px){
  .navbar .dropdown-menu{ min-width:0; }
  .navbar .dropdown-item{ display:block !important; white-space:normal; }
  .navbar .dropdown-item .btv-en{ display:block !important; }
}


/* --------------------------------------------------------------------------
   v57. The menus are English-only now, so the bilingual pair rules no longer
   apply. Anything still carrying .btv-en outside the navbar (ledger search,
   receipt entry) keeps its gloss styling; inside the navbar a label is just a
   label and should read at full size.
   -------------------------------------------------------------------------- */
.navbar .nav-link{ white-space:nowrap; }
.navbar .nav-link .btv-en,
.navbar .dropdown-item .btv-en{ font-size:1em; color:inherit; font-weight:inherit; }
.navbar .dropdown-menu{ min-width:0; }
.navbar .dropdown-item{ display:block !important; }

/* --------------------------------------------------------------------------
   v58. Hover must not turn a row white.
   The rule above painted a fixed near-white on the hovered row, so on the blue
   export panel the row under the cursor jumped to white. A translucent tint
   instead: whatever shade the row already is stays visible, just a touch
   lighter. Nothing else about the row changes.
   -------------------------------------------------------------------------- */
table tbody tr:hover td,
.table tbody tr:hover td{ background:rgba(125,170,215,.15) !important; }

/* ==========================================================================
   v77 2026-09-05. Two things Bright asked for on the receipt entry screen.

   1) The action row mixed <a class="btn"> (New, View, Close) with
      <button class="btn"> (Save, Modify, Delete, Cancel). An anchor and a
      button do not size the same from padding alone, and .submitbtn carried
      its own min-width, so Save sat wider than the rest and the row looked
      ragged. Every control in the row is now laid out as an inline-flex box
      with one shared min-width and min-height, so they are identical.

   2) Tabbing was visible right up to Fund Type and then went dark: the focus
      ring was only ever defined for input/select/textarea, so once the cursor
      reached the buttons the clerk could not see where they were. Anyone
      keying by keyboard was pressing Enter blind. Buttons now carry the same
      blue ring the fields use.
   ========================================================================== */

/* 1. one size for every control in the action row */
.del .btn{
  min-width:7.5rem !important;
  min-height:40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.48rem .95rem !important;
  margin:.2rem .25rem !important;
  line-height:1.2 !important;
  vertical-align:middle;
  box-sizing:border-box;
}
/* Save keeps its blue fill, but no longer its own private width */
.del .submitbtn{ min-width:7.5rem !important; }

/* 2. keyboard focus must be visible on buttons, not just fields.
      :focus-visible keeps the ring off plain mouse clicks; the :focus rule
      backs it up for anchors in browsers that treat them differently. */
.btn:focus-visible,
a.btn:focus,
.del .btn:focus-visible,
.del a.btn:focus{
  outline:3px solid #0b6bcb !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(11,107,203,.28) !important;
  position:relative;
  z-index:2;
}
/* a disabled button is skipped by Tab on purpose - make that obvious rather
   than looking like a control that simply refused to highlight */
.del .btn:disabled,
.del .btn[disabled]{ opacity:.45 !important; cursor:not-allowed; }