/* ONESYNC HRIS visual system. Loaded after app.css to retain existing page layouts. */
:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: #17243b; background: #f4f7fb; }
body { background: #f4f7fb; }
a { color: #2764d9; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #6ba5ff; outline-offset: 2px; }
p { color: #6b778c; }
h1, h2, h3 { color: #17243b; }
h1 { font-size: clamp(25px, 2.3vw, 33px); letter-spacing: -.035em; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
.eyebrow { color: #306ae4; font-size: 10px; letter-spacing: .17em; }
.content { max-width: 1600px; padding: 35px 40px 80px; }
.page-heading { align-items: center; margin-bottom: 18px; }
.page-heading p { font-size: 13px; }
.heading-date { padding: 9px 13px; border: 1px solid #e4eaf2; background: #fff; border-radius: 9px; color: #66758e; font-size: 12px; white-space: nowrap; }

/* Navigation */
.sidebar { width: 226px; padding: 25px 13px 17px; background: #121a2a; color: #cbd5e7; box-shadow: 5px 0 25px #0d162012; }
.brand { padding: 4px 10px 20px; gap: 10px; font-size: 18px; letter-spacing: -.025em; }
.brand small { margin-top: 2px; color: #8392ab; font-size: 10px; letter-spacing: .09em; font-weight: 600; }
.brand-mark { width: 32px; height: 32px; background: #3477f4; border-radius: 9px; display: grid; grid-template-columns: repeat(2, 6px); grid-template-rows: repeat(2, 6px); place-content: center; gap: 3px; }
.brand-mark i { display: block; width: 6px; height: 6px; border-radius: 2px; background: #fff; }
.brand-mark i:last-child { opacity: .55; }
.side-label, .side-label:first-of-type { color: #667995; margin: 22px 12px 8px; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.side-nav { gap: 3px; }
.side-nav a { position: relative; color: #a6b5cc; padding: 10px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; gap: 11px; }
.side-nav a:hover { background: #ffffff0f; color: #fff; }
.side-nav a.active { background: #2764df; color: #fff; box-shadow: 0 5px 12px #09183830; }
.side-nav a.active::before { content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #73b8ff; }
.nav-icon { display: inline-grid; place-items: center; width: 17px; font-size: 16px; line-height: 1; opacity: .94; }
.sidebar-foot { padding: 14px 9px 2px; border-top: 1px solid #ffffff17; }
.sidebar-user { display: flex; align-items: center; gap: 9px; }
.sidebar-user strong { color: #f1f5ff; font-size: 11px; }
.sidebar-user small { color: #7588a6; margin: 3px 0 0; font-size: 10px; }
.avatar-small, .topbar-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; background: #dce9ff; color: #3165c9; border-radius: 50%; font-size: 12px; font-weight: 800; }
.link-button, .link-button:hover { color: #a9c3f9; background: transparent; padding: 11px 0 0; font-size: 11px; }
.app-shell { margin-left: 226px; }
.topbar { height: 64px; padding: 0 40px; border-bottom: 1px solid #e4eaf2; box-shadow: 0 2px 12px #172f5b04; }
.topbar-left { gap: 11px; }
.topbar-right { display: flex; align-items: center; gap: 17px; }
.topbar-divider { width: 1px; height: 20px; background: #e2e8f1; }
.topbar-pill { display: inline-flex; align-items: center; gap: 7px; color: #64748b; border: 0; padding: 0; font-size: 10px; letter-spacing: .04em; }
.topbar-pill span { width: 7px; height: 7px; background: #18bd86; border-radius: 50%; box-shadow: 0 0 0 3px #e0f7ee; }
.topbar-avatar { width: 31px; height: 31px; }
.back-button { border: 1px solid #e4eaf2; background: #fff; color: #465975; padding: 7px 10px; }
.back-button:hover { background: #f3f7ff; }
.home-link { color: #60728b; }
.crumb { color: #bcc7d7; }
.mobile-menu, .mobile-backdrop { display: none; }

/* Buttons, surfaces, and data */
button, .button { background: #2866e8; border-radius: 8px; box-shadow: 0 3px 9px #2866e81b; font-size: 12px; padding: 10px 15px; font-weight: 750; min-height: 38px; }
button:hover, .button:hover { background: #1555d1; }
button:disabled { box-shadow: none; }
.button-sm { padding: 7px 11px; min-height: 31px; font-size: 11px; }
.secondary { background: #eaf1ff; color: #255dd0; box-shadow: none; }
.secondary:hover { background: #dce9ff; color: #164cbe; }
.ghost { background: #fff; color: #405574; border: 1px solid #dfe7f1; box-shadow: none; }
.ghost:hover { background: #f4f8ff; color: #235dcc; }
.panel, .card, .process-card { border-color: #e3e9f2; border-radius: 13px; box-shadow: 0 5px 20px #1c365309; }
.panel { padding: 22px; margin: 20px 0; }
.counter { background: #eaf1ff; color: #2d63c9; }
.hero-actions { margin: 19px 0 23px; }
.status-chip { border-radius: 7px; letter-spacing: .025em; }
.status-draft { background: #e9efff; color: #2d5ac9; }
.status-running, .status-calculating, .status-queued { background: #e8f1ff; color: #2866cb; }
.status-succeeded, .status-approved, .status-closed { background: #def8ed; color: #15865e; }
.status-warning { background: #fff1dc; color: #9b6719; }
.notice { background: #fff9eb; border-left-color: #f0b44b; color: #7a612f; }
.message { background: #e8f6f0; color: #1d6b51; }
th { background: #f5f8fc; color: #67768e; border-bottom: 1px solid #e3eaf2; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
td { border-bottom-color: #eef2f7; }
tr:hover td, tr:hover td.sticky-col { background: #f7faff; }
th.sticky-col { background: #f5f8fc; }
.sticky-col { box-shadow: 2px 0 0 #e9eef5; }
input, select, textarea { border-color: #dce5f0; color: #17243b; border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b7d1ff; }
.field-list span, .report-column-list span { background: #f4f7fd; }

/* Dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 25px 0 22px; }
.kpi-card { min-height: 134px; border: 1px solid #e4eaf3; background: #fff; border-radius: 12px; padding: 18px 19px; box-shadow: 0 5px 18px #1c365308; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: #63728a; }
.kpi-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; font-size: 17px; }
.kpi-card strong { display: block; margin: 12px 0 4px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.kpi-card small { color: #95a1b4; font-size: 10px; }
.kpi-blue .kpi-icon { background: #e7efff; color: #3278f5; }
.kpi-teal .kpi-icon { background: #e2f8f3; color: #10a98d; }
.kpi-amber .kpi-icon { background: #fff1de; color: #e9a13c; }
.kpi-violet .kpi-icon { background: #f0eaff; color: #8b61d5; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, 1fr); align-items: start; gap: 17px; }
.dashboard-grid > * { min-width: 0; }
.dashboard-grid .panel { margin-top: 0; }
.dashboard-side { display: grid; gap: 17px; }
.dashboard-side .panel { margin-bottom: 0; }
.entity-cell { display: flex; align-items: center; gap: 9px; }
.entity-cell small { display: block; margin-top: 3px; color: #98a4b4; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.entity-badge { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 8px; background: #e8efff; color: #2d66db; font-weight: 800; }
.metric-list { display: grid; gap: 12px; }
.metric-row > div:first-child { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #566680; }
.metric-row strong { margin-left: auto; color: #1d2e47; }
.metric-dot { width: 7px; height: 7px; border-radius: 50%; }
.metric-track { height: 6px; margin-top: 7px; background: #eef2f8; border-radius: 6px; overflow: hidden; }
.metric-track i { display: block; height: 100%; border-radius: inherit; }
.quick-panel a { display: flex; align-items: center; gap: 10px; padding: 11px; margin-top: 8px; border: 1px solid #e7edf5; border-radius: 8px; color: #3b516f; font-size: 12px; font-weight: 700; }
.quick-panel a:hover { background: #f4f8ff; text-decoration: none; }
.quick-panel a > span:first-child { color: #2d69e5; font-size: 17px; }
.quick-panel b { margin-left: auto; color: #2866e8; }

/* Period workspace */
.workspace-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 22px 0; }
.workspace-kpi { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid #e3eaf3; border-radius: 11px; background: #fff; }
.workspace-kpi-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 9px; font-size: 18px; }
.workspace-kpi-icon.blue { background: #e9f0ff; color: #3678ed; }
.workspace-kpi-icon.teal { background: #e2f8f3; color: #11a88a; }
.workspace-kpi-icon.amber { background: #fff0db; color: #e5a03c; }
.workspace-kpi-icon.violet { background: #f0eaff; color: #8a60d4; }
.workspace-kpi strong, .workspace-kpi small { display: block; }
.workspace-kpi strong { font-size: 21px; }
.workspace-kpi small { color: #8795a9; font-size: 10px; }
.info-strip { background: #dbe5f2; }
.info-strip div { background: #f0f5ff; }
.info-strip strong { color: #2c64d0; }
.info-strip span { color: #7586a0; }
.table-tile { border-color: #e4eaf2; background: #fff; }
.table-tile:hover { border-color: #9fbeff; box-shadow: 0 8px 22px #285de815; }
.table-tile small { color: #8998ad; }
.tile-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #eaf1ff; color: #2e67dd; font-size: 16px; }
.tile-actions { gap: 7px; flex-wrap: wrap; }
.tile-actions .button { flex: 1; white-space: nowrap; }

/* Calculation selector and live progress */
.readiness-panel { display: flex; align-items: center; gap: 16px; margin: 24px 0 29px; padding: 21px; border: 1px solid #d9e8fa; border-radius: 12px; background: #fff; box-shadow: 0 5px 19px #1c365308; }
.readiness-panel > div:nth-child(2) { flex: 1; }
.readiness-panel h2 { margin: 0 0 3px; }
.readiness-panel p { margin: 0; font-size: 12px; }
.readiness-panel .eyebrow { margin-bottom: 5px; }
.readiness-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 10px; font-size: 21px; font-weight: 800; }
.readiness-icon.ok { background: #def8ed; color: #159268; }
.readiness-icon.blocked { background: #ffe9e4; color: #b7423b; }
.process-intro { margin-bottom: 13px; }
.process-grid { gap: 14px; }
.process-card { padding: 21px; min-height: 312px; }
.process-card.featured { border-color: #9cbcff; background: #f8fbff; box-shadow: 0 8px 25px #3069e214; }
.process-card h2 { margin: 10px 0 4px; }
.process-card p { font-size: 12px; }
.process-step { right: 17px; top: 17px; width: 26px; height: 26px; background: #edf3ff; color: #3169dc; }
.featured .process-step { background: #dceaff; color: #255dcc; }
.process-icon { margin: 0 0 12px; background: #eaf1ff; color: #2e67df; }
.process-tag { color: #3670dd; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.process-output { border-top: 1px solid #e9eef5; padding: 12px 0 0; min-height: 48px; color: #6f7f95; font-size: 10px; }
.process-output strong { color: #344c70; }
.process-card button { margin-top: 10px; }
.run-list-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf1f6; padding: 12px 0; }
.run-list-row > div { flex: 1; }
.run-list-row strong, .run-list-row small { display: block; }
.run-list-row strong { font-size: 12px; }
.run-list-row small { color: #929eae; margin-top: 3px; font-size: 10px; }
.run-list-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #eaf1ff; border-radius: 8px; color: #346fe1; }
.live-panel { border-color: #adc6fb; background: linear-gradient(160deg, #fff, #f8fbff); }
.live-head { gap: 15px; }
.live-head > div { flex: 1; }
.live-head h2 { margin: 0; }
.live-orb { width: 40px; height: 40px; background: #3978f4; animation: livepulse 1.8s infinite; }
.live-badge { background: #e6efff; color: #2d68db; border-radius: 6px; padding: 7px 9px; font-size: 9px; letter-spacing: .1em; font-weight: 800; }
.run-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0; border: 1px solid #e4ebf6; border-radius: 9px; background: #fff; }
.run-timing div { padding: 13px 16px; }
.run-timing div + div { border-left: 1px solid #e4ebf6; }
.run-timing small, .run-timing strong { display: block; }
.run-timing small { color: #8290a6; font-size: 10px; }
.run-timing strong { margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.engine-timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 0 0 17px; padding: 0; list-style: none; }
.engine-timeline li { padding: 11px 9px; background: #f1f4f9; border: 1px solid #e8edf4; border-radius: 8px; min-width: 0; }
.engine-timeline li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #dce5f2; color: #7f8da1; font-size: 10px; font-weight: 800; }
.engine-timeline li strong, .engine-timeline li small { display: block; }
.engine-timeline li strong { margin-top: 7px; font-size: 11px; }
.engine-timeline li small { color: #8997aa; font-size: 9px; }
.engine-timeline li.current { border-color: #8db1fa; background: #eaf2ff; }
.engine-timeline li.current span { background: #3679f3; color: #fff; animation: livepulse 1.8s infinite; }
.engine-timeline li.complete { border-color: #bdebd9; background: #eefaf5; }
.engine-timeline li.complete span { background: #1cba87; color: #fff; }
.engine-timeline li.complete span::before { content: "✓"; }
.engine-timeline li.complete span { font-size: 0; }
.engine-timeline li.complete span::before { font-size: 12px; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 8px #3878f000; } }

/* Other pages inherit the same surfaces and link colors. */
.report-catalog-card { border-color: #e4eaf3; background: #fff; }
.report-catalog-card:hover { border-color: #96b8ff; box-shadow: 0 6px 18px #2b62d018; }
.report-catalog-icon, .report-catalog-foot, .report-column-list b { color: #2e68d9; }
.report-links a { background: #eef4ff; color: #2d62cf; }
.approval-grid, .employee-detail-grid { background: #e5ebf4; border-color: #e5ebf4; }
.loading-overlay { background: #0d1830bd; }
.spinner { border-top-color: #7ba9ff; }
.auth-shell { margin-left: 0; min-height: 100vh; display: grid; place-items: center; }
.auth-shell .content { width: min(100%, 640px); padding: 20px; }
.auth-shell .login { margin: 0; max-width: none; padding: 34px; }

@media (max-width: 1150px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engine-timeline { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .kpi-grid, .workspace-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 25px 22px 60px; }
  .topbar { padding: 0 22px; }
}
@media (max-width: 720px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; padding: 25px 13px 17px; transform: translateX(-100%); transition: transform .2s ease; z-index: 30; }
  .menu-open .sidebar { transform: translateX(0); }
  .mobile-backdrop { display: none; position: fixed; inset: 0; background: #08142699; z-index: 29; }
  .menu-open .mobile-backdrop { display: block; }
  .mobile-menu { display: inline-flex; width: 33px; min-width: 33px; min-height: 33px; padding: 0; background: #eef3fc; color: #2f5cae; }
  .mobile-menu:hover { background: #dfeaff; }
  .side-label, .sidebar-foot { display: block; }
  .side-nav { display: grid; overflow: visible; }
  .app-shell { margin-left: 0; max-width: 100vw; overflow-x: clip; }
  .topbar { height: 58px; padding: 0 15px; }
  .topbar-pill, .topbar-avatar, .heading-date, .topbar-divider { display: none; }
  .back-button span, .home-link { display: none; }
  .content { padding: 24px 15px 60px; }
  .kpi-grid, .workspace-kpis, .dashboard-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kpi-card { min-height: 116px; padding: 13px; }
  .kpi-card strong { font-size: 25px; }
  .workspace-kpi { padding: 12px; gap: 8px; }
  .workspace-kpi strong { font-size: 17px; }
  .readiness-panel { align-items: flex-start; flex-wrap: wrap; }
  .readiness-panel > div:nth-child(2) { min-width: calc(100% - 60px); }
  .engine-timeline { grid-template-columns: repeat(2, 1fr); }
  .run-list-row { flex-wrap: wrap; }
  .run-list-row .button { margin-left: auto; }
  .process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kpi-grid, .workspace-kpis, .dashboard-side { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; }
  .readiness-panel .status-chip { margin-left: 59px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .live-orb, .engine-timeline li.current span { animation: none; transition: none; } }
@media print { .sidebar, .topbar, .mobile-backdrop { display: none; } .app-shell { margin: 0; } .content { padding: 0; } }

/* Payroll reports */
.reference-warning { border-left: 4px solid #dc9a29; background: #fff8e9; color: #664917; }
.reference-warning p { margin: 7px 0 12px; }
.payroll-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.payroll-metrics > div { padding: 19px 20px; border: 1px solid #e2eaf4; border-radius: 12px; background: #fff; }
.payroll-metrics span,.payroll-metrics small { display: block; color: #70819b; font-size: 11px; }
.payroll-metrics strong { display: block; margin: 8px 0 5px; color: #183052; font-size: clamp(18px,2vw,27px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-metrics .accent { background: #eaf4ff; border-color: #bed9ff; }
.payroll-metrics .accent strong { color: #1765c1; }
.payroll-list-panel { overflow: hidden; }
.report-search { margin: 14px 0; }
.report-search label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: #526684; }
.report-search > div { display: flex; flex-wrap: wrap; gap: 8px; }
.report-search input[name=q] { flex: 1; min-width: 190px; }
.report-view-toggle { margin: 0 0 13px; }
.payroll-table-wrap { overflow-x: auto; }
.payroll-table { min-width: 100%; }
.payroll-table .amount-col,.payroll-table tfoot td { font-variant-numeric: tabular-nums; }
.payroll-table td:last-child { white-space: nowrap; }
.payroll-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 17px 0; }
.payroll-detail-section h2 { margin-top: 0; }
.payroll-detail-section dl { margin: 0; }
.payroll-detail-section dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid #edf1f6; }
.payroll-detail-section dt { color: #64758d; overflow-wrap: anywhere; }
.payroll-detail-section dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-navigation { justify-content: space-between; }
.approval-document { margin: 20px 0; padding: clamp(22px,4vw,52px); border: 1px solid #dbe4ef; border-radius: 13px; background: #fff; color: #142c49; box-shadow: 0 12px 35px #1a467014; }
.approval-document-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 20px; border-bottom: 2px solid #253f61; }
.approval-company { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.approval-document h2 { font-size: 23px; margin: 7px 0 3px; }
.approval-document-head p { margin: 0; color: #718099; }
.approval-doc-status { padding: 7px 10px; border-radius: 7px; background: #e4f7ef; color: #13845d; font-size: 10px; font-weight: 800; white-space: nowrap; }
.approval-doc-status.reference { background: #fff0d3; color: #956113; }
.approval-reference-warning { margin: 16px 0; padding: 11px 14px; border-radius: 7px; background: #fff8e9; color: #664917; font-size: 12px; }
.approval-document-meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 21px 0; }
.approval-document-meta span { font-size: 12px; }
.approval-document-meta b { display: block; margin-bottom: 4px; color: #74829a; font-size: 10px; text-transform: uppercase; }
.approval-section-title { margin: 19px 0 10px; color: #5177a7; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.approval-financial { max-width: 620px; }
.approval-financial > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #e8edf4; }
.approval-financial strong { font-variant-numeric: tabular-nums; text-align: right; }
.approval-financial .tax { color: #c23f4d; }
.approval-financial .total { border-bottom: 2px solid #203b5a; font-weight: 800; font-size: 16px; }
.approval-control { margin: 24px 0; padding: 13px 15px; border: 1px solid #dce7f5; border-radius: 8px; background: #f5f9fe; }
.approval-control > div { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.approval-control p { margin: 7px 0 0; color: #718099; font-size: 11px; }
.approval-signatures { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 55px; }
.approval-signatures > div { min-height: 78px; border-top: 1px solid #bfcbd9; padding-top: 8px; }
.approval-signatures span { display: block; color: #738399; font-size: 11px; }
.approval-signatures strong { display: block; margin-top: 25px; }
.approval-document-foot { margin-top: 35px; color: #79879b; font-size: 10px; }
@media (max-width: 720px) { .payroll-metrics,.payroll-detail-grid { grid-template-columns: 1fr; } .approval-document-meta { grid-template-columns: repeat(2,1fr); } .approval-signatures { gap: 8px; } }
@media print { .hero-actions,.report-search,.report-view-toggle,.detail-navigation { display: none!important; } .approval-document { box-shadow: none; border: 0; padding: 0; } }

/* Sheet preview: the document area follows the placement of EPS RPT_Approval. */
.eps-report-wrap { max-width: 960px; margin: 20px auto 35px; overflow-x: auto; }
.eps-report-source { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: 7px; background: #eaf2ff; color: #315277; font-size: 11px; }
.eps-report-source.is-reference { background: #fff4dc; color: #76531e; }
.eps-report-source strong { white-space: nowrap; font-size: 10px; letter-spacing: .04em; }
.eps-approval-sheet { box-sizing: border-box; min-height: 850px; padding: 44px 48px 38px; border: 1px solid #d6dce5; background: #fff; color: #111; box-shadow: 0 10px 28px #17243b12; font-family: Arial, Calibri, sans-serif; font-size: 13px; }
.eps-approval-heading strong,.eps-approval-heading h2,.eps-approval-heading span { display: block; }
.eps-approval-heading strong { font-size: 15px; text-transform: uppercase; }
.eps-approval-heading h2 { margin: 3px 0 1px; font-size: 15px; font-weight: 700; }
.eps-approval-heading span { font-size: 14px; font-weight: 700; }
.eps-approval-summary { width: min(100%, 390px); margin-top: 53px; }
.eps-approval-line { display: grid; grid-template-columns: minmax(0,1fr) 162px; align-items: baseline; gap: 9px; min-height: 26px; font-weight: 700; }
.eps-approval-line strong { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.eps-approval-line.eps-tax { color: #c51e2e; }
.eps-approval-line.eps-net { border-top: 1px solid #333; padding-top: 4px; }
.eps-approval-check { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(100%, 390px); margin-top: 26px; font-size: 12px; font-style: italic; color: #2860a5; }
.eps-approval-check strong { box-sizing: border-box; min-width: 134px; padding: 4px 10px; border: 2px solid #111; color: #111; text-align: center; font-style: normal; font-variant-numeric: tabular-nums; }
.eps-approval-payments { margin-top: 86px; }
.eps-approval-payments h3 { margin: 0 0 11px; font-size: 13px; font-weight: 400; }
.eps-payment-row { display: grid; grid-template-columns: 135px minmax(0,1fr) 28px 148px; gap: 10px; align-items: baseline; min-height: 26px; }
.eps-payment-row strong { text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.eps-payment-note { border-bottom: 1px dotted #aeb4bb; color: #333; }
.eps-payment-total { margin-top: 16px; font-weight: 700; }
.eps-payment-total > b { text-align: right; }
.eps-payment-total > span:nth-child(3),.eps-payment-total > strong { border-top: 1px solid #111; border-bottom: 2px solid #111; padding: 4px 0; font-weight: 700; }
.eps-approval-place { width: 36%; margin: 80px 0 0 auto; text-align: left; }
.eps-approval-place span { margin-left: 10px; }
.eps-approval-signers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 4px; }
.eps-approval-signers > div { display: flex; min-height: 105px; flex-direction: column; justify-content: space-between; }
.eps-approval-signers strong { font-weight: 400; }
.eps-report-footnote { margin: 10px 0; color: #617083; font-size: 11px; }
@media (max-width: 780px) { .eps-report-wrap::before { content: 'Geser laporan ke samping untuk melihat seluruh kolom →'; display: block; padding: 6px 0; color: #69798d; font-size: 11px; } .eps-approval-sheet { min-width: 680px; min-height: 0; padding: 28px 20px; } .eps-approval-summary { margin-top: 40px; } .eps-approval-payments { margin-top: 55px; } .eps-report-source { align-items: flex-start; flex-direction: column; gap: 4px; } }
@media (max-width: 520px) { .eps-report-wrap::before { font-size: 10px; } }
@media print { .eps-report-wrap { max-width: none; margin: 0; } .eps-report-source,.eps-report-footnote { display: none; } .eps-approval-sheet { border: 0; box-shadow: none; min-height: 0; padding: 0; } }
.eps-payroll-sheet { padding: 35px 42px; border: 1px solid #d6dce5; background: #fff; box-shadow: 0 10px 28px #17243b12; color: #111; font-family: Arial, Calibri, sans-serif; }
.eps-payroll-head { display: flex; justify-content: space-between; gap: 35px; padding-bottom: 16px; border-bottom: 2px solid #111; }
.eps-payroll-head > div:first-child strong { text-transform: uppercase; }
.eps-payroll-head h2 { margin: 5px 0; font-size: 18px; }
.eps-payroll-head > div:last-child { display: grid; grid-template-columns: 105px minmax(120px,1fr); gap: 5px 12px; font-size: 12px; }
.eps-payroll-head small { color: #444; }
.eps-payroll-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 20px 0 22px; border: 1px solid #aaa; }
.eps-payroll-totals > div { padding: 11px 14px; border-right: 1px solid #aaa; }
.eps-payroll-totals > div:last-child { border-right: 0; }
.eps-payroll-totals span,.eps-payroll-totals strong { display: block; }
.eps-payroll-totals span { font-size: 11px; }
.eps-payroll-totals strong { margin-top: 8px; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eps-payroll-totals .net { background: #f0f4f8; }
.eps-payroll-section { break-inside: avoid; margin-top: 18px; }
.eps-payroll-section h3 { margin: 0; padding: 7px 8px; border-top: 1px solid #333; border-bottom: 1px solid #333; background: #f5f5f5; font-size: 12px; }
.eps-payroll-section table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.eps-payroll-section th,.eps-payroll-section td { width: 50%; padding: 6px 8px; border-bottom: 1px solid #ddd; }
.eps-payroll-section th { font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.eps-payroll-section td { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payroll-table th,.payroll-table td { padding: 10px 12px; }
.payroll-table th { white-space: nowrap; }
.payroll-table td { white-space: normal; }
.payroll-table .amount-col { text-align: right; white-space: nowrap; }
@media (max-width: 720px) { .eps-payroll-sheet { padding: 22px 16px; } .eps-payroll-head { display: block; } .eps-payroll-head > div:last-child { margin-top: 18px; } .eps-payroll-totals { grid-template-columns: 1fr; } .eps-payroll-totals > div { border-right: 0; border-bottom: 1px solid #aaa; } }
@media print { .eps-payroll-sheet { border: 0; box-shadow: none; padding: 0; } }
.report-primary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0 20px; }
.report-primary-card { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 20px; border: 1px solid #dce6f2; border-radius: 11px; background: #fff; color: #183257; text-decoration: none; }
.report-primary-card:hover { border-color: #82aae5; box-shadow: 0 8px 23px #336fc519; }
.report-primary-card > span { color: #3975c4; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.report-primary-card strong { font-size: 17px; }
.report-primary-card small { color: #667991; line-height: 1.5; }
.report-primary-card b { margin-top: auto; color: #286cbd; font-size: 12px; }
.report-catalog-details { margin: 17px 0; }
.report-catalog-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.report-catalog-details > summary::-webkit-details-marker { display: none; }
.report-catalog-details > summary strong,.report-catalog-details > summary small { display: block; }
.report-catalog-details > summary small { margin-top: 4px; color: #77869b; font-weight: 400; }
.report-catalog-details > summary b { color: #5482bd; font-size: 20px; }
.report-catalog-details > summary small b { color: #697f9e; font-size: 10px; font-weight: 800; }
.eps-schema-preview { margin: 12px 0 20px; overflow-x: auto; }
.eps-schema-preview table { width: max-content; min-width: 100%; }
.eps-schema-preview th { white-space: nowrap; border-bottom: 2px solid #223a5c; }
.eps-schema-preview td { min-width: 100px; color: #a4afbc; }
@media (max-width: 780px) { .report-primary-grid { grid-template-columns: 1fr; } .report-primary-card { min-height: 0; } }
.eps-payslip-sheet { box-sizing: border-box; padding: 35px 45px; min-width: 620px; border: 1px solid #d6dce5; background: #fff; color: #111; box-shadow: 0 10px 28px #17243b12; font-family: Arial, Calibri, sans-serif; font-size: 12px; }
.eps-payslip-sheet header strong,.eps-payslip-sheet header small { display: block; }
.eps-payslip-sheet header small { margin-top: 6px; color: #555; }
.eps-payslip-sheet h2 { margin: 24px 0; text-align: center; font-size: 16px; letter-spacing: .08em; }
.eps-payslip-id { margin-bottom: 12px; }
.eps-payslip-id span { display: inline-block; min-width: 150px; padding: 3px 8px; border-bottom: 1px solid #999; }
.eps-payslip-sheet h3 { margin: 0; padding: 7px 9px; border-top: 1px solid #555; border-bottom: 1px solid #555; background: #f3f4f6; font-size: 12px; }
.eps-payslip-info > div { display: grid; grid-template-columns: 130px minmax(100px,1fr) 130px minmax(100px,1fr); gap: 0; }
.eps-payslip-info span,.eps-payslip-info b { padding: 7px 8px; border-bottom: 1px solid #ddd; font-weight: 400; }
.eps-payslip-income { margin-top: 20px; }
.eps-payslip-income table { width: 100%; border-collapse: collapse; font-size: 12px; }
.eps-payslip-income th,.eps-payslip-income td { padding: 6px 9px; border-bottom: 1px solid #ddd; text-align: left; }
.eps-payslip-income th:last-child,.eps-payslip-income td:last-child { text-align: right; }
@media print { .eps-payslip-sheet { box-shadow: none; border: 0; padding: 0; } }