:root {
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --teal-600:  #0d9488;
  --bg-body:    #f6f8f7;
  --bg-sidebar: #0d3520;
  --bg-card:    #ffffff;
  --border:     #e4ede8;
  --border-mid: #cde0d5;
  --text-main:  #111c16;
  --text-muted: #5c7566;
  --text-light: #96b0a0;
  --sidebar-w: 248px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(22,163,74,.05);
  /* a single warm ledger accent, reserved for the one figure that matters
     most on the Dashboard (Remaining) — everything else stays quiet so
     that figure actually stands out instead of every card competing */
  --brass-400: #d4af5a;
  --brass-500: #bd9142;
  --brass-600: #9c7530;
  --ink-950:   #0a1a12;
  --forest-800:#123a27;
  --shadow-soft: 0 1px 2px rgba(10,26,18,.04), 0 10px 28px -14px rgba(10,26,18,.18);
  --shadow-lift: 0 1px 2px rgba(10,26,18,.05), 0 18px 36px -16px rgba(10,26,18,.24);
}

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

html { overflow-x: hidden; width: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

/* #app-shell is a flex child of <body> (JS toggles it to display:block on
   login) — without flex-growing it, it only shrink-wraps its content
   instead of filling the screen, which is what made every page (dashboard
   especially) look squeezed into the left side with dead space on the
   right on wider screens. */
#app-shell { flex: 1; min-width: 0; }

.content { min-width: 0; } /* lets a flex child actually shrink below its content's natural width instead of forcing the page wider */

/* ---------------- Sidebar (fixed, matches ERP style) ---------------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 200;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 22px 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: var(--bg-sidebar);
  flex-shrink: 0;
}
.brand-logo { width: 84px; height: auto; object-fit: contain; }
.brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.55); text-align: center; text-transform: uppercase;
}

.sidebar-nav {
  flex: 1; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.nav-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: rgba(255,255,255,.25); padding: 10px 10px 8px;
  text-transform: uppercase;
}
.nav-section-label:first-child { padding-top: 4px; }

.nav-btn {
  width: 100%; background: transparent; border: none;
  color: rgba(255,255,255,.58); padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-align: left; font-size: 13.5px;
  font-family: inherit; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: background .15s, color .15s;
}
.nav-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); }
.nav-btn.active {
  background: rgba(34,197,94,.18);
  color: #6ee7b7;
  font-weight: 600;
}
.nav-badge {
  margin-left: auto; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5;
}
.nav-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: .75; transition: opacity .15s;
}
.nav-btn:hover .nav-icon { opacity: 1; }
.nav-btn.active .nav-icon { opacity: 1; color: #4ade80; }

.sidebar-footer {
  padding: 12px 14px 16px;
  font-size: 11px; color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.sidebar-status-row { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; padding: 0 2px; }
.sidebar-version { color: rgba(255,255,255,.35); font-weight: 600; letter-spacing: .03em; }
.clock { color: rgba(255,255,255,.55); font-weight: 500; }

/* ---------------- Main content ---------------- */
.content { margin-left: var(--sidebar-w); flex: 1; padding: 28px 36px; }

/* On big / ultra-wide monitors, fill the screen up to a comfortable reading
   width and center the leftover space evenly (next to the sidebar) instead
   of leaving it all bunched up on the right — this is what makes pages like
   Dashboard look "off-center" on a large monitor. Below this width, content
   simply fills 100% of the space next to the sidebar, as before. */
@media (min-width: 1680px) {
  .content {
    max-width: 1740px;
    padding: 36px 44px;
    margin-left: calc(var(--sidebar-w) + max(0px, (100vw - var(--sidebar-w) - 1740px) / 2));
  }
}
.page { display: none; }
.page.active { display: block; }

.page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; min-width: 0; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--green-900); }
.header-actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; min-width: 0; }

.date-picker { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 3px; }
.date-picker input, .date-picker select {
  padding: 7px 10px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; background: #fff; color: var(--text-main);
}
.inline-picker { display: flex; gap: 6px; align-items: center; }
.inline-picker select {
  padding: 7px 10px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; min-width: 160px;
}
.multi-select-wrap { position: relative; }
.multi-select-btn { min-width: 170px; text-align: left; font-weight: 500; }
.multi-select-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  background: #fff; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width: 220px; max-height: 260px; overflow-y: auto; padding: 6px;
}
.multi-select-panel.open { display: block; }
.multi-select-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.multi-select-option:hover { background: var(--green-50); }
.multi-select-option input[type="checkbox"] { width: auto; margin: 0; }
.multi-select-empty { padding: 10px 8px; font-size: 12.5px; color: var(--text-muted); }
.search-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; margin-bottom: 12px;
}
.search-input:focus { outline: 2px solid var(--green-200); border-color: var(--green-500); }
.empty-msg { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

.btn {
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-outline { background: #fff; border-color: var(--border-mid); color: var(--green-800); }
.btn-outline:hover { background: var(--green-50); }
.btn-danger { background: #fff; border-color: #f3caca; color: #b3261e; }
.btn-danger:hover { background: #fff5f5; }
.btn-sm { padding: 5px 10px; font-size: 11px; }

.emp-card-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.emp-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 20px; min-width: 0; max-width: 100%; }
.card-title { font-size: 15px; font-weight: 700; color: var(--green-800); margin-bottom: 12px; }

.table-scroll { overflow-x: auto; max-width: 100%; }
/* Text size stays fixed and readable no matter how many columns exist —
   we don't shrink font/padding as columns are added (that got unreadable
   fast). Instead the table sizes itself naturally and, once there are more
   columns than comfortably fit, this scrolls horizontally within the card
   — same behaviour on phone, laptop, or a big monitor, so it always looks
   the same and never gets "squished". */
.grid-table { width: auto; min-width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th, .grid-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; white-space: nowrap; }
/* headers can wrap onto a second line (e.g. "Extra Expense (extra)") so a
   long label doesn't force its column wider than the actual data needs —
   data cells stay single-line/nowrap so numbers are always fully visible */
.grid-table th { white-space: normal; }
.grid-table thead th { background: var(--green-50); color: var(--green-900); font-weight: 700; position: sticky; top: 0; }
.th-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 5px; border: none; cursor: pointer;
  font-size: 11px; padding: 0; margin-left: 4px; vertical-align: middle;
  background: var(--green-50); color: var(--green-700);
}
.th-icon-btn:hover { background: var(--green-100); }
.th-icon-btn--delete { background: #fbe9e7; color: #b3261e; }
.th-icon-btn--delete:hover { background: #f6d4d0; }
.th-icon-btn .icon-svg { width: 11px; height: 11px; display: block; }
.grid-table tfoot td { background: var(--green-50); font-weight: 700; }
.grid-table tbody tr.is-clickable { cursor: pointer; }
.grid-table tbody tr.is-clickable:hover td { background: var(--green-50); }
.grid-table tbody tr.project-sub-row td { background: #fffdf5; }
.grid-table tbody tr.project-sub-row td:first-child { font-size: 12.5px; }
.project-row-indent { color: #d97706; font-weight: 700; margin-right: 2px; }
.grid-table input, .grid-table select {
  border: 1px solid var(--border-mid); border-radius: 6px; padding: 5px 6px; font-size: 13px;
  width: 64px; min-width: 44px; max-width: 140px; font-family: inherit;
}
.grid-table select { width: 92px; min-width: 78px; }
.grid-table input[type="text"] { width: 150px; min-width: 100px; max-width: 260px; }
.grid-table .field-note { width: 150px; max-width: 260px; }
.grid-table .field-expense, .grid-table .field-advance,
.grid-table .field-remaining, .grid-table .field-salary-advance { width: 88px; min-width: 72px; }
.grid-table input:focus, .grid-table select:focus { outline: 2px solid var(--green-200); border-color: var(--green-500); }
.grid-table input[readonly] { background: #f4f6f5; color: var(--text-muted); }
.col-actions { width: 40px; text-align: center; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
  font-size: 14px; background: #fbe9e7; color: #b3261e; margin-right: 2px;
}
.icon-btn:hover { background: #f6d4d0; }
.icon-btn--edit { background: var(--green-50); color: var(--green-700); }
.icon-btn--edit:hover { background: var(--green-100); }
.icon-btn .icon-svg { width: 14px; height: 14px; display: block; }

.date-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.date-tab {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border-mid);
  background: #fff; cursor: pointer; color: var(--text-muted); font-weight: 600;
}
.date-tab.active { background: var(--green-600); color: #fff; border-color: var(--green-600); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.page-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: -10px 0 18px; max-width: 900px; }
.advance-history-toggle {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 9px 14px 9px 12px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  background: #fff; font-size: 13px; color: var(--text-main); cursor: pointer; align-self: flex-end;
}
.advance-history-toggle input[type="checkbox"] { width: auto; margin: 0; }
.advance-history-toggle span { margin: 0; }
.advance-section { margin-bottom: 24px; }
.advance-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 2px; }
.advance-section-icon { font-size: 16px; }
.chart-wrap { position: relative; height: 320px; }

/* ---------------- Dashboard hero card ----------------
   A deep ledger-book surface: fine diagonal ruling instead of a flat
   gradient, tabular figures given room to be the loudest thing on the
   page, and the warm brass accent reserved for Remaining — the one
   number that actually tells you where things stand. */
.hero-card {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 34px),
    radial-gradient(ellipse 640px 320px at 88% -10%, rgba(212,175,90,.14), transparent 60%),
    linear-gradient(160deg, var(--ink-950) 0%, var(--forest-800) 62%, #1a4a30 100%);
  border-radius: 16px; padding: 28px 30px; margin-bottom: 22px;
  box-shadow: var(--shadow-lift); color: #fff; position: relative; overflow: hidden;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; position: relative; z-index: 1; }
.hero-title-row { display: flex; align-items: center; gap: 14px; }
.hero-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(155deg, rgba(212,175,90,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(212,175,90,.25);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.hero-title { font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }
.hero-subtitle { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 3px; }
.hero-badge {
  background: rgba(212,175,90,.14); border: 1px solid rgba(212,175,90,.4); color: var(--brass-400);
  font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
}
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; position: relative; z-index: 1; margin-bottom: 20px; background: rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.hero-stat-card { background: rgba(10,20,15,.35); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.hero-stat-card.is-clickable { cursor: pointer; transition: background .15s; }
.hero-stat-card.is-clickable:hover { background: rgba(255,255,255,.05); }
.hero-stat-card.is-clickable:active { background: rgba(255,255,255,.08); }
.hero-stat-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.hero-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.5); }
.hero-stat-value { font-size: 19px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-progress-row { position: relative; z-index: 1; height: 6px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(255,255,255,.1); }
.hero-progress-track { display: flex; width: 100%; height: 100%; }
.hero-progress-legend { display: flex; gap: 18px; margin-top: 11px; font-size: 11.5px; color: rgba(255,255,255,.6); position: relative; z-index: 1; flex-wrap: wrap; }
.hero-progress-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }

/* ---------------- Quick actions ---------------- */
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-btn {
  background: var(--bg-card); border: 1px solid var(--border-mid); color: var(--text-main);
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s;
}
.qa-btn:hover { border-color: var(--green-600); color: var(--green-700); background: var(--green-50); }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft); padding: 17px 18px; display: flex; align-items: center; gap: 13px; position: relative; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--stat-accent, var(--green-500)); }
.stat-card.is-clickable { cursor: pointer; transition: box-shadow .18s, transform .18s; }
.stat-card.is-clickable:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.stat-card.is-clickable:active { transform: translateY(0); }
.stat-card .stat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--stat-accent-bg, var(--green-50)); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.stat-card .label { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 4px; }
.stat-card .value { font-size: 21px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.manage-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.manage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--green-50); border-radius: var(--radius-sm); font-size: 13px; }

.stat-detail-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.stat-detail-row {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  background: var(--green-50); border-radius: var(--radius-sm); font-size: 13px;
}
.stat-detail-row strong { color: var(--green-800); }
.stat-detail-hero {
  text-align: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.stat-detail-hero .big { font-size: 28px; font-weight: 800; color: var(--green-800); }
.stat-detail-hero .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.manage-row .meta { color: var(--text-muted); font-size: 11px; }

.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(10, 30, 20, .45);
  align-items: center; justify-content: center; z-index: 250;
}
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius); padding: 22px; width: 340px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal h3 { font-size: 16px; margin-bottom: 14px; color: var(--green-900); }
.modal label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; margin-top: 10px; }
.modal input, .modal select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: 6px; font-family: inherit; font-size: 13px;
}
.modal textarea {
  display: block; width: 100%; min-height: 84px; padding: 9px 10px; border: 1px solid var(--border-mid); border-radius: 6px;
  font-family: inherit; font-size: 13px; line-height: 1.45; color: inherit; background: #fff; resize: vertical; box-sizing: border-box;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--green-600, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.modal textarea::placeholder { color: #9aa9a0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* New Requisition modal — a little more spacious and polished than the
   plain stacked-label modals used elsewhere, since this one is about
   raising real cash and deserves to feel a bit more considered. */
.modal:has(.req-modal) { width: 380px; }
.req-modal-intro {
  font-size: 12.5px; font-weight: 600; color: var(--green-800); background: var(--green-50);
  border: 1px solid var(--green-100, var(--border)); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 4px;
}
.req-modal-optional { font-weight: 400; color: var(--text-muted); }
.req-amount-field { position: relative; margin-top: 0; }
.req-amount-field .req-amount-prefix {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 600; color: var(--text-muted); pointer-events: none;
}
.req-amount-field input {
  padding-left: 26px !important; font-weight: 600; font-size: 15px !important;
}
.req-file-drop {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  border: 1.5px dashed var(--border-mid); border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
.req-file-drop:hover { border-color: var(--green-500); background: var(--green-50); }
.req-file-drop.has-file { border-style: solid; border-color: var(--green-500); background: var(--green-50); }
.req-file-drop-icon { font-size: 20px; flex-shrink: 0; }
.req-file-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.req-file-drop-text #req-req-file-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.req-file-drop.has-file .req-file-drop-text #req-req-file-name { color: var(--green-800); }
.req-file-drop-hint { font-size: 10.5px; color: var(--text-muted); }
.req-file-drop #req-req-file-btn { flex-shrink: 0; padding: 6px 10px; font-size: 11.5px; pointer-events: none; }

.sidebar-overlay {
  display: none;
}
@media (max-width: 860px) {
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 190;
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
}

.mobile-topbar {
  display: none; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0;
  height: 56px; padding: 0 14px; background: var(--bg-sidebar); z-index: 180;
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.hamburger-btn {
  background: none; border: none; color: #fff; padding: 6px; cursor: pointer; flex-shrink: 0;
}
.hamburger-btn svg { width: 22px; height: 22px; }
.mobile-topbar-logo { width: 26px; height: auto; flex-shrink: 0; }
.mobile-topbar-title { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-close-btn {
  display: none; position: absolute; top: 10px; right: 10px; background: none; border: none;
  color: rgba(255,255,255,.6); font-size: 16px; cursor: pointer; padding: 6px;
}
.sidebar-brand { position: relative; }

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,.3); }
  .sidebar-close-btn { display: flex; }
  .content { margin-left: 0; padding: 74px 16px 20px; }
  .mobile-topbar { display: flex; }
  .app-topbar { justify-content: flex-start; }
  .profile-chip-name, .profile-chip-role { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------------- Further small-screen refinements ---------------- */
@media (max-width: 860px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header h1 { font-size: 19px; }
  .header-actions { width: 100%; }
  .hero-card { padding: 18px 16px; }
  .hero-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-badge { align-self: flex-start; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .quick-actions { gap: 8px; }
  .qa-btn { font-size: 12px; padding: 9px 12px; flex: 1 1 auto; }
  .modal { width: 92vw; max-width: 360px; max-height: 88vh; overflow-y: auto; }
  .login-right { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .btn { font-size: 12.5px; padding: 8px 13px; }
}

/* ---------------- Large monitor refinements ---------------- */
@media (min-width: 1680px) {
  .page-header h1 { font-size: 25px; }
  .hero-card { padding: 30px 34px; }
  .hero-icon { width: 50px; height: 50px; font-size: 23px; border-radius: 14px; }
  .hero-title { font-size: 19px; }
  .hero-subtitle { font-size: 13px; }
  .hero-badge { font-size: 16px; padding: 11px 22px; }
  .hero-stat-card { padding: 16px 18px; }
  .hero-stat-icon { width: 38px; height: 38px; font-size: 17px; }
  .hero-stat-value { font-size: 19px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .stat-card { padding: 20px; gap: 14px; }
  .stat-card .stat-icon { width: 40px; height: 40px; font-size: 17px; }
  .stat-card .value { font-size: 23px; }
  .card { padding: 22px 24px; }
  .chart-wrap { height: 380px; }
  .grid-table { font-size: 13.5px; }
}

/* ---------------- Login screen ---------------- */
.login-screen {
  width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg-sidebar) 0%, #0a2717 100%);
  padding: 20px;
}
.login-card {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 100%; max-width: 780px; min-height: 480px;
  display: flex; overflow: hidden;
}

/* left branding panel */
.login-left {
  flex: 1; background: linear-gradient(160deg, var(--bg-sidebar) 0%, #123a24 100%);
  color: #fff; padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-left::before {
  content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.04); top: -80px; right: -80px;
}
.login-left-inner { position: relative; z-index: 1; }
.login-logo-box {
  width: 76px; height: 76px; background: #fff; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.login-logo-box .login-logo { width: 56px; height: auto; }
.login-company { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.login-tagline { font-size: 11px; letter-spacing: .12em; color: #9fd9b8; font-weight: 700; margin-bottom: 32px; }
.login-features { display: flex; flex-direction: column; gap: 16px; }
.login-feature { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.9); }
.login-feature-icon {
  width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.login-copyright { position: relative; z-index: 1; font-size: 11px; color: rgba(255,255,255,.45); }

/* right form panel */
.login-right { flex: 1; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-right h1 { font-size: 22px; color: var(--green-900); margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; }
.login-right form { text-align: left; }
.login-right label { display: block; font-size: 12px; font-weight: 600; color: var(--text-main); margin: 14px 0 5px; }
.login-right label:first-of-type { margin-top: 0; }
.login-right input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-mid); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
.login-right input:focus { outline: 2px solid var(--green-200); border-color: var(--green-500); }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 42px; }
.login-eye-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px; padding: 8px; opacity: .55;
}
.login-eye-btn:hover { opacity: .9; }
.login-btn { width: 100%; margin-top: 22px; padding: 12px; font-size: 14px; border-radius: 8px; }
.login-error { color: #b3261e; font-size: 12px; margin-top: 10px; }
.login-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 20px; }

@media (max-width: 720px) {
  .login-card { flex-direction: column; max-width: 400px; }
  .login-left { padding: 28px 26px; }
  .login-features { display: none; }
}

/* ---------------- Logout ---------------- */
.logout-btn {
  width: 100%; margin-top: 10px; background: transparent; border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75); padding: 8px; border-radius: var(--radius-sm); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.logout-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------------- Profile chip / topbar ---------------- */
.app-topbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.profile-chip {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: var(--shadow); cursor: pointer;
  transition: box-shadow .15s;
}
.profile-chip:hover { box-shadow: 0 2px 10px rgba(22,163,74,.18); }
.profile-chip-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0;
  overflow: hidden;
}
.profile-chip-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-chip-name { font-size: 12.5px; font-weight: 700; color: var(--green-900); line-height: 1.25; }
.profile-chip-role { font-size: 10.5px; color: var(--text-muted); line-height: 1.25; }
.profile-avatar-lg {
  width: 68px; height: 68px; border-radius: 50%; background: var(--green-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 0 auto 10px;
  overflow: hidden;
}
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-wrap { position: relative; width: 68px; margin: 0 auto 10px; }
.profile-avatar-wrap .profile-avatar-lg { margin: 0; }
.profile-avatar-edit-btn {
  position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-700); color: #fff; border: 2px solid #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px; padding: 0;
}
.profile-avatar-edit-btn:hover { background: var(--green-800); }
.profile-avatar-remove-link {
  display: block; text-align: center; font-size: 11px; color: #b3261e; margin-top: 6px; cursor: pointer;
  background: none; border: none; font-family: inherit; width: 100%;
}
.profile-avatar-remove-link:hover { text-decoration: underline; }
.profile-role-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--green-700); background: var(--green-50);
  border: 1px solid var(--green-200); border-radius: 999px; padding: 2px 10px; margin-top: 4px;
}
.profile-section-label {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin: 18px 0 8px;
  padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px;
}

/* Read-only report tables (Monthly View, Advance, Approvals…): only a long text cell (e.g. transport Details — the app adds
   class .wrap to cells longer than 45 characters) wraps, so the last column (Status) is never pushed out of sight. */
.grid-table.read-only td.wrap { white-space: normal; min-width: 260px; max-width: 420px; overflow-wrap: break-word; }
.grid-table.read-only td:last-child, .grid-table.read-only th:last-child { padding-right: 18px; }

/* tick-box people pickers (department approvers) */
.modal input[type=checkbox] { width: auto; margin: 0; }
.approver-list { border: 1px solid var(--border-mid); border-radius: 8px; padding: 6px 10px; max-height: 150px; overflow-y: auto; background: #fff; }
.approver-list label.approver-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: 13px; color: inherit; cursor: pointer; }
.approver-empty { font-size: 12px; color: #a35b00; padding: 4px 0; }

/* full-screen image viewer: zoom, pan, rotate, download */
#modal-body img:not(.no-zoom) { cursor: zoom-in; }
.img-viewer { position: fixed; inset: 0; z-index: 300; background: rgba(8, 20, 14, .94); display: flex; flex-direction: column; user-select: none; }
.iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: #fff; flex-wrap: wrap; }
.iv-title { font-size: 14px; font-weight: 600; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.iv-tools button, .iv-tools a { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; min-width: 38px; height: 36px; padding: 0 10px; font-size: 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.iv-tools button:hover, .iv-tools a:hover { background: rgba(255,255,255,.24); }
.iv-pct { min-width: 52px; text-align: center; font-size: 13px; }
.iv-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.iv-stage.dragging { cursor: grabbing; }
.iv-stage img { max-width: 96vw; max-height: calc(100vh - 70px); transform-origin: center center; will-change: transform; pointer-events: none; border-radius: 4px; }
.iv-hint { text-align: center; color: rgba(255,255,255,.55); font-size: 12px; padding: 6px 0 10px; }

/* search + filter bar (Accounts Ledger; reusable on other pages) */
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.filter-search { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--border-mid); border-radius: 8px; font-family: inherit; font-size: 13px; }
.filter-count { font-size: 12px; color: var(--text-muted); }
.filter-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; border: 1px solid var(--border); background: var(--green-50, #f5faf7); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.filter-panel label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.filter-panel select, .filter-panel input { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--border-mid); border-radius: 6px; font-family: inherit; font-size: 13px; background: #fff; }
.filter-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #16a34a; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

/* "Where the money is": Cash + each bank */
.source-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.source-chip { flex: 1 1 200px; border: 1px solid var(--border); border-left: 4px solid var(--green-600, #16a34a); border-radius: 10px; padding: 10px 14px; background: #fff; }
.source-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.source-chip .sc-hint { font-size: 11px; color: #a35b00; margin-top: 4px; }
.source-chip--total { background: var(--green-50, #f0fdf4); border-left-color: #0d3520; }
.source-chip .sc-name { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.source-chip .sc-bal { font-size: 20px; font-weight: 800; margin: 2px 0; color: var(--green-900, #14532d); }
.source-chip .sc-sub { font-size: 11px; color: var(--text-muted); }

/* attachment / photo pop-up viewer */
.modal:has(.att-view) { width: min(760px, 94vw); }
.att-view { text-align: center; background: #f4f7f5; border-radius: 8px; padding: 8px; }
.att-view img { max-width: 100%; max-height: 70vh; border-radius: 6px; }


/* ---- filter toolbar used above tables (Advance, Approvals, Daily, Audit log …) ---- */
.tf-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 14px; margin: 0 0 14px; background: var(--green-50, #f5faf7); border: 1px solid var(--border); border-radius: 12px; }
.tf-search { position: relative; flex: 1 1 220px; min-width: 190px; max-width: 320px; }
.tf-search::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3520' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.tf-search input { width: 100%; height: 38px; padding: 0 12px 0 32px; border: 1px solid var(--border-mid); border-radius: 9px; background: #fff; font-family: inherit; font-size: 13px; color: var(--text-main, #12261b); }
.tf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-field > span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding-left: 2px; }
.tf-field select, .tf-field input[type=date] { height: 38px; min-width: 128px; padding: 0 12px; border: 1px solid var(--border-mid); border-radius: 9px; background-color: #fff; font-family: inherit; font-size: 13px; color: var(--text-main, #12261b); }
.tf-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7566' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.tf-field select:focus, .tf-field input:focus, .tf-search input:focus { outline: none; border-color: var(--green-600, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.tf-field select.tf-on { border-color: var(--green-600, #16a34a); background-color: #f0fdf4; font-weight: 600; }
.tf-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; min-height: 38px; }
.tf-actions .btn { height: 38px; padding: 0 14px; }
.tf-note { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tf-sum { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--green-800, #0d3520); }
@media (max-width: 640px) { .tf-search { max-width: none; flex-basis: 100%; } .tf-field { flex: 1 1 130px; } .tf-field select, .tf-field input[type=date] { width: 100%; } .tf-actions { margin-left: 0; width: 100%; } }

/* same look for the big filter panels (Dashboard, Monthly View, Accounts ledger) */
.filter-panel { background: var(--green-50, #f5faf7); border-radius: 12px; padding: 14px 16px; gap: 12px 14px; }
.filter-panel label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.filter-panel select, .filter-panel input[type=date], .filter-panel input[type=search], .filter-panel input[type=text] { height: 38px; margin-top: 5px; padding: 0 12px; border: 1px solid var(--border-mid); border-radius: 9px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-main, #12261b); background-color: #fff; }
.filter-panel select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7566' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.filter-panel select:focus, .filter-panel input:focus { outline: none; border-color: var(--green-600, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.filter-panel .approver-list { margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-main, #12261b); font-size: 13px; border-radius: 9px; }
.filter-panel .approver-opt { font-size: 13px; }
@media (max-width: 640px) { .tf-actions { min-height: 0; } }

.audit-table { width: 100%; table-layout: auto; }
.audit-table td, .audit-table th { white-space: normal; vertical-align: top; }
.audit-table td:nth-child(1) { white-space: nowrap; }
.audit-table td:nth-child(4) { word-break: break-word; min-width: 260px; }
.audit-table td:nth-child(5) { white-space: nowrap; font-size: 12px; color: var(--text-muted); }

/* ---- WhatsApp alerts card (Manage) ---- */
#manage-wa-body .wa-top { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--green-50); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; }
#manage-wa-body .wa-title { font-weight:700; color:var(--green-900); font-size:14px; }
#manage-wa-body .wa-sub { font-size:12px; color:var(--text-muted); }
#manage-wa-body .wa-pill { margin-left:auto; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px; }
#manage-wa-body .wa-pill.on { background:#dcfce7; color:#15803d; }
#manage-wa-body .wa-pill.off { background:#f1f5f2; color:#5c7566; }
#manage-wa-body .wa-switch { position:relative; width:44px; height:24px; flex:none; display:inline-block; margin:0; }
#manage-wa-body .wa-switch input { opacity:0; width:0; height:0; position:absolute; }
#manage-wa-body .wa-slider { position:absolute; inset:0; background:#c5d6cb; border-radius:99px; cursor:pointer; transition:.2s; }
#manage-wa-body .wa-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
#manage-wa-body .wa-switch input:checked + .wa-slider { background:var(--green-600); }
#manage-wa-body .wa-switch input:checked + .wa-slider::before { transform:translateX(20px); }
#manage-wa-body .wa-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
#manage-wa-body .wa-span { grid-column:1 / -1; }
#manage-wa-body .wa-field label { display:block; font-size:12px; font-weight:600; color:var(--green-800); margin-bottom:5px; }
#manage-wa-body .wa-field input, #manage-wa-body .wa-field select, #manage-wa-body .wa-actions input { width:100%; padding:9px 11px; border:1px solid var(--border-mid); border-radius:var(--radius-sm); font-size:13px; background:#fff; }
#manage-wa-body .wa-field input:focus, #manage-wa-body .wa-field select:focus, #manage-wa-body .wa-actions input:focus { outline:2px solid var(--green-200); border-color:var(--green-500); }
#manage-wa-body .wa-ok { font-weight:500; color:#15803d; font-size:11px; }
#manage-wa-body .wa-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
#manage-wa-body .wa-actions input { width:260px; }
#manage-wa-body .wa-or { font-size:12px; color:var(--text-muted); }
#manage-wa-body .wa-last { font-size:12px; margin-top:10px; padding:7px 10px; border-radius:6px; }
#manage-wa-body .wa-last.ok { background:#ecfdf3; color:#0a7c3f; }
#manage-wa-body .wa-last.bad { background:#fef3f2; color:#b42318; }
#manage-wa-body .wa-guide { margin-top:16px; border:1px solid var(--border); border-radius:var(--radius); background:#fbfdfc; }
#manage-wa-body .wa-guide summary { cursor:pointer; padding:11px 14px; font-weight:700; font-size:13px; color:var(--green-800); }
#manage-wa-body .wa-steps { margin:0; padding:2px 18px 6px 36px; font-size:13px; line-height:1.55; color:var(--text-main); }
#manage-wa-body .wa-steps li { margin-bottom:8px; }
#manage-wa-body .wa-steps code { background:var(--green-100); padding:1px 5px; border-radius:4px; font-size:12px; }
#manage-wa-body .wa-note { margin:4px 14px 14px; padding:10px 12px; background:var(--green-50); border-radius:8px; font-size:12.5px; line-height:1.5; }
@media (max-width:700px) { #manage-wa-body .wa-grid { grid-template-columns:1fr; } #manage-wa-body .wa-actions input { width:100%; } }

#manage-wa-body .wa-people-h { margin-top:20px; font-weight:700; color:var(--green-900); font-size:14px; }
#manage-wa-body .wa-people-h span { font-weight:400; font-size:12px; color:var(--text-muted); }
#manage-wa-body .wa-people { margin-top:8px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
#manage-wa-body .wa-person { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
#manage-wa-body .wa-person:last-child { border-bottom:0; }
#manage-wa-body .wa-who { flex:1 1 220px; min-width:200px; font-size:13px; }
#manage-wa-body .wa-un { color:var(--text-muted); font-size:12px; }
#manage-wa-body .wa-person input { width:170px; padding:7px 10px; border:1px solid var(--border-mid); border-radius:var(--radius-sm); font-size:13px; }
#manage-wa-body .wa-person .btn { padding:6px 10px; font-size:12px; }
#manage-wa-body .wa-state { font-size:12px; color:#a35b00; min-width:70px; }
#manage-wa-body .wa-state.ok { color:#0a7c3f; }
#manage-wa-body .wa-chip { display:inline-block; margin:3px 4px 0 0; padding:1px 8px; font-size:11px; font-weight:600; border-radius:99px; background:var(--green-100); color:var(--green-800); }
#manage-wa-body .wa-chip.acc { background:#fef3c7; color:#92400e; }
#manage-wa-body .wa-chip.mgmt { background:#ede9fe; color:#6d28d9; }

/* a cell that holds buttons stays a real table cell (it used to be display:flex, which broke the borders and the alignment) */
.grid-table td[style*="display:flex"], .grid-table td[style*="display: flex"] { display: table-cell !important; vertical-align: middle; }
.grid-table td[style*="display:flex"] > *, .grid-table td[style*="display: flex"] > * { display: inline-flex; align-items: center; vertical-align: middle; margin: 2px 8px 2px 0; }
.grid-table td[style*="display:flex"] > *:last-child, .grid-table td[style*="display: flex"] > *:last-child { margin-right: 0; }
/* transport route diagram — a vertical trip: stop, vehicle + fare, stop … */
.route-wrap { display: flex; flex-direction: column; padding: 6px 2px 2px; }
.rt-stop { display: flex; align-items: center; gap: 14px; }
.rt-dot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 4px #dcfce7; }
.rt-dot.start { background: #0d3520; box-shadow: 0 0 0 4px #bfe6cf; }
.rt-dot.end { background: #b45309; box-shadow: 0 0 0 4px #fde68a; }
.rt-name { font-size: 14.5px; font-weight: 700; color: var(--green-800, #0d3520); word-break: break-word; }
.rt-link { display: flex; align-items: stretch; gap: 14px; min-height: 62px; }
.rt-line { position: relative; width: 34px; flex: none; }
.rt-line::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 14px; margin-left: -1.5px; border-left: 3px solid #94a3b8; }
.rt-line::after { content: ""; position: absolute; left: 50%; bottom: 3px; margin-left: -7px; border-top: 11px solid #94a3b8; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.rt-link.gap .rt-line::before { border-left-style: dashed; border-left-color: #cbd5e1; }
.rt-link.gap .rt-line::after { border-top-color: #cbd5e1; }
.rt-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 6px 0; }
.rt-mode { font-size: 12.5px; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfd3f7; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rt-mode b { font-size: 16px; margin-right: 4px; vertical-align: -1px; }
.rt-fare { font-size: 13px; font-weight: 700; color: #0a7c3f; }
.rt-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bfe6cf; border-radius: 10px; font-size: 13px; }
.rt-total strong { font-size: 16px; color: #0a7c3f; }

.tt-mini { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 280px; background: #fff; }
.tt-mini th, .tt-mini td { border: 1px solid var(--border); padding: 4px 8px !important; text-align: left; white-space: nowrap; }
.tt-mini th { background: var(--green-50, #f0fdf4); font-weight: 700; color: var(--green-800, #0d3520); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.tt-mini .tt-num { text-align: right; font-variant-numeric: tabular-nums; }
.tt-mini tfoot td { font-weight: 700; background: #f6faf7; }
.tt-note { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* employee checklist inside the filter panels */
.filter-panel .fp-field { display: block; min-width: 0; }
.filter-panel .fp-emp { grid-column: span 2; }
.filter-panel .fp-title { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.filter-panel .emp-count { text-transform: none; letter-spacing: 0; font-weight: 700; color: #16a34a; margin-left: 6px; }
.filter-panel .fp-emp > input[type=search] { margin-top: 5px; }
.filter-panel .emp-tools { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 7px 2px 5px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.filter-panel .emp-tools button { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: #1d4ed8; }
.filter-panel .emp-list { max-height: 188px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-mid); border-radius: 10px; background: #fff; }
.filter-panel .emp-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-main, #12261b); }
.filter-panel .emp-row:hover { background: #f0fdf4; }
.filter-panel .emp-row input { display: inline-block; width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; height: 16px; accent-color: #16a34a; cursor: pointer; }
.filter-panel .emp-row:has(input:checked) { background: #e7f5ec; font-weight: 700; }
.filter-panel .emp-empty { padding: 12px; font-size: 12.5px; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Advance requests: action buttons in one aligned, equal-height row */
td.adv-act { white-space:nowrap; }
td.adv-act > button { display:inline-flex; align-items:center; justify-content:center; height:28px; vertical-align:middle; margin:0 6px 0 0; box-sizing:border-box; }
td.adv-act > .icon-btn { width:28px; padding:0; }

/* Approvals: compact table that scrolls inside the page (both scrollbars always reachable), header stays visible */
#page-approvals .table-scroll { overflow:auto; max-height:max(320px, calc(100vh - 500px)); }
#approvals-table { font-size:12px; }
#approvals-table > thead > tr > th { position:sticky; top:0; z-index:2; padding:6px 8px; font-size:12px; }
#approvals-table td { padding:5px 8px; }
#approvals-table > tbody > tr > td:nth-child(8) { white-space:normal; min-width:220px; max-width:300px; overflow-wrap:anywhere; font-size:11px; }
#approvals-table .tt-mini { font-size:10.5px; }
#approvals-table .tt-mini { min-width:200px; }
#approvals-table .tt-mini th { font-size:9.5px; }
#approvals-table .tt-mini th, #approvals-table .tt-mini td { padding:2px 6px !important; }
#approvals-table > tbody > tr > td:last-child { max-width:230px; }
#approvals-table > tbody > tr > td:last-child button { padding:3px 7px; font-size:11px; }
#approvals-table > tbody > tr > td:last-child { display:table-cell !important; min-width:210px; max-width:230px; }
#approvals-table > tbody > tr > td:last-child > button { display:inline-flex; align-items:center; margin:2px 4px 2px 0; vertical-align:middle; }
#approvals-table > tbody > tr > td:last-child, #approvals-table > thead > tr > th:last-child { width:230px; }
#approvals-table > tbody > tr > td:last-child { white-space:normal; }

/* Approvals: per-department counts */
.dept-strip { margin:0 0 14px; }
.dept-strip .ds-title { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.dept-strip .ds-row { display:flex; flex-wrap:wrap; gap:10px; }
.ds-chip { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border-mid, #cfe3d6); border-radius:12px; background:#fff; cursor:pointer; font:inherit; font-size:14px; color:#14532d; }
.ds-chip b { background:#e7f5ec; color:#0a7c3f; border-radius:999px; min-width:26px; padding:2px 8px; font-size:13px; text-align:center; }
.ds-chip:hover { border-color:#0a7c3f; }
.ds-chip.on { background:#0a7c3f; color:#fff; border-color:#0a7c3f; }
.ds-chip.on b { background:#fff; color:#0a7c3f; }

/* Approvals: header sticky only for the main table (not the Transport mini-table), cells top-aligned */
#approvals-table > tbody > tr > td { vertical-align:top; }
#approvals-table .tt-mini th { position:static; }
#approvals-table .trail { font-size:11px; margin-top:2px; color:var(--text-muted); }
#approvals-table .trail b { color:#14532d; font-weight:600; }

/* Approvals: header is solid so rows never show through it; the approval trail is a small table */
#approvals-table > thead > tr > th { background:#e7f5ec; z-index:5; box-shadow:0 1px 0 #cde0d5; }
#approvals-table > tbody > tr > td:nth-child(8) { min-width:330px; max-width:420px; white-space:normal; }
#approvals-table .trail-tbl { margin-top:6px; width:100%; min-width:0; }
#approvals-table .trail-tbl th { font-size:9.5px; text-transform:uppercase; }
#approvals-table .trail-tbl td { white-space:normal; font-size:11px; vertical-align:top; }
#approvals-table .trail-tbl td.tt-when { white-space:nowrap; }

/* Approvals: fit the page width — no sideways scrolling; sentences wrap at spaces, a word is never split */
#page-approvals .table-scroll { overflow-x:hidden; }
#approvals-table { width:100%; min-width:0; table-layout:auto; }
#approvals-table th, #approvals-table td { white-space:normal; word-break:normal; overflow-wrap:normal; padding:5px 7px; }
#approvals-table .tt-mini { min-width:0; width:100%; }
#approvals-table .tt-mini th, #approvals-table .tt-mini td { white-space:normal; overflow-wrap:normal; word-break:normal; }
#approvals-table .tt-mini td.tt-num, #approvals-table .tt-mini th.tt-num, #approvals-table .tt-mini td.tt-when { white-space:nowrap; }
#approvals-table > tbody > tr > td:nth-child(8) { min-width:0; max-width:none; width:30%; overflow-wrap:normal; }
#approvals-table > tbody > tr > td:nth-child(6) { width:26%; }
#approvals-table > tbody > tr > td:last-child, #approvals-table > thead > tr > th:last-child { width:225px; min-width:0; max-width:225px; }
#approvals-table > tbody > tr > td:last-child > button { white-space:nowrap; }
#approvals-table > tbody > tr > td:nth-child(2) { width:28px; }

/* Requisitions page: every table fits the page width (no sideways scroll); sentences wrap at spaces, words are never split; a little more compact */
#page-requisitions .table-scroll { overflow-x:hidden; }
#page-requisitions .grid-table { width:100%; min-width:0; table-layout:auto; font-size:12.5px; }
#page-requisitions .grid-table th, #page-requisitions .grid-table td { white-space:normal; word-break:normal; overflow-wrap:normal; padding:6px 8px; vertical-align:top; }
#page-requisitions .grid-table td.num, #page-requisitions .grid-table th.num { text-align:right; white-space:nowrap; }
#page-requisitions .inv-table tfoot td { font-weight:700; background:var(--green-50); }
#page-requisitions .grid-table td > div { overflow-wrap:normal; }

/* Approvals: roomier — the page scrolls (no small inner box), normal text size */
#page-approvals .table-scroll { overflow:visible; max-height:none; }
#approvals-table { font-size:13px; }
#approvals-table > thead > tr > th { font-size:13px; padding:9px 10px; }
#approvals-table > tbody > tr > td { padding:10px 10px; }
#approvals-table .tt-mini { font-size:12px; }
#approvals-table .tt-mini th { font-size:10.5px; }
#approvals-table .tt-mini th, #approvals-table .tt-mini td { padding:4px 8px !important; }
#approvals-table .trail-tbl td { font-size:12px; }
#approvals-table > tbody > tr > td:last-child > button { font-size:12px; padding:5px 9px; }
#approvals-table > tbody > tr > td:last-child, #approvals-table > thead > tr > th:last-child { width:240px; max-width:240px; }
/* Investors */
.inv-detail-title { margin:18px 0 6px; font-weight:700; color:var(--green-900); }
.inv-detail-title .tt-sub { font-weight:400; color:var(--text-muted); font-size:12px; }
details.inv-det { border:1px solid var(--border); border-radius:10px; margin:8px 0; background:#fff; }
details.inv-det > summary { cursor:pointer; padding:10px 12px; list-style:none; }
details.inv-det[open] > summary { border-bottom:1px solid var(--border); background:var(--green-50); }
details.inv-det .grid-table { margin:8px; width:calc(100% - 16px); }
.inv-items td.num, .inv-items th.num { text-align:right; }

/* Approvals: a calm inner scroll area so Disbursement History below is easy to reach */
#page-approvals .table-scroll { overflow-y:auto; overflow-x:hidden; max-height:72vh; scrollbar-width:thin; scrollbar-color:#9bc4ac #eef4f0; }
#page-approvals .table-scroll::-webkit-scrollbar { width:10px; }
#page-approvals .table-scroll::-webkit-scrollbar-thumb { background:#9bc4ac; border-radius:8px; }
#page-approvals .table-scroll::-webkit-scrollbar-track { background:#eef4f0; }
/* Dashboard drill-down lists */
.dg-title { margin:14px 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
details.dg { border:1px solid var(--border); border-radius:10px; margin:6px 0; background:#fff; }
details.dg > summary { display:flex; justify-content:space-between; gap:10px; cursor:pointer; padding:9px 12px; list-style:none; }
details.dg[open] > summary { background:var(--green-50); border-bottom:1px solid var(--border); }
details.dg small { color:var(--text-muted); font-weight:400; }
.dg-row { display:flex; justify-content:space-between; gap:10px; padding:6px 12px; font-size:12.5px; border-bottom:1px dashed var(--border); }
.dg-row span { overflow-wrap:normal; }
.dg-go { display:block; padding:9px 12px; color:#1d4ed8; font-weight:700; font-size:13px; cursor:pointer; }

.inv-un { color:var(--text-muted); font-size:12px; font-weight:400; }
.inv-un.on { color:#b45309; font-weight:700; }
.inv-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; font-size:13px; }

/* attachments */
.ff-box { border:1px dashed var(--border-mid, #bcd3c4); border-radius:10px; padding:10px; background:#fafdfb; }
.ff-list { margin-bottom:8px; }
.ff-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; margin-bottom:6px; font-size:13px; }
.ff-row.new { border-color:#bfe6cf; background:#f2fbf5; }
.ff-row button { border:0; background:transparent; color:#b42318; cursor:pointer; font-size:14px; }
.fv-item { margin-bottom:18px; }
.fv-name { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.fv-img { max-width:100%; border-radius:8px; display:block; cursor:zoom-in; }
.fv-pdf { width:100%; height:62vh; border:1px solid var(--border); border-radius:8px; background:#fff; }
.fv-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fv-btns .btn { padding:6px 12px; font-size:12px; text-decoration:none; }

.bd-item { border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin:8px 0; background:#fff; }
.bd-head { display:flex; justify-content:space-between; font-weight:600; }
.bd-sub { font-size:12px; color:var(--text-muted); margin:2px 0 6px; }
.bd-details .tt-mini { width:100%; }

/* filter panels: From and To sit side by side in one cell */
.filter-panel .fp-dates { display:flex; gap:12px; grid-column: span 2; }
.filter-panel .fp-dates label { flex:1 1 0; min-width:0; }

/* popups: Transport tables fit inside the window (wrap instead of being cut off) */
#modal-body .tt-mini { min-width:0; width:100%; table-layout:auto; }
#modal-body .tt-mini th, #modal-body .tt-mini td { white-space:normal; overflow-wrap:normal; word-break:normal; padding:4px 6px !important; }
#modal-body .tt-mini td.tt-num, #modal-body .tt-mini th.tt-num { white-space:nowrap; text-align:right; }
.see-more-btn { display:block; width:100%; margin-top:8px; }

/* digital clock in the sidebar */
.dclock { margin:0 0 12px; border-radius:14px; background:radial-gradient(120% 140% at 0% 0%, rgba(74,222,128,.20), rgba(255,255,255,.04) 55%), rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13); overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.25); color:#fff; }
.dc-brand { display:flex; align-items:center; gap:9px; padding:9px 12px; background:rgba(0,0,0,.18); border-bottom:1px solid rgba(255,255,255,.08); }
.dc-brand img { width:30px; height:30px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; }
.dc-brand b { display:block; font-size:11.5px; letter-spacing:.08em; color:#fff; line-height:1.1; }
.dc-brand span { display:block; font-size:9px; letter-spacing:.14em; color:#86efac; margin-top:2px; }
.dc-face { display:flex; align-items:baseline; justify-content:center; gap:4px; padding:14px 8px 8px; font-family:'JetBrains Mono','Consolas','Courier New',monospace; font-variant-numeric:tabular-nums; }
.dc-hm { font-size:36px; font-weight:700; letter-spacing:.02em; color:#fff; text-shadow:0 0 18px rgba(74,222,128,.55); line-height:1; }
.dc-sec { font-size:19px; font-weight:600; color:#4ade80; }
.dc-ampm { font-size:11px; font-weight:700; letter-spacing:.08em; color:#052e16; background:#86efac; border-radius:6px; padding:2px 6px; margin-left:4px; align-self:center; }
.dc-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; padding:8px 12px 11px; border-top:1px dashed rgba(255,255,255,.14); margin:0 10px; padding-left:2px; padding-right:2px; }
.dc-day { font-size:13px; font-weight:700; color:#fff; letter-spacing:.03em; text-transform:uppercase; }
.dc-date { font-size:11.5px; color:rgba(255,255,255,.72); margin-top:2px; }
.dc-week { font-size:10px; font-weight:700; letter-spacing:.06em; color:#bbf7d0; border:1px solid rgba(134,239,172,.4); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.rm-hidden { display:none !important; }
.see-more-btn.tbl { margin:10px 0 2px; }

.payby-sel { width:100%; max-width:170px; font-size:12px; padding:4px 6px; }
.payby-cap { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:2px; }
.payby-val { font-size:12.5px; font-weight:600; color:#14532d; }
.inv-files { font-size:12px; white-space:nowrap; }

.payby-box { margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.payby-box .payby-sel { max-width:210px; }
.payby-box { display:block; }
.payby-box .payby-cap { display:block; }
.payby-box .payby-sel { display:block; width:100%; max-width:none; margin-top:2px; }

/* account history window */
.source-chip.is-clickable { cursor:pointer; transition:transform .12s, box-shadow .12s; }
.source-chip.is-clickable:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(10,124,63,.18); }
.ph-sum { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px; }
.ph-sum > div { background:var(--green-50); border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
.ph-sum span { display:block; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ph-sum b { font-size:18px; }
.pos { color:#0a7c3f; } .neg { color:#b42318; }
.ph-tools { text-align:right; margin-bottom:6px; }
.ph-table { width:100%; min-width:0; font-size:12.5px; }
.ph-table th, .ph-table td { white-space:normal; overflow-wrap:normal; word-break:normal; padding:6px 8px; vertical-align:top; }
.ph-table td.num, .ph-table th.num { text-align:right; white-space:nowrap; }
.ph-sub { font-size:11px; color:var(--text-muted); }
.modal-wide { max-width:min(960px, 96vw) !important; width:min(960px, 96vw) !important; }

.ph-sum4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width:640px) { .ph-sum, .ph-sum4 { grid-template-columns:1fr 1fr; } }

.att-chip { display:inline-block; padding:8px 12px; border:1px solid #bfe6cf; background:#f2fbf5; border-radius:8px; font-size:13px; }
.att-chip a { font-weight:700; margin-left:4px; }

.loan-table { width:100%; min-width:0; font-size:12.5px; }
.loan-table th, .loan-table td { white-space:normal; overflow-wrap:normal; word-break:normal; padding:6px 8px; vertical-align:top; }
.loan-table td.num, .loan-table th.num { text-align:right; white-space:nowrap; }
.loan-act { white-space:nowrap; display:flex; gap:6px; flex-wrap:wrap; }

.dp-wrap { display:grid; gap:8px; }
.dp-item { position:relative; padding:6px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.dp-item img { max-height:220px; object-fit:contain; }
.dp-x { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:1px solid #f3c6c2; background:#fff; color:#b3261e; cursor:pointer; font-size:13px; line-height:1; }

/* ===== Phones & tablets: tables become cards (nothing is cut off, nothing needs sideways scrolling) ===== */
.m-selall { display:none; }
@media (max-width: 820px) {
  .m-selall { display:flex; align-items:center; gap:8px; font-weight:700; padding:6px 2px 10px; }
  #page-approvals .table-scroll, #page-requisitions .table-scroll { overflow:visible !important; max-height:none !important; }
  table.rt-cards, table.rt-cards > tbody, table.rt-cards > tfoot { display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  table.rt-cards > thead { display:none !important; }
  table.rt-cards > tbody > tr, table.rt-cards > tfoot > tr { display:block !important; border:1px solid var(--border); border-radius:14px; margin:0 0 12px; padding:4px 12px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  table.rt-cards > tbody > tr:nth-child(even) > td { background:transparent !important; }
  table.rt-cards > tbody > tr > td, table.rt-cards > tfoot > tr > td { display:flex !important; justify-content:space-between; align-items:flex-start; gap:12px; border:0 !important; border-bottom:1px dashed var(--border) !important; padding:8px 0 !important; text-align:right !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:normal !important; overflow-wrap:anywhere; flex-wrap:wrap; background:transparent !important; }
  table.rt-cards > tbody > tr > td:last-child { border-bottom:0 !important; }
  table.rt-cards > tbody > tr > td::before { content:attr(data-label); flex:0 0 34%; max-width:34%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  table.rt-cards > tbody > tr > td[data-label=""]::before { display:none; }
  table.rt-cards > tbody > tr > td > * { max-width:100%; }
  table.rt-cards > tbody > tr > td > .tt-mini, table.rt-cards > tbody > tr > td .trail-tbl { flex:1 1 60%; min-width:0; text-align:left; }
  table.rt-cards td .tt-mini th, table.rt-cards td .tt-mini td { white-space:normal !important; font-size:11px; }
  table.rt-cards td input[type=text], table.rt-cards td input[type=number], table.rt-cards td select { max-width:100%; }
  /* the approvals table has id-level desktop rules — undo them here */
  #approvals-table > tbody > tr > td, #approvals-table > tbody > tr > td:last-child, #approvals-table > tbody > tr > td:nth-child(6), #approvals-table > tbody > tr > td:nth-child(8) { display:flex !important; width:auto !important; min-width:0 !important; max-width:none !important; }
  #approvals-table > tbody > tr > td:last-child { justify-content:flex-start; gap:8px; }
  #approvals-table > tbody > tr > td:last-child::before { flex:0 0 100%; max-width:100%; }
  #approvals-table > tbody > tr > td:last-child button { flex:1 1 auto; padding:9px 12px !important; font-size:13px !important; }
  #approvals-table > tbody > tr > td:first-child { justify-content:flex-start; }
  .loan-act { justify-content:flex-end; }
  .loan-table, .ph-table { font-size:13px; }
  .table-scroll { -webkit-overflow-scrolling:touch; }
}
@media (max-width: 480px) {
  .content { padding:16px 12px !important; }
  .card { padding:14px !important; }
  .page-header { flex-wrap:wrap; gap:10px; }
  .header-actions { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
  .header-actions .btn { flex:1 1 auto; }
  .modal { width:calc(100vw - 20px) !important; max-width:none !important; }
  .modal-wide { width:calc(100vw - 20px) !important; }
}

/* phone: the profile chip lives inside the fixed top bar so it never scrolls under it */
@media (max-width: 860px) {
  .app-topbar { position: fixed; top: 8px; right: 10px; z-index: 190; margin: 0; }
  .profile-chip { padding: 3px; gap: 0; }
  .profile-chip-text { display: none; }
  .mobile-topbar-title { max-width: calc(100vw - 150px); }
  .content { padding-top: 70px; }
}

/* page jump bar */
.jump-bar { position: sticky; top: 0; z-index: 60; display: flex; gap: 6px; align-items: center; overflow-x: auto; white-space: nowrap; padding: 8px 0; margin: 0 0 12px; background: var(--bg-body); border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.jump-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto; }
.jump-chip { flex: 0 0 auto; border: 1px solid var(--border); background: #fff; color: var(--green-900); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.jump-chip:hover { background: var(--green-50); border-color: var(--green-700, #15803d); }
.page .card { scroll-margin-top: 64px; }
.jump-flash { animation: jumpflash 1.4s ease; }
@keyframes jumpflash { 0% { box-shadow: 0 0 0 3px rgba(22,163,74,.55); } 100% { box-shadow: none; } }
@media (max-width: 860px) { .jump-bar { top: 56px; } .page .card { scroll-margin-top: 120px; } }

/* Transport mini-table: text wraps at word breaks inside its own column (never letter by letter) and the Amount column always stays inside the box */
.tt-mini { table-layout: auto; width: 100%; max-width: 100%; }
.tt-mini th, .tt-mini td { white-space: normal; overflow-wrap: break-word; word-break: normal; }
.tt-mini th.tt-num, .tt-mini td.tt-num { white-space: nowrap; text-align: right; padding-left: 8px !important; }
.grid-table.read-only td.wrap:has(.tt-mini) { max-width: 600px; }

/* floating "back to top" button */
.to-top-btn { position: fixed; right: 18px; bottom: 22px; z-index: 170; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--green-700, #15803d); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.to-top-btn.show { opacity: .94; visibility: visible; transform: none; }
.to-top-btn:hover { opacity: 1; background: var(--green-800, #166534); }
@media print { .to-top-btn { display: none !important; } }

/* ---------------- Dashboard charts ---------------- */
.dash-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-charts .chart-card { margin: 0; min-width: 0; }
.dash-charts .chart-wide { grid-column: 1 / -1; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-head .card-title { margin: 0; }
.chart-sub { font-size: 12px; color: var(--text-muted); }
.dash-charts .chart-wrap { height: 300px; }
.dash-charts .chart-wrap.chart-h-sm { height: 240px; }
.chart-empty { padding: 36px 8px; text-align: center; color: var(--text-muted); font-size: 13px; }
.donut-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-cv { position: relative; width: 190px; height: 190px; flex: 0 0 190px; }
.donut-legend { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.dl-row:hover { background: var(--green-50, #f3f8f4); }
.dl-sw { width: 10px; height: 10px; border-radius: 3px; }
.dl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main, #12261b); }
.dl-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.dl-pct { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 38px; text-align: right; }
@media (max-width: 860px) {
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
  .dash-charts .chart-wrap { height: 280px; }
  .donut-cv { margin: 0 auto; }
}

.mybal-note { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: #f7faf8; font-size: 13.5px; }
.mybal-note.neg { background: #fffaeb; border-color: #f3d9a8; color: #7a4a05; }
.mybal-note.pos { background: #ecfdf5; border-color: #bfe6cf; color: #0a5c33; }
#mybal-table td.num, #mybal-table th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* "See more" keeps working while a filter is on: matching rows always show */
/* (pages replace the old "See more" — nothing to override here any more) */
/* Requisitions: needs-your-attention strip */
.req-alerts { background: #fffaeb; border: 1px solid #f3d9a8; border-left: 4px solid #b54708; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.ra-title { font-weight: 700; color: #7a4a05; font-size: 13px; margin-bottom: 8px; }
.ra-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-chip { border: 1px solid #f3d9a8; background: #fff; color: var(--text-main, #12261b); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.ra-chip:hover { background: #fff4e0; }
.ra-chip b { color: #b54708; }

tr.rq-hide { display: none !important; }
.ra-chip.on { background: #b42318; color: #fff; border-color: #b42318; }
/* the "Needs your attention" strip is RED so it cannot be missed */
.req-alerts { background: #fef3f2 !important; border: 1px solid #f3c2bb !important; border-left: 5px solid #b42318 !important; box-shadow: 0 2px 10px rgba(180,35,24,.12); }
.req-alerts .ra-title { color: #b42318 !important; font-size: 14px; }
.req-alerts .ra-chip { border-color: #f3a39a !important; background: #fff; color: #7a1a12; font-weight: 600; }
.req-alerts .ra-chip:hover { background: #fde4e1 !important; }
.req-alerts .ra-chip b { color: #b42318; }

/* Requisitions: "show only this" after tapping a Needs-your-attention chip */
#page-requisitions .rf-hidden { display: none !important; }
.req-alerts .ra-chip.on { background: #b42318 !important; color: #fff !important; border-color: #b42318 !important; }
.req-alerts .ra-chip.on b { color: #fff; }
.req-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #f3c2bb; border-radius: 10px; padding: 9px 14px; margin: -6px 0 16px; font-size: 13px; color: #7a1a12; }

/* ===== responsive-A start ===== */
/* wide number boxes: 5,000,000.00 must fit on laptops */
.grid-table .field-expense, .grid-table .field-advance, .grid-table .field-remaining, .grid-table .field-salary-advance { width: 120px; min-width: 100px; max-width: 160px; }

/* phone: the page title was hidden under the fixed top bar (a 480px rule reset the top padding) */
@media (max-width: 480px) { .content { padding-top: 70px !important; } }

/* tablets + small laptops (sidebar eats the width): Daily + Monthly tables become cards below 1100px too */
@media (min-width: 821px) and (max-width: 1100px) {
  :is(#page-daily, #page-monthly) table.rt-cards, :is(#page-daily, #page-monthly) table.rt-cards > tbody, :is(#page-daily, #page-monthly) table.rt-cards > tfoot { display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  :is(#page-daily, #page-monthly) table.rt-cards > thead { display:none !important; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr, :is(#page-daily, #page-monthly) table.rt-cards > tfoot > tr { display:block !important; border:1px solid var(--border); border-radius:14px; margin:0 0 12px; padding:4px 12px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr:nth-child(even) > td { background:transparent !important; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr > td, :is(#page-daily, #page-monthly) table.rt-cards > tfoot > tr > td { display:flex !important; justify-content:space-between; align-items:flex-start; gap:12px; border:0 !important; border-bottom:1px dashed var(--border) !important; padding:8px 0 !important; text-align:right !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:normal !important; overflow-wrap:anywhere; flex-wrap:wrap; background:transparent !important; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr > td:last-child { border-bottom:0 !important; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr > td::before { content:attr(data-label); flex:0 0 28%; max-width:28%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr > td[data-label=""]::before { display:none; }
  :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr > td > .tt-mini { flex:1 1 60%; min-width:0; text-align:left; }
  :is(#page-daily, #page-monthly) table.rt-cards td .tt-mini th, :is(#page-daily, #page-monthly) table.rt-cards td .tt-mini td { white-space:normal !important; font-size:11px; }
  #daily-table.rt-cards > tbody > tr > td.project-wise-cell > div { white-space:normal !important; }
  #daily-table.rt-cards td input:not([type=checkbox]), #daily-table.rt-cards td select.payby-sel { flex:1 1 60%; width:auto; min-width:0; max-width:100%; text-align:right; }
  .grid-table.read-only td.wrap:has(.tt-mini) { max-width:none; }
  #page-monthly .table-scroll, #page-daily .table-scroll { overflow:visible; }
  #page-daily .grid-table td > .table-scroll, .table-scroll { max-width:100%; }
}

/* phone / tablet-portrait */
@media (max-width: 820px) {
  /* inputs inside a card row fill the value side instead of being cut at 64-150px */
  .rt-cards td input:not([type=checkbox]):not([type=radio]):not([type=file]) { flex:1 1 60%; width:auto !important; min-width:0; max-width:100% !important; text-align:right; font-size:14px; }
  .rt-cards td input:not([type=checkbox]):not([type=radio]), .rt-cards td select { min-height:36px; }
  .rt-cards td select { flex:1 1 60%; width:auto !important; min-width:0; max-width:100% !important; }
  .rt-cards td .payby-box { flex:1 1 100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; text-align:left; }
  .rt-cards td .payby-box select { flex:1 1 60%; width:auto; max-width:100%; }
  #daily-table.rt-cards td.project-wise-cell > div { white-space:normal !important; text-align:right; }
  /* Transport mini-table inside a card: tight padding so Amount is never cut */
  .rt-cards td .tt-mini { table-layout:auto; width:100%; }
  .rt-cards td .tt-mini th, .rt-cards td .tt-mini td { padding:4px 5px !important; font-size:11px; }
  .rt-cards td .tt-mini th.tt-num, .rt-cards td .tt-mini td.tt-num { padding-left:4px !important; font-size:10.5px; letter-spacing:0; }
  .rt-cards td > div:has(> .tt-mini), .rt-cards td > .tt-mini { overflow-x:auto; max-width:100%; }
}
@media (max-width: 480px) {
  .rt-cards td .tt-mini th, .rt-cards td .tt-mini td { padding:3px 3px !important; font-size:10.5px; }
  .rt-cards td .tt-mini th:first-child, .rt-cards td .tt-mini td:first-child { min-width:0; }
}

/* tap targets on touch screens */
@media (max-width: 860px) {
  .page .btn, .page .multi-select-btn { min-height:38px; }
  .jump-chip { padding:8px 14px; min-height:36px; }
  .date-tab { min-height:36px; padding-top:7px; padding-bottom:7px; }
  .page .icon-btn { width:34px; min-width:34px; height:34px; }
  .page .th-icon-btn { width:30px; height:30px; }
  .page .date-picker input, .page .date-picker select { min-height:38px; }
  #page-advance .btn { min-height:38px; }
  .header-actions .date-picker { min-width:0; max-width:100%; }
  .header-actions .date-picker input, .header-actions .date-picker select { max-width:100%; box-sizing:border-box; }
  .page-header { min-width:0; }
  .header-actions > * { min-width:0; }
  #advance-emp-picker { max-width:100%; min-width:0; }
  .multi-select-btn { min-width:0; max-width:100%; }
}
@media (max-width: 480px) {
  .header-actions .date-picker { flex:1 1 140px; }
  .header-actions .date-picker:has(#daily-emp-multiselect), .header-actions .date-picker#daily-picker-label { flex:1 1 100%; }
}
/* big numbers never poke out of their stat card */
.stat-card > div:not(.stat-icon), .hero-stat-card > div:not(.hero-stat-icon) { min-width:0; }
.stat-card .value, .hero-stat-value { overflow-wrap:anywhere; }
.stat-card .value { font-size:clamp(15px, 1.6vw, 21px); overflow-wrap:normal; white-space:nowrap; }
.hero-stat-value { font-size:clamp(15px, 1.6vw, 19px); overflow-wrap:normal; white-space:nowrap; }
/* laptop: Daily table's first column stops swallowing half the screen (long names wrap, Payment-by boxes capped) */
@media (min-width: 1101px) {
  #daily-table td:first-child { white-space:normal; max-width:340px; min-width:220px; overflow-wrap:break-word; }
  #daily-table .payby-sel { max-width:260px; }
}
.stat-grid { grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
@media (max-width: 860px) { .stat-card .value, .hero-stat-value { white-space:normal; overflow-wrap:anywhere; } .stat-card .value { font-size:21px; } .hero-stat-value { font-size:19px; } .stat-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .stat-grid { grid-template-columns:1fr; } }

/* Dashboard + Advance tables become cards on tablets / small laptops too */
@media (min-width: 821px) and (max-width: 1100px) {
  :is(#page-dashboard, #page-advance) table.rt-cards, :is(#page-dashboard, #page-advance) table.rt-cards > tbody, :is(#page-dashboard, #page-advance) table.rt-cards > tfoot { display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  :is(#page-dashboard, #page-advance) table.rt-cards > thead { display:none !important; }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr, :is(#page-dashboard, #page-advance) table.rt-cards > tfoot > tr { display:block !important; border:1px solid var(--border); border-radius:14px; margin:0 0 12px; padding:4px 12px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr:nth-child(even) > td { background:transparent !important; }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr > td, :is(#page-dashboard, #page-advance) table.rt-cards > tfoot > tr > td { display:flex !important; justify-content:space-between; align-items:flex-start; gap:12px; border:0 !important; border-bottom:1px dashed var(--border) !important; padding:8px 0 !important; text-align:right !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:normal !important; overflow-wrap:anywhere; flex-wrap:wrap; background:transparent !important; }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr > td:last-child { border-bottom:0 !important; }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr > td::before { content:attr(data-label); flex:0 0 28%; max-width:28%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  :is(#page-dashboard, #page-advance) table.rt-cards > tbody > tr > td[data-label=""]::before { display:none; }
  :is(#page-dashboard, #page-advance) .table-scroll { overflow:visible; }
}
/* ===== responsive-A end ===== */

/* ===== responsive-B start ===== */
/* totals rows (tfoot) get their labels too when a table turns into cards */
@media (max-width: 820px) {
  table.rt-cards > tfoot > tr > td::before { content:attr(data-label); flex:0 0 34%; max-width:34%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  table.rt-cards > tfoot > tr > td[data-label=""]::before { display:none; }
  table.rt-cards > tfoot > tr > td:empty { display:none !important; }
  table.rt-cards > tfoot > tr > td:last-child { border-bottom:0 !important; }
}

/* tablets / small laptops: tables of these pages become cards (2 per row) instead of being cut off or needing sideways scroll */
@media (min-width: 821px) and (max-width: 1100px) {
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) .table-scroll { overflow:visible !important; max-height:none !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards, :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tfoot { display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:12px; width:100% !important; min-width:0 !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > thead { display:none !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody > tr, :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tfoot > tr { display:block !important; min-width:0; border:1px solid var(--border); border-radius:14px; margin:0; padding:4px 12px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody > tr:nth-child(even) > td { background:transparent !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody > tr > td, :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tfoot > tr > td { display:flex !important; justify-content:space-between; align-items:flex-start; gap:12px; border:0 !important; border-bottom:1px dashed var(--border) !important; padding:8px 0 !important; text-align:right !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:normal !important; overflow-wrap:anywhere; flex-wrap:wrap; background:transparent !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody > tr > td:last-child { border-bottom:0 !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > :is(tbody, tfoot) > tr > td::before { content:attr(data-label); flex:0 0 34%; max-width:34%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > :is(tbody, tfoot) > tr > td[data-label=""]::before { display:none; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tfoot > tr > td:empty { display:none !important; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards > tbody > tr > td > * { max-width:100%; }
  :is(#page-requisitions, #page-billrecv, #page-audit, #page-myinvest, #page-team) table.rt-cards td .tt-mini { flex:1 1 60%; min-width:0; text-align:left; }
}

/* Approvals: the table needs ~1230px, so below 1600px it becomes a grid of cards (nothing cut off) */
@media (min-width: 821px) and (max-width: 1599px) {
  #page-approvals .table-scroll { overflow:visible !important; max-height:none !important; }
  .m-selall { display:flex; align-items:center; gap:8px; font-weight:700; padding:6px 2px 10px; }
  #approvals-table.rt-cards, #approvals-table.rt-cards > tfoot { display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  #approvals-table.rt-cards > tbody { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); gap:12px; width:100% !important; min-width:0 !important; }
  #approvals-table.rt-cards > thead { display:none !important; }
  #approvals-table.rt-cards > tbody > tr { display:block !important; min-width:0; border:1px solid var(--border); border-radius:14px; margin:0; padding:4px 12px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  #approvals-table.rt-cards > tbody > tr > td, #approvals-table.rt-cards > tbody > tr > td:last-child, #approvals-table.rt-cards > tbody > tr > td:nth-child(6), #approvals-table.rt-cards > tbody > tr > td:nth-child(8), #approvals-table.rt-cards > tbody > tr > td:nth-child(2) { display:flex !important; justify-content:space-between; align-items:flex-start; gap:12px; border:0 !important; border-bottom:1px dashed var(--border) !important; padding:8px 0 !important; text-align:right !important; width:auto !important; min-width:0 !important; max-width:none !important; white-space:normal !important; overflow-wrap:anywhere; flex-wrap:wrap; background:transparent !important; }
  #approvals-table.rt-cards > tbody > tr > td:last-child { border-bottom:0 !important; justify-content:flex-start; gap:8px; }
  #approvals-table.rt-cards > tbody > tr > td::before { content:attr(data-label); flex:0 0 34%; max-width:34%; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
  #approvals-table.rt-cards > tbody > tr > td[data-label=""]::before { display:none; }
  #approvals-table.rt-cards > tbody > tr > td:last-child::before { flex:0 0 100%; max-width:100%; }
  #approvals-table.rt-cards > tbody > tr > td:last-child button { flex:1 1 auto; padding:8px 12px !important; font-size:13px !important; }
  #approvals-table.rt-cards > tbody > tr > td:first-child { justify-content:flex-start; }
  #approvals-table.rt-cards > tbody > tr > td > * { max-width:100%; }
  #approvals-table.rt-cards > tbody > tr > td > .tt-mini, #approvals-table.rt-cards > tbody > tr > td .trail-tbl { flex:1 1 60%; min-width:0; text-align:left; }
  #approvals-table.rt-cards td .tt-mini th, #approvals-table.rt-cards td .tt-mini td { white-space:normal !important; }
}
/* Manage lists: name wraps on the left, edit/delete icons stay together, vertically centred, on the right */
.manage-row { gap:10px; }
.manage-row > :first-child { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.manage-row > div:last-child:not(:first-child) { flex:0 0 auto; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.manage-row > div:last-child:not(:first-child) .icon-btn { margin-right:0; }

@media (max-width: 860px) {
  .manage-row .icon-btn { width:36px; height:36px; }
  /* floating back-to-top: smaller and see-through so it hides as little as possible */
  .to-top-btn { width:38px; height:38px; right:10px; bottom:14px; font-size:17px; }
  .to-top-btn.show { opacity:.55; }
}
@media (max-width: 820px) {
  /* action cells in card rows: label on top, buttons wrap in a row underneath */
  table.rt-cards > tbody > tr > td.adv-act { justify-content:flex-start !important; gap:8px; }
  table.rt-cards > tbody > tr > td.adv-act::before { flex:0 0 100% !important; max-width:100% !important; }
  table.rt-cards > tbody > tr > td.adv-act > button { height:auto; min-height:38px; margin:0; font-size:12.5px !important; padding:0 12px !important; }
  table.rt-cards > tbody > tr > td.adv-act > .icon-btn { width:38px; height:38px; padding:0 !important; }
  table.rt-cards > tbody > tr > td[data-label="Decision"] { justify-content:flex-start; }
  table.rt-cards > tbody > tr > td[data-label="Decision"]::before { flex:0 0 100%; max-width:100%; }
}
@media (max-width: 860px) {
  /* popups start below the fixed top bar and always scroll inside themselves */
  .modal-backdrop { padding:64px 10px 10px; box-sizing:border-box; }
  .modal { max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); max-width:100%; box-sizing:border-box; overscroll-behavior:contain; }
  .modal input, .modal select, .modal textarea { max-width:100%; box-sizing:border-box; }
}
@media (max-width: 480px) { #mybal-emp-wrap { flex:1 1 100% !important; } }
/* Bill Receive: the action buttons wrap inside their cell on laptops instead of being cut off */
@media (min-width: 821px) {
  #bill-table td.adv-act { white-space:normal; min-width:150px; max-width:240px; }
  #bill-table td.adv-act > button { margin:2px 4px 2px 0; }
  #bill-table td { white-space:normal; }
}
/* big numbers (5,000,000.00) wrap instead of being clipped inside the small summary cards of my pages */
:is(#page-billrecv, #page-mybalance, #page-myinvest, #page-requisitions, #page-team) .stat-card .value { white-space:normal; overflow-wrap:break-word; }
@media (min-width: 861px) and (max-width: 1500px) {
  :is(#page-billrecv, #page-mybalance, #page-myinvest, #page-requisitions, #page-team) .stat-card { padding:14px 14px; gap:9px; }
  :is(#page-billrecv, #page-mybalance, #page-myinvest, #page-requisitions, #page-team) .stat-card .stat-icon { display:none; }
  :is(#page-billrecv, #page-mybalance, #page-myinvest, #page-requisitions, #page-team) .stat-card .value { font-size:clamp(16px, 1.4vw, 20px); }
}
/* ===== responsive-B end ===== */

/* columns hidden on purpose (Advance / Remaining / Salary Advance) stay hidden in the phone card layout too */
table.rt-cards td[style*="display: none"], table.rt-cards tr > td[style*="display:none"] { display: none !important; }

/* ---- page numbers under long tables ---- */
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 12px 0 4px; }
.pager button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); background: #fff; color: var(--green-900); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pager button:hover:not(:disabled) { background: var(--green-50); border-color: var(--green-700, #15803d); }
.pager button.on { background: var(--green-700, #15803d); border-color: var(--green-700, #15803d); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .pg-gap { color: var(--text-muted); padding: 0 2px; }
.pager .pg-info { width: 100%; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ---- phone: Dashboard header = Month on its own row, From + To side by side; every button the same height ---- */
@media (max-width: 860px) {
  #page-dashboard .page-header .header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  #page-dashboard .page-header .header-actions > label:first-child { grid-column: 1 / -1; }
  #page-dashboard .page-header .header-actions > #dashboard-range-clear { grid-column: 1 / -1; }
  #page-dashboard .page-header .header-actions label.date-picker { width: 100%; margin: 0; }
  #page-dashboard .page-header .header-actions input[type=date], #page-dashboard .page-header .header-actions input[type=month] { width: 100%; min-width: 0; box-sizing: border-box; }
  .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1.1; }
  .btn-primary, .btn-outline { border-width: 1px; border-style: solid; }
}
/* rows on another page / hidden on purpose stay hidden in the phone card layout */
table.rt-cards tbody tr.rm-hidden, table.rt-cards tbody tr.rq-hide, table.rt-cards tr.rm-hidden { display: none !important; }

.pg-off { display: none !important; }
.pager.blk { margin: 16px 0 8px; }

.pager button.pg-all { background: var(--green-50); margin-left: 8px; }

/* ---- Clients page ---- */
.cl-filter-card { padding: 16px 20px; margin-bottom: 16px; }
.cl-filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.cl-filter label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.cl-filter input, .cl-filter select { height: 40px; min-width: 150px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.cl-filter .cl-search { flex: 1 1 240px; } .cl-filter .cl-search input { width: 100%; }
.cl-count { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--green-50); border-radius: 999px; padding: 2px 10px; }
.cl-name { display: flex; align-items: center; gap: 12px; }
.cl-av { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-900); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; border: 1px solid var(--border); }
.cl-note { font-size: 11.5px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }
.cl-chip { display: inline-block; min-width: 26px; text-align: center; padding: 2px 9px; border-radius: 999px; background: var(--green-50); color: var(--green-900); font-weight: 700; font-size: 12px; }
.cl-chip.off { background: #f3f4f6; color: #9ca3af; }
.cl-actions { white-space: nowrap; }
.cl-actions .btn { padding: 5px 11px; font-size: 12px; margin-right: 6px; min-height: 0; }
.cl-actions .cl-del { color: #b42318; border-color: #f3c2bb; }
.cl-list-card tbody tr:hover { background: var(--green-50); }
@media (max-width: 860px) { .cl-filter input, .cl-filter select { min-width: 0; width: 100%; } .cl-filter label { flex: 1 1 45%; } .cl-filter .cl-search { flex-basis: 100%; } }
.cl-filter input, .cl-filter select { border: 1px solid var(--border-mid, #d1d5db); border-radius: 8px; padding: 0 12px; background: #fff; font-family: inherit; font-size: 14px; color: var(--text, #1f2937); box-sizing: border-box; }
.cl-filter input:focus, .cl-filter select:focus { outline: none; border-color: var(--green-700, #15803d); box-shadow: 0 0 0 3px rgba(21,128,61,.12); }

.adv-lines { margin: -4px 0 8px 14px; padding: 6px 10px; border-left: 3px solid var(--green-200, #bbf7d0); font-size: 12px; color: var(--text-muted); }
.adv-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.adv-lines b { color: var(--green-900); font-weight: 600; }
.adv-lines .adv-more { font-style: italic; }

.ap-sub { white-space: nowrap; }
.ap-sub .ap-sub-t { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.gp-modes { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.gp-modes .btn { flex: 1 1 160px; }
.gp-modes .btn.on { background: var(--green-700, #15803d); border-color: var(--green-700, #15803d); color: #fff; }

/* ---- "done" pop-up after every save / submit ---- */
#done-pop { pointer-events: none; position: fixed; top: 18px; left: 50%; transform: translate(-50%, -140%); z-index: 99999; display: flex; align-items: center; gap: 12px; background: #15803d; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px 12px 14px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: transform .28s ease; cursor: pointer; max-width: calc(100vw - 32px); }
#done-pop.show { transform: translate(-50%, 0); }
#done-pop .dp-ic { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.ipn-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--green-50); }
.ipn-row .btn { white-space: nowrap; padding: 5px 10px; font-size: 12px; }

/* ---- stronger red alert strip ---- */
.req-alerts { background: linear-gradient(135deg, #b42318, #d92d20) !important; border: 1px solid #912018 !important; border-left: 8px solid #7a1a12 !important; box-shadow: 0 6px 22px rgba(180,35,24,.35) !important; }
.req-alerts .ra-title { color: #fff !important; font-size: 15px; letter-spacing: .02em; }
.req-alerts .ra-chip { background: #fff !important; border-color: #fff !important; color: #912018 !important; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.req-alerts .ra-chip:hover { background: #fee4e2 !important; }
.req-alerts .ra-chip.on { background: #7a1a12 !important; color: #fff !important; border-color: #fff !important; }
@keyframes alertPulse { 0%, 100% { box-shadow: 0 6px 22px rgba(180,35,24,.35); } 50% { box-shadow: 0 6px 30px rgba(217,45,32,.75); } }
.req-alerts { animation: alertPulse 2.2s ease-in-out infinite; }
/* ---- emergency requisitions ---- */
#dash-emergency { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.emg-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #912018, #d92d20); color: #fff; padding: 14px 18px; border-radius: 14px; cursor: pointer; box-shadow: 0 8px 26px rgba(180,35,24,.45); animation: alertPulse 1.6s ease-in-out infinite; }
.emg-banner .emg-ic { font-size: 28px; }
.emg-banner .emg-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.emg-banner .emg-tx b:first-child { font-size: 16px; letter-spacing: .03em; }
.emg-banner .emg-go { background: #fff; color: #912018; font-weight: 700; padding: 7px 14px; border-radius: 10px; white-space: nowrap; }
.emg-tag { margin-top: 4px; display: inline-block; background: #fee4e2; color: #b42318; border: 1px solid #f3a39a; border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; }
tr.emg-row td { background: #fff5f4; }
.emg-box { border: 1px dashed #f3a39a; background: #fffbfa; border-radius: 10px; padding: 10px 12px; margin: 12px 0 4px; }
.emg-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; cursor: pointer; }

/* ---- requisition amount cell ---- */
.rq-amt { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.rq-amt-main { font-size: 17px; font-weight: 700; color: var(--green-900); letter-spacing: -.01em; }
.rq-prog-bar { height: 6px; border-radius: 99px; background: #e5e7eb; overflow: hidden; }
.rq-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #15803d); border-radius: 99px; }
.rq-prog-tx { font-size: 12px; margin-top: 4px; color: var(--text-muted); }
.rq-prog-tx b { color: var(--green-900); }
.rq-left { color: #b54708; font-weight: 600; } .rq-done { color: #15803d; font-weight: 600; }
.rq-parts { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid #bbf7d0; padding-left: 8px; }
.rq-part { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; font-size: 12px; align-items: baseline; }
.rq-part-by { font-weight: 600; color: #15803d; }
.rq-part-how { grid-column: 1; font-size: 11px; color: var(--text-muted); }
.rq-part b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 13px; }
.rq-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rq-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.rq-chip.violet { background: #f3e8ff; color: #7c3aed; border-color: #e9d5ff; }
.rq-chip.blue { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.rq-chip.grey { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* ---- softer attention strip: light red box, the count is a red circle (like the menu badge) ---- */
.req-alerts { background: #fef3f2 !important; border: 1px solid #f3c2bb !important; border-left: 5px solid #d92d20 !important; box-shadow: 0 2px 10px rgba(180,35,24,.10) !important; animation: none !important; }
.req-alerts .ra-title { color: #b42318 !important; font-size: 14px; letter-spacing: 0; }
.req-alerts .ra-chip { background: #fff !important; border-color: #f3a39a !important; color: #7a1a12 !important; font-weight: 600; box-shadow: none; }
.req-alerts .ra-chip:hover { background: #fde4e1 !important; }
.req-alerts .ra-chip.on { background: #fde4e1 !important; color: #7a1a12 !important; border-color: #d92d20 !important; }
.req-alerts .ra-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; margin-right: 2px; }
/* ---- requisition amount colours ---- */
.rq-amt-main { color: #d92d20 !important; }
.rq-prog-tx { color: #15803d; }
.rq-prog-tx b { color: #15803d; }
.rq-left { color: #991b1b !important; font-weight: 700 !important; }

.rq-amt-main.done { color: #15803d !important; }
.rq-amt-main.rej { color: #6b7280 !important; text-decoration: line-through; }

/* ---- admin "Are you sure?" ---- */
#admin-confirm { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
#admin-confirm .ac-box { background: #fff; border-radius: 16px; padding: 22px 22px 18px; width: min(440px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#admin-confirm .ac-ic { font-size: 30px; line-height: 1; margin-bottom: 6px; }
#admin-confirm h3 { margin: 0 0 6px; font-size: 18px; color: #7a1a12; }
#admin-confirm p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
#admin-confirm textarea { width: 100%; box-sizing: border-box; resize: vertical; }
#admin-confirm .ac-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ---- grouped navigation ---- */
.nav-section-label { margin-top: 14px; }
.nav-section-label:first-child { margin-top: 4px; }
/* ---- client / supplier view card ---- */
.cv-card { border: 1px solid var(--border); background: var(--green-50); border-radius: 12px; padding: 10px 14px; margin-bottom: 4px; }
.cv-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dashed #d9efe0; font-size: 13px; }
.cv-row:last-child { border-bottom: 0; } .cv-row span { color: var(--text-muted); } .cv-row b { text-align: right; font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
/* ---- Users & Access ---- */
.acc-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .acc-wrap { grid-template-columns: 1fr; } }
.acc-user { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; font-family: inherit; }
.acc-user:hover { background: var(--green-50); } .acc-user.on { border-color: var(--green-700, #15803d); background: var(--green-50); box-shadow: 0 0 0 2px rgba(21,128,61,.15); }
.acc-un { display: flex; flex-direction: column; flex: 1; min-width: 0; } .acc-un small { color: var(--text-muted); }
.acc-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tg { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.tg.a { background: #fee4e2; color: #b42318; } .tg.b { background: #dbeafe; color: #1d4ed8; } .tg.c { background: #f3e8ff; color: #7c3aed; } .tg.d { background: #fef3c7; color: #a35b00; }
.acc-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; font-size: 13px; color: var(--text-muted); }
.acc-presets .btn { padding: 5px 12px; font-size: 12px; }
.acc-table td, .acc-table th { text-align: center; } .acc-table td:first-child, .acc-table th:first-child { text-align: left; }
.acc-table input[type=checkbox] { width: 20px; height: 20px; accent-color: #15803d; cursor: pointer; }
.acc-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---- compact grouped menu: every group has a clearer heading and more fits on screen ---- */
.sidebar-nav { padding: 10px 10px; gap: 1px; }
.sidebar-nav .nav-btn { padding: 7px 12px; }
.sidebar-nav .nav-section-label { margin-top: 8px; padding: 8px 10px 4px; color: rgba(255,255,255,.42); letter-spacing: .1em; }
.sidebar-nav .nav-section-label:first-child { margin-top: 0; }
.sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }

/* ---- admin "Are you sure?" — nicer ---- */
#admin-confirm { backdrop-filter: blur(3px); animation: acFade .15s ease; }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes acPop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
#admin-confirm .ac-box { width: min(460px, 100%); padding: 28px 26px 22px; border-radius: 20px; text-align: center; animation: acPop .2s ease; box-shadow: 0 24px 70px rgba(15,23,42,.4); }
#admin-confirm .ac-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #fef3c7; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 0 0 8px #fffbeb; }
#admin-confirm .ac-box.danger .ac-ic { background: #fee4e2; box-shadow: 0 0 0 8px #fff5f4; }
#admin-confirm h3 { margin: 4px 0 6px; font-size: 21px; color: #1f2937; }
#admin-confirm .ac-msg { margin: 0 0 18px; font-size: 15px; color: #4b5563; line-height: 1.5; }
#admin-confirm .ac-msg b { color: #b42318; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; background: #fee4e2; padding: 1px 8px; border-radius: 6px; }
#admin-confirm .ac-note { text-align: left; }
#admin-confirm .ac-note label { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 6px; }
#admin-confirm .ac-note label span { font-weight: 400; color: #9ca3af; }
#admin-confirm textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 78px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: #111827; background: #f9fafb; outline: none; transition: border-color .15s, box-shadow .15s; }
#admin-confirm textarea::placeholder { font-family: inherit; color: #9ca3af; }
#admin-confirm textarea:focus { border-color: #15803d; background: #fff; box-shadow: 0 0 0 3px rgba(21,128,61,.15); }
#admin-confirm .ac-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; justify-content: stretch; }
#admin-confirm .ac-btn { height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1.5px solid transparent; transition: transform .08s, background .15s; }
#admin-confirm .ac-btn:active { transform: scale(.98); }
#admin-confirm .ac-cancel { background: #fff; border-color: #d1d5db; color: #374151; } #admin-confirm .ac-cancel:hover { background: #f3f4f6; }
#admin-confirm .ac-ok { background: #15803d; color: #fff; } #admin-confirm .ac-ok:hover { background: #166534; }
#admin-confirm .ac-box.danger .ac-ok { background: #d92d20; } #admin-confirm .ac-box.danger .ac-ok:hover { background: #b42318; }
@media (max-width: 480px) { #admin-confirm .ac-box { padding: 22px 18px 18px; } }

/* ---- suppliers / raw materials ---- */
.sup-due { color: #b42318; } .sup-clear { color: #15803d; } .sup-paid { color: #15803d; }
.sup-pay { color: #15803d; border-color: #bbe5c8; }
.spv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.spv-tiles > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.spv-tiles span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .spv-tiles b { font-size: 16px; }
@media (max-width: 560px) { .spv-tiles { grid-template-columns: 1fr; } }
.rm-tabs { display: inline-flex; gap: 6px; background: #eef2ee; padding: 4px; border-radius: 12px; margin: 0 0 14px; }
.rm-tab { border: 0; background: transparent; padding: 8px 18px; border-radius: 9px; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }
.rm-tab.on { background: #fff; color: var(--green-900); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.rm-code { display: inline-block; background: #eef2ee; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; color: #374151; }
.rm-pg { display: inline-block; background: #14532d; color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 1px 2px 1px 0; }
.rm-pg i { font-style: normal; cursor: pointer; margin-left: 4px; opacity: .8; }
.rm-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .rm-st.on { background: #dcfce7; color: #15803d; } .rm-st.off { background: #f3f4f6; color: #6b7280; }
.rm-low { color: #b42318; font-weight: 700; } .rm-lowtag { font-size: 10.5px; font-weight: 700; color: #b42318; }
.rmf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .rmf-2 { grid-template-columns: 1fr; } }
.rmf label { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; } .rmf-h { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); }
.rmf-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; margin: 2px 0 6px; }
.rmf-addrow { display: flex; gap: 8px; } .rmf-addrow input { flex: 1; } .rmf-addrow .btn { padding: 0 14px; }
.rmf-active { display: flex !important; align-items: center; gap: 8px; margin-top: 14px; text-transform: none !important; font-size: 13.5px !important; cursor: pointer; }
.rmf-tags .rmf-h { font-size: 12px; padding: 4px 0; }

/* ---- phones: the small summary cards sit two per row instead of one under the other ---- */
@media (max-width: 600px) {
  #sup-summary, #rm-summary, #clients-summary { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  #sup-summary .stat-card, #rm-summary .stat-card, #clients-summary .stat-card { padding: 10px 12px; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  #sup-summary .stat-value, #rm-summary .stat-value, #clients-summary .stat-value { font-size: 17px; overflow-wrap: anywhere; }
}

/* ---- softer "done" message ---- */
#done-pop { background: #fff; color: #166534; border: 1px solid #bbf7d0; box-shadow: 0 8px 24px rgba(21,128,61,.18); font-weight: 600; padding: 10px 20px 10px 12px; border-radius: 999px; }
#done-pop .dp-ic { background: #16a34a; color: #fff; width: 24px; height: 24px; font-size: 14px; }

/* ---- client contacts (several people) ---- */
.cc-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #15803d; }
.cc-head small { font-weight: 400; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.cc-head .btn { padding: 4px 12px; font-size: 12px; color: #15803d; border-color: #bbe5c8; }
.cc-row { position: relative; border: 1px solid #cfe5d6; border-radius: 12px; padding: 10px 14px 12px; margin-bottom: 10px; background: #fff; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .cc-grid { grid-template-columns: 1fr; } }
.cc-row label { text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.cc-x { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; color: #d92d20; font-size: 15px; cursor: pointer; line-height: 1; padding: 4px; }
.cv-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cv-person { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: #fff; }
.cv-person > div { flex: 1; min-width: 0; } .cv-tel { white-space: nowrap; font-weight: 600; font-size: 13px; text-decoration: none; color: #15803d; background: #ecfdf3; padding: 5px 10px; border-radius: 999px; }

/* ---- phone cards: a row the filters hid (inline display:none) must stay hidden — the card layout was forcing it back ---- */
table.rt-cards > tbody > tr[style*="display: none"], table.rt-cards > tbody > tr[style*="display:none"],
:is(#page-daily, #page-monthly) table.rt-cards > tbody > tr[style*="display: none"], :is(#page-daily, #page-monthly) table.rt-cards > tbody > tr[style*="display:none"] { display: none !important; }

/* ---- dashboard: suppliers & raw materials ---- */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sd-tile { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: #fff; transition: box-shadow .15s, border-color .15s, transform .1s; }
.sd-tile:hover { border-color: #86d3a4; box-shadow: 0 4px 14px rgba(21,128,61,.12); transform: translateY(-1px); }
.sd-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--green-50); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.sd-lab { font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .sd-val { font-size: 18px; font-weight: 700; color: var(--green-900); letter-spacing: -.01em; }
.sd-val.sup-due { color: #b42318; } .sd-val.sup-paid { color: #15803d; }

/* ---- purchase payments ---- */
.rpp-box { border: 1px solid #cfe5d6; border-radius: 12px; padding: 10px 12px; margin-top: 14px; background: #fcfffd; }
.rpp-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.rpp-row { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #dbeadf; font-size: 13px; }
.rpp-n { color: var(--text-muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpp-x { border: 0; background: transparent; color: #d92d20; cursor: pointer; font-size: 14px; }
.rpp-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .rpp-chip.advance { background: #fef3c7; color: #a35b00; } .rpp-chip.running { background: #dbeafe; color: #1d4ed8; } .rpp-chip.full { background: #dcfce7; color: #15803d; }
.rpp-add { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr auto; gap: 8px; margin-top: 10px; align-items: center; }
.rpp-add .btn { padding: 0 14px; height: 38px; white-space: nowrap; }
@media (max-width: 760px) { .rpp-add { grid-template-columns: 1fr 1fr; } .rpp-add input[type=text], .rpp-add .btn { grid-column: 1 / -1; } .rpp-row { grid-template-columns: auto 1fr auto auto; } .rpp-n { display: none; } }
.rp-paidcell { cursor: pointer; } .rp-paidcell:hover { background: var(--green-50); }
.rp-due { font-weight: 600; } .rp-due.late { color: #b42318; background: #fee4e2; padding: 2px 8px; border-radius: 999px; }

/* ---- Product Management ---- */
.pm-banner { background: linear-gradient(135deg, #0d3520, #14532d 60%, #166534); color: #fff; border-radius: 18px; padding: 26px 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pm-banner h1 { color: #fff; margin: 8px 0 6px; font-size: 26px; } .pm-banner p { margin: 0; max-width: 560px; font-size: 13.5px; opacity: .92; }
.pm-kicker { display: inline-block; background: rgba(255,255,255,.16); border-radius: 999px; padding: 4px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.pm-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; } .pm-banner-btns .btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); } .pm-banner-btns .btn.btn-white { background: #fff; color: #0d3520; font-weight: 700; }
.pm-bar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .pm-bar-row .btn-primary { margin-left: auto; }
.pm-pill { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--text-muted); } .pm-pill:empty { display: none; }
.pm-search input { border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; min-width: 260px; background: #fff; }
.pm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pm-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; cursor: pointer; transition: box-shadow .18s, transform .18s; } .pm-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pm-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.pm-card-top img, .pm-ini { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; } .pm-ini { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.pm-chip { background: #e7f6ec; color: #15803d; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pm-card h3 { margin: 0 0 6px; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; } .pm-card p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-muted); }
.pm-card-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 13px; font-weight: 600; } .pm-enter { color: #15803d; } .pm-edit { color: var(--text-muted); margin-left: auto; } .pm-go { color: var(--text-muted); }
.pm-back { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .pm-back h2 { margin: 0; }
.pm-code { background: #eef2f6; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.pm-part { display: inline-block; background: #eef7f1; border: 1px solid #cfe5d6; border-radius: 8px; padding: 2px 9px; font-size: 12px; margin: 2px 4px 2px 0; }
.pm-img-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pm-img-prev { width: 64px; height: 64px; border-radius: 12px; background: #dcfce7; color: #15803d; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pm-img-prev img { width: 100%; height: 100%; object-fit: cover; }
.pm-warn { background: #fff7e6; border: 1px solid #f5d28a; color: #8a5a00; border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.pm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .pm-two { grid-template-columns: 1fr; } }
.pm-bar { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto; gap: 10px; align-items: center; padding: 7px 0; cursor: pointer; font-size: 13px; } .pm-bar-l span { display: block; font-size: 11.5px; color: var(--text-muted); }
.pm-bar-t { background: #eef2f6; border-radius: 999px; height: 9px; overflow: hidden; } .pm-bar-t i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #15803d); border-radius: 999px; } .pm-bar-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-group { margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.rc-head { background: linear-gradient(135deg, #0d3520, #14532d); color: #fff; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rc-tog { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 16px; cursor: pointer; } .rc-ico { font-size: 20px; }
.rc-t { flex: 1; min-width: 0; } .rc-t b { display: block; font-size: 15.5px; } .rc-t span { font-size: 12px; opacity: .8; }
.rc-acts { display: flex; gap: 8px; align-items: center; } .rc-acts .btn { background: #fff; color: #0d3520; border: 0; font-weight: 700; }
.rc-ib { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.rc-body { padding: 12px 16px 16px; } .rc-name { cursor: pointer; font-weight: 600; color: #15803d; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .pm-banner { padding: 20px 16px; } .pm-search input { min-width: 0; width: 100%; } .pm-bar-row .btn-primary { margin-left: 0; } .rc-acts .btn { padding: 6px 8px; font-size: 12px; } }

/* ---- Product Management v2 ---- */
.pm-banner-g h1 { text-transform: uppercase; } .pm-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-back-btn { background: #fff; color: #0d3520; border: 0; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.pm-sq { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pm-sq-l { background: #fff; color: #15803d; border: 1px solid var(--border); }
.req { color: #d92d20; } .pm-sec { font-weight: 800; font-size: 14px; border-bottom: 1px solid var(--border); padding: 4px 0 8px; margin: 14px 0 10px; }
.pm-drop { display: block; border: 1.5px dashed #86d6a4; background: #effbf3; border-radius: 12px; padding: 18px; text-align: center; color: #15803d; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: .03em; } .pm-drop.on { background: #dcfce7; }
.pm-drop small { display: block; color: var(--text-muted); margin-top: 6px; font-size: 10.5px; } .pm-drop-ic { display: block; font-size: 24px; margin-bottom: 4px; } .pm-drop-prev img { max-height: 90px; border-radius: 10px; margin-top: 10px; }
.pm-total { background: #effbf3; border: 1px solid #cfe5d6; border-radius: 10px; padding: 10px 12px; font-weight: 800; color: #15803d; }
.pm-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; } .pm-toggle button { border: 0; background: transparent; padding: 8px 14px; font-weight: 600; cursor: pointer; color: var(--text-muted); } .pm-toggle button.on { background: #15803d; color: #fff; }
.pm-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pm-pcard { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: box-shadow .18s, transform .18s; } .pm-pcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pm-pimg { position: relative; height: 200px; background: #eef2f6; display: flex; align-items: center; justify-content: center; color: #c7a97a; } .pm-pimg img { width: 100%; height: 100%; object-fit: cover; }
.pm-pact { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; justify-content: center; } .pm-ab { border: 0; background: rgba(255,255,255,.95); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.pm-pbody { padding: 12px 14px 14px; background: linear-gradient(180deg,#fff,#f2fbf5); } .pm-pbody h4 { margin: 0 0 8px; font-size: 15px; } .pm-prow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .pm-psub { color: var(--text-muted); font-size: 13px; }
.pm-price { display: inline-block; background: #dcfce7; color: #15803d; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; }
.pmp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .pmp-head h1 { margin: 0; font-size: 24px; } .pmp-head span { color: var(--text-muted); font-size: 13px; } .pmp-head-r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pmp-tiles { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .pmp-t { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 18px; min-width: 200px; border: 1px solid; } .pmp-t i { font-style: normal; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); font-size: 18px; } .pmp-t small { display: block; font-weight: 700; font-size: 12px; } .pmp-t small em { font-weight: 500; opacity: .75; font-style: normal; } .pmp-t b { font-size: 22px; }
.pmp-t.t1 { background: #effbf3; border-color: #cfe5d6; color: #14532d; } .pmp-t.t2 { background: #fff5eb; border-color: #f6d3ad; color: #a13d00; }
.pmp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 330px); gap: 16px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.pmp-col { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .pmp-col-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; } .pmp-col-h b { flex: 1; font-size: 14px; } .pmp-n { background: #dcfce7; color: #15803d; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.pm-ib { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: #475467; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; } .pm-ib:hover { background: #f2f4f7; }
.pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; background: #effbf3; padding: 8px 6px; } .pm-stats small { display: block; font-size: 9.5px; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; } .pm-stats b { font-size: 15px; } .pm-stats .cmin, .pm-stats .cmax { color: #b45309; } .pm-stats .cpos { color: #15803d; }
.pm-stats:not(.big) { border-radius: 10px; margin-top: 10px; background: #f2fbf5; } .pm-stats:not(.big) b { font-size: 13px; }
.pmp-rec { margin: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #fff; } .pmp-rec-top { display: flex; align-items: center; gap: 10px; } .pmp-rec-img { width: 46px; height: 46px; border-radius: 10px; background: #eef2f6; display: flex; align-items: center; justify-content: center; color: #8aa89a; overflow: hidden; flex-shrink: 0; } .pmp-rec-img img { width: 100%; height: 100%; object-fit: cover; }
.pmp-rec-n { flex: 1; min-width: 0; } .pmp-rec-n b { display: block; font-size: 13.5px; text-transform: uppercase; } .pmp-rec-n small { color: var(--text-muted); } .pmp-rec-chips { display: flex; gap: 6px; margin-top: 8px; }
.pm-chip.gray { background: #eef2f6; color: #475467; } .pm-chip.warm { background: #ffedd5; color: #b45309; } .pm-chip.off { background: #fee4e2; color: #b42318; }
.pmp-addrec, .pm-dash { display: block; width: calc(100% - 24px); margin: 12px; padding: 10px; border: 1.5px dashed #86d6a4; background: #effbf3; color: #15803d; border-radius: 10px; font-weight: 700; cursor: pointer; } .pm-dash { width: 100%; margin: 0; }
.rcc { border: 1px solid #cfe5d6; border-left: 4px solid #15803d; border-radius: 14px; background: #fcfffd; padding: 14px; margin-bottom: 14px; } .rcc-top { display: flex; align-items: center; gap: 12px; } .rcc-av { width: 46px; height: 46px; border-radius: 12px; background: #dcfce7; color: #15803d; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .rcc-av img { width: 100%; height: 100%; object-fit: cover; }
.rcc-n { flex: 1; min-width: 0; } .rcc-n > b { font-size: 15px; } .rcc-chips { display: flex; gap: 6px; margin-top: 6px; } .rcc-acts { display: flex; }
.rcc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; } .rcc-stats > div { border-radius: 12px; padding: 10px 14px; border: 1px solid; } .rcc-stats small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; } .rcc-stats b { font-size: 18px; } .rcc-stats em { font-size: 12px; font-weight: 500; font-style: normal; }
.rcc-stats .s1 { background: #fff5eb; border-color: #f6d3ad; color: #a13d00; } .rcc-stats .s2 { background: #effbf3; border-color: #bfe6cf; color: #0a7c3f; } .rcc-stats .s3 { background: #ecfeff; border-color: #a5e8f0; color: #0e7490; } .rcc-stats .s4 { background: #0d3520; border-color: #0d3520; color: #fff; } .rcc-stats .s4 small { color: #9bd8b3; }
.rcc-ing-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rcc-ing-h small { margin-left: auto; color: var(--text-muted); } .rcc-tbl thead th { background: #14532d; color: #fff; } .pm-unit { background: #dcfce7; color: #15803d; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700; } .rcc-off { opacity: .5; }
.pm-ing { display: grid; grid-template-columns: 2.4fr auto .8fr .9fr .9fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; } .pm-ing small { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; } .pm-ing select, .pm-ing input[type=number], .pm-ing input[type=text] { width: 100%; } .pm-ing-u { text-align: center; } .pm-ing-x { border: 0; background: transparent; color: #d92d20; cursor: pointer; padding: 8px; }
.pm-allocs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .pm-left { background: #effbf3; border: 1px solid #bfe6cf; border-radius: 10px; padding: 12px 14px; color: #0a7c3f; font-weight: 700; display: flex; justify-content: space-between; } .pm-left.bad { background: #fee4e2; border-color: #f3c2bb; color: #b42318; } .pm-cost { background: #fff5eb; border: 1px solid #f6d3ad; border-radius: 10px; padding: 12px 14px; color: #a13d00; font-weight: 700; display: flex; justify-content: space-between; }
.pm-mini { width: auto; padding: 5px 8px; font-size: 12px; } .pm-addbtn { color: #15803d; border-color: #bfe6cf; }
@media (max-width: 760px) { .pm-ing { grid-template-columns: 1fr 1fr; } .pm-ing-m { grid-column: 1 / -1; } .rcc-stats { grid-template-columns: 1fr 1fr; } .pm-allocs { grid-template-columns: 1fr; } .pmp-cols { grid-auto-columns: 86%; } }
/* modern dashboard */
.pmh { background: radial-gradient(1200px 300px at 85% -40%, rgba(74,222,128,.35), transparent), linear-gradient(135deg, #052e16, #14532d 55%, #166534); color: #fff; border-radius: 20px; padding: 26px 28px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; box-shadow: 0 14px 34px -16px rgba(5,46,22,.7); }
.pmh h1 { color: #fff; margin: 8px 0 6px; font-size: 28px; letter-spacing: -.01em; } .pmh p { margin: 0; opacity: .88; max-width: 520px; font-size: 13.5px; } .pmh-act { display: flex; gap: 8px; flex-wrap: wrap; } .pmh-act .btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); } .pmh-act .btn.btn-white { background: #fff; color: #052e16; font-weight: 700; }
.pmk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pmk { position: relative; overflow: hidden; border-radius: 18px; padding: 18px; color: #fff; cursor: pointer; transition: transform .18s, box-shadow .18s; box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); } .pmk:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); }
.pmk::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pmk-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; } .pmk-l { font-size: 12px; font-weight: 600; opacity: .9; } .pmk-v { font-size: 26px; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; } .pmk-s { font-size: 11.5px; opacity: .8; }
.pmk.k1 { background: linear-gradient(135deg,#16a34a,#15803d); } .pmk.k2 { background: linear-gradient(135deg,#3b82f6,#1d4ed8); } .pmk.k3 { background: linear-gradient(135deg,#f59e0b,#d97706); } .pmk.k4 { background: linear-gradient(135deg,#8b5cf6,#6d28d9); } .pmk.k5 { background: linear-gradient(135deg,#06b6d4,#0e7490); } .pmk.k6 { background: linear-gradient(135deg,#ef4444,#b42318); }
.pm-attn { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .pm-attn button { border: 1px solid #f5d28a; background: #fff8e6; color: #8a5a00; border-radius: 12px; padding: 10px 14px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; } .pm-attn i { font-style: normal; font-weight: 800; }
.pm-chart-wrap { position: relative; height: 270px; }
.pm-rank { display: grid; grid-template-columns: 26px minmax(110px, 1.2fr) 1.4fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border); cursor: pointer; font-size: 13px; } .pm-rank:last-child { border-bottom: 0; }
.pm-rank > b { width: 24px; height: 24px; border-radius: 8px; background: #dcfce7; color: #15803d; display: flex; align-items: center; justify-content: center; font-size: 12px; } .pm-rank-n span { font-weight: 700; display: block; } .pm-rank-n small { color: var(--text-muted); } .pm-rank-bar { background: #eef2f6; border-radius: 999px; height: 8px; overflow: hidden; } .pm-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg,#4ade80,#15803d); border-radius: 999px; } .pm-rank em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-sec > span { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; } .pm-sec > span .pm-mini { width: auto; }

.nav-btn.acc-hide, .acc-hide { display: none !important; }

.pmk, .pm-rank, .pm-attn button { user-select: none; }

.acc-one td { background: #f8fbf9; } .acc-na { color: var(--text-muted); font-size: 12px; text-align: center; }

/* ---- Production, Price Calculator, dashboard filter ---- */
.rp-kind { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 6px; background: #fff; } .rp-kind button { border: 0; background: transparent; padding: 7px 18px; font-weight: 600; cursor: pointer; color: var(--text-muted); } .rp-kind button.on { background: #15803d; color: #fff; }
.pb-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; } .pb-off { opacity: .6; background: #f8faf9; } .pb-hid { font-size: 11px; color: #b45309; margin-top: 3px; } .pb-recrow { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .pb-vis { font-size: 12px; color: var(--text-muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pb-prev { display: flex; gap: 18px; flex-wrap: wrap; background: #effbf3; border: 1px solid #cfe5d6; border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; } .pb-fin { color: #15803d; font-size: 16px; }
.pbc-qty { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #bfe6cf; background: #effbf3; border-radius: 12px; padding: 6px 12px; font-weight: 700; color: #15803d; } .pbc-qty input { width: 90px; font-weight: 800; }
.pbc-info { background: #effbf3; border: 1px solid #cfe5d6; border-radius: 12px; padding: 12px 16px; font-size: 13px; margin-bottom: 14px; color: #14532d; }
.pbc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; } .pbc-t { border-radius: 16px; padding: 18px 22px; } .pbc-t small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; } .pbc-t b { font-size: 30px; }
.pbc-total { background: linear-gradient(135deg, #15803d, #14532d); color: #fff; } .pbc-total small { color: #bbf7d0; } .pbc-unit { background: #fff5eb; border: 1px solid #f6d3ad; color: #a13d00; }
.pbc-break { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .pbc-break > span { align-self: center; font-weight: 800; color: var(--text-muted); } .pbc-bx { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; min-width: 150px; } .pbc-bx small { display: block; font-size: 11px; color: var(--text-muted); } .pbc-bx b { font-size: 18px; } .pbc-prof b { color: #b45309; } .pbc-fin { background: #effbf3; border-color: #bfe6cf; } .pbc-fin b { color: #15803d; }
.pbc-edit { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pbc-edit input { width: 90px; } .pbc-all { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pbc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; } .pbc-col { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .pbc-col-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); } .pbc-colval { font-weight: 800; color: #15803d; }
.pbc-rec { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; flex-wrap: wrap; } .pbc-val { font-weight: 800; color: #15803d; } .pbc-no { font-style: normal; font-size: 12px; color: var(--text-muted); } .pbc-offrow { opacity: .55; }
.pbd-filter { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; } .pbd-filter label { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 700; color: var(--text-muted); gap: 4px; } .pbd-filter select, .pbd-filter input { min-width: 220px; }
.pbd-strip { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 18px; } .pbd-strip > span { align-self: center; font-weight: 800; color: var(--text-muted); } .pbd-strip > div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 18px; } .pbd-strip small { display: block; font-size: 11px; color: var(--text-muted); } .pbd-strip b { font-size: 19px; } .pbd-strip .pf b { color: #b45309; } .pbd-strip .fn { background: #effbf3; border-color: #bfe6cf; } .pbd-strip .fn b { color: #15803d; }
.pbd-group { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; flex-wrap: wrap; } .pbd-group h2 { margin: 0; } .pbd-group p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; } .pbd-group .btn { margin-left: auto; } .pbd-gimg img, .pbd-gimg .pm-ini { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.pbd-money { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); margin-top: 4px; } .pbd-money b { color: var(--text-main); } .pbd-fin b { color: #15803d; }
@media (max-width: 760px) { .pbc-tiles { grid-template-columns: 1fr; } .pbc-edit { margin-left: 0; } .pbd-filter select, .pbd-filter input { min-width: 0; width: 100%; } .pbd-filter label { flex: 1 1 100%; } }

/* ---- Price Calculator: calmer, clearer layout ---- */
.pbc-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .pbc-ttl { flex: 1; min-width: 200px; } .pbc-ttl h1 { margin: 4px 0 2px; font-size: 26px; letter-spacing: -.01em; } .pbc-ttl > span:last-child { color: var(--text-muted); font-size: 13px; } .pbc-k { display: inline-block; background: #dcfce7; color: #15803d; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; padding: 3px 10px; border-radius: 999px; }
.pbc-tools { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .pbc-step small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 4px; }
.pbc-step > div { display: inline-flex; align-items: stretch; border: 1px solid #bfe6cf; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .pbc-step button { width: 40px; border: 0; background: #effbf3; color: #15803d; font-size: 18px; font-weight: 800; cursor: pointer; } .pbc-step button:hover { background: #dcfce7; }
.pbc-step input { width: 86px; border: 0; text-align: center; font-size: 18px; font-weight: 800; padding: 8px 4px; background: #fff; outline: none; } .pbc-print { height: 44px; padding: 0 18px; border-radius: 12px; }
.pbc-hero { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr); gap: 16px; margin-bottom: 14px; }
.pbc-total { background: radial-gradient(500px 200px at 90% -30%, rgba(74,222,128,.35), transparent), linear-gradient(135deg, #166534, #052e16); color: #fff; border-radius: 20px; padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 16px 34px -18px rgba(5,46,22,.8); }
.pbc-total small { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #86efac; } .pbc-total b { font-size: 44px; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0; } .pbc-total em { font-style: normal; font-size: 12.5px; color: #bbf7d0; }
.pbc-calc { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 8px 20px 16px; } .pbc-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed #dbe5df; font-size: 14px; color: #475467; } .pbc-line b { font-size: 18px; color: #101828; font-variant-numeric: tabular-nums; }
.pbc-line.pl b { color: #b45309; } .pbc-line.fin { border-bottom: 0; } .pbc-line.fin span { color: #14532d; font-weight: 700; } .pbc-line.fin b { color: #15803d; font-size: 21px; }
.pbc-pedit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f6faf7; border: 1px solid #e1ece5; border-radius: 14px; padding: 10px 12px; } .pbc-plab { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.pbc-seg { display: inline-flex; background: #fff; border: 1px solid #cfe5d6; border-radius: 10px; overflow: hidden; } .pbc-seg button { border: 0; background: transparent; padding: 7px 14px; font-weight: 700; font-size: 12.5px; color: var(--text-muted); cursor: pointer; } .pbc-seg button.on { background: #15803d; color: #fff; }
.pbc-pedit input { width: 110px; border: 1px solid #cfe5d6; border-radius: 10px; padding: 8px 10px; font-weight: 700; background: #fff; } .pbc-pedit .btn { margin-left: auto; }
.pbc-info { background: #f6faf7; border: 1px solid #e1ece5; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: #475467; margin: 0 0 16px; }
.pbc-all { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 12px; cursor: pointer; } .pbc-all input, .pbc-chk, .pbc-colchk { accent-color: #15803d; width: 17px; height: 17px; cursor: pointer; }
.pbc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.pbc-col { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .pbc-col-h { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; background: linear-gradient(180deg, #f2fbf5, #fff); border-bottom: 1px solid var(--border); } .pbc-col-h label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .pbc-n { width: 22px; height: 22px; border-radius: 7px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pbc-colval { font-weight: 800; color: #15803d; font-size: 15px; font-variant-numeric: tabular-nums; }
.pbc-rec { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 12px; border: 1px solid #e6ece8; border-radius: 12px; padding: 11px 14px; background: #fff; transition: background .15s, border-color .15s; } .pbc-rec:hover { background: #f8fbf9; border-color: #cfe5d6; } .pbc-rec label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; }
.pbc-val { font-weight: 800; color: #15803d; font-variant-numeric: tabular-nums; } .pbc-offrow { opacity: .5; background: #fafafa; } .pb-off.pbc-rec { border-style: dashed; }
@media (max-width: 860px) { .pbc-hero { grid-template-columns: 1fr; } .pbc-total b { font-size: 36px; } .pbc-pedit .btn { margin-left: 0; } }

/* ---- dashboard sections ---- */
.pm-rank { grid-template-columns: 26px 40px minmax(110px, 1.2fr) 1.3fr auto; } .pm-rank-img { width: 40px; height: 40px; border-radius: 10px; background: #eef2f6; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #9aa9a0; flex-shrink: 0; } .pm-rank-img img { width: 100%; height: 100%; object-fit: cover; } .pm-rank-img svg { width: 20px; height: 20px; }
.pbs { margin-top: 26px; } .pbs-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #dcfce7; } .pbs-h h3 { margin: 0; font-size: 18px; color: #14532d; }
.pbs-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .pbs-g { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px; cursor: pointer; text-align: center; transition: box-shadow .18s, transform .18s; } .pbs-g:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pbs-gi { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: #dcfce7; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: #15803d; font-size: 26px; font-weight: 800; } .pbs-gi img { width: 100%; height: 100%; object-fit: cover; } .pbs-g b { display: block; font-size: 13px; text-transform: uppercase; } .pbs-g small { display: block; color: var(--text-muted); font-size: 12px; margin: 2px 0; } .pbs-g em { font-style: normal; font-weight: 800; color: #15803d; font-size: 13px; }
.pbs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; } .pbs-t { border-radius: 14px; padding: 12px 16px; border: 1px solid; } .pbs-t small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; } .pbs-t b { display: block; font-size: 20px; margin: 2px 0; font-variant-numeric: tabular-nums; } .pbs-t em { font-style: normal; font-size: 11.5px; opacity: .8; }
.pbs-t.a { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .pbs-t.b { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; } .pbs-t.c { background: #effbf3; border-color: #bfe6cf; color: #15803d; } .pbs-t.d { background: #fff5eb; border-color: #f6d3ad; color: #b45309; }
.pbs-cw { height: 250px; } .pbs-click { cursor: pointer; } .pbs-click:hover { background: #f8fbf9; } .pbs-bad { color: #b42318; font-weight: 700; }
/* shared look for the inputs of the Product Management pages */
.pm-search input, .pbc-pedit input, .pbd-filter input, .pbd-filter select { font-family: inherit; font-size: 14px; color: var(--text, #1f2937); } .pm-search input { height: 40px; box-sizing: border-box; border: 1px solid var(--border-mid, #d1d5db); border-radius: 8px; padding: 0 14px; background: #fff; min-width: 260px; }
.pm-search input:focus, .pbc-pedit input:focus, .pbc-step input:focus { outline: none; border-color: var(--green-700, #15803d); box-shadow: 0 0 0 3px rgba(21,128,61,.12); }
.cl-filter-card .cl-filter label.cl-search { flex: 1 1 260px; }

/* ---- raw material product groups wrap; client price dashboard ---- */
.rm-pgcell { white-space: normal !important; min-width: 200px; max-width: 340px; line-height: 2; }
.pcat-hero { background: radial-gradient(900px 260px at 90% -40%, rgba(74,222,128,.35), transparent), linear-gradient(135deg, #052e16, #14532d 55%, #166534); color: #fff; border-radius: 22px; padding: 28px 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; box-shadow: 0 16px 34px -18px rgba(5,46,22,.7); } .pcat-hero h1 { color: #fff; margin: 8px 0 6px; font-size: 30px; letter-spacing: -.01em; } .pcat-hero p { margin: 0; opacity: .9; font-size: 14px; max-width: 520px; } .pcat-hero .btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.pcat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pcat-chips button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; cursor: pointer; color: #344054; } .pcat-chips button b { background: #eef2f6; border-radius: 999px; padding: 1px 8px; font-size: 11px; } .pcat-chips button.on { background: #15803d; color: #fff; border-color: #15803d; } .pcat-chips button.on b { background: rgba(255,255,255,.25); } .pcat-chips img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.pcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pcat-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; cursor: pointer; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; } .pcat-card:hover { box-shadow: 0 18px 34px -18px rgba(5,46,22,.45); transform: translateY(-4px); }
.pcat-img { position: relative; aspect-ratio: 4 / 3; background: #eef2f6; display: flex; align-items: center; justify-content: center; color: #c7a97a; overflow: hidden; } .pcat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .pcat-card:hover .pcat-img img { transform: scale(1.05); }
.pcat-badge { position: absolute; top: 10px; left: 10px; background: rgba(5,46,22,.82); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .pcat-badge-s { position: static; display: inline-block; margin-bottom: 8px; }
.pcat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pcat-body h3 { margin: 0; font-size: 15.5px; } .pcat-qty { font-size: 12px; color: var(--text-muted); }
.pcat-price { font-size: 22px; font-weight: 800; color: #15803d; margin-top: 4px; font-variant-numeric: tabular-nums; } .pcat-price.none { font-size: 14px; color: var(--text-muted); font-weight: 600; } .pcat-go { margin-top: auto; font-size: 12.5px; font-weight: 700; color: #15803d; }
.pcat-back { margin-bottom: 14px; display: inline-flex; gap: 6px; align-items: center; }
.pcat-detail { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr); gap: 28px; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 22px; margin-bottom: 22px; }
.pcat-dimg { aspect-ratio: 4 / 3; background: #eef2f6; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #c7a97a; } .pcat-dimg img { width: 100%; height: 100%; object-fit: cover; }
.pcat-dinfo h1 { margin: 4px 0 8px; font-size: 28px; letter-spacing: -.01em; } .pcat-pbox { margin: 16px 0; background: linear-gradient(135deg, #effbf3, #dcfce7); border: 1px solid #bfe6cf; border-radius: 16px; padding: 14px 20px; } .pcat-pbox small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #15803d; } .pcat-pbox b { font-size: 34px; color: #14532d; font-variant-numeric: tabular-nums; } .pcat-pbox em { font-style: normal; color: var(--text-muted); margin-left: 8px; font-size: 13px; }
.pcat-desc { color: #475467; line-height: 1.6; } .pcat-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; } .pcat-tags span { background: #eef2f6; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #475467; }
.pcat-sec h2 { margin: 0 0 14px; font-size: 20px; color: #14532d; } .pcat-rgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; } .pcat-rg { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .pcat-rg-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: linear-gradient(180deg, #f2fbf5, #fff); border-bottom: 1px solid var(--border); } .pcat-rg-h b { flex: 1; } .pcat-rg-h small { color: var(--text-muted); }
.pcat-rec { margin: 12px; border: 1px solid #e6ece8; border-radius: 12px; padding: 12px 14px; } .pcat-rec-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pcat-rec-i { width: 36px; height: 36px; border-radius: 9px; background: #eef2f6; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #8aa89a; } .pcat-rec-i img { width: 100%; height: 100%; object-fit: cover; }
.pcat-mats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pcat-mats small { width: 100%; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; } .pcat-mats span { background: #effbf3; border: 1px solid #cfe5d6; color: #14532d; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
@media (max-width: 800px) { .pcat-detail { grid-template-columns: 1fr; } .pcat-hero h1 { font-size: 24px; } }

/* ---- price dashboard v2, tick-box product groups ---- */
.rmf-checks { border: 1px solid var(--border-mid, #d1d5db); border-radius: 10px; background: #fff; max-height: 170px; overflow-y: auto; padding: 6px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; } .rmf-chk { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; font-size: 13px; text-transform: uppercase; font-weight: 600; border-radius: 6px; } .rmf-chk:hover { background: #f2fbf5; } .rmf-chk input { accent-color: #15803d; width: 16px; height: 16px; }
.pcat-edit { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.95); border: 0; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); color: #14532d; }
.pcat-hidden { position: absolute; bottom: 10px; left: 10px; background: rgba(180,35,24,.9); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pcat-hero-r { display: flex; gap: 8px; flex-wrap: wrap; }
.pcat-share { display: flex; gap: 16px 24px; flex-wrap: wrap; align-items: center; padding: 14px 18px; margin-bottom: 16px; } .pcat-share-t { flex: 1 1 260px; } .pcat-share-t b { display: block; } .pcat-share-t span { font-size: 12.5px; color: var(--text-muted); }
.pcat-link { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; } .pcat-link input { flex: 1; height: 38px; border: 1px solid var(--border-mid, #d1d5db); border-radius: 8px; padding: 0 12px; background: #f8faf9; font-size: 13px; }
.pcat-sw { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; } .pcat-sw label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .pcat-sw input { accent-color: #15803d; width: 16px; height: 16px; }
.pcat-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .pcat-bar .pcat-back { margin-bottom: 0; }
.pcat-dleft { min-width: 0; } .pcat-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .pcat-thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; opacity: .75; } .pcat-thumbs img.on, .pcat-thumbs img:hover { border-color: #15803d; opacity: 1; }
.pcat-sumrow { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: -6px 0 14px; font-size: 13px; color: var(--text-muted); } .pcat-sumrow b { color: #101828; }
.pcat-ul { margin: 10px 0 12px 4px; padding-left: 20px; color: #475467; line-height: 1.7; } .pcat-ul li::marker { color: #15803d; }
.pcat-rg-p { font-style: normal; font-weight: 800; color: #15803d; } .pcat-rec-p { margin-left: auto; color: #15803d; font-size: 15px; }
.pcat-mt { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; } .pcat-mt th { text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px; border-bottom: 1px solid #e6ece8; } .pcat-mt td { padding: 5px 6px; border-bottom: 1px dashed #eef2f0; } .pcat-mt .num { text-align: right; font-variant-numeric: tabular-nums; }
.pcat-gal-edit { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .pcat-gi { position: relative; width: 84px; height: 64px; } .pcat-gi img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .pcat-gi button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #b42318; color: #fff; cursor: pointer; line-height: 1; }

/* ---- searchable raw material box in the recipe form ---- */
.pm-cb { position: relative; } .pm-cb input { width: 100%; box-sizing: border-box; } .pm-cb-h { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: .8; }
.pm-cb-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #bfe6cf; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.3); max-height: 240px; overflow-y: auto; margin-top: 3px; } .pm-cb-list[hidden] { display: none; }
.pm-cb-i { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; border-bottom: 1px solid #f0f4f1; } .pm-cb-i:hover { background: #effbf3; } .pm-cb-i small { margin-left: auto; color: var(--text-muted); } .pm-cb-none { padding: 12px; color: var(--text-muted); font-size: 13px; }
.pm-left-note { display: block; font-size: 11px; font-weight: 500; opacity: .85; margin-top: 2px; } .pm-left { flex-wrap: wrap; }

.pcat-rec-n { flex: 1; min-width: 0; } .pcat-kg { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; font-weight: 600; } .pcat-rec-t .pcat-rec-p { margin-left: auto; }

.pcat-rg-h { align-items: flex-start; } .pcat-rg-n { flex: 1; min-width: 0; } .pcat-rg-n b { display: block; line-height: 1.25; } .pcat-rg-n small { color: var(--text-muted); font-size: 12px; }
.pcat-rgs { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.pcat-rec { display: flex; align-items: flex-start; gap: 10px; } .pcat-rec .pcat-rec-i { flex-shrink: 0; margin-top: 2px; } .pcat-rec .pcat-rec-n b { display: block; line-height: 1.3; } .pcat-rec-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; } .pcat-rec .pcat-rec-p { margin-left: 0; white-space: nowrap; align-self: center; }
.pcat-empty { background: #f6faf7; border: 1.5px dashed #86d6a4; border-radius: 14px; padding: 14px 16px; margin: 12px 0; color: #475467; line-height: 1.7; } .pcat-empty .btn { margin-top: 8px; }

/* ===== shop window (catalog.js): product list, product page, cart, orders ===== */
.sc { --g1:#052e16; --g2:#14532d; --g3:#16a34a; font-family: 'Inter', system-ui, sans-serif; color: #101828; max-width: 1240px; margin: 0 auto; padding: 0 16px 24px; }
.sc button { font-family: inherit; cursor: pointer; }
.sc-top { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; padding: 12px 18px; border-radius: 16px; margin: 14px 0 18px; box-shadow: 0 10px 24px -14px rgba(5,46,22,.8); }
.pl-body .sc-top { position: sticky; top: 8px; z-index: 30; }
.sc-brand b { display: block; font-size: 16px; letter-spacing: .02em; } .sc-brand span { font-size: 11px; opacity: .8; letter-spacing: .06em; }
.sc-search { flex: 1; max-width: 460px; margin-left: auto; } .sc-search input { width: 100%; box-sizing: border-box; height: 40px; border: 0; border-radius: 99px; padding: 0 16px; font: inherit; font-size: 14px; background: rgba(255,255,255,.95); color: #101828; }
.sc-cartbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--g2); border: 0; border-radius: 99px; padding: 9px 16px; font-weight: 700; font-size: 14px; position: relative; } .sc-search + .sc-cartbtn { margin-left: 0; }
.sc-cartbtn b { background: #dc2626; color: #fff; border-radius: 99px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 5px; }
.sc-hero { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; background: radial-gradient(700px 220px at 95% -30%, rgba(74,222,128,.28), transparent), #f0fdf4; border: 1px solid #bbf7d0; border-radius: 20px; padding: 24px 28px; margin-bottom: 16px; }
.sc-kick { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--g3); } .sc-hero h1 { margin: 6px 0; font-size: 28px; color: var(--g1); letter-spacing: -.01em; } .sc-hero p { margin: 0; color: #475467; max-width: 560px; font-size: 14px; line-height: 1.55; } .sc-hero-r { display: flex; gap: 8px; }
.sc-ghost { background: #fff; border: 1px solid #d0d5dd; color: #344054; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13px; } .sc-ghost:hover { background: #f2f4f7; }
.sc-pri { background: var(--g3); border: 1px solid var(--g3); color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 13px; }
.sc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-sortrow { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; color: #667085; font-size: 13px; } .sc-sortrow select { margin-left: 6px; height: 36px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 10px; font: inherit; background: #fff; }
.sc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sc-card { position: relative; border-radius: 18px; } .sc-img { position: relative; aspect-ratio: 4/3; background: #eef2f6; display: flex; align-items: center; justify-content: center; color: #98a2b3; overflow: hidden; } .sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .sc-card:hover .sc-img img { transform: scale(1.06); }
.sc-badge { position: absolute; left: 10px; top: 10px; background: rgba(5,46,22,.88); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; } .sc-badge-s { position: static; display: inline-block; }
.sc-hid { position: absolute; left: 10px; bottom: 10px; background: #fff7ed; color: #c2410c; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; } .sc-edit { position: absolute; right: 10px; top: 10px; }
.sc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .sc-body h3 { margin: 0; font-size: 16px; line-height: 1.3; color: #101828; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sc-code { display: inline-block; background: #eef2f6; color: #475467; border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.sc-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .sc-stock i { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; } .sc-stock.in { color: #15803d; } .sc-stock.in i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); } .sc-stock.made { color: #b45309; } .sc-stock.made i { background: #f59e0b; }
.sc-price { font-size: 22px; font-weight: 800; color: var(--g2); margin-top: auto; } .sc-price.none { font-size: 15px; color: #667085; font-weight: 600; }
.sc-cbtns { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sc-go { color: #667085; font-size: 12px; font-weight: 600; }
.sc-add, .sc-addbig { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--g3); color: #fff; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; transition: background .15s; } .sc-add:hover, .sc-addbig:hover { background: #15803d; } .sc-add.ok, .sc-addbig.ok { background: #0d3520; } .sc-add svg { width: 17px; height: 17px; }
.sc-msg { text-align: center; padding: 70px 20px; color: #667085; } .sc-msg h2 { color: var(--g2); } .sc-msg.sm { padding: 30px 10px; }
.sc-muted { color: #667085; font-size: 13px; }
.sc-crumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: #667085; font-size: 13px; } .sc-crumb-r { margin-left: auto; display: flex; gap: 8px; }
.sc-back { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d0d5dd; border-radius: 10px; padding: 7px 12px; font-weight: 600; color: #344054; font-size: 13px; }
.sc-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; background: #fff; border: 1px solid #e4e7ec; border-radius: 22px; padding: 22px; box-shadow: 0 14px 34px -26px rgba(5,46,22,.5); }
.sc-big { aspect-ratio: 4/3; background: #eef2f6; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #98a2b3; } .sc-big img { width: 100%; height: 100%; object-fit: contain; background: #f8fafb; }
.sc-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .sc-thumbs button { width: 74px; height: 56px; border: 2px solid #e4e7ec; border-radius: 10px; overflow: hidden; padding: 0; background: #fff; } .sc-thumbs button.on { border-color: var(--g3); } .sc-thumbs img { width: 100%; height: 100%; object-fit: cover; } .sc-more { color: #667085; font-weight: 700; font-size: 13px; }
.sc-info h1 { margin: 8px 0 6px; font-size: 27px; line-height: 1.2; letter-spacing: -.01em; } .sc-short { color: #475467; line-height: 1.6; font-size: 14px; margin: 10px 0 0; }
.sc-pricebox { margin-top: 14px; background: linear-gradient(135deg, #effbf3, #dcfce7); border: 1px solid #bfe6cf; border-radius: 14px; padding: 14px 18px; } .sc-pricebox small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #15803d; } .sc-pline { display: flex; align-items: baseline; gap: 8px; } .sc-pline b { font-size: 32px; color: var(--g1); } .sc-pline span { color: #667085; font-size: 13px; } .sc-stockline { margin-top: 6px; }
.sc-internal { margin-top: 8px; background: #fff7ed; border: 1px dashed #f6b26b; color: #9a3412; border-radius: 10px; padding: 7px 12px; font-size: 12.5px; }
.sc-h3 { margin: 18px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
.sc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sc-tile { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 12px; padding: 9px 12px; } .sc-tile small { display: block; font-size: 10.5px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .05em; } .sc-tile b { font-size: 14px; color: #101828; }
.sc-sum { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; color: #075985; } .sc-sum span { color: #667085; font-size: 12.5px; }
.sc-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .sc-tags span { background: #f2f4f7; color: #475467; border-radius: 99px; padding: 3px 11px; font-size: 12px; font-weight: 600; }
.sc-buy { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sc-line { color: #475467; font-size: 14px; } .sc-line strong { font-size: 20px; color: var(--g1); margin-left: 4px; } .sc-line small { display: block; color: #b45309; margin-top: 2px; }
.sc-step { display: inline-flex; align-items: center; border: 1px solid #d0d5dd; border-radius: 10px; overflow: hidden; background: #fff; } .sc-step button { width: 38px; height: 40px; border: 0; background: #f2f4f7; font-size: 18px; font-weight: 700; color: #344054; } .sc-step input { width: 64px; height: 40px; border: 0; text-align: center; font: inherit; font-weight: 700; font-size: 15px; -moz-appearance: textfield; } .sc-step.sm button { width: 28px; height: 30px; font-size: 15px; } .sc-step.sm input { width: 48px; height: 30px; font-size: 13px; }
.sc-cta { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .sc-cta .sc-addbig { flex: 1 1 180px; padding: 13px 18px; font-size: 15px; } .sc-buynow { flex: 1 1 140px; background: var(--g1); color: #fff; border: 0; border-radius: 10px; padding: 13px 18px; font-weight: 800; font-size: 15px; } .sc-buynow:hover { background: #000; }
.sc-fine { color: #98a2b3; font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.sc-sec { margin-top: 22px; background: #fff; border: 1px solid #e4e7ec; border-radius: 20px; padding: 20px 22px; } .sc-sec h2 { margin: 0 0 14px; font-size: 18px; color: var(--g1); }
.sc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; } .sc-spec { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid #eef2f0; font-size: 14px; } .sc-spec b { color: #667085; font-weight: 600; } .sc-spec span { color: #101828; font-weight: 600; text-align: right; } .sc-spec .sc-pt { text-align: left; font-weight: 500; }
.sc-rgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .sc-rg { border: 1px solid #e4e7ec; border-radius: 14px; overflow: hidden; background: #fff; }
.sc-rg-h { display: flex; align-items: center; gap: 10px; background: #f2fbf5; padding: 10px 14px; border-bottom: 1px solid #e4e7ec; } .sc-rg-h > div { flex: 1; } .sc-rg-h b { display: block; text-transform: uppercase; font-size: 13px; } .sc-rg-h small { color: #667085; } .sc-rg-h em { font-style: normal; font-weight: 800; color: #15803d; }
.sc-n { width: 24px; height: 24px; border-radius: 8px; background: #dcfce7; color: #15803d; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.sc-rec { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px dashed #eef2f0; } .sc-rec:last-child { border-bottom: 0; } .sc-ri { width: 40px; height: 40px; border-radius: 10px; background: #eef2f6; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #98a2b3; flex-shrink: 0; } .sc-ri img { width: 100%; height: 100%; object-fit: cover; } .sc-rn { flex: 1; min-width: 0; } .sc-rn b { font-size: 13.5px; } .sc-rn > div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; } .sc-kg { background: #fffbeb; color: #b45309; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 700; } .sc-rec strong { color: #15803d; }
.sc-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .sc-relc { cursor: pointer; border: 1px solid #e4e7ec; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; } .sc-relc:hover { box-shadow: 0 10px 22px -14px rgba(5,46,22,.5); } .sc-relimg { aspect-ratio: 4/3; background: #eef2f6; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #98a2b3; } .sc-relimg img { width: 100%; height: 100%; object-fit: cover; } .sc-relc b { font-size: 13px; } .sc-relc span { color: var(--g2); font-weight: 800; font-size: 14px; }
.sc-ov { position: fixed; inset: 0; background: rgba(16,24,40,.5); z-index: 1000; display: flex; justify-content: flex-end; align-items: stretch; }
.sc-drawer { width: min(420px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(0,0,0,.4); }
.sc-dh { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e4e7ec; } .sc-dh h2 { margin: 0; font-size: 18px; }
.sc-x { background: #f2f4f7; border: 0; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; line-height: 1; color: #475467; }
.sc-dbody { flex: 1; overflow: auto; padding: 8px 20px; } .sc-df { padding: 14px 20px 20px; border-top: 1px solid #e4e7ec; display: flex; flex-direction: column; gap: 10px; }
.sc-ci { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef2f0; } .sc-ci > div:nth-child(2) { flex: 1; min-width: 0; } .sc-ci b { display: block; font-size: 14px; } .sc-ci small { color: #667085; display: block; margin-bottom: 4px; } .sc-cimg { width: 52px; height: 52px; border-radius: 10px; background: #eef2f6; overflow: hidden; flex-shrink: 0; } .sc-cimg img { width: 100%; height: 100%; object-fit: cover; } .sc-cr { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .sc-rm { background: none; border: 0; font-size: 15px; }
.sc-tot { display: flex; justify-content: space-between; align-items: center; font-size: 15px; } .sc-tot b { font-size: 22px; color: var(--g1); }
.sc-link { background: none; border: 0; color: #b42318; font-weight: 600; font-size: 13px; }
.sc-modal { align-self: center; margin: 0 auto; width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: #fff; border-radius: 20px; padding: 22px 24px; position: relative; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); } .sc-modal h2 { margin: 0 0 12px; } .sc-modal .sc-x { position: absolute; right: 16px; top: 16px; }
.sc-cis { max-height: 200px; overflow: auto; } .sc-modal .sc-tot { margin: 12px 0; }
.sc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 10px; } .sc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .04em; } .sc-form label.sc-wide { grid-column: 1 / -1; } .sc-form input { height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; color: #101828; }
.sc-err { color: #b42318; font-size: 13px; min-height: 18px; margin-bottom: 6px; } .sc-modal .sc-addbig { width: 100%; padding: 13px; font-size: 15px; }
.sc-done { text-align: center; } .sc-okic { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
@media (max-width: 860px) { .sc-detail { grid-template-columns: 1fr; padding: 14px; } .sc-specs { grid-template-columns: 1fr; } .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-form { grid-template-columns: 1fr; } .sc-hero h1 { font-size: 22px; } .sc-search { max-width: none; } .sc-brand span { display: none; } }
@media print { .sc-top, .sc-cta, .sc-buy, .sc-ov { display: none !important; } }
.pcat-tabs { display: flex; gap: 8px; margin: 14px 0 6px; } .pcat-tabs button { border: 1px solid #d0d5dd; background: #fff; border-radius: 99px; padding: 8px 18px; font-weight: 700; font-size: 13px; cursor: pointer; color: #344054; } .pcat-tabs button.on { background: #14532d; color: #fff; border-color: #14532d; } .pcat-tabs b { background: #dc2626; color: #fff; border-radius: 99px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }
.pco-list { display: grid; gap: 14px; margin-top: 12px; } .pco { padding: 16px 18px; } .pco-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pco-h strong { margin-left: auto; font-size: 18px; color: #14532d; } .pco-h small { color: #667085; } .pco-who { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.6; }
.pco-st { border-radius: 99px; padding: 2px 11px; font-size: 11.5px; font-weight: 800; } .pco-new { background: #fee2e2; color: #b91c1c; } .pco-confirmed { background: #dbeafe; color: #1d4ed8; } .pco-delivered { background: #dcfce7; color: #15803d; } .pco-cancelled { background: #f2f4f7; color: #667085; }
.pco-act { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pco-act select, .pco-act input { height: 36px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 10px; font: inherit; } .pco-act input { flex: 1; min-width: 160px; } .pco-by { color: #98a2b3; display: block; margin-top: 6px; }
.sc-cartbtn b[hidden] { display: none; }
.rq-sup { margin-top: 5px; font-size: 12px; color: #475467; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 4px 9px; display: inline-block; }
.sc-pay { margin: 4px 0 6px; } .sc-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sc-pm label { display: flex; gap: 8px; align-items: flex-start; border: 1.5px solid #d0d5dd; border-radius: 12px; padding: 9px 11px; cursor: pointer; background: #fff; } .sc-pm label.on { border-color: #16a34a; background: #f0fdf4; } .sc-pm input { margin-top: 3px; accent-color: #16a34a; } .sc-pm b { display: block; font-size: 13.5px; } .sc-pm small { color: #667085; font-size: 11.5px; }
.sc-payp { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #344054; line-height: 1.55; margin: 10px 0 8px; } .sc-bank { display: block; margin-top: 4px; font-weight: 600; } .sc-proofok { color: #15803d; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .sc-form label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (max-width: 520px) { .sc-pm { grid-template-columns: 1fr; } }
.pcat-payset { margin-top: 12px; border-top: 1px dashed #d0d5dd; padding-top: 12px; } .pcat-payg { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; margin: 8px 0; } .pcat-payg label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: #667085; text-transform: uppercase; } .pcat-payg input, .pcat-payg textarea { font: inherit; font-size: 13px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; text-transform: none; font-weight: 500; color: #101828; } .pcat-paysaved { margin-left: 10px; color: #15803d; font-weight: 700; font-size: 13px; }
@media (max-width: 800px) { .pcat-payg { grid-template-columns: 1fr; } }
.pco-pay { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; } .pco-pm { border-radius: 99px; padding: 2px 11px; font-weight: 700; background: #f2f4f7; color: #344054; } .pco-pm-advance { background: #dcfce7; color: #15803d; } .pco-pm-bkash { background: #fce7f3; color: #be185d; }
/* price dashboard: admin cards (client link + payments) */
.pcat-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; margin-bottom: 4px; align-items: start; }
.pcat-admin .card { padding: 18px 20px; margin: 0; }
.pcat-ch { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .pcat-ch > div { flex: 1; } .pcat-ch b { display: block; font-size: 16px; color: #101828; } .pcat-ch small { display: block; color: #667085; font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.pcat-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .pcat-ic.g { background: #dcfce7; } .pcat-ic.p { background: #fce7f3; }
.pcat-st { border-radius: 99px; padding: 3px 11px; font-size: 11px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; } .pcat-st.on { background: #dcfce7; color: #15803d; } .pcat-st.off { background: #f2f4f7; color: #667085; }
.pcat-pm { border: 1px solid #e4e7ec; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fcfcfd; } .pcat-pmh { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .pcat-pmh b { flex: 1; font-size: 14px; } .pcat-dot { width: 12px; height: 12px; border-radius: 50%; } .pcat-dot.bk { background: #e2136e; } .pcat-dot.cd { background: #2563eb; }
.pcat-pm .pcat-payg { grid-template-columns: 1fr 1.6fr; margin: 0; } .pcat-payg label small { text-transform: none; font-weight: 500; color: #98a2b3; letter-spacing: 0; }
.pcat-payf { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .pcat-payf label { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: #667085; text-transform: uppercase; } .pcat-payf input { height: 38px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 11px; font: inherit; font-size: 13px; text-transform: none; font-weight: 500; }
.pcat-payb { display: flex; align-items: center; } .pcat-hint { color: #98a2b3; font-size: 12px; margin: 10px 0 0; } .pcat-hint code { background: #f2f4f7; border-radius: 5px; padding: 1px 5px; }
.pcat-share .pcat-link { display: flex; gap: 8px; margin-bottom: 10px; } .pcat-share .pcat-link input { flex: 1; min-width: 0; } .pcat-share .pcat-sw { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
@media (max-width: 1000px) { .pcat-admin { grid-template-columns: 1fr; } .pcat-pm .pcat-payg { grid-template-columns: 1fr; } }
.sc-paygo { display: flex; gap: 12px; align-items: center; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 12px 14px; margin: 10px 0; } .sc-paygo > span { font-size: 26px; } .sc-paygo b { display: block; color: #14532d; } .sc-paygo small { color: #475467; font-size: 12.5px; line-height: 1.5; display: block; }
.sc-paynow { text-decoration: none; margin: 8px 0; display: flex; }
/* semi finished goods page + small bits */
.sfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; margin-top: 14px; } .sfg-card { margin: 0; }
.rq-supbtn { margin-top: 6px; background: #fff; border: 1px dashed #98a2b3; color: #344054; border-radius: 8px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .rq-supbtn:hover { background: #f0f9ff; border-color: #38bdf8; }
.sc-rm { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid #fecdca; background: #fef3f2; color: #b42318; transition: background .15s, transform .1s; } .sc-rm:hover { background: #fee4e2; transform: translateY(-1px); } .sc-rm svg { display: block; }
/* three-way raw material search */
.mp-modes { display: inline-flex; align-items: center; gap: 4px; background: #f2f4f7; border-radius: 99px; padding: 3px; flex-wrap: wrap; } .mp-modes > span { font-size: 11px; font-weight: 700; color: #667085; padding: 0 8px 0 10px; text-transform: uppercase; letter-spacing: .04em; } .mp-modes button { border: 0; background: transparent; border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; color: #475467; cursor: pointer; } .mp-modes button.on { background: #16a34a; color: #fff; box-shadow: 0 2px 6px -2px rgba(22,163,74,.6); }
.mp-bar { margin: 0 0 8px; } .mp-row { display: flex; gap: 8px; margin-top: 8px; } .mp-row .mp-q { flex: 1; min-width: 0; } .mp-row .mp-g { flex: 0 0 45%; } .mp-n { color: #667085; font-size: 11.5px; display: block; margin-top: 3px; min-height: 12px; }
#rr-modes { display: inline-block; vertical-align: middle; margin-right: 6px; }
/* admin cards: modern look */
.pcat-admin { align-items: stretch; } .pcat-admin .card { box-shadow: 0 12px 30px -24px rgba(16,24,40,.45); border: 1px solid #eaecf0; border-radius: 18px; }
.pcat-share { display: flex; flex-direction: column; } .pcat-share .pcat-sw { margin-top: auto; padding-top: 14px; gap: 10px; }
.pcat-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 12px; border: 1px solid #eaecf0; border-radius: 12px; background: #fcfcfd; } .pcat-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pcat-switch .sl { width: 40px; height: 23px; border-radius: 99px; background: #d0d5dd; position: relative; flex-shrink: 0; transition: background .2s; } .pcat-switch .sl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.pcat-switch input:checked + .sl { background: #16a34a; } .pcat-switch input:checked + .sl::after { transform: translateX(17px); } .pcat-switch input:focus-visible + .sl { outline: 2px solid #86efac; outline-offset: 2px; }
.pcat-switch .tx b { display: block; font-size: 13.5px; color: #101828; } .pcat-switch .tx small { color: #667085; font-size: 12px; }
.pcat-link input { height: 42px; border-radius: 10px; background: #f9fafb; }
.pcat-pm { background: #fff; border: 1px solid #eaecf0; border-left-width: 4px; border-radius: 14px; padding: 14px 16px; } .pcat-pm:has(.bk) { border-left-color: #e2136e; } .pcat-pm:has(.cd) { border-left-color: #2563eb; }
.pcat-payg label { display: flex; flex-direction: column; } .pcat-payg label small { order: 3; margin-top: 3px; font-size: 11.5px; } .pcat-payg input, .pcat-payg textarea { order: 2; height: 40px; border-radius: 10px; background: #fcfcfd; } .pcat-payg textarea { height: 76px; padding-top: 9px; resize: vertical; }
.pcat-payg input:focus, .pcat-payg textarea:focus, .pcat-payf input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); background: #fff; }
.pcat-payf { margin-top: 4px; } .pcat-payf input { height: 40px; border-radius: 10px; }
.pcat-share { justify-content: flex-start; } .pcat-share .pcat-link { margin: 0 0 12px; width: 100%; box-sizing: border-box; align-self: stretch; } .pcat-share .pcat-link input { width: auto; }
.pcat-admin .pcat-share { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; } .pcat-admin .pcat-share .pcat-sw { margin-top: 4px; padding-top: 0; align-items: stretch; width: 100%; }
.pcat-admin .pcat-share .pcat-link { flex: 0 0 auto; }
/* recipe / semi finished good modal: batch + packet quantities, cleaner header */
.pm-ing.has-batch { grid-template-columns: 2.2fr auto .85fr .85fr .85fr .9fr .9fr auto; }
.pm-ing select.in { height: 38px; } .pm-ing input.auto { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; font-weight: 700; } #rl-pq.auto { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; font-weight: 700; }
.pm-ing.is-sfg { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; padding: 8px 10px; } .pm-ing.is-sfg .isf { width: 100%; }
.pm-ing-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pm-ing-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; } .pm-addbtn.sfg { border-color: #c4b5fd; color: #6d28d9; background: #f5f3ff; }
.pm-ing-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 12px; padding: 8px 10px; background: #f9fafb; border: 1px solid #eaecf0; border-radius: 12px; } .pm-ing-search #rr-modes { display: inline-flex; margin: 0; } .pm-ing-search .pm-mini { flex: 1; min-width: 200px; height: 36px; border: 1px solid #d0d5dd; border-radius: 99px; padding: 0 14px; background: #fff; font: inherit; font-size: 13px; }
.pm-batchnote { background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin: 2px 0 8px; }
@media (max-width: 760px) { .pm-ing.has-batch { grid-template-columns: 1fr 1fr; } }
/* production price list: extras */
.pbc-extra { background: #fffbeb; border-left: 3px solid #f59e0b; } .pbc-xtag { background: #fef3c7; color: #b45309; border-radius: 99px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.pbc-xact { display: inline-flex; gap: 4px; margin-left: 8px; } .pbc-xact button { border: 1px solid #e4e7ec; background: #fff; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; color: #475467; } .pbc-xact .pbc-xd:hover { background: #fef3f2; color: #b42318; border-color: #fecdca; } .pbc-xact .pbc-xe:hover { background: #f0fdf4; color: #15803d; }
.pbc-addx { display: block; width: calc(100% - 20px); margin: 8px 10px 10px; border: 1.5px dashed #86efac; background: #f0fdf4; color: #15803d; border-radius: 12px; padding: 9px; font-weight: 700; font-size: 13px; cursor: pointer; } .pbc-addx:hover { background: #dcfce7; }
.sc-xrow { background: #fffbeb; } .sc-xrow .sc-ri { color: #b45309; font-weight: 800; font-size: 18px; }
/* per-PART profit */
.pbc-pp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 10px 8px; padding: 7px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; } .pbc-pp[hidden] { display: none; } .pbc-pp .pbc-ppl { font-size: 11px; font-weight: 800; color: #c2410c; text-transform: uppercase; letter-spacing: .04em; }
.pbc-seg-s { display: inline-flex; border: 1px solid #fdba74; border-radius: 99px; overflow: hidden; background: #fff; } .pbc-seg-s button { border: 0; background: transparent; padding: 4px 11px; font-weight: 800; font-size: 12px; color: #9a3412; cursor: pointer; } .pbc-seg-s button.on { background: #f97316; color: #fff; }
.pbc-ppv { width: 78px; height: 30px; border: 1px solid #fdba74; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; } .pbc-ppsave { border: 0; background: #16a34a; color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 12px; cursor: pointer; } .pbc-ppinfo { font-style: normal; font-weight: 800; color: #c2410c; font-size: 12.5px; margin-left: auto; }
/* client product page: tidy PART cards + picture viewer */
.sc-rgs.sc-parts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: stretch; }
.sc-part { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(135deg, #f6fdf9, #ecfdf3); border: 1px solid #c9ecd6; border-radius: 16px; box-shadow: 0 8px 22px -18px rgba(5,46,22,.5); transition: transform .15s, box-shadow .15s; } .sc-part:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(5,46,22,.55); }
.sc-part .sc-n { width: 36px; height: 36px; border-radius: 12px; background: #16a34a; color: #fff; font-size: 15px; flex-shrink: 0; box-shadow: 0 6px 14px -6px rgba(22,163,74,.7); }
.sc-part-t { flex: 1; min-width: 0; } .sc-part-t b { display: block; font-size: 14.5px; line-height: 1.3; color: #052e16; text-transform: uppercase; letter-spacing: .01em; }
.sc-part-m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .sc-part-m span { background: #fff; border: 1px solid #d1fae5; border-radius: 99px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; color: #475467; } .sc-part-m span.kg { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.sc-part-p { font-style: normal; font-weight: 800; font-size: 19px; color: #14532d; white-space: nowrap; text-align: right; }
@media (max-width: 520px) { .sc-part { flex-wrap: wrap; } .sc-part-p { width: 100%; text-align: left; } }
.sc-big { position: relative; } .sc-big.zoomable { cursor: zoom-in; } .sc-zoomhint { position: absolute; right: 12px; bottom: 12px; background: rgba(5,46,22,.82); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 99px; opacity: .92; pointer-events: none; transition: opacity .2s; } .sc-big:hover .sc-zoomhint { opacity: 1; background: #16a34a; }
.sc-ov.sc-ov-lb { background: rgba(8,15,12,.94); justify-content: center; align-items: center; }
.sc-lb { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 70px 12px; box-sizing: border-box; }
.sc-lb-img { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .sc-lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.sc-lb-x { position: absolute; right: 18px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; } .sc-lb-x:hover { background: rgba(255,255,255,.28); }
.sc-lb-n { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; z-index: 2; } .sc-lb-n:hover { background: rgba(255,255,255,.3); } .sc-lb-n.prev { left: 14px; } .sc-lb-n.next { right: 14px; }
.sc-lb-foot { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #e4e7ec; font-size: 13px; font-weight: 600; }
.sc-lb-th { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .sc-lb-th button { width: 64px; height: 48px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; background: #111; cursor: pointer; opacity: .65; } .sc-lb-th button.on { border-color: #4ade80; opacity: 1; } .sc-lb-th img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .sc-lb { padding: 56px 8px 10px; } .sc-lb-n { top: auto; bottom: 90px; transform: none; } }
/* Technical Data Sheet: card on the product page, viewer, edit-form bits */
.sc-tds { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; background: linear-gradient(135deg, #f6fdf9, #ecfdf3); border: 1px solid #c9ecd6; border-radius: 16px; }
.sc-tds-ic { width: 46px; height: 54px; border-radius: 10px 10px 10px 4px; background: #dc2626; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .05em; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; box-shadow: 0 8px 16px -8px rgba(220,38,38,.6); position: relative; flex-shrink: 0; } .sc-tds-ic::before { content: ""; position: absolute; right: 0; top: 0; width: 14px; height: 14px; background: linear-gradient(225deg, #f4f7f5 50%, #fca5a5 50%); border-radius: 0 10px 0 4px; }
.sc-tds-t { flex: 1; min-width: 150px; } .sc-tds-t b { display: block; font-size: 15px; color: #052e16; } .sc-tds-t small { display: block; color: #667085; font-size: 12px; margin-top: 2px; word-break: break-all; }
.sc-tds-b { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-tdsb { background: #16a34a; border: 0; color: #fff; border-radius: 99px; padding: 10px 20px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 8px 16px -10px rgba(22,163,74,.8); transition: background .15s, transform .1s; } .sc-tdsb:hover { background: #15803d; transform: translateY(-1px); }
.sc-tdsd { background: #fff; border: 1.5px solid #86efac; color: #14532d; border-radius: 99px; padding: 9px 18px; font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; transition: background .15s; } .sc-tdsd:hover { background: #f0fdf4; }
.sc-tdsv { margin: 14px; width: calc(100% - 28px); background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); }
.sc-tdsh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid #e4e7ec; background: linear-gradient(135deg, #052e16, #14532d); color: #fff; } .sc-tdsh small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #86efac; text-transform: uppercase; } .sc-tdsh b { font-size: 16px; }
.sc-tdsa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sc-tdsa a, .sc-tdsa .sc-ghost { text-decoration: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 99px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; } .sc-tdsa a:hover, .sc-tdsa .sc-ghost:hover { background: rgba(255,255,255,.26); } .sc-tdsa .sc-x { background: rgba(255,255,255,.2); color: #fff; }
.sc-tdsv iframe { flex: 1; border: 0; width: 100%; min-height: 0; background: #eef2f6; }
.ce-tds { margin: 4px 0 6px; font-size: 13px; } .ce-tfillmsg { font-size: 12.5px; margin: 6px 0 2px; color: #667085; } .ce-tfillmsg.ok { color: #15803d; font-weight: 600; } .ce-tfillmsg.warn { color: #b45309; font-weight: 600; }
/* product page: about text, key features; edit form: fill-from-TDS card */
.sc-about { margin: 12px 0 0; } .sc-short { margin: 0; color: #475467; line-height: 1.7; font-size: 14.5px; } .sc-short.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sc-readmore { margin-top: 6px; background: none; border: 0; color: #15803d; font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 0; } .sc-readmore:hover { text-decoration: underline; }
.sc-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .sc-tile { border-radius: 14px; background: #fff; border: 1px solid #e4e7ec; border-top: 3px solid #86efac; box-shadow: 0 6px 16px -14px rgba(5,46,22,.5); } .sc-tile b { display: block; margin-top: 2px; line-height: 1.35; word-break: break-word; }
.sc-feats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; } .sc-feats li { position: relative; padding: 9px 12px 9px 38px; background: #f6fdf9; border: 1px solid #d1fae5; border-radius: 12px; font-size: 14px; color: #1d2939; line-height: 1.45; } .sc-feats li::before { content: "✓"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ce-tfillmsg { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; } .ce-tfillmsg:empty { display: none; }
.ce-tfillmsg.ok, .ce-tfillmsg.warn, .ce-tfillmsg.busy { padding: 12px 14px; border-radius: 14px; border: 1px solid; font-weight: 400; } .ce-tfillmsg.ok { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #86efac; color: #14532d; } .ce-tfillmsg.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ce-tfillmsg.busy { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.ce-tfillmsg b { display: block; font-size: 14px; } .ce-tfillmsg small { display: block; font-size: 12.5px; opacity: .9; margin-top: 1px; line-height: 1.4; } .ce-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.75); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.ce-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #bae6fd; border-top-color: #0284c7; animation: ceSpin .8s linear infinite; flex-shrink: 0; } @keyframes ceSpin { to { transform: rotate(360deg); } }
#ce-tfill { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #86efac; color: #14532d; font-weight: 700; } #ce-tfill:hover { background: #bbf7d0; }
/* alignment polish: product information tiles, TDS card, info column */
.sc-info { min-width: 0; } .sc-info > * { max-width: 100%; }
.sc-tiles { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; align-items: stretch; }
.sc-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 13px; } .sc-tile small { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; min-height: 2.6em; display: flex; align-items: flex-end; } .sc-tile b { overflow-wrap: anywhere; word-break: normal; font-size: 14px; }
.sc-tds { align-items: center; } .sc-tds-t { min-width: 0; flex: 1 1 140px; } .sc-tds-t small { word-break: normal; overflow-wrap: anywhere; } .sc-tds-t small.fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #344054; font-weight: 600; } .sc-tds-t small.fs { color: #98a2b3; }
.sc-tds-b { flex: 0 0 auto; } @media (max-width: 560px) { .sc-tds-b { width: 100%; } .sc-tds-b > * { flex: 1; justify-content: center; text-align: center; } }
.sc-pricebox, .sc-internal, .sc-sum, .sc-buy, .sc-cta, .sc-tds, .sc-about, .sc-feats, .sc-tiles { box-sizing: border-box; }
.sc-internal { line-height: 1.5; overflow-wrap: anywhere; }
/* short description, distributor prices, internal price table */
.sc-sd { margin: 0; color: #667085; font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.sc-was { text-decoration: line-through; color: #98a2b3; font-weight: 600; font-size: .62em; margin-right: 6px; } .sc-price .sc-was { font-size: 14px; } .sc-pline .sc-was { font-size: 17px; }
.sc-off { font-style: normal; background: #dc2626; color: #fff; font-weight: 800; font-size: 11px; border-radius: 99px; padding: 3px 9px; letter-spacing: .02em; vertical-align: middle; margin-left: 6px; }
.sc-price.disc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; } .sc-price.disc b { font-size: 22px; font-weight: 800; color: #14532d; }
.sc-pricebox.dist { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fdba74; } .sc-pricebox.dist small { color: #c2410c; } .sc-pricebox.dist .sc-pline b { color: #9a3412; } .sc-wasline { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sc-ptab h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sc-int { font-size: 11px; font-weight: 800; background: #fff7ed; color: #c2410c; border: 1px dashed #f6b26b; border-radius: 99px; padding: 3px 10px; letter-spacing: .02em; }
.sc-tscroll { overflow-x: auto; border: 1px solid #e4e7ec; border-radius: 14px; } .sc-ptab table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.sc-ptab th { background: #f0fdf4; color: #14532d; text-align: right; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .sc-ptab td { padding: 10px 14px; text-align: right; border-top: 1px solid #eef2f0; white-space: nowrap; } .sc-ptab th.l, .sc-ptab td.l { text-align: left; white-space: normal; } .sc-ptab td.l .sc-n { margin-right: 8px; vertical-align: middle; }
.sc-ptab .pf { color: #c2410c; } .sc-ptab tfoot tr.sub td { background: #f9fafb; font-weight: 600; } .sc-ptab tfoot tr.pp td { background: #fff7ed; } .sc-ptab tfoot tr.fin td { background: #052e16; color: #fff; font-size: 15px; } .sc-ptab tfoot tr.fin td b { color: #fff; } .sc-ptab tfoot tr.fin small { opacity: .75; font-weight: 500; } .sc-ptab tfoot tr.dis td { background: #fef3f2; color: #b42318; font-weight: 700; } .sc-ptab tfoot tr.dis td b { color: #b42318; }
.sc-ovr { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 6px 8px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-size: 12px; font-weight: 700; color: #9a3412; } .sc-ovr input { width: 64px; height: 28px; border: 1px solid #fdba74; border-radius: 7px; padding: 0 7px; font: inherit; font-size: 13px; } .sc-ovr button { border: 0; border-radius: 7px; padding: 5px 9px; font-weight: 700; font-size: 11.5px; cursor: pointer; background: #16a34a; color: #fff; } .sc-ovr button.rs { background: #fff; color: #9a3412; border: 1px solid #fdba74; } .sc-ovr em { font-style: normal; font-weight: 600; color: #c2410c; opacity: .8; margin-left: auto; }
.dd-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px 18px; margin-bottom: 14px; } .dd-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: #667085; text-transform: uppercase; } .dd-bar select, .dd-bar input[type=number] { height: 40px; border: 1px solid #d0d5dd; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; min-width: 200px; } .dd-bar input[type=number] { min-width: 110px; width: 110px; } .dd-link { display: flex; gap: 8px; flex: 1; min-width: 260px; align-items: flex-end; } .dd-link input { flex: 1; height: 40px; border: 1px solid #d0d5dd; border-radius: 10px; padding: 0 12px; background: #f9fafb; font-size: 13px; min-width: 0; }
.dd-note { color: #667085; font-size: 12.5px; margin: 0 0 10px; }
.dst-pct { color: #c2410c; font-size: 16px; } .dst-st { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 800; } .dst-st.on { background: #dcfce7; color: #15803d; } .dst-st.off { background: #f2f4f7; color: #667085; } .dst-link { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pco-dist { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; border-radius: 99px; padding: 2px 11px; font-weight: 800; }
.sc-ovr { flex-wrap: wrap; } .sc-ovr em { margin-left: 0; flex-basis: 100%; font-size: 11px; }
/* distributor price dashboard header */
#dpd-body { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.dd-hero { background: radial-gradient(700px 240px at 92% -30%, rgba(74,222,128,.28), transparent), linear-gradient(135deg, #052e16, #14532d 60%, #166534); color: #fff; border-radius: 22px; padding: 20px 24px; margin: 6px 0 14px; box-shadow: 0 18px 38px -22px rgba(5,46,22,.8); }
.dd-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dd-who { display: flex; align-items: center; gap: 14px; } .dd-av { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.dd-who small, .dd-box small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #86efac; margin-bottom: 4px; }
.dd-who select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; height: 42px; padding: 0 38px 0 14px; font: inherit; font-size: 18px; font-weight: 800; min-width: 230px; cursor: pointer; } .dd-who select option { color: #101828; font-weight: 500; font-size: 14px; }
.dd-state { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 6px 14px; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); } .dd-state i { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); } .dd-state.off i { background: #fca5a5; box-shadow: 0 0 0 4px rgba(252,165,165,.25); }
.dd-grid { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: 14px; margin-top: 18px; } @media (max-width: 800px) { .dd-grid { grid-template-columns: 1fr; } }
.dd-box { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 14px 16px; } .dd-box em { display: block; font-style: normal; font-size: 12px; opacity: .78; margin-top: 8px; line-height: 1.4; }
.dd-dr { display: flex; align-items: center; gap: 10px; } .dd-di { display: flex; align-items: center; background: #fff; border-radius: 12px; padding: 0 14px 0 4px; height: 48px; } .dd-di input { width: 86px; height: 44px; border: 0; background: transparent; font: inherit; font-size: 26px; font-weight: 800; color: #9a3412; text-align: right; padding: 0 4px; outline: none; -moz-appearance: textfield; } .dd-di span { font-size: 22px; font-weight: 800; color: #9a3412; }
.dd-save { height: 48px; border: 0; border-radius: 12px; background: #f59e0b; color: #fff; font-weight: 800; font-size: 14px; padding: 0 20px; cursor: pointer; box-shadow: 0 8px 16px -10px rgba(245,158,11,.9); } .dd-save:hover { background: #d97706; } .dd-big { font-size: 34px; }
.dd-pill { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 5px 6px 5px 12px; height: 48px; } .dd-ic { font-size: 16px; } .dd-pill input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: #344054; outline: none; text-overflow: ellipsis; }
.dd-btn { border: 0; border-radius: 9px; height: 36px; padding: 0 14px; background: #16a34a; color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; } .dd-btn:hover { background: #15803d; } .dd-btn.alt { background: #ecfdf3; color: #14532d; } .dd-btn.alt:hover { background: #d1fae5; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .dd-chips span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 5px 13px; font-size: 12.5px; } .dd-chips b { color: #fde68a; }
.dd-tip { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 11px 14px; margin: 0 0 6px; font-size: 13px; color: #78350f; } .dd-tip p { margin: 0; line-height: 1.5; } .dd-tip span { font-size: 17px; }
.dd-di input { width: 58px; } .dd-di { padding: 0 16px 0 10px; }
/* product price dashboard hero + card tags */
.pcat-admin.pcat-admin-v2 { display: block; max-width: 1240px; margin: 0 auto 8px; padding: 0 16px; } .pcat-admin-v2 .pcat-pays { margin-top: 0; }
.pdh .dd-grid { grid-template-columns: 1fr minmax(290px, 440px); } @media (max-width: 800px) { .pdh .dd-grid { grid-template-columns: 1fr; } }
.pdh-t { margin: 0; font-size: 24px; color: #fff; letter-spacing: -.01em; }
.pdh .pcat-sw { display: flex; flex-direction: column; gap: 8px; } .pdh .pcat-switch { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: 9px 12px; } .pdh .pcat-switch .tx b { color: #fff; font-size: 13.5px; display: block; } .pdh .pcat-switch .tx span { display: block; color: #bbf7d0; font-size: 12px; letter-spacing: 0; font-weight: 500; }
.pdh .pcat-switch .sl { background: rgba(255,255,255,.3); } .pdh .pcat-switch input:checked + .sl { background: #4ade80; }
.pcat-admin-v2 .pcat-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pcat-admin-v2 .pcat-pays > .pcat-ch, .pcat-admin-v2 .pcat-pays > .pcat-payf, .pcat-admin-v2 .pcat-pays > .pcat-hint { grid-column: 1 / -1; } .pcat-admin-v2 .pcat-pays > .pcat-pm { margin: 0; } @media (max-width: 900px) { .pcat-admin-v2 .pcat-pays { grid-template-columns: 1fr; } }
.pcat-admin-v2 .pcat-pm .pcat-payg { grid-template-columns: 1fr; }
.sc-tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 0; } .sc-tagrow span { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 700; } .sc-tagrow span.more { background: #f2f4f7; color: #667085; border-color: #e4e7ec; }
.sc-sd { min-height: 0; -webkit-line-clamp: 2; }
/* distributor: choose the parts to buy */
.sc-selhint { margin: -4px 0 12px; font-size: 13px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; }
.sc-part.selectable { cursor: pointer; padding-left: 14px; transition: opacity .15s, border-color .15s, background .15s; border-width: 1.5px; border-color: #86efac; } .sc-part.selectable.off { opacity: .55; background: #f9fafb; border-color: #e4e7ec; } .sc-part.selectable.off .sc-n { background: #98a2b3; box-shadow: none; }
.sc-pcheck { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; } .sc-pcheck input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .sc-pcheck span { width: 24px; height: 24px; border-radius: 8px; border: 2px solid #86efac; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .sc-pcheck input:checked + span { background: #16a34a; border-color: #16a34a; } .sc-pcheck input:checked + span::after { content: "✓"; color: #fff; font-weight: 800; font-size: 15px; line-height: 1; } .sc-pcheck input:focus-visible + span { outline: 2px solid #4ade80; outline-offset: 2px; }
.sc-part-p s { display: block; color: #98a2b3; font-size: 12px; font-weight: 600; text-align: right; }
.sc-selsum { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 18px; background: linear-gradient(135deg, #052e16, #14532d); color: #fff; border-radius: 16px; } .sc-selsum.none { background: #475467; }
.sc-selsum b { display: block; font-size: 15px; } .sc-selsum small { display: block; color: #bbf7d0; font-size: 12.5px; margin-top: 2px; } .sc-selp { text-align: right; } .sc-selp b { font-size: 26px; color: #fff; } .sc-selp .sc-was { display: block; color: #86efac; font-size: 13px; margin: 0; } .sc-selp small { color: #bbf7d0; }
.sc-off, .sc-pricebox .sc-off { color: #fff !important; background: #dc2626; }
/* payments hero (same look as the other dashboard heroes) */
.payhero { margin-top: 0; background: radial-gradient(700px 240px at 8% -30%, rgba(96,165,250,.22), transparent), linear-gradient(135deg, #052e16, #14532d 60%, #166534); }
.dd-grid.pay2 { grid-template-columns: 1fr 1fr; } @media (max-width: 800px) { .dd-grid.pay2 { grid-template-columns: 1fr; } }
.dd-box.pm { display: flex; flex-direction: column; gap: 2px; } .pmh { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .pmh b { flex: 1; font-size: 16px; } .pdot { width: 14px; height: 14px; border-radius: 50%; } .pdot.bk { background: #f472b6; box-shadow: 0 0 0 4px rgba(244,114,182,.25); } .pdot.cd { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.25); }
.pstat { border-radius: 99px; padding: 3px 11px; font-size: 11px; font-weight: 800; } .pstat.on { background: #dcfce7; color: #15803d; } .pstat.off { background: rgba(255,255,255,.16); color: #e4e7ec; }
.dd-box label { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #86efac; margin-top: 10px; } .dd-box label i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; }
.dd-box input[type=text], .dd-box textarea { background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #101828; outline: none; width: 100%; box-sizing: border-box; } .dd-box textarea { resize: vertical; min-height: 76px; } .dd-box input[type=text]:focus, .dd-box textarea:focus { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.dd-box .pcat-link input { height: auto; }
.payfoot { margin-top: 14px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .payfoot label { flex: 1; min-width: 240px; margin: 0; } .payfoot .pfb { display: flex; align-items: center; gap: 12px; } .payfoot .pcat-paysaved { color: #86efac; }
.payhint { display: block; font-style: normal; font-size: 12px; opacity: .75; margin-top: 10px; } .payhint code { background: rgba(255,255,255,.14); border-radius: 5px; padding: 1px 6px; }
.dd-box label.pcat-switch { flex-direction: row; align-items: center; margin-top: 0; gap: 12px; font-size: inherit; letter-spacing: 0; text-transform: none; color: #fff; } .dd-box .pcat-switch .tx { display: block; text-align: left; }

/* compact product information + made-to-order badge on the picture + full (not dotted) short text */
.sc-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.sc-tile { padding: 6px 9px; gap: 1px; border-radius: 10px; border-top-width: 2px; }
.sc-tile small { font-size: 9px; min-height: 0; letter-spacing: .03em; }
.sc-tile b { font-size: 12px; line-height: 1.3; font-weight: 700; }
.sc-mto { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(255,247,237,.95); color: #c2410c; border: 1px solid #fed7aa; border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 800; font-style: normal; }
.sc-sd { -webkit-line-clamp: 3; }

.sc-sd { -webkit-line-clamp: unset; display: block; overflow: visible; }

.dd-pv { display: none; margin-top: 8px; font-size: 12.5px; } .dd-pv.on { display: block; background: rgba(251,191,36,.18); border: 1px solid rgba(251,191,36,.55); color: #fde68a; border-radius: 10px; padding: 7px 10px; }
.dst-code { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 12px; background: #ecfdf3; color: #067647; border-radius: 7px; padding: 3px 8px; }

.sc-ovr.prev { border-color: #f59e0b; background: #fffbeb; } .sc-ovr.prev em { color: #b45309; font-weight: 800; }

/* quotations */
.quo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; color: #475467; }
.cl-quo { border-color: #86efac !important; background: #f0fdf4 !important; color: #166534 !important; }
.quo-ed .quo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .quo-ed label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #667085; } .quo-ed label.w2 { grid-column: 1 / -1; }
.quo-ed input[type=text], .quo-ed input[type=date], .quo-ed input[type=number], .quo-ed textarea { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: #101828; }
.quo-h { margin: 18px 0 8px; font-size: 14px; color: #14532d; border-bottom: 2px solid #dcfce7; padding-bottom: 4px; }
.quo-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .quo-add input { flex: 1; min-width: 220px; width: auto !important; }
.quo-items td { vertical-align: top; } .quo-items textarea { min-height: 52px; resize: vertical; } .quo-items td.qn { width: 28px; color: #667085; } .quo-items .qt { font-weight: 700; white-space: nowrap; }
.quo-tot { text-align: right; font-size: 16px; margin: 8px 0; } .quo-tot b { color: #14532d; }
.quo-sec { border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px; margin-bottom: 8px; background: #fafcfb; } .quo-sh { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .quo-sh input[type=text] { flex: 1; } .quo-ed label.quo-chk { flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; letter-spacing: 0; font-size: 12px; } .quo-chk input { width: auto !important; }
.quo-out { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px dashed #d0d5dd; }
@media (max-width: 700px) { .quo-ed .quo-grid { grid-template-columns: 1fr; } }

.quo-sigrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #667085; }

/* quotation editor: form left, letter right */
body.quo-open { overflow: hidden; }
#quo-full { position: fixed; inset: 0; z-index: 3000; background: #f2f4f3; display: flex; flex-direction: column; }
.qf-bar, .qf-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e4e7ec; } .qf-foot { border-bottom: 0; border-top: 1px solid #e4e7ec; font-size: 12.5px; color: #667085; } .qf-sp { flex: 1; }
.qf-body { flex: 1; display: grid; grid-template-columns: minmax(360px, 440px) 1fr; min-height: 0; }
.qf-left { overflow: auto; padding: 14px 16px 30px; background: #fff; border-right: 1px solid #e4e7ec; } .qf-left h4 { margin: 18px 0 8px; font-size: 14px; color: #14532d; border-bottom: 2px solid #dcfce7; padding-bottom: 4px; } .qf-left h4:first-child { margin-top: 0; }
.qf-left label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #344054; margin-bottom: 9px; }
.qf-left input[type=text], .qf-left input[type=date], .qf-left input[type=number], .qf-left textarea { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; color: #101828; }
.qf-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.qf-right { overflow: auto; background: #dfe5e2; padding: 14px; } #qf-wrap { margin: 0 auto; box-shadow: 0 6px 30px rgba(0,0,0,.18); background: #fff; } #qf-frame { width: 794px; border: 0; display: block; transform-origin: 0 0; background: #fff; }
.qi { border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fafcfb; } .qi-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .qi-h .qt { flex: 1; text-align: right; color: #14532d; font-weight: 800; font-size: 12.5px; }
.qi-g { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 8px; margin-top: 8px; } .qf-left label.qchk { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; margin: 4px 0 0; } .qchk input { width: auto !important; }
.qbd { margin-top: 8px; padding: 8px; background: #eef6f9; border-radius: 10px; } .qbd-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .qbd-h { font-size: 11.5px; font-weight: 800; color: #475467; margin: 4px 0; }
.qr { display: grid; grid-template-columns: 1fr 80px auto auto; gap: 6px; align-items: center; margin-bottom: 6px; } .qr span { font-size: 12px; color: #667085; }
.qf-left .quo-add { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .qf-left .quo-add input { flex: 1; min-width: 160px; }
@media (max-width: 900px) { .qf-body { grid-template-columns: 1fr; overflow: auto; } .qf-right { min-height: 70vh; } }

.qpick { position: relative; flex: 1; min-width: 160px; } .qpick input { width: 100%; }
.qpl { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; background: #fff; border: 1px solid #d0d5dd; border-radius: 12px; box-shadow: 0 12px 30px rgba(16,24,40,.18); max-height: 280px; overflow: auto; }
.qpo { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f7; } .qpo:hover { background: #f0fdf4; } .qpo b { font-size: 13px; color: #101828; } .qpo small { grid-column: 1; color: #667085; font-size: 11.5px; } .qpo span { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #14532d; font-weight: 800; font-size: 12px; } .qpo.none { color: #667085; cursor: default; }
.qf-left select { width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 9px; padding: 8px 8px; font: inherit; font-size: 13px; font-weight: 600; background: #fff; }

/* quotation editor — tidy alignment */
#quo-full .qf-left { padding: 16px 18px 40px; }
#quo-full .qf-left label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #344054; margin: 0 0 12px; }
#quo-full .qf-left input[type=text], #quo-full .qf-left input[type=date], #quo-full .qf-left input[type=number], #quo-full .qf-left select { height: 38px; padding: 0 11px; }
#quo-full .qf-left textarea { padding: 9px 11px; line-height: 1.4; resize: vertical; }
#quo-full .qf-left h4 { margin: 22px 0 12px; }
#quo-full .qf-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#quo-full .quo-add { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
#quo-full .qpick { grid-column: 1 / -1; position: static; min-width: 0; } #quo-full .qpick input { width: 100%; }
#quo-full .quo-add .btn { height: 38px; justify-content: center; }
#quo-full .qpl { top: 44px; left: 0; right: 0; max-height: 320px; overflow-x: hidden; }
#quo-full .qpo { grid-template-columns: minmax(0, 1fr) auto; } #quo-full .qpo b, #quo-full .qpo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#quo-full .qi { padding: 12px; } #quo-full .qi-h { margin-bottom: 8px; } #quo-full .qi-h b { font-size: 13px; }
#quo-full .qi-g { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 10px; margin-top: 10px; align-items: end; } #quo-full .qi-g label { margin-bottom: 4px; }
#quo-full .cl-del, #quo-full .qi-h .btn, #quo-full .quo-sh .btn, #quo-full .qr .btn { height: 38px; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
#quo-full .quo-sh { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
#quo-full .quo-sh label.quo-chk, #quo-full label.qchk { flex-direction: row; align-items: center; gap: 6px; margin: 0; font-weight: 600; white-space: nowrap; height: 38px; }
#quo-full label.qchk { white-space: normal; height: auto; margin: 6px 0 4px; line-height: 1.35; }
#quo-full .qbd { margin-top: 10px; padding: 12px; } #quo-full .qbd-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } #quo-full .qbd-h { margin: 6px 0 8px; }
#quo-full .qr { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
#quo-full .quo-tot { margin: 4px 0 6px; font-size: 15px; }
#quo-full .quo-sigrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12px; font-weight: 700; color: #344054; letter-spacing: 0; text-transform: none; }
#quo-full .quo-sec { padding: 12px; margin-bottom: 10px; }
@media (max-width: 1100px) { .qf-body { display: block; overflow: auto; } #quo-full .qf-left { overflow: visible; border-right: 0; } .qf-right { min-height: 80vh; } }
#quo-full .qpick input, #quo-full .quo-add input#qe-pick { width: 100% !important; min-width: 0 !important; flex: none; box-sizing: border-box; }

.qbd-hint { font-size: 11.5px; line-height: 1.4; color: #475467; background: #fff; border: 1px dashed #b6c7d1; border-radius: 8px; padding: 6px 9px; margin: 2px 0 8px; }

#quo-full .qr { grid-template-columns: minmax(0, 1fr) 74px 92px 38px; } #quo-full .qr input::placeholder, #quo-full .qbd input::placeholder { font-size: 11px; font-weight: 500; color: #98a2b3; }

.qf-hint { font-size: 12px; color: #667085; }

/* quotation history, follow-ups, status */
.quo-tbl tr.quo-fu td { background: #fafcfb; } .quo-tbl tr.quo-fu td:first-child { padding-left: 22px; } .quo-arrow { color: #98a2b3; margin-right: 4px; }
.quo-dn { color: #067647; font-weight: 700; } .quo-up { color: #b42318; font-weight: 700; } .quo-wonnote { color: #067647; }
.qst { border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 800; border: 1px solid transparent; background: #f2f4f7; color: #475467; font-family: inherit; }
select.qst { padding: 5px 8px; cursor: pointer; }
.qst-offered { background: #eff4ff; color: #3538cd; border-color: #c7d7fe; } .qst-won { background: #dcfae6; color: #067647; border-color: #abefc6; } .qst-working { background: #fef0c7; color: #b54708; border-color: #fedf89; } .qst-completed { background: #d1fadf; color: #05603a; border-color: #a6f4c5; } .qst-lost { background: #fee4e2; color: #b42318; border-color: #fecdca; }
.qov-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .qov-chip { border: 1px solid #d0d5dd; background: #fff; border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 92px; } .qov-chip small { font-weight: 600; opacity: .8; font-size: 11px; } .qov-chip b { font-size: 18px; } .qov-chip.on { outline: 2px solid #16a34a; }
.qov-q { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: 10px; font: inherit; }

select.qst { min-width: 138px; width: auto; white-space: nowrap; padding: 6px 28px 6px 12px; }
.qst { white-space: nowrap; }
.qov-chip { min-width: 112px; }
.quo-tbl td.cl-actions { white-space: normal; min-width: 230px; } .quo-tbl td.cl-actions .btn { margin: 0 4px 4px 0; }

/* simple text boxes for the letter */
.rte { min-height: 40px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.45; color: #101828; background: #fff; white-space: pre-wrap; word-break: break-word; outline: none; }
.rte:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .rte:empty:before { content: attr(data-ph); color: #98a2b3; font-weight: 400; } .rte b { font-weight: 800; }
.qf-help { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; margin-bottom: 6px; }
.qf-addsec select { width: 100%; height: 38px; border: 1px dashed #98a2b3; border-radius: 9px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: #14532d; padding: 0 10px; cursor: pointer; }

/* loans */
.loan-od { color: #b42318; font-weight: 800; font-size: 12px; } .loan-tbl td { vertical-align: middle; }
.loan-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.loan-form .lf { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .loan-form .lf-full { grid-column: 1 / -1; }
.loan-form .lf label { font-size: 12.5px; font-weight: 700; color: #344054; }
.loan-form .lf small { font-size: 11.5px; color: #98a2b3; line-height: 1.3; }
.loan-form .lf-h { grid-column: 1 / -1; margin-top: 6px; padding-bottom: 5px; border-bottom: 2px solid #dcfce7; font-size: 13px; font-weight: 800; color: #14532d; } .loan-form .lf-h:first-child { margin-top: 0; }
.loan-form input, .loan-form select { height: 40px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 500; box-sizing: border-box; width: 100%; background: #fff; color: #101828; }
.loan-form input:focus, .loan-form select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.loan-calc { grid-column: 1 / -1; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; border-radius: 10px; padding: 9px 12px; font-size: 13px; } .loan-calc:empty { display: none; }
.loan-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; } .loan-k { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px 12px; } .loan-k small { display: block; color: #667085; font-size: 11.5px; font-weight: 700; } .loan-k b { font-size: 17px; color: #14532d; }
.loan-bar { height: 8px; border-radius: 99px; background: #e4e7ec; overflow: hidden; margin-bottom: 8px; } .loan-bar i { display: block; height: 100%; background: #16a34a; } .loan-facts { color: #475467; font-size: 13px; line-height: 1.6; }
.loan-pay { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr auto; gap: 10px; align-items: end; } .loan-pay label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #344054; } .loan-pay input { height: 38px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 9px; font: inherit; box-sizing: border-box; width: 100%; } .loan-pay .btn { height: 38px; }
@media (max-width: 760px) { .loan-form { grid-template-columns: 1fr; } .loan-top { grid-template-columns: 1fr 1fr; } .loan-pay { grid-template-columns: 1fr 1fr; } }

.loan-form .lf label { margin: 0; } .loan-form { gap: 12px 18px; }

/* loans v2 */
.loan-form .lf-sec { grid-column: 1 / -1; } .loan-form-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; } .loan-form .lf-sec .lf-h { margin: 0 0 10px; }
.loan-form .lcb { position: relative; } .loan-form .lcb input { padding-right: 34px; } .lcb-b { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; border: 0; background: transparent; color: #667085; cursor: pointer; font-size: 14px; border-radius: 0 8px 8px 0; } .lcb-b:hover { background: #f2f4f7; }
.lcb-l { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 80; margin-top: 4px; background: #fff; border: 1px solid #d0d5dd; border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.18); max-height: 230px; overflow: auto; } .lcb-o { padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid #f2f4f7; } .lcb-o:hover { background: #f0fdf4; } .lcb-o.none { color: #98a2b3; cursor: default; font-size: 12.5px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; } .seg-o { flex: 1; min-width: 150px; cursor: pointer; } .seg-o input { position: absolute; opacity: 0; pointer-events: none; } .seg-o span { display: block; text-align: center; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: #344054; background: #fff; } .seg-o input:checked + span { border-color: #16a34a; background: #f0fdf4; color: #14532d; box-shadow: 0 0 0 2px rgba(22,163,74,.2); }
.loan-owed { font-size: 13px; color: #344054; } .loan-hint { font-size: 12px; color: #667085; margin: 6px 0 4px; } .loan-rf { grid-template-columns: 1fr 1.2fr 1.6fr auto; margin-top: 10px; }
.loan-ev { display: inline-block; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 800; background: #f2f4f7; color: #475467; } .loan-ev-loan { background: #eff4ff; color: #3538cd; } .loan-ev-repayment { background: #fef0c7; color: #b54708; } .loan-ev-deposit { background: #e0f2fe; color: #075985; } .loan-ev-refund { background: #dcfae6; color: #067647; }
@media (max-width: 760px) { .loan-form-in { grid-template-columns: 1fr; } .loan-rf { grid-template-columns: 1fr 1fr; } }

#loanrep-full { position: fixed; inset: 0; z-index: 3000; background: #f2f4f3; display: flex; flex-direction: column; } .lr-right { flex: 1; } #lr-frame { width: 794px; border: 0; display: block; transform-origin: 0 0; background: #fff; }

#lr-wrap { margin: 0 auto; box-shadow: 0 6px 30px rgba(0,0,0,.18); background: #fff; }

.sv-share { display: flex; gap: 8px; flex-wrap: wrap; } .sv-share .btn { text-decoration: none; display: inline-flex; align-items: center; }
.sv-ph { border: 1px dashed #c9d3cc; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; background: #fafcfb; } .sv-phh { margin-bottom: 8px; font-size: 13px; } .sv-phh small { color: #667085; }
.sv-th { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .sv-th img { width: 86px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #dfe5e1; } .sv-th input { flex: 1; min-width: 0; }
.sv-wide { grid-column: 1 / -1; } #quo-full textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 8px; resize: vertical; }
.svp-list { margin-top: 10px; max-height: 60vh; overflow: auto; } .svp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #eef1ee; } .svp-n { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .svp-row .btn { margin-left: 6px; }
.cd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0 10px; } .cd-tile { background: #f6faf7; border: 1px solid #dbe7df; border-left: 4px solid #14532d; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; } .cd-tile span { font-size: 12px; color: #667085; } .cd-tile b { font-size: 22px; color: #14532d; } .cd-tile small { color: #667085; font-size: 12px; }
.cd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; } .cd-h { margin: 16px 0 6px; } .cl-name { cursor: pointer; }

.qf-left .lcb { position: relative; } .qf-left .lcb input { padding-right: 34px; width: 100%; } .sv-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .sv-l { font-size: 12.5px; color: #475467; }
.qf-left .lcb-b { border-left: 1px solid #e4e7ec; } .qf-left .lcb-l { z-index: 120; }

.sv-f { justify-content: flex-end; } .sv-l { font-weight: 600; color: #344054; } .sv-f input[type=text] { width: 100%; } #quo-full .qf-g2 { align-items: stretch; }
#quo-full .qf-g2 { row-gap: 12px; }

.sv-lti { border: 0 !important; border-bottom: 1px dashed #c9d3cc !important; background: transparent !important; padding: 2px 0 !important; font-size: 12.5px; font-weight: 600; color: #344054; border-radius: 0 !important; width: 100%; } .sv-lti:focus { border-bottom-color: #14532d !important; outline: none; box-shadow: none !important; }
#quo-full h4 { display: flex; align-items: center; gap: 6px; } .sv-hti { flex: 1; border: 0 !important; border-bottom: 1px dashed transparent !important; background: transparent !important; font: inherit; color: inherit; padding: 0 !important; box-shadow: none !important; } .sv-hti:hover, .sv-hti:focus { border-bottom-color: #14532d !important; outline: none; }

.stat-detail-row small { display: block; font-weight: 400; font-size: 12px; color: #667085; margin-top: 1px; } .stat-detail-row.is-clickable { cursor: pointer; border-radius: 8px; transition: background .12s; } .stat-detail-row.is-clickable:hover { background: #f1f8f4; } .stat-detail-row strong i { font-style: normal; color: #98a2b3; margin-left: 8px; font-size: 16px; }

.svs { border: 1px solid #dbe7df; border-radius: 10px; background: #fcfefd; padding: 10px 12px; margin: 0 0 12px; } .svs-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .svs-n { font-weight: 700; color: #14532d; } .svs-t { flex: 1; min-width: 0; font-weight: 700; color: #14532d; } .svs-h .btn { padding: 4px 9px; } .svs-hint { font-size: 12px; color: #667085; margin: 0 0 6px; } .svs-add { margin-top: 4px; }
.svr { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto auto; gap: 6px; align-items: start; margin-bottom: 6px; } .svr .btn { padding: 6px 9px; } .svr-l { min-width: 0; } .svr .rte { min-height: 36px; padding: 7px 10px; }
.svo { position: fixed; z-index: 4000; width: 220px; max-height: 260px; overflow: auto; background: #fff; border: 1px solid #d0d5dd; border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.2); } .svo-i { padding: 9px 12px; font-size: 13.5px; cursor: pointer; } .svo-i:hover { background: #f1f8f4; }
.svr { grid-template-columns: 1fr auto auto; row-gap: 4px; padding-bottom: 8px; border-bottom: 1px dashed #e3e8e5; margin-bottom: 8px; } .svr-l { font-weight: 600; } .svr .rte { grid-column: 1 / -1; grid-row: 2; } .svr .svr-o { font-size: 15px; }

.svs { padding: 10px 14px 8px; } .svs-h { gap: 8px; } .svs-t { flex: 1; font-weight: 700; font-size: 15px; color: #14532d; padding: 2px 0; outline: none; border-bottom: 1px solid transparent; min-width: 40px; } .svs-t:hover, .svs-t:focus, .svr-lab:hover, .svr-lab:focus { border-bottom-color: #c9d3cc; } .svs-x { border: 0; background: none; color: #b42318; font-size: 12px; cursor: pointer; padding: 2px 4px; } .svs-x:hover { text-decoration: underline; }
.svr { display: grid; grid-template-columns: minmax(80px, 38%) 1fr 26px 26px; gap: 8px; align-items: start; padding: 0; border: 0; margin: 0 0 7px; } .svr .rte { grid-column: auto; grid-row: auto; min-height: 34px; padding: 6px 10px; } .svr-lab { font-size: 13px; font-weight: 600; color: #344054; padding: 7px 0 3px; outline: none; border-bottom: 1px solid transparent; word-break: break-word; } .svr-lab:empty:before, .svs-t:empty:before { content: attr(data-ph); color: #98a2b3; font-weight: 400; }
.svr-o, .svr-x { width: 26px; height: 34px; border: 0; background: none; color: #667085; cursor: pointer; border-radius: 6px; padding: 0; font-size: 13px; } .svr-o { border: 1px solid #d0d5dd; background: #fff; } .svr-o:hover { background: #f1f8f4; } .svr-x:hover { color: #b42318; background: #fef3f2; }
.svs-add { border: 0; background: none; color: #14532d; font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 0; } .svs-add:hover { text-decoration: underline; }

.svr { grid-template-columns: minmax(70px, 31%) 1fr 26px 26px; } .svr-x { color: #98a2b3; }
.sc-req .sc-add{display:none}

.dr-st{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#eef4ff;color:#3538cd}.dr-approved{background:#e8f5ec;color:#067647}.dr-rejected,.dr-cancelled{background:#fef3f2;color:#b42318}

.sc-pq{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:12px}.sc-pq small{font-size:10px;font-weight:700;color:#667085;text-transform:uppercase}.sc-pq input{width:74px;padding:6px 8px;border:1px solid #d0d5dd;border-radius:8px;font:inherit}

/* distributor requisition form */
.sc-reqm { max-width: 620px; padding: 28px 30px 26px; }
.sc-reqm h2 { margin: 0 0 16px; }
.sc-reqm .sc-cis { margin-bottom: 4px; }
.sc-reqm .sc-tot { margin: 12px 0 4px; }
.sc-reqm .sc-pay { margin-top: 20px; }
.sc-reqm .sc-h3 { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #475467; }
.sc-reqm .sc-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-reqm .sc-pm label { display: flex; align-items: flex-start; gap: 10px; min-height: 74px; padding: 14px; box-sizing: border-box; }
.sc-reqm .sc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; margin: 16px 0 0; align-items: start; }
.sc-reqm .sc-form label { display: flex; flex-direction: column; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #475467; min-width: 0; }
.sc-reqm .sc-form input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #101828; background: #fff; }
.sc-reqm .sc-form input:focus { outline: 0; border-color: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.14); }
.sc-reqm .sc-form .sc-wide { grid-column: 1 / -1; }
.sc-reqm .sc-left { align-self: end; min-height: 46px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #067647; }
.sc-reqm .sc-left:empty { visibility: hidden; }
.sc-reqm #sc-advbox { padding: 16px; border: 1px solid #d1e7d8; border-radius: 14px; background: #f6fbf8; }
.sc-fbox { border: 1.5px dashed #b7c7bd; border-radius: 14px; padding: 14px 16px; background: #f9fcfa; }
.sc-fbox .sc-fine { margin: 0 0 10px; }
.sc-fr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 8px; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; font-size: 13px; font-weight: 600; } .sc-fr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-fr .sc-rm { border: 0; background: #f2f4f7; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; color: #475467; }
.sc-fadd { border: 1px solid #16a34a; background: #fff; color: #14532d; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; } .sc-fadd:hover { background: #ecfdf3; }
.sc-reqm .sc-addbig { margin-top: 18px; }
@media (max-width: 560px) { .sc-reqm { padding: 22px 18px; } .sc-reqm .sc-form, .sc-reqm .sc-pm { grid-template-columns: 1fr; } }

/* parts with a quantity box: the box sits on its own row so the name has room */
.sc-part.hasq{flex-wrap:wrap;row-gap:12px;align-items:center}
.sc-part.hasq .sc-part-t{flex:1 1 150px;min-width:0}
.sc-part.hasq .sc-part-p{white-space:nowrap;margin-left:auto}
.sc-part.hasq .sc-pq{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin:0;padding-top:12px;border-top:1px dashed #cfe3d6}
.sc-part.hasq .sc-pq small{font-size:11px}
.sc-part.hasq .sc-pq input{width:120px;height:40px;text-align:right;font-weight:700}
.sc-reqm .sc-cis { max-height: none; overflow: visible; }
body.pt-loginpage .pl-foot { display: none; }

#dreq-tbl tbody tr:hover { background: #f6fbf8; }
.dr-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; color: #667085; font-size: 13px; }
.dr-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #d1e7d8; } .dr-tl li { position: relative; padding: 0 0 12px 14px; font-size: 14px; } .dr-tl li:before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; } .dr-tl li.dr-wait:before { background: #f79009; }
.dr-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f3; }

/* site visit picker: name on the left, the buttons in one tidy column on the right */
.svp-list { margin-top: 14px; max-height: 62vh; padding-right: 4px; }
.svp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 10px; border-bottom: 1px solid #eef0f3; border-radius: 10px; }
.svp-row:hover { background: #f6fbf8; }
.svp-n { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .svp-n b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.svp-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.svp-act .btn { min-width: 118px; height: 38px; padding: 0 14px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
@media (max-width: 560px) { .svp-row { grid-template-columns: 1fr; } .svp-act { justify-content: flex-start; } }
.svp-act { display: grid; grid-template-columns: 124px 124px; gap: 8px; justify-content: end; }
.svp-act .btn { min-width: 0; width: 100%; }
@media (max-width: 560px) { .svp-act { justify-content: start; } }
#prd-body .pm-rank[data-gg] .pm-rank-n { flex: 0 0 34%; min-width: 0; }

/* Production Management dashboard: clean white cards, nothing overlaps */
#prd-body { max-width: 1280px; }
.prx-head { padding: 4px 2px 18px; } .prx-kick { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: #16a34a; margin-bottom: 4px; }
.prx-head h1 { margin: 0 0 4px; font-size: 26px; color: #052e16; } .prx-head p { margin: 0; color: #667085; font-size: 14px; }
.prx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.prx-k { position: relative; text-align: left; font: inherit; background: #fff; border: 1px solid #e4e7ec; border-left: 4px solid var(--c, #16a34a); border-radius: 14px; padding: 16px 38px 16px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .15s, transform .15s, border-color .15s; }
.prx-k:hover { box-shadow: 0 8px 22px rgba(16,24,40,.1); transform: translateY(-1px); }
.prx-k small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #667085; } .prx-k b { display: block; font-size: 30px; line-height: 1.15; margin: 4px 0 2px; color: #101828; } .prx-k span { font-size: 12.5px; color: #667085; }
.prx-k i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; color: #98a2b3; }
.prx-green { --c: #16a34a; } .prx-blue { --c: #2563eb; } .prx-violet { --c: #7c3aed; } .prx-teal { --c: #0891b2; } .prx-amber { --c: #d97706; }
.prx-warn { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.prx-w { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 12px; cursor: pointer; border: 1px solid; background: #fff; }
.prx-w b { width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .prx-w i { font-style: normal; font-size: 18px; opacity: .6; }
.prx-w-bad { color: #b42318; border-color: #fecdca; background: #fffbfa; } .prx-w-warn { color: #b54708; border-color: #fedf89; background: #fffcf5; } .prx-w:hover { filter: brightness(.97); }
.prx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.prx-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; padding: 20px 22px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); min-width: 0; }
.prx-card h3 { margin: 0; font-size: 17px; color: #052e16; } .prx-sub { margin: 2px 0 12px; font-size: 12.5px; color: #667085; }
.prx-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 56px; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; background: transparent; border: 0; border-top: 1px solid #eef0f3; padding: 11px 6px; cursor: pointer; border-radius: 8px; }
.prx-row:hover { background: #f6fbf8; }
.prx-rec { grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 64px; }
.prx-name { font-size: 14px; font-weight: 600; color: #101828; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; } .prx-name small { display: block; font-weight: 400; font-size: 12px; color: #667085; margin-top: 2px; }
.prx-bar { display: block; height: 8px; border-radius: 6px; background: #eef2ee; overflow: hidden; } .prx-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #16a34a, #4ade80); }
.prx-row em { font-style: normal; font-weight: 800; text-align: right; font-size: 14px; color: #14532d; font-variant-numeric: tabular-nums; }
.prx-th { width: 40px; height: 40px; border-radius: 10px; background: #f2f4f7; display: grid; place-items: center; overflow: hidden; color: #667085; } .prx-th img { width: 100%; height: 100%; object-fit: cover; } .prx-th svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .prx-two { grid-template-columns: 1fr; } .prx-row { grid-template-columns: minmax(0, 1fr) 44px; } .prx-row .prx-bar { display: none; } .prx-rec { grid-template-columns: 40px minmax(0, 1fr) 54px; } }

/* ---- Home / Command Center ---- */
body.on-home .sidebar, body.on-home .mobile-topbar { display: none !important; }
body.on-home .content { margin-left: 0 !important; padding: 0 32px 48px; }
body[data-mod="daily"] .sidebar-nav > [data-mod]:not([data-mod="daily"]),
body[data-mod="accounts"] .sidebar-nav > [data-mod]:not([data-mod="accounts"]),
body[data-mod="partners"] .sidebar-nav > [data-mod]:not([data-mod="partners"]),
body[data-mod="product"] .sidebar-nav > [data-mod]:not([data-mod="product"]),
body[data-mod="production"] .sidebar-nav > [data-mod]:not([data-mod="production"]),
body[data-mod="system"] .sidebar-nav > [data-mod]:not([data-mod="system"]) { display: none !important; }
.nav-home-btn { border: 1px solid rgba(255,255,255,.12); }
.nav-ov-btn { margin-bottom: 8px; }
.hm-wrap, .mh-wrap { max-width: 1120px; margin: 0 auto; }
.hm-wrap { padding-top: 8px; }
.hm-meta { margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }
.hm-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 26px 2px 10px; }
.hm-chev { width: 16px; height: 16px; flex: none; color: var(--text-light); }
.hm-attn { padding: 16px 20px 6px; }
.hm-attn .card-title { margin-bottom: 4px; }
.hm-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--border); padding: 12px 2px; color: var(--text-main); }
.hm-row:first-child { border-top: 0; }
.hm-row:hover .hm-rt { color: var(--green-700); }
.hm-n { min-width: 34px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: #b42318; }
.hm-rt { flex: 1; font-size: 14px; font-weight: 500; }
.hm-rm { font-size: 12.5px; color: var(--text-muted); }
.hm-clear { padding: 10px 2px 14px; font-size: 13.5px; color: var(--text-muted); }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.hm-card { display: flex; flex-direction: column; text-align: left; font: inherit; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 14px; transition: border-color .15s, box-shadow .15s; }
.hm-card:hover { border-color: var(--green-600); box-shadow: var(--shadow-soft); }
.hm-top { display: flex; align-items: center; gap: 10px; }
.hm-ic { width: 20px; height: 20px; flex: none; color: var(--green-700); }
.hm-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--green-900); }
.hm-badge { background: #b42318; color: #fff; font-size: 11.5px; font-weight: 700; min-width: 22px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 7px; font-variant-numeric: tabular-nums; }
.hm-desc { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.hm-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 16px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); min-height: 78px; }
.hm-figs > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-figs b { font-size: 17px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-figs small { font-size: 11.5px; color: var(--text-muted); }
.hm-fig-ph { height: 34px; border-radius: 6px; background: linear-gradient(90deg, #f1f5f3, #e9f0ec, #f1f5f3); background-size: 200% 100%; animation: hmsh 1.2s infinite linear; }
@keyframes hmsh { to { background-position: -200% 0; } }
.hm-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.hm-empty { grid-column: 1 / -1; padding: 36px; text-align: center; color: var(--text-muted); background: var(--bg-card); border-radius: var(--radius); border: 1px dashed var(--border-mid); }
/* ---- one dashboard per module ---- */
.mh-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.mh-crumb a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.mh-crumb a:hover { text-decoration: underline; }
.mh-kpis { display: flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; }
.mh-kpi { flex: 1 1 0; min-width: 150px; text-align: left; font: inherit; cursor: pointer; background: none; border: 0; border-left: 1px solid var(--border); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.mh-kpi:first-child { border-left: 0; }
.mh-kpi:hover { background: var(--green-50); }
.mh-kpi small { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.mh-kpi b { font-size: 24px; font-weight: 700; color: var(--green-900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mh-ph { min-height: 78px; cursor: default; background: linear-gradient(90deg, #f6f9f7, #edf3ef, #f6f9f7); background-size: 200% 100%; animation: hmsh 1.2s infinite linear; }
.mh-pages { padding: 16px 20px 6px; }
.mh-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.mh-row { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--border); padding: 12px 2px; color: var(--text-main); }
.mh-row:nth-child(-n+2) { border-top: 0; }
.mh-row > svg:first-child { width: 18px; height: 18px; flex: none; color: var(--green-700); }
.mh-rn { flex: 1; font-size: 14px; font-weight: 500; }
.mh-row:hover .mh-rn { color: var(--green-700); }
/* ---- Users & Access: module groups ---- */
.acc-table tr.acc-grp td { background: #eaf4ee; border-top: 2px solid #cfe3d6; padding-top: 10px; padding-bottom: 10px; }
.acc-gt { font-weight: 800; font-size: 14px; color: #14532d; margin-right: 12px; }
.acc-gall { font-size: 12px; font-weight: 600; color: #166534; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 760px) { body.on-home .content { padding: 0 14px 30px; } .hm-grid { grid-template-columns: 1fr; } .mh-kpis { flex-wrap: wrap; } .mh-kpi { flex: 1 1 45%; border-top: 1px solid var(--border); } .mh-list { grid-template-columns: 1fr; } .mh-row:nth-child(2) { border-top: 1px solid var(--border); } }