@import url('https://fonts.maateen.me/kalpurush/font.css');

/* ==================================================================
   Dokan Hisab — application stylesheet
   ================================================================== */

:root {
  --primary:      #2C3E50;
  --primary-dark: #1f2d3a;
  --primary-light:#34495E;
  --success:      #27AE60;
  --info:         #2980B9;
  --danger:       #C0392B;
  --warning:      #E67E22;
  --teal:         #16A085;
  --purple:       #8E44AD;

  --bg:           #f4f6f9;
  --card-bg:      #ffffff;
  --border:       #e3e8ee;
  --border-strong:#cbd5e0;
  --text:         #2d3748;
  --muted:        #718096;

  --sidebar-w:    262px;
  --header-h:     62px;

  --font-bn: 'Kalpurush', 'Noto Sans Bengali', serif;
  --font-en: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  --radius:   10px;
  --radius-sm: 6px;
  --shadow:    0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-bn);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.3; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Digits and codes read better in a Latin face even inside Bangla text. */
.num, .table td.num, .table th.num, input[type="number"], input[type="date"],
code, .mono { font-family: var(--font-en); }
.num, td.num, th.num { text-align: right; }

/* ==================================================================
   Login
   ================================================================== */
.login-wrapper {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 20px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.13) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.10) 0, transparent 40%),
    linear-gradient(135deg, var(--primary) 0%, #3498DB 100%);
}

/* Two panels on a desktop, one column on a phone: what the shop is, then the
   one thing the visitor has to do. */
.login-shell {
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: 100%; max-width: 860px;
  background: var(--card-bg); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); animation: fadeInUp .4s ease;
}
@media (min-width: 820px) {
  .login-shell { grid-template-columns: 1.05fr 1fr; }
}

.login-brand {
  padding: 2.4rem 2rem; text-align: center;
  background: linear-gradient(160deg, #f7fafd 0%, #eef4fa 100%);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 820px) {
  .login-brand { border-bottom: none; border-right: 1px solid var(--border); text-align: left; }
}
.login-logo { max-width: 84px; max-height: 84px; margin-bottom: 1rem; }
.shop-name { font-size: 1.4rem; color: var(--primary); line-height: 1.3; }
.shop-subtitle { font-size: .98rem; color: var(--muted); font-weight: 400; margin-bottom: .9rem; }
.login-address { font-size: .82rem; color: var(--muted); margin: .15rem 0; }
.login-address i { width: 15px; color: var(--info); }

.login-points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.login-points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .85rem; color: var(--text); text-align: left;
}
.login-points i {
  color: var(--info); width: 18px; flex-shrink: 0; margin-top: 3px;
}

.login-card {
  background: var(--card-bg); padding: 2.4rem 2rem; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.login-title { font-size: 1.2rem; color: var(--primary); }
.login-sub { font-size: .86rem; color: var(--muted); margin: .3rem 0 1.4rem; }
.login-note {
  background: #fef5ec; color: var(--warning); border: 1px solid #f8ddc0;
  padding: .6rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
  font-size: .88rem; text-align: left;
}
.login-note.error { background: #fdf1f0; color: var(--danger); border-color: #f3cfcb; }

/* The gateway that takes people's money is named where they can see it. */
.login-bkash {
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.login-bkash span { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.login-bkash img { height: 20px; width: auto; }
.btn-google-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: .8rem 1.5rem; background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: var(--radius-sm);
  font-family: var(--font-en); font-weight: 500; transition: all .2s;
}
.btn-google-login:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,.1); text-decoration: none; }
.login-hint {
  font-size: .8rem; color: var(--muted); margin-top: 1.2rem; line-height: 1.75; text-align: left;
}
.login-hint i { color: var(--success); margin-right: 4px; }
.login-footer { margin-top: 1.5rem; font-size: .8rem; color: rgba(255,255,255,.8); }

/* ==================================================================
   Layout
   ================================================================== */
.dashboard-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--primary);
  color: #fff; display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1000; transition: transform .25s ease;
}
.sidebar-header {
  display: flex; align-items: center; gap: 12px; padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.1); min-height: var(--header-h);
}
.sidebar-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; }
.sidebar-shop-name { font-size: 1rem; font-weight: 600; line-height: 1.25; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem 0; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: .7rem 1.15rem;
  color: rgba(255,255,255,.78); font-size: .95rem; border-left: 3px solid transparent;
  transition: all .15s;
}
.nav-link i { width: 20px; text-align: center; font-size: .95rem; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-link.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--success); font-weight: 600; }

.sidebar-footer {
  display: flex; align-items: center; gap: 10px; padding: .9rem 1.15rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar, .header-avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-en);
  background: var(--success); color: #fff;
}
.header-avatar { background: var(--primary); }
.user-avatar-img, .header-avatar-img {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
}
.user-details { min-width: 0; }
.user-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-logout {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07);
}
.btn-logout:hover { background: var(--danger); color: #fff; text-decoration: none; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999;
}
.sidebar-overlay.active { display: block; }

.main-content-wrapper { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.top-header {
  position: sticky; top: 0; z-index: 900; height: var(--header-h);
  background: var(--card-bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem;
}
.header-left, .header-right { display: flex; align-items: center; gap: 12px; }
.hamburger-btn {
  display: none; background: none; border: none; font-size: 1.15rem;
  color: var(--primary); cursor: pointer; padding: 6px 8px;
}
.current-tab-title { font-size: 1.12rem; color: var(--primary); }
.header-date { font-size: .85rem; color: var(--muted); }

/* ---- The bell -------------------------------------------------- */
.notif-wrap { position: relative; }
.notif-btn {
  background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  color: var(--muted); font-size: 1rem; line-height: 1; position: relative;
}
.notif-btn:hover { background: var(--bg); color: var(--text); }
.notif-btn.has-unread { color: var(--warning); }
.notif-dot {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .65rem; line-height: 16px; text-align: center; font-weight: 700;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index: 60; overflow: hidden;
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem;
}
.notif-panel-head .btn-link {
  background: none; border: 0; cursor: pointer; color: var(--primary);
  font-size: .78rem; font-family: inherit;
}
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: #fff8ec; }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-title { font-size: .85rem; color: var(--text); }
.notif-body  { font-size: .78rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.notif-when  { font-size: .7rem;  color: var(--muted); margin-top: 4px; }

#main-content { flex: 1; padding: 1.25rem; }
.tab-content { display: none; animation: fadeIn .25s ease; }
.tab-content.active { display: block; }

/* ==================================================================
   Cards
   ================================================================== */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 1rem; color: var(--primary); }
/* Cards whose content is not a table need the same inset the head has, or the
   fields run flush to the border and the left-hand labels are clipped by it. */
.card-body { padding: 1.25rem; }

/* Ageing: the far right column is the one that matters, so it is the one
   that carries colour. */
.ageing-card { margin-bottom: 1.25rem; }
.ageing-card tfoot td {
  border-top: 2px solid var(--border-strong); font-weight: 600;
  background: var(--bg);
}
.ageing-card tr.over-limit td:first-child { border-left: 3px solid var(--warning); }
.card-head-note.warn { color: var(--danger); font-weight: 600; }

/* ==================================================================
   The bottom bar

   Hidden above 720px, where the sidebar is always there anyway. Below it, the
   four things somebody at the counter reaches for sit along the bottom edge in
   thumb range, and everything else stays behind মেনু.
   ================================================================== */
.bottom-nav { display: none; }

@media (max-width: 720px) {
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-link {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .5rem .2rem .45rem;
    background: none; border: none; cursor: pointer; font: inherit;
    color: var(--muted); text-decoration: none;
    border-top: 2px solid transparent;
  }
  .bottom-link i { font-size: 1.05rem; }
  .bottom-link span {
    font-size: .68rem; line-height: 1.1; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  }
  .bottom-link.active { color: var(--primary); border-top-color: var(--primary); }
  .bottom-link:active { background: var(--bg); }
  .bottom-link:hover { text-decoration: none; }

  /* Room for it, so the last row of any list is not sitting under the bar. */
  #main-content { padding-bottom: 5rem; }

  /* A dialog's footer has to clear it too. */
  .modal-footer { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0)); }
}

@media print { .bottom-nav { display: none !important; } }

/* ==================================================================
   Tables on a phone

   A twelve-column table dragged sideways is not a table anybody reads. Below
   720px each row becomes a card: the first cell is its heading, everything else
   is a label/value line, and the actions sit along the bottom where a thumb
   lands.

   Written once and applied by the table class, not per screen. js/app.js copies
   each column's heading onto the cells beneath it, so the labels below come
   from the table's own header rather than from anybody remembering to add them.
   ================================================================== */
@media (max-width: 720px) {

  /* No sideways scroll to inherit: the container stops being a viewport. */
  .table-responsive { overflow-x: visible; }

  .table, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table thead { display: none; }
  .table { border: none; background: none; }

  .table tbody tr {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .7rem .85rem;
    margin-bottom: .7rem;
  }
  .table tbody tr:last-child { margin-bottom: 0; }
  .table.table-striped tbody tr:nth-child(even) { background: var(--card-bg); }
  .table tbody tr:hover { background: var(--card-bg); }

  /* Each cell is one line: what it is on the left, what it says on the right. */
  .table tbody td {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .28rem 0; border: none;
    text-align: left; min-height: 0;
  }
  /* The label holds the left edge and pushes everything else right, so a value
     and the unit beside it stay together instead of drifting apart. */
  .table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; margin-right: auto;
    font-size: .78rem; color: var(--muted);
    font-weight: 500; white-space: nowrap;
  }
  .table tbody td.num { text-align: left; }
  .table tbody td.num, .table tbody td > .num { justify-content: space-between; }

  /* A cell often carries a value and a note about it — the unit, where a figure
     came from. As flex items they would sit in a row; the note belongs on its
     own line under the value it qualifies. */
  .table tbody td { flex-wrap: wrap; }
  .table tbody td .sub {
    flex: 1 0 100%; text-align: right; margin-top: 1px;
  }
  /* The heading cell is a block, not a flex row, so its note reads under the
     name on the left where the name is. */
  .table tbody td:first-child .sub { text-align: left; }

  /* A card head with a search box and a filter is two things stacked, not a
     title with controls tucked beside it. */
  .card-head { flex-direction: column; align-items: stretch; gap: .6rem; }
  .card-head .head-tools { width: 100%; }
  .card-head .head-tools .form-control { flex: 1 1 auto; width: auto; }

  /* The first cell is the card's heading, so it loses its label and gains size.
     A row is scanned for its name before anything else. */
  .table tbody td:first-child {
    font-size: 1rem; font-weight: 600;
    padding: 0 0 .45rem; margin-bottom: .35rem;
    border-bottom: 1px dashed var(--border);
    display: block;
  }
  .table tbody td:first-child::before { display: none; }

  /* A cell with nothing in it is noise on a card, where there is no column to
     keep alignment with. */
  .table tbody td.is-empty { display: none; }

  /* A row that leads with a tick-box: the box belongs in the corner, and the
     heading is whatever comes after it. */
  .table tbody tr.has-picker { position: relative; padding-right: 2.4rem; }
  .table tbody tr.has-picker td:first-child {
    position: absolute; top: .6rem; right: .7rem;
    padding: 0; margin: 0; border: none; display: block;
  }
  .table tbody tr.has-picker td:first-child input { width: 18px; height: 18px; }
  .table tbody tr.has-picker td:nth-child(2) {
    font-size: 1rem; font-weight: 600;
    padding: 0 0 .45rem; margin-bottom: .35rem;
    border-bottom: 1px dashed var(--border);
    display: block;
  }
  .table tbody tr.has-picker td:nth-child(2)::before { display: none; }

  /* Actions along the bottom, full width, thumb-sized. */
  .table tbody td.row-actions {
    display: flex; gap: .4rem; justify-content: flex-start; flex-wrap: wrap;
    padding-top: .6rem; margin-top: .4rem;
    border-top: 1px dashed var(--border);
  }
  .table tbody td.row-actions::before { display: none; }
  .table tbody td.row-actions .btn { flex: 1 1 auto; min-height: 36px; }
  .table tbody td.row-actions .btn-icon { flex: 0 0 auto; width: 36px; height: 36px; }

  /* Totals rows read as a summary card rather than a row of a table. */
  .table tfoot { display: block; }
  .table tfoot tr {
    display: block; background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: .7rem .85rem;
  }
  .table tfoot td, .table tfoot th {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .2rem 0; border: none; text-align: left;
  }
  .table tfoot td::before, .table tfoot th::before {
    content: attr(data-label); font-size: .78rem; color: var(--muted); font-weight: 500;
  }

  /* An empty state, or any single-cell message, stays one plain line. */
  .table tbody tr.card-plain {
    background: none; border: 1px dashed var(--border-strong); box-shadow: none;
  }
  .table tbody tr.card-plain td { display: block; text-align: center; }
  .table tbody tr.card-plain td::before { display: none; }

  /* A picker column is a control, not a value. */
  .table tbody td:has(> input[type="checkbox"]) { justify-content: flex-start; }

  /* Tables that are genuinely grids — the staff register, purchase lines —
     keep their shape and scroll, because a card per line would be worse. */
  .table.no-cards, .staff-table, .table-items {
    display: table; width: 100%;
  }
  .table.no-cards thead, .staff-table thead, .table-items thead { display: table-header-group; }
  .table.no-cards tbody, .staff-table tbody, .table-items tbody { display: table-row-group; }
  .table.no-cards tr, .staff-table tr, .table-items tr {
    display: table-row; background: none; border: none;
    box-shadow: none; padding: 0; margin: 0;
  }
  .table.no-cards td, .staff-table td, .table-items td {
    display: table-cell; border-bottom: 1px solid var(--border); padding: .4rem .5rem;
  }
  .table.no-cards td::before, .staff-table td::before, .table-items td::before { display: none; }
  .staff-table, .table-items { min-width: 640px; }
  .form-section .table-responsive { overflow-x: auto; }

  /* The day book's legs belong to the entry above them, not to a card each. */
  .report-area tr.leg { border: none; box-shadow: none; padding: 0 0 0 .8rem;
                        margin: 0 0 .2rem; background: none; }
  .report-area tr.leg td { padding: .1rem 0; }
}

/* A card that has been tapped should say so, since there is no hover. */
@media (hover: none) {
  .table tbody tr.clickable:active { background: var(--bg); }
}

/* Four spans, because almost every report anybody wants is one of them. */
.quick-span { display: flex; gap: 3px; flex-wrap: wrap; }
.quick-span .btn { padding: .3rem .6rem; font-size: .8rem; }
.quick-span .btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
@media print { .quick-span { display: none; } }

/* ------------------------------------------------------------------
   The journal-backed reports

   A day book shows each entry with its own two sides underneath, so the legs
   are set back and quieter than the entry that owns them.
   ------------------------------------------------------------------ */
.report-area tr.entry td { border-top: 1px solid var(--border-strong); padding-top: .5rem; }
.report-area tr.entry:first-child td { border-top: none; }
.report-area tr.leg td {
  border-bottom: none; padding-top: 1px; padding-bottom: 1px;
  font-size: .82rem; color: var(--muted);
}
.report-area tr.leg td:nth-child(3) { padding-left: 1.4rem; }
.report-area tr.opening td { background: var(--bg); font-style: italic; }
.report-area tr.over-limit td:first-child { border-left: 3px solid var(--warning); }

.ok-mark  { color: var(--success); font-weight: 700; }
.bad-mark { color: var(--danger);  font-weight: 700; }

.report-party {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: 1.2rem;
}
.report-party b { font-size: 1.05rem; }
.report-party span { font-size: .84rem; color: var(--muted); }

.report-foot {
  font-size: .8rem; color: var(--muted); margin-top: .6rem;
  line-height: 1.55; max-width: 70ch;
}

@media print {
  .report-area tr.leg td { color: #555; }
}

/* ------------------------------------------------------------------
   বেতন

   The workings are the point of the dialog: somebody about to hand over cash
   should see where the number came from without asking. The total is the only
   one with a heavy border.
   ------------------------------------------------------------------ */
.workings {
  display: grid; gap: .6rem; margin: 1rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.working {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .6rem .7rem; background: var(--bg);
}
.working span { display: block; font-size: .74rem; color: var(--muted); }
.working b {
  font-family: var(--font-en); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; color: var(--primary);
}
.working small { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; }
.working.total { border: 2px solid var(--primary); background: var(--card-bg); }
.working.warn { border-color: var(--warning); }
.working.warn b { color: var(--warning); }

.inline-field { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.inline-field span { color: var(--muted); white-space: nowrap; }
.inline-field .form-control { width: auto; }

/* ------------------------------------------------------------------
   কাজের বোর্ড

   Three columns, read left to right the way the work moves. A card is scanned,
   not read: the voucher number and what is owed on top, who it is for next,
   and the one button that moves it along at the bottom where a thumb lands.
   ------------------------------------------------------------------ */
.jobs-board {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.board-col {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.board-col h4 {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem; font-size: .9rem;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.board-col h4 .count {
  margin-left: auto; background: var(--border); color: var(--muted);
  font-size: .75rem; padding: 1px 9px; border-radius: 20px; font-weight: 600;
}
.board-ready h4 { background: #eefaf2; border-bottom-color: #cceedd; }
.board-ready h4 i, .board-ready h4 { color: var(--success); }
.board-ready h4 .count { background: var(--success); color: #fff; }

.board-list { padding: .7rem; display: flex; flex-direction: column; gap: .7rem; }
.board-none { color: var(--muted); font-size: .85rem; text-align: center; padding: 1rem 0; }

.job-card {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--card-bg);
}
.job-card.late { border-left-color: var(--danger); background: #fef8f7; }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.job-top b { font-size: .82rem; }
.job-party { font-weight: 600; margin-top: .3rem; font-size: .92rem; }
.job-phone { display: inline-block; margin-left: .4rem; font-size: .78rem; font-weight: 400; }
.job-work {
  font-size: .82rem; color: var(--muted); margin-top: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-foot {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .76rem; margin-top: .5rem; padding-top: .45rem;
  border-top: 1px dashed var(--border);
}
.job-actions { display: flex; gap: .4rem; margin-top: .6rem; }
.job-actions .btn { flex: 1; }

.board-empty {
  grid-column: 1 / -1; text-align: center; padding: 3rem 1rem;
  background: var(--card-bg); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); color: var(--muted);
}
.board-empty i { font-size: 2rem; opacity: .4; display: block; margin-bottom: .7rem; }
.board-empty p { font-size: .95rem; color: var(--text); margin-bottom: .3rem; }
.badge-ok { background: #eafaf0; color: #1e7a48; border: 1px solid #cceedd; }

/* ------------------------------------------------------------------
   পণ্য ও স্টক

   A catalogue is scanned rather than read, so the product name carries the
   weight and everything qualifying it — the category, where a figure came from
   — sits under it in a quieter size.
   ------------------------------------------------------------------ */
.head-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.head-tools .form-control { min-width: 140px; width: auto; }
.form-control-sm { height: 32px; padding: .25rem .55rem; font-size: .85rem; }

/* The line under a name: what it is, or where the number above it came from. */
/* Block, because it is a line UNDER the name and not a continuation of it.
   Inline, "Mahfuz" and the address below it ran together into one word. */
td .sub { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
tr.retired td { opacity: .6; }

.section-label {
  font-size: .82rem; color: var(--primary); font-weight: 600;
  margin: 1.2rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.section-label:first-child { margin-top: 0; }
.section-label i { margin-right: .35rem; opacity: .7; }

.badge-warn { background: #fdf0e0; color: #9a5b0c; border: 1px solid #f0d3a8; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }

.check-line { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; }
.check-line input { width: 16px; height: 16px; }

@media (min-width: 720px) { .modal-dialog.modal-lg { max-width: 780px; } }

/* The bKash mark, used where it means something rather than as decoration. */
.head-logo { height: 18px; vertical-align: -3px; margin-right: .2rem; }

/* ------------------------------------------------------------------
   The system page

   Three checks, each a claim the shop can act on. Colour carries the state
   because that is what somebody scans for; the words carry what to do about it.
   ------------------------------------------------------------------ */
.health-grid {
  display: grid; gap: 1rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.health-card {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.health-card h4 { font-size: .95rem; margin-bottom: .2rem; }
.health-card p { font-size: .86rem; color: var(--muted); line-height: 1.5; margin: 0; }
.health-mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; color: #fff;
  background: var(--border-strong);
}
.health-card.good { border-left-color: var(--success); }
.health-card.good .health-mark { background: var(--success); }
.health-card.bad  { border-left-color: var(--danger); }
.health-card.bad  .health-mark { background: var(--danger); }
.health-card.bad  p { color: var(--danger); }
.health-card.wait { border-left-color: var(--border-strong); }

.plain-list { list-style: none; margin: .6rem 0 1rem; }
.plain-list li {
  position: relative; padding-left: 18px; margin-bottom: .55rem;
  font-size: .89rem; line-height: 1.55;
}
.plain-list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
}
.all-clear { color: var(--success); font-size: .9rem; }
.all-clear i { margin-right: .35rem; }
.empty-cell { text-align: center; color: var(--muted); padding: 1.2rem; font-size: .88rem; }
.badge-soft {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: .72rem; padding: 2px 8px; border-radius: 20px;
}
.hint-box.warn { border-color: var(--warning); background: #fdf6ec; }
.hint-box.warn i { color: var(--warning); }

/* The database is behind. Said once, at the top of every screen, rather than
   discovered one broken tab at a time. */
.schema-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: #fdf6ec; border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.1rem;
  font-size: .89rem; line-height: 1.5;
}
.schema-banner i.lead { color: var(--warning); font-size: 1.1rem; flex: 0 0 auto; }
.schema-banner span { flex: 1 1 260px; }
.schema-banner .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------
   The day's staff register

   One row per person, inside the day form. It is a table rather than a
   repeated card because the whole point is comparing people down a column —
   who earned what, who was paid, who is still owed.
   ------------------------------------------------------------------ */
.staff-lede {
  font-size: .85rem; color: var(--muted); margin-bottom: .75rem;
  line-height: 1.5;
}
.staff-lede b { color: var(--text); font-weight: 600; }

.staff-table { margin-bottom: .5rem; min-width: 720px; }
.staff-table th { white-space: nowrap; }
.staff-table td { padding: .4rem .5rem; vertical-align: middle; }
.staff-table .form-control { height: 34px; padding: .25rem .5rem; font-size: .88rem; }
.staff-table .input-with-btn .form-control { min-width: 0; }
.staff-table .input-with-btn .btn { padding: .25rem .5rem; font-size: .78rem; white-space: nowrap; }
.staff-table output {
  font-family: var(--font-en); font-variant-numeric: tabular-nums;
  font-size: .9rem; display: inline-block; padding: .25rem 0;
}
.staff-table output.neg { color: var(--danger); }
.staff-table output.pos { color: var(--teal); }
.staff-table tfoot td {
  border-top: 2px solid var(--border-strong); font-weight: 600;
  padding-top: .6rem; background: transparent;
}
.staff-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.staff-table .btn-icon.danger { color: var(--danger); }

/* Nothing added yet reads as a gap, so say what the gap means. */
.staff-table tbody:empty::after {
  content: "আজ কেউ যোগ করা হয়নি — নিচের বোতাম দিয়ে কর্মচারী যোগ করুন";
  display: block; padding: .9rem .5rem; color: var(--muted); font-size: .85rem;
}

.staff-foot {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .6rem 1rem; margin-top: .4rem;
}
.staff-foot .btn { flex: 0 0 auto; }
.staff-foot .field-hint { flex: 1 1 320px; margin: 0; line-height: 1.5; }


.card-body > :last-child { margin-bottom: 0; }
.card > form.stack, .card > .stack { padding: 1.25rem; }
.table-card { overflow: hidden; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.summary-cards-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.summary-card {
  background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--muted);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.05rem 1.15rem; display: flex; align-items: center; gap: 14px;
}
.summary-cards-row.compact .summary-card { padding: .8rem 1rem; }
.card-icon { font-size: 1.6rem; opacity: .85; width: 34px; text-align: center; }
.card-info { min-width: 0; flex: 1; }
.card-info h3 { font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.card-info .value { font-size: 1.32rem; font-weight: 700; color: var(--primary); word-break: break-word; }
.card-note { display: block; font-size: .75rem; color: var(--muted); margin-top: 2px; }

.card-success { border-top-color: var(--success); } .card-success .card-icon { color: var(--success); }
.card-info-v, .card-info.summary { }
.summary-card.card-info { border-top-color: var(--info); }
.summary-card.card-info > .card-icon { color: var(--info); }
.card-warning { border-top-color: var(--warning); } .card-warning .card-icon { color: var(--warning); }
.card-danger  { border-top-color: var(--danger); }  .card-danger .card-icon  { color: var(--danger); }
.card-primary { border-top-color: var(--primary); } .card-primary .card-icon { color: var(--primary); }
.card-teal    { border-top-color: var(--teal); }    .card-teal .card-icon    { color: var(--teal); }
.card-purple  { border-top-color: var(--purple); }  .card-purple .card-icon  { color: var(--purple); }
.card-dark    { border-top-color: var(--primary-dark); } .card-dark .card-icon { color: var(--primary-dark); }

/* ==================================================================
   Toolbar
   ================================================================== */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 1.15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.toolbar.no-border { border-bottom: none; padding: 1.1rem 1.25rem; margin-bottom: 0; }
.toolbar .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar .filters .form-control { width: auto; min-width: 140px; }
.action-buttons-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-inline { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; cursor: pointer; }
.check-inline input { width: 16px; height: 16px; accent-color: var(--info); cursor: pointer; }

/* The "tell them by email" tick.

   It sits at the bottom of a form among ordinary fields but is not one: it does
   something outside the shop, to somebody who is not in the room. So it is
   boxed off and tinted, and the hint under it says who will actually receive
   the message — a tick that quietly mails a customer would be worse than no
   tick at all. */
.mail-tick {
  display: flex;
  width: 100%;
  padding: .6rem .7rem;
  margin-top: .2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft, #f7f9fa);
  font-weight: 600;
}
.mail-tick i { color: var(--info); margin-right: 4px; }
.mail-tick + .field-hint { display: block; margin: .35rem 0 0; }
.mail-tick:has(input:checked) { border-color: var(--info); }
/* display:flex and display:block beat the [hidden] attribute, so say so. */
.mail-tick[hidden], .mail-tick + .field-hint[hidden] { display: none; }

/* ==================================================================
   Tables
   ================================================================== */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: .62rem .7rem; text-align: left; vertical-align: middle; }
.table thead th {
  background: #f7f9fb; color: var(--primary); font-weight: 600; font-size: .8rem;
  white-space: nowrap; border-bottom: 2px solid var(--border);
}
.table tbody td { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table-striped tbody tr:nth-of-type(odd) { background: #fcfdfe; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: #eef4fb; }
.table-bordered th, .table-bordered td { border: 1px solid var(--border); }
.table-sm th, .table-sm td { padding: .45rem .55rem; font-size: .84rem; }
.table-plain td { border: none; padding: .4rem 1.25rem; }
.table-plain tr td:last-child { text-align: right; font-weight: 600; font-family: var(--font-en); }
.table tfoot td, .table tfoot th {
  background: #f7f9fb; font-weight: 700; border-top: 2px solid var(--border-strong);
}

/* Daily hisab grouped header colours, mirroring the original sheet. */
.table-hisab thead .group-row th { text-align: center; }
th.th-income   { background: rgba(39,174,96,.12)  !important; color: var(--success); }
th.th-elec     { background: rgba(41,128,185,.12) !important; color: var(--info); }
th.th-expense  { background: rgba(192,57,43,.12)  !important; color: var(--danger); }
th.th-employee { background: rgba(22,160,133,.12) !important; color: var(--teal); }
th.th-owner    { background: rgba(142,68,173,.12) !important; color: var(--purple); }
th.th-summary  { background: rgba(46,134,113,.12) !important; color: #2E8671; }

.text-positive { color: var(--success); font-weight: 600; }
.text-negative { color: var(--danger);  font-weight: 600; }
.text-warning  { color: var(--warning); font-weight: 600; }
.text-muted    { color: var(--muted); }
.text-center   { text-align: center; }
.muted         { color: var(--muted); font-size: .85rem; font-weight: 400; }
.empty-state   { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
/* `display: flex` on a <td> takes the cell out of the table's own layout: it
   stops sharing the row's height and baseline, and its bottom border draws at
   a different level from every other cell — which is the broken-looking line
   under a row of action buttons. The cell stays a cell; the buttons line
   themselves up. */
.row-actions {
  text-align: right; white-space: nowrap; line-height: 1;
}
.row-actions > * { vertical-align: middle; }
.row-actions > * + * { margin-left: 4px; }

/* ==================================================================
   Buttons
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: .52rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap; background: none; color: var(--text);
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .36rem .7rem; font-size: .82rem; }

/* An input with a one-tap shortcut beside it (e.g. "pay the whole wage"). */
.input-with-btn { display: flex; gap: 6px; align-items: stretch; }
.input-with-btn .form-control { flex: 1 1 auto; min-width: 0; }
.input-with-btn .btn { white-space: nowrap; flex: 0 0 auto; }
.hint-note { font-weight: 400; font-size: .78rem; color: var(--muted); }
.btn-xs { padding: .1rem .3rem; font-size: .8rem; }
.btn-icon { padding: .32rem .5rem; font-size: .82rem; }

.btn-primary   { background: var(--info); color: #fff; }
.btn-primary:hover { background: #216696; }
.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { background: #1f8f4d; }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a13024; }
.btn-warning   { background: var(--warning); color: #fff; }
.btn-warning:hover { background: #ca6f18; }
.btn-secondary { background: #eef1f5; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: #e2e7ee; }
.btn-outline-primary { border-color: var(--info); color: var(--info); }
.btn-outline-primary:hover { background: var(--info); color: #fff; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }
.btn-link { color: var(--info); padding: .3rem .4rem; text-decoration: underline; }
.mr-auto { margin-right: auto; }

/* ==================================================================
   Forms
   ================================================================== */
.form-group { margin-bottom: .95rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .32rem; }
.req { color: var(--danger); }
.field-hint { display: block; font-size: .76rem; color: var(--muted); margin-top: .28rem; line-height: 1.5; }
.tag-auto {
  display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 6px;
  border-radius: 3px; background: #eef4fb; color: var(--info); vertical-align: middle;
}

.form-control {
  display: block; width: 100%; padding: .5rem .7rem; font-family: inherit; font-size: .9rem;
  color: var(--text); background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 3px rgba(41,128,185,.13); }
.form-control:disabled, .form-control[readonly] { background: #f7f9fb; color: var(--muted); }
.form-control-sm { padding: .34rem .5rem; font-size: .84rem; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 60px; }

/* Read-only calculated outputs — visibly not editable. */
output.readout {
  display: block; background: #f2f7f5; border-color: #d8e6e0; color: var(--primary);
  font-family: var(--font-en); font-weight: 600; text-align: right;
}
output.readout.readout-lg { font-size: 1.05rem; }
output.readout.neg { background: #fdecea; border-color: #f5c2bd; color: var(--danger); }
output.readout.pos { background: #e8f8ef; border-color: #b7e6ca; color: var(--success); }

.input-with-action { display: flex; gap: 6px; }
.input-with-action .form-control { flex: 1; }

.row { display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.row > .col { flex: 1 1 170px; min-width: 0; }
.row > .col-2 { flex: 2 1 260px; min-width: 0; }

fieldset.form-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem .35rem; margin-bottom: 1.15rem;
}
fieldset.form-section legend {
  padding: 0 .55rem; font-size: .85rem; font-weight: 700; color: var(--primary);
  display: flex; align-items: center; gap: 6px;
}
.form-section.section-elec legend     { color: var(--info); }
.form-section.section-expense legend  { color: var(--danger); }
.form-section.section-employee legend { color: var(--teal); }
.form-section.section-summary legend  { color: #2E8671; }
div.form-section { margin-bottom: 1.1rem; }

.hint-box {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 1rem;
  padding: .6rem .85rem; background: #f0f6fc; border-left: 3px solid var(--info);
  border-radius: var(--radius-sm); font-size: .82rem; color: #35495e;
}
.hint-box i { margin-top: 3px; color: var(--info); }

/* ==================================================================
   Badges
   ================================================================== */
.badge {
  display: inline-block; padding: .2rem .55rem; border-radius: 20px;
  font-size: .72rem; font-weight: 600; color: #fff; background: var(--muted);
  white-space: nowrap;
}
.badge-super_admin { background: var(--danger); }
.badge-manager     { background: var(--info); }
.badge-worker      { background: var(--teal); }
.badge-supplier    { background: var(--warning); }
.badge-customer    { background: var(--purple); }
.status-pending    { background: var(--warning); }
.status-partial    { background: var(--info); }
.status-paid       { background: var(--success); }
.status-cancelled  { background: var(--muted); }
.badge-on          { background: var(--success); }
.badge-off         { background: var(--muted); }

/* ==================================================================
   Sub tabs
   ================================================================== */
.sub-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 1.1rem; flex-wrap: wrap; }
.sub-tab-btn {
  padding: .55rem 1.05rem; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; font-family: inherit; font-size: .92rem; color: var(--muted); cursor: pointer;
}
.sub-tab-btn:hover { color: var(--primary); }
.sub-tab-btn.active { color: var(--info); border-bottom-color: var(--info); font-weight: 600; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

/* ==================================================================
   Modals
   ================================================================== */
.modal {
  display: none;                     /* .active is what actually opens it */
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(16, 24, 40, .55); overflow-y: auto; padding: 3vh 12px;
}
.modal.active { display: block; animation: fadeIn .18s ease; }
body.modal-open { overflow: hidden; }

/* The white panel itself.

   .modal-dialog is listed alongside because that is Bootstrap's name for this,
   and four screens in this application were written with it — পণ্য, স্টক,
   পণ্যের ইতিহাস and বেতন. They matched nothing, so they got no panel at all:
   the fields simply fell down the page and over the sidebar. Accepting both
   spellings means a screen written from muscle memory is at worst plain, never
   broken. */
.modal-content,
.modal-dialog {
  background: #fff; width: 100%; max-width: 620px; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: 94vh;
  animation: fadeInUp .22s ease;
}
.modal-sm   { max-width: 460px; }
.modal-wide { max-width: 1040px; }
.modal-lg   { max-width: 780px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: .95rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-header h2 { font-size: 1.08rem; color: var(--primary); }
.modal-header-actions { display: flex; align-items: center; gap: 10px; }
.btn-close {
  background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.btn-close:hover { color: var(--danger); }

/* Most dialogs wrap their body and footer in a <form>, so THAT is the flex item
   of .modal-content — not .modal-body. It has to become a column flex container
   in its own right and be allowed to shrink, or the height limit never reaches
   the scrolling area.

   min-height:0 is the other half. A flex item defaults to min-height:auto, which
   refuses to shrink below its own content, so a long form never scrolls — it
   simply paints past the bottom of the white panel and spills onto the backdrop. */
.modal-content > form,
.modal-dialog > form {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: .85rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0;
  background: #fbfcfd; border-radius: 0 0 var(--radius) var(--radius);
}
.modal-subject {
  background: #f7f9fb; border-radius: var(--radius-sm); padding: .6rem .85rem;
  margin-bottom: 1rem; font-size: .9rem;
}
.modal-subject b { color: var(--primary); }

/* ==================================================================
   Voucher builder
   ================================================================== */
.items-head { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 .55rem; }
.items-head h4 { font-size: .95rem; color: var(--primary); }

.table-items th { font-size: .78rem; }
.table-items td { padding: .3rem .28rem; vertical-align: top; }
.table-items .form-control { padding: .38rem .5rem; font-size: .85rem; }
.line-total { display: block; padding: .42rem .3rem; font-family: var(--font-en); font-weight: 600; }

.voucher-totals { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.1rem; }
@media (min-width: 768px) { .voucher-totals { grid-template-columns: 1fr 340px; } }
.table-totals { font-size: .9rem; }
.table-totals th { background: none; border: none; font-weight: 500; color: var(--muted); padding: .3rem .5rem; }
.table-totals td { border: none; padding: .3rem .5rem; }
.table-totals tr.grand th, .table-totals tr.grand td {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 1.05rem; font-weight: 700; color: var(--primary);
}
.table-totals tr.due td { font-size: 1rem; font-weight: 700; color: var(--danger); }

.voucher-view-head { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; margin-bottom: 1.25rem; }
.voucher-view-head dl { font-size: .88rem; }
.voucher-view-head dt { color: var(--muted); font-size: .78rem; }
.voucher-view-head dd { margin-bottom: .5rem; font-weight: 600; }

/* ==================================================================
   Employee cards
   ================================================================== */
.employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.15rem; }
.employee-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.15rem; display: flex; flex-direction: column; gap: .85rem;
}
.employee-card.inactive { opacity: .62; }
.employee-header { display: flex; align-items: center; gap: 12px; }
.emp-avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 1.15rem; font-weight: 700; font-family: var(--font-en);
}
.emp-info { min-width: 0; flex: 1; }
.emp-info h4 { font-size: 1rem; color: var(--primary); }
.emp-info .muted { font-size: .8rem; }
.emp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.emp-stat { background: #f7f9fb; border-radius: var(--radius-sm); padding: .5rem .65rem; }
.emp-stat span { display: block; font-size: .72rem; color: var(--muted); }
.emp-stat b { font-size: .95rem; font-family: var(--font-en); }
.emp-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* The one figure that decides what to do next, given the room to say so. */
.emp-headline {
  border-radius: var(--radius-sm); padding: .7rem .85rem; border: 1px solid var(--border);
  background: #f7f9fb;
}
.emp-headline span { display: block; font-size: .74rem; color: var(--muted); }
.emp-headline b {
  display: block; font-size: 1.45rem; line-height: 1.25; font-family: var(--font-en);
  color: var(--text);
}
.emp-headline small { display: block; font-size: .72rem; color: var(--muted); }
.emp-headline.owed    { background: #fdf1f0; border-color: #f3cfcb; }
.emp-headline.owed b  { color: var(--danger); }
.emp-headline.advance { background: #fef7ee; border-color: #f6dfc2; }
.emp-headline.advance b { color: var(--warning); }
.emp-headline.level b { color: var(--success); }

/* This month, three figures side by side: brought in, earned, handed over. */
.emp-month { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.emp-month .emp-stat { padding: .45rem .55rem; }
.emp-month .emp-stat b { font-size: .88rem; }

/* Everything else is history — there when wanted, out of the way when not. */
.emp-more > summary {
  cursor: pointer; font-size: .78rem; color: var(--muted); list-style: none;
  padding: .3rem 0; user-select: none;
}
.emp-more > summary::-webkit-details-marker { display: none; }
.emp-more > summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.emp-more[open] > summary::before { transform: rotate(90deg); }
.emp-more > summary:hover { color: var(--info); }
.emp-more dl {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem;
  margin: .35rem 0 0; padding: .6rem .7rem; background: #f7f9fb; border-radius: var(--radius-sm);
}
.emp-more dt { font-size: .76rem; color: var(--muted); }
.emp-more dd { font-size: .8rem; margin: 0; text-align: right; font-family: var(--font-en); }

/* ==================================================================
   Settings & reports
   ================================================================== */
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
/* Radio cards for a choice that changes what a form means. */
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .choice-row { grid-template-columns: 1fr; } }
.choice {
  display: flex; align-items: flex-start; gap: 9px; padding: .6rem .75rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .15s; background: #fff;
}
.choice:hover { border-color: var(--info); background: #f7fbff; }
.choice input { margin-top: 3px; accent-color: var(--info); }
.choice span { display: block; font-size: .88rem; }
.choice b { display: block; font-weight: 600; }
.choice small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; line-height: 1.45; }
.choice:has(input:checked) { border-color: var(--info); background: #eef6fd; box-shadow: 0 0 0 2px rgba(41,128,185,.12); }

.emp-stat small { display: block; font-size: .68rem; color: var(--muted); margin-top: 1px; }
.emp-stat.warn { background: #fef5ec; border: 1px solid #f8ddc0; }
.emp-stat.warn b { color: var(--warning); }

.badge-cat { background: #eef1f5; color: var(--text); font-weight: 500; }

/* Who a report is about, said once at the top. */
.report-party {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem;
  padding: .7rem .9rem; margin-bottom: .9rem;
  background: #f7f9fb; border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
}
.report-party b { font-size: 1.05rem; color: var(--primary); }
.report-party span { font-size: .84rem; color: var(--muted); }

/* A form that sits read-only until somebody asks to change it. */
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: .4rem; }
.form-control:disabled { background: #f7f9fb; color: var(--text); cursor: default; }

/* Addresses somebody may read but not change: text, not a disabled field. */
.email-readout { display: flex; flex-wrap: wrap; gap: 6px; padding: .2rem 0; }
.email-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eef1f5; border-radius: 999px; padding: 3px 11px;
  font-size: .82rem; font-family: var(--font-en);
}
.email-chip b {
  font-family: inherit; font-size: .68rem; background: var(--info);
  color: #fff; border-radius: 999px; padding: 0 6px;
}

.email-row { display: flex; gap: 6px; margin-bottom: .45rem; }
.email-row .form-control { flex: 1; }

.perm-row {
  display: flex; align-items: flex-start; gap: 9px; padding: .4rem .1rem;
  border-bottom: 1px dashed var(--border); font-size: .87rem;
}
.perm-row:last-child { border-bottom: none; }
.perm-row input { margin-top: 3px; }

/* A report is something you print and hand to somebody, so it is laid out as
   a document: a masthead, then figures, then the workings underneath. */
.report-area { padding: 1.6rem 1.5rem 2rem; min-height: 220px; }

.report-header {
  text-align: center; margin-bottom: 1.6rem; padding-bottom: 1.1rem;
  border-bottom: 3px double var(--primary);
}
.report-header h2 { color: var(--primary); font-size: 1.3rem; letter-spacing: .01em; }
.report-header h3 {
  font-size: .95rem; font-weight: 500; color: var(--text);
  margin-top: .15rem; text-transform: none;
}
.report-header .meta { font-size: .8rem; color: var(--muted); margin-top: .45rem; }

/* One sentence saying what the page answers. Twenty-one report names in a
   dropdown is a list to be guessed at; this is what stops the shop running
   four of them to find the one it wanted. */
.report-header .answers {
  font-size: .86rem; color: var(--muted); margin: .4rem auto 0; max-width: 46rem;
}

/* The headline figures.

   The first one is the ANSWER — what the report was run to find out — and it
   is drawn at twice the weight of the rest. They all used to be the same size
   in one wrapping row, which left the reader to work out which number the page
   was about; that is work the page should do. */
.report-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem; margin-bottom: 1.6rem; align-items: stretch;
}
.report-tile {
  background: #f7f9fb; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .75rem .8rem; text-align: left; border-left: 3px solid var(--border-strong);
}
.report-tile.lead {
  grid-column: span 2; background: #eef4fa;
  border-color: var(--primary); border-left-width: 4px;
  padding: .85rem 1rem;
}
.report-tile.lead span { font-size: .8rem; color: var(--primary); font-weight: 600; }
.report-tile.lead b { font-size: 1.75rem; }
@media (max-width: 560px) { .report-tile.lead { grid-column: 1 / -1; } }

.report-tile span {
  display: block; font-size: .74rem; color: var(--muted); margin-bottom: 2px;
  letter-spacing: .01em;
}
.report-tile b {
  font-size: 1.12rem; color: var(--primary); font-family: var(--font-en);
  line-height: 1.25; display: block;
}

/* Printing a report.

   The shop prints these to take to an accountant or to file, and everything
   that helps on screen — the sidebar, the picker, the buttons — is noise on
   paper. Tables must not be cut across a page break either: half a ledger on
   one sheet and half on the next is how a figure gets read twice. */
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .bottom-nav, .toolbar, .card-head,
  .toast-wrap, .modal, .loading-overlay, .schema-banner { display: none !important; }
  .main, #main-content, .report-area { margin: 0; padding: 0; }
  /* The picker sits in its own card above the report; on paper it is noise. */
  #content-reports > .card:first-child { display: none !important; }
  .card, .table-card { box-shadow: none; border: none; }
  .report-header { break-after: avoid; }
  .report-tiles { break-inside: avoid; }
  .report-section-title { break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; break-after: auto; }
  thead { display: table-header-group; }
}

/* Each section is announced, so a long report can be read in pieces. */
.report-section-title {
  font-size: .92rem; color: var(--primary); margin: 1.8rem 0 .55rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: .5rem;
}
.report-section-title::before {
  content: ""; width: 3px; height: .82rem; background: var(--primary);
  border-radius: 2px; flex: 0 0 auto;
}
.report-section-title small { font-weight: 400; color: var(--muted); font-size: .78rem; }

.report-area .table { margin-bottom: .3rem; }
.report-area .table thead th { background: #eef2f6; }
.report-area .table tbody tr:hover { background: #f7fafd; }
.report-empty {
  padding: 1.1rem; text-align: center; color: var(--muted); font-size: .85rem;
  background: #f7f9fb; border-radius: var(--radius-sm);
}

/* Printing is the point of the screen, so it is designed for rather than
   inherited: no chrome, no colour-hungry fills, and a table that does not
   break a row across two sheets. */
@media print {
  .report-area { padding: 0; }
  .report-header { border-bottom-width: 2px; }
  .report-tiles { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .report-tile { background: none !important; border: 1px solid #999; }
  .report-section-title { break-after: avoid; page-break-after: avoid; }
  .report-area .table { font-size: .78rem; }
  .report-area .table thead { display: table-header-group; }
  .report-area .table tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ==================================================================
   Toast & loading
   ================================================================== */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: .8rem 1rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); color: #fff;
  font-size: .9rem; animation: slideInRight .25s ease; background: var(--primary);
}
.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-warning { background: var(--warning); }
.toast-info    { background: var(--info); }
.toast span { flex: 1; }
.toast button { background: none; border: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .8; }
.toast button:hover { opacity: 1; }

.loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 1500;
  background: rgba(255,255,255,.6); backdrop-filter: blur(1px); place-items: center;
}
.loading-overlay.active { display: grid; }
.spinner {
  width: 42px; height: 42px; border: 4px solid rgba(41,128,185,.2);
  border-top-color: var(--info); border-radius: 50%; animation: spin .7s linear infinite;
}

/* ==================================================================
   Animations
   ================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main-content-wrapper { margin-left: 0; }
  .hamburger-btn { display: block; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  /* The bottom bar is fixed over this, so the last row of any list needs room
     to clear it. Written as a shorthand rather than a separate padding-bottom
     because this rule sits after the one that would otherwise set it. */
  #main-content { padding: .85rem .85rem 5rem; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .filters, .action-buttons-row { width: 100%; }
  .toolbar .filters .form-control { flex: 1 1 120px; min-width: 0; }
  .summary-cards-row { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .summary-card { padding: .8rem; flex-direction: column; align-items: flex-start; gap: 6px; }
  .card-info .value { font-size: 1.1rem; }
  .modal { padding: 0; }
  .modal-content,
  .modal-dialog { max-width: none; min-height: 100vh; max-height: none; border-radius: 0; }
  .modal-footer { position: sticky; bottom: 0; }
  .current-tab-title { font-size: 1rem; }
  .header-date { display: none; }
  .row { gap: 0; }
  .row > .col, .row > .col-2 { flex: 1 1 100%; }
}

/* ==================================================================
   Print
   ================================================================== */
@media print {
  .sidebar, .top-header, .toolbar, .sub-tabs, .modal, .loading-overlay,
  #toast-container, .row-actions, .btn { display: none !important; }
  .main-content-wrapper { margin-left: 0; }
  #main-content { padding: 0; }
  .card { box-shadow: none; border: none; margin: 0; }
  .tab-content { display: none !important; }
  .tab-content.active { display: block !important; }
  body { background: #fff; font-size: 11pt; }
  .table { font-size: 9pt; }
  .table thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
}

/* ==================================================================
   v3 modules
   ================================================================== */

/* ---- বাকির তালিকা: two directions, never one mixed table ---- */
.due-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.due-column { margin-bottom: 0; }
.due-column .card-head h3 { display: flex; align-items: center; gap: .5rem; }
.due-in  .card-head { border-top: 3px solid var(--success); }
.due-out .card-head { border-top: 3px solid var(--danger); }
.due-in  .card-head h3 i { color: var(--success); }
.due-out .card-head h3 i { color: var(--danger); }
.due-column .sub-tabs { margin: 0 1.25rem .5rem; }
.due-column .toolbar.no-border { padding: 0 1.25rem .5rem; }
.card-head-note { font-size: .8rem; color: var(--muted); }

@media (max-width: 1100px) {
  .due-columns { grid-template-columns: 1fr; }
}

/* ---- খরচের ধরন: the cards that open a category's own ledger ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.category-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: .85rem .9rem; text-align: right;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-family: inherit; font-size: .88rem; color: var(--text);
  cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.category-card:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.category-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(44, 62, 80, .12); }
.category-card > i { font-size: 1.05rem; color: var(--primary-light); align-self: flex-start; }
.category-card .category-name { font-weight: 600; text-align: left; }
.category-card .category-kind,
.category-card .category-count { font-size: .74rem; color: var(--muted); text-align: left; }
.category-card .category-total { font-size: 1.02rem; font-weight: 700; color: var(--primary); text-align: left; }
.category-card .category-due { font-size: .76rem; color: var(--danger); text-align: left; }

/* ---- Gmail addresses: the real credential, so they read like one ---- */
.email-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: .6rem; }
.email-row { display: flex; align-items: center; gap: 8px; }
.email-row .form-control { flex: 1 1 auto; min-width: 0; }
.email-row .email-tag {
  flex: 0 0 auto; font-size: .72rem; color: var(--muted);
  min-width: 74px; text-align: left;
}
.email-row.is-primary .form-control { border-color: var(--primary-light); }
.email-row input[readonly] { background: #f7f9fb; color: var(--muted); }

.email-chip {
  display: inline-block; padding: 1px 7px; margin: 1px 0;
  background: #eef1f5; border-radius: 20px;
  font-size: .78rem; font-family: var(--font-mono);
}
.email-chip.signed-in { background: #e8f8ef; color: #1e7d4a; }

/* ---- the permission grid ---- */
.perm-grid { display: flex; flex-direction: column; gap: .55rem; }
.perm-module {
  display: grid; grid-template-columns: 132px 1fr; gap: .6rem;
  align-items: start; padding: .45rem .1rem;
  border-bottom: 1px dashed var(--border);
}
.perm-module:last-child { border-bottom: none; }
.perm-module-name { font-weight: 600; font-size: .87rem; color: var(--primary); }
.perm-actions { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.perm-item {
  padding: 2px 6px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .83rem; cursor: pointer;
}
.perm-item input { cursor: pointer; }
/* A box that no longer sits where its role would have put it says so. */
.perm-item.added   { background: #eef7f0; border-radius: var(--radius-sm); }
.perm-item.removed { background: #fdf1f0; border-radius: var(--radius-sm); }
.perm-chip { font-style: normal; font-size: .66rem; padding: 1px 6px; border-radius: 999px; }
.perm-item .perm-chip:empty { display: none; }
.perm-item.added   .perm-chip { background: var(--success); color: #fff; }
.perm-item.removed .perm-chip { background: var(--danger);  color: #fff; }
.perm-legend { padding-bottom: .6rem; line-height: 1.7; }
.perm-legend .perm-chip.added   { background: var(--success); color: #fff; }
.perm-legend .perm-chip.removed { background: var(--danger);  color: #fff; }

@media (max-width: 700px) {
  .perm-module { grid-template-columns: 1fr; }
}

/* ---- merging two customer records ---- */
.merge-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .8rem; margin-bottom: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.merge-option:hover { border-color: var(--border-strong); }
.warn-box {
  display: flex; gap: 8px; padding: .7rem .8rem; margin: .7rem 0;
  background: #fdf3e7; border: 1px solid #f3d9b6; border-radius: var(--radius-sm);
  font-size: .85rem; color: #8a5416;
}
.warn-box i { margin-top: 3px; }

/* ---- the profile an employee reads about themselves ---- */
.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .8rem 1.4rem; padding: 0 1.25rem 1.25rem;
}
.profile-field dt { font-size: .76rem; color: var(--muted); margin-bottom: 2px; }
.profile-field dd { font-size: .92rem; }

/* ---- odds and ends ---- */
.row-muted td { opacity: .55; }
.modal.modal-stacked .modal-content,
.modal.modal-stacked .modal-dialog { box-shadow: var(--shadow-lg), 0 0 0 100vmax rgba(0, 0, 0, .12); }

/* ---- who brought the money in ---- */
.employee-income-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem;
  padding: 0 1.25rem 1.25rem;
}
.employee-income {
  display: grid; gap: 4px;
  padding: .7rem .85rem; text-align: left;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; color: var(--text);
  cursor: pointer; transition: border-color .15s ease;
}
.employee-income:hover { border-color: var(--primary-light); }
.employee-income .ei-name  { font-weight: 600; font-size: .88rem; }
.employee-income .ei-total { font-size: 1.1rem; font-weight: 700; color: var(--success); }
.employee-income .ei-meta  { font-size: .74rem; color: var(--muted); }
.employee-income .ei-bar {
  display: block; height: 5px; background: #eef1f5; border-radius: 3px; overflow: hidden;
}
.employee-income .ei-bar i {
  display: block; height: 100%; background: var(--success); border-radius: 3px;
}

/* ---- the standing walk-in record sits above the ordinary customers ---- */
.row-pinned > td { background: #f7fafc; }
.row-pinned > td:first-child { box-shadow: inset 3px 0 0 var(--primary-light); }

/* ---- billing somebody who is not in the directory ---- */
.walkin-toggle {
  padding: .6rem .8rem; margin-bottom: 1rem;
  background: var(--wash, #f5f8fa); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.walkin-toggle .check-inline { font-size: .92rem; }
.walkin-toggle .field-hint { margin-top: .35rem; }

/* ---- the payer types the amount, so the field is the focus of the dialog ---- */
.form-control-lg {
  font-size: 1.35rem; font-weight: 700; padding: .7rem .8rem; text-align: center;
}
#bkp-quick { margin: -.4rem 0 1rem; }
#bkp-quick .btn { width: 100%; }

/* ---- dd/mm/yyyy date entry --------------------------------------------
   The native input stays in the DOM — it keeps the ISO value, the calendar
   picker and its required-ness — but sits behind the text field the user
   actually reads. It must keep a layout box: a display:none control that is
   `required` makes Chrome refuse to submit with "not focusable".
   ---------------------------------------------------------------------- */
.date-field { position: relative; display: block; }
.date-field > input[type="date"] {
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
  opacity: 0; pointer-events: none;
}
.date-field > .date-text { width: 100%; padding-right: 2.1rem; }
.date-field > .date-text.is-bad {
  border-color: var(--danger); background: #fdecea;
}
.date-pick {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
}
.date-pick:hover { background: #eef1f5; color: var(--primary); }

/* Inside a toolbar the date fields sit next to the other filters. */
.toolbar .filters .date-field { flex: 1 1 150px; min-width: 0; }

/* ---- picking vouchers to print together ---- */
.table th.tick, .table td.tick { width: 34px; text-align: center; padding-left: .5rem; padding-right: 0; }
.table td.tick input, .table th.tick input { cursor: pointer; }
#vou-selected-count { font-weight: 400; opacity: .85; }