/* JNAT global typography standard — keep this stylesheet last on every surface. */
:root {
    /* Semantic scale: use these roles instead of introducing new pixel values. */
    --jnat-font-caption: 12px;
    --jnat-font-small: 13px;
    --jnat-font-body: 14px;
    --jnat-font-body-lg: 16px;
    --jnat-font-heading-sm: 18px;
    --jnat-font-heading-md: 24px;
    --jnat-font-page-title: clamp(28px, 2.6vw, 38px);

    /* Backward-compatible aliases for existing feature styles. */
    --jnat-readable-xs: var(--jnat-font-caption);
    --jnat-readable-sm: var(--jnat-font-small);
    --jnat-readable-md: var(--jnat-font-body);
    --jnat-readable-lg: var(--jnat-font-body-lg);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--jnat-font-body); line-height: 1.5; }

/* Shared controls must remain readable even inside compact feature workspaces. */
:is(button, input, select, textarea) {
    font: inherit;
    line-height: 1.4;
}

:is(.module-shell, .app-shell, .login-shell, .site-shell) :is(button, input, select, textarea) {
    font-size: var(--jnat-font-body) !important;
}

:is(.module-shell, .app-shell) :is(p, li, dd, dt) {
    font-size: var(--jnat-font-small);
}

:is(.module-shell, .app-shell) small {
    font-size: var(--jnat-font-caption) !important;
}

:is(.module-content, .app-shell main) article strong {
    font-size: max(var(--jnat-font-body), 1em);
    line-height: 1.4;
}

:is(.module-content, .app-shell main) article small {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.45;
}

:is(.module-content, .app-shell main) span:not(
    .compact-icon,
    .insight-symbol,
    .feature-module-icon,
    .modal-module-icon,
    .feature-marker
) {
    font-size: max(var(--jnat-font-caption), 1em) !important;
}

:is(.module-content, .app-shell main) :is(strong, b, em) {
    font-size: max(var(--jnat-font-small), 1em);
}

:is(.module-content, .app-shell main) a {
    font-size: max(var(--jnat-font-small), 1em);
    line-height: 1.4;
}

:is(.module-content, .app-shell main) table {
    font-size: var(--jnat-font-small) !important;
}

:is(.module-content, .app-shell main) th {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.4;
}

:is(.module-content, .app-shell main) td {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.5;
}

:is(.module-shell, .app-shell) :is(h2, .panel-heading h2, .data-panel-heading h2) {
    font-size: var(--jnat-font-heading-sm);
}

.module-shell .module-heading h1,
.app-shell .page-heading h1 {
    font-size: var(--jnat-font-page-title);
}

/* Module shell and every feature page */
.module-shell { --feature-sidebar: 326px; }
.module-shell .feature-brand strong { font-size: 15px !important; }
.module-shell .module-back-button b { font-size: var(--jnat-font-caption) !important; }
.module-shell .feature-module-icon,
.module-shell .module-sidebar-profile > span:first-child,
.module-shell .module-user > span:first-child {
    font-size: var(--jnat-font-caption) !important;
}
.module-shell .feature-brand small,
.module-shell .feature-context p,
.module-shell .feature-context > span,
.module-shell .module-sidebar-profile strong,
.module-shell .module-sidebar-profile small { font-size: var(--jnat-readable-xs) !important; line-height: 1.45; }
.module-shell .feature-nav section > p { font-size: var(--jnat-font-caption) !important; letter-spacing: 1.4px; }
.module-shell .feature-nav a { min-height: 48px; font-size: var(--jnat-readable-sm) !important; line-height: 1.4; }
.module-shell .topbar-path,
.module-shell .top-search,
.module-shell .module-user strong,
.module-shell .module-user small,
.module-shell .user-menu a,
.module-shell .user-menu button { font-size: var(--jnat-readable-xs) !important; }
.module-shell .module-eyebrow,
.module-shell .data-kicker { font-size: var(--jnat-font-caption) !important; }
.module-shell .module-heading > div:first-child > p:last-child { font-size: var(--jnat-readable-md) !important; }
.module-shell .primary-action,
.module-shell .secondary-action { font-size: var(--jnat-font-body) !important; }
.module-shell small { font-size: var(--jnat-readable-xs) !important; line-height: 1.45; }
.module-shell p { font-size: var(--jnat-readable-sm); line-height: 1.5; }
.module-shell .module-kpis header > span { font-size: var(--jnat-readable-sm) !important; }
.module-shell .module-kpis small,
.module-shell .metric-live { font-size: var(--jnat-readable-xs) !important; }
.module-shell .data-panel-heading p,
.module-shell .record-search input,
.module-shell .record-search button,
.module-shell .data-toolbar button { font-size: var(--jnat-readable-xs) !important; }
.module-shell .module-table-wrap table { font-size: var(--jnat-readable-sm) !important; }
.module-shell .module-table-wrap th { font-size: var(--jnat-font-caption) !important; letter-spacing: .08em; }
.module-shell .module-table-wrap td { font-size: var(--jnat-readable-sm) !important; line-height: 1.5; }
.module-shell .table-status,
.module-shell .data-panel-footer,
.module-shell .data-panel-footer button,
.module-shell .data-panel-footer b { font-size: var(--jnat-readable-xs) !important; }
.module-shell .module-insights strong { font-size: var(--jnat-readable-sm) !important; }
.module-shell .module-insights p,
.module-shell .module-insights i,
.module-shell .module-footer { font-size: var(--jnat-readable-xs) !important; }

/*
 * Feature dialogs are rendered beside the module shell. Match their dialog
 * panels at the document root so every dedicated workspace shares this floor.
 */
:is([class$="-modal"], [class*="-modal "], .record-modal) > section :is(
    button, input, select, textarea
) {
    font-size: var(--jnat-font-body) !important;
    line-height: 1.4;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section > header > button,
:is([class$="-modal"], [class*="-modal "], .record-modal) > section > form > header > button {
    font-size: 20px !important;
    line-height: 1;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section :is(
    p, label, li, a
) {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.5;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section small,
:is([class$="-modal"], [class*="-modal "], .record-modal) > section > :is(header, form > header) span {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.45;
}

.record-modal .record-modal-content > div span {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.45;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section :is(h3, legend) {
    font-size: var(--jnat-font-body-lg);
    line-height: 1.35;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section :is(
    label > span, nav button, th
) {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.4;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section td {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.5;
}

/* Inventory action chooser and compact dashboard actions */
.inventory-action-groups h3 {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.4;
}

.inventory-action-groups a {
    min-height: 70px;
    padding: 14px 16px;
}

.inventory-action-groups strong,
.module-shell .inventory-quick-actions strong {
    font-size: var(--jnat-font-body) !important;
    line-height: 1.4;
}

.inventory-action-groups small,
.module-shell .inventory-quick-actions small {
    margin-top: 4px;
    font-size: var(--jnat-font-small) !important;
    line-height: 1.45;
}

.inventory-action-groups a > i {
    font-size: var(--jnat-font-caption) !important;
}

.module-shell :is(.warehouse-bars b, .movement-list strong, .category-value-grid b) {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.4;
}

.module-shell .crm-source-list b,
.module-shell output {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.4;
}

/* Meaningful compact identifiers; decorative arrows and keyboard hints stay compact. */
.module-shell :is(
    .inventory-quick-actions i,
    .crm-quick-actions i,
    .crm-command-icon,
    .crm-avatar,
    .customer-code,
    .team-avatar,
    .crm-count,
    .crm-activity-widget i,
    .compact-icon,
    .insight-symbol,
    .channel-grid i
) {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1;
}

.module-shell :is(
    .barcode-kpis,
    .warehouse-kpis,
    .transfer-kpis,
    .contact-kpis,
    .customer-kpis,
    .fu-kpis,
    .pipe-kpis,
    .analytics-kpis
) header i {
    font-size: 11px !important;
    line-height: 1;
}

:is([class$="-modal"], [class*="-modal "], .record-modal) > section [class*="form-body"] section > header > span {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1;
}

/* Enterprise Inventory, CRM, Lead, Product, and Customer workspaces */
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) p,
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) em { font-size: var(--jnat-font-small) !important; line-height: 1.5; }
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) small { font-size: var(--jnat-font-caption) !important; line-height: 1.45; }
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) a { font-size: var(--jnat-font-small) !important; }
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) button,
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) input,
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) select,
.module-shell :is(.inventory-widget,.crm-widget,.lead-workbench,.customer-workbench,.product-workbench) textarea { font-size: var(--jnat-font-body) !important; }
.module-shell :is(.lead-table,.customer-table,.product-table) td { font-size: var(--jnat-readable-sm) !important; line-height: 1.45; }
.module-shell :is(.lead-table,.customer-table,.product-table) th { font-size: var(--jnat-font-caption) !important; }
.module-shell :is(.lead-table,.customer-table,.product-table) strong { font-size: var(--jnat-readable-sm) !important; }
.module-shell :is(.lead-table,.customer-table,.product-table) small,
.module-shell :is(.lead-table,.customer-table,.product-table) em { font-size: var(--jnat-readable-xs) !important; }
.module-shell :is(.lead-stage,.lead-health,.customer-health,.table-status) { font-size: var(--jnat-readable-xs) !important; }
.module-shell :is(.lead-filters,.customer-filters,.product-filters) label > span,
.module-shell :is(.lead-form-grid,.customer-form-grid,.product-form-grid) label > span { font-size: var(--jnat-font-small) !important; }
.module-shell :is(.lead-filters,.customer-filters,.product-filters) input,
.module-shell :is(.lead-filters,.customer-filters,.product-filters) select,
.module-shell :is(.lead-form-grid,.customer-form-grid,.product-form-grid) input,
.module-shell :is(.lead-form-grid,.customer-form-grid,.product-form-grid) select,
.module-shell :is(.lead-form-grid,.customer-form-grid,.product-form-grid) textarea { font-size: var(--jnat-font-body) !important; }
.module-shell :is(.lead-workbench-heading,.customer-workbench-heading,.product-workbench-heading) p { font-size: var(--jnat-font-small) !important; }
.module-shell :is(.lead-bottom-grid,.customer-bottom-grid,.product-bottom-grid) strong { font-size: var(--jnat-readable-sm) !important; }
.module-shell :is(.lead-bottom-grid,.customer-bottom-grid,.product-bottom-grid) small { font-size: var(--jnat-readable-xs) !important; }
.module-shell :is(.lead-command-strip,.customer-command-strip,.crm-command-strip) strong { font-size: var(--jnat-readable-sm) !important; }
.module-shell :is(.lead-command-strip,.customer-command-strip,.crm-command-strip) small,
.module-shell :is(.lead-command-strip,.customer-command-strip,.crm-command-strip) p { font-size: var(--jnat-font-small) !important; }
.module-shell :is(.lead-command-strip,.customer-command-strip,.crm-command-strip) a { font-size: var(--jnat-font-small) !important; }
.module-shell .crm-command-metrics span,
.module-shell .crm-command-metrics b,
.module-shell .crm-command-icon,
.module-shell .inventory-alert-strip,
.module-shell .alert-summary,
.module-shell .movement-day > span,
.module-shell .receiving-status,
.module-shell .category-rank,
.module-shell .widget-count { font-size: var(--jnat-readable-xs) !important; }
.module-shell :is(.lead-modal,.customer-modal,.product-modal) p,
.module-shell :is(.lead-modal,.customer-modal,.product-modal) label > span { font-size: var(--jnat-font-small) !important; }
.module-shell :is(.lead-modal,.customer-modal,.product-modal) small { font-size: var(--jnat-font-caption) !important; }
.module-shell :is(.lead-modal,.customer-modal,.product-modal) button { font-size: var(--jnat-font-body) !important; }
.module-shell :is(.lead-modal,.customer-modal,.product-modal) input,
.module-shell :is(.lead-modal,.customer-modal,.product-modal) select,
.module-shell :is(.lead-modal,.customer-modal,.product-modal) textarea { font-size: var(--jnat-font-body) !important; }

/* Dedicated feature workspaces share the same readable floor. */
.module-shell :is(
    .barcode-register, .warehouse-register, .transfer-register,
    .operations-register, .pipe-workbench, .pos-register,
    .hris-workspace, .reports-register, .reports-modal,
    .chatbot-workspace, .generic-crud-modal
) :is(p, a, label, button, input, select, textarea, td) {
    font-size: var(--jnat-font-small) !important;
    line-height: 1.5;
}

.module-shell :is(
    .barcode-register, .warehouse-register, .transfer-register,
    .operations-register, .pipe-workbench, .pos-register,
    .hris-workspace, .reports-register, .reports-modal,
    .chatbot-workspace, .generic-crud-modal
) small {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.45;
}

.module-shell :is(
    .barcode-register, .warehouse-register, .transfer-register,
    .operations-register, .pipe-workbench, .pos-register,
    .hris-workspace, .reports-register, .reports-modal,
    .chatbot-workspace, .generic-crud-modal
) th {
    font-size: var(--jnat-font-caption) !important;
    line-height: 1.4;
}

.module-shell :is(
    .barcode-register, .warehouse-register, .transfer-register,
    .operations-register, .pipe-workbench, .pos-register,
    .hris-workspace, .reports-register, .reports-modal,
    .chatbot-workspace, .generic-crud-modal
) :is(input, select, textarea, button) {
    min-height: 40px;
    font-size: var(--jnat-font-body) !important;
}

/* Executive dashboard */
.app-shell { --sidebar-width: 326px; }
.app-shell .workspace-copy strong { font-size: var(--jnat-readable-md) !important; }
.app-shell .workspace-copy small,
.app-shell .profile-copy strong,
.app-shell .profile-copy small { font-size: var(--jnat-readable-xs) !important; line-height: 1.45; }
.app-shell .nav-section-label { font-size: var(--jnat-font-caption) !important; letter-spacing: 1.5px; }
.app-shell .nav-link { min-height: 48px; font-size: var(--jnat-readable-md) !important; }
.app-shell .breadcrumb,
.app-shell .global-search,
.app-shell .topbar-user strong,
.app-shell .topbar-user small { font-size: var(--jnat-readable-xs) !important; }
.app-shell main p { font-size: var(--jnat-readable-sm); line-height: 1.5; }
.app-shell main small { font-size: var(--jnat-readable-xs); line-height: 1.5; }
.app-shell main button,
.app-shell main input,
.app-shell main select,
.app-shell main textarea,
.app-shell main a { font-size: var(--jnat-readable-sm); }
.app-shell main table { font-size: var(--jnat-readable-sm) !important; }
.app-shell main th { font-size: var(--jnat-font-caption) !important; }
.app-shell main td { font-size: var(--jnat-readable-sm) !important; line-height: 1.5; }
.app-shell :is(.eyebrow,.panel-kicker,.kpi-label,.kpi-foot,.target-copy,.order-pills,.chart-legend,.chart-summary span,.pipeline-list>div,.inventory-overview,.stock-health span,.attendance-list>div,.activity-item p,.activity-value,.approval-list,.dashboard-footer,.command-content,.command-palette footer) { font-size: var(--jnat-readable-xs) !important; line-height: 1.45; }
.app-shell :is(.period-control span,.period-control select,.button,.quick-menu a,.text-button,.filter-button,.view-all-button,.dropdown-heading button,.dropdown-footer,.notification-empty) { font-size: var(--jnat-readable-xs) !important; }
.app-shell :is(.product-cell strong,.activity-item strong,.approval-list strong,.command-content strong,.notification-menu a strong) { font-size: var(--jnat-readable-sm) !important; }
.app-shell :is(.product-cell small,.activity-item small,.approval-list small,.command-content small,.notification-menu a small,.donut-chart small,.attendance-ring small,.attendance-metrics small) { font-size: var(--jnat-readable-xs) !important; }
.app-shell :is(.status-pill,td>button,.hr-note p,.hr-note a,.approval-list button) { font-size: var(--jnat-readable-xs) !important; }

/* Authentication */
.login-shell p,
.login-shell small,
.login-shell footer,
.login-shell .system-capabilities span,
.login-shell .login-options,
.login-shell .login-help { font-size: var(--jnat-readable-sm) !important; line-height: 1.55; }
.login-shell label > span,
.login-shell input,
.login-shell button { font-size: var(--jnat-readable-md) !important; }

/* Public pages: preserve display type while raising supporting copy. */
:is(.site-header, main#home, .solution-page-main, .survey-modal) :is(
    p, li, a, label, small, button, input, select, textarea
) {
    font-size: max(var(--jnat-font-small), 1em);
    line-height: 1.5;
}

:is(.site-header, main#home, .solution-page-main, .survey-modal) small {
    font-size: var(--jnat-font-caption);
}

:is(.site-header, main#home, .solution-page-main, .survey-modal) span {
    font-size: max(var(--jnat-font-caption), 1em);
}

@media (max-width: 760px) {
    .module-shell { --feature-sidebar: min(92vw, 326px); }
    .module-shell .feature-nav a { font-size: var(--jnat-readable-md) !important; }
    .module-shell .module-content { padding-inline: 16px; }
    .module-shell .module-topbar { gap: 8px; padding-inline: 8px; }
    .module-shell .topbar-path { flex: 1 1 auto; }
    .module-shell .topbar-path strong { max-width: clamp(130px, 38vw, 220px); }
    .module-shell .module-top-actions { flex: 0 0 auto; gap: 4px; }

    .module-shell .stock-register-panel {
        max-width: 100%;
        overflow: hidden;
    }

    .module-shell .stock-register-panel .module-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }

    .app-shell { --sidebar-width: min(92vw, 326px); }

    :is(.module-shell, .app-shell) :is(button, input, select, textarea) {
        font-size: var(--jnat-font-body) !important;
    }
}

@media (max-width: 480px) {
    body { min-width: 0; }
    .module-shell { width: var(--jnat-mobile-visual-width, 100%); max-width: 100%; }
    .module-shell .module-stage,
    .module-shell .module-topbar,
    .module-shell .module-content { width: 100%; }
    .module-shell .topbar-path { display: flex; flex: 0 0 auto; }
    .module-shell .topbar-path > span,
    .module-shell .topbar-path > b,
    .module-shell .topbar-path > a,
    .module-shell .topbar-path > strong { display: none; }
    .module-shell .module-menu-button,
    .module-shell .top-search,
    .module-shell .top-icon { width: 40px; min-width: 40px; height: 40px; }
    .module-shell .module-user { min-width: 40px; height: 40px; padding: 0; }
    .module-shell .module-user > span:first-child { width: 40px; height: 40px; }
    .module-shell .module-topbar { justify-content: space-between; }
    .module-shell .module-top-actions { width: auto; min-width: 0; margin-left: auto; }
    .module-shell .top-search { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
    .module-shell .top-search span,
    .module-shell .top-search kbd { display: none; }
    .module-shell .user-menu { right: 0; width: min(240px, calc(100vw - 16px)); }
    .module-shell .module-content { max-width: 100%; overflow-x: hidden; }
    .module-shell .module-heading > div:first-child,
    .module-shell .module-heading-actions { min-width: 0; max-width: 100%; }
    .module-shell .module-heading p { overflow-wrap: anywhere; }
    .module-shell .hris-modal,
    .module-shell .user-modal,
    .module-shell .record-modal { width: var(--jnat-mobile-visual-width, 100%); max-width: 100%; right: auto; }
}