/* Comfortable reading sizes, with room for the dashboard's real values. */
.reference-layout .app-shell { --sc-sidebar: 244px; font-size: 14px; line-height: 1.5; }
.reference-layout .app-shell .sidebar { width: var(--sc-sidebar); padding: 20px 12px 12px; }
/* Keep support and account identity outside the navigation's scroll area. */
.reference-layout .app-shell .sidebar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; }
.reference-layout .app-shell .sidebar > .brand { min-width: 0; }
.reference-layout .app-shell .sidebar > .side-nav { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.reference-layout .app-shell .sidebar > .sidebar-bottom { min-width: 0; margin-top: 0; flex-shrink: 0; }
.reference-layout .app-shell .main-content { margin-left: var(--sc-sidebar); }
.reference-layout .app-shell .nav-item { min-height: 40px; height: auto; padding: 9px 12px; font-size: 14px; line-height: 1.4; border-radius: 6px; }
.reference-layout .app-shell .nav-label { margin-top: 18px; margin-bottom: 8px; color: #bcaeb8; font-size: 11px; font-weight: 600; }
.reference-layout .app-shell .nav-icon, .reference-layout .app-shell .nav-icon svg { width: 17px; height: 17px; }
.reference-layout .app-shell .brand-copy small { font-size: 9px; letter-spacing: 1px; }
.reference-layout .app-shell .profile-copy strong, .reference-layout .app-shell .reference-support strong { font-size: 13px; }
.reference-layout .app-shell .profile-copy small, .reference-layout .app-shell .reference-support small { font-size: 11px; line-height: 1.5; }
.reference-layout .app-shell .reference-support { width: 100%; border: 0; background: transparent; text-align: left; border-radius: 6px; }
.reference-layout .app-shell .reference-support strong { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .6px; }
.reference-layout .app-shell .reference-support:hover strong { color: #ffb8c7; }
.reference-layout .app-shell .topbar { min-height: 66px; height: auto; }
.reference-layout .app-shell .breadcrumbs strong { color: #384252; font-size: 14px; }
.reference-layout .app-shell .sc-global-search { height: 38px; }
.reference-layout .app-shell .sc-global-search > input { font-size: 14px; }
.reference-layout .app-shell .demo-pill { height: auto; min-height: 30px; padding: 5px 9px; font-size: 11px; }
.reference-layout .app-shell .page-wrap { padding: 24px; }
.reference-layout .app-shell .page-heading h1 { font-size: 22px; }
.reference-layout .app-shell .button, .reference-layout .app-shell .select-button { min-height: 38px; height: auto; padding: 8px 12px; font-size: 13px; }
.reference-layout .app-shell .demo-notice { gap: 9px; padding: 12px; color: #725b69; font-size: 13px; line-height: 1.6; flex-wrap: wrap; }
.reference-layout .app-shell .demo-notice > span:not(.notice-icon) { flex: 1; min-width: 180px; }
.reference-layout .app-shell .demo-notice .sc-demo-return { font-size: 12px; }
.reference-layout .app-shell .sc-period-heading > strong, .reference-layout:is([data-view="overview"], [data-view="finance"]) .app-shell .sc-period-actions::before { font-size: 12px; }
.reference-layout .app-shell .sc-period-custom > summary, .reference-layout .app-shell .sc-period-actions > select.sc-period-preset { min-height: 38px; height: auto; font-size: 13px; padding: 8px 10px; }
.reference-layout .ref-section { margin-bottom: 22px; }
.reference-layout .ref-section-title { gap: 12px; margin-bottom: 12px; color: #6d5866; font-size: 13px; }
.reference-layout .ref-section-title > .ref-inline-note { color: #746875; font-size: 12px; line-height: 1.5; }
.reference-layout .ref-finance-grid, .reference-layout .ref-commercial-grid, .reference-layout .ref-order-grid { gap: 14px; }
.reference-layout .ref-card { min-width: 0; min-height: 218px; padding: 18px; }
.reference-layout .ref-kpi-label, .reference-layout .ref-order-grid .ref-operation-card .ref-kpi-label { align-items: flex-start; color: #665f6a; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .3px; }
.reference-layout .ref-kpi-symbol { width: 23px; height: 23px; font-size: 13px; border-radius: 6px; }
.reference-layout .ref-kpi-value { margin-top: 9px; margin-bottom: 5px; color: #273547; font-size: 28px; line-height: 1.25; letter-spacing: -.7px; }
.reference-layout .ref-finance-grid .ref-card .ref-kpi-value.ref-money-wide { font-size: 20px; white-space: normal; overflow-wrap: anywhere; }
.reference-layout .ref-kpi-note, .reference-layout .ref-commercial-grid .ref-kpi-note, .reference-layout .ref-operation-card .ref-metric-meta { color: #756d7a; font-size: 13px; line-height: 1.55; }
.reference-layout .ref-kpi-chart { min-height: 100px; margin-top: 14px; }
.reference-layout .ref-kpi-chart > svg { height: 90px; }
.reference-layout .ref-kpi-chart text { fill: #706774; font-size: 13px; }
.reference-layout .ref-finance-grid .ref-kpi-chart > .ref-ring { width: 96px; height: 96px; }
.reference-layout .ref-finance-grid .ref-kpi-chart > .ref-ring > .ref-ring-center { inset: 17px; gap: 3px; }
.reference-layout .ref-finance-grid .ref-kpi-chart > .ref-ring > .ref-ring-center > strong { max-width: 100%; color: #384455; font-size: 16px; letter-spacing: -.4px; }
.reference-layout .ref-finance-grid .ref-kpi-chart > .ref-ring > .ref-ring-center > small { color: #706774; font-size: 11px; }
.reference-layout .ref-panel-header { padding: 18px 18px 0; }
.reference-layout .ref-panel-header h3 { color: #354154; font-size: 17px; line-height: 1.4; }
.reference-layout .ref-panel-header p { color: #756d7a; font-size: 13px; line-height: 1.6; }
.reference-layout .ref-panel-header > button { min-height: 30px; color: #8a3a59; font-size: 13px; }
.reference-layout .ref-two-grid { gap: 18px; margin-top: 18px; }
.reference-layout .ref-flow-summary { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 24px 18px; }
.reference-layout .ref-flow-stat { min-height: 70px; padding: 12px; gap: 10px; }
.reference-layout .ref-flow-stat small { color: #527d66; font-size: 12px; }
.reference-layout .ref-flow-stat.expense small { color: #99616b; }
.reference-layout .ref-flow-stat strong { font-size: 20px; }
.reference-layout .ref-flow-stat > em { font-size: 12px; }
.reference-layout .ref-flow-stat strong.ref-money-wide { font-size: 16px; }
.reference-layout .ref-flow-total { flex-wrap: wrap; gap: 6px 12px; color: #706774; font-size: 13px; }
.reference-layout .ref-flow-total strong, .reference-layout .ref-flow-total strong.ref-money-wide { font-size: 15px; }
.reference-layout .ref-gauge { display: flex; flex-direction: column; width: min(100%, 236px); height: auto; gap: 4px; }
.reference-layout .ref-gauge > svg { display: block; position: static; width: 100%; height: auto; }
.reference-layout .ref-gauge-caption { display: flex; flex-direction: column; gap: 3px; max-width: 100%; text-align: center; }
.reference-layout .ref-gauge-caption > strong { color: #354154; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.reference-layout .ref-gauge-caption > small { color: #706774; font-size: 13px; }
.reference-layout .ref-finance-summary { grid-template-columns: 136px minmax(0, 1fr); gap: 20px; padding: 24px 18px 16px; }
.reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring { width: 136px; height: 136px; }
.reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center { inset: 24px; gap: 5px; }
.reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center > strong { color: #354e43; font-size: 24px; letter-spacing: -.7px; }
.reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center > small { color: #6a7770; font-size: 12px; }
.reference-layout .ref-summary-row, .reference-layout .ref-finance-summary .ref-summary-totals > .ref-summary-row { min-height: 38px; gap: 12px; }
.reference-layout .ref-summary-row > span, .reference-layout .ref-finance-summary .ref-summary-totals > .ref-summary-row > span { color: #706774; font-size: 13px; }
.reference-layout .ref-summary-row > strong, .reference-layout .ref-finance-summary .ref-summary-totals > .ref-summary-row > strong { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
.reference-layout .ref-financial-groups { padding: 4px 18px 18px; }
.reference-layout .ref-financial-groups .ref-summary-heading { color: #756d7a; font-size: 12px; font-weight: 600; }
.reference-layout .ref-commercial-grid .ref-operation-card, .reference-layout .ref-order-grid .ref-operation-card { display: flex; flex-direction: column; min-height: 154px; padding: 16px; }
.reference-layout .ref-commercial-grid .ref-kpi-value, .reference-layout .ref-order-grid .ref-kpi-value { margin: 10px 0 3px; font-size: 30px; line-height: 1.25; }
.reference-layout .ref-metric-meta { margin-bottom: 12px; }
.reference-layout .ref-metric-track { flex: none; min-height: 8px; height: 8px; margin-top: auto; border-radius: 8px; background: #edeaf0; }
.reference-layout .ref-metric-track > span { transition: width .35s ease; }
.reference-layout .ref-production-body { gap: 24px; padding: 24px 18px; }
.reference-layout .ref-production-body > .ref-ring.medium { width: 120px; height: 120px; }
.reference-layout .ref-production-body .ref-ring-center { inset: 22px; }
.reference-layout .ref-production-stat { min-height: 60px; }
.reference-layout .ref-production-stat > strong { font-size: 25px; }
.reference-layout .ref-production-stat > span, .reference-layout .ref-production-body .ref-ring-center > small { color: #706774; font-size: 13px; }
.reference-layout .ref-top-customer { min-width: 0; gap: 12px; padding: 14px 0; color: #665f6a; font-size: 14px; }
.reference-layout .ref-top-customer > strong { color: #354154; font-size: 14px; }
.reference-layout .ref-customer-info { min-width: 0; }
.reference-layout .ref-top-customer .ref-customer-info > span { color: #665f6a; font-size: 13px; line-height: 1.6; }
.reference-layout .ref-top-customer .ref-customer-rank { font-size: 12px; }
.reference-layout .ref-legend { color: #706774; font-size: 13px; }
.reference-layout .ref-history-body { overflow-x: auto; }
.reference-layout .ref-monthly-chart { min-width: 520px; height: auto; aspect-ratio: 560 / 180; }
.reference-layout .ref-monthly-chart text { fill: #706774; font-size: 13px; }
.reference-layout .ref-empty, .reference-layout .ref-empty > strong, .reference-layout .ref-inline-note { color: #756d7a; font-size: 13px; }
.reference-layout .ref-chart-tooltip { color: #62566a; font-size: 13px; }
.reference-layout .ref-chart-tooltip > strong, .reference-layout .ref-chart-tooltip b { font-size: 14px; }
.reference-layout .app-shell .sc-panel-title { font-size: 18px; }
.reference-layout .app-shell .sc-panel-subtitle, .reference-layout .sc-module-note, .reference-layout .sc-module-summary small, .reference-layout .sc-module-count, .reference-layout .sc-module-archive-option { color: #706774; font-size: 13px; line-height: 1.6; }
.reference-layout .sc-module-search { min-height: 40px; font-size: 14px; }
.reference-layout .app-shell .transactions-table th { font-size: 12px; }
.reference-layout .app-shell .transactions-table td, .reference-layout .app-shell .text-button, .reference-layout .app-shell .status { font-size: 13px; }
.reference-layout .app-shell .entry-sub, .reference-layout .app-shell .table-footer { font-size: 12px; }
.reference-layout .app-shell .page-footer { color: #756d7a; font-size: 12px; }
.reference-layout .app-shell .page-footer strong { font-size: 12px; }

/* Loading blocks background interaction until the transition ends. */
.reference-layout .app-shell a.nav-item { text-decoration: none; }
.reference-layout .sc-trial-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-bottom: 18px; padding: 12px 15px; border: 1px solid #efcfdb; border-radius: 8px; background: #fff5f8; color: #92506f; font-size: 13px; line-height: 1.7; }
.reference-layout .sc-trial-banner a { color: #a42e55; font-weight: 600; text-decoration: none; }
.reference-layout .sc-trial-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.reference-layout .sc-trial-actions[hidden] { display: none; }
.sc-navigation-loading { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; box-sizing: border-box; padding: 24px; background: #f5f4f885; backdrop-filter: blur(3px); pointer-events: auto; cursor: none; touch-action: none; overscroll-behavior: none; }
.sc-navigation-loading::backdrop { background: transparent; cursor: none; }
.sc-navigation-loading * { cursor: none; }
.sc-navigation-loading:focus { outline: none; }
.sc-navigation-locked { overflow: hidden !important; overscroll-behavior: none; }
html.sc-navigation-locked { scrollbar-gutter: stable; }
.sc-navigation-loading[hidden] { display: none !important; }
.sc-navigation-card { display: flex; align-items: center; flex-direction: column; width: min(340px, 100%); padding: 30px 28px 26px; border: 1px solid #fff; border-radius: 24px; background: radial-gradient(ellipse at top, #fff0f5, #ffffff 64%); box-shadow: 0 22px 80px #47233726, 0 3px 14px #3817250a; color: #344154; font: 14px/1.6 "DM Sans", sans-serif; text-align: center; animation: sc-navigation-enter .18s ease-out both; }
.sc-navigation-art { position: relative; display: grid; width: 82px; height: 82px; place-items: center; margin-bottom: 14px; border: 1px solid #f8dbe5; border-radius: 50%; background: #fff8fa; box-shadow: 0 0 0 8px #fff2f680; }
.sc-navigation-orbit { position: absolute; inset: -3px; border: 3px solid transparent; border-top-color: #ed2547; border-right-color: #ed254747; border-radius: 50%; animation: sc-navigation-spin 1.1s linear infinite; }
@keyframes sc-navigation-spin { to { transform: rotate(360deg); } }
.sc-navigation-brand { margin-top: 3px; color: #a43c5c; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.sc-navigation-card > strong { margin-top: 5px; font: 800 25px/1.4 Manrope, sans-serif; }
.sc-navigation-destination { margin-top: 3px; color: #685c70; font-size: 16px; }
.sc-navigation-note { margin-top: 9px; color: #7d7085; font-size: 13px; }
.sc-navigation-progress { width: 100%; height: 7px; margin-top: 23px; overflow: hidden; border-radius: 8px; background: #f4e5ec; }
.sc-navigation-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff698f, #ed2547); animation: none; transform: none; }
.sc-navigation-percentage { margin-top: 8px; color: #be2350; font: 700 17px/1.5 "DM Sans", sans-serif; font-variant-numeric: tabular-nums; }
.sc-navigation-progress-caption { margin-top: 1px; color: #8b7b88; font-size: 10px; }
@keyframes sc-navigation-enter { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1599px) {
  .reference-layout .ref-finance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reference-layout .ref-order-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reference-layout .ref-two-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .reference-layout .ref-finance-grid, .reference-layout .ref-commercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-layout .ref-order-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reference-layout .ref-production-grid, .reference-layout .ref-history-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .reference-layout .app-shell .sidebar { width: min(280px, calc(100vw - 45px)); transform: translateX(-105%); }
  .reference-layout .app-shell .sidebar.open { transform: translateX(0); }
  .reference-layout .app-shell .main-content { margin-left: 0; }
}
@media (max-width: 760px) {
  .reference-layout .app-shell .page-wrap { padding: 18px 14px; }
  .reference-layout .app-shell .topbar { padding: 10px 14px; gap: 10px; }
  .reference-layout .app-shell .breadcrumbs strong { font-size: 13px; }
  .reference-layout .app-shell .demo-pill { font-size: 10px; }
  .reference-layout .ref-section-title { flex-wrap: wrap; }
  .reference-layout .ref-finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-layout .ref-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-layout .ref-flow-summary { gap: 18px; }
  .reference-layout .ref-finance-summary { grid-template-columns: 124px minmax(0, 1fr); gap: 16px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring { width: 124px; height: 124px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center { inset: 22px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center > strong { font-size: 22px; }
  .reference-layout .sc-module-summary { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .reference-layout .ref-finance-grid { grid-template-columns: 1fr; }
  .reference-layout .ref-card { min-height: 212px; }
  .reference-layout .ref-commercial-grid .ref-operation-card, .reference-layout .ref-order-grid .ref-operation-card { min-height: 170px; padding: 15px 12px; }
  .reference-layout .ref-kpi-label, .reference-layout .ref-order-grid .ref-operation-card .ref-kpi-label { font-size: 12px; }
  .reference-layout .ref-flow-summary { grid-template-columns: 1fr; }
  .reference-layout .ref-gauge { width: 230px; padding-top: 4px; }
  .reference-layout .ref-finance-summary { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 12px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring { width: 144px; height: 144px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center { inset: 25px; }
  .reference-layout .ref-finance-summary > .ref-summary-donut.ref-ring > .ref-ring-center > strong { font-size: 26px; }
  .reference-layout .ref-production-body { grid-template-columns: 1fr; gap: 18px; }
  .reference-layout .ref-top-customer { flex-wrap: wrap; }
  .reference-layout .ref-top-customer > strong { margin-left: auto; }
  .reference-layout .app-shell .demo-notice > .sc-demo-return { width: 100%; margin-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-navigation-loading *, .reference-layout .ref-metric-track > span { animation: none !important; transition: none !important; }
}
@media print { .sc-navigation-loading { display: none !important; } }

/* Desktop standard: retain the 1920px reference hierarchy without browser zoom.
   Narrow screens keep the accessible tablet/mobile layouts above. */
@media screen and (min-width: 1200px) {
  .reference-layout .app-shell .page-wrap { max-width: 1676px; margin-inline: auto; padding: 24px; }
  body[data-sc-surface="platform"].reference-layout .app-shell .topbar {
    padding-left: max(24px, calc(50% - 814px));
    padding-right: max(24px, calc(50% - 814px));
  }
  .reference-layout .ref-finance-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reference-layout .ref-finance-grid > .ref-card { display: flex; flex-direction: column; min-height: 244px; }
  .reference-layout .ref-finance-grid .ref-kpi-value { font-size: 28px; white-space: normal; overflow-wrap: anywhere; }
  .reference-layout .ref-finance-grid .ref-kpi-chart { width: 100%; margin-top: auto; padding-top: 14px; }
  .reference-layout .ref-finance-grid .ref-kpi-note { overflow-wrap: anywhere; }
  .reference-layout .ref-two-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-layout .ref-flow-summary { gap: 20px; }
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .reference-layout .ref-finance-grid .ref-kpi-value { font-size: 22px; }
}
@media screen and (min-width: 1200px) and (max-width: 1280px) {
  .reference-layout .ref-finance-grid .ref-kpi-value { font-size: 20px; }
}
@media screen and (max-height: 500px) and (max-width: 1000px) {
  body[data-sc-surface="platform"].reference-layout .sidebar .profile-button { display: flex; }
}