/*
 * OFarm unified UI — Flowbite-inspired, RTL-first design system.
 * Shared by every active module. Existing feature/layout CSS remains in place;
 * this file normalises colour, spacing, controls, cards and responsive states.
 */
@font-face {
  font-family: "Vazirmatn";
  src: url("/ui/fonts/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --of-green-950: #142b1c;
  --of-green-900: #1b3a26;
  --of-green-800: #24482e;
  --of-green-700: #315e3b;
  --of-green-600: #3f7047;
  --of-green-500: #56885d;
  --of-green-100: #dcebdc;
  --of-green-50: #f1f7f0;
  --of-gold-600: #a77720;
  --of-gold-500: #c79833;
  --of-bg: #f5f8f4;
  --of-surface: #ffffff;
  --of-surface-soft: #f8faf7;
  --of-text: #18231d;
  --of-muted: #68756d;
  --of-border: #d9e3dc;
  --of-border-strong: #c3d1c7;
  --of-danger: #b42318;
  --of-warning: #9a5800;
  --of-success: #287247;
  --of-radius-sm: 8px;
  --of-radius: 12px;
  --of-radius-lg: 16px;

  /* یک مقیاس تایپوگرافی و اندازهٔ کنترل برای کل مجموعه. هر بریک‌پوینت فقط
   * همین توکن‌ها را کوچک می‌کند؛ هیچ‌جا clamp/vw نداریم چون باعث می‌شد
   * تیتر روی گوشی از دسکتاپ بزرگ‌تر شود. مقدارها px هستند تا زوم دستی
   * مرورگر (که کاربر روی گوشی لازم دارد) دست‌نخورده کار کند. */
  --of-font-size: 15px;
  --of-font-sm: 13px;
  --of-font-xs: 12px;
  --of-h1: 30px;
  --of-h2: 23px;
  --of-h3: 18px;
  --of-h4: 16px;
  --of-control-h: 42px;
  --of-button-h: 40px;
  --of-control-pad: 10px 12px;
  --of-font-stack: "Vazirmatn", "IRANSans", Tahoma, Arial, sans-serif;
  --of-shadow-sm: 0 1px 2px rgba(20, 43, 28, .05);
  --of-shadow: 0 8px 24px rgba(20, 43, 28, .08);
  --of-ring: 0 0 0 3px rgba(63, 112, 71, .16);

  /* Compatibility tokens used throughout legacy modules. */
  --bg: var(--of-bg);
  --card: var(--of-surface);
  --paper: var(--of-surface);
  --surface: var(--of-surface-soft);
  --field: var(--of-surface);
  --text: var(--of-text);
  --ink: var(--of-text);
  --muted: var(--of-muted);
  --border: var(--of-border);
  --line: var(--of-border-strong);
  --soft-line: var(--of-border);
  --primary: var(--of-green-600);
  --primary-dark: var(--of-green-800);
  --primary-soft: var(--of-green-50);
  --green: var(--of-green-600);
  --green-dark: var(--of-green-800);
  --gold: var(--of-gold-500);
  --danger: var(--of-danger);
  --success: var(--of-success);
  --warn: var(--of-warning);
  --warning: var(--of-warning);
  --shadow: var(--of-shadow);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--of-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
body.ofarm-app,
body.db-app {
  min-height: 100vh;
  margin: 0;
  direction: rtl;
  color: var(--of-text);
  background:
    radial-gradient(circle at 100% 0, rgba(63, 112, 71, .08), transparent 32rem),
    radial-gradient(circle at 0 18%, rgba(199, 152, 51, .06), transparent 28rem),
    var(--of-bg);
  font-family: var(--of-font-stack);
  font-size: var(--of-font-size);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

::selection { color: #fff; background: var(--of-green-600); }
* { scrollbar-width: thin; scrollbar-color: #9fb3a4 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #9fb3a4; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

a { color: var(--of-green-700); text-underline-offset: 3px; }
a:hover { color: var(--of-green-900); }
img, svg, video, canvas { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  color: var(--of-green-950);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
}

h1 { font-size: var(--of-h1); }
h2 { font-size: var(--of-h2); }
h3 { font-size: var(--of-h3); }
h4 { font-size: var(--of-h4); }
p { max-width: 75ch; }

/* A single, recognisable route back to the suite dashboard on every screen. */
.ofarm-global-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #bfd0c3;
  border-radius: var(--of-radius-sm);
  color: var(--of-green-900) !important;
  background: #fff !important;
  box-shadow: var(--of-shadow-sm);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
}
.ofarm-global-home:hover {
  border-color: var(--of-green-600);
  background: var(--of-green-50) !important;
}
.ofarm-global-home .ofarm-home-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--of-green-700);
  font-size: 15px;
}
.ofarm-global-home .ofarm-home-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ofarm-home-row {
  display: flex;
  width: 100%;
  margin: 0 0 14px;
  justify-content: flex-start;
}

/* Readability floor for compact legacy labels and data-dense tools. */
:where(
  small, .tag, .badge, .pill, .chip, .eyebrow, .field-label, .section-label,
  .muted, .hint, .help, .field-hint, .empty-state, .inv-logo-caption,
  .inv-rial, .no-print-label, .step-dot, .rq-tag, .db-muted, .db-btn,
  .count, .cdd-arrow, .flow-block-body, .flow-block-body label,
  .blend-row span, .price-tag, .palette-chip, .stat-card .label,
  .row-actions .ghost-btn
) {
  font-size: 12px !important;
}

@media screen {
  .faktour-app :where(.inv-table td, .inv-table td input, .inv-pay-box p, .inv-pay-box span) {
    font-size: 12px !important;
  }
  .faktour-app :where(.inv-legal p, .inv-sign-box span, .inv-footer-col) {
    font-size: 12px !important;
  }
}

:where(
  .db-eyebrow, .db-zoom-label, .db-empty, .db-audit-chevron,
  .db-audit-badge, .db-audit-table, .db-audit-pk, .db-audit-col,
  .db-audit-old, .db-audit-new, .db-audit-arrow,
  .catalog-status
) {
  font-size: 12px !important;
}

.db-app :where(code, .db-sidebar span, .db-cell, .db-pill) {
  font-size: 12px !important;
}

/* Keep the semantic heading order visually obvious in legacy headers. */
.page-attendance .app-header h1,
.db-app h1 {
  font-size: 26px !important;
}
.db-app h2 { font-size: 21px !important; }
.demo-home h1,
.import-excel-app h1 {
  font-size: 38px !important;
}

:where(.app-shell, .page-shell, .container, .wrap, .db-shell) {
  width: min(100% - 32px, 1480px);
  margin-inline: auto;
}

:where(.app-shell, .page-shell, .container, .wrap, .db-shell) > * {
  min-width: 0;
}

/* Flowbite-like top surfaces */
:where(.app-header, .wizard-header, .page-header, .topbar, .top-bar, .header, .rq-header, .db-toolbar) {
  border-color: var(--of-border) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--of-shadow-sm);
  backdrop-filter: blur(14px);
}

:where(.app-header, .wizard-header, .page-header) h1 {
  color: var(--of-green-950) !important;
}

/* Cards and panels */
:where(
  .card, a.card, .panel, .wizard-panel, .field-card, .smart-card,
  .upload-card, .signature-card, .choice-card, .multi-box, .driver-card,
  .section-card, .summary-card, .stat-card, .stats-card, .metric-card,
  .content-card, .home-card, .db-sidebar, .db-main, .rq-card,
  .detail-card, .filter-card, .toolbar-card, .modal-card, .sheet-card
) {
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  background: var(--of-surface) !important;
  box-shadow: var(--of-shadow-sm) !important;
}

:where(.card, a.card, .field-card, .smart-card, .choice-card, .home-card) {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

:where(a.card, button.card, .choice-card):hover {
  border-color: #a9c1ae !important;
  box-shadow: var(--of-shadow) !important;
  transform: translateY(-2px);
}

:where(.muted, .sub, .hint, .help, small, .eyebrow, .field-hint, .empty-state) {
  color: var(--of-muted) !important;
}

:where(.eyebrow, .field-label, .section-label) {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* کنترل‌های فرم فونت خودشان را از مرورگر می‌گرفتند (Arial ۱۳٫۳px) و کنار
 * متن Vazirmatn صفحه ناهمگون دیده می‌شدند — این چیزی است که کاربر به‌عنوان
 * «فونت‌های مختلف» می‌دید. اینجا صریحاً به فونت و اندازهٔ صفحه برمی‌گردند.
 * option هم لازم است چون در فهرست بازشدهٔ select ارث نمی‌برد. */
:where(input, select, textarea, button, optgroup, option, .search, .cdd-search) {
  font-family: var(--of-font-stack);
  font-size: var(--of-font-size);
  line-height: 1.6;
}

/* Inputs */
:where(input, select, textarea, .search, .cdd-search):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  min-height: var(--of-control-h);
  padding: var(--of-control-pad);
  max-width: 100%;
  border: 1px solid var(--of-border-strong) !important;
  border-radius: var(--of-radius-sm) !important;
  color: var(--of-text) !important;
  background-color: var(--of-surface) !important;
  box-shadow: var(--of-shadow-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

:where(textarea) { min-height: 92px; resize: vertical; }
:where(input, textarea)::placeholder { color: #89968e !important; opacity: 1; }

:where(input, select, textarea, .search, .cdd-search):focus {
  border-color: var(--of-green-600) !important;
  box-shadow: var(--of-ring) !important;
}

:where(input, select, textarea):disabled {
  cursor: not-allowed;
  color: #8a958e !important;
  background: #eef2ef !important;
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--of-green-600);
}

label { color: #35463b; font-weight: 650; }

/* Buttons, Flowbite sizing and focus rings */
:where(
  button, .btn, .primary-btn, .secondary-btn, .ghost-btn, .btn-primary,
  .btn-lite, .small-add, .mini-btn, .db-btn, .action-btn, .toolbar a,
  a.primary-btn, a.secondary-btn
) {
  min-height: var(--of-button-h);
  border-radius: var(--of-radius-sm) !important;
  font-family: var(--of-font-stack);
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

:where(button, .btn, .primary-btn, .secondary-btn, .ghost-btn, .btn-primary, .btn-lite, .db-btn):focus-visible {
  outline: none;
  box-shadow: var(--of-ring) !important;
}

:where(.primary-btn, .btn-primary, .db-btn-primary, button.primary, .action-primary) {
  border: 1px solid var(--of-green-700) !important;
  color: #fff !important;
  background: var(--of-green-700) !important;
  box-shadow: 0 5px 14px rgba(36, 72, 46, .16) !important;
}

:where(.primary-btn, .btn-primary, .db-btn-primary, button.primary, .action-primary):hover {
  border-color: var(--of-green-900) !important;
  background: var(--of-green-900) !important;
}

:where(.secondary-btn, .ghost-btn, .btn-lite, .mini-btn, .db-btn, .action-btn) {
  border: 1px solid var(--of-border-strong) !important;
  color: var(--of-green-800) !important;
  background: var(--of-surface) !important;
}

:where(.secondary-btn, .ghost-btn, .btn-lite, .mini-btn, .db-btn, .action-btn):hover {
  border-color: #a9c1ae !important;
  background: var(--of-green-50) !important;
}

:where(.btn-danger, .danger-btn, button.danger) {
  border-color: #f0b6b1 !important;
  color: var(--of-danger) !important;
  background: #fff8f7 !important;
}

button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }

/* Navigation, tabs and badges */
:where(.nav-links, .tabs, .tab-list, .stepper, .wizard-nav, .quick-links) {
  scrollbar-width: none;
}
:where(.nav-links, .tabs, .tab-list, .stepper, .wizard-nav, .quick-links)::-webkit-scrollbar { display: none; }

:where(.nav-links a, .tab, .tab-btn, .step, .quick-links a) {
  border-radius: var(--of-radius-sm) !important;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

:where(.nav-links a.active, .tab.active, .tab-btn.active, .step.active, .quick-links a:hover) {
  color: var(--of-green-900) !important;
  background: var(--of-green-50) !important;
  border-color: #bdd2c1 !important;
}

:where(.badge, .pill, .chip, .tag, .status-pill, .conn-status, .test-badge) {
  border-radius: 999px !important;
  font-weight: 700;
}

:where(.chip:has(.chip-label), .chip:has(.chip-value)) {
  border-radius: var(--of-radius-sm) !important;
}

:where(.badge-creditor, .badge.creditor, .status-ok, .status-pill.ok, .test-badge.pass) {
  color: #17623a !important;
  background: #e8f5ec !important;
}

/* Tables */
:where(.table-wrap, .table-scroll, .grid-wrap, .db-grid-wrap, .ledger-wrap, .input-table-wrap) {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius);
  background: var(--of-surface);
  scrollbar-gutter: stable;
}

.of-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius);
  background: var(--of-surface);
  scrollbar-gutter: stable;
}

.of-table-scroll > table { margin: 0; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--of-text);
  background: var(--of-surface);
}

:where(table th, .data-table th, .main-table th, .db-grid th) {
  color: #33473a !important;
  background: #f0f5f1 !important;
  font-size: 12px;
  font-weight: 800 !important;
  white-space: nowrap;
}

:where(table th, table td) {
  border-color: #e5ebe7 !important;
}

:where(table tbody tr) { transition: background-color .12s ease; }
:where(table tbody tr:hover) { background: #f7faf7 !important; }

/* Dropdowns, dialogs and feedback */
:where(.suggestions, .dropdown, .dropdown-menu, .cdd-list, .menu-popover) {
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius) !important;
  background: var(--of-surface) !important;
  box-shadow: 0 14px 36px rgba(20, 43, 28, .14) !important;
  overflow: hidden;
}

:where(.suggestion, .dropdown-item, .cdd-item) {
  border-color: #edf1ee !important;
}
:where(.suggestion, .dropdown-item, .cdd-item):hover { background: var(--of-green-50) !important; }

:where(.modal, .dialog, .sheet-modal, .overlay) { backdrop-filter: blur(5px); }
:where(.modal-content, .dialog-card, .modal-card, .sheet-dialog) {
  max-width: min(94vw, 760px);
  max-height: min(90vh, 920px);
  overflow: auto;
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  background: var(--of-surface) !important;
  box-shadow: 0 24px 80px rgba(20, 43, 28, .2) !important;
}

:where(.alert, .notice, .banner, .db-banner-warn, .warning-box) {
  border-radius: var(--of-radius-sm);
}

:where(.toast) {
  max-width: min(calc(100vw - 24px), 520px) !important;
  border-radius: var(--of-radius) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

/* Home/dashboard surfaces */
.wrap { max-width: 1120px !important; padding-block: 28px; }
.grid { gap: 16px !important; }
a.card { min-height: 170px; padding: 22px !important; }
a.card.core {
  border-color: #9ebea5 !important;
  background: linear-gradient(145deg, #f0f7f0, #fff) !important;
}
a.card .icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--of-green-50); }
a.card .title { margin-top: 12px; color: var(--of-green-950); font-size: 17px; font-weight: 800; }
a.card .port { margin-top: 12px; color: var(--of-green-700) !important; }
a.card .tag { color: #fff !important; background: var(--of-green-700) !important; }

/* Responsive states */
@media (max-width: 1100px) {
  :where(.main-grid, .content-grid, .dashboard-grid, .details-grid) {
    grid-template-columns: 1fr !important;
  }
  :where(.side-panel, .sidebar, .db-sidebar) {
    width: 100% !important;
    max-width: none !important;
    border-inline: 0 !important;
  }
}

@media (max-width: 768px) {
  /* روی تبلت/گوشی فقط توکن‌ها کوچک می‌شوند، پس همهٔ ماژول‌ها با هم و به یک
   * نسبت جمع می‌شوند و سلسله‌مراتب اندازه‌ها همان می‌ماند. */
  :root {
    --of-font-size: 14px;
    --of-font-sm: 12.5px;
    --of-font-xs: 11.5px;
    --of-h1: 20px;
    --of-h2: 17px;
    --of-h3: 15px;
    --of-h4: 14px;
    --of-control-h: 38px;
    --of-button-h: 36px;
    --of-control-pad: 8px 10px;
  }
  :where(.app-shell, .page-shell, .container, .wrap, .db-shell) {
    width: min(100% - 20px, 100%) !important;
    margin-block: 10px !important;
  }
  :where(.app-header, .wizard-header, .page-header, .topbar, .top-bar, .header, .rq-header, .db-toolbar) {
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  :where(.brand-block, .header-title, .header-actions, .toolbar, .actions, .filters, .form-actions) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }
  :where(.grid, .form-grid, .fields-grid, .stats-grid, .cards-grid, .filter-grid, .summary-grid,
    .ruling-form-grid, .user-create-form, .approval-create, .adjustment-grid,
    .person-choice-list, .weekly-shift-grid, .attendance-window-row) {
    grid-template-columns: 1fr !important;
  }
  .wrap[style*="display:grid"],
  .wrap[style*="display: grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :where(.row2, .two-col, .three-col, .preview-grid, .issue-toolbar, .slip-cols, .slip-meta) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :where(.preview-shell, .plate-stage, .sheet-stage, .canvas-stage) {
    max-width: 100%;
    overflow: auto;
  }
  :where(.nav-links, .tabs, .tab-list, .wizard-nav, .stepper, .quick-links) {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 4px;
  }
  :where(.nav-links a, .tab, .tab-btn, .step, .quick-links a) {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  :where(.table-wrap, .table-scroll, .grid-wrap, .db-grid-wrap, .ledger-wrap, .input-table-wrap) {
    margin-inline: -2px;
  }
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
  :where(.modal-content, .dialog-card, .modal-card, .sheet-dialog) {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 14px !important;
  }
  a.card { min-height: 150px; padding: 18px !important; }
}

/* دکمه و کنترل روی گوشی نباید از این‌سر تا آن‌سرِ صفحه کشیده شود. عرض
 * طبیعیِ متن‌شان را می‌گیرند و در نوارها کنار هم می‌نشینند؛ فقط دکمهٔ اصلیِ
 * یک فرم (submit) تمام‌عرض می‌ماند چون هدف اصلی آن صفحه است. */
@media (max-width: 768px) {
  :where(.toolbar, .filters, .actions, .row-actions, .header-actions, .modal-actions,
    .decision-actions, .crop-actions, .photo-actions, .chips, .queue-stats)
    > :where(button, .btn, a.btn) {
    flex: 0 1 auto;
    width: auto;
  }
  :where(.toolbar, .filters, .actions, .header-actions) > :where(button, .btn) {
    padding-inline: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --of-font-size: 13.5px;
    --of-h1: 19px;
    --of-h2: 16px;
    --of-control-h: 36px;
    --of-button-h: 34px;
  }
  :where(.app-shell, .page-shell, .container, .wrap, .db-shell) { width: calc(100% - 12px) !important; }
  :where(.card, .panel, .wizard-panel, .section-card, .content-card) { border-radius: 12px !important; }
  :where(.wizard-body, .page-body, main, .content) { padding-inline: 10px !important; }
}

/* هدف لمسی همچنان بزرگ است، ولی نه آن‌قدر که هر دکمه یک نوار ۴۴پیکسلی شود.
 * ارتفاع از توکن می‌آید تا با بقیهٔ اندازه‌های صفحه هماهنگ بماند. */
@media (pointer: coarse) {
  :where(button, .btn, .primary-btn, .secondary-btn, .ghost-btn, .btn-primary, .btn-lite, .nav-links a, .tab, .tab-btn) {
    min-height: max(var(--of-button-h), 38px);
  }
}

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

@media print {
  :root { color-scheme: light; }
  body, body.ofarm-app, body.db-app { color: #111 !important; background: #fff !important; }
  :where(.app-header, .wizard-header, .page-header, .topbar, .top-bar, .header, .rq-header, .db-toolbar) {
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  :where(.card, .panel, .wizard-panel, .field-card, .section-card) { box-shadow: none !important; }
  table { display: table !important; max-width: none !important; overflow: visible !important; white-space: normal !important; }
  .ofarm-global-home, .ofarm-home-row { display: none !important; }
}

/* ============================================================================
 * OFarm shared component layer (of-*)
 * ---------------------------------------------------------------------------
 * Opt-in primitives. The legacy selectors above stay untouched; a page adopts
 * the unified look by adding `of-` classes, so no working module is restyled
 * by accident. Everything here is RTL-first, keyboard-visible and phone-first.
 * ==========================================================================*/

:root {
  --of-space-1: 4px;
  --of-space-2: 8px;
  --of-space-3: 12px;
  --of-space-4: 16px;
  --of-space-5: 24px;
  --of-space-6: 32px;
  --of-tile-min: 148px;
  --of-focus: 0 0 0 3px rgba(63, 112, 71, .32);

  /* Stable, accessible accent identities. Index-addressed so a family or a
   * module always keeps the same colour between renders and reloads. */
  --of-accent-1: #2f6f4f;  --of-accent-1-soft: #e6f2ea;
  --of-accent-2: #1f5f8b;  --of-accent-2-soft: #e3eff7;
  --of-accent-3: #8a5a12;  --of-accent-3-soft: #f8efdf;
  --of-accent-4: #7a3f8f;  --of-accent-4-soft: #f2e9f6;
  --of-accent-5: #a03d47;  --of-accent-5-soft: #fae9ea;
  --of-accent-6: #12656b;  --of-accent-6-soft: #ddf0f0;
  --of-accent-7: #5b6320;  --of-accent-7-soft: #eef2da;
  --of-accent-8: #364a8a;  --of-accent-8-soft: #e7ebf8;
  --of-accent-9: #8d4a20;  --of-accent-9-soft: #f9ebe1;
  --of-accent-10: #4a4f57; --of-accent-10-soft: #ebedf0;
  --of-accent-11: #2c6b30; --of-accent-11-soft: #e5f3e6;
  --of-accent-12: #7c4a6d; --of-accent-12-soft: #f6eaf3;
}

.of-accent-1  { --of-accent: var(--of-accent-1);  --of-accent-soft: var(--of-accent-1-soft); }
.of-accent-2  { --of-accent: var(--of-accent-2);  --of-accent-soft: var(--of-accent-2-soft); }
.of-accent-3  { --of-accent: var(--of-accent-3);  --of-accent-soft: var(--of-accent-3-soft); }
.of-accent-4  { --of-accent: var(--of-accent-4);  --of-accent-soft: var(--of-accent-4-soft); }
.of-accent-5  { --of-accent: var(--of-accent-5);  --of-accent-soft: var(--of-accent-5-soft); }
.of-accent-6  { --of-accent: var(--of-accent-6);  --of-accent-soft: var(--of-accent-6-soft); }
.of-accent-7  { --of-accent: var(--of-accent-7);  --of-accent-soft: var(--of-accent-7-soft); }
.of-accent-8  { --of-accent: var(--of-accent-8);  --of-accent-soft: var(--of-accent-8-soft); }
.of-accent-9  { --of-accent: var(--of-accent-9);  --of-accent-soft: var(--of-accent-9-soft); }
.of-accent-10 { --of-accent: var(--of-accent-10); --of-accent-soft: var(--of-accent-10-soft); }
.of-accent-11 { --of-accent: var(--of-accent-11); --of-accent-soft: var(--of-accent-11-soft); }
.of-accent-12 { --of-accent: var(--of-accent-12); --of-accent-soft: var(--of-accent-12-soft); }

/* ---- Tile grid -----------------------------------------------------------
 * Two usable columns from 320px upward, more as space allows. `grid-auto-rows`
 * keeps every tile the same height so the wall never turns into tall rows. */
.of-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--of-tile-min)), 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: var(--of-space-3) !important;
  align-items: stretch;
}

.of-tile-grid > * { min-width: 0; }

.of-tile {
  display: flex !important;
  position: relative;
  flex-direction: column;
  gap: var(--of-space-2);
  min-height: 148px;
  padding: var(--of-space-4) !important;
  overflow: hidden;
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  color: inherit;
  background: var(--of-surface) !important;
  box-shadow: var(--of-shadow-sm) !important;
  text-align: start;
  text-decoration: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
  cursor: pointer;
}

/* The accent shows as a top edge plus a tinted icon chip: colour identity that
 * never carries meaning on its own, so contrast requirements still hold. */
.of-tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--of-accent, var(--of-green-600));
}

.of-tile:hover {
  border-color: var(--of-accent, var(--of-green-600)) !important;
  box-shadow: var(--of-shadow) !important;
  transform: translateY(-2px);
}

.of-tile:focus-visible {
  outline: none;
  border-color: var(--of-accent, var(--of-green-600)) !important;
  box-shadow: var(--of-focus) !important;
}

.of-tile:active { transform: translateY(0) scale(.99); }
.of-tile[aria-disabled="true"], .of-tile.is-disabled { opacity: .55; pointer-events: none; }
.of-tile[hidden] { display: none !important; }

.of-tile-icon {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  color: var(--of-accent, var(--of-green-700));
  background: var(--of-accent-soft, var(--of-green-50));
  font-size: 20px;
  line-height: 1;
}

.of-tile-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--of-green-950);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.of-tile-desc {
  display: -webkit-box;
  margin: 0;
  max-width: none;
  overflow: hidden;
  color: var(--of-muted) !important;
  font-size: 12px !important;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.of-tile-foot {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--of-space-1);
  flex-wrap: wrap;
  align-items: center;
}

.of-tile-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--of-accent, var(--of-green-800)) !important;
  background: var(--of-accent-soft, var(--of-green-50));
  font-size: 11px !important;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.of-tile-tag.is-solid { color: #fff !important; background: var(--of-accent, var(--of-green-700)); }
.of-tile-count { margin-inline-start: auto; color: var(--of-muted) !important; font-size: 11px !important; font-weight: 700; }

/* Denser variant for large catalogues (product families, product walls). */
.of-tile-grid.is-compact { --of-tile-min: 132px; }
.of-tile-grid.is-compact .of-tile { min-height: 128px; padding: var(--of-space-3) !important; }
.of-tile-grid.is-compact .of-tile-icon { width: 34px; height: 34px; font-size: 17px; }

/* ---- Small shared primitives -------------------------------------------- */
.of-stack { display: flex; flex-direction: column; gap: var(--of-space-3); }
.of-row { display: flex; gap: var(--of-space-2); flex-wrap: wrap; align-items: center; }
.of-row.is-between { justify-content: space-between; }
.of-spacer { margin-inline-start: auto; }

.of-card {
  padding: var(--of-space-4);
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-lg);
  background: var(--of-surface);
  box-shadow: var(--of-shadow-sm);
}

.of-toolbar {
  display: flex;
  gap: var(--of-space-2);
  margin-bottom: var(--of-space-3);
  flex-wrap: wrap;
  align-items: center;
}
.of-toolbar > .of-grow { flex: 1 1 200px; min-width: 0; }

.of-notice {
  display: flex;
  gap: var(--of-space-2);
  padding: 10px var(--of-space-3);
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-sm);
  color: var(--of-text);
  background: var(--of-surface-soft);
  font-size: 13px;
}
.of-notice.is-info { border-color: #bcd6e8; background: #eef6fb; }
.of-notice.is-warn { border-color: #e6d09a; color: #6b4a04; background: #fdf6e6; }
.of-notice.is-error { border-color: #f0b6b1; color: var(--of-danger); background: #fff5f4; }
.of-notice.is-ok { border-color: #a9d5bb; color: #17623a; background: #eaf6ee; }

.of-empty, .of-loading, .of-error {
  padding: var(--of-space-5) var(--of-space-4);
  border: 1px dashed var(--of-border-strong);
  border-radius: var(--of-radius);
  color: var(--of-muted) !important;
  background: var(--of-surface-soft);
  font-size: 13px !important;
  text-align: center;
}
.of-error { border-style: solid; border-color: #f0b6b1; color: var(--of-danger) !important; background: #fff5f4; }

.of-skeleton {
  border-radius: var(--of-radius);
  background: linear-gradient(90deg, #eef2ef 25%, #e2e9e4 37%, #eef2ef 63%);
  background-size: 400% 100%;
  animation: of-skeleton 1.3s ease infinite;
}
@keyframes of-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.of-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--of-space-3); font-size: 13px; }
.of-kv dt { color: var(--of-muted); font-weight: 650; }
.of-kv dd { margin: 0; overflow-wrap: anywhere; }

.of-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--of-border);
  border-radius: 999px;
  background: var(--of-surface-soft);
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
}
.of-chip.is-ok { border-color: #a9d5bb; color: #17623a; background: #eaf6ee; }
.of-chip.is-warn { border-color: #e6d09a; color: #6b4a04; background: #fdf6e6; }
.of-chip.is-error { border-color: #f0b6b1; color: var(--of-danger); background: #fff5f4; }
.of-chip.is-muted { color: var(--of-muted); }

.of-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dialogs: one shape everywhere, full-height sheet on phones. */
.of-dialog {
  width: min(94vw, 640px);
  max-height: min(90dvh, 900px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-lg);
  color: var(--of-text);
  background: var(--of-surface);
  box-shadow: 0 24px 80px rgba(20, 43, 28, .22);
}
.of-dialog::backdrop { background: rgba(16, 31, 21, .45); backdrop-filter: blur(3px); }
.of-dialog-head { display: flex; gap: var(--of-space-3); align-items: flex-start; justify-content: space-between; padding: var(--of-space-4); border-bottom: 1px solid var(--of-border); }
.of-dialog-head h2 { margin: 0; font-size: 18px; }
.of-dialog-body { max-height: 62dvh; padding: var(--of-space-4); overflow: auto; }
.of-dialog-foot { display: flex; gap: var(--of-space-2); justify-content: flex-end; padding: var(--of-space-3) var(--of-space-4); border-top: 1px solid var(--of-border); background: var(--of-surface-soft); flex-wrap: wrap; }

.of-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--of-space-3); }
.of-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.of-form-grid .of-span-2 { grid-column: 1 / -1; }
.of-field-error { color: var(--of-danger); font-size: 12px !important; font-weight: 700; }
.of-form-grid :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--of-danger) !important; }

/* Responsive: two columns survive down to 320px, and nothing scrolls sideways. */
@media (max-width: 768px) {
  .of-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--of-tile-min)), 1fr)) !important;
  }
  .of-tile { min-height: 138px; padding: var(--of-space-3) !important; }
  .of-tile-icon { width: 34px; height: 34px; font-size: 17px; }
  .of-tile-title { font-size: 13.5px; }
  .of-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .of-tile-grid { --of-tile-min: 138px; gap: 10px !important; }
  .of-tile-grid.is-compact { --of-tile-min: 124px; }
}

@media (max-width: 360px) {
  .of-tile-grid { --of-tile-min: 124px; }
  .of-tile-grid.is-compact { --of-tile-min: 112px; }
  .of-tile { min-height: 130px; }
}

@media (max-width: 560px) {
  .of-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .of-dialog-body { flex: 1; max-height: none; }
  .of-dialog-foot > :where(button, .btn) { flex: 1 1 auto; }
}

/* ============================================================================
 * Module identity and professional shell
 * ---------------------------------------------------------------------------
 * Every module inherits the accent used by its dashboard tile. Colour is a
 * navigation cue only; labels and status text remain the source of meaning.
 * ==========================================================================*/

html[data-ofarm-module="order"], html[data-ofarm-module="approvals"] {
  --of-accent: #2f6f4f; --of-accent-soft: #e6f2ea; --of-accent-rgb: 47,111,79;
}
html[data-ofarm-module="people"], html[data-ofarm-module="documents"],
html[data-ofarm-module="contracts"] {
  --of-accent: #1f5f8b; --of-accent-soft: #e3eff7; --of-accent-rgb: 31,95,139;
}
html[data-ofarm-module="quick-customer"], html[data-ofarm-module="attendance"] {
  --of-accent: #8a5a12; --of-accent-soft: #f8efdf; --of-accent-rgb: 138,90,18;
}
html[data-ofarm-module="management"], html[data-ofarm-module="pricing"],
html[data-ofarm-module="crm"] {
  --of-accent: #7a3f8f; --of-accent-soft: #f2e9f6; --of-accent-rgb: 122,63,143;
}
html[data-ofarm-module="invoice"] {
  --of-accent: #a03d47; --of-accent-soft: #fae9ea; --of-accent-rgb: 160,61,71;
}
html[data-ofarm-module="customers"], html[data-ofarm-module="inventory"] {
  --of-accent: #12656b; --of-accent-soft: #ddf0f0; --of-accent-rgb: 18,101,107;
}
html[data-ofarm-module="remittance"] {
  --of-accent: #5b6320; --of-accent-soft: #eef2da; --of-accent-rgb: 91,99,32;
}
html[data-ofarm-module="accounting"], html[data-ofarm-module="planning"] {
  --of-accent: #364a8a; --of-accent-soft: #e7ebf8; --of-accent-rgb: 54,74,138;
}
html[data-ofarm-module="payroll"] {
  --of-accent: #8d4a20; --of-accent-soft: #f9ebe1; --of-accent-rgb: 141,74,32;
}
html[data-ofarm-module="access"], html[data-ofarm-module="drivers"] {
  --of-accent: #4a4f57; --of-accent-soft: #ebedf0; --of-accent-rgb: 74,79,87;
}
html[data-ofarm-module="products"] {
  --of-accent: #2c6b30; --of-accent-soft: #e5f3e6; --of-accent-rgb: 44,107,48;
}
html[data-ofarm-module="tenants"], html[data-ofarm-module="inbound"] {
  --of-accent: #7c4a6d; --of-accent-soft: #f6eaf3; --of-accent-rgb: 124,74,109;
}
html[data-ofarm-module="hub"], html[data-ofarm-module="core"] {
  --of-accent: var(--of-green-600); --of-accent-soft: var(--of-green-50); --of-accent-rgb: 63,112,71;
}

html[data-ofarm-module] {
  --primary: var(--of-accent);
  --primary-dark: var(--of-accent);
  --primary-soft: var(--of-accent-soft);
  --green: var(--of-accent);
  --green-dark: var(--of-accent);
  --of-ring: 0 0 0 3px rgba(var(--of-accent-rgb), .18);
  --of-focus: 0 0 0 3px rgba(var(--of-accent-rgb), .28);
}

/* A few older modules declare their palette again on `body`, which otherwise
 * shadows the identity inherited from `html`.  Bridge only their colour
 * tokens here; spacing, typography and semantic warning/error colours remain
 * owned by each module. */
html[data-ofarm-module] body {
  --primary: var(--of-accent) !important;
  --primary-dark: color-mix(in srgb, var(--of-accent) 84%, #111 16%) !important;
  --primary-soft: var(--of-accent-soft) !important;
  --green: var(--of-accent) !important;
  --green-dark: color-mix(in srgb, var(--of-accent) 84%, #111 16%) !important;
  --hv-primary: var(--of-accent) !important;
  --hv-primary-dark: color-mix(in srgb, var(--of-accent) 84%, #111 16%) !important;
  --hv-primary-light: var(--of-accent-soft) !important;
}

html[data-ofarm-module]:not([data-ofarm-module="hub"]) body {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--of-accent-rgb), .09), transparent 30rem),
    var(--of-bg) !important;
}

html[data-ofarm-module] ::selection { background: var(--of-accent); }
html[data-ofarm-module] :where(a:not(.ofb-brand):not(.ofb-home):not(.ofb-login):not(.ofb-logout)) {
  color: var(--of-accent);
}
html[data-ofarm-module] :where(input, select, textarea, button):focus-visible {
  outline-color: var(--of-accent) !important;
}
html[data-ofarm-module] :where(input, select, textarea):focus {
  border-color: var(--of-accent) !important;
  box-shadow: var(--of-ring) !important;
}

html[data-ofarm-module] #ofarm-userbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--of-accent);
}
html[data-ofarm-module] .ofarm-global-home .ofarm-home-mark,
html[data-ofarm-module] .of-tile-icon {
  color: var(--of-accent);
  background: var(--of-accent-soft);
}

html[data-ofarm-module] :where(
  .app-header, .wizard-header, .page-header, .topbar, .top-bar, .header,
  .rq-header, .db-toolbar, .hero, .hero-card
) {
  border-block-start: 3px solid var(--of-accent) !important;
}

html[data-ofarm-module] :where(
  .btn-primary, .btn.primary, .primary-btn, button.primary, .save-btn,
  .submit-btn, .action-primary, .of-btn.is-primary
) {
  border-color: var(--of-accent) !important;
  color: #fff !important;
  background: var(--of-accent) !important;
  box-shadow: 0 5px 14px rgba(var(--of-accent-rgb), .16) !important;
}
html[data-ofarm-module] :where(
  .btn-primary, .btn.primary, .primary-btn, button.primary, .save-btn,
  .submit-btn, .action-primary, .of-btn.is-primary
):hover {
  filter: brightness(.92);
  transform: translateY(-1px);
}

html[data-ofarm-module] :where(
  .tab.active, .tabs .active, [role="tab"][aria-selected="true"],
  .nav-link.active, .step.active, .filter-chip.active
) {
  border-color: var(--of-accent) !important;
  color: var(--of-accent) !important;
  background: var(--of-accent-soft) !important;
}

/* Compact selectors and segmented controls are actions rather than tabs.  A
 * selected action uses the solid module colour, including legacy controls
 * whose page stylesheet still contains the old global green. */
html[data-ofarm-module] :where(
  .segment.active, .seg-btn.active, .secondary-btn.active,
  .transport-tab-btn.active, [data-transport-tab].active,
  .pdp-day.is-active, .step-dot.active
) {
  border-color: var(--of-accent) !important;
  color: #fff !important;
  background: var(--of-accent) !important;
  box-shadow: 0 5px 14px rgba(var(--of-accent-rgb), .18) !important;
}

/* Choice cards need a quieter selected state so their content stays easy to
 * scan; the border and focus ring are enough to communicate selection. */
html[data-ofarm-module] :where(
  .choice-card.active, .mode-card.active, .issue-mode-card.active,
  .issue-mode-card.is-active, .option-card.active, .radio-card.active
) {
  border-color: var(--of-accent) !important;
  color: var(--of-accent) !important;
  background: var(--of-accent-soft) !important;
  box-shadow: var(--of-ring) !important;
}

html[data-ofarm-module] :where(table thead th, .table-head, .grid-header) {
  border-color: rgba(var(--of-accent-rgb), .16) !important;
  color: var(--of-accent) !important;
  background: var(--of-accent-soft) !important;
}

html[data-ofarm-module] :where(
  .panel, .card, .section-card, .wizard-panel, .workspace, .content-card,
  .search-card, .status-card, .summary-card, .stat-card
) {
  border-color: color-mix(in srgb, var(--of-border) 82%, var(--of-accent) 18%) !important;
  box-shadow: 0 6px 22px rgba(20, 43, 28, .055) !important;
}

html[data-ofarm-module] .of-tile-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-ofarm-module] :where(.module-icon, .quick-icon, .summary-icon) svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-ofarm-module] :where(.module-icon, .quick-icon, .summary-icon) {
  color: var(--of-accent) !important;
  background: var(--of-accent-soft) !important;
}
.ofarm-redundant-home[hidden] { display: none !important; }

/* Legacy pages used colourful emoji as interface chrome.  The shared runtime
 * replaces only those decorative glyphs with these neutral line icons; status
 * marks such as approve/deny stay untouched because they carry meaning. */
.ofarm-inline-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  margin-inline-end: .42em;
  overflow: visible;
  vertical-align: -.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-ofarm-glyph="line"] {
  color: var(--of-accent, currentColor);
}
:where(.logo, .pc-icon, #projIcon, .modal-search-icon, .cm-addr-icon, .emh-icon,
       .dm-photo-drop-icon, .cvm-photo-drop-icon, .snapshot-sig-icon)[data-ofarm-glyph="line"] .ofarm-inline-icon {
  width: 1.35em;
  height: 1.35em;
  margin-inline-end: 0;
}
:where(button, .btn, .dm-panel-title, .lr-sub, .chip-mini)[data-ofarm-glyph="line"] {
  display: inline-flex;
  gap: .42em;
  align-items: center;
}
:where(button, .btn, .dm-panel-title, .lr-sub, .chip-mini)[data-ofarm-glyph="line"] .ofarm-inline-icon {
  margin-inline-end: 0;
}

html[data-ofarm-module="hub"] .of-tile {
  min-height: 158px;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(20, 43, 28, .055) !important;
}
html[data-ofarm-module="hub"] .of-tile.core {
  background: var(--of-surface) !important;
}
html[data-ofarm-module="hub"] .of-tile-title { font-size: 15px; }
html[data-ofarm-module="hub"] .of-tile-desc { line-height: 1.75; }

@media (max-width: 600px) {
  html[data-ofarm-module="hub"] .of-tile { min-height: 142px; }
  html[data-ofarm-module] :where(.app-header, .wizard-header, .page-header, .topbar, .top-bar, .header) {
    border-block-start-width: 2px !important;
  }
}

/* Quiet product provenance: visible enough for support/version checks without
 * competing with the page hierarchy or appearing on printed documents. */
.ofarm-build-signature {
  position: fixed;
  z-index: 120;
  inset-inline: 12px;
  bottom: max(5px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0;
  color: #385043;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0;
  opacity: .44;
  pointer-events: none;
  user-select: none;
  text-align: center;
  text-wrap: balance;
  transition: opacity .18s ease;
}
.ofarm-build-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ofarm-build-credit { font-size: .92em; }
.ofarm-build-signature b { font-weight: 650; }
.ofarm-build-product { font-weight: 800; letter-spacing: .02em; }
.ofarm-build-separator { opacity: .56; }
@media (max-width: 480px) {
  .ofarm-build-signature {
    inset-inline: 8px;
    font-size: 9px;
  }
  .ofarm-build-meta { gap: 4px; }
}
@media print {
  .ofarm-build-signature { display: none !important; }
}

/* Mobile operational lists: one readable labelled card per row.  Data-entry
 * grids and calculation matrices intentionally keep their horizontal layout. */
.of-mobile-pager { display: none; }
.of-table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 10px;
  border: 1px solid rgba(63, 112, 71, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}
.of-table-pager span { color: #536457; font-size: 13px; font-weight: 800; }
.of-table-pager button:disabled { opacity: .45; cursor: default; transform: none; }
@media (max-width: 480px) {
  .of-table-pager { justify-content: space-between; gap: 7px; padding: 8px; }
  .of-table-pager button { min-height: 40px; padding-inline: 10px; }
  .of-table-pager span { font-size: 11px; text-align: center; }
}
@media (max-width: 680px) {
  :where(.of-table-scroll, .table-scroll):has(> table.of-mobile-cards) {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  table.of-mobile-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    border: 0 !important;
    background: transparent !important;
  }
  table.of-mobile-cards thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  table.of-mobile-cards tbody,
  table.of-mobile-cards tr,
  table.of-mobile-cards td { display: block !important; width: 100% !important; }
  table.of-mobile-cards tbody {
    display: grid !important;
    gap: 10px !important;
  }
  table.of-mobile-cards tbody tr {
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--of-accent-1, #3f7047) 20%, #dfe7e1) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(27, 55, 35, .045) !important;
  }
  table.of-mobile-cards tbody td {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1ed !important;
    text-align: start !important;
    overflow-wrap: anywhere !important;
  }
  table.of-mobile-cards tbody td:last-child { border-bottom: 0 !important; }
  table.of-mobile-cards tbody td[data-label] {
    display: grid !important;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }
  table.of-mobile-cards tbody td[data-label]::before {
    content: attr(data-label);
    color: #66766b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.6;
  }
  table.of-mobile-cards tbody td[colspan] {
    display: block !important;
    text-align: center !important;
    padding-block: 22px !important;
  }
  table.of-mobile-cards tbody tr.of-mobile-page-hidden { display: none !important; }
  .of-mobile-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid #dfe7e1;
    border-radius: 12px;
    background: #fff;
  }
  .of-mobile-pager button {
    min-width: 82px;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--of-accent-1, #3f7047) 42%, #dfe7e1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--of-accent-1, #3f7047) 8%, #fff);
    color: var(--of-accent-2, #24482e);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }
  .of-mobile-pager button:disabled { opacity: .42; cursor: default; }
  .of-mobile-pager span { color: #5f6f63; font-size: 12px; font-weight: 700; }
}

@media print {
  html[data-ofarm-module] body { background: #fff !important; }
  html[data-ofarm-module] :where(.panel, .card, .section-card, .wizard-panel, .workspace) {
    box-shadow: none !important;
  }
}

@media (min-width: 1024px) {
  .of-tile-grid { --of-tile-min: 168px; gap: var(--of-space-4) !important; }
  .of-tile-grid.is-compact { --of-tile-min: 150px; }
}

@media (pointer: coarse) {
  .of-tile { min-height: 144px; }
}

/* ============================================================================
 * Cross-module normalisation
 * ---------------------------------------------------------------------------
 * The class names below are the ones the modules genuinely share (counted
 * across every first-party page), not invented ones. Each module keeps its own
 * markup and behaviour; only the skin — border, radius, surface, shadow,
 * spacing rhythm — is unified, so dialogs, empty states and toolbars stop
 * looking like they came from different products.
 *
 * Layout properties are deliberately left alone: a module's own rule must
 * always win over this file for anything positional.
 * ==========================================================================*/

/* Dialogs. `.modal-box` is the dominant surface name in the suite and had no
 * shared shape at all before, which is why every module's modal looked
 * different. */
:where(.modal-box, .entity-modal, .sheet, .modal-panel) {
  max-width: min(94vw, 760px);
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  background: var(--of-surface) !important;
  box-shadow: 0 24px 80px rgba(20, 43, 28, .2) !important;
}

:where(.modal-head, .entity-modal-header, .section-head) {
  border-color: var(--of-border) !important;
}

:where(.modal-head, .entity-modal-header) h2,
:where(.modal-head, .entity-modal-header) h3 {
  color: var(--of-green-950) !important;
}

:where(.modal-actions, .entity-modal-footer, .wizard-actions, .form-actions, .dialog-actions) {
  display: flex;
  gap: var(--of-space-2);
  flex-wrap: wrap;
  align-items: center;
}

:where(.entity-modal-backdrop, .modal-backdrop) {
  background: rgba(16, 31, 21, .45) !important;
  backdrop-filter: blur(3px);
}

/* Native <dialog> gets the same shape as the shared `.of-dialog`, so a module
 * can move to the platform element without redesigning anything. */
dialog:where(:not(.of-dialog)) {
  max-width: min(94vw, 760px);
  max-height: min(90dvh, 900px);
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-lg);
  color: var(--of-text);
  background: var(--of-surface);
  box-shadow: 0 24px 80px rgba(20, 43, 28, .2);
}
dialog:where(:not(.of-dialog))::backdrop { background: rgba(16, 31, 21, .45); }

/* Empty / loading / error blocks: one shape in all eight modules that use them. */
:where(.empty, .rq-empty, .db-empty, .detail-empty, .pdp-empty, .documents-empty,
       .db-audit-empty, .layout-inspector-empty, .doc-serial-empty) {
  padding: var(--of-space-5) var(--of-space-4);
  border-radius: var(--of-radius);
  color: var(--of-muted) !important;
  background: var(--of-surface-soft);
  text-align: center;
}

:where(.detail-loading, .digital-loading, .recent-loading, .havale-snapshot-loading,
       .recent-placeholder) {
  color: var(--of-muted) !important;
}

:where(.db-error, .login-error, .field-error, .form-error) {
  color: var(--of-danger) !important;
}

/* Cards and search/status panels that the shared card rule did not reach. */
:where(.search-card, .status-card, .stat-row, .queue-stats, .summary-info,
       .doc-selected-summary, .hero-card, .info-card) {
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  background: var(--of-surface) !important;
  box-shadow: var(--of-shadow-sm) !important;
}

/* Toolbars and search rows: same rhythm and the same wrapping behaviour. */
:where(.toolbar, .hesab-toolbar, .toolbar-grid, .search-shell, .head-actions,
       .table-actions, .hero-actions) {
  gap: var(--of-space-2);
}

:where(.search, .modal-search-input, .cdd-search) {
  min-height: 42px;
}

/* Status pills reuse the shared semantic colours instead of per-module ones. */
:where(.status-chip, .status-pill, .c-status, .rq-tag) {
  border-radius: 999px !important;
  font-weight: 700;
}

/* Phones: every dialog surface in the suite becomes a full-height sheet, which
 * is the single biggest source of "this module feels different" on mobile. */
@media (max-width: 560px) {
  :where(.modal-box, .entity-modal, .sheet, .modal-panel) {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }
  dialog:where(:not(.of-dialog)) {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  :where(.modal-actions, .entity-modal-footer, .wizard-actions, .dialog-actions) > :where(button, .btn, a) {
    flex: 1 1 auto;
  }
}