:root {
    color-scheme: light;
    --primary: #176b87;
    --primary-strong: #0f5269;
    --primary-soft: #d9edf3;
    --secondary: #b45309;
    --surface: #ffffff;
    --surface-2: #f5f8fa;
    --surface-3: #eaf0f3;
    --ink: #15272f;
    --ink-muted: #5d6d75;
    --outline: #d3dfe4;
    --outline-strong: #aabdc5;
    --danger: #b42318;
    --danger-soft: #fee4e2;
    --success: #18794e;
    --shadow-1: 0 1px 2px rgb(15 52 67 / 8%), 0 5px 16px rgb(15 52 67 / 6%);
    --shadow-2: 0 14px 38px rgb(15 52 67 / 18%);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --appbar-h: 72px;
    --editbar-h: 36px;
    --nav-w: 244px;
    --font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--surface-2); }
body { margin: 0; min-height: 100%; color: var(--ink); background: var(--surface-2); font: 400 1rem/1.45 var(--font); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 6px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.app-bar {
    position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--appbar-h); padding: 0 22px;
    display: flex; align-items: center; gap: 14px; color: #fff;
    background: linear-gradient(108deg, #123c4d 0%, #176b87 52%, #1d7d91 100%);
    box-shadow: 0 5px 20px rgb(11 45 59 / 22%);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; background: #fff; color: var(--primary); font-size: 1.25rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 8px 18px rgb(0 0 0 / 12%); }
.brand-mark.large { width: 58px; height: 58px; border-radius: 19px; font-size: 1.65rem; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; }
.brand-copy strong { overflow: hidden; max-width: 360px; font-size: .98rem; white-space: nowrap; text-overflow: ellipsis; }
.brand-copy small { color: rgb(255 255 255 / 72%); font-size: .73rem; }
.app-bar-spacer { flex: 1; }
.nav-toggle { display: inline-grid; color: #fff; }
.user-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 9px 6px 7px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 16px; color: #fff; background: rgb(255 255 255 / 9%); cursor: pointer; }
.user-chip:hover, .user-chip[aria-expanded="true"] { background: rgb(255 255 255 / 16%); }
.user-chevron { margin-inline: 2px; color: rgb(255 255 255 / 75%); font-weight: 900; transition: transform .16s ease; }
.user-chip[aria-expanded="true"] .user-chevron { transform: rotate(180deg); }
.user-menu { position: fixed; z-index: 60; top: calc(var(--appbar-h) - 6px); right: 20px; width: 230px; overflow: hidden; border: 1px solid var(--outline); border-radius: 15px; background: #fff; box-shadow: var(--shadow-2); }
.user-menu-head { display: flex; flex-direction: column; padding: 14px 15px 11px; border-bottom: 1px solid var(--outline); }
.user-menu-head strong { font-size: .82rem; }.user-menu-head small { color: var(--ink-muted); font-size: .7rem; }
.user-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; color: #425861; font-size: .8rem; font-weight: 750; }
.user-menu a:hover { color: var(--primary-strong); background: var(--primary-soft); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: #13475a; background: #d9edf3; font-size: .83rem; font-weight: 900; }
.user-copy { display: flex; flex-direction: column; min-width: 0; }
.user-copy strong { max-width: 150px; overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
.user-copy small { color: rgb(255 255 255 / 70%); font-size: .69rem; }
.sync-state { display: inline-flex; align-items: center; gap: 7px; color: rgb(255 255 255 / 76%); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.sync-state i { width: 8px; height: 8px; border-radius: 99px; background: #a7f3d0; box-shadow: 0 0 0 4px rgb(167 243 208 / 12%); }
.sync-state.loading i, .sync-state.saving i { background: #fde68a; animation: pulse 1s infinite; }
.sync-state.error i { background: #fca5a5; }
.edit-activity-bar { position: fixed; z-index: 29; top: var(--appbar-h); right: 0; left: var(--nav-w); height: var(--editbar-h); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; color: #244853; background: #e9f5f7; border-bottom: 1px solid #b8d8e0; box-shadow: 0 3px 9px rgb(15 52 67 / 7%); font-size: .7rem; white-space: nowrap; }
.edit-activity-bar i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #1b8a5a; box-shadow: 0 0 0 4px rgb(27 138 90 / 11%); }
.edit-activity-bar strong { color: #124f63; font-size: .72rem; }.edit-activity-bar span { overflow: hidden; text-overflow: ellipsis; }
.edit-activity-bar.loading i, .edit-activity-bar.saving i { background: #d48b0b; animation: pulse 1s infinite; }.edit-activity-bar.error { color: #7a271a; background: #fff0ee; border-bottom-color: #f3bbb5; }.edit-activity-bar.error i { background: var(--danger); }

.side-nav { position: fixed; top: var(--appbar-h); bottom: 0; left: 0; z-index: 25; width: var(--nav-w); display: flex; flex-direction: column; padding: 18px 14px 14px; background: #f9fbfc; border-right: 1px solid var(--outline); }
.side-nav nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 15px; border-radius: 15px; color: #52636b; font-size: .91rem; font-weight: 700; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { color: var(--primary-strong); background: #eaf3f6; }
.nav-item.active { color: #fff; background: linear-gradient(115deg, #176b87, #2a8297); box-shadow: 0 8px 18px rgb(23 107 135 / 20%); }
.nav-item:active { transform: scale(.985); }
.nav-bottom { display: grid; gap: 6px; margin-top: auto; }
.version { padding: 0 15px 7px; color: #829198; font-size: .7rem; }
.nav-scrim { position: fixed; inset: var(--appbar-h) 0 0 0; z-index: 24; border: 0; background: rgb(8 29 38 / 44%); backdrop-filter: blur(2px); }
.page-shell { min-height: 100vh; margin-left: var(--nav-w); padding: calc(var(--appbar-h) + 30px) clamp(18px, 3vw, 42px) 48px; }
body.has-edit-activity .page-shell { padding-top: calc(var(--appbar-h) + var(--editbar-h) + 30px); }
body.nav-collapsed .side-nav { width: 76px; padding-inline: 10px; }
body.nav-collapsed .side-nav .nav-item { justify-content: center; padding-inline: 0; }
body.nav-collapsed .side-nav .nav-item span, body.nav-collapsed .side-nav .version { display: none; }
body.nav-collapsed .page-shell { margin-left: 76px; }
body.nav-collapsed .edit-activity-bar { left: 76px; }
.side-nav, .page-shell { transition: width .2s ease, margin-left .2s ease; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
.page-heading h1 { margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1.14; letter-spacing: -.035em; }
.page-description { max-width: 760px; margin: 9px 0 0; color: var(--ink-muted); font-size: .94rem; }
.heading-actions, .toolbar-controls, .scroll-buttons { display: flex; align-items: center; gap: 10px; }

.button, .icon-button { border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 13px; font-size: .86rem; font-weight: 800; }
.button.primary { color: #fff; background: var(--primary); box-shadow: 0 7px 16px rgb(23 107 135 / 20%); }
.button.primary:hover { background: var(--primary-strong); box-shadow: 0 9px 20px rgb(23 107 135 / 28%); }
.button.tonal { color: var(--primary-strong); background: var(--primary-soft); }
.button.tonal:hover { background: #c6e3eb; }
.button.text { color: var(--primary); background: transparent; }
.button.text:hover { background: var(--primary-soft); }
.button.danger { color: #fff; background: var(--danger); }
.button.danger.text { color: var(--danger); background: transparent; }
.button.danger.text:hover { background: var(--danger-soft); }
.button.large { min-height: 50px; border-radius: 15px; }
.button.full { width: 100%; }
.button:active, .icon-button:active { transform: scale(.97); }
.button:disabled, .icon-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.icon-button { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--ink-muted); background: transparent; }
.icon-button:hover { color: var(--primary); background: var(--primary-soft); }
.year-control { display: flex; align-items: center; padding: 3px; border: 1px solid var(--outline); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-1); }
.year-control input { width: 82px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .9rem; font-weight: 850; text-align: center; appearance: textfield; }
.year-control input::-webkit-inner-spin-button, .year-control input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.heading-month { flex: 0 0 auto; }
.heading-month select { min-width: 132px; height: 48px; border-radius: 14px; box-shadow: var(--shadow-1); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.annual-summary-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.summary-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 98px; padding: 18px; border: 1px solid var(--outline); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); }
.summary-card::after { content: ""; position: absolute; inset: auto -14px -34px auto; width: 88px; height: 88px; border-radius: 50%; background: var(--accent); opacity: .08; }
.stat-button { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.stat-button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--outline)); box-shadow: 0 10px 24px rgb(15 52 67 / 13%); }
.stat-button:focus-visible { outline: 3px solid rgb(23 107 135 / 24%); outline-offset: 2px; }
.summary-icon { display: grid; width: 46px; height: 46px; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, white); }
.summary-card div { display: flex; flex-direction: column; }
.summary-card small { color: var(--ink-muted); font-size: .76rem; font-weight: 700; }
.summary-card strong { margin-top: 2px; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.04em; }
#statOvertime { font-size: 1.3rem; letter-spacing: -.025em; }
.accent-blue { --accent: #315a7d; }.accent-teal { --accent: #087f8c; }.accent-green { --accent: #3a8750; }.accent-red { --accent: #c53d43; }.accent-pink { --accent: #c03291; }.accent-purple { --accent: #7353ba; }

.legend-card { display: flex; align-items: center; gap: 22px; padding: 13px 16px; margin-bottom: 16px; border: 1px solid var(--outline); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); }
.legend-title { display: flex; min-width: 190px; flex-direction: column; }
.legend-title > span { font-size: .85rem; font-weight: 850; }
.legend-title small { color: var(--ink-muted); font-size: .7rem; }
.status-legend { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.legend-chip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--status-color) 55%, #b8c6cc); border-radius: 999px; color: var(--status-text); background: color-mix(in srgb, var(--status-color) 32%, white); font-size: .7rem; font-weight: 800; }
.legend-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 18%, transparent); }
.skeleton-line { display: block; width: 120px; height: 18px; border-radius: 8px; background: linear-gradient(90deg, #edf2f4, #f8fafb, #edf2f4); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skeleton-line.wide { width: 360px; }

.move-banner { position: sticky; top: calc(var(--appbar-h) + 10px); z-index: 18; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 16px; margin-bottom: 12px; border: 1px solid #f4c26f; border-radius: 14px; color: #5b3a04; background: #fff4d6; box-shadow: var(--shadow-2); }
body.has-edit-activity .move-banner { top: calc(var(--appbar-h) + var(--editbar-h) + 10px); }
.move-banner[hidden] { display: none !important; }
.schedule-panel { overflow: hidden; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.schedule-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 17px 18px; border-bottom: 1px solid var(--outline); background: linear-gradient(180deg, #fff, #fbfdfe); }
.schedule-toolbar h2 { margin: 0; font-size: 1.02rem; }
.schedule-toolbar p { margin: 4px 0 0; color: var(--ink-muted); font-size: .73rem; }
.compact-field { display: flex; flex-direction: column; gap: 3px; }
.compact-field span { color: var(--ink-muted); font-size: .67rem; font-weight: 750; }
.compact-field select { min-width: 160px; height: 38px; padding: 0 34px 0 11px; border: 1px solid var(--outline); border-radius: 11px; outline: 0; color: var(--ink); background: var(--surface); font-size: .78rem; font-weight: 700; }
.compact-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(23 107 135 / 12%); }
.scroll-buttons { padding: 2px; border: 1px solid var(--outline); border-radius: 13px; background: var(--surface-2); }
.scroll-buttons .icon-button { width: 36px; height: 36px; }

.schedule-scroll { position: relative; overflow-x: auto; overflow-y: hidden; max-height: none; min-height: 600px; overscroll-behavior-x: contain; scrollbar-color: #8baeb9 #eaf0f3; scrollbar-width: auto; }
.schedule-scroll:focus-visible { outline: 3px solid rgb(23 107 135 / 25%); outline-offset: -3px; }
.schedule-grid { --day-count: 365; display: grid; grid-template-columns: 176px repeat(var(--day-count), 205px); align-items: stretch; width: max-content; min-width: 100%; background: #dfe8eb; gap: 1px; }
.month-corner, .month-band { position: sticky; top: 0; z-index: 11; min-height: 42px; border-bottom: 1px solid #7598a5; }
.month-corner { left: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: #fff; background: #103f52; }
.month-corner strong { font-size: .95rem; }.month-corner small { color: rgb(255 255 255 / 68%); font-size: .66rem; font-weight: 750; }
.month-band { display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; background: linear-gradient(105deg, #176b87, #237e94); box-shadow: inset 3px 0 0 rgb(255 255 255 / 22%); }
.month-band strong { font-size: .84rem; letter-spacing: .025em; text-transform: uppercase; }.month-band span { color: rgb(255 255 255 / 70%); font-size: .65rem; font-weight: 700; }
.grid-corner, .day-header { position: sticky; top: 42px; z-index: 9; min-height: 82px; background: #f2f7f9; border-bottom: 2px solid #99b4bd; }
.sticky-col { position: sticky; left: 0; z-index: 8; }
.grid-corner { z-index: 14; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; color: #fff; background: #174e62; }
.grid-corner span { font-size: .84rem; font-weight: 850; }.grid-corner small { color: rgb(255 255 255 / 68%); font-size: .69rem; }
.day-header { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 20px 1fr; align-items: center; gap: 0 7px; padding: 8px 10px 9px 13px; }
.day-header small { grid-column: 1 / -1; color: #71868e; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.day-header strong { font-size: 1.55rem; line-height: 1; letter-spacing: -.05em; }
.day-header span { color: var(--ink-muted); font-size: .76rem; font-weight: 750; }
.day-note-button { position: relative; display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid #bdccd1; border-radius: 8px; color: #5c737c; background: rgb(255 255 255 / 72%); cursor: pointer; }
.day-note-button:hover, .day-note-button:focus-visible { outline: 0; color: #fff; border-color: var(--primary); background: var(--primary); }.day-note-button span { color: inherit; font-size: .8rem; line-height: 1; }
.day-note-button.has-notes { color: #0f5269; border-color: #63a9bd; background: #d8eef4; }.day-note-button.has-open-task { color: #6b3e00; border-color: #e9a837; background: #fff1c7; }
.day-note-button b { position: absolute; top: -7px; right: -7px; display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 3px; border: 2px solid #f2f7f9; border-radius: 99px; color: #fff; background: #176b87; font-size: .48rem; line-height: 1; }
.day-header.weekend { background: #fff7ef; }
.day-header.today { color: var(--primary-strong); background: #dff4fa; box-shadow: inset 0 3px 0 var(--primary); }
.day-header.month-start, .assignment-cell.month-start { border-left: 3px solid #6d97a6; }
.row-label { position: sticky; left: 0; z-index: 7; min-height: 176px; display: flex; flex-direction: column; justify-content: center; padding: 14px 10px 14px 17px; background: #f8fbfc; box-shadow: 5px 0 10px rgb(25 70 84 / 5%); }
.row-accent { position: absolute; inset: 12px auto 12px 8px; width: 5px; border-radius: 99px; background: linear-gradient(var(--shift-color), var(--area-color)); }
.row-label strong { font-size: 1.05rem; letter-spacing: -.025em; }
.row-label > span:not(.row-accent) { margin-top: 2px; color: var(--ink-muted); font-size: .77rem; font-weight: 750; }
.row-label small { margin-top: 9px; color: var(--primary-strong); font-size: .68rem; font-weight: 850; line-height: 1.25; }
.today-toolbar-button { align-self: flex-end; }
.assignment-cell { position: relative; min-height: 176px; padding: 9px 8px 34px; background: #fff; transition: background .15s ease, box-shadow .15s ease; }
.assignment-cell.weekend { background: #fffaf5; }
.assignment-cell.today { box-shadow: inset 2px 0 0 rgb(23 107 135 / 45%), inset -2px 0 0 rgb(23 107 135 / 45%); }
.assignment-cell.drop-over, .assignment-cell.move-target:hover { z-index: 2; background: #e1f3f7; box-shadow: inset 0 0 0 3px var(--primary); }
.assignment-cell.move-target { cursor: crosshair; background-image: linear-gradient(135deg, transparent 0 48%, rgb(23 107 135 / 5%) 48% 52%, transparent 52%); background-size: 18px 18px; }
.assignment-list { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.person-card { position: relative; display: flex; width: 100%; min-width: 0; min-height: 42px; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--status-color) 72%, #87979d); border-radius: 10px; color: var(--status-text); background: var(--status-color); text-align: left; box-shadow: 0 1px 2px rgb(20 47 57 / 9%); cursor: grab; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.person-card:hover { z-index: 2; transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 5px 12px rgb(20 47 57 / 17%); }
.person-card:focus-visible { z-index: 3; outline: 3px solid rgb(23 107 135 / 28%); outline-offset: 2px; }
.person-card.dragging { opacity: .42; transform: scale(.97); }
.person-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: var(--person-color); font-size: .59rem; font-weight: 900; letter-spacing: -.02em; }
.person-card-copy { min-width: 0; display: flex; flex-direction: column; }
.person-card-copy strong { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.23; white-space: normal; }
.person-card-copy small { margin-top: 2px; font-size: .58rem; font-weight: 800; line-height: 1.15; opacity: .76; }
.overtime-mark { flex: 0 0 auto; padding: 2px 5px; border: 1px solid currentColor; border-radius: 6px; font-size: .5rem; font-weight: 950; white-space: nowrap; opacity: .84; }
.note-mark { position: absolute; top: 3px; right: 4px; color: currentColor; font-size: .43rem; opacity: .75; }
.supervisor-mark { flex: 0 0 auto; padding: 2px 4px; border: 1px solid currentColor; border-radius: 5px; font-size: .47rem; font-weight: 950; letter-spacing: .035em; opacity: .78; }
.future-mark { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #fff; background: rgb(17 74 94 / 78%); font-size: .62rem; font-weight: 900; }
.cell-add { position: absolute; right: 7px; bottom: 7px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px dashed #9fb4bc; border-radius: 8px; color: #61767e; background: rgb(255 255 255 / 78%); font-size: 1rem; cursor: pointer; opacity: .25; transition: opacity .15s ease, color .15s ease, background .15s ease; }
.assignment-cell:hover .cell-add, .cell-add:focus-visible { opacity: 1; color: #fff; background: var(--primary); border-style: solid; }
.loading-panel, .empty-state { grid-column: 1 / -1; display: grid; min-width: min(900px, 90vw); min-height: 440px; place-items: center; align-content: center; gap: 12px; padding: 40px; color: var(--ink-muted); background: var(--surface); text-align: center; }
.empty-state strong { color: var(--ink); font-size: 1.05rem; }.empty-state p { max-width: 460px; margin: 0; }
.spinner { width: 35px; height: 35px; border: 4px solid #d7e5e9; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }

.report-panel { overflow: hidden; margin-top: 18px; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.bottom-legend { margin-top: 18px; margin-bottom: 0; }
.report-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--outline); background: linear-gradient(180deg, #fff, #fbfdfe); }
.report-heading h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }.report-heading p:last-child { margin: 5px 0 0; color: var(--ink-muted); font-size: .75rem; }
.report-period { flex: 0 0 auto; padding: 7px 10px; border-radius: 10px; color: var(--primary-strong); background: var(--primary-soft); font-size: .7rem; font-weight: 850; }
.summary-table-scroll { overflow-x: auto; scrollbar-color: #8baeb9 #eaf0f3; }
.summary-table-scroll:focus-visible { outline: 3px solid rgb(23 107 135 / 22%); outline-offset: -3px; }
.summary-table { width: max-content; min-width: 100%; border-spacing: 0; border-collapse: separate; color: #344b55; font-size: .72rem; }
.summary-table th, .summary-table td { min-width: 68px; padding: 9px 10px; border-right: 1px solid #e1e9ec; border-bottom: 1px solid #e1e9ec; text-align: center; white-space: nowrap; }
.summary-table thead th { color: #3c5661; background: #edf4f6; font-size: .64rem; font-weight: 850; }
.summary-table thead tr:first-child th:not(.person-summary-head, .summary-total-head) { border-top: 5px solid var(--summary-color); }
.summary-table thead tr:nth-child(2) th:nth-child(even), .summary-table .cumulative-cell { background: #f4f8fa; }
.summary-table .person-summary-head { position: sticky; left: 0; z-index: 4; min-width: 230px; color: #fff; background: #174e62; text-align: left; }
.summary-table .person-summary-cell { position: sticky; left: 0; z-index: 2; display: flex; min-width: 230px; align-items: center; gap: 9px; color: var(--ink); background: #fff; text-align: left; }
.summary-table tbody tr:hover td, .summary-table tbody tr:hover .person-summary-cell { background: #f2f8fa; }
.mini-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: var(--person-color); font-size: .61rem; font-weight: 900; }
.person-summary-cell > span:last-child { display: flex; min-width: 0; flex-direction: column; }.person-summary-cell strong { font-size: .74rem; }.person-summary-cell small { color: var(--ink-muted); font-size: .58rem; }
.summary-table .summary-total-head, .summary-table .summary-total { color: #4d2a67; background: #f3eafa; font-weight: 900; }
.summary-table tfoot th, .summary-table tfoot td { border-bottom: 0; color: #fff; background: #174e62; font-weight: 900; }
.summary-table tfoot th { position: sticky; left: 0; z-index: 3; min-width: 230px; text-align: left; }
.summary-table tfoot td.cumulative-cell { color: #153f4f; background: #dcecf1; }
.summary-table tfoot td.summary-total { color: #4d2a67; background: #eadff2; }
.zero-count { color: #a8b5ba; font-weight: 500; }
.summary-table tfoot .zero-count { color: inherit; opacity: .68; }
.count-with-hours { display: inline-block; min-width: 22px; border-bottom: 1px dotted #5c7d89; cursor: help; font-weight: 850; }
.upgrade-card { max-width: 850px; }.upgrade-card .settings-form { align-items: flex-start; flex-direction: column; }

.app-dialog { width: min(610px, calc(100vw - 28px)); max-height: calc(100vh - 36px); padding: 0; overflow: hidden; border: 0; border-radius: 24px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 70px rgb(9 35 44 / 32%); }
.app-dialog.compact { width: min(440px, calc(100vw - 28px)); }
.app-dialog::backdrop { background: rgb(8 29 38 / 55%); backdrop-filter: blur(4px); }
.app-dialog[open] { animation: dialog-in .18s ease-out; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; border-bottom: 1px solid var(--outline); }
.dialog-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.dialog-body { display: grid; gap: 16px; max-height: calc(100vh - 235px); padding: 20px 24px; overflow-y: auto; }
.dialog-body p { margin: 0; color: var(--ink-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 20px 19px; border-top: 1px solid var(--outline); }
.dialog-actions.split { justify-content: space-between; }
.dialog-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
.context-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.context-strip span { padding: 6px 9px; border-radius: 9px; color: #37505b; background: var(--surface-3); font-size: .72rem; font-weight: 750; }
.day-note-dialog { width: min(720px, calc(100vw - 28px)); }.day-note-dialog .dialog-body { gap: 18px; }
.inline-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.day-note-list { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--outline); }
.day-note-list > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: .9rem; }.day-note-list > h3 span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 99px; color: var(--primary-strong); background: var(--primary-soft); font-size: .65rem; }
.day-note-item { display: grid; gap: 7px; padding: 12px 13px; border: 1px solid var(--outline); border-radius: 13px; background: #fbfdfe; }.day-note-item.completed { opacity: .66; background: #f3f6f7; }
.day-note-item-head { display: flex; align-items: center; gap: 7px; }.day-note-item-head .note-type, .day-note-item-head b { padding: 4px 7px; border-radius: 7px; color: #174e62; background: #dfeff3; font-size: .6rem; font-weight: 900; }.day-note-item-head .note-type.gelecek_is { color: #704000; background: #fff0c3; }.day-note-item-head b { margin-left: auto; color: #14613e; background: #dcfae6; }
.day-note-item p { color: var(--ink) !important; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; }.day-note-item > small { color: var(--ink-muted); font-size: .64rem; }
.day-note-actions { display: flex; justify-content: flex-end; gap: 3px; }.empty-day-notes { display: grid; gap: 3px; padding: 17px; border: 1px dashed #b9cbd2; border-radius: 13px; color: var(--ink-muted); background: #f8fbfc; text-align: center; }.empty-day-notes strong { color: var(--ink); font-size: .8rem; }.empty-day-notes span { font-size: .7rem; }

.field { display: flex; flex-direction: column; gap: 6px; color: #344b55; font-size: .78rem; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--outline-strong); border-radius: 12px; outline: 0; color: var(--ink); background: #fff; font-size: .88rem; font-weight: 500; transition: border-color .15s ease, box-shadow .15s ease; }
.field input, .field select { height: 45px; padding: 0 12px; }
.field textarea { min-height: 96px; padding: 11px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(23 107 135 / 12%); }
.field.attention-field > span { color: #9b256f; }.field.attention-field input { border-color: #d891bd; background: #fff8fc; }
.field select#assignmentStatus { border-left: 7px solid var(--selected-color, var(--outline)); }
.field small { color: var(--ink-muted); font-size: .68rem; font-weight: 500; }
.form-stack { display: grid; gap: 17px; }
.form-grid { display: grid; gap: 14px; }.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.span-two { grid-column: 1 / -1; }
fieldset { display: grid; gap: 14px; margin: 0; padding: 16px; border: 1px solid var(--outline); border-radius: 16px; }
legend { padding: 0 7px; color: var(--primary-strong); font-size: .76rem; font-weight: 850; }
.segmented { display: inline-flex; padding: 3px; border-radius: 13px; background: var(--surface-3); }
.segmented.full { display: grid; grid-template-columns: 1fr 1fr; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; min-height: 39px; place-items: center; padding: 0 12px; border-radius: 10px; color: var(--ink-muted); font-size: .76rem; font-weight: 800; }
.segmented input:checked + span { color: var(--primary-strong); background: #fff; box-shadow: 0 2px 8px rgb(15 52 67 / 12%); }
.check-row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check-row input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--primary); }
.check-row > span { display: flex; flex-direction: column; font-size: .82rem; }.check-row small { margin-top: 2px; color: var(--ink-muted); font-size: .7rem; }
.alert { padding: 12px 14px; border-radius: 13px; font-size: .78rem; font-weight: 650; }
.alert.error { color: #7a271a; background: #fee4e2; border: 1px solid #fecdca; }
.alert.success { color: #08603e; background: #dcfae6; border: 1px solid #abefc6; }

.auth-body { background: #eef4f6; }
.login-shell, .install-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, .95fr) minmax(430px, 1.05fr); }
.login-brand-panel, .install-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 100px); color: #fff; background: linear-gradient(145deg, #123c4d, #176b87 62%, #2c8d9d); }
.login-brand-panel::after, .install-intro::after { content: ""; position: absolute; width: 440px; height: 440px; right: -190px; bottom: -170px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; box-shadow: 0 0 0 65px rgb(255 255 255 / 4%), 0 0 0 130px rgb(255 255 255 / 3%); }
.login-brand-panel .eyebrow, .install-intro .eyebrow { margin-top: 28px; color: #b9ecf4; }
.login-brand-panel h1, .install-intro h1 { position: relative; z-index: 1; max-width: 650px; margin: 0; font-size: clamp(2.25rem, 4.6vw, 4.5rem); line-height: 1.02; letter-spacing: -.055em; }
.login-brand-panel > p:last-of-type, .install-intro > p:last-of-type { position: relative; z-index: 1; max-width: 600px; color: rgb(255 255 255 / 76%); font-size: 1rem; }
.shift-preview { display: flex; gap: 9px; margin-top: 22px; }.shift-preview span { padding: 9px 13px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 11px; background: rgb(255 255 255 / 9%); font-size: .78rem; font-weight: 850; }
.feature-checks { position: relative; z-index: 1; display: grid; gap: 10px; padding: 0; margin: 25px 0 0; list-style: none; color: rgb(255 255 255 / 83%); font-size: .84rem; }
.feature-checks li::before { content: "✓"; display: inline-grid; width: 23px; height: 23px; place-items: center; margin-right: 9px; border-radius: 8px; color: #123c4d; background: #b9ecf4; font-weight: 950; }
.auth-card { align-self: center; width: min(520px, calc(100% - 42px)); margin: 42px auto; padding: clamp(26px, 4vw, 42px); border: 1px solid var(--outline); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); }
.install-card { width: min(680px, calc(100% - 42px)); }
.auth-card-head { margin-bottom: 24px; }.auth-card-head h2 { margin: 0; font-size: 1.75rem; letter-spacing: -.035em; }.auth-card-head > p:last-child { margin: 7px 0 0; color: var(--ink-muted); font-size: .83rem; }
.auth-foot { margin: 20px 0 0; color: #87969c; font-size: .68rem; text-align: center; }

.compact-summary .summary-card { min-height: 88px; }
.data-panel { overflow: hidden; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.data-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--outline); background: linear-gradient(180deg, #fff, #fbfdfe); }
.search-field { display: flex; width: min(520px, 100%); min-height: 44px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--outline); border-radius: 13px; color: #72858d; background: var(--surface-2); }
.search-field:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgb(23 107 135 / 10%); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .84rem; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.data-table th { padding: 12px 15px; border-bottom: 1px solid var(--outline); color: #63757d; background: #f4f8f9; font-size: .68rem; font-weight: 850; text-align: left; text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; }
.data-table td { padding: 13px 15px; border-bottom: 1px solid #e8eef0; color: #374d56; font-size: .78rem; vertical-align: middle; }
.data-table tbody tr { transition: background .14s ease; }.data-table tbody tr:hover { background: #f6fafb; }.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .actions-cell { width: 165px; text-align: right; white-space: nowrap; }
.data-table .actions-cell .icon-button, .data-table .actions-cell .button { display: inline-grid; vertical-align: middle; }
.order-buttons { display: grid; grid-template-columns: 30px 26px 30px; align-items: center; width: max-content; border: 1px solid var(--outline); border-radius: 11px; background: var(--surface-2); }
.order-buttons span { color: var(--ink-muted); font-size: .68rem; font-weight: 850; text-align: center; }
.icon-button.mini { width: 30px; height: 32px; border-radius: 9px; font-size: .92rem; }
.person-identity { display: flex; min-width: 210px; align-items: center; gap: 10px; }
.table-avatar { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #fff; background: var(--person-color); font-size: .7rem; font-weight: 900; }
.person-identity > span:last-child, .stacked-cell { display: flex; min-width: 0; flex-direction: column; }
.person-identity strong, .stacked-cell strong { color: var(--ink); font-size: .8rem; }.person-identity small, .stacked-cell small { margin-top: 2px; color: var(--ink-muted); font-size: .68rem; }
.table-chip { display: inline-flex; padding: 5px 9px; border-radius: 9px; color: var(--primary-strong); background: var(--primary-soft); font-size: .7rem; font-weight: 850; }
.state-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 850; }
.state-badge i { width: 7px; height: 7px; border-radius: 50%; }.state-badge.active { color: #08603e; background: #dcfae6; }.state-badge.active i { background: #17b26a; }.state-badge.passive { color: #5f6d73; background: #e9eef0; }.state-badge.passive i { background: #98a2a8; }
.passive-row { opacity: .64; }.button.mini { min-height: 34px; padding: 0 9px; font-size: .68rem; }.button.text.mini.danger { color: var(--danger); }
.inline-loading { display: flex; min-height: 330px; align-items: center; justify-content: center; gap: 12px; color: var(--ink-muted); font-size: .8rem; font-weight: 750; }.inline-loading .spinner { width: 27px; height: 27px; border-width: 3px; }
.table-empty { min-width: 0; min-height: 300px; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.settings-layout.single-settings { grid-template-columns: 1fr; }
.settings-subnav { display: flex; gap: 7px; overflow-x: auto; margin: -7px 0 17px; padding: 5px; border: 1px solid var(--outline); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-1); scrollbar-width: thin; }
.settings-subnav a { flex: 0 0 auto; display: inline-flex; min-height: 38px; align-items: center; padding: 0 13px; border-radius: 10px; color: var(--ink-muted); font-size: .75rem; font-weight: 800; }
.settings-subnav a:hover { color: var(--primary-strong); background: var(--primary-soft); }.settings-subnav a.active { color: #fff; background: var(--primary); }
.settings-card { padding: 21px; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.settings-card.span-all { grid-column: 1 / -1; }
.section-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }.section-head p:last-child { margin: 5px 0 0; color: var(--ink-muted); font-size: .75rem; }
.settings-form { display: flex; align-items: flex-end; gap: 12px; }.settings-form .field { flex: 1; }
.settings-grid { display: grid; gap: 13px; }.settings-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.settings-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid > .inline-loading { grid-column: 1 / -1; min-height: 220px; }
.config-tile { position: relative; overflow: hidden; display: grid; gap: 13px; padding: 16px; border: 1px solid var(--outline); border-radius: 16px; background: #fbfdfe; }
.config-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tile-color); }
.config-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.config-code { display: inline-flex; width: max-content; padding: 5px 8px; border-radius: 8px; color: #4b6069; background: #e9f0f2; font: 800 .64rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.compact-form-grid { gap: 9px; }
.color-field { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; color: #344b55; font-size: .72rem; font-weight: 800; }
.color-field input { width: 40px; height: 35px; padding: 2px; border: 1px solid var(--outline); border-radius: 9px; background: #fff; cursor: pointer; }
.color-field code { color: var(--ink-muted); font-size: .65rem; }.color-field.mini { grid-template-columns: auto auto; }.color-field.mini > span { grid-column: 1 / -1; }
.switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > span { position: relative; width: 35px; height: 20px; flex: 0 0 auto; border-radius: 99px; background: #b8c5ca; transition: background .15s ease; }
.switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform .15s ease; }
.switch input:checked + span { background: var(--primary); }.switch input:checked + span::after { transform: translateX(15px); }.switch input:focus-visible + span { outline: 3px solid rgb(23 107 135 / 20%); outline-offset: 2px; }.switch input:disabled + span { opacity: .48; }
.switch em { color: var(--ink-muted); font-size: .67rem; font-style: normal; font-weight: 750; white-space: nowrap; }
.status-settings { display: grid; gap: 9px; }
.title-settings { display: grid; gap: 9px; }
.title-config-row { display: grid; grid-template-columns: 130px minmax(220px, 1fr) auto auto auto; gap: 13px; align-items: end; padding: 12px; border: 1px solid var(--outline); border-radius: 15px; background: #fbfdfe; }
.new-config-row { border-color: #7cb8ca; background: #f0fafc; box-shadow: inset 4px 0 0 var(--primary); }
.settings-narrow { max-width: 720px; }.notification-note { max-width: 720px; margin-top: 18px; }.alert.info { color: #174e62; border: 1px solid #acd4df; background: #e9f7fa; }
.upgrade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.upgrade-grid .span-all { grid-column: 1 / -1; }
.file-drop { display: grid; gap: 7px; padding: 18px; border: 2px dashed #9fc1cc; border-radius: 15px; background: #f4fafc; }
.file-drop > span { color: var(--ink); font-size: .82rem; font-weight: 850; }.file-drop input { max-width: 100%; font-size: .78rem; }.file-drop small { color: var(--ink-muted); font-size: .68rem; }
.upload-error { margin-bottom: 16px; }.upload-error pre { overflow: auto; max-height: 260px; margin: 9px 0 0; white-space: pre-wrap; font: 500 .72rem/1.5 var(--font); }
.status-config-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--outline); border-radius: 15px; background: #fbfdfe; }
.status-preview { display: flex; min-height: 52px; flex-direction: column; justify-content: center; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--status-preview) 70%, #78909a); border-radius: 11px; color: var(--status-preview-text); background: var(--status-preview); }
.status-preview span { overflow: hidden; font-size: .72rem; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }.status-preview small { opacity: .72; font-size: .61rem; font-weight: 800; }
.status-fields { display: grid; grid-template-columns: 110px minmax(160px, 1.35fr) 78px 78px auto auto auto; gap: 10px; align-items: end; }.status-fields .button { min-height: 40px; }

.context-menu { position: fixed; z-index: 90; width: min(286px, calc(100vw - 16px)); overflow: hidden; padding: 8px; border: 1px solid var(--outline); border-radius: 15px; background: #fff; box-shadow: var(--shadow-2); }
.context-menu > strong { display: block; overflow: hidden; padding: 8px 10px 9px; color: var(--primary-strong); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.context-menu button { display: flex; width: 100%; min-height: 40px; align-items: center; padding: 0 11px; border: 0; border-radius: 10px; color: #354d57; background: transparent; font-size: .76rem; font-weight: 750; text-align: left; cursor: pointer; }
.context-menu button:hover, .context-menu button:focus-visible { outline: 0; color: var(--primary-strong); background: var(--primary-soft); }
.contact-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--outline); border-radius: 13px; background: var(--surface-2); }
.contact-strip strong { font-size: .88rem; }.contact-strip span { color: var(--ink-muted); font-size: .72rem; }
.compact-check { min-height: 72px; margin: 0; }
.form-help, .empty-copy { margin: 12px 0 0; color: var(--ink-muted); font-size: .74rem; }
.future-list { display: grid; gap: 8px; max-height: 240px; overflow: auto; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--outline); }
.future-list h3 { margin: 0 0 2px; font-size: .86rem; }
.future-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--outline); border-radius: 12px; background: #fbfdfe; }
.future-item.inactive { opacity: .58; }.future-item > div { display: flex; min-width: 0; flex-direction: column; }.future-item strong { font-size: .76rem; }.future-item small { overflow: hidden; margin-top: 2px; color: var(--ink-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.choice-stack { display: grid; gap: 10px; }
.choice-button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px; border: 1px solid var(--outline); border-radius: 13px; color: var(--primary-strong); background: #f7fbfc; text-align: left; cursor: pointer; }
.choice-button:hover { border-color: var(--primary); background: var(--primary-soft); }.choice-button.warning { color: #7a3e00; background: #fff8e7; }.choice-button.warning:hover { border-color: #f59e0b; background: #fff1c7; }
.choice-button strong { font-size: .82rem; }.choice-button small { color: var(--ink-muted); font-size: .69rem; }
.profile-card { width: min(620px, 100%); }
.user-role-layout { align-items: start; }
.management-list { display: grid; gap: 9px; }
.management-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--outline); border-radius: 14px; background: #fbfdfe; }
.management-row.inactive { opacity: .58; }.management-row > div:first-child { display: flex; min-width: 0; flex-direction: column; }.management-row > div:last-child { display: flex; gap: 5px; }
.management-row strong { font-size: .8rem; }.management-row small { overflow: hidden; margin-top: 2px; color: var(--ink-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.permission-option { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--outline); border-radius: 11px; color: #3e545d; background: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; }
.permission-option input { width: 17px; height: 17px; accent-color: var(--primary); }
.inline-mini-loading { padding: 15px; color: var(--ink-muted); background: var(--surface-2); border-radius: 11px; font-size: .72rem; text-align: center; }
.detail-list { display: grid; gap: 8px; max-height: min(58vh, 520px); overflow: auto; }
.detail-row { display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid var(--outline); border-radius: 12px; background: #fbfdfe; }
.detail-row > span { display: grid; min-height: 34px; place-items: center; border-radius: 9px; color: var(--primary-strong); background: var(--primary-soft); font-size: .7rem; font-weight: 900; }
.detail-row > div { display: flex; min-width: 0; flex-direction: column; }.detail-row strong { font-size: .78rem; }.detail-row small { margin-top: 2px; overflow: hidden; color: var(--ink-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.personal-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-word { font-size: 1.15rem !important; letter-spacing: -.02em !important; }
#myOvertimeHours { font-size: 1.3rem; letter-spacing: -.025em; }
.personal-calendar-panel { overflow: hidden; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); }
.personal-calendar-weekdays, .personal-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.personal-calendar-weekdays { color: #48616b; background: #eaf2f5; border-bottom: 1px solid var(--outline); }
.personal-calendar-weekdays span { padding: 10px 8px; border-right: 1px solid #d9e4e8; font-size: .68rem; font-weight: 850; text-align: center; }
.personal-calendar-weekdays span:last-child { border-right: 0; }
.personal-calendar { gap: 1px; background: #dce6ea; }
.personal-day-placeholder { min-height: 142px; background: #f4f7f8; }
.personal-day { min-width: 0; min-height: 142px; padding: 9px; background: #fff; }
.personal-day.weekend { background: #fffaf5; }
.personal-day.default-weekly-off { background: #f3fbf5; box-shadow: inset 0 3px 0 rgb(58 135 80 / 48%); }
.personal-day.today { box-shadow: inset 0 0 0 3px rgb(23 107 135 / 52%); }
.personal-day > header { display: flex; align-items: baseline; gap: 6px; min-height: 28px; }
.personal-day > header strong { color: var(--ink); font-size: 1.2rem; line-height: 1; }
.personal-day > header span { color: var(--ink-muted); font-size: .63rem; font-weight: 750; }
.personal-day > header .personal-day-badges { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.personal-day > header i { padding: 2px 5px; border-radius: 99px; color: var(--primary-strong); background: var(--primary-soft); font-size: .48rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.personal-day > header i.weekly-off-badge { color: #246238; background: #dff3e5; }
.personal-day-assignments { display: grid; gap: 5px; }
.personal-shift-card { display: grid; gap: 3px; min-width: 0; padding: 7px; border: 1px solid color-mix(in srgb, var(--status-color) 70%, #81939a); border-radius: 9px; color: var(--status-text); background: var(--status-color); }
.personal-shift-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.personal-shift-card strong { font-size: .76rem; }.personal-shift-card > div span { font-size: .52rem; font-weight: 800; white-space: nowrap; }
.personal-shift-card small { overflow: hidden; font-size: .55rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; opacity: .76; }
.personal-status { font-size: .58rem; font-weight: 900; }.personal-hours { font-size: .54rem; font-weight: 750; opacity: .78; }
.personal-empty-day { display: grid; min-height: 73px; place-items: center; color: #9aa9ae; font-size: .62rem; text-align: center; }
.personal-empty-day.weekly-off { align-content: center; gap: 3px; color: #347047; }
.personal-empty-day.weekly-off strong { font-size: .68rem; }.personal-empty-day.weekly-off span { max-width: 105px; font-size: .54rem; line-height: 1.25; }
.personal-loading { grid-column: 1 / -1; display: grid; min-height: 360px; place-items: center; align-content: center; gap: 12px; padding: 32px; color: var(--ink-muted); background: #fff; text-align: center; }
.personal-loading p { max-width: 520px; margin: 0; }.personal-loading.error-state strong { color: var(--danger); }

.report-controls { margin-bottom: 18px; }
.puantaj-export-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; border-color: #aad1dc; background: linear-gradient(120deg, #f7fcfd, #fff); }
.puantaj-export-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }.puantaj-export-copy .summary-icon { --accent: #176b87; }.puantaj-export-copy h2 { margin: 0; font-size: 1.05rem; }.puantaj-export-copy p:last-child { max-width: 760px; margin: 4px 0 0; color: var(--ink-muted); font-size: .72rem; }
.puantaj-export-controls { display: grid; grid-template-columns: 160px auto; gap: 9px; align-items: end; flex: 0 0 auto; }.puantaj-export-controls .button { white-space: nowrap; }
.report-control-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) 130px minmax(150px, .7fr) auto; gap: 12px; align-items: end; }
.report-control-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.report-output-wrap { overflow-x: auto; border: 1px solid var(--outline); border-radius: 20px; background: #e9eef0; box-shadow: var(--shadow-1); }
.report-paper { min-width: 900px; padding: 24px; background: #fff; }
.report-print-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding-bottom: 11px; border-bottom: 2px solid #174e62; }
.report-print-header p { margin: 0 0 3px; color: var(--primary); font-size: .67rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.report-print-header h2 { margin: 0; font-size: 1.22rem; line-height: 1.15; }
.report-print-header > span { color: var(--ink-muted); font-size: .7rem; font-weight: 750; text-align: right; }
.roster-table, .detail-summary-table, .detail-record-table { width: 100%; border-spacing: 0; border-collapse: collapse; color: #20343d; }
.roster-table { table-layout: fixed; font-size: .55rem; }
.roster-table th, .roster-table td { height: 48px; padding: 3px 2px; border: 1px solid #b9c9cf; vertical-align: top; text-align: center; }
.roster-table thead th { height: 25px; color: #fff; background: #174e62; vertical-align: middle; font-size: .55rem; }
.roster-table .roster-label-head, .roster-table tbody th { width: 112px; }
.roster-table tbody th { padding: 5px; color: #143f50; background: #eaf2f5; vertical-align: middle; text-align: left; }
.roster-table tbody th strong, .roster-table tbody th small { display: block; }.roster-table tbody th strong { font-size: .7rem; }.roster-table tbody th small { margin-top: 2px; color: #536b74; font-size: .5rem; }
.roster-table td > span { display: block; overflow: hidden; padding: 1px; border-bottom: 1px dotted #d6e0e3; font-size: .5rem; font-weight: 750; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.roster-table td > span:last-child { border-bottom: 0; }.roster-table td em { margin-left: 2px; color: #a33c25; font-size: .4rem; font-style: normal; }.roster-table td b { margin-left: 2px; color: #8a246e; font-size: .4rem; }
.report-print-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 10px; padding-top: 7px; border-top: 1px solid #ccd8dc; color: #60737b; font-size: .56rem; }
.report-print-footer > div { display: flex; flex-wrap: wrap; gap: 3px 10px; }.report-print-footer strong { color: #314b55; }
.report-table-scroll { overflow-x: auto; }
.detail-report h3 { margin: 22px 0 8px; font-size: .9rem; }
.detail-summary-table, .detail-record-table { font-size: .68rem; }
.detail-summary-table th, .detail-summary-table td, .detail-record-table th, .detail-record-table td { padding: 7px 8px; border: 1px solid #ccd8dc; text-align: center; white-space: nowrap; }
.detail-summary-table thead th, .detail-record-table thead th { color: #fff; background: #174e62; font-size: .6rem; }
.detail-summary-table tbody th { min-width: 180px; background: #f1f6f8; text-align: left; }.detail-summary-table tbody th strong, .detail-summary-table tbody th small { display: block; }.detail-summary-table tbody th small { color: var(--ink-muted); font-size: .55rem; font-weight: 600; }
.detail-record-table td:nth-child(2), .detail-record-table td:last-child { text-align: left; }.detail-record-table td:last-child { min-width: 180px; white-space: normal; }
.empty-report-cell { height: 90px !important; color: var(--ink-muted); text-align: center !important; }

.toast-stack { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(390px, calc(100vw - 30px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--outline); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: var(--shadow-2); font-size: .8rem; font-weight: 700; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }.toast-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--success); }.toast.error .toast-dot { background: var(--danger); }.toast.info .toast-dot { background: var(--primary); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width: 1180px) {
    .side-nav { transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-2); }
    .side-nav.open { transform: translateX(0); }
    body.nav-collapsed .side-nav { width: var(--nav-w); padding: 18px 14px 14px; }
    body.nav-collapsed .side-nav .nav-item { justify-content: flex-start; padding: 0 15px; }
    body.nav-collapsed .side-nav .nav-item span, body.nav-collapsed .side-nav .version { display: initial; }
    .page-shell, body.nav-collapsed .page-shell { margin-left: 0; }
    .edit-activity-bar, body.nav-collapsed .edit-activity-bar { left: 0; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .annual-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .settings-grid.three { grid-template-columns: 1fr; }.status-config-row { grid-template-columns: 125px 1fr; }.status-fields { grid-template-columns: 90px minmax(140px, 1fr) 78px 78px; }.status-fields .switch, .status-fields .button { align-self: center; }
    .title-config-row { grid-template-columns: 100px minmax(180px, 1fr) auto auto; }.title-config-row .button { grid-column: 2 / -1; justify-self: end; }
}

@media (max-width: 820px) {
    .brand-copy small, .sync-state span { display: none; }
    .page-heading, .schedule-toolbar, .report-heading { align-items: stretch; flex-direction: column; }
    .heading-actions { justify-content: space-between; }
    .toolbar-controls { flex-wrap: wrap; }
    .compact-field { flex: 1 1 180px; }.compact-field select { width: 100%; min-width: 0; }
    .legend-card { align-items: stretch; flex-direction: column; gap: 10px; }
    .data-toolbar { align-items: stretch; flex-direction: column; }.data-toolbar .compact-field { flex: none; }
    .settings-layout { grid-template-columns: 1fr; }.settings-card.span-all { grid-column: auto; }.settings-grid.two { grid-template-columns: 1fr; }.status-config-row { grid-template-columns: 1fr; }.status-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }.status-fields .config-code, .status-fields .field { grid-column: 1 / -1; }
    .title-config-row { grid-template-columns: 1fr 1fr; }.title-config-row .config-code, .title-config-row .field { grid-column: 1 / -1; }.title-config-row .button { grid-column: 1 / -1; width: 100%; }
    .login-shell, .install-shell { grid-template-columns: 1fr; }
    .user-role-layout { grid-template-columns: 1fr; }.permission-grid { grid-template-columns: 1fr; }
    .upgrade-grid { grid-template-columns: 1fr; }.upgrade-grid .span-all { grid-column: auto; }
    .personal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.personal-calendar-weekdays { display: none; }.personal-calendar { grid-template-columns: repeat(4, minmax(0, 1fr)); }.personal-day-placeholder { display: none; }
    .report-control-grid { grid-template-columns: 1fr 1fr; }.report-control-grid > .field:first-child { grid-column: 1 / -1; }.report-control-actions { grid-column: 1 / -1; }.report-control-actions .button { flex: 1; }
    .puantaj-export-card { align-items: stretch; flex-direction: column; gap: 14px; }.puantaj-export-controls { grid-template-columns: 1fr auto; }
    .login-brand-panel, .install-intro { min-height: 390px; padding: 48px 30px; }
    .login-brand-panel h1, .install-intro h1 { font-size: clamp(2.1rem, 10vw, 3.6rem); }
}

@media (max-width: 560px) {
    :root { --appbar-h: 60px; --editbar-h: 32px; }
    .app-bar { padding: 0 12px; gap: 8px; }
    .brand-mark { width: 34px; height: 34px; border-radius: 11px; }.brand-copy strong { max-width: 138px; font-size: .76rem; }
    .user-copy { display: none; }.user-chip { padding: 4px; border: 0; background: transparent; }.sync-state { margin-left: auto; }
    .edit-activity-bar { justify-content: flex-start; padding-inline: 13px; font-size: .62rem; }.edit-activity-bar strong { font-size: .65rem; }.edit-activity-bar span { margin-left: auto; }
    .page-shell { padding: calc(var(--appbar-h) + 16px) 9px 28px; }body.has-edit-activity .page-shell { padding-top: calc(var(--appbar-h) + var(--editbar-h) + 14px); }
    .page-heading { gap: 12px; margin-bottom: 14px; }.page-heading h1 { font-size: 1.42rem; }.page-description { display: none; }.eyebrow { margin-bottom: 4px; font-size: .66rem; }
    .button { min-height: 38px; padding-inline: 13px; border-radius: 11px; font-size: .76rem; }.icon-button { width: 38px; height: 38px; border-radius: 11px; }
    .heading-actions { align-items: stretch; flex-direction: column; }.year-control { justify-content: space-between; }.heading-month { flex-basis: auto; }
    .summary-grid { gap: 7px; margin-bottom: 10px; }.summary-card { min-height: 70px; gap: 9px; padding: 10px; border-radius: 13px; }.summary-icon { width: 34px; height: 34px; border-radius: 11px; }.summary-icon .icon { width: 17px; height: 17px; }.summary-card strong { font-size: 1.2rem; }.summary-card small { font-size: .59rem; line-height: 1.2; }#statOvertime, #myOvertimeHours { font-size: .98rem; }
    .annual-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-panel, .report-panel, .data-panel, .personal-calendar-panel, .report-output-wrap { border-radius: 14px; }.schedule-toolbar { gap: 10px; padding: 11px; }.schedule-toolbar h2 { font-size: .9rem; }.schedule-toolbar p { display: none; }.toolbar-controls { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 7px; }.toolbar-controls .compact-field { flex: none; }.toolbar-controls .today-toolbar-button { width: 100%; }.scroll-buttons { justify-self: end; margin-left: 0; }
    .schedule-grid { grid-template-columns: 64px repeat(var(--day-count), 102px); }.grid-corner, .month-corner { padding-inline: 5px; }.month-corner { flex-direction: column; justify-content: center; align-items: flex-start; }.month-corner strong { font-size: .68rem; }.month-corner small { font-size: .47rem; }.grid-corner span { font-size: .55rem; }.grid-corner small { font-size: .47rem; }.grid-corner, .day-header { min-height: 74px; }.day-header { gap: 0 3px; padding: 6px 5px; }.day-header strong { font-size: 1.25rem; }.day-header > span { font-size: .63rem; }.day-note-button { width: 23px; height: 23px; border-radius: 7px; }.day-note-button b { top: -6px; right: -5px; min-width: 14px; height: 14px; border-width: 1px; font-size: .43rem; }.row-label { min-height: 148px; padding: 8px 3px 8px 10px; }.row-accent { left: 2px; width: 3px; }.row-label strong { font-size: .7rem; }.row-label > span:not(.row-accent) { font-size: .49rem; }.row-label small { margin-top: 4px; font-size: .46rem; overflow-wrap: anywhere; }
    .assignment-cell { min-height: 148px; padding: 5px 4px 28px; }.assignment-list { gap: 3px; }.person-card { min-height: 34px; gap: 3px; padding: 4px; border-radius: 8px; }.person-avatar { display: none; }.person-card-copy strong { font-size: .62rem; }.person-card-copy small { font-size: .47rem; }.supervisor-mark { padding-inline: 2px; font-size: .36rem; }.overtime-mark { padding-inline: 2px; font-size: .38rem; }.future-mark { width: 14px; height: 14px; font-size: .48rem; }.cell-add { right: 4px; bottom: 4px; width: 22px; height: 22px; }
    .report-heading { gap: 7px; padding: 13px; }.report-heading h2 { font-size: .98rem; }.report-heading p:last-child { display: none; }.summary-table { font-size: .64rem; }.summary-table th, .summary-table td { min-width: 56px; padding: 7px 8px; }.summary-table .person-summary-head, .summary-table .person-summary-cell, .summary-table tfoot th { min-width: 158px; }.mini-avatar { width: 26px; height: 26px; border-radius: 8px; }.person-summary-cell strong { font-size: .65rem; }
    .dialog-actions.split { align-items: stretch; flex-direction: column-reverse; }.dialog-actions.split > div { justify-content: flex-end; }
    .form-grid.two { grid-template-columns: 1fr; }.span-two { grid-column: auto; }
    .auth-card, .install-card { width: calc(100% - 20px); margin: 10px auto 26px; padding: 23px 18px; border-radius: 20px; }
    .login-brand-panel, .install-intro { min-height: 320px; padding: 36px 22px; }.feature-checks { display: none; }
    .toast-stack { right: 15px; bottom: 15px; }
    .settings-card { padding: 13px; border-radius: 14px; }.section-head { margin-bottom: 12px; }.section-head h2 { font-size: .96rem; }.section-head p:last-child { font-size: .67rem; }.settings-form { align-items: stretch; flex-direction: column; }.settings-subnav { margin-bottom: 11px; padding: 3px; border-radius: 12px; }.settings-subnav a { min-height: 34px; padding-inline: 10px; font-size: .67rem; }.status-fields { grid-template-columns: 1fr 1fr; }.config-tile, .status-config-row, .title-config-row, .management-row { padding: 10px; border-radius: 12px; }.permission-option { min-height: 39px; padding: 7px 9px; font-size: .68rem; }
    .data-toolbar { gap: 9px; padding: 10px; }.search-field { min-height: 39px; }.data-table { min-width: 860px; }.data-table th { padding: 8px 10px; font-size: .59rem; }.data-table td { padding: 9px 10px; font-size: .68rem; }.person-identity { min-width: 170px; }.table-avatar { width: 32px; height: 32px; border-radius: 10px; }
    .app-dialog, .app-dialog.compact, .day-note-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 17px; }.dialog-head { padding: 15px 15px 11px; }.dialog-head h2 { font-size: 1.05rem; }.dialog-body { max-height: calc(100vh - 184px); gap: 12px; padding: 13px 15px; }.dialog-actions { padding: 10px 12px 13px; }.field { gap: 4px; font-size: .7rem; }.field input, .field select { height: 40px; }.field input, .field select, .field textarea { font-size: .8rem; }.field textarea { min-height: 82px; }.inline-form-actions { flex-direction: column-reverse; }.inline-form-actions .button { width: 100%; }
    .personal-calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }.personal-day { min-height: 116px; padding: 5px; }.personal-day > header { min-height: 24px; }.personal-day > header strong { font-size: .9rem; }.personal-day > header span { font-size: .52rem; }.personal-day > header i { display: none; }.personal-shift-card { padding: 5px; }.personal-shift-card strong { font-size: .65rem; }.personal-shift-card small { font-size: .48rem; }
    .report-control-grid { grid-template-columns: 1fr; }.report-control-grid > .field:first-child, .report-control-actions { grid-column: auto; }.report-control-actions { flex-direction: column; }
    .puantaj-export-card { gap: 10px; }.puantaj-export-copy { align-items: flex-start; gap: 9px; }.puantaj-export-copy h2 { font-size: .92rem; }.puantaj-export-copy p:last-child { font-size: .64rem; }.puantaj-export-controls { grid-template-columns: 1fr; }.puantaj-export-controls .button { width: 100%; }.report-paper { min-width: 780px; padding: 15px; }
}

@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 {
    @page { size: A4 landscape; margin: 5mm; }
    html, body.reports-page { min-height: 0; background: #fff; }
    body.reports-page .app-bar, body.reports-page .side-nav, body.reports-page .nav-scrim, body.reports-page .reports-heading, body.reports-page .no-print, body.reports-page .toast-stack { display: none !important; }
    body.reports-page .page-shell, body.reports-page.nav-collapsed .page-shell { min-height: 0; margin: 0; padding: 0; }
    body.reports-page .report-output-wrap { overflow: visible; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
    body.reports-page .report-paper { min-width: 0; padding: 0; border: 0; box-shadow: none; }
    body.reports-page .report-print-header { margin-bottom: 2.5mm; padding-bottom: 1.5mm; }
    body.reports-page .report-print-header p { font-size: 5.5pt; }.reports-page .report-print-header h2 { font-size: 10pt; }.reports-page .report-print-header > span { font-size: 5.5pt; }
    body.reports-page.roster-print-selected .roster-report { width: 287mm; height: 199mm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
    body.reports-page .roster-table { table-layout: fixed; font-size: 4.2pt; }
    body.reports-page .roster-table .roster-label-head, body.reports-page .roster-table tbody th { width: 25mm; }
    body.reports-page .roster-table th, body.reports-page .roster-table td { height: auto; min-height: 8mm; padding: .5mm .25mm; }
    body.reports-page .roster-table thead th { height: 6mm; font-size: 4.3pt; }
    body.reports-page .roster-table tbody th strong { font-size: 5.5pt; }.reports-page .roster-table tbody th small { font-size: 4pt; }
    body.reports-page .roster-table td > span { padding: .2mm 0; font-size: 4.1pt; line-height: 1.05; }.reports-page .roster-table td em, .reports-page .roster-table td b { font-size: 3.3pt; }
    body.reports-page .report-print-footer { margin-top: 1.5mm; padding-top: 1mm; font-size: 4.2pt; }
    body.reports-page .report-table-scroll { overflow: visible; }
    body.reports-page .detail-summary-table, body.reports-page .detail-record-table { font-size: 5.5pt; }
    body.reports-page .detail-summary-table th, body.reports-page .detail-summary-table td, body.reports-page .detail-record-table th, body.reports-page .detail-record-table td { padding: 1.2mm; white-space: normal; }
    body.reports-page .detail-summary-table thead, body.reports-page .detail-record-table thead { display: table-header-group; }
    body.reports-page .detail-summary-table tr, body.reports-page .detail-record-table tr { break-inside: avoid; page-break-inside: avoid; }
}