/* R8 redesign. Shared shell styles are enabled page by page while modules are migrated. */

/* Public sign-in */
.page-login {
    --login-ink: #14242e;
    --login-green: #0e9171;
    --login-green-dark: #08745b;
    --login-muted: #728078;
    min-width: 320px;
    overflow-x: hidden;
    background: #fff;
    color: var(--login-ink);
    font-family: Manrope, "Segoe UI", Arial, sans-serif;
}
.r8-login-shell, .r8-login-page { min-height: 100vh; }
.r8-login-page { display: grid; grid-template-columns: minmax(420px,42%) minmax(0,1fr); }
.r8-login-brand-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; padding: clamp(28px,4.2vw,68px); overflow: hidden; color: #fff; background: #14242e; }
.r8-login-brand-panel::before { position: absolute; inset: -24% -35% auto auto; width: 42rem; height: 42rem; content: ""; background: radial-gradient(circle,rgba(16,159,121,.26) 0,rgba(16,159,121,.06) 42%,transparent 69%); border-radius: 50%; }
.r8-login-brand-panel::after { position: absolute; inset: 0; content: ""; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(135deg,transparent 5%,#000 66%,transparent); pointer-events: none; }
.r8-login-brand, .r8-login-presentation, .r8-login-copyright { position: relative; z-index: 1; }
.r8-login-brand { display: inline-flex; width: fit-content; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
.r8-login-brand img { width: 62px; height: 36px; object-fit: contain; }
.r8-login-brand > span { display: grid; gap: 2px; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.17); }
.r8-login-brand strong { font-size: 1.05rem; font-weight: 850; letter-spacing: -.025em; }
.r8-login-brand small { color: rgba(255,255,255,.48); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.r8-login-presentation { display: grid; max-width: 600px; align-content: center; flex: 1; padding: clamp(54px,8vh,100px) 0 48px; }
.r8-login-badge { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 11px; color: #99e3cf; background: rgba(14,145,113,.13); border: 1px solid rgba(96,211,178,.2); border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.r8-login-badge i { width: 7px; height: 7px; background: #37d8aa; border-radius: 50%; box-shadow: 0 0 0 4px rgba(55,216,170,.1); }
.r8-login-presentation h1 { max-width: 560px; margin: 0; color: #fff; font-size: clamp(2.25rem,4.1vw,4rem); font-weight: 680; line-height: 1.06; letter-spacing: -.05em; }
.r8-login-presentation > p { max-width: 540px; margin: 23px 0 0; color: rgba(229,241,237,.65); font-size: clamp(.98rem,1.15vw,1.12rem); line-height: 1.7; }
.r8-login-features { display: grid; gap: 13px; margin-top: clamp(36px,5vh,58px); }
.r8-login-features > div { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 13px; }
.r8-login-features > div > span { display: grid; width: 42px; height: 42px; place-items: center; color: #72d9bd; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; }
.r8-login-features svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.r8-login-features p { display: grid; gap: 3px; margin: 0; }
.r8-login-features strong { color: #f1f8f6; font-size: .9rem; }
.r8-login-features small { color: rgba(221,235,230,.5); font-size: .75rem; line-height: 1.4; }
.r8-login-copyright { margin: auto 0 0; color: rgba(255,255,255,.34); font-size: .7rem; }

.r8-login-form-panel { display: grid; min-width: 0; place-items: center; padding: clamp(28px,6vw,90px); background: radial-gradient(circle at 82% 12%,#f0f8f5 0,transparent 31%),#fff; }
.r8-login-form-wrap { width: min(100%,440px); }
.r8-login-mobile-brand { display: none; }
.r8-login-secure { display: inline-flex; align-items: center; gap: 7px; margin-bottom: clamp(42px,7vh,72px); color: #567069; font-size: .73rem; font-weight: 750; }
.r8-login-secure svg { width: 16px; height: 16px; fill: none; stroke: var(--login-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.r8-login-heading > span { display: block; margin-bottom: 8px; color: var(--login-green); font-size: .75rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.r8-login-heading h2 { margin: 0; color: var(--login-ink); font-size: clamp(2rem,3.2vw,2.75rem); line-height: 1.12; letter-spacing: -.045em; }
.r8-login-heading p { margin: 14px 0 0; color: var(--login-muted); font-size: .92rem; line-height: 1.6; }
.r8-login-form { display: grid; margin-top: 34px; }
.r8-login-form label { margin: 0 0 8px; color: #33463e; font-size: .78rem; font-weight: 800; }
.r8-login-form label:not(:first-of-type) { margin-top: 20px; }
.r8-login-input { display: flex; min-height: 52px; align-items: center; gap: 11px; padding: 0 15px; background: #f7f9f8; border: 1px solid #d6dfdb; border-radius: 9px; transition: background-color .15s ease,border-color .15s ease,box-shadow .15s ease; }
.r8-login-input:focus-within { background: #fff; border-color: #65bda5; box-shadow: 0 0 0 4px rgba(14,145,113,.09); }
.r8-login-input svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: #89958f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.r8-login-input:focus-within svg { stroke: var(--login-green); }
.r8-login-input input { min-width: 0; width: 100%; height: 50px; padding: 0; color: #172a22; background: transparent; border: 0; outline: 0; font-family: inherit; font-size: .94rem; font-weight: 500; line-height: 1.2; }
.r8-login-input input::placeholder { color: #a2aca7; }
.r8-login-form .field-error { margin-top: 6px; color: #b64141; font-size: .76rem; }
.r8-login-validation { margin: 0 0 20px; padding: 11px 13px; color: #a73737; background: #fff2f1; border: 1px solid #f0ceca; border-radius: 8px; font-size: .8rem; }
.r8-login-validation:empty, .r8-login-validation.validation-summary-valid { display: none; }
.r8-login-validation ul { margin: 0; padding-left: 18px; }
.r8-login-submit { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 0 18px 0 21px; color: #fff; background: var(--login-green); border: 1px solid var(--login-green); border-radius: 9px; box-shadow: 0 8px 20px rgba(14,145,113,.2); font-family: inherit; font-size: .88rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.r8-login-submit:hover { background: var(--login-green-dark); box-shadow: 0 10px 24px rgba(8,116,91,.25); transform: translateY(-1px); }
.r8-login-submit:focus-visible { outline: 3px solid rgba(14,145,113,.22); outline-offset: 3px; }
.r8-login-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.r8-login-help { margin: 22px 0 0; color: #85918b; font-size: .76rem; line-height: 1.5; text-align: center; }
.r8-login-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(36px,6vh,64px); color: #acb5b0; font-size: .7rem; }
.r8-login-legal a { color: #7c8983; text-decoration: none; }
.r8-login-legal a:hover { color: var(--login-green-dark); text-decoration: underline; }

@media (max-width: 980px) {
    .r8-login-page { grid-template-columns: minmax(330px,38%) minmax(0,1fr); }
    .r8-login-brand-panel { padding: 32px; }
    .r8-login-presentation h1 { font-size: clamp(2rem,4.5vw,3rem); }
    .r8-login-form-panel { padding: 44px; }
}
@media (max-width: 760px) {
    .r8-login-page { display: block; background: #fff; }
    .r8-login-brand-panel { min-height: 210px; padding: 26px 24px 30px; }
    .r8-login-presentation { padding: 35px 0 0; }
    .r8-login-presentation h1 { max-width: 510px; font-size: clamp(1.8rem,8vw,2.5rem); }
    .r8-login-presentation > p, .r8-login-features, .r8-login-copyright { display: none; }
    .r8-login-badge { margin-bottom: 13px; }
    .r8-login-form-panel { min-height: calc(100vh - 210px); align-items: start; padding: 42px 24px 30px; background: #fff; }
    .r8-login-secure { margin-bottom: 32px; }
    .r8-login-legal { margin-top: 40px; }
}
@media (max-width: 430px) {
    .r8-login-brand-panel { min-height: 168px; }
    .r8-login-brand { transform: scale(.9); transform-origin: left center; }
    .r8-login-presentation { padding-top: 22px; }
    .r8-login-badge { display: none; }
    .r8-login-presentation h1 { font-size: 1.7rem; }
    .r8-login-form-panel { min-height: calc(100vh - 168px); padding: 32px 19px 24px; }
    .r8-login-secure { margin-bottom: 25px; }
    .r8-login-heading h2 { font-size: 1.85rem; }
    .r8-login-form { margin-top: 27px; }
}

.r8-workspace-page {
    --r8-ink: #15212b;
    --r8-ink-soft: #24323d;
    --r8-green: #0e8a6c;
    --r8-green-dark: #08735a;
    --r8-green-pale: #e8f5f1;
    --r8-canvas: #f3f5f4;
    --r8-line: #dce3e0;
    --r8-muted: #6e7b83;
    --r8-orange: #f19b4b;
    --r8-page-gutter: clamp(18px,2vw,30px);
    background: var(--r8-canvas);
    color: #1b272f;
    font-family: Manrope, "Segoe UI", Arial, sans-serif;
}

.page-journal .app-sidebar { width: 232px; background: var(--r8-ink); box-shadow: 7px 0 22px rgba(16, 29, 37, .08); }
.page-journal .sidebar-brand { min-height: 78px; padding: 1rem 1.15rem; background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); }
.page-journal .sidebar-brand img { width: 35px !important; height: 35px; margin: 0 !important; object-fit: contain; }
.page-journal .brand-copy strong { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.page-journal .brand-copy small { color: rgba(255,255,255,.42); font-size: .6rem; }
.page-journal .sidebar-profile { order: 3; min-height: 72px; padding: .85rem 1rem; background: rgba(255,255,255,.035); border-top: 1px solid rgba(255,255,255,.07); }
.page-journal .profile-avatar { flex-basis: 38px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); background: #32434f; font-size: .78rem; }
.page-journal .sidebar-profile small { font-size: .68rem; }
.page-journal .sidebar-profile strong { font-size: .82rem; font-weight: 700; }
.page-journal .sidebar-nav { order: 2; padding: 1rem .75rem; }
.page-journal .nav-section-title { padding: .9rem .65rem .42rem; color: rgba(255,255,255,.34); font-size: .61rem; letter-spacing: .13em; }
.page-journal .sidebar-link { min-height: 42px; gap: .65rem; margin: .15rem 0; padding: .62rem .7rem; border: 0; border-radius: 8px; color: rgba(255,255,255,.64); font-size: .82rem; font-weight: 650; }
.page-journal .sidebar-link:hover { background: rgba(255,255,255,.06); }
.page-journal .sidebar-link.active { color: #fff; background: var(--r8-green); border: 0; box-shadow: 0 6px 16px rgba(4, 81, 61, .3); }
.page-journal .nav-icon { flex-basis: 20px; width: 20px; color: rgba(255,255,255,.82); font-size: .95rem; }
.page-journal .sidebar-footer { order: 4; color: rgba(255,255,255,.26); background: transparent; border-top: 1px solid rgba(255,255,255,.05); }
.page-journal .app-topbar { left: 232px; min-height: 58px; padding: 0 1.4rem; border-color: var(--r8-line); box-shadow: 0 1px 0 rgba(20,32,41,.02); }
.page-journal .topbar-title small { color: var(--r8-green); }
.page-journal .topbar-title strong { color: #293840; font-weight: 700; }
.page-journal .topbar-avatar { border-color: #dce6e2; background: #eff4f2; color: var(--r8-green-dark); }
.page-journal .app-content { margin-left: 232px; padding-top: 58px; }
.page-journal .page-shell { padding: 0; }
.page-journal .app-footer { display: none; }
.page-journal.sidebar-collapsed .app-sidebar { width: 82px; }
.page-journal.sidebar-collapsed .app-topbar { left: 82px; }
.page-journal.sidebar-collapsed .app-content { margin-left: 82px; }

.r8-journal { min-height: calc(100vh - 58px); background: var(--r8-canvas); }
.r8-journal-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.45rem clamp(1rem, 2vw, 2rem) 1.25rem; background: #fff; border-bottom: 1px solid var(--r8-line); }
.r8-kicker { color: var(--r8-green); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.r8-journal-heading h1 { margin: .2rem 0 .55rem; color: var(--r8-ink); font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.14; letter-spacing: -.035em; }
.r8-shift-meta, .r8-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.r8-date-chip, .r8-shift-state { display: inline-flex; align-items: center; gap: .42rem; color: #55636b; font-size: .76rem; font-weight: 700; }
.r8-date-chip svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.r8-shift-state { padding: .28rem .55rem; color: #14745d; background: var(--r8-green-pale); border-radius: 999px; }
.r8-shift-state i, .r8-summary-live i { width: .42rem; height: .42rem; border-radius: 50%; background: #19a67f; box-shadow: 0 0 0 3px rgba(25,166,127,.12); }
.r8-shift-state.closed { color: #9c4c3e; background: #fff1ed; }
.r8-shift-state.closed i { background: #d66c57; box-shadow: 0 0 0 3px rgba(214,108,87,.12); }
.r8-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: .48rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.r8-button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.r8-button.primary { color: #fff; background: var(--r8-green); border-color: var(--r8-green); box-shadow: 0 5px 13px rgba(14,138,108,.2); }
.r8-button.primary:hover { color: #fff; background: var(--r8-green-dark); }
.r8-button.secondary { color: #3d4c54; background: #fff; border-color: #cfd9d5; }
.r8-button.secondary:hover { background: #f5f8f7; border-color: #aabbb4; }

.r8-journal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 2vw, 2rem); background: #fff; border-bottom: 1px solid var(--r8-line); }
.r8-journal-search { display: flex; width: min(37rem, 100%); min-height: 42px; align-items: center; gap: .65rem; padding: 0 .78rem; background: #f6f8f7; border: 1px solid #d8e0dd; border-radius: 8px; }
.r8-journal-search:focus-within { background: #fff; border-color: #74b9a7; box-shadow: 0 0 0 3px rgba(14,138,108,.09); }
.r8-journal-search svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: #75827f; stroke-width: 1.8; stroke-linecap: round; }
.r8-journal-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--r8-ink); font: inherit; font-size: .82rem; }
.r8-journal-search kbd { padding: .15rem .35rem; color: #8a9692; background: #fff; border: 1px solid #d9e1de; border-radius: 4px; font: 650 .65rem/1.2 inherit; white-space: nowrap; }
.r8-view-switch { display: inline-flex; padding: 3px; background: #edf1ef; border-radius: 9px; }
.r8-view-switch button { display: inline-flex; min-height: 36px; align-items: center; gap: .4rem; padding: .45rem .72rem; border: 0; border-radius: 7px; color: #68756f; background: transparent; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.r8-view-switch button.active { color: var(--r8-green-dark); background: #fff; box-shadow: 0 2px 7px rgba(27,45,37,.1); }
.r8-view-switch svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.r8-journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 294px; align-items: stretch; min-height: calc(100vh - 245px); }
.r8-journal-workspace { min-width: 0; padding: 1rem clamp(1rem, 2vw, 2rem) 2rem; overflow: hidden; }
.r8-workspace-status { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: 1rem; margin-bottom: .7rem; }
.r8-workspace-status p { margin: 0; color: #68766f; font-size: .76rem; font-weight: 700; }
.r8-status-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; color: #78847f; font-size: .67rem; font-weight: 700; }
.r8-status-legend span { display: inline-flex; align-items: center; gap: .32rem; }
.r8-status-legend i { width: .48rem; height: .48rem; border-radius: 50%; }
.r8-status-legend i.paid { background: var(--r8-green); }
.r8-status-legend i.unpaid { background: var(--r8-orange); }
.r8-status-legend i.cancelled { background: #aab3af; }

.r8-timeline-view { overflow-x: auto; overflow-y: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(27,44,37,.045); }
.r8-timeline { min-height: 25rem; }
.r8-timeline-loading, .r8-timeline-empty { display: grid; min-height: 25rem; place-content: center; gap: .35rem; color: #87928e; text-align: center; }
.r8-timeline-empty strong { color: #3f4c46; }
.r8-timeline-canvas { width: calc(116px + var(--timeline-width)); min-width: 100%; }
.r8-timeline-axis, .r8-timeline-lane { display: grid; grid-template-columns: 116px auto; }
.r8-timeline-axis { position: sticky; top: 0; z-index: 4; min-height: 45px; color: #7b8782; background: #fafcfb; border-bottom: 1px solid var(--r8-line); font-size: .65rem; font-weight: 800; }
.r8-timeline-axis > span { display: flex; align-items: center; padding: 0 .8rem; border-right: 1px solid var(--r8-line); text-transform: uppercase; letter-spacing: .05em; }
.r8-timeline-axis > div { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; align-items: center; }
.r8-timeline-axis > div span { padding-left: .5rem; color: #9aa39f; font-variant-numeric: tabular-nums; }
.r8-timeline-axis > div span.hour { color: #52625a; }
.r8-timeline-lane { border-bottom: 1px solid var(--r8-line); }
.r8-timeline-lane:last-child { border-bottom: 0; }
.r8-lane-label { position: sticky; left: 0; z-index: 3; display: flex; min-height: 104px; flex-direction: column; justify-content: center; gap: .2rem; padding: .75rem; background: #fbfcfc; border-right: 1px solid var(--r8-line); box-shadow: 7px 0 12px rgba(34,48,42,.025); }
.r8-lane-label strong { color: #26342d; font-size: .81rem; }
.r8-lane-label span { color: #8a9690; font-size: .66rem; }
.r8-lane-surface { position: relative; min-height: 104px; background-color: #fff; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 83px, #edf1ef 83px, #edf1ef 84px); }
.r8-empty-lane { position: absolute; top: 50%; left: 1rem; color: #b0b9b5; font-size: .72rem; transform: translateY(-50%); }
.r8-order-card { position: absolute; top: calc(12px + var(--track) * 110px); left: calc(8px + var(--slot) * 84px); z-index: 2; display: grid; width: 160px; height: 99px; gap: .1rem; padding: .5rem .62rem; overflow: hidden; color: #27342e; background: #eff9f6; border: 1px solid #b9ddd2; border-left: 3px solid var(--r8-green); border-radius: 7px; text-decoration: none; box-shadow: 0 3px 9px rgba(35,59,49,.07); transition: transform .15s ease, box-shadow .15s ease; }
.r8-order-card:hover { color: #17241e; box-shadow: 0 7px 16px rgba(35,59,49,.13); transform: translateY(-2px); }
.r8-order-card.unpaid { background: #fff7ee; border-color: #f2d2af; border-left-color: var(--r8-orange); }
.r8-order-card.in-bay { background: #eef5ff; border-color: #9ec0f5; border-left-color: #2f78e4; }
.r8-order-card.cancelled { opacity: .64; background: #f4f5f4; border-color: #d5dad7; border-left-color: #9ea8a3; }
.r8-order-time { color: #73817a; font: 700 .61rem/1.1 "IBM Plex Mono", Consolas, monospace; }
.r8-order-card > strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-order-service { overflow: hidden; color: #65736c; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-order-state { overflow: hidden; color: #6a7771; font-size: .58rem; font-weight: 900; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.r8-order-state.in-bay { color: #145cb7; }
.r8-order-state.left-bay { color: #a45b16; }
.r8-order-footer { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-top: auto; }
.r8-order-footer b { color: #28362f; font-size: .69rem; }
.r8-order-footer i { color: var(--r8-green-dark); font-size: .57rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.r8-order-card.unpaid .r8-order-footer i { color: #b66a22; }
.r8-order-card.in-bay .r8-order-footer i { color: #2f67ad; }
.r8-lane-label span.occupied { color: #176cb6; font-weight: 800; }

.journal-bay.occupied { color: #155fae; background: #e7f1ff; box-shadow: inset 0 0 0 1px #b8d3f5; }
.journal-operation-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .3rem .55rem; border: 1px solid #dbe2df; border-radius: 999px; color: #68746f; background: #f5f7f6; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.journal-operation-badge.in-bay { color: #155fae; background: #eaf3ff; border-color: #b9d3f3; }
.journal-operation-badge.paid { color: #087443; background: #e5f7ed; border-color: #c4ecd6; }
.journal-operation-badge.left-bay { color: #a55a16; background: #fff4e8; border-color: #f0d2b2; }

.r8-list-view { overflow: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(27,44,37,.045); }
.r8-list-view .journal-table th { color: #67756f; background: #fafcfb; }
.r8-list-view .journal-table tbody tr:hover { background: #f1f8f5; box-shadow: inset 3px 0 0 var(--r8-green); }
.r8-list-view .pager { padding: .85rem 1rem; background: #fafcfb; border-top: 1px solid var(--r8-line); }

.r8-shift-summary { min-width: 0; padding: 1.25rem 1.15rem 1.5rem; background: #fff; border-left: 1px solid var(--r8-line); }
.r8-summary-heading, .r8-bay-load-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.r8-summary-heading span:first-child { color: var(--r8-green); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.r8-summary-heading h2 { margin: .15rem 0 0; color: var(--r8-ink); font-size: 1.02rem; letter-spacing: -.02em; }
.r8-summary-live { display: inline-flex; align-items: center; gap: .38rem; color: #42806f; font-size: .64rem; font-weight: 800; }
.r8-revenue-card { display: grid; gap: .2rem; margin-top: 1rem; padding: 1rem; color: #fff; background: linear-gradient(135deg, #0f8c6d, #08705a); border-radius: 10px; box-shadow: 0 8px 20px rgba(14,138,108,.17); }
.r8-revenue-card span { color: rgba(255,255,255,.68); font-size: .68rem; font-weight: 700; }
.r8-revenue-card strong { font-size: 1.65rem; line-height: 1.15; letter-spacing: -.04em; }
.r8-revenue-card small { color: rgba(255,255,255,.68); font-size: .67rem; }
.r8-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1rem 0; border: 1px solid var(--r8-line); border-radius: 9px; }
.r8-summary-stats article { display: grid; min-width: 0; gap: .25rem; padding: .7rem .5rem; text-align: center; border-right: 1px solid var(--r8-line); }
.r8-summary-stats article:last-child { border-right: 0; }
.r8-summary-stats span { color: #86918c; font-size: .57rem; line-height: 1.2; }
.r8-summary-stats strong { color: #334139; font-size: 1rem; }
.r8-bay-load { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #edf0ef; }
.r8-bay-load-heading h3 { margin: 0; color: #334139; font-size: .8rem; }
.r8-bay-load-heading span { color: #8b9691; font-size: .62rem; font-weight: 700; }
#r8-bay-load-list { display: grid; gap: .72rem; margin-top: .85rem; }
.r8-bay-meter > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; color: #5d6a64; font-size: .67rem; font-weight: 700; }
.r8-bay-meter strong { color: #34423b; font-size: .67rem; }
.r8-bay-meter > i { display: block; height: 5px; overflow: hidden; background: #edf1ef; border-radius: 99px; }
.r8-bay-meter > i b { display: block; height: 100%; min-width: 2px; background: var(--r8-green); border-radius: inherit; transition: width .25s ease; }
.r8-summary-empty { margin: 0; color: #8a9690; font-size: .7rem; }
.r8-close-shift { width: 100%; min-height: 40px; margin-top: 1.4rem; color: #5f6c66; background: #fff; border: 1px solid #ccd6d2; border-radius: 8px; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.r8-close-shift:hover { color: #a03f35; background: #fff7f5; border-color: #e6b7b0; }

@media (max-width: 1120px) {
    .r8-journal-layout { grid-template-columns: 1fr; }
    .r8-shift-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--r8-line); border-left: 0; }
    .r8-summary-heading { grid-column: 1 / -1; }
    .r8-revenue-card { margin-top: 0; }
    .r8-summary-stats { margin: 0; }
    .r8-bay-load { grid-column: 1 / -1; margin-top: 0; }
    .r8-close-shift { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 900px) {
    .page-journal .app-sidebar { width: 250px; }
    .page-journal .app-topbar { left: 0; }
    .page-journal .app-content { margin-left: 0; }
}

@media (max-width: 680px) {
    .r8-journal-heading { align-items: stretch; flex-direction: column; }
    .r8-heading-actions .r8-button { flex: 1 1 auto; }
    .r8-journal-toolbar { align-items: stretch; flex-direction: column; }
    .r8-view-switch { align-self: stretch; }
    .r8-view-switch button { flex: 1; justify-content: center; }
    .r8-workspace-status { align-items: flex-start; flex-direction: column; }
    .r8-shift-summary { grid-template-columns: 1fr; }
    .r8-summary-heading, .r8-bay-load, .r8-close-shift { grid-column: auto; }
    .r8-journal-search kbd { display: none; }
}

/* Reference-layout alignment for the administrator journal. */
.page-journal {
    --r8-ink: #12202b;
    --r8-green: #0c9272;
    --r8-green-dark: #08765c;
    --r8-green-pale: #eaf7f3;
    --r8-blue: #2f73df;
    --r8-orange: #ef8b24;
    --r8-red: #e44949;
    --r8-canvas: #f5f7f6;
    --r8-panel: #fff;
    --r8-line: #dce3e0;
    --r8-muted: #728079;
    background: var(--r8-canvas);
    color: var(--r8-ink);
}
.r8-workspace-page .app-sidebar { width: 232px; background: var(--r8-ink); box-shadow: none; }
.r8-workspace-page .sidebar-brand { min-height: 78px; padding: 1rem 1.25rem; background: transparent; border-bottom: 0; }
.r8-workspace-page .sidebar-brand img { width: 36px !important; height: 36px; margin: 0 !important; object-fit: contain; }
.r8-workspace-page .brand-copy strong { font-size: 1rem; font-weight: 800; }
.r8-workspace-page .brand-copy small { color: #89a0ad; font-size: .63rem; text-transform: none; }
.r8-workspace-page .sidebar-profile, .r8-workspace-page .sidebar-footer, .r8-workspace-page .nav-section-title { display: none; }
.r8-workspace-page .sidebar-nav { order: 2; flex: 1; padding: .5rem .8rem 1rem; }
.r8-workspace-page .sidebar-link { min-height: 48px; gap: .7rem; margin: .12rem 0; padding: .7rem .8rem; border: 0; border-radius: 9px; color: #b8c8d1; font-size: .88rem; font-weight: 500; }
.r8-workspace-page .sidebar-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.r8-workspace-page .sidebar-link.active { color: #fff; background: var(--r8-green); border: 0; box-shadow: none; }
.r8-workspace-page .nav-icon { flex-basis: 22px; width: 22px; color: #bdccd4; font-size: 1rem; }
.r8-workspace-page .sidebar-link.active .nav-icon { color: #fff; }
.r8-workspace-page .app-topbar { display: none; }
.r8-workspace-page .app-content { margin-left: 232px; padding-top: 0; }
.r8-workspace-page .page-shell { width: 100%; padding: 0; }
.r8-workspace-page .app-footer { display: none; }
.r8-workspace-page.sidebar-collapsed .app-sidebar { width: 82px; }
.r8-workspace-page.sidebar-collapsed .app-content { margin-left: 82px; }
.page-journal.sidebar-collapsed .r8-sidebar-shift { display: none; }
.r8-sidebar-shift { order: 3; margin: .8rem; padding: .9rem; color: #cce9df; background: #1d303d; border-radius: 10px; }
.r8-sidebar-shift-state, .r8-sidebar-shift-meta { display: flex; align-items: center; }
.r8-sidebar-shift-state { gap: .5rem; color: #4dddb0; font-size: .75rem; }
.r8-sidebar-shift-state i { width: .48rem; height: .48rem; background: #42d7aa; border-radius: 50%; }
.r8-sidebar-shift.closed .r8-sidebar-shift-state { color: #f1a392; }
.r8-sidebar-shift.closed .r8-sidebar-shift-state i { background: #ef806b; }
.r8-sidebar-shift-meta { justify-content: space-between; gap: .4rem; margin-top: .55rem; color: #a8bac4; font-size: .66rem; }
.r8-sidebar-shift-meta form { margin: 0; }
.r8-sidebar-shift-meta button { padding: .1rem .3rem; color: #b8c8d1; background: transparent; border: 0; cursor: pointer; }

.r8-journal { min-height: 100vh; background: var(--r8-canvas); }
.r8-journal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 20px 24px 16px; background: var(--r8-canvas); border-bottom: 0; }
.r8-toolbar-primary, .r8-toolbar-secondary { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.r8-toolbar-primary { flex: 1 1 auto; }
.r8-toolbar-secondary { flex: 0 0 auto; }
.r8-date-selector, .r8-date-navigation button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid #d4ddda; border-radius: 9px; color: #26342e; background: #fff; font: inherit; font-size: .78rem; font-weight: 750; }
.r8-date-selector { min-width: 196px; gap: .55rem; padding: 0 .8rem; cursor: default; }
.r8-date-selector svg { width: 1rem; height: 1rem; fill: none; stroke: #697771; stroke-width: 1.7; stroke-linecap: round; }
.r8-date-selector svg:last-child { width: .75rem; margin-left: auto; }
.r8-date-navigation { display: inline-flex; gap: .45rem; }
.r8-date-navigation button { width: 40px; padding: 0; font-size: 1.35rem; line-height: 1; }
.r8-date-navigation button:disabled { opacity: 1; color: #51605a; cursor: not-allowed; }
.r8-journal-search { width: min(255px, 28vw); min-height: 40px; padding: 0 .72rem; background: #fff; border-color: #d4ddda; border-radius: 9px; }
.r8-journal-search input { font-size: .76rem; }
.r8-journal-search kbd { display: none; }
.r8-view-switch, .r8-interval-switch { display: inline-flex; min-height: 40px; padding: 3px; background: #e9eeec; border-radius: 9px; }
.r8-view-switch button, .r8-interval-switch button { display: inline-flex; min-width: 62px; align-items: center; justify-content: center; padding: .42rem .65rem; color: #617069; background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.r8-interval-switch button { min-width: 38px; padding-inline: .5rem; }
.r8-view-switch button.active, .r8-interval-switch button.active { color: var(--r8-ink); background: #fff; box-shadow: 0 1px 5px rgba(25,42,34,.09); }
.r8-conflicts-pill { display: inline-flex; min-height: 40px; align-items: center; gap: .55rem; padding: 0 .8rem; color: #bf3030; background: #fff3f2; border: 1px solid #f0bfba; border-radius: 9px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.r8-conflicts-pill b { display: inline-grid; width: 20px; height: 20px; place-items: center; color: #fff; background: var(--r8-red); border-radius: 50%; font-size: .66rem; }
.r8-conflicts-pill.clear { color: #6e7b75; background: #fff; border-color: #d7dfdc; }
.r8-conflicts-pill.clear b { background: #aeb8b4; }
.r8-button { min-height: 40px; padding: .62rem 1rem; border-radius: 9px; font-size: .76rem; white-space: nowrap; }
.r8-button.primary { box-shadow: none; }
.r8-toolbar-live { min-width: 12px; gap: 0; color: var(--r8-green); }
.r8-toolbar-live > span { display: none; }

.r8-journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; align-items: stretch; gap: 16px; min-height: 0; padding: 0 24px 18px; }
.r8-journal-workspace { position: relative; min-width: 0; padding: 0; overflow: visible; }
.r8-journal-status { position: absolute; top: 49px; left: 132px; z-index: 8; margin: 0; color: #8a9690; font-size: .68rem; pointer-events: none; }
.r8-journal-status:empty { display: none; }
.r8-timeline-view { display: flex; min-height: calc(100vh - 96px); overflow: hidden; flex-direction: column; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; box-shadow: none; }
.r8-timeline-view[hidden], .r8-list-view[hidden] { display: none !important; }
.r8-timeline { min-height: 25rem; flex: 1; overflow: auto; }
.r8-timeline-canvas { position: relative; width: calc(116px + var(--timeline-width)); min-width: 100%; }
.r8-timeline-axis, .r8-timeline-lane { grid-template-columns: 116px auto; }
.r8-timeline-axis { position: sticky; top: 0; z-index: 7; min-height: 45px; color: #748079; background: #fbfcfc; font-size: .65rem; font-weight: 700; }
.r8-timeline-axis > span { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; padding: 0 .9rem; background: #fbfcfc; border-right: 1px solid var(--r8-line); letter-spacing: 0; text-transform: none; }
.r8-timeline-axis > div { display: grid; grid-auto-flow: column; align-items: center; }
.r8-timeline-axis > div span { align-self: stretch; display: flex; align-items: center; padding-left: .48rem; color: #7f8b85; border-right: 1px solid #edf1ef; }
.r8-lane-label { z-index: 5; min-height: 116px; gap: .2rem; padding: .8rem 1rem; background: #fff; box-shadow: none; }
.r8-lane-label strong { color: #15241d; font-size: .79rem; }
.r8-lane-label small { overflow: hidden; color: #7d8983; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-lane-label span { margin-top: .22rem; color: #7b8882; font-size: .62rem; }
.r8-lane-label span.occupied { color: var(--r8-green); }
.r8-lane-surface { min-height: 116px; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--slot-width) - 1px), #e9eeec calc(var(--slot-width) - 1px), #e9eeec var(--slot-width)); }
.r8-order-card { top: calc(10px + var(--track) * 106px); left: var(--left); width: var(--width); min-width: 74px; height: 96px; gap: .06rem; padding: .48rem .5rem; background: #f1f4f3; border: 1px solid #cbd5d1; border-radius: 9px; box-shadow: none; }
.r8-order-card.paid { background: #eaf7f2; border-color: #9ed8c5; }
.r8-order-card.in-bay { background: #eef4ff; border-color: #4d87e9; }
.r8-order-card.ready { background: #fff5e8; border-color: #ef922f; }
.r8-order-card.due { background: #fff8ec; border-color: #e9aa50; }
.r8-order-card.unpaid { background: #fff0f0; border-color: #f06d6d; }
.r8-order-card.cancelled { opacity: .66; background: #f3f5f4; border-color: #cbd3d0; }
.r8-order-card.conflict { background: #fff; border: 2px dashed var(--r8-red); }
.r8-order-card > strong { color: #14231c; font: 800 .68rem/1.1 "IBM Plex Mono", Consolas, monospace; }
.r8-order-state { font-size: .54rem; }
.r8-order-state.in-bay { color: #155fc2; }
.r8-order-state.paid { color: #08755a; }
.r8-order-state.ready { color: #bd650c; }
.r8-order-state.due { color: #a55a16; }
.r8-order-time { color: #52615a; font: 600 .57rem/1.15 "IBM Plex Mono", Consolas, monospace; }
.r8-order-service { font-size: .56rem; }
.r8-order-footer b { font-size: .62rem; }
.r8-order-footer i { overflow: hidden; color: #6f7c76; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-now-line { position: absolute; top: 0; bottom: 0; left: var(--now-left); z-index: 6; width: 2px; background: var(--r8-green); pointer-events: none; }
.r8-now-line span { position: sticky; top: 3px; display: block; width: max-content; padding: .18rem .42rem; color: #fff; background: var(--r8-green); border-radius: 6px; font-size: .57rem; font-weight: 800; transform: translateX(-50%); }
.r8-status-legend { min-height: 40px; gap: 1rem; padding: .5rem 1rem; color: #738079; background: #fff; border-top: 1px solid var(--r8-line); font-size: .62rem; }
.r8-status-legend i { width: .72rem; height: .72rem; background: #f1f4f3; border: 1px solid #cbd5d1; border-radius: 3px; }
.r8-status-legend i.in-bay { background: #eef4ff; border-color: var(--r8-blue); }
.r8-status-legend i.due { background: #fff8e9; border-color: #e2a64c; }
.r8-status-legend i.ready { background: #fff5e8; border-color: var(--r8-orange); }
.r8-status-legend i.paid { background: #eaf7f2; border-color: #79c7ac; }
.r8-status-legend i.unpaid { background: #fff0f0; border-color: #ef6262; }
.r8-status-legend i.conflict { background: #fff; border: 2px dashed var(--r8-red); }
.r8-list-view { min-height: calc(100vh - 96px); border-radius: 12px; box-shadow: none; }
.journal-operation-badge.ready { color: #a55a16; background: #fff4e8; border-color: #f0d2b2; }
.journal-operation-badge.due { color: #9b570e; background: #fff8e9; border-color: #edcf99; }
.journal-operation-stack { display: flex; min-width: 9.6rem; align-items: center; gap: .45rem; flex-wrap: wrap; }
.journal-progress-form { margin: 0; }
.journal-progress-button { display: inline-flex; min-height: 1.8rem; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .55rem; color: #08745b; background: #edfaf6; border: 1px solid #a9dccc; border-radius: 7px; font: inherit; font-size: .67rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.journal-progress-button:hover { color: #fff; background: var(--r8-green); border-color: var(--r8-green); }
.journal-progress-button.finish { color: #a45b16; background: #fff7e9; border-color: #e9c68f; }
.journal-progress-button.finish:hover { color: #fff; background: #c97819; border-color: #c97819; }
.journal-progress-button svg { width: .82rem; height: .82rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.r8-order-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.r8-order-card > :not(.r8-order-card-link) { position: relative; z-index: 2; pointer-events: none; }
.r8-order-status-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .2rem; }
.r8-order-status-row .r8-order-state { min-width: 0; }
.r8-order-status-row .journal-progress-form { flex: 0 0 auto; pointer-events: auto; }
.r8-order-status-row .journal-progress-button { width: 22px; min-height: 22px; padding: 0; border-radius: 6px; pointer-events: auto; }
.r8-order-status-row .journal-progress-button svg { width: .72rem; height: .72rem; }

.r8-shift-summary { display: flex; min-width: 0; padding: 0; flex-direction: column; gap: 14px; background: transparent; border-left: 0; }
.r8-summary-card { padding: 18px; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; }
.r8-summary-card-title { color: #5d6a64; font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.r8-revenue-card { display: grid; gap: .35rem; margin-top: 0; padding: 18px; color: inherit; background: #fff; border-radius: 12px; box-shadow: none; }
.r8-revenue-card > strong { margin-top: .25rem; color: #12202b; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.045em; }
.r8-revenue-card > small { color: #7d8983; font-size: .63rem; }
.r8-payment-bar { display: flex; height: 7px; margin-top: .8rem; overflow: hidden; background: #e8edeb; border-radius: 99px; }
.r8-payment-bar i, .r8-payment-bar b { display: block; height: 100%; transition: width .25s ease; }
.r8-payment-bar i { background: var(--r8-green); }
.r8-payment-bar b { background: #3978dd; }
.r8-payment-split { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #52615a; font-size: .59rem; }
.r8-payment-split strong { color: #24332c; font-size: .63rem; }
.r8-summary-metrics { display: grid; gap: 0; padding-block: .45rem; }
.r8-summary-metrics > div { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid #eef1f0; }
.r8-summary-metrics > div:last-child { border-bottom: 0; }
.r8-summary-metrics span { color: #728079; font-size: .69rem; }
.r8-summary-metrics strong { color: #18261f; font-size: .69rem; }
.r8-summary-metrics strong.danger { color: #cf3636; }
.r8-summary-metrics strong.warning { color: #b96612; }
.r8-bay-load { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--r8-line); }
.r8-bay-load-heading h3 { color: #5d6a64; font-size: .67rem; letter-spacing: .04em; text-transform: uppercase; }
.r8-bay-load-heading span { font-size: .59rem; }
#r8-bay-load-list { gap: .65rem; margin-top: .85rem; }
.r8-bay-meter > div { margin-bottom: .28rem; color: #53615b; font-size: .65rem; }
.r8-bay-meter strong { font-size: .65rem; }
.r8-bay-meter > i { height: 5px; background: #e9eeec; }
.r8-bay-meter > i b.high { background: var(--r8-orange); }
.r8-close-shift { min-height: 44px; margin-top: 0; color: #26352e; border-radius: 10px; }

@media (max-width: 1420px) {
    .r8-journal-toolbar { align-items: stretch; flex-direction: column; }
    .r8-toolbar-secondary { justify-content: flex-end; }
    .r8-journal-search { width: min(420px, 100%); }
    .r8-timeline-view, .r8-list-view { min-height: calc(100vh - 146px); }
}
@media (max-width: 1120px) {
    .r8-journal-layout { grid-template-columns: 1fr; }
    .r8-shift-summary { display: grid; grid-template-columns: 1fr 1fr; }
    .r8-bay-load, .r8-close-shift { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .r8-workspace-page .app-sidebar { width: min(84vw, 280px); }
    .r8-workspace-page .app-topbar { display: flex; left: 0; min-height: 58px; }
    .r8-workspace-page .app-content { margin-left: 0; padding-top: 58px; }
    .r8-workspace-page.sidebar-collapsed .app-content { margin-left: 0; }
    .page-journal.sidebar-collapsed .r8-sidebar-shift { display: block; }
    .page-journal .nav-section-title { display: none !important; }
    .r8-journal { min-height: calc(100vh - 58px); }
}
@media (max-width: 720px) {
    .r8-journal-toolbar { align-items: center; padding: 12px; flex-direction: row; flex-wrap: wrap; }
    .r8-toolbar-primary, .r8-toolbar-secondary { flex-wrap: wrap; }
    .r8-date-selector { min-width: 0; flex: 1; }
    .r8-journal-search { width: 100%; order: 3; }
    .r8-view-switch { flex: 1; align-self: auto; }
    .r8-view-switch button { flex: 1; }
    .r8-interval-switch { order: 4; }
    .r8-toolbar-live { display: none; }
    .r8-journal-layout { padding: 0 12px 12px; }
    .r8-shift-summary { grid-template-columns: 1fr; }
    .r8-bay-load, .r8-close-shift { grid-column: auto; }
    .r8-timeline-view, .r8-list-view { min-height: 34rem; }
}

/* New order editor */
.r8-order-create-shell { position: fixed; inset: 0; z-index: 60; display: grid; padding: 24px; overflow: auto; place-items: center; background: rgba(18,32,43,.84); }
.r8-order-create-card { width: min(1120px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: hidden; color: #14212a; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(4,16,24,.28); }
.r8-order-create-card form { display: flex; max-height: calc(100vh - 48px); flex-direction: column; }
.r8-order-create-card [hidden] { display: none !important; }
.r8-order-create-header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 30px; border-bottom: 1px solid #e1e6e4; }
.r8-order-create-header h1 { margin: 0; color: #10202c; font-size: 1.35rem; letter-spacing: -.025em; }
.r8-order-create-header > div { display: flex; align-items: center; gap: 1rem; color: #596861; font-size: .76rem; }
.r8-order-create-header a { display: grid; width: 38px; height: 38px; place-items: center; color: #27362f; background: #f1f4f3; border-radius: 9px; font-size: 1.35rem; line-height: 1; text-decoration: none; }
.r8-order-create-body { display: grid; gap: 18px; padding: 22px 30px 26px; overflow: auto; }
.r8-order-create-card .validation-summary:empty, .r8-order-create-card .validation-summary-valid { display: none; }
.r8-order-block { min-width: 0; margin: 0; padding: 0; border: 0; }
.r8-order-block > legend, .r8-choice-section > legend { width: auto; margin: 0 0 9px; padding: 0; color: #586861; font-size: .67rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.r8-order-block.selection-invalid { padding: 8px; border: 1px solid #e5847b; border-radius: 12px; }
.r8-customer-entry-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.1fr; gap: 14px; align-items: end; }
.r8-field { position: relative; min-width: 0; }
.r8-field > label, .r8-comment-field > label, .r8-order-create-card .service-price-field > label { display: block; margin-bottom: 6px; color: #43534b; font-size: .68rem; font-weight: 750; }
.r8-order-create-card input, .r8-order-create-card textarea { width: 100%; min-height: 44px; padding: .65rem .78rem; color: #16251e; background: #fff; border: 1px solid #d1dad6; border-radius: 9px; outline: none; font: inherit; font-size: .78rem; }
.r8-order-create-card input:focus, .r8-order-create-card textarea:focus { border-color: #5ab69f; box-shadow: 0 0 0 3px rgba(12,146,114,.08); }
.r8-order-create-card .search-field { min-height: 44px; border-color: #d1dad6; border-radius: 9px; }
.r8-order-create-card .search-field input { min-height: auto; border: 0; box-shadow: none; }
.r8-input-action { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.r8-input-action input { min-width: 0; border-radius: 9px 0 0 9px; font: 800 .83rem/1 "IBM Plex Mono", Consolas, monospace; text-transform: uppercase; }
.r8-input-action button { display: inline-flex; min-height: 44px; align-items: center; gap: .38rem; padding: 0 .7rem; color: #08745b; background: #eaf7f3; border: 1px solid #9bcfbe; border-left: 0; border-radius: 0 9px 9px 0; font: inherit; font-size: .65rem; cursor: pointer; }
.r8-input-action button:disabled { color: #8a9590; background: #f2f4f3; border-color: #d7dedb; cursor: not-allowed; }
.r8-smart-client-actions > span { display: block; margin-bottom: 6px; color: #43534b; font-size: .68rem; font-weight: 750; }
.r8-smart-client-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.r8-smart-action { display: flex; min-width: 0; min-height: 44px; align-items: center; gap: .5rem; padding: .45rem .55rem; color: #34443c; background: #fff; border: 1px solid #d1dad6; border-radius: 9px; text-align: left; cursor: pointer; }
.r8-smart-action:hover { background: #f6faf8; border-color: #9bcfbe; }
.r8-smart-action.qr { color: #08745b; background: #edf8f5; border-color: #a8d6c9; }
.r8-smart-action > b { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; color: #08745b; background: #dff2ec; border-radius: 7px; }
.r8-smart-action > span { display: grid; min-width: 0; gap: .08rem; }
.r8-smart-action strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-smart-action small { overflow: hidden; color: #78857f; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-client-search-field .lookup-results { top: calc(100% + 5px); z-index: 12; }
.r8-selected-client { position: relative; display: flex; min-height: 50px; align-items: center; margin: 12px 0 0; padding: .7rem 1rem .7rem 3.55rem; color: #627069; background: #f5f7f6; border: 1px solid #dce3e0; border-radius: 10px; font-size: .7rem; }
.r8-selected-client::before { position: absolute; left: 1rem; display: grid; width: 30px; height: 30px; place-items: center; content: "A"; color: #fff; background: #809089; border-radius: 50%; font-weight: 850; }
.r8-selected-client.success { color: #174c3e; background: #eff9f6; border-color: #b9dfd3; }
.r8-selected-client.success::before { background: var(--r8-green); }
.r8-order-create-card .order-customer-reward { margin-top: 10px; }
.r8-order-create-card .client-wash-history { margin-top: 10px; }

.r8-order-create-card .vehicle-category-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 9px; }
.r8-order-create-card .vehicle-category-card { min-height: 48px; padding: .65rem .8rem; background: #fff; border: 1px solid #d1dad6; border-radius: 9px; }
.r8-order-create-card .vehicle-category-card strong { font-size: .72rem; }
.r8-order-create-card .vehicle-category-card small { display: none; }
.r8-order-create-card .vehicle-category-card:has(input:checked) { color: #08745b; background: #eaf7f3; border-color: var(--r8-green); box-shadow: none; }
.r8-order-create-card .category-check { display: none; }
.r8-service-toolbar { display: flex; align-items: center; gap: .65rem; margin-bottom: 8px; }
.r8-service-toolbar .search-field { width: min(320px,100%); }
.r8-order-create-card .service-live-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 9px; max-height: none; overflow: visible; padding: 0; border: 0; }
.r8-order-create-card .service-choice { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: .5rem; padding: .68rem .8rem; color: #27372f; background: #fff; border: 1px solid #d1dad6; border-radius: 9px; text-align: left; }
.r8-order-create-card .service-choice:hover { background: #f6faf8; border-color: #9bcfbe; }
.r8-order-create-card .service-choice.selected { color: #08745b; background: #eaf7f3; border-color: var(--r8-green); box-shadow: none; }
.r8-order-create-card .service-choice > span { display: grid; gap: .25rem; }
.r8-order-create-card .service-choice strong { font-size: .72rem; }
.r8-order-create-card .service-choice small { color: #6f7c76; font-size: .6rem; }
.r8-order-create-card .service-choice > b { display: none; }
.r8-order-create-card .service-choice.selected > b { display: grid; width: 22px; height: 22px; place-items: center; color: #fff; background: var(--r8-green); border-radius: 50%; font-size: .65rem; }
.r8-selected-main-row { display: flex; align-items: end; gap: 10px; margin-top: 9px; }
.r8-selected-main-row .selected-main-service { flex: 1; margin: 0; }
.r8-selected-main-row .service-price-field { width: 155px; margin: 0; }
.r8-selected-main-row .service-price-field input { min-height: 40px; }
.r8-selected-main-row .service-price-field small { font-size: .52rem; }
.r8-extra-service-results { display: flex !important; flex-wrap: wrap; }
.r8-extra-service-results .service-choice { width: auto; min-height: 40px; flex: 0 1 auto; padding: .45rem .72rem; border-radius: 999px; }
.r8-extra-service-results .service-choice small { display: inline; margin-left: .3rem; }
.r8-order-create-card .selected-extras { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.r8-order-create-card .selected-extra { display: grid; width: min(100%,520px); min-width: 0; grid-template-columns: minmax(0,1fr) 92px 32px; align-items: center; gap: .65rem; padding: .55rem .65rem; background: #f2f8f6; border: 1px solid #c7e1d9; border-radius: 9px; }
.r8-order-create-card .selected-extra > span { display: grid; min-width: 0; gap: .16rem; }
.r8-order-create-card .selected-extra > span strong { min-width: 0; font-size: .7rem; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; }
.r8-order-create-card .selected-extra > span small { color: #708078; font-size: .55rem; line-height: 1.25; }
.r8-order-create-card .selected-extra label { display: grid; width: 92px; gap: .2rem; }
.r8-order-create-card .selected-extra label > small { color: #65756d; font-size: .54rem; }
.r8-order-create-card .selected-extra .remove-extra { align-self: center; justify-self: end; }
.r8-order-create-card .selected-extra input[type="number"] { min-height: 32px; padding: .3rem .4rem; }

.r8-order-lower-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.r8-staff-section, .r8-payment-section { padding: 14px; background: #fafbfb; border: 1px solid #dfe5e2; border-radius: 12px; }
.r8-order-create-card .compact-option-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.r8-order-create-card .compact-option-grid .work-option-card { min-width: 88px; min-height: 42px; flex: 1; padding: .5rem .65rem; background: #fff; border: 1px solid #d1dad6; border-radius: 8px; }
.r8-order-create-card .work-option-card.selected { color: #08745b; background: #eaf7f3; border-color: var(--r8-green); box-shadow: none; }
.r8-order-create-card .compact-option-grid .option-check { display: none; }
.r8-worker-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.r8-order-create-card .worker-browser-section { min-width: 0; padding: 0; background: transparent; border: 0; }
.r8-order-create-card .work-option-heading { display: flex; align-items: center; gap: .5rem; margin-bottom: 6px; }
.r8-order-create-card .work-option-heading h3 { margin: 0; font-size: .66rem; }
.r8-order-create-card .compact-search-field { width: min(142px,58%); margin-left: auto; }
.r8-order-create-card .compact-search-field input { width: 100%; min-height: 34px; padding: .38rem .55rem .38rem 1.65rem; font-size: .62rem; }
.r8-order-create-card .option-list-grid { display: grid; gap: 5px; max-height: 126px; overflow: auto; }
.r8-order-create-card .option-list-card { min-height: 38px; padding: .4rem .55rem; background: #fff; border: 1px solid #d8dfdc; border-radius: 8px; }
.r8-order-create-card .option-copy strong { font-size: .64rem; }
.r8-order-create-card .option-copy small, .r8-order-create-card .option-state-text { font-size: .52rem; }
.r8-payment-section .payment-option-grid { display: flex; max-height: none; overflow: visible; gap: 5px; padding: 3px; background: #e7ecea; border-radius: 9px; }
.r8-payment-section .payment-option-grid .work-option-card { min-width: 0; min-height: 38px; flex: 1; justify-content: center; padding: .4rem .55rem; background: transparent; border: 0; border-radius: 7px; }
.r8-payment-section .payment-option-grid .work-option-card.selected { background: #fff; box-shadow: 0 1px 5px rgba(22,38,31,.08); }
.r8-payment-section .option-copy small, .r8-payment-section .option-state { display: none; }
.r8-paid-toggle { display: flex; min-height: 48px; align-items: center; gap: .65rem; margin-top: 10px; padding: .55rem .7rem; background: #fff; border: 1px solid #d8dfdc; border-radius: 9px; }
.r8-paid-toggle > span:last-child { display: grid; gap: .12rem; }
.r8-paid-toggle strong { font-size: .66rem; }
.r8-paid-toggle small { color: #7a8780; font-size: .55rem; }
.r8-payment-section .mixed-payment-panel { margin-top: 10px; }
.r8-comment-field { margin-top: 11px; }
.r8-comment-field textarea { min-height: 70px; resize: vertical; }

.r8-order-submit-bar { display: grid; grid-template-columns: 110px 100px minmax(0,1fr) auto; min-height: 92px; align-items: center; gap: 18px; padding: 14px 30px; background: #fff; border-top: 1px solid #e1e6e4; }
.r8-order-total, .r8-order-duration { display: grid; gap: .18rem; }
.r8-order-total > span, .r8-order-duration > span { color: #64716b; font-size: .6rem; }
.r8-order-total > strong { color: #10202c; font-size: 1.55rem; line-height: 1; }
.r8-order-duration > strong { color: #10202c; font-size: 1.1rem; }
.r8-order-total em { color: #0b7d62; font-size: .52rem; font-style: normal; }
.r8-order-submit-bar > p { margin: 0; color: #68766f; font-size: .62rem; line-height: 1.45; }
.r8-order-submit-bar > div:last-child { display: flex; gap: 10px; }
.r8-order-submit-bar .secondary-button, .r8-order-submit-bar .primary-button { min-width: 112px; min-height: 46px; justify-content: center; border-radius: 9px; }

@media (max-width: 900px) {
    .r8-order-create-shell { padding: 12px; place-items: start center; }
    .r8-order-create-card { width: min(100%,720px); max-height: none; border-radius: 16px; }
    .r8-order-create-card form { max-height: none; }
    .r8-customer-entry-grid { grid-template-columns: 1fr 1fr; }
    .r8-smart-client-actions { grid-column: 1 / -1; }
    .r8-order-lower-grid { grid-template-columns: 1fr; }
    .r8-order-submit-bar { position: sticky; bottom: 0; grid-template-columns: 1fr 1fr auto; z-index: 10; }
    .r8-order-submit-bar > p { display: none; }
}
@media (max-width: 620px) {
    .r8-order-create-header { min-height: 64px; padding: 0 16px; }
    .r8-order-create-header > div > span { display: none; }
    .r8-order-create-body { padding: 16px; }
    .r8-customer-entry-grid, .r8-worker-columns { grid-template-columns: 1fr; }
    .r8-smart-client-actions { grid-column: auto; }
    .r8-order-create-card .service-live-results { grid-template-columns: 1fr; }
    .r8-extra-service-results { display: grid !important; }
    .r8-extra-service-results .service-choice { width: 100%; border-radius: 9px; }
    .r8-order-submit-bar { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px; }
    .r8-order-submit-bar > div:last-child { grid-column: 1 / -1; }
    .r8-order-submit-bar > div:last-child > * { flex: 1; }
}

/* Worker reports */
.page-workerreports .r8-payroll-page { min-height: 100vh; color: var(--r8-ink); background: var(--r8-canvas); }
.r8-payroll-toolbar { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 9px var(--r8-page-gutter); background: #fff; border-bottom: 1px solid var(--r8-line); }
.r8-payroll-title { min-width: 220px; }
.r8-payroll-title > span, .r8-payroll-table-heading > div > span { display: block; margin-bottom: .12rem; color: var(--r8-green); font-size: .56rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.r8-payroll-title h1 { margin: 0; color: #13232d; font-size: 1.18rem; line-height: 1.12; letter-spacing: -.025em; }
.r8-payroll-filters { display: flex; align-items: end; justify-content: flex-end; gap: 8px; }
.r8-date-field { display: grid; gap: 4px; }
.r8-date-field label { color: #6b7973; font-size: .58rem; font-weight: 750; }
.r8-date-field input { width: 148px; min-height: 40px; padding: .55rem .68rem; color: #21322a; background: #f8faf9; border: 1px solid #d4ddda; border-radius: 8px; outline: 0; font: 650 .72rem/1 Manrope,"Segoe UI",Arial,sans-serif; }
.r8-date-field input:focus { background: #fff; border-color: #6bb7a3; box-shadow: 0 0 0 3px rgba(12,146,114,.08); }
.r8-date-separator { align-self: center; margin-top: 15px; color: #a0aaa5; font-size: .7rem; }
.r8-payroll-build, .r8-payroll-export { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .85rem; border-radius: 8px; font: 800 .7rem/1 Manrope,"Segoe UI",Arial,sans-serif; text-decoration: none; cursor: pointer; }
.r8-payroll-build { color: #fff; background: var(--r8-green); border: 1px solid var(--r8-green); box-shadow: 0 4px 12px rgba(12,146,114,.16); }
.r8-payroll-build:hover { background: var(--r8-green-dark); }
.r8-payroll-export { color: #35473f; background: #fff; border: 1px solid #ccd7d2; }
.r8-payroll-export:hover { color: var(--r8-green-dark); background: #f5f9f7; border-color: #a9c4ba; }
.r8-payroll-export svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.r8-payroll-shift-tools { display: flex; align-items: center; gap: 7px; }
.r8-shift-period { display: flex; min-height: 40px; align-items: center; gap: .55rem; padding: .42rem .65rem; color: #26382f; background: #edf8f4; border: 1px solid #c4e2d8; border-radius: 9px; }
.r8-shift-period > span { display: flex; align-items: center; gap: .36rem; color: #08745b; font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.r8-shift-period i { width: 6px; height: 6px; background: #18a77f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(24,167,127,.12); }
.r8-shift-period strong { padding-left: .55rem; border-left: 1px solid #c5ddd5; font-size: .7rem; white-space: nowrap; }
.r8-shift-period small { color: #6e7c75; font-size: .52rem; white-space: nowrap; }
.r8-shift-period.closed { background: #fff4f1; border-color: #efd1c9; }
.r8-shift-period.closed > span { color: #a94e3c; }
.r8-shift-period.closed i { background: #dc6c58; box-shadow: 0 0 0 3px rgba(220,108,88,.12); }

.r8-payroll-content { display: grid; gap: 16px; padding: 22px var(--r8-page-gutter) 30px; }
.r8-employee-tabs { display: inline-flex; width: max-content; max-width: 100%; padding: 4px; background: #e8eeeb; border-radius: 10px; }
.r8-employee-tabs button { min-height: 38px; padding: .55rem .9rem; color: #63726b; background: transparent; border: 0; border-radius: 8px; font: 750 .76rem/1.2 Manrope,"Segoe UI",Arial,sans-serif; cursor: pointer; white-space: nowrap; }
.r8-employee-tabs button.active { color: #08745b; background: #fff; box-shadow: 0 2px 8px rgba(23,48,38,.1); }
.r8-employee-panel { display: grid; gap: 16px; }
.r8-employee-panel[hidden], [data-payroll-tools][hidden] { display: none; }
.r8-payroll-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.r8-payroll-intro h2 { margin: 0 0 .2rem; color: #17272f; font-size: 1rem; letter-spacing: -.015em; }
.r8-payroll-intro > div > p { margin: 0; color: #74817b; font-size: .7rem; }
.r8-payroll-period { display: inline-flex; min-height: 30px; align-items: center; margin: 0; padding: .35rem .65rem; color: #51625a; background: #eaf2ef; border-radius: 999px; font-size: .65rem; font-weight: 650; }

.r8-payroll-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.page-workerreports .r8-payroll-summary .payroll-summary-card { position: relative; display: grid; min-width: 0; min-height: 118px; gap: .35rem; padding: 15px 16px 14px; overflow: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 11px; box-shadow: 0 3px 12px rgba(22,38,31,.035); }
.page-workerreports .r8-payroll-summary .payroll-summary-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #aab7b2; }
.page-workerreports .r8-payroll-summary .payroll-summary-card.accrued::before, .page-workerreports .r8-payroll-summary .payroll-summary-card.paid::before { background: var(--r8-green); }
.page-workerreports .r8-payroll-summary .payroll-summary-card.fixed::before { background: var(--r8-blue); }
.page-workerreports .r8-payroll-summary .payroll-summary-card.advances::before { background: var(--r8-orange); }
.page-workerreports .r8-payroll-summary .payroll-summary-card.balance::before { background: #16a085; }
.page-workerreports .r8-payroll-summary .payroll-summary-card span { color: #6b7973; font-size: .64rem; font-weight: 650; }
.page-workerreports .r8-payroll-summary .payroll-summary-card strong { overflow-wrap: anywhere; color: #17272f; font-size: clamp(1.05rem,1.4vw,1.38rem); line-height: 1.12; }
.page-workerreports .r8-payroll-summary .payroll-summary-card small { align-self: end; color: #8a9690; font-size: .55rem; line-height: 1.3; }
.page-workerreports .r8-payroll-summary .payroll-summary-card.accrued strong, .page-workerreports .r8-payroll-summary .payroll-summary-card.paid strong, .page-workerreports .r8-payroll-summary .payroll-summary-card.balance strong { color: #08745b; }
.page-workerreports .r8-payroll-summary .payroll-summary-card.advances strong { color: #ad690d; }
.page-workerreports .r8-payroll-summary .payroll-summary-card.balance { background: linear-gradient(145deg,#eef9f5,#fff 70%); }

.r8-payroll-table-card { overflow: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; box-shadow: 0 5px 18px rgba(22,38,31,.04); }
.r8-payroll-table-heading { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px 16px; border-bottom: 1px solid #e2e8e5; }
.r8-payroll-table-heading h2 { margin: 0; color: #17272f; font-size: 1rem; }
.r8-payroll-table-note { color: #75827c; font-size: .64rem; }
.page-workerreports .r8-payroll-table-card .notice { margin: 12px 16px 0; border-radius: 8px; }
.page-workerreports .payroll-table { min-width: 900px; }
.page-workerreports .payroll-table thead th { padding: .72rem .78rem; color: #66756e; background: #f6f8f7; border-bottom: 1px solid #dce4e0; font-size: .58rem; font-weight: 800; letter-spacing: .025em; line-height: 1.25; text-transform: uppercase; }
.page-workerreports .payroll-table thead th small { display: block; margin-top: .14rem; color: #99a49f; font-size: .5rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.page-workerreports .payroll-table tbody td { padding: .78rem; color: #293a32; border-bottom-color: #e5eae8; font-size: .7rem; vertical-align: middle; }
.page-workerreports .payroll-table tbody tr:hover td { background: #fafcfb; }
.page-workerreports .payroll-table tbody tr:last-child td { border-bottom: 0; }
.page-workerreports .payroll-table .table-note { display: block; margin-top: .22rem; color: #819089; font-size: .56rem; }
.r8-worker-cell { display: flex; min-width: 160px; align-items: center; gap: .65rem; }
.r8-worker-cell > .r8-worker-avatar, .r8-worker-cell > span:first-child { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: #08745b; background: #e5f5f0; border-radius: 8px; font-size: .67rem; font-weight: 850; }
.r8-worker-copy { display: grid; min-width: 0; gap: .12rem; }
.r8-worker-cell strong { color: #1c2c34; font-size: .72rem; line-height: 1.25; }
.page-workerreports .payroll-row-actions { flex-wrap: nowrap; gap: 5px; }
.page-workerreports .payroll-row-actions .table-action { min-height: 31px; padding: .38rem .55rem; color: #43544c; background: #fff; border-color: #ced9d4; border-radius: 7px; font-size: .58rem; }
.page-workerreports .payroll-row-actions .table-action:hover { background: #f4f8f6; border-color: #9cbcaf; }
.page-workerreports .payroll-row-actions .table-action.accent { color: #08745b; background: #edf8f4; border-color: #b9ded2; }
.page-workerreports .payroll-row-actions .table-action.salary { color: #315f92; background: #edf4fb; border-color: #c7dbef; }
.page-workerreports .payroll-row-actions .table-action:disabled { cursor: not-allowed; opacity: .5; }
.page-workerreports .administrator-payroll-row td { background: #f9fbfe; }
.page-workerreports .administrator-payroll-row:hover td { background: #f3f8fd; }
.page-workerreports .administrator-payroll-row .r8-worker-avatar { color: #315f92; background: #eaf2fb; }
.r8-payroll-role { color: #315f92; font-size: .56rem; font-weight: 750; }
.r8-payroll-table-footer { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px 16px; background: #fafbfb; border-top: 1px solid #e2e8e5; }
.page-workerreports .r8-payroll-table-footer .data-hint { max-width: 760px; margin: 0; padding: 0; color: #829089; background: transparent; border: 0; font-size: .57rem; line-height: 1.45; }
.page-workerreports .r8-payroll-table-footer .pager { flex: 0 0 auto; margin: 0; padding: 0; }
.page-workerreports .r8-payroll-table-footer .pager button { min-height: 32px; padding: .4rem .62rem; border-radius: 7px; font-size: .6rem; }
.page-workerreports .r8-payroll-table-footer .pager span { color: #66746d; font-size: .62rem; }

.r8-worker-report-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.r8-worker-report-summary article { position: relative; display: grid; min-width: 0; min-height: 88px; gap: .25rem; padding: .75rem .8rem; overflow: hidden; background: #f8faf9; border: 1px solid #dfe6e3; border-radius: 9px; }
.r8-worker-report-summary article::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #aab7b2; }
.r8-worker-report-summary article.earned::before, .r8-worker-report-summary article.balance::before { background: var(--r8-green); }
.r8-worker-report-summary article.advance::before { background: var(--r8-orange); }
.r8-worker-report-summary span { color: #6d7b74; font-size: .56rem; font-weight: 700; }
.r8-worker-report-summary strong { color: #1b2d34; font-size: .95rem; overflow-wrap: anywhere; }
.r8-worker-report-summary small { align-self: end; color: #87938d; font-size: .5rem; }
.r8-worker-report-summary .earned strong, .r8-worker-report-summary .balance strong { color: #08745b; }
.r8-worker-report-summary .advance strong { color: #a8650e; }
.page-workerreports #worker-detail-period { margin: .2rem 0 0; color: #7b8982; font-size: .6rem; }
.r8-worker-detail-section { margin-top: 20px; }
.r8-worker-detail-heading { display: flex; min-height: 46px; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 8px; }
.r8-worker-detail-heading > div > span { display: block; margin-bottom: .12rem; color: var(--r8-green); font-size: .54rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.r8-worker-detail-heading h3 { margin: 0; color: #17272f; font-size: .92rem; letter-spacing: -.015em; }
.r8-worker-detail-heading > small { max-width: 30rem; color: #7c8983; font-size: .56rem; line-height: 1.35; text-align: right; }
.page-workerreports .r8-worker-detail-section .responsive-table { margin: 0; }
.page-workerreports .r8-worker-detail-section table { min-width: 780px; }
.page-workerreports .r8-worker-detail-section .pager { margin-top: 8px; }

.page-workerreports .form-dialog { border-radius: 16px; box-shadow: 0 24px 65px rgba(15,28,35,.26); }
.page-workerreports .payroll-dialog { max-height: calc(100dvh - 24px); overflow: hidden; }
.page-workerreports .payroll-dialog-body { box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.page-workerreports .dialog-heading { border-bottom-color: #e0e7e4; }
.page-workerreports .dialog-heading h2 { color: #17272f; letter-spacing: -.02em; }
.r8-auto-expense-category { display: grid; gap: .35rem; }
.r8-auto-expense-category label { color: #52625a; font-size: .62rem; font-weight: 750; }
.r8-auto-expense-category select { pointer-events: none; color: #08745b; background-color: #edf8f4; border-color: #b9ded2; font-weight: 750; }
.r8-auto-expense-category small { color: #718078; font-size: .56rem; }
.r8-auto-expense-category small.error { color: #b33e3e; }
.page-expenses #expense-category.auto-linked { pointer-events: none; color: #08745b; background-color: #edf8f4; border-color: #b9ded2; font-weight: 750; }

.r8-team-summary { display: grid; grid-template-columns: repeat(2,minmax(0,260px)); gap: 10px; }
.r8-team-summary article { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 13px 15px; background: #fff; border: 1px solid var(--r8-line); border-radius: 11px; box-shadow: 0 3px 12px rgba(22,38,31,.035); }
.r8-team-summary article > div { display: grid; gap: 2px; }
.r8-team-summary strong { color: #17272f; font-size: 1.25rem; line-height: 1; }
.r8-team-summary small { color: #76837d; }
.r8-team-summary-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; font-size: .78rem; font-weight: 900; }
.r8-team-summary-icon.admin { color: #315f92; background: #eaf2fb; }
.r8-team-summary-icon.worker { color: #08745b; background: #e5f5f0; }
.r8-team-card { overflow: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; box-shadow: 0 5px 18px rgba(22,38,31,.04); }
.r8-team-heading { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: 13px 16px; border-bottom: 1px solid #e2e8e5; }
.r8-team-heading > div > span { display: block; margin-bottom: 2px; color: var(--r8-green); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.r8-team-heading h2 { margin: 0; color: #17272f; font-size: 1rem; }
.r8-team-heading p { margin: .22rem 0 0; color: #75827c; font-size: .76rem; }
.r8-role-badge { display: inline-flex; min-height: 27px; align-items: center; padding: .28rem .58rem; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.r8-role-badge.administrator { color: #315f92; background: #eaf2fb; border: 1px solid #c7dbef; }
.page-workerreports .r8-team-table { min-width: 880px; }
.page-workerreports .r8-team-table tbody tr:hover td { background: #fafcfb; }
.page-workerreports .r8-administrators-card .r8-worker-avatar { color: #315f92; background: #eaf2fb; }
.r8-team-search { display: grid; grid-template-columns: minmax(240px,460px) auto; align-items: end; gap: 8px 14px; padding: 13px 16px; background: #fafcfb; border-bottom: 1px solid #e2e8e5; }
.r8-team-search label { grid-column: 1; color: #52625a; font-weight: 750; }
.r8-team-search input { grid-column: 1; min-height: 40px; padding: .55rem .7rem; background: #fff; border: 1px solid #ced9d4; border-radius: 8px; outline: 0; }
.r8-team-search input:focus { border-color: #6bb7a3; box-shadow: 0 0 0 3px rgba(12,146,114,.08); }
.r8-team-search span { grid-column: 2; grid-row: 2; color: #75827c; font-size: .76rem; }
.r8-team-footer { display: flex; min-height: 58px; align-items: center; justify-content: flex-end; padding: 9px 16px; background: #fafbfb; border-top: 1px solid #e2e8e5; }
.r8-team-footer .pager { margin: 0; }
.r8-team-worker-dialog { width: min(620px,calc(100vw - 24px)); }
.r8-form-hint { margin: 0 0 .2rem; padding: .7rem .8rem; color: #53645c; background: #f3f8f6; border: 1px solid #d9e8e2; border-radius: 8px; line-height: 1.45; }

@media (max-width: 1500px) {
    .r8-payroll-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .r8-payroll-toolbar { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px 16px; }
    .r8-payroll-filters { width: 100%; justify-content: flex-start; }
    .r8-payroll-content { padding: 16px; }
    .r8-payroll-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .r8-worker-report-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .r8-team-heading { align-items: flex-start; }
}
@media (max-width: 680px) {
    .r8-payroll-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .r8-date-field input { width: 100%; }
    .r8-date-separator { display: none; }
    .r8-payroll-build, .r8-payroll-export { width: 100%; }
    .r8-payroll-intro { align-items: flex-start; flex-direction: column; }
    .r8-payroll-period { border-radius: 8px; }
    .r8-payroll-summary { grid-template-columns: 1fr; }
    .r8-worker-report-summary { grid-template-columns: 1fr; }
    .r8-worker-detail-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .r8-worker-detail-heading > small { text-align: left; }
    .r8-payroll-table-footer { align-items: stretch; flex-direction: column; }
    .page-workerreports .r8-payroll-table-footer .pager { justify-content: space-between; }
    .r8-employee-tabs { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
    .r8-team-summary { grid-template-columns: 1fr; }
    .r8-team-heading { align-items: stretch; flex-direction: column; }
    .r8-team-heading .primary-button { width: 100%; }
    .r8-team-search { grid-template-columns: 1fr; }
    .r8-team-search span { grid-column: 1; grid-row: auto; }
}

/* Shared workspace modules */
.r8-sidebar-account { display: grid; order: 3; grid-template-columns: 34px minmax(0,1fr) 26px; align-items: center; gap: .65rem; margin: .8rem; padding: .78rem; color: #d8e5df; background: #1d303d; border-radius: 10px; }
.r8-sidebar-account-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #dff5ed; background: #29414d; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; font-size: .7rem; font-weight: 850; }
.r8-sidebar-account-copy { display: grid; min-width: 0; gap: .12rem; }
.r8-sidebar-account-copy strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.r8-sidebar-account-copy span { color: #91a6b0; font-size: .56rem; }
.r8-sidebar-account form { margin: 0; }
.r8-sidebar-account button { display: grid; width: 26px; height: 26px; place-items: center; color: #a9bec7; background: transparent; border: 0; border-radius: 6px; font-size: .8rem; cursor: pointer; }
.r8-sidebar-account button:hover { color: #fff; background: rgba(255,255,255,.08); }
.r8-workspace-page.sidebar-collapsed .r8-sidebar-account { display: none; }

.r8-workspace-page:not(.page-journal):not(.page-workerreports) .app-content { min-height: 100vh; background: var(--r8-canvas); }
.r8-workspace-page:not(.page-journal):not(.page-workerreports) .page-shell { padding: 0 var(--r8-page-gutter) 34px; }
.r8-workspace-page:not(.page-journal):not(.page-workerreports) .page-shell > :first-child { margin-top: 0; }

.r8-workspace-page .module-heading,
.r8-workspace-page .report-page-heading,
.r8-workspace-page .director-heading,
.r8-workspace-page .page-heading { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 0 calc(0px - var(--r8-page-gutter)) 20px; padding: 9px var(--r8-page-gutter); background: #fff; border: 0; border-bottom: 1px solid var(--r8-line); border-radius: 0; box-shadow: none; }
.r8-workspace-page .module-heading > div,
.r8-workspace-page .report-page-heading > div,
.r8-workspace-page .director-heading > div,
.r8-workspace-page .page-heading > div { min-width: 0; }
.r8-workspace-page .module-heading .eyebrow,
.r8-workspace-page .report-page-heading .eyebrow,
.r8-workspace-page .director-heading .eyebrow,
.r8-workspace-page .page-heading .eyebrow { display: block; margin-bottom: .12rem; color: var(--r8-green); font-size: .56rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.r8-workspace-page .module-heading h1,
.r8-workspace-page .report-page-heading h1,
.r8-workspace-page .director-heading h1,
.r8-workspace-page .page-heading h1 { margin: 0; color: #13232d; font-size: 1.18rem; line-height: 1.12; letter-spacing: -.025em; }
.r8-workspace-page .module-heading p,
.r8-workspace-page .report-page-heading p,
.r8-workspace-page .director-heading p,
.r8-workspace-page .page-heading p { margin: .22rem 0 0; color: #74817b; font-size: .6rem; line-height: 1.35; }

.r8-workspace-page .primary-button,
.r8-workspace-page .secondary-button,
.r8-workspace-page .danger-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: .42rem; padding: .58rem .85rem; border-radius: 8px; font-size: .69rem; font-weight: 800; line-height: 1.1; text-decoration: none; }
.r8-workspace-page .primary-button { color: #fff; background: var(--r8-green); border-color: var(--r8-green); box-shadow: 0 4px 12px rgba(12,146,114,.15); }
.r8-workspace-page .primary-button:hover { color: #fff; background: var(--r8-green-dark); border-color: var(--r8-green-dark); }
.r8-workspace-page .secondary-button { color: #384b42; background: #fff; border-color: #ccd7d2; }
.r8-workspace-page .secondary-button:hover { color: var(--r8-green-dark); background: #f5f9f7; border-color: #a9c4ba; }
.r8-workspace-page .danger-button { color: #b23e3e; background: #fff7f7; border-color: #ebc5c5; }
.r8-workspace-page .heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.r8-workspace-page .data-panel,
.r8-workspace-page .director-panel,
.r8-workspace-page .report-dashboard-card,
.r8-workspace-page .report-metric-panel { margin-bottom: 16px; padding: 16px; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; box-shadow: 0 4px 16px rgba(22,38,31,.035); }
.r8-workspace-page .section-heading,
.r8-workspace-page .panel-heading,
.r8-workspace-page .panel-title-row,
.r8-workspace-page .director-panel-heading,
.r8-workspace-page .integration-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 12px; }
.r8-workspace-page .section-heading h2,
.r8-workspace-page .panel-heading h2,
.r8-workspace-page .panel-title-row h2,
.r8-workspace-page .director-panel-heading h2,
.r8-workspace-page .integration-card-heading h2 { margin: 0; color: #1a2b33; font-size: .96rem; letter-spacing: -.015em; }
.r8-workspace-page .section-heading p,
.r8-workspace-page .panel-heading p,
.r8-workspace-page .panel-title-row p { margin: .25rem 0 0; color: #7b8882; font-size: .64rem; }

.r8-workspace-page .metric-grid,
.r8-workspace-page .director-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 10px; margin-bottom: 16px; }
.r8-workspace-page .metric-card,
.r8-workspace-page .director-kpi,
.r8-workspace-page .report-metric { position: relative; display: grid; min-width: 0; min-height: 112px; gap: .32rem; padding: 15px 16px; overflow: hidden; background: #fff; border: 1px solid var(--r8-line); border-radius: 11px; box-shadow: 0 3px 12px rgba(22,38,31,.035); }
.r8-workspace-page .metric-card::before,
.r8-workspace-page .director-kpi::before,
.r8-workspace-page .report-metric::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #aab7b2; }
.r8-workspace-page .metric-card.net::before,
.r8-workspace-page .metric-card.reward::before,
.r8-workspace-page .director-kpi.accent::before,
.r8-workspace-page .director-kpi.result::before,
.r8-workspace-page .report-metric.result::before { background: var(--r8-green); }
.r8-workspace-page .metric-card.expense::before,
.r8-workspace-page .director-kpi.warning::before,
.r8-workspace-page .report-metric.expense::before,
.r8-workspace-page .report-metric.warning::before { background: var(--r8-orange); }
.r8-workspace-page .metric-card span,
.r8-workspace-page .director-kpi span,
.r8-workspace-page .report-metric span { color: #6d7b74; font-size: .63rem; font-weight: 650; }
.r8-workspace-page .metric-card strong,
.r8-workspace-page .director-kpi strong,
.r8-workspace-page .report-metric strong { color: #17272f; font-size: clamp(1.1rem,1.55vw,1.42rem); line-height: 1.15; overflow-wrap: anywhere; }
.r8-workspace-page .metric-card small,
.r8-workspace-page .director-kpi small,
.r8-workspace-page .report-metric small { align-self: end; color: #8b9791; font-size: .55rem; line-height: 1.35; }

.r8-workspace-page .catalog-tabs { display: flex; width: max-content; max-width: 100%; gap: 3px; margin: 0 0 12px; padding: 3px; overflow-x: auto; background: #e9eeec; border: 0; border-radius: 9px; }
.r8-workspace-page .catalog-tab { min-height: 36px; padding: .48rem .72rem; color: #65736c; background: transparent; border: 0; border-radius: 7px; font-size: .65rem; font-weight: 750; white-space: nowrap; }
.r8-workspace-page .catalog-tab.active { color: #08745b; background: #fff; box-shadow: 0 2px 7px rgba(27,45,37,.09); }

.r8-workspace-page .search-label,
.r8-workspace-page .entity-form > label { color: #52625a; font-size: .62rem; font-weight: 750; }
.r8-workspace-page .search-input,
.r8-workspace-page .entity-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.r8-workspace-page .entity-form select,
.r8-workspace-page .entity-form textarea,
.r8-workspace-page .data-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.r8-workspace-page .data-panel select,
.r8-workspace-page .data-panel textarea { min-height: 40px; color: #22342b; background-color: #fff; border-color: #d1dbd6; border-radius: 8px; font-size: .7rem; }
.r8-workspace-page .search-input:focus,
.r8-workspace-page .entity-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.r8-workspace-page .entity-form select:focus,
.r8-workspace-page .entity-form textarea:focus,
.r8-workspace-page .data-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.r8-workspace-page .data-panel select:focus,
.r8-workspace-page .data-panel textarea:focus { border-color: #69b49f; box-shadow: 0 0 0 3px rgba(12,146,114,.08); outline: 0; }
.r8-workspace-page .data-status { color: #718078; font-size: .64rem; }

.r8-workspace-page .responsive-table { border: 1px solid #e0e7e3; border-radius: 10px; }
.r8-workspace-page table thead th { padding: .7rem .75rem; color: #67766f; background: #f5f8f6; border-bottom-color: #dce4e0; font-size: .57rem; font-weight: 800; letter-spacing: .025em; line-height: 1.3; text-transform: uppercase; }
.r8-workspace-page table tbody td { padding: .7rem .75rem; color: #2c3e35; border-bottom-color: #e5eae8; font-size: .68rem; vertical-align: middle; }
.r8-workspace-page table tbody tr:hover td { background: #fafcfb; }
.r8-workspace-page table tbody tr:last-child td { border-bottom: 0; }
.r8-workspace-page .clients-table-wrap { border-color: #e0e7e3; border-radius: 10px; }
.r8-workspace-page .clients-table th { color: #67766f; background: #f5f8f6; }
.r8-workspace-page .clients-table tbody tr:hover { background: #f5fbf8; box-shadow: inset 3px 0 var(--r8-green); }
.r8-workspace-page .client-primary { color: #08745b; }
.r8-workspace-page .client-row-actions .client-app-action { background: var(--r8-green); border-color: var(--r8-green); }
.page-loyalty .loyalty-table .inline-actions { flex-wrap: wrap; }
.page-loyalty .loyalty-table a.table-action { text-decoration: none; }
.page-loyalty .loyalty-table .client-icon-actions { flex-wrap: nowrap; gap: 6px; }
.page-loyalty .loyalty-table .client-icon-action { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; padding: 0; border-radius: 9px; }
.page-loyalty .loyalty-table .client-icon-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-loyalty .loyalty-table .client-icon-action:hover:not(:disabled) { color: #08745b; background: #e7f6f1; border-color: #94cbb9; }
.page-loyalty .loyalty-table .client-icon-action.accent { color: #fff; background: var(--r8-green); border-color: var(--r8-green); }
.page-loyalty .loyalty-table .client-icon-action.accent:hover:not(:disabled) { color: #fff; background: var(--r8-green-dark); border-color: var(--r8-green-dark); }
.page-loyalty .loyalty-table .client-icon-action:disabled { color: #9baba4; background: #f6f8f7; border-color: #dfe6e3; opacity: 1; }
.page-loyalty .client-app-dialog { width: min(470px,calc(100vw - 24px)); overflow: hidden; color: #20384e; background: #fff; border-radius: 18px; }
.page-loyalty .client-app-heading { align-items: flex-start; justify-content: flex-start; padding: 1.15rem 1.25rem 1rem; background: linear-gradient(135deg,#f7fbff,#eef7f5); border-bottom: 1px solid #e1e9e5; }
.page-loyalty .client-app-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: #fff; background: var(--r8-green); border-radius: 12px; font-size: 1.2rem; }
.page-loyalty .client-app-heading-copy { min-width: 0; flex: 1; }
.page-loyalty .client-app-heading-copy h2 { margin: .1rem 0 0; }
.page-loyalty .client-app-heading-copy p { margin: .3rem 0 0; color: #708078; font-size: .66rem; line-height: 1.4; }
.page-loyalty .client-app-content { display: grid; justify-items: stretch; gap: 11px; padding: 1rem 1.25rem .25rem; text-align: center; }
.page-loyalty .client-app-person { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-self: center; gap: .5rem; padding: .4rem .7rem; background: #edf6f3; border-radius: 999px; }
.page-loyalty .client-app-person-icon { color: var(--r8-green); font-size: .58rem; }
.page-loyalty .client-app-person > span:last-child { display: grid; min-width: 0; text-align: left; }
.page-loyalty .client-app-person small { color: #769086; font-size: .54rem; font-weight: 800; text-transform: uppercase; }
.page-loyalty .client-app-person strong { overflow: hidden; color: #18364f; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.page-loyalty .client-app-qr-frame { width: 220px; max-width: 100%; padding: 10px; justify-self: center; background: #f8faf9; border: 1px solid #dce6e2; border-radius: 18px; }
.page-loyalty .client-app-qr { display: grid; width: 200px; max-width: 100%; min-height: 200px; place-items: center; overflow: hidden; background: #fff; border-radius: 11px; }
.page-loyalty .client-app-qr svg { display: block; width: 100%; height: auto; }
.page-loyalty .client-app-instruction { display: grid; gap: .15rem; margin: 0; }
.page-loyalty .client-app-instruction strong { color: #29445d; font-size: .76rem; }
.page-loyalty .client-app-instruction span, .page-loyalty .client-app-expiry { color: #718599; font-size: .65rem; line-height: 1.4; }
.page-loyalty .client-app-divider { display: flex; align-items: center; gap: .6rem; color: #8a9a92; font-size: .59rem; }
.page-loyalty .client-app-divider::before, .page-loyalty .client-app-divider::after { height: 1px; flex: 1; background: #e3e9e6; content: ""; }
.page-loyalty .client-app-code-box { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem .5rem .75rem; background: #f7faf8; border: 1px solid #d8e3de; border-radius: 11px; }
.page-loyalty .client-app-code { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #102c46; font-size: 1rem; font-weight: 900; letter-spacing: .05em; text-align: left; }
.page-loyalty .client-app-copy { min-height: 34px; padding: .4rem .6rem; color: #08785f; background: #eaf8f4; border: 1px solid #b7dcd2; border-radius: 8px; font-size: .64rem; font-weight: 850; cursor: pointer; }
.page-loyalty .client-app-copy-status { min-height: .85rem; color: #08785f; font-size: .62rem; }
.page-loyalty .client-app-actions { margin: 0; padding: .7rem 1.25rem 1.1rem; }
.page-loyalty .client-app-actions .primary-button { width: 100%; }
.r8-workspace-page .pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.r8-workspace-page .pager button { min-height: 32px; padding: .4rem .65rem; color: #43544c; background: #fff; border: 1px solid #ced9d4; border-radius: 7px; font-size: .6rem; font-weight: 750; }
.r8-workspace-page .pager button:hover:not(:disabled) { color: #08745b; background: #f4f9f7; border-color: #9fc2b4; }
.r8-workspace-page .pager span { color: #6c7a73; font-size: .62rem; }

.r8-workspace-page .status-pill { padding: .28rem .5rem; border-radius: 999px; font-size: .57rem; }
.r8-workspace-page .status-pill.active { color: #08745b; background: #e6f6f0; border-color: #b9dfd2; }
.r8-workspace-page .notice { padding: .75rem .9rem; border-radius: 9px; font-size: .67rem; }
.r8-workspace-page .notice.success { color: #10684f; background: #ebf8f3; border-color: #bce2d5; }
.r8-workspace-page .notice.info { color: #345c70; background: #f0f7fa; border-color: #cbdfe8; }

.r8-workspace-page .form-dialog { overflow: hidden; border-radius: 16px; box-shadow: 0 24px 65px rgba(15,28,35,.26); }
.r8-workspace-page .form-dialog .dialog-heading { padding-bottom: .85rem; border-bottom-color: #e0e7e4; }
.r8-workspace-page .form-dialog .dialog-heading h2 { color: #17272f; font-size: 1.12rem; letter-spacing: -.02em; }
.r8-workspace-page .form-dialog .icon-button { color: #56665e; background: #f0f4f2; border-radius: 8px; }
.r8-workspace-page .dialog-actions { gap: 8px; }

/* Dashboard, reports and operational screens */
.page-home .director-dashboard-grid { gap: 12px; }
.page-home .director-panel { border-radius: 12px; }
.page-home .director-action-grid { gap: 8px; }
.page-home .director-action-grid > a { color: #283b32; background: #fafcfb; border-color: #dce4e0; border-radius: 9px; }
.page-home .director-action-grid > a:hover { background: #eff8f4; border-color: #a9cdbf; }
.page-home .director-action-icon { color: #08745b; background: #e6f5f0; border-radius: 8px; }
.page-reports .report-filter-panel { padding: 14px 16px; }
.page-reports .report-metric-panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
.page-reports .report-metrics-primary, .page-reports .report-metrics-secondary { gap: 10px; }
.page-reports .report-dashboard-card { border-radius: 12px; }
.page-inventory .inventory-catalog, .page-inventory .inventory-cart { border-radius: 12px; }
.page-inventory .inventory-product-card, .page-inventory .inventory-cart-row { border-color: #dce4e0; border-radius: 9px; }
.page-inventory .inventory-product-card:hover { border-color: #9cc6b7; box-shadow: 0 4px 13px rgba(12,90,70,.07); }
.page-cameracontrol .camera-control-toolbar, .page-cameracontrol .camera-stat-grid { margin-bottom: 12px; }
.page-cameracontrol .camera-stat { background: #fff; border-color: var(--r8-line); border-radius: 10px; }
.page-cameracontrol .camera-setup { border-radius: 12px; }
.page-settings .settings-summary { gap: 10px; }
.page-settings .settings-summary > div { background: #fff; border-color: var(--r8-line); border-radius: 10px; }
.page-camerastorage .storage-provider-card { border-color: #d7e1dc; border-radius: 10px; }
.page-camerastorage .storage-provider-card:has(input:checked) { background: #eef8f4; border-color: var(--r8-green); box-shadow: 0 0 0 2px rgba(12,146,114,.08); }
.page-integrations .integration-panel { border-radius: 12px; }
.page-integrations .integration-step { color: #fff; background: var(--r8-green); }

@media (max-width: 1100px) {
    .r8-workspace-page .module-heading,
    .r8-workspace-page .report-page-heading,
    .r8-workspace-page .director-heading,
    .r8-workspace-page .page-heading { align-items: flex-start; flex-direction: column; }
    .r8-workspace-page .metric-grid, .r8-workspace-page .director-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .r8-workspace-page { --r8-page-gutter: 16px; }
    .r8-workspace-page:not(.page-journal):not(.page-workerreports) .page-shell { padding: 0 var(--r8-page-gutter) 24px; }
    .r8-workspace-page.sidebar-collapsed .r8-sidebar-account { display: grid; }
}
@media (max-width: 620px) {
    .r8-workspace-page .metric-grid, .r8-workspace-page .director-kpi-grid { grid-template-columns: 1fr; }
    .r8-workspace-page .module-heading,
    .r8-workspace-page .report-page-heading,
    .r8-workspace-page .director-heading,
    .r8-workspace-page .page-heading { padding: 14px var(--r8-page-gutter); }
    .r8-workspace-page .heading-actions { width: 100%; }
    .r8-workspace-page .heading-actions > * { flex: 1; }
}

/* Readability pass: keep secondary copy legible on high-resolution desktop screens. */
.r8-workspace-page {
    --r8-font-micro: .7rem;
    --r8-font-small: .76rem;
    --r8-font-body: .86rem;
    --r8-font-control: .82rem;
}
.r8-workspace-page small { font-size: var(--r8-font-small) !important; line-height: 1.4; }
.r8-workspace-page label { font-size: var(--r8-font-small) !important; }
.r8-workspace-page :is(input, select, textarea) { font-size: var(--r8-font-body) !important; }
.r8-workspace-page table thead th { font-size: var(--r8-font-small) !important; line-height: 1.35; }
.r8-workspace-page table tbody td { font-size: var(--r8-font-body) !important; line-height: 1.4; }
.r8-workspace-page :is(.primary-button, .secondary-button, .danger-button, .table-action, .table-action-button, .catalog-tab, .pager button, .r8-employee-tabs button) {
    font-size: var(--r8-font-control) !important;
}
.r8-workspace-page :is(.eyebrow, .data-status, .table-note, .notice, .pager span) {
    font-size: var(--r8-font-small) !important;
    line-height: 1.4;
}
.r8-workspace-page .sidebar-link { font-size: .92rem; }
.r8-workspace-page .brand-copy small,
.r8-workspace-page .r8-sidebar-account-copy span { font-size: var(--r8-font-micro); }
.r8-workspace-page .r8-sidebar-account-copy strong { font-size: .78rem; }
.r8-workspace-page .report-metric span,
.r8-workspace-page .report-metric small,
.r8-workspace-page .metric-card span,
.r8-workspace-page .metric-card small,
.r8-workspace-page .panel-title-row p,
.r8-workspace-page .page-heading p { font-size: var(--r8-font-small) !important; line-height: 1.4; }

.page-journal :is(.r8-date-selector, .r8-date-navigation button, .r8-journal-search input, .r8-view-switch button, .r8-interval-switch button, .r8-conflicts-pill, .r8-button) {
    font-size: var(--r8-font-control);
}
.page-journal :is(.r8-kicker, .r8-journal-status, .r8-status-legend, .r8-timeline-axis, .r8-lane-label small, .r8-lane-label span) {
    font-size: var(--r8-font-small);
}
.page-journal .r8-lane-label strong { font-size: .88rem; }
.page-journal .r8-order-card > strong { font-size: .82rem; }
.page-journal .r8-order-service { font-size: .72rem; }
.page-journal .r8-order-state { font-size: var(--r8-font-micro); }
.page-journal .r8-order-footer :is(b, i) { font-size: var(--r8-font-micro); }
.page-journal .r8-now-line span { font-size: var(--r8-font-micro); }
.page-journal :is(.r8-summary-card-title, .r8-revenue-card > small, .r8-payment-split, .r8-payment-split strong, .r8-summary-metrics span, .r8-summary-metrics strong, .r8-bay-load-heading h3, .r8-bay-load-heading span, .r8-bay-meter > div, .r8-bay-meter strong) {
    font-size: var(--r8-font-small);
}

.page-journal-detail :is(.r8-order-block > legend, .r8-choice-section > legend, .r8-field > label, .r8-comment-field > label, .service-price-field > label, .r8-smart-client-actions > span) {
    font-size: var(--r8-font-small);
}
.page-journal-detail :is(.r8-smart-action strong, .vehicle-category-card strong, .service-choice strong, .selected-extra > span strong, .work-option-heading h3, .option-copy strong, .r8-paid-toggle strong, .r8-order-total > span, .r8-order-duration > span, .r8-order-submit-bar > p) {
    font-size: var(--r8-font-small);
}
.page-journal-detail :is(.r8-smart-action small, .service-choice small, .selected-extra > span small, .selected-extra label > small, .option-copy small, .option-state-text, .r8-paid-toggle small, .r8-order-total em) {
    font-size: var(--r8-font-micro) !important;
}

.page-workerreports :is(.r8-payroll-title > span, .r8-payroll-table-heading > div > span, .r8-date-field label, .r8-shift-period > span, .r8-payroll-period, .r8-payroll-summary .payroll-summary-card span, .r8-payroll-table-note, .r8-worker-report-summary span, #worker-detail-period, .r8-worker-detail-heading > div > span, .r8-worker-detail-heading > small) {
    font-size: var(--r8-font-small);
}
.page-workerreports .payroll-table thead th small,
.page-workerreports .payroll-table .table-note,
.page-workerreports .r8-payroll-summary .payroll-summary-card small,
.page-workerreports .r8-worker-report-summary small { font-size: var(--r8-font-micro) !important; }
.page-workerreports .payroll-row-actions .table-action,
.page-workerreports .r8-payroll-table-footer .pager button,
.page-workerreports .r8-payroll-table-footer .pager span { font-size: var(--r8-font-small) !important; }

/* Camera control: queue on the left, focused inspection on the right. */
.page-cameracontrol .camera-list-detail-layout { display: block; }
.page-cameracontrol .camera-visits-panel { border-radius: 12px; }
.page-cameracontrol .camera-workbench {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    min-height: 620px;
    background: #fff;
}
.page-cameracontrol .camera-queue-pane {
    min-width: 0;
    border-right: 1px solid var(--r8-line);
    background: #f6f9f7;
}
.page-cameracontrol .camera-queue-heading,
.page-cameracontrol .camera-detail-toolbar {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--r8-line);
    background: #fff;
}
.page-cameracontrol .camera-queue-heading > div,
.page-cameracontrol .camera-detail-toolbar > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-cameracontrol .camera-queue-heading span,
.page-cameracontrol .camera-detail-toolbar > div > span {
    color: var(--r8-green);
    font-size: var(--r8-font-micro);
    font-weight: 800;
    letter-spacing: .08em;
}
.page-cameracontrol .camera-queue-heading strong,
.page-cameracontrol .camera-detail-toolbar strong { color: #17272f; font-size: .9rem; }
.page-cameracontrol .camera-queue-heading > b {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #08745b;
    background: #e3f4ee;
    font-size: var(--r8-font-small);
}
.page-cameracontrol .camera-queue-list {
    max-height: calc(100vh - 260px);
    min-height: 556px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.page-cameracontrol .camera-queue-item {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid #e0e7e4;
    border-left: 4px solid #9aa9a2;
    color: #25372f;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.page-cameracontrol .camera-queue-item:hover { background: #eef5f2; }
.page-cameracontrol .camera-queue-item.active {
    z-index: 1;
    background: #fff;
    box-shadow: inset -3px 0 0 var(--r8-green), 0 4px 14px rgba(19,54,42,.08);
}
.page-cameracontrol .camera-queue-item.matched { border-left-color: #12966f; }
.page-cameracontrol .camera-queue-item.review { border-left-color: #e89520; }
.page-cameracontrol .camera-queue-item.danger { border-left-color: #df4b4b; }
.page-cameracontrol .camera-queue-item.ignored { border-left-color: #a4aea9; opacity: .72; }
.page-cameracontrol .camera-queue-thumbnail {
    display: grid;
    height: 62px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d6e0db;
    border-radius: 8px;
    color: #71857b;
    background: #eaf0ed;
}
.page-cameracontrol .camera-queue-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.page-cameracontrol .camera-queue-thumbnail.empty { font-size: 1.3rem; }
.page-cameracontrol .camera-queue-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.page-cameracontrol .camera-queue-copy-heading {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #66776f;
    font-size: var(--r8-font-small);
}
.page-cameracontrol .camera-queue-copy-heading b { color: #263a31; font-size: var(--r8-font-small); }
.page-cameracontrol .camera-queue-copy-heading time { color: #70817a; font-size: var(--r8-font-micro); }
.page-cameracontrol .camera-queue-copy > strong {
    max-width: 100%;
    overflow: hidden;
    color: #102a20;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-cameracontrol .camera-queue-copy > small {
    max-width: 100%;
    overflow: hidden;
    color: #72847c;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-cameracontrol .camera-queue-copy > em {
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: #4f635a;
    font-size: var(--r8-font-micro);
    font-style: normal;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-cameracontrol .camera-queue-item.matched .camera-queue-copy > em { color: #08745b; }
.page-cameracontrol .camera-queue-item.review .camera-queue-copy > em { color: #a26100; }
.page-cameracontrol .camera-queue-item.danger .camera-queue-copy > em { color: #b92d2d; }
.page-cameracontrol .camera-detail-stage { min-width: 0; background: #fff; }
.page-cameracontrol .camera-detail-toolbar { position: sticky; top: 0; z-index: 3; }
.page-cameracontrol .camera-detail-toolbar > div { flex-direction: row; align-items: baseline; gap: 8px; }
.page-cameracontrol .camera-detail-toolbar > div span { font-size: var(--r8-font-micro) !important; }
.page-cameracontrol .camera-detail-toolbar button { flex: 0 0 auto; }
.page-cameracontrol .camera-detail-stage .camera-visit {
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
    gap: 20px;
    padding: 20px;
    border: 0;
    background: #fff;
    opacity: 1;
}
.page-cameracontrol .camera-detail-stage .camera-visit[hidden] { display: none !important; }
.page-cameracontrol .camera-detail-stage .camera-visit-evidence {
    align-self: start;
    min-height: 300px;
    overflow: hidden;
    border-color: #d7e1dc;
    border-radius: 10px;
    background: #eef3f1;
}
.page-cameracontrol .camera-detail-stage .camera-visit-evidence a,
.page-cameracontrol .camera-detail-stage .camera-visit-evidence img { min-height: 300px; }
.page-cameracontrol .camera-detail-stage .camera-visit-evidence img { object-fit: cover; }
.page-cameracontrol .camera-detail-stage .camera-visit-top { padding-bottom: 12px; border-bottom: 1px solid #e4ebe7; }
.page-cameracontrol .camera-detail-stage .camera-visit-top strong { color: #17272f; font-size: 1.18rem; }
.page-cameracontrol .camera-detail-stage .camera-visit-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-top: 14px;
    font-size: var(--r8-font-body);
}
.page-cameracontrol .camera-detail-stage .camera-match-reason { margin: 12px 0; }
.page-cameracontrol .camera-detail-stage .camera-timeline-strip a { flex-basis: 132px; height: 88px; border-radius: 7px; overflow: hidden; }
.page-cameracontrol .camera-detail-stage .camera-review-block { border-radius: 10px; }
.page-cameracontrol .camera-pagination { background: #fff; }

.page-cameracontrol .camera-administration { margin-top: 14px; }
.page-cameracontrol .camera-admin-console { padding: 0; overflow: hidden; border-radius: 12px; }
.page-cameracontrol .camera-admin-console > summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
.page-cameracontrol .camera-admin-console > summary::-webkit-details-marker { display: none; }
.page-cameracontrol .camera-admin-summary-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    color: #08745b;
    background: #e5f4ef;
    font-size: 1rem;
}
.page-cameracontrol .camera-admin-console > summary > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.page-cameracontrol .camera-admin-console > summary strong { color: #17272f; font-size: .94rem; }
.page-cameracontrol .camera-admin-summary-action { color: #66776f; font-size: var(--r8-font-small); font-weight: 700; }
.page-cameracontrol .camera-admin-console[open] > summary { border-bottom: 1px solid var(--r8-line); }
.page-cameracontrol .camera-admin-console[open] .camera-admin-summary-action { color: var(--r8-green); }
.page-cameracontrol .camera-admin-content { padding: 14px; background: #f5f8f6; }
.page-cameracontrol .camera-admin-content .camera-sidebar-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.page-cameracontrol .camera-admin-content .camera-setup { min-width: 0; border-radius: 10px; box-shadow: none; }

@media (max-width: 1250px) {
    .page-cameracontrol .camera-workbench { grid-template-columns: minmax(280px, 310px) minmax(0, 1fr); }
    .page-cameracontrol .camera-detail-stage .camera-visit { grid-template-columns: minmax(0, 1fr); }
    .page-cameracontrol .camera-detail-stage .camera-visit-evidence { min-height: 0; aspect-ratio: 16 / 9; }
    .page-cameracontrol .camera-detail-stage .camera-visit-evidence a,
    .page-cameracontrol .camera-detail-stage .camera-visit-evidence img { min-height: 0; }
    .page-cameracontrol .camera-admin-content .camera-sidebar-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-cameracontrol .camera-admin-content .camera-sidebar-stack > details:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .page-cameracontrol .camera-workbench { grid-template-columns: minmax(0, 1fr); }
    .page-cameracontrol .camera-queue-pane { border-right: 0; border-bottom: 1px solid var(--r8-line); }
    .page-cameracontrol .camera-queue-list { min-height: 0; max-height: 320px; }
    .page-cameracontrol .camera-detail-toolbar { position: static; }
    .page-cameracontrol .camera-admin-content .camera-sidebar-stack { display: flex; }
    .page-cameracontrol .camera-admin-console > summary { grid-template-columns: 38px minmax(0, 1fr); }
    .page-cameracontrol .camera-admin-summary-action { grid-column: 2; }
}
@media (max-width: 620px) {
    .page-cameracontrol .camera-queue-item { grid-template-columns: 72px minmax(0, 1fr); }
    .page-cameracontrol .camera-queue-thumbnail { height: 54px; }
    .page-cameracontrol .camera-detail-toolbar { align-items: flex-start; }
    .page-cameracontrol .camera-detail-toolbar > div { flex-direction: column; gap: 2px; }
    .page-cameracontrol .camera-detail-stage .camera-visit { gap: 14px; padding: 14px; }
    .page-cameracontrol .camera-detail-stage .camera-visit-meta { grid-template-columns: minmax(0, 1fr); }
    .page-cameracontrol .camera-admin-content { padding: 8px; }
}

/* Unified icon language: rounded line icons instead of font glyphs. */
.r8-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.r8-workspace-page .nav-icon,
.platform-admin .nav-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 8px;
    color: #b8cbd4;
    background: rgba(255,255,255,.035);
    transition: color .16s ease, background .16s ease, transform .16s ease;
}
.r8-workspace-page .sidebar-link,
.platform-admin .sidebar-link {
    gap: .55rem;
    padding-inline: .65rem;
}
.r8-workspace-page .sidebar-link > span:last-child,
.platform-admin .sidebar-link > span:last-child {
    min-width: 0;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}
.r8-workspace-page .nav-icon svg,
.platform-admin .nav-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.r8-workspace-page .sidebar-link:hover .nav-icon,
.platform-admin .sidebar-link:hover .nav-icon {
    color: #e6fff6;
    background: rgba(255,255,255,.09);
    transform: translateX(1px);
}
.r8-workspace-page .sidebar-link.active .nav-icon,
.platform-admin .sidebar-link.active .nav-icon {
    color: #fff;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.r8-workspace-page .r8-sidebar-account button svg,
.r8-workspace-page .r8-sidebar-shift-meta button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-loyalty .loyalty-table .client-icon-action {
    position: relative;
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
    border-radius: 11px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.page-loyalty .loyalty-table .client-icon-action svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.8;
}
.page-loyalty .loyalty-table .client-icon-action.vehicle {
    color: #08745b;
    background: #eaf7f2;
    border-color: #acd8c8;
}
.page-loyalty .loyalty-table .client-icon-action.loyalty {
    color: #9a6208;
    background: #fff7e6;
    border-color: #ecd39c;
}
.page-loyalty .loyalty-table .client-icon-action.connect {
    color: #376a9f;
    background: #eef5fc;
    border-color: #bcd1e6;
}
.page-loyalty .loyalty-table .client-icon-action.message {
    color: #426e67;
    background: #f0f5f3;
    border-color: #ccdcd6;
}
.page-loyalty .loyalty-table .client-icon-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(31,66,52,.12), inset 0 0 0 1px rgba(255,255,255,.45);
}
.page-loyalty .loyalty-table .client-icon-action.vehicle:hover:not(:disabled) { color: #065e49; background: #dff3eb; border-color: #78bca4; }
.page-loyalty .loyalty-table .client-icon-action.loyalty:hover:not(:disabled) { color: #805000; background: #fff0cf; border-color: #dfbf78; }
.page-loyalty .loyalty-table .client-icon-action.connect:hover:not(:disabled) { color: #285784; background: #e2effb; border-color: #91b6d8; }
.page-loyalty .loyalty-table .client-icon-action.message:hover:not(:disabled) { color: #215f54; background: #e4f1ed; border-color: #9cc5b8; }
.page-loyalty .loyalty-table .client-icon-action:focus-visible {
    outline: 3px solid rgba(12,146,114,.2);
    outline-offset: 2px;
}
.page-loyalty .loyalty-table .client-icon-action:disabled {
    color: #9aaba4;
    background: #f3f6f5;
    border-color: #dce4e1;
    box-shadow: none;
}
.page-loyalty :is(.reward-icon, .broadcast-audience-icon, .client-app-heading-icon, .client-app-person-icon) svg,
.page-loyalty .client-app-expiry svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.page-loyalty .reward-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: #9a6208;
    background: #fff2d2;
}
.page-loyalty .discount-reward .reward-icon { color: #08745b; background: #e3f4ee; }
.page-loyalty .reward-icon svg { width: 22px; height: 22px; }
.page-loyalty .broadcast-audience-icon svg { width: 19px; height: 19px; }
.page-loyalty .client-app-heading-icon svg { width: 21px; height: 21px; }
.page-loyalty .client-app-person-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #e5f4ef;
}
.page-loyalty .client-app-person-icon svg { width: 16px; height: 16px; }
.page-loyalty .client-app-expiry { display: flex; align-items: center; justify-content: center; gap: 5px; }
.page-loyalty .client-app-expiry svg { width: 14px; height: 14px; flex: 0 0 14px; }