/* ===================================================================== CTR Suite 2.0.0 RC5 — Unified Design System One visual contract across workspace pages. This file intentionally loads LAST in page so legacy/local page CSS cannot drift the shell typography, spacing and component geometry. ===================================================================== */ :root{ /* canvas */ --ctr-page-x:30px; --ctr-page-top:26px; --ctr-page-bottom:72px; --ctr-page-gap:16px; --ctr-section-gap:14px; /* typography */ --ctr-title-size:26px; --ctr-title-line:1.15; --ctr-title-track:-.035em; --ctr-subtitle-size:12.5px; --ctr-subtitle-line:1.6; --ctr-section-title-size:15px; --ctr-body-size:12px; --ctr-small-size:10.5px; --ctr-label-size:9.5px; /* geometry */ --ctr-control-h:42px; --ctr-control-radius:11px; --ctr-card-radius:18px; --ctr-card-radius-sm:14px; --ctr-modal-radius:20px; --ctr-card-pad:18px; --ctr-card-head-x:18px; --ctr-card-head-y:15px; /* elevation */ --ctr-surface-border:var(--border,#E9EBF5); --ctr-surface-shadow:0 1px 2px rgba(15,23,42,.035); --ctr-surface-shadow-float:0 20px 52px -30px rgba(15,23,42,.34); --ctr-focus-ring:0 0 0 3px var(--blue-shadow-soft,rgba(47,111,234,.12)); } html,body, input,select,textarea,button{ font-family:var(--body,'Inter',system-ui,sans-serif); } body{ font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Typography is global: legacy pages may not reintroduce a second display font. */ .main h1,.main h2,.main h3,.main h4,.main h5,.main h6{ font-family:var(--display,'Sora',system-ui,sans-serif)!important; } .main p,.main td,.main th,.main label,.main input,.main select,.main textarea,.main button,.main a{ font-family:var(--body,'Inter',system-ui,sans-serif); } @media(min-width:1367px){ .topbar{padding-left:var(--ctr-page-x)!important;padding-right:var(--ctr-page-x)!important;} } /* --------------------------------------------------------------------- CANVAS — every normal workspace page begins on the same grid. POS keeps its dedicated full-height canvas, but inherits the tokens. --------------------------------------------------------------------- */ .main > .module-page, .main > .content > .module-page, .main > .content.pmx-page, .main > .content.sales-modern-page, .main > .content.reports-detail-page, .main > .content.sales-detail-modern-page, .main > .billing-content, .main > .notifications-page, .main > .content > .page, .main > .customer-page, .main > .profile-page, .main > .opening-shift-page, .main > .content > .customer-page, .main > .content > .profile-page, .main > .content > .opening-shift-page, .main > .content > .rh-page, .main > .content > .cs-page, .main > .content.cr-content-host > .cr-root{ padding-top:var(--ctr-page-top)!important; padding-right:var(--ctr-page-x)!important; padding-left:var(--ctr-page-x)!important; box-sizing:border-box; } .main > .module-page, .main > .content > .module-page, .main > .content.pmx-page, .main > .content.sales-modern-page, .main > .content.reports-detail-page, .main > .content.sales-detail-modern-page, .main > .billing-content, .main > .notifications-page, .main > .content > .page, .main > .customer-page, .main > .profile-page, .main > .opening-shift-page, .main > .content > .customer-page, .main > .content > .profile-page, .main > .content > .opening-shift-page, .main > .content > .rh-page{ padding-bottom:var(--ctr-page-bottom)!important; } /* Standalone content pages whose header sits directly in .content. */ .main > .content.ctr-standard-page-content{ padding:var(--ctr-page-top) var(--ctr-page-x) var(--ctr-page-bottom)!important; } /* --------------------------------------------------------------------- PAGE HEADER — identical vertical rhythm and title baseline. --------------------------------------------------------------------- */ .module-head, .page-head, .pb-page-head, .customer-head, .profile-head, .opening-head, .rh-head, .cs-page-head, .cr-page-head, .billing-head, .notifications-head, .invoice-document-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; margin-top:0!important; margin-bottom:20px!important; min-height:58px; } .module-head h1, .page-head h1, .pb-page-head h1,.pb-title, .customer-head h1, .profile-head h1, .opening-head h1, .rh-head h1, .cs-page-head h1, .cr-page-head h1, .billing-head h1, .notifications-head h1, .invoice-document-title h1{ margin:0!important; font-family:var(--display,'Sora',system-ui,sans-serif)!important; font-size:var(--ctr-title-size)!important; font-weight:800!important; line-height:var(--ctr-title-line)!important; letter-spacing:var(--ctr-title-track)!important; color:var(--text,#111827)!important; } .module-head p, .page-head p, .pb-page-head p,.pb-subtitle, .customer-head p, .profile-head p, .opening-head p, .rh-head p, .cs-page-head p, .cr-page-head p, .billing-head p, .notifications-head p, .invoice-document-title p{ margin:6px 0 0!important; max-width:780px; font-size:var(--ctr-subtitle-size)!important; font-weight:500!important; line-height:var(--ctr-subtitle-line)!important; color:var(--mute,#6B7280)!important; letter-spacing:0!important; } /* Eyebrows stay quiet and identical across transactional pages. */ .cs-page-head-eyebrow,.cr-eyebrow,.invoice-eyebrow, [class*="page-head"] [class*="eyebrow"]{ font-family:var(--body,'Inter',system-ui,sans-serif)!important; font-size:9px!important; line-height:1.25!important; font-weight:800!important; letter-spacing:.075em!important; text-transform:uppercase!important; } .module-actions,.head-actions,.page-head-actions,.pb-head-actions, .customer-actions,.profile-actions,.rh-actions,.cr-head-actions, .invoice-document-actions,.opening-actions{ display:flex!important; align-items:center!important; gap:9px!important; flex-wrap:wrap!important; } /* --------------------------------------------------------------------- BUTTON / INPUT CONTRACT --------------------------------------------------------------------- */ .m-btn, .customer-btn,.profile-btn, .btn,.btn-outline,.btn-primary,.btn-secondary,.btn-ghost, .pb-btn,.cs-btn,.cs-btn-ghost,.cr-btn, .invoice-action-buttons a,.invoice-action-buttons button, .page-head-actions a,.page-head-actions button, .head-actions a,.head-actions button, .module-actions a,.module-actions button{ min-height:var(--ctr-control-h)!important; border-radius:var(--ctr-control-radius)!important; font-family:var(--body,'Inter',system-ui,sans-serif)!important; font-size:11.5px!important; font-weight:750!important; line-height:1.2!important; } .m-input,.m-select,.m-textarea, input[type="text"],input[type="search"],input[type="date"],input[type="month"],input[type="number"],input[type="email"],input[type="tel"],input[type="password"], select,textarea{ font-family:var(--body,'Inter',system-ui,sans-serif); } .module-page .m-input,.module-page .m-select, .module-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .module-page select, .customer-page input,.customer-page select, .profile-page input,.profile-page select, .pb-filter-bar input,.pb-filter-bar select, .filter-bar input,.filter-bar select, .sales-modern-page input,.sales-modern-page select, .reports-detail-page input,.reports-detail-page select{ min-height:var(--ctr-control-h)!important; border-radius:var(--ctr-control-radius)!important; font-size:12px!important; } input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{ outline:none; } .module-page input:focus,.module-page select:focus,.module-page textarea:focus, .customer-page input:focus,.customer-page select:focus, .profile-page input:focus,.profile-page select:focus, .pb-filter-bar input:focus,.pb-filter-bar select:focus, .filter-bar input:focus,.filter-bar select:focus{ border-color:var(--blue)!important; box-shadow:var(--ctr-focus-ring)!important; } /* --------------------------------------------------------------------- SURFACE / CARD CONTRACT --------------------------------------------------------------------- */ .m-card,.m-kpi, .customer-stat,.customer-table-wrap,.customer-toolbar, .profile-card, .tbl-stat-card,.tbl-card, .pb-card, .list-card,.filter-bar,.stat-card,.insight-card, .sales-modern-page .filter-card,.sales-modern-page .table-card,.sales-modern-page .summary-card, .reports-detail-page .panel,.reports-detail-page .detail-hero-card,.reports-detail-page .detail-mini-card,.reports-detail-page .method-card, .rh-card,.rh-methods,.rh-controlbar,.rh-insight,.rh-stat, .cs-card,.cs-kpi-card,.cr-card,.cr-kpi-card, .billing-card,.billing-plan-card, .invoice-document, .pmx-card,.pmx-stat-card, .catalog-card,.cart-card{ border-color:var(--ctr-surface-border)!important; box-shadow:var(--ctr-surface-shadow)!important; } .m-card,.customer-table-wrap,.profile-card,.pb-card,.list-card, .sales-modern-page .filter-card,.sales-modern-page .table-card, .reports-detail-page .panel,.rh-card,.cs-card,.cr-card,.billing-card, .invoice-document,.pmx-card,.catalog-card,.cart-card{ border-radius:var(--ctr-card-radius)!important; } .m-kpi,.customer-stat,.tbl-stat-card,.pb-stat,.stat-card,.insight-card, .sales-modern-page .summary-card,.reports-detail-page .detail-hero-card, .reports-detail-page .detail-mini-card,.reports-detail-page .method-card, .rh-stat,.cs-kpi-card,.cr-kpi-card,.pmx-stat-card{ border-radius:16px!important; } .m-card-head,.pb-panel-header,.list-head,.sales-data-head, .reports-detail-page .panel-head,.cs-card-head,.cr-card-head, .billing-card-head,.pmx-table-foot{ min-height:52px; padding:var(--ctr-card-head-y) var(--ctr-card-head-x)!important; } .m-card-head h2,.m-card-head h3,.pb-panel-title,.list-head h2,.list-head h3, .sales-data-head h2,.sales-data-head h3,.reports-detail-page .panel-head h3, .cs-card-head h2,.cs-card-head h3,.cr-card-head h2,.cr-card-head h3, .billing-card-head h2,.billing-card-head h3, .section-title,.ctr-section-title{ font-family:var(--display,'Sora',system-ui,sans-serif)!important; font-size:var(--ctr-section-title-size)!important; line-height:1.3!important; letter-spacing:-.015em!important; } /* --------------------------------------------------------------------- KPI CONTRACT --------------------------------------------------------------------- */ .m-grid,.pb-summary-grid,.stats,.summary-grid,.detail-hero-grid, .finance-kpi-grid,.owner-kpi-grid,.cr-kpi-grid,.cs-kpi-grid,.tbl-stats{ gap:12px!important; } .m-kpi,.customer-stat,.pb-stat,.stat-card,.summary-card,.detail-mini-card, .tbl-stat-card,.cr-kpi-card,.cs-kpi-card{ padding:15px 17px!important; } .m-kpi span,.customer-stat span,.pb-stat span,.stat-card span, .summary-card .summary-title,.detail-mini-card span,.tbl-stat-card span, .cr-kpi-card span,.cs-kpi-card span{ font-family:var(--body,'Inter',system-ui,sans-serif)!important; font-size:var(--ctr-label-size)!important; line-height:1.3!important; font-weight:800!important; letter-spacing:.06em!important; } .m-kpi strong,.customer-stat strong,.pb-stat strong,.stat-card strong, .detail-mini-card strong,.tbl-stat-card strong{ font-family:var(--display,'Sora',system-ui,sans-serif)!important; letter-spacing:-.025em!important; } /* --------------------------------------------------------------------- FILTER / TOOLBAR CONTRACT --------------------------------------------------------------------- */ .m-toolbar,.ctr-filter-card,.filter-bar,.pb-filter-bar,.customer-toolbar, .sales-modern-page .filter-card,.rh-filter,.report-filter-card{ gap:10px!important; } .filter-bar,.pb-filter-bar,.customer-toolbar,.ctr-filter-card, .sales-modern-page .filter-card{ border-radius:16px!important; } /* --------------------------------------------------------------------- TABLE CONTRACT — visual density and numeric alignment. Specialized attendance / denomination grids are intentionally excluded. --------------------------------------------------------------------- */ .m-table,.customer-table,.pb-table,.sales-table,.pmx-table,.rh-table, .billing-history-table,.team-table,.invite-table, .reports-detail-page table{ font-family:var(--body,'Inter',system-ui,sans-serif)!important; font-variant-numeric:tabular-nums; } .m-table th,.customer-table th,.pb-table th,.sales-table th,.pmx-table th,.rh-table th, .billing-history-table th,.team-table th,.invite-table th, .reports-detail-page thead th{ padding:11px 13px!important; font-size:8.5px!important; line-height:1.25!important; font-weight:800!important; letter-spacing:.07em!important; text-transform:uppercase!important; color:var(--mute,#6B7280)!important; } .m-table td,.customer-table td,.pb-table td,.sales-table td,.pmx-table td,.rh-table td, .billing-history-table td,.team-table td,.invite-table td, .reports-detail-page tbody td{ padding:13px!important; font-size:10.8px!important; line-height:1.45!important; vertical-align:middle!important; } /* --------------------------------------------------------------------- MODAL / DRAWER CONTRACT --------------------------------------------------------------------- */ .att-modal-card,.pb-modal,.team-modal-card,.pmx-modal,.sale-void-modal, .cs-modal-box,.cr-modal-box,.modal .modal-card,.modal-content, [class*="modal-card"],[class*="modal-box"]{ border-radius:var(--ctr-modal-radius)!important; } .att-modal-head,.pb-modal-header,.team-modal-head,.pmx-modal-head, .cs-modal-box > header,.cr-modal-box > header,.m-head{ min-height:56px; } /* --------------------------------------------------------------------- PAGE-SPECIFIC ALIGNMENT WITHOUT FLATTENING THEIR UX. --------------------------------------------------------------------- */ /* POS keeps dense operational layout but uses global text geometry. */ .posx-workbar,.catalog-card,.cart-card,.posx-modal{ font-family:var(--body,'Inter',system-ui,sans-serif)!important; } .cart-head h2,.catalog-card h2,.posx-modal-head h3{ font-family:var(--display,'Sora',system-ui,sans-serif)!important; letter-spacing:-.02em!important; } /* Invoice is a document canvas, not a dashboard, but aligns its typography. */ .invoice-document-title h1{font-size:24px!important} .invoice-section-head h2,.invoice-mini-title{ font-family:var(--display,'Sora',system-ui,sans-serif)!important; letter-spacing:-.015em!important; } /* Help hero is intentionally marketing-like; internal guide cards follow UI font. */ .help-page,.hc-guide-card,.hc-contact-card,.hc-spec-grid{ font-family:var(--body,'Inter',system-ui,sans-serif)!important; } /* --------------------------------------------------------------------- TABLET LANDSCAPE — same layout language, denser geometry. --------------------------------------------------------------------- */ @media (min-width:768px) and (max-width:1366px) and (orientation:landscape){ :root{ --ctr-page-x:20px; --ctr-page-top:18px; --ctr-page-bottom:48px; --ctr-title-size:20px; --ctr-subtitle-size:10.8px; --ctr-control-h:38px; --ctr-card-radius:16px; --ctr-card-pad:15px; --ctr-card-head-x:15px; --ctr-card-head-y:12px; } .topbar{padding-left:var(--ctr-page-x)!important;padding-right:var(--ctr-page-x)!important;} .module-head,.page-head,.pb-page-head,.customer-head,.profile-head, .opening-head,.rh-head,.cs-page-head,.cr-page-head,.billing-head, .notifications-head,.invoice-document-head{ min-height:48px; margin-bottom:14px!important; gap:12px!important; } .m-card-head,.pb-panel-header,.list-head,.sales-data-head, .reports-detail-page .panel-head,.cs-card-head,.cr-card-head,.billing-card-head{ min-height:46px; } .m-table th,.customer-table th,.pb-table th,.sales-table th,.pmx-table th,.rh-table th, .billing-history-table th,.team-table th,.invite-table th,.reports-detail-page thead th{ padding:8px 10px!important; font-size:7.8px!important; } .m-table td,.customer-table td,.pb-table td,.sales-table td,.pmx-table td,.rh-table td, .billing-history-table td,.team-table td,.invite-table td,.reports-detail-page tbody td{ padding:9px 10px!important; font-size:9.8px!important; } } /* --------------------------------------------------------------------- MOBILE — same hierarchy, touch-safe controls, no page-to-page jump. --------------------------------------------------------------------- */ @media(max-width:900px){ :root{ --ctr-page-x:14px; --ctr-page-top:18px; --ctr-page-bottom:calc(84px + env(safe-area-inset-bottom)); --ctr-title-size:20px; --ctr-subtitle-size:10.8px; --ctr-control-h:42px; } .module-head,.page-head,.pb-page-head,.customer-head,.profile-head, .opening-head,.rh-head,.cs-page-head,.cr-page-head,.billing-head, .notifications-head,.invoice-document-head{ min-height:0; align-items:flex-start!important; flex-direction:column!important; gap:11px!important; margin-bottom:16px!important; } .module-actions,.head-actions,.page-head-actions,.pb-head-actions, .customer-actions,.profile-actions,.rh-actions,.cr-head-actions, .invoice-document-actions,.opening-actions{ width:100%; } } @media(max-width:520px){ :root{ --ctr-page-x:11px; --ctr-page-top:14px; --ctr-title-size:21px; --ctr-card-radius:15px; --ctr-card-radius-sm:12px; --ctr-modal-radius:17px; } .main > .content.ctr-standard-page-content{ padding-left:var(--ctr-page-x)!important; padding-right:var(--ctr-page-x)!important; } .module-head p,.page-head p,.pb-page-head p,.customer-head p,.profile-head p, .opening-head p,.rh-head p,.cs-page-head p,.cr-page-head p,.billing-head p{ line-height:1.5!important; } .m-card-head,.pb-panel-header,.list-head,.sales-data-head, .reports-detail-page .panel-head,.cs-card-head,.cr-card-head,.billing-card-head{ min-height:48px; padding:12px 13px!important; } } /* CTR Suite inventory header actions — mirror Pembelian Bahan header composition. */ .ctr-stock-page-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:start!important; gap:16px 20px!important; } .ctr-stock-page-head>div:first-child{min-width:0} .ctr-stock-page-head .ctr-inventory-quick-actions{ display:flex!important; flex-flow:row nowrap!important; align-items:center!important; justify-content:flex-end!important; width:auto!important; max-width:none!important; gap:10px!important; flex-shrink:0!important; } .ctr-stock-page-head .ctr-inventory-quick{ width:auto!important; min-width:112px!important; flex:0 0 auto!important; white-space:nowrap!important; justify-content:center!important; gap:7px!important; } .ctr-stock-page-head .ctr-stock-opname-quick{min-width:142px!important} .ctr-stock-page-head .ctr-inventory-quick i{ width:14px; text-align:center; font-size:11px; } .ctr-stock-page-head .ctr-quick-label-short{display:none} /* Tablet landscape keeps the same one-row quick-action order as Pembelian Bahan. */ @media (orientation:landscape) and (min-width:901px) and (max-width:1366px){ .ctr-stock-page-head{gap:14px 16px!important} .ctr-stock-page-head .ctr-inventory-quick-actions{gap:8px!important} .ctr-stock-page-head .ctr-inventory-quick{ min-width:102px!important; min-height:38px!important; padding-inline:10px!important; font-size:10.5px!important; } .ctr-stock-page-head .ctr-stock-opname-quick{min-width:128px!important} } /* Mobile follows the same order, but uses equal-width compact actions. */ @media(max-width:900px){ .ctr-stock-page-head{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:11px!important; } .ctr-stock-page-head .ctr-inventory-quick-actions{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; gap:7px!important; } .ctr-stock-page-head .ctr-inventory-quick, .ctr-stock-page-head .ctr-stock-opname-quick{ width:100%!important; min-width:0!important; padding-inline:8px!important; } } @media(max-width:520px){ .ctr-stock-page-head .ctr-inventory-quick-actions{gap:6px!important} .ctr-stock-page-head .ctr-inventory-quick{ gap:5px!important; padding-inline:6px!important; font-size:10px!important; } .ctr-stock-page-head .ctr-stock-opname-quick .ctr-quick-label-full{display:none} .ctr-stock-page-head .ctr-stock-opname-quick .ctr-quick-label-short{display:inline} }