/* ============================================================
   PowerConnect – New Design System
   Custom styles layered on top of AC Core component library.
   Prefix: pc- for layout/page-level elements
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
@media (max-width: 767px) {
    html, body { background: #F5F2EF; /* beige behind iPhone notch/Dynamic Island */ }
}

/* Locks the page behind any open drawer on iOS (position:fixed prevents rubber-band bleed-through).
   JS must save/restore window.scrollY when toggling this class. */
body.pc-drawer-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

body {
    margin: 0 !important;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #202020;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

/* Make the main content area grow to fill space between header and footer.
   This eliminates the dead white-space gap when content is shorter than the viewport. */
.pc-layout-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main.page-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ensure the HTML `hidden` attribute wins over class-level `display: flex`. */
[hidden] { display: none !important; }

/* Bootstrap-compat shim: legacy partials (barcode scanner, notification dialog, user profile)
   toggle visibility via `.d-none`. Preserve that behaviour even though Bootstrap is dropped. */
.d-none { display: none !important; }

/* Only allow the drawers' internal scroll when they are actually open;
   prevents their scrollbar from rendering at the viewport edge while off-screen. */
.pc-menu-drawer, .pc-drawer { overflow-y: hidden; }
.pc-menu-drawer.pc-menu-drawer--open, .pc-drawer.pc-drawer--open { overflow-y: auto; }

/* Forms inside a drawer: recreate the 16px vertical rhythm that .pc-drawer__body
   applies to its direct children. */
.pc-request-service-form,
.pc-oil-sampling-form,
.pc-log-service-form,
#qlink-form,
#visual-check-form,
#warranty-reg-form,
#fe-edit-form,
#qu-edit-form,
#rm-edit-form,
#vm-edit-form,
#fn-edit-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

/* --- Log Service kit accordion cards --- */
.pc-kit-accordion { display: flex; flex-direction: column; gap: 8px; }
.pc-kit-card { border: 1px solid #D1D4D7; border-radius: 8px; overflow: hidden; }
.pc-kit-card__header { padding: 0; }
.pc-kit-card__toggle {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 10px 16px;
    background: transparent; border: none;
    color: #fff; font-size: 15px; font-weight: 600;
    cursor: pointer; text-align: left;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
}
.pc-kit-card__pn { flex: 1; }
.pc-kit-card__remove { display: inline-flex; padding: 4px; border-radius: 4px; cursor: pointer; }
.pc-kit-card__remove:hover { background: rgba(0,0,0,0.1); }
.pc-kit-card__remove img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.pc-kit-card__body { padding: 12px 16px; background: #fff; }
.pc-kit-card__body.collapse[hidden] { display: none !important; }
.pc-kit-card__fields {
    margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
    font-size: 13px;
}
.pc-kit-card__fields dt { color: #5B6770; font-weight: 600; }
.pc-kit-card__fields dd { margin: 0; color: #2F363A; }

/* --- Kit search row --- */
.pc-kit-search {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid #D1D4D7;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pc-kit-search:focus-within {
    border-color: #0092BC;
    box-shadow: 0 0 0 3px rgba(0,146,188,0.12);
}
.pc-kit-search .pc-form-input {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent;
    padding-left: 12px;
}
.pc-kit-search__btn {
    flex-shrink: 0;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid #E7E0DA;
    color: #5B6770;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.pc-kit-search__btn:hover { background: #F5F2EF; color: #0092BC; }
.pc-kit-search__btn--scan:hover { color: #0092BC; }

/* Autocomplete suggestion list styling for kit search */
.pc-kit-suggestions {
    list-style: none; margin: 0; padding: 4px 0;
    border: 1px solid #D1D4D7; border-radius: 6px; background: #fff;
    max-height: 220px; overflow-y: auto;
}
.pc-kit-suggestions li {
    padding: 8px 12px; font-size: 14px; cursor: pointer;
}
.pc-kit-suggestions li:hover { background: #F8F9F9; }

/* --- V2 modal overlay (ac-core-style, replaces Bootstrap .modal) --- */
.pc-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 500; padding: 16px;
}
.pc-modal {
    background: #fff; border-radius: 12px; max-width: 480px; width: 100%;
    max-height: calc(100vh - 32px); overflow-y: auto;
    display: flex; flex-direction: column;
}
.pc-modal__header {
    padding: 16px 20px; border-bottom: 1px solid #D1D4D7;
    display: flex; align-items: center; justify-content: space-between;
}
.pc-modal__title { font-size: 18px; font-weight: 700; color: #2F363A; margin: 0; }
.pc-modal__close {
    background: transparent; border: none; cursor: pointer; color: #5B6770;
    padding: 4px; display: inline-flex; align-items: center; justify-content: center;
}
.pc-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pc-modal__footer {
    padding: 12px 20px; border-top: 1px solid #D1D4D7;
    display: flex; justify-content: flex-end; gap: 8px;
}

a { color: inherit; text-decoration: none; }

/* --- Design tokens ----------------------------------------- */

:root {
    --ac-blue:        #0092bc;
    --ac-blue-dark:   #005f7a;
    --ac-blue-light:  #e8f4fd;
    --ac-teal:        #0092bc;
    --ac-yellow:      #ffea00;
    --ac-black:       #202020;
    --ac-gray-light:  #f5f5f5;
    --ac-gray-border: #e0e0e0;
    --ac-gray-text:   #666;
    --ac-red:         #d0021b;
    --ac-green:       #2e7d32;
    --ac-white:       #ffffff;
    --page-max-width: 1280px;
    --page-padding:   0 24px;
    --pc-page-pad:    240px;
}

/* Fluid page padding across breakpoints */
@media (max-width: 1600px) { :root { --pc-page-pad: 120px; } }
@media (max-width: 1280px) { :root { --pc-page-pad: 64px; } }
@media (max-width: 1024px) { :root { --pc-page-pad: 32px; } }
@media (max-width: 767px)  { :root { --pc-page-pad: 16px; } }

/* --- Shared page wrapper ----------------------------------- */

main {
    background: #ffffff;
    padding-bottom: 48px;
}

.pc-page {
    padding: 0 var(--pc-page-pad);
}

/* ============================================================
   HOME HERO
   ============================================================ */

/* Lock html scroll on the home page (Chrome doesn't honour position:fixed on body alone). */
html:has(body.pc-home-page) { overflow: hidden; }

/* Home page: fixed so the keyboard never causes layout scroll or nav drift.
   position:fixed + inset:0 pins the body to the viewport regardless of soft keyboard.
   The keyboard simply overlays the bottom; the layout never scrolls. */
body.pc-home-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.pc-home-page .pc-layout-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pc-home-hero {
    position: relative;
    flex: 1;
    overflow: hidden;
    background-image: var(--pc-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);
}

.pc-home-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 952px;
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    color: #fff;
}

.pc-home-hero__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 4px;
    padding: 4px 10px;
}

.pc-home-hero__title {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

.pc-home-hero__desc {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    margin: 0;
}

.pc-home-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    width: 100%;
    /* max-width moved to the #pc-home-search-wrap wrapper so the suggestions
       <ul> sibling can escape this overflow:hidden pill at the correct width. */
}
.pc-home-search__divider {
    width: 1px;
    height: 24px;
    background: #D1D4D7;
    flex-shrink: 0;
}
.pc-home-search__scan-btn {
    color: var(--ac-blue) !important;
}

.pc-home-search__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 16px;
    font-size: 15px;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    color: #2F363A;
    background: transparent;
}
.pc-home-search__input::placeholder { color: #AAB0B5; }

.pc-home-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: none;
    border: none;
    color: #AAB0B5;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.pc-home-search__btn:hover { color: #5B6770; }

.pc-home-hero__spare-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 12px 28px;
    border: 2px solid #0092BC;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.pc-home-hero__spare-btn:hover {
    background: rgba(0, 146, 188, 0.2);
}

/* ── Home hero: responsive ──────────────────────────────────────────────── */

/* Tablet: 768 – 1024px */
@media (max-width: 1024px) {
    .pc-home-hero__content {
        padding: 48px 32px;
        max-width: 100%;
    }
    .pc-home-hero__title { font-size: 34px; }
}

/* Mobile: ≤ 767px */
@media (max-width: 767px) {
    .pc-home-hero {
        align-items: flex-start;
        /* Use the dedicated mobile image (less zoomed, portrait-optimised).
           Falls back to desktop image via CSS variable if mobile version absent. */
        background-image: var(--pc-hero-bg-m, var(--pc-hero-bg));
        /* On narrow screens a left→right gradient leaves the right half too bright;
           switch to a top-heavy gradient so text stays readable at any width. */
        background-position: center top;
    }
    .pc-home-hero__overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.25) 100%);
    }
    .pc-home-hero__content {
        padding: 72px 20px 96px;
        gap: 16px;
        align-items: flex-start;
    }
    .pc-home-hero__title  { font-size: 26px; line-height: 1.25; }
    .pc-home-hero__desc   { font-size: 14px; }

    /* Search bar: keep pill shape but let it breathe on narrow screens */
    .pc-home-search__input { font-size: 14px; padding: 12px 12px; }
    .pc-home-search__btn   { width: 44px; height: 44px; }

    /* Spare parts button: full width on mobile */
    .pc-home-hero__spare-btn {
        align-self: stretch;
        text-align: center;
        font-size: 14px;
        padding: 11px 20px;
    }
}

/* Small phones: ≤ 480px */
@media (max-width: 480px) {
    .pc-home-hero__title { font-size: 22px; }
}

/* ============================================================
   HEADER
   ============================================================ */

/* Fixed header — reliable across all browsers/layouts (sticky fails inside some flex/overflow combos).
   A JS spacer (#pc-header-spacer) in _Layout.cshtml compensates for the removed flow space. */
.pc-header {
    background: linear-gradient(to right, #F5F2EF 0%, #EFEBE6 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 8px 0 rgba(47, 54, 58, 0.16);
    padding-top: env(safe-area-inset-top);
}
/* Home page: header lives inside the position:fixed body flex layout — keep it in flow */
body.pc-home-page .pc-header {
    position: relative;
    top: auto; left: auto; right: auto;
}
/* Spacer that mirrors the fixed header height so content starts below it.
   JS sets --pc-header-h to the exact target height BEFORE the header animates,
   so the spacer and header collapse/expand in perfect sync. */
#pc-header-spacer {
    flex-shrink: 0;
    height: var(--pc-header-h, 116px);
    transition: height 0.35s ease-in-out;
}
body.pc-home-page #pc-header-spacer { display: none; }

/* Row 1 – top utility bar */
.pc-header__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    height: 40px;
    padding: 0 var(--pc-page-pad);
    border-bottom: 1px solid #E7E0DA;
    background: linear-gradient(to right, #F5F2EF 0%, #EFEBE6 100%);
    font-size: 13px;
    color: var(--ac-black);
}

.pc-header__top a {
    color: #5B6770;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-header__top a:hover { color: var(--ac-blue); }


.pc-header__top-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #5B6770;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.02em;
}

.pc-header__top-dropdown svg { width: 12px; height: 12px; }

.pc-header__top-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #5B6770;
    border-radius: 50%;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}
.pc-header__top-bell:hover {
    color: var(--ac-blue);
    background: rgba(0, 146, 188, 0.08);
}

/* ── Top bar mobile: icons only (language keeps its short code) ─────────── */
@media (max-width: 767px) {
    .pc-header__top { gap: 4px; padding: 0 12px; }
    .pc-top-label   { display: none; }

    /* Give each icon-only link/button a consistent touch target */
    .pc-header__top a,
    .pc-header__top-bell,
    .pc-header__top-dropdown { min-width: 36px; justify-content: center; }
}

/* Row 2 – main nav: logo + nav links + search */
.pc-header__main {
    display: flex;
    align-items: center;
    padding: 20px var(--pc-page-pad);
    gap: clamp(16px, 3vw, 48px);
    flex-wrap: nowrap;
    background: transparent;
    border-top: 1px solid #E7E0DA;
    /* Collapse animation */
    max-height: 160px;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, padding 0.35s ease-in-out,
                opacity 0.28s ease-in-out, border-color 0.35s ease-in-out;
}

/* Collapsed state — main nav disappears, top bar remains */
.pc-header--scrolled .pc-header__main {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    opacity: 0;
    pointer-events: none;
}

/* Compact menu button shown in top bar when nav is collapsed */
.pc-header__top-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ac-black, #202020);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    margin-right: auto; /* pushes top-bar icons to the right */
    border-radius: 4px;
}
.pc-header__top-menu-btn:hover { background: rgba(0,0,0,0.06); }
.pc-header--scrolled .pc-header__top-menu-btn { display: flex; }

.pc-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pc-header__logo img {
    height: 64px;
    width: 133px;
    display: block;
}

.pc-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 52px;
}

.pc-header__nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0;
    color: #5B6770;
    padding: 0 clamp(8px, 1vw, 16px);
    white-space: nowrap;
}

.pc-header__nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}

.pc-header__nav a:hover { color: #2F363A; }
.pc-header__nav a.active {
    color: #2F363A;
    font-weight: 600;
}
.pc-header__nav a.active::after {
    background: #0092BC;
}

/* Search bar */
.pc-header__search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    flex: 0 1 auto;
    width: clamp(180px, 28vw, 480px);
    /* Allow the search to compress all the way to icon-only when the nav is tight */
    min-width: 100px;
    background: #F5FBFC;
    border: 1px solid #AAB0B5;
    border-radius: 28px;
    padding: 0 16px;
    overflow: hidden;
}

.pc-header__search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--ac-black);
    width: 100%;
}

.pc-header__search input::placeholder { color: #AAB0B5; }

.pc-header__search svg {
    color: #AAB0B5;
    flex-shrink: 0;
}

.cmp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ac-gray-text);
}

.cmp-breadcrumb__item:not(:last-child)::after {
    content: '›';
    color: #bbb;
    font-size: 16px;
    line-height: 1;
}

.cmp-breadcrumb__item-link {
    color: var(--ac-blue);
    font-size: 13px;
}

.cmp-breadcrumb__item-link:hover { text-decoration: underline; }

.cmp-breadcrumb__item--active .cmp-breadcrumb__item-link {
    color: var(--ac-gray-text);
    pointer-events: none;
}

.pc-breadcrumb-home {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   BUTTONS
   Override/extend ac-core-buttons.css cmp-button
   ============================================================ */

.pc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    height: 56px;
    border-radius: 56px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
    white-space: nowrap;
    text-decoration: none;
}

.pc-btn--primary {
    background: linear-gradient(90deg, #1F9FC4 0%, #0092BC 50%, #006F8F 100%);
    color: #fff !important;
    border: none;
}
.pc-btn--primary:hover {
    opacity: 0.9;
}

.pc-btn--outline {
    background: transparent;
    color: var(--ac-black) !important;
    border: 2px solid var(--ac-blue);
}
.pc-btn--outline:hover {
    background: var(--ac-blue-light);
}

.pc-btn--ghost {
    background: transparent;
    color: var(--ac-blue);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}
.pc-btn--ghost:hover { text-decoration: underline; }

/* ============================================================
   TABS  (ac-core cmp-tabs pattern)
   ============================================================ */

.pc-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 24px 0 0 0;
    list-style: none;
    height: 88px;
    border-bottom: 1px solid #AAB0B5;
}

.pc-tabs__item {
    display: flex;
}

.pc-tabs__item a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ac-gray-text);
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    white-space: nowrap;
}

.pc-tabs__item a:hover { color: var(--ac-blue); }

.pc-tabs__item--active a {
    color: var(--ac-black);
    border-bottom-color: #0092BC;
}

.pc-tab-panel { display: none; }
.pc-tab-panel--active {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 40px 0;
    flex: 1;
}

/* ============================================================
   MACHINE HERO
   ============================================================ */

.pc-machine-hero-bg {
    background: #F8F9F9;
    border-bottom: 1px solid #D1D4D7;
}

.pc-machine-hero {
    display: grid;
    grid-template-columns: minmax(240px, 358px) minmax(0, 1fr);
    gap: clamp(24px, 6vw, 122px);
    align-items: center;
    padding: clamp(40px, 6vw, 96px) var(--pc-page-pad);
}

/* "Equipment Details" label — hidden on desktop, shown by mobile rule */
.pc-machine-page-label { display: none; }

.pc-machine-hero__image img {
    width: 100%;
    object-fit: contain;
}

/* Right side of hero */
.pc-machine-hero__details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-machine-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--ac-black);
    margin: 0;
    line-height: 1.2;
}

/* Mini-tabs inside hero (Machine Info / Warranty Info) */
.pc-hero-tabs {
    display: flex;
    align-items: stretch;
    height: 64px;
    border-bottom: 1px solid #AAB0B5;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-hero-tabs__item {
    display: flex;
}

.pc-hero-tabs__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ac-gray-text);
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    white-space: nowrap;
}

.pc-hero-tabs__item a:hover { color: var(--ac-blue); }

.pc-hero-tabs__item--active a {
    color: var(--ac-black);
    border-bottom-color: #0092BC;
}

/* Data grid: 2-column grid, each cell = label + value pair */
.pc-hero-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 0;
    width: 100%;
}

/* Each label+value pair */
.pc-hero-data__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 8px;
    gap: 8px;
}

/* Alternating row backgrounds: rows 1 & 3 (items 1,2 and 5,6) = white */
.pc-hero-data__item:nth-child(4n+1),
.pc-hero-data__item:nth-child(4n+2) {
    background: #ffffff;
}

.pc-hero-data__label {
    font-size: 13px;
    color: var(--ac-gray-text);
    flex-shrink: 0;
}

.pc-hero-data__value {
    font-size: 13px;
    color: var(--ac-black);
    font-weight: 600;
    text-align: right;
}

.pc-hero-data__value--muted {
    color: var(--ac-gray-text);
    font-weight: 400;
}

/* --- Localized serial number inline edit ----------------------------------- */

.pc-lsn-view,
.pc-lsn-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    /* Stay on one line — never let the icon drop below the text */
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

/* The serial number text inside the view span: truncate rather than wrap.
   Also reset the mobile max-width:55% that .pc-hero-data__value inherits,
   because here the icon must stay on the same line. */
.pc-lsn-view .pc-hero-data__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
    max-width: unset;
    word-break: normal;
}

.pc-lsn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #D1D4D7;
    border-radius: 6px;
    background: #F8F9F9;
    color: #5B6770;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pc-lsn-icon-btn:hover {
    background: #F0EBE5;
    border-color: #AAB0B5;
    color: #2F363A;
}
.pc-lsn-icon-btn--save:hover  { background: rgba(0,146,188,0.10); border-color: rgba(0,146,188,0.35); color: #0092BC; }
.pc-lsn-icon-btn--cancel:hover { background: rgba(200,30,30,0.08); border-color: rgba(200,30,30,0.3); color: #C81E1E; }
.pc-lsn-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pc-lsn-input {
    width: 130px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ac-black);
    background: #fff;
    border: 1.5px solid #0092BC;
    border-radius: 6px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,146,188,0.12);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pc-lsn-input:disabled { opacity: 0.5; }

@media (max-width: 540px) {
    .pc-lsn-input { width: 100px; }
}

.pc-machine-hero__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 24px;
}

/* ============================================================
   BOTTOM TABS + TABLE
   ============================================================ */

.pc-tabs-section {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DATA TABLE
   ============================================================ */

.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pc-table thead tr {
    background: #ffffff;
}

.pc-table thead th {
    text-align: left;
    padding: 16px 4px;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
    color: #2F363A;
    white-space: nowrap;
    min-width: 32px;
    border-bottom: 2px solid #0092BC;
}

/* Header + first data row = white; then odd=white, even=no bg */
.pc-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.pc-table tbody tr:nth-child(even) {
    background: #F8F9F9;
}

.pc-table tbody td {
    padding: 16px 4px;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #5B6770;
    vertical-align: middle;
    min-width: 32px;
    min-height: 60px;
    border-bottom: 1px solid #D1D4D7;
}

.pc-table tbody td:last-child { text-align: right; }
.pc-table thead th:last-child { text-align: right; }

.pc-table__download {
    color: var(--ac-blue);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.pc-table__muted { color: var(--ac-gray-text); }

.pc-show-more {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-black);
    cursor: pointer;
    width: fit-content;
    background: transparent;
    border: none;
}

.pc-show-more svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   Scrollable long tables — applied by table-paginate.js AFTER
   the user clicks "Show more items". Wraps a <table class="pc-table">
   in a fixed-height container so the newly-revealed rows scroll
   inside the table area instead of growing the page. The thead
   stays pinned at the top via position: sticky.
   No decorative border / radius — default pc-table look is preserved.
   ------------------------------------------------------------ */
.pc-table-scroll {
    /* Row height ≈ 62px (padding 16+16 + line-height 28 + 1px border), header ≈ 58px
       (padding 16+16 + line-height 24 + 2px border). Tuned so N body rows + header
       matches the natural pre-click layout — otherwise the wrapper ends up shorter
       than the collapsed table and the expansion looks like it shrunk. */
    max-height: calc(var(--pc-paginate-rows, 7) * 62px + 58px);
    overflow-y: auto;
    /* Visually hide the scrollbar so it never eats into the table's content width.
       We tried both alternatives first:
         1. Let the scrollbar take 15px → UUIDs either wrap at hyphens (rows twice
            as tall) or, with white-space:nowrap, overflow horizontally. Both made
            the expanded table look visibly different from the collapsed one.
         2. scrollbar-gutter: stable → made the two states consistent, but at the
            wrong baseline (container − 15px) so UUIDs wrapped in BOTH states.
       The only way to keep the exact full-width layout of the pre-click table is
       to render the scrollbar out-of-flow. Scrolling still works via wheel /
       trackpad / keyboard — and the "Show more items" button already surfaced the
       fact that there's more content to reveal, so discoverability is handled. */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge / IE */
}
.pc-table-scroll::-webkit-scrollbar {
    display: none;                /* Chromium + Safari */
}

.pc-table-scroll .pc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
    /* With border-collapse: collapse + position: sticky, Chrome keeps the th's
       real border-bottom painted on the first BODY row instead of travelling
       with the sticky header. That left two parallel blue lines at the top of
       the scroll area: the box-shadow (moving with header) + the stuck border
       (hovering above row 1). Replace the real border with box-shadow only so
       exactly one blue line stays glued to the header while scrolling. */
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 #0092BC;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Dealer / Authorized Distributor bar — sits immediately above the fixed footer */
.pc-footer__dealer {
    position: fixed;
    bottom: 48px;          /* sits on top of the 48px footer */
    left: 0;
    right: 0;
    z-index: 49;
    height: 56px;
    background: #fff;
    border-top: 1px solid #E7E0DA;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--pc-page-pad);
    gap: 12px;
}

.pc-footer__dealer-label {
    font-size: 13px;
    color: #5B6770;
    white-space: nowrap;
}

.pc-footer__dealer-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* When the dealer bar is present, push main content up an extra 56px so it isn't hidden under both bars */
body:has(.pc-footer__dealer) main {
    padding-bottom: calc(48px + 56px);
}

.pc-footer {
    background: var(--ac-black);
    color: #ccc;
    padding: 0 var(--pc-page-pad);
    height: 48px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.pc-footer__inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pc-footer__logo img { height: 24px; filter: brightness(0) invert(1); }

.pc-footer__links {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-footer__links a {
    color: #ccc;
    font-size: 13px;
}

.pc-footer__links a:hover { color: #fff; }

.pc-footer__copy { font-size: 12px; color: #888; }

/* Home-page footer override */
.pc-footer--home {
    background: linear-gradient(to right, #F5F2EF 0%, #EFEBE6 100%);
    color: #5B6770;
}
.pc-footer--home .pc-footer__links a {
    color: #5B6770;
    font-size: 13px;
}
.pc-footer--home .pc-footer__links a:hover { color: var(--ac-blue, #0092BC); }
.pc-footer--home .pc-footer__copy { color: #5B6770; }
.pc-footer__right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pc-footer__install-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #0092BC 0%, #005F7A 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.pc-footer__install-btn:hover { opacity: 0.88; }

@media (max-width: 767px) {
    /* On mobile the footer sits in the normal page flow (not fixed).
       position:fixed on mobile Chrome causes the footer to "float" in the
       middle of the page because the visual viewport height changes as the
       browser URL bar hides/shows — the gap below the footer is that shift. */
    .pc-footer {
        position: static;
    }

    /* Non-home footer: drop logo, stack links + copyright */
    .pc-footer:not(.pc-footer--home) {
        height: auto;
        padding: 10px 16px;
    }
    .pc-footer:not(.pc-footer--home) .pc-footer__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        gap: 6px;
    }
    .pc-footer:not(.pc-footer--home) .pc-footer__logo { display: none; }
    .pc-footer:not(.pc-footer--home) .pc-footer__links {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pc-footer:not(.pc-footer--home) .pc-footer__links a { font-size: 12px; }
    .pc-footer:not(.pc-footer--home) .pc-footer__copy {
        font-size: 11px;
        text-align: center;
    }

    /* Footer + dealer bar are position:static on mobile — no extra bottom padding needed */
    main { padding-bottom: 0; }
    .pc-footer__dealer { position: static; height: auto; padding: 10px var(--pc-page-pad); border-top: 1px solid #E7E0DA; }
    body:has(.pc-footer__dealer) main { padding-bottom: 0; }

    /* Footer becomes two stacked rows: blue button bar + links bar */
    .pc-footer--home {
        padding: 0;
        height: auto;
    }
    .pc-footer--home .pc-footer__inner {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0;
    }

    /* Row 1 — full-width solid blue install button */
    .pc-footer__install-btn {
        height: 48px;
        flex: none;
        width: 100%;
        justify-content: center;
        border-radius: 0;
        padding: 0 20px;
    }

    /* Row 2 — links + copyright */
    .pc-footer--home .pc-footer__right {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 16px;
        padding: 8px 16px;
    }
    .pc-footer--home .pc-footer__links { gap: 12px; }
    .pc-footer--home .pc-footer__version { display: none; }
}

/* ============================================================
   INDEX PAGE (design overview)
   ============================================================ */

.pc-index {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 24px;
}

.pc-index h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.pc-index p  { color: var(--ac-gray-text); margin-bottom: 32px; }

.pc-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.pc-index__card {
    border: 1px solid var(--ac-gray-border);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow .2s;
}

.pc-index__card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border-color: var(--ac-blue);
}

.pc-index__card-icon { font-size: 28px; }
.pc-index__card-name { font-weight: 700; font-size: 15px; }
.pc-index__card-desc { font-size: 13px; color: var(--ac-gray-text); }

/* ============================================================
   SERVICE & REPAIR PAGE
   ============================================================ */

/* Top hero: left content + right alert card */
.pc-sr-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 40px var(--pc-page-pad);
    background: #F8F9F9;
}

/* Left column */
.pc-sr-hero__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 468px;
    max-width: 952px;
}

/* Back link */
.pc-sr-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #5B6770;
}
.pc-sr-back:hover { color: var(--ac-black); }

/* Title + subtitle */
.pc-sr-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--ac-black);
    margin: 0;
}

.pc-sr-subtitle {
    font-size: 16px;
    color: #5B6770;
    margin: 0;
}

.pc-sr-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.pc-sr-actions .pc-btn {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
}

/* Alert / info card */
.pc-sr-alert {
    background: #F5FBFC;
    border: 1px solid #006F8F;
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pc-sr-alert__header {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 24px;
}

.pc-sr-alert__icon { flex-shrink: 0; }

.pc-sr-alert__title {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
    color: #2F363A;
}

.pc-sr-alert__body {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #5B6770;
    margin: 0;
    padding: 0 24px 24px 24px;
    gap: 8px;
}

/* Service History section */
.pc-sr-section {
    padding: 40px var(--pc-page-pad);
    background: #ffffff;
}

.pc-sr-section__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    gap: 24px;
    margin-bottom: 8px;
}

.pc-sr-section__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ac-black);
    margin: 0;
}

.pc-sr-section__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pc-sr-export {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 0 16px;
    border-radius: 56px;
    border: none;
    background: transparent;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #006F8F !important;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.pc-sr-export:hover { background: var(--ac-blue-light); }

.pc-sr-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #5B6770;
}

.pc-sr-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-black);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ============================================================
   INSTRUCTIONS & GUIDES PAGE
   ============================================================ */

/* Hero when no right card — make left fill */
.pc-ig-hero {
    grid-template-columns: 1fr;
}

/* Section (white bg, below hero) */
.pc-ig-section {
    padding: 40px var(--pc-page-pad) 80px;
    background: #ffffff;
}

/* Tab bar — reuse pc-tabs but with bottom margin */
.pc-ig-tabs {
    margin-bottom: 32px;
}

/* Card grid: 2 columns */
.pc-ig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Card */
.pc-ig-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #D1D4D7;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pc-ig-card:hover {
    border-color: #0092BC;
    box-shadow: 0 2px 8px rgba(0, 146, 188, 0.08);
}

.pc-ig-card__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background: #F5F7F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pc-ig-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-ig-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pc-ig-card__title {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #2F363A;
    margin: 0;
}

.pc-ig-card__pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 14px;
    border: 1px solid #0092BC;
    border-radius: 56px;
    font-size: 13px;
    font-weight: 600;
    color: #0092BC;
    width: fit-content;
}

.pc-ig-card__download {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, #1F9FC4 0%, #0092BC 50%, #006F8F 100%);
    text-decoration: none;
    transition: opacity 0.2s;
}

.pc-ig-card__download:hover {
    opacity: 0.9;
}

/* Tab panels */
.pc-ig-panel { display: none; }
.pc-ig-panel--active { display: block; }

/* Subsection title (e.g. "Best practice") */
.pc-ig-subtitle {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #2F363A;
    margin: 40px 0 20px;
}


/* ============================================================
   INTERMEDIATE BREAKPOINTS — fluid shrink before mobile
   ============================================================ */

/* Tablet landscape & smaller — stack hero, single-column data, simplify nav */
@media (max-width: 1024px) {
    .pc-machine-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px var(--pc-page-pad);
    }

    .pc-machine-hero__image img {
        max-width: 360px;
        margin: 0 auto;
        display: block;
    }

    .pc-hero-data {
        grid-template-columns: 1fr;
    }

    .pc-sr-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pc-ig-grid {
        grid-template-columns: 1fr;
    }
}

/* Nav font scaling — shrink the font at mid-range widths so all 4 links remain
   visible without overflowing into the search bar.
   Hamburger is shown only at ≤1024px (tablet and below).

   Math: at 1440px the content area is 1200px.  Logo (133) + gaps (86) leaves
   981px for nav+search.  At 22px the nav links total ~817px — too wide.
   At 18px they total ~689px; with search dialled to 20vw (288px) the sum is
   977px — 4px slack, no overflow.  At 1280px (content 1152px) 16px + 8px
   padding + 18vw search sits comfortably under the available space. */

/* ≤1600px: 18px font + search narrowed from 28vw → 20vw */
@media (max-width: 1600px) {
    .pc-header__nav a { font-size: 18px; }
    .pc-header__search { width: clamp(180px, 20vw, 480px); }
}

/* ≤1280px: 16px font + tighter link padding + search narrowed to 18vw */
@media (max-width: 1280px) {
    .pc-header__nav a { font-size: 16px; padding: 0 8px; }
    .pc-header__search { width: clamp(160px, 18vw, 480px); }
}

/* ≤1024px (tablet): hide nav links, show hamburger */
@media (max-width: 1024px) {
    .pc-header__nav { display: none; }
    .pc-header__menu-btn { display: flex; }
}

/* Responsive: Service & Repair */
@media (max-width: 767px) {
    .pc-sr-hero {
        grid-template-columns: 1fr;
        padding: 20px var(--pc-page-pad);
        gap: 16px;
    }

    .pc-sr-hero__left {
        min-width: 0;
        gap: 6px;
    }

    .pc-sr-title {
        font-size: 24px !important;
    }

    .pc-sr-subtitle {
        font-size: 14px;
    }

    .pc-sr-alert {
        border-radius: 10px;
    }

    .pc-sr-alert__header {
        gap: 12px;
        padding: 12px 16px;
    }

    .pc-sr-alert__title {
        font-size: 15px;
        line-height: 1.4;
    }

    .pc-sr-alert__body {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 16px 16px;
    }

    .pc-sr-actions {
        gap: 8px;
    }

    .pc-sr-actions .pc-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 14px;
        padding: 10px 14px;
    }

    .pc-sr-section {
        padding: 24px 16px;
    }

    .pc-sr-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        height: auto;
    }
}

/* ============================================================
   RESPONSIVE: Instructions & Guides
   ============================================================ */

@media (max-width: 767px) {
    .pc-ig-subtitle {
        font-size: 18px !important;
        margin: 24px 0 14px;
    }

    .pc-video-grid {
        gap: 10px;
        margin-bottom: 20px;
    }

    .pc-video-card__title {
        font-size: 13px;
        padding: 20px 8px 10px;
    }

    .pc-video-card__play svg {
        width: 32px;
        height: 32px;
    }

    .pc-ig-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .pc-video-grid {
        grid-template-columns: 1fr;
    }

    .pc-ig-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DRAWER
   ============================================================ */

.pc-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
}

.pc-drawer-overlay--visible {
    display: block;
}

.pc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    --pc-drawer-w: min(620px, 100vw);   /* loader reads this to match drawer width */
    width: var(--pc-drawer-w);
    height: 100vh;
    background: #ffffff;
    z-index: 201;
    display: flex;
    flex-direction: column;
    padding: 24px 64px;
    border: 1px solid #AAB0B5;
    border-right: none;
    border-radius: 16px 0 0 16px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    overflow-y: auto;
}

.pc-drawer--open {
    transform: translateX(0);
}

.pc-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
    flex-shrink: 0;
}

.pc-drawer__title {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: #2F363A;
    margin: 0;
}

.pc-drawer__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #5B6770;
    cursor: pointer;
    padding: 0;
}
.pc-drawer__close:hover { color: #2F363A; }

.pc-drawer__body {
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    max-width: 580px;
}

.pc-drawer__footer {
    padding: 16px 0 0;
    border-top: 1px solid #E7E0DA;
    margin-top: auto;
}

/* QLink file upload */
.pc-qlink-dropzone {
    display: flex;
    gap: 12px;
}
.pc-qlink-dropzone__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    border: 1px dashed #D1D4D7;
    border-radius: 8px;
    background: #F9FAFB;
    color: #5B6770;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.pc-qlink-dropzone__btn:hover {
    background: var(--ac-blue-light);
    border-color: var(--ac-blue);
    color: var(--ac-blue);
}
.pc-qlink-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.pc-qlink-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--ac-blue-light);
    border-radius: 6px;
    font-size: 13px;
    color: #2F363A;
}
.pc-qlink-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.pc-qlink-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #5B6770;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 8px;
    flex-shrink: 0;
}
.pc-qlink-file-remove:hover { color: #c00; }

.pc-drawer__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.pc-drawer__label {
    font-size: 14px;
    font-weight: 600;
    color: #5B6770;
}

.pc-drawer__section-title {
    font-size: 20px;
    font-weight: 700;
    color: #2F363A;
    margin: 8px 0 0;
}

.pc-drawer__submit {
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
}

.pc-drawer__submit .pc-btn {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pc-oil-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#oil-drawer .pc-drawer__field {
    margin-bottom: 12px;
}

#oil-drawer .pc-oil-section__title {
    margin-bottom: 4px;
}

.pc-oil-section__title {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ac-black);
    margin: 0;
}

.pc-oil-actions {
    gap: 12px;
}

/* ============================================================
   ADMIN PORTAL
   ============================================================ */

.pc-admin-hero {
    background: linear-gradient(to right, #F5F2EF 0%, #EFEBE6 100%);
    border-bottom: 1px solid #E7E0DA;
    padding: 24px 0;
}

.pc-admin-hero__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ac-teal);
    margin: 0 0 4px;
}

.pc-admin-hero__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ac-black);
    margin: 0 0 4px;
    line-height: 1.2;
}

.pc-admin-hero__sub {
    font-size: 13px;
    color: #5B6770;
    margin: 0;
}

.pc-admin-body {
    padding-top: 48px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.pc-admin-section__header {
    margin-bottom: 20px;
}

.pc-admin-section__label-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pc-admin-section__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac-teal);
}

.pc-admin-section__icon-wrap svg {
    width: 36px;
    height: 36px;
}

.pc-admin-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ac-black);
    margin: 0 0 2px;
}

.pc-admin-section__desc {
    font-size: 13px;
    color: #5B6770;
    margin: 0;
}

.pc-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) { .pc-admin-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  {
    .pc-admin-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pc-admin-card {
        gap: 12px;
        padding: 12px 16px;
        transform: none !important;
    }
    .pc-admin-card__icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 8px;
    }
}

.pc-admin-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--ac-gray-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.pc-admin-card:hover {
    border-color: var(--ac-teal);
    box-shadow: 0 4px 16px rgba(0, 146, 188, 0.12);
    transform: translateY(-2px);
}

.pc-admin-card__icon {
    width: 44px;
    height: 44px;
    background: var(--ac-blue-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac-blue);
    flex-shrink: 0;
}

.pc-admin-card__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-black);
    line-height: 1.4;
}

/* ============================================================
   ROLE RULES PAGE
   ============================================================ */

.pc-rr-body {
    display: flex;
    gap: 0;
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 48px;
}

.pc-rr-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--ac-gray-border);
    display: flex;
    flex-direction: column;
}

/* Hidden on desktop; shown on mobile in place of the sidebar */
.pc-rr-role-select { display: none; }
.pc-rr-role-select-label { display: none; }
/* Mobile-only UI elements (under title, bottom save) */
.pc-rr-mobile-actions { display: none; }
.pc-rr-mobile-save { display: none; }

.pc-rr-nav {
    padding: 8px 0;
}

.pc-rr-nav__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 24px;
    background: none;
    border: none;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5B6770;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s;
}

.pc-rr-nav__item:hover {
    background: var(--ac-gray-light);
    color: var(--ac-black);
}

.pc-rr-nav__item--active {
    color: var(--ac-teal);
    font-weight: 700;
    border-left-color: var(--ac-teal);
    background: #E8F4FD;
}

.pc-rr-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-rr-panel__header {
    padding: 20px 40px 16px;
    border-bottom: 1px solid var(--ac-gray-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-rr-panel__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ac-black);
    margin: 0 0 4px;
}

.pc-rr-panel__desc {
    font-size: 13px;
    color: #5B6770;
    margin: 0;
}

.pc-rr-panel__actions {
    display: flex;
    gap: 16px;
}

.pc-rr-select-all {
    background: none;
    border: none;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-teal);
    cursor: pointer;
    padding: 0;
}
.pc-rr-select-all:hover { text-decoration: underline; }

.pc-rr-rules {
    padding: 24px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
/* Machine Running Hours Blacklist layout */
/* Full-width header above the sidebar+content split */
.pc-mrhb-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--ac-gray-border);
}
/* Invisible spacer = sidebar width, so title aligns with the content column */
.pc-mrhb-header__spacer {
    width: 220px;
    flex-shrink: 0;
}
/* Row below the header: sidebar (with border-right) + content */
.pc-mrhb-body {
    display: flex;
    align-items: flex-start;
}
/* Panel toggle — single column list */
.pc-mrhb-panel { display: none; padding: 32px 40px 24px; }
.pc-mrhb-panel--active { display: block; }

.pc-mrhb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ac-gray-border);
    cursor: pointer;
}
.pc-mrhb-item:last-of-type { border-bottom: none; }
.pc-mrhb-item input[type="checkbox"] { display: none; }
.pc-mrhb-item__label {
    font-size: 14px;
    color: var(--ac-black);
}
.pc-mrhb-empty {
    color: #6b7280;
    font-size: 14px;
    padding: 16px 0;
}

.pc-rr-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

.pc-rr-rule:hover { background: var(--ac-gray-light); }

.pc-rr-rule input[type="checkbox"] { display: none; }

.pc-rr-rule__check {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ac-gray-border);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s, background 0.12s;
}

.pc-rr-rule input:checked ~ .pc-rr-rule__check {
    background: var(--ac-teal);
    border-color: var(--ac-teal);
}

.pc-rr-rule input:checked ~ .pc-rr-rule__check::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.pc-rr-rule__label {
    font-size: 14px;
    color: var(--ac-black);
}


/* ============================================================
   Q-LINK SETTINGS FORM
   ============================================================ */

/* ============================================================
   QR CODE DRAWER
   ============================================================ */

.pc-qr-drawer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 0 24px;
    text-align: center;
}

.pc-qr-drawer__hint {
    font-size: 15px;
    color: #5B6770;
    margin: 0;
}

.pc-qr-drawer__image-wrap {
    background: #fff;
    border: 1px solid #E7E0DA;
    border-radius: 12px;
    padding: 20px;
    display: inline-flex;
}

.pc-qr-drawer__image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
}

.pc-qr-drawer__url {
    font-size: 12px;
    color: #8A9099;
    word-break: break-all;
    max-width: 300px;
    margin: 0;
}

.pc-qr-drawer__download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.pc-qs-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}

.pc-qs-section {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-qs-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-teal);
    margin: 0 0 2px;
}

.pc-qs-section .pc-drawer__field {
    margin: 0;
}

.pc-qs-textarea {
    min-height: 200px;
    resize: vertical;
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.pc-qs-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ac-gray-border);
}

/* ============================================================
   ADMIN USERS PAGE
   ============================================================ */

.pc-aum-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.pc-aum-body {
    padding-top: 40px;
    padding-bottom: 64px;
}

.pc-aum-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--ac-gray-border);
}

.pc-aum-table-wrap .pc-table {
    min-width: 600px;
}

/* Video Links table — base styles (desktop untouched) */
.pc-vl-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile only: beat the pagination script's inline table-layout:fixed + width:X%
   so the table scrolls at natural column widths instead of squashing into the viewport */
@media (max-width: 767px) {
    .pc-vl-table {
        min-width: 1400px !important;
        table-layout: auto !important;
        width: auto !important;
        font-size: 13px;
    }
    .pc-vl-table th {
        padding: 10px 12px;
        white-space: nowrap !important;
        vertical-align: bottom;
        width: auto !important;
    }
    .pc-vl-table td {
        padding: 10px 12px;
        white-space: nowrap;
        vertical-align: top;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Functions table */
.pc-fn-body {
    padding: 28px 24px 64px;
}

.pc-fn-table-wrap {
    overflow-x: visible;
}

.pc-fn-table {
    width: 100%;
    table-layout: auto;
}

.pc-fn-table thead th {
    font-size: 11px;
    padding: 10px 8px;
    white-space: nowrap;
}

.pc-fn-table tbody td {
    font-size: 12px;
    padding: 10px 8px;
    vertical-align: top;
}

.pc-fn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ac-gray-border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-black);
}

.pc-fn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ac-gray-border);
    border-radius: 4px;
}

.pc-fn-check--on {
    background: var(--ac-teal);
    border-color: var(--ac-teal);
}

.pc-fn-check--on::after {
    content: '';
    display: block;
    width: 11px;
    height: 7px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.pc-fn-link {
    color: var(--ac-blue);
    font-size: 13px;
    font-weight: 600;
}

.pc-fn-more {
    color: #AAB0B5;
    font-size: 12px;
}

.pc-fn-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #5B6770;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}

.pc-fn-icon-btn:hover {
    color: var(--ac-teal);
    background: var(--ac-gray-light);
}
.pc-fn-icon-btn--danger:hover {
    color: #D93025;
    background: #FEF2F2;
}

.pc-aum-table-wrap .pc-table tbody td {
    font-size: 14px;
    padding: 14px 20px;
    vertical-align: top;
}

.pc-aum-table-wrap .pc-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 14px 20px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pc-aum-edit-btn {
    background: none;
    border: none;
    color: var(--ac-blue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
}
.pc-aum-edit-btn:hover { color: var(--ac-blue-dark); text-decoration: underline; }

.pc-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pc-role-badge--admin       { background: #E8F4FD; color: var(--ac-blue); }
.pc-role-badge--guest       { background: #F0F0F0; color: #5B6770; }
.pc-role-badge--dealer-op   { background: #FFF3E0; color: #E65100; }
.pc-role-badge--dealer-admin{ background: #F3E5F5; color: #7b1fa2; }
.pc-role-badge--cc-admin    { background: #E0F4F7; color: #00838f; }
.pc-role-badge--ac-cc-user  { background: #E8F5E9; color: #2e7d32; }
.pc-role-badge--ac-pc-user  { background: #FFF8E1; color: #B8860B; }

/* ============================================================
   RESPONSIVE: Admin pages
   (placed after all admin base rules so media queries win)
   ============================================================ */

@media (max-width: 767px) {

    /* --- Admin hero --- */
    .pc-admin-hero { padding: 14px 0; }
    .pc-admin-hero__title { font-size: 18px; }
    .pc-admin-body { padding-bottom: 40px; gap: 28px; }
    .pc-admin-body.pc-page { padding-top: 32px; }

    /* --- Restore top padding zeroed out by the mobile .pc-page shorthand --- */
    .pc-page.pc-aum-body { padding-top: 32px; }

    /* --- Hero row: title + Add button stack vertically --- */
    .pc-aum-hero-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .pc-aum-hero-row .pc-btn {
        align-self: stretch;
        justify-content: center;
    }

    /* --- Table: reduce padding so rows fit better --- */
    .pc-aum-table-wrap .pc-table tbody td { padding: 10px 12px; font-size: 13px; }
    .pc-aum-table-wrap .pc-table thead th { padding: 10px 12px; }
    /* Only collapse min-width for simple AUM tables — wide tables (e.g. Video Links / Functions)
       keep their sizing and scroll horizontally via the outer wrapper's overflow-x: auto. */
    .pc-aum-table-wrap:not(.pc-vl-table-wrap):not(.pc-fn-table-wrap) .pc-table { min-width: unset; width: 100%; }

    /* --- Header bar on sidebar pages: hide spacer so title is left-aligned --- */
    .pc-mrhb-header__spacer { display: none; }
    .pc-mrhb-header { flex-wrap: wrap; gap: 8px; }

    /* --- Sidebar layout: hide sidebar, use <select> dropdown instead --- */
    .pc-mrhb-body { flex-direction: column; overflow: hidden; }
    .pc-mrhb-body > div { width: 100%; min-width: 0; box-sizing: border-box; }
    .pc-mrhb-panel { max-width: 100%; box-sizing: border-box; }
    .pc-rr-sidebar { display: none; }
    .pc-rr-role-select-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--ac-gray-text, #5B6770);
        margin-bottom: 6px;
    }
    .pc-rr-role-select {
        display: block;
        width: 100%;
        padding: 14px 16px;
        font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--ac-black);
        background: #F5F7F8;
        border: 1px solid #AAB0B5;
        border-radius: 8px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        padding-right: 40px;
        margin-bottom: 0;
    }

    /* --- Panel: remove horizontal padding on mobile --- */
    .pc-mrhb-panel { padding: 20px 0 16px; }

    /* --- Role rules checkbox grid: 1 col --- */
    .pc-rr-rules { padding: 16px 0; grid-template-columns: 1fr; }

    /* --- Role rules: hide desktop action bar, show mobile equivalents --- */
    .pc-rr-panel__actions { display: none; }
    .pc-rr-mobile-actions {
        display: flex;
        gap: 16px;
        margin-top: 8px;
    }
    .pc-rr-mobile-save {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0 8px;
    }
    .pc-rr-mobile-save .pc-btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* --- Q-Link settings form: single column --- */
    .pc-qs-form { grid-template-columns: 1fr; gap: 0; }

    /* --- Functions / filters table: allow horizontal scroll --- */
    .pc-fn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- Portal section gap --- */
    .pc-admin-section__header { margin-bottom: 12px; }
    .pc-admin-section__title { font-size: 13px; }
    .pc-admin-section__desc  { display: none; }
}

/* ============================================================
   TOGGLE (Regular/Urgent, NO/YES, AM/PM)
   ============================================================ */

.pc-toggle {
    display: flex;
    border: 1px solid #AAB0B5;
    border-radius: 56px;
    overflow: hidden;
    background: #ffffff;
    height: 44px;
}

.pc-toggle__btn {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #5B6770;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 0;
}

/* Left button: round left side, straight right */
.pc-toggle__btn:first-child {
    border-radius: 56px 0 0 56px;
}

/* Right button: straight left, round right side */
.pc-toggle__btn:last-child {
    border-radius: 0 56px 56px 0;
}

.pc-toggle__btn--active {
    background: linear-gradient(90deg, #1F9FC4 0%, #0092BC 50%, #006F8F 100%);
    color: #ffffff !important;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

/* Responsive two-column row used inside drawers (Country+State, City+Zip, etc.).
   Collapses to a single column on mobile so nothing overflows the drawer. */
.pc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.pc-form-row > .pc-form-select,
.pc-form-row > .pc-form-input {
    width: 100%;
    min-width: 0;       /* allow grid children to shrink below their content size */
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .pc-form-row {
        grid-template-columns: 1fr;   /* stack vertically on mobile */
    }
}

/* ---- Flatpickr input + calendar mobile overflow fix ------------------
   1. flatpickr wraps every input in <div class="flatpickr-wrapper"> which
      defaults to `display: inline-block`. On mobile that makes the wrapper
      shrink-wrap to the text content and overflow the drawer.
      Force it to fill its parent instead.
   2. The calendar popup is appended to <body> and positioned with an inline
      `left` value. On narrow screens it overshoots the right edge.
      Centre it and cap its width. */
.flatpickr-wrapper {
    display: block !important;
    width: 100% !important;
}

.flatpickr-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .flatpickr-calendar {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }
}

.pc-form-input,
.pc-form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2F363A;
    background: #ffffff;
    border: 1px solid #AAB0B5;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.pc-form-input:focus,
.pc-form-textarea:focus {
    border-color: #0092BC;
}

.pc-form-input::placeholder,
.pc-form-textarea::placeholder {
    color: #AAB0B5;
}

.pc-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.pc-form-select {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 48px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #AAB0B5;
    border-radius: 8px;
    background: #ffffff;
    position: relative;
}

.pc-form-select select {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    color: #2F363A;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pc-form-select select option[value=""][disabled] {
    color: #AAB0B5;
}

/* ============================================================
   STEPPER
   ============================================================ */

.pc-stepper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 8px;
    width: 100%;
}

.pc-stepper__track {
    display: flex;
    align-items: center;
    width: 100%;
}

.pc-stepper__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #D1D4D7;
    flex-shrink: 0;
    box-sizing: border-box;
}

.pc-stepper__dot--active {
    background: #fff;
    border-color: #0092BC;
}

.pc-stepper__dot--done {
    background: #0092BC;
    border-color: #0092BC;
}

.pc-stepper__line {
    flex: 1;
    height: 2px;
    background: #D1D4D7;
}

.pc-stepper__line--done {
    background: #0092BC;
}

.pc-stepper__labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.pc-stepper__label {
    font-size: 12px;
    font-weight: 600;
    color: #AAB0B5;
    white-space: nowrap;
}

.pc-stepper__label--active {
    color: #2F363A;
}

/* ============================================================
   INSTRUCTIONS & GUIDES — VIDEO GRID
   ============================================================ */

.pc-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.pc-video-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E7E0DA;
    background: #fff;
    transition: box-shadow 0.15s;
}
.pc-video-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.pc-video-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #2F363A;
    overflow: hidden;
}
.pc-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    transition: background 0.15s;
}
.pc-video-card:hover .pc-video-card__play { background: rgba(0,0,0,0.6); }
.pc-video-card__play svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.pc-video-card__play svg path { fill: #fff; }

.pc-video-card__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 32px 12px 14px;
    font-size: 16px;
    font-weight: 600;
    color: #fff !important;
    line-height: 1.4;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    z-index: 1;
}

/* ============================================================
   INSTRUCTIONS & GUIDES — VIDEO MODAL
   ============================================================ */

.pc-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}

.pc-video-modal__content {
    position: relative;
    z-index: 1;
    width: min(900px, 92vw);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.pc-video-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.pc-video-modal__close:hover { background: rgba(0,0,0,0.8); }

.pc-video-modal__iframe-wrap {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
}
.pc-video-modal__iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ============================================================
   INSTRUCTIONS & GUIDES — DOCUMENT GRID
   ============================================================ */

.pc-ig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.pc-ig-card {
    position: relative;
    border: 1px solid #E7E0DA;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.pc-ig-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.pc-ig-card__thumb {
    aspect-ratio: 4/3;
    background: #F5F2EF;
    overflow: hidden;
}
.pc-ig-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-ig-card__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pc-ig-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #2F363A;
    margin: 0;
    line-height: 1.4;
}

.pc-ig-card__pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #E7E0DA;
    color: #5B6770;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

.pc-ig-card__download {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--color-brand-default, #0092BC);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.15s;
}
.pc-ig-card__download:hover { opacity: 0.85; }

/* ============================================================
   LOG SERVICE STEPS
   ============================================================ */

.pc-log-service-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   LOG VIEW TOGGLE
   ============================================================ */

.pc-log-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    width: 100%;
}

/* ============================================================
   QR SCANNER
   ============================================================ */

.pc-qr-scanner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    flex: 1;
}

.pc-qr-scanner__frame {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-qr-scanner__img {
    width: 200px;
    height: 200px;
}

.pc-qr-scanner__corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: #2F363A;
    border-style: solid;
    border-width: 0;
}

.pc-qr-scanner__corner--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.pc-qr-scanner__corner--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.pc-qr-scanner__corner--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.pc-qr-scanner__corner--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }

@media (max-width: 767px) {
    .pc-drawer {
        width: 100%;
        height: 100dvh;
        padding: 16px 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        border-radius: 0;
        overflow-x: hidden;           /* no horizontal scroll / pan */
        overflow-y: auto;             /* vertical scroll only */
        overscroll-behavior: contain; /* stop scroll from bleeding through to the page behind */
        touch-action: pan-y;          /* restrict touch gestures to vertical */
        -webkit-overflow-scrolling: touch;
    }
    .pc-drawer__title { font-size: 20px !important; }
    .pc-drawer__body  { max-width: 100%; gap: 12px; }
}

/* ============================================================
   MAIN MENU DRAWER (slides from right when Menu button clicked)
   ============================================================ */

.pc-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 300;
}
.pc-menu-overlay--visible { display: block; }

.pc-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 301;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
.pc-menu-drawer--open { transform: translateX(0); }

.pc-menu-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #D1D4D7;
}
.pc-menu-drawer__logo img { height: 40px; width: auto; display: block; }

.pc-menu-drawer__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 40px;
    border-radius: 56px;
    border: 1.5px solid #AAB0B5;
    background: #ffffff;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2F363A;
    cursor: pointer;
    white-space: nowrap;
}
.pc-menu-drawer__close:hover { border-color: #2F363A; }

/* Search bar inside the mobile menu drawer — pill shape matching the desktop header search */
.pc-menu-drawer__search {
    padding: 16px 24px;
    position: relative;
}
.pc-menu-drawer__search .pc-kit-search {
    background: #F5FBFC;
    border: 1px solid #AAB0B5;
    border-radius: 28px;
    padding: 0 16px;
    height: 56px;
    gap: 12px;
}
.pc-menu-drawer__search .pc-kit-search:focus-within {
    border-color: #0092BC;
    box-shadow: 0 0 0 3px rgba(0,146,188,0.12);
}
/* No divider between the icon buttons — matches header search style */
.pc-menu-drawer__search .pc-kit-search__btn {
    border-left: none;
    color: #AAB0B5;
}
.pc-menu-drawer__search .pc-kit-search__btn:hover {
    background: transparent;
    color: #0092BC;
}
.pc-menu-drawer__search .pc-search-suggestions {
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    z-index: 10;
}

.pc-menu-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    flex: 1;
    overflow-y: auto;
}

.pc-menu-drawer__link {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #5B6770;
    padding: 16px 24px;
    text-decoration: none;
    border-bottom: 1px solid #F5F7F8;
}
.pc-menu-drawer__link:hover { color: #2F363A; background: #F8F9F9; }
.pc-menu-drawer__link.active {
    color: #2F363A;
    font-weight: 600;
    border-left: 3px solid #0092BC;
    padding-left: 21px;
}

@media (max-width: 767px) {
    .pc-menu-drawer {
        width: 100%;
        box-shadow: none;
    }
}

/* ============================================================
   MENU BUTTON (hidden on desktop, shown on mobile)
   ============================================================ */

.pc-header__menu-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    height: 48px;
    border-radius: 56px;
    border: none;
    background: linear-gradient(90deg, #1F9FC4 0%, #0092BC 50%, #006F8F 100%);
    color: #fff;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* Mobile tabs select (hidden on desktop) */
.pc-tabs-select { display: none; }

/* ============================================================
   RESPONSIVE – MOBILE  (≤ 767px)
   ============================================================ */

@media (max-width: 767px) {

    /* --- Page padding --- */
    .pc-page          { padding: 0 16px; }
    .pc-header__top   { padding: 0 16px; }
    .pc-header__main  { padding: 12px 16px; gap: 0; justify-content: space-between; }

    /* --- Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) --- */
    input, textarea, select { font-size: 16px !important; }

    /* --- Top bar: hide localmenu links --- */
    .pc-header__top-local { display: none; }

    /* --- Main nav: hide links + search, show menu button --- */
    .pc-header__nav    { display: none; }
    .pc-header__search { display: none; }
    .pc-header__menu-btn { display: flex; }

    /* --- Hero: stack vertically --- */
    .pc-machine-hero {
        grid-template-columns: 1fr;
        padding: 24px 16px;
        gap: 24px;
    }

    /* Page label above image — visible on mobile only */
    .pc-machine-page-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ac-gray-text, #5B6770);
        margin: 0 0 12px 0;
        text-align: left;
    }

    .pc-machine-hero__image img {
        max-width: 240px;
        margin: 0 auto;
        display: block;
    }

    /* Machine model name: smaller on mobile */
    .pc-machine-hero__title { font-size: 22px; }

    /* --- Hero mini-tabs: reduce padding so they fit narrow screens --- */
    .pc-hero-tabs__item a {
        padding: 4px 14px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* --- Data grid: single column on mobile --- */
    .pc-hero-data {
        display: flex;
        flex-direction: column;
    }
    /* Left-col items (odd) first, right-col items (even) second */
    .pc-hero-data__item:nth-child(odd)  { order: 0; }
    .pc-hero-data__item:nth-child(even) { order: 1; }
    /* Reset desktop alternating bg — use borders instead */
    .pc-hero-data__item,
    .pc-hero-data__item:nth-child(4n+1),
    .pc-hero-data__item:nth-child(4n+2) {
        background: transparent;
        border-bottom: 1px solid #F0EDE9;
        min-height: 48px;
    }
    .pc-hero-data__item:last-child { border-bottom: none; }

    /* Label wraps, value stays right-aligned */
    .pc-hero-data__label { font-size: 12px; }
    .pc-hero-data__value { font-size: 12px; word-break: break-word; max-width: 55%; }

    /* --- Buttons: stacked full-width --- */
    .pc-machine-hero__actions {
        flex-direction: column;
        gap: 12px;
    }

    .pc-machine-hero__actions .pc-btn {
        width: 100%;
        justify-content: center;
    }

    /* --- Tabs: hide desktop tabs, show select dropdown --- */
    .pc-tabs         { display: none; }
    .pc-tabs-select  {
        display: block;
        width: 100%;
        padding: 14px 16px;
        font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--ac-black);
        background: #F5F7F8;
        border: 1px solid #AAB0B5;
        border-radius: 8px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        padding-right: 40px;
    }

    /* --- Tab panel padding on mobile --- */
    .pc-tab-panel--active { padding: 20px 0; }

    /* --- Table: horizontal scroll, no cell wrapping --- */
    .pc-tab-panel--active { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pc-tab-panel .pc-table { width: max-content; min-width: 100%; }
    .pc-tab-panel .pc-table th,
    .pc-tab-panel .pc-table td { white-space: nowrap; }

    .pc-machine-hero-bg .pc-machine-hero { padding: 24px 16px; }
}

/* ============================================================
   KIT ACCORDION CARDS (Log Service drawer)
   ============================================================ */

.pc-kit-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.pc-kit-card {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--ac-blue, #0092bc);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pc-kit-card__header {
    background-color: transparent !important;
    border-bottom: 2px solid var(--ac-blue);
}

.pc-kit-card__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    gap: 8px;
}

.pc-kit-card__pn {
    font-size: 14px;
    font-weight: 700;
    color: var(--ac-blue-dark, #005f7a);
    letter-spacing: 0.02em;
}

.pc-kit-card__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0,93,158,0.1);
    flex-shrink: 0;
    transition: background 0.15s;
}
.pc-kit-card__remove:hover { background: rgba(0,93,158,0.2); }

.pc-kit-card__body {
    padding: 16px;
    border-top: 1px solid var(--ac-blue-light, #e8f4fd);
}

.pc-kit-card__fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
}

.pc-kit-card__fields dt {
    font-size: 13px;
    font-weight: 700;
    color: #2F363A;
    white-space: nowrap;
}

.pc-kit-card__fields dd {
    font-size: 13px;
    color: #5B6770;
    margin: 0;
}

.pc-warranty-info-row { display: flex; gap: 8px; font-size: 13px; color: #5B6770; padding: 2px 0; }
.pc-warranty-info-row__label { font-weight: 600; min-width: 80px; }
.pc-warranty-info-row__value { color: #2F363A; }

/* ============================================================
   ADMIN — additions for V2 form pages
   ------------------------------------------------------------
   The `pc-qs-*` rules are already defined further up (port of the
   design folder). Only adding here:
   1) a mobile responsive collapse for the two-column form,
   2) styling for jQuery Validate / asp-validation-for spans
      (V1 used Bootstrap `text-danger`, which V2 doesn't ship).
   ============================================================ */

@media (max-width: 767px) {
    .pc-qs-form { grid-template-columns: 1fr; gap: 0; }
}

.pc-form-validation,
.field-validation-error {
    display: block;
    font-size: 12px;
    color: #C8102E;
    margin-top: 4px;
    line-height: 1.3;
}
.field-validation-valid { display: none; }
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    border-color: #C8102E;
}

/* ============================================================
   ADMIN — KITS / TRANSLATIONS shared section blocks
   ------------------------------------------------------------
   `.pc-kits-section` is a vertically-stacked card-without-border block
   used by both the Kits page and the Translations Download/Insert
   columns. `.pc-tr-*` is the two-column layout for the Translations
   page (form column + translated-list panel column).
   ============================================================ */

.pc-kits-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pc-kits-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid var(--ac-gray-border);
}

.pc-kits-section:last-child { border-bottom: none; }

.pc-kits-file {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Inputs and selects inside `.pc-kits-file` should fill the column width
   (they're form fields), but the action button shouldn't — it's a CTA, not
   a field. `align-self: flex-start` overrides the parent's default
   `align-items: stretch`, and `min-width` gives it a comfortable touch
   target. */
.pc-kits-file .pc-btn {
    align-self: flex-start;
    min-width: 140px;
}

.pc-kits-section form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.pc-kits-section form .pc-kits-file {
    width: auto;
}

.pc-kits-section form input[type="file"] {
    max-width: 320px;
}

.pc-tr-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 64px;
    align-items: start;
}

@media (max-width: 767px) {
    .pc-tr-layout { grid-template-columns: 1fr; gap: 24px 0; }

    /* Translations: constrain grid children so they can't exceed viewport width */
    .pc-tr-layout > * { min-width: 0; max-width: 100%; overflow: hidden; }
    .pc-kits-sections { width: 100%; box-sizing: border-box; }

    /* Make all form elements stretch full-width on mobile */
    .pc-kits-section { align-items: stretch; }
    .pc-kits-section form { align-items: stretch; width: 100%; box-sizing: border-box; }
    .pc-kits-section form .pc-kits-file { width: 100%; box-sizing: border-box; }
    .pc-kits-section form input[type="file"] { max-width: 100%; width: 100%; box-sizing: border-box; }
    .pc-kits-file .pc-btn { align-self: stretch; min-width: 0; width: 100%; text-align: center; box-sizing: border-box; }
    .pc-form-select { width: 100%; box-sizing: border-box; }
    .pc-form-select select { min-width: 0; max-width: 100%; }
    .pc-tr-list { columns: 1; }
    .pc-tr-list-panel { padding-top: 0; }
}

.pc-tr-list-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 32px;
}

.pc-tr-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    columns: 2;
    column-gap: 32px;
    font-size: 14px;
    color: var(--ac-black);
    line-height: 1.8;
}

.pc-tr-list-empty {
    margin: 0;
    color: #5B6770;
    font-size: 13px;
    font-style: italic;
}

/* ============================================================
   V2 NOTIFICATION TOAST
   ------------------------------------------------------------
   Server-side flash toast rendered by _NotificationToastV2.cshtml.
   Replaces V1's full-screen `_NotificationDialog.cshtml` modal.
   ============================================================ */

.pc-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #5B6770;
    box-shadow: 0 8px 24px rgba(47, 54, 58, 0.18);
    font-size: 13px;
    line-height: 1.4;
    color: #2F363A;
    animation: pc-toast-in 0.2s ease-out;
}

.pc-toast--leaving {
    animation: pc-toast-out 0.25s ease-in forwards;
}

@keyframes pc-toast-in {
    from { transform: translateX(16px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes pc-toast-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(16px); opacity: 0; }
}

.pc-toast__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pc-toast__body {
    flex: 1;
    min-width: 0;
}

.pc-toast__title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #2F363A;
    line-height: 1.3;
}

.pc-toast__message {
    margin: 0;
    color: #5B6770;
    word-break: break-word;
}

.pc-toast__messages {
    margin: 4px 0 0;
    padding: 0 0 0 16px;
    color: #5B6770;
}
.pc-toast__messages li { margin: 2px 0; word-break: break-word; }

.pc-toast__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #5B6770;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 2px;
    transition: background 0.15s, color 0.15s;
}
.pc-toast__close:hover { background: #F5F2EF; color: #2F363A; }

/* --- Severity colour variants --- */

.pc-toast--success                  { border-left-color: #16A34A; }
.pc-toast--success .pc-toast__icon  { background: #DCFCE7; color: #16A34A; }

.pc-toast--error                    { border-left-color: #C8102E; }
.pc-toast--error   .pc-toast__icon  { background: #FEE2E2; color: #C8102E; }

.pc-toast--warning                  { border-left-color: #D97706; }
.pc-toast--warning .pc-toast__icon  { background: #FEF3C7; color: #D97706; }

.pc-toast--info                     { border-left-color: var(--ac-blue, #0092BC); }
.pc-toast--info    .pc-toast__icon  { background: var(--ac-blue-light, #E8F4FD); color: var(--ac-blue, #0092BC); }

@media (max-width: 480px) {
    .pc-toast {
        top: 8px;
        right: 8px;
        left: 8px;
        width: auto;
    }
}

/* ── Drawer loading overlay ──────────────────────────────────────────────────
   position:fixed so the overlay always covers the VISIBLE drawer area,
   regardless of how far the drawer body has been scrolled.
   Width uses --pc-drawer-w (set on .pc-drawer) so it auto-adapts to both the
   standard (620px) and wide (680px) drawer variants.
   ─────────────────────────────────────────────────────────────────────────── */
.pc-drawer-loader {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--pc-drawer-w, min(620px, 100vw));
    height: 100vh;
    z-index: 500;                              /* above drawer (z-index 201) */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 0 0 16px;             /* match drawer corner radius */
    pointer-events: all;
}

.pc-drawer-loader__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #E7E0DA;
    border-top-color: #0092BC;
    border-radius: 50%;
    animation: pc-spin 0.75s linear infinite;
}

@keyframes pc-spin {
    to { transform: rotate(360deg); }
}

/* ── Full-page loader (standard POST form submissions on admin pages) ─────────
   Shows while the browser waits for a server redirect after a form POST.
   Hidden by default; toggled by the layout's submit listener.
   ─────────────────────────────────────────────────────────────────────────── */
.pc-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pc-page-loader__spinner {
    width: 56px;
    height: 56px;
    border: 4px solid #E7E0DA;
    border-top-color: #0092BC;
    border-radius: 50%;
    animation: pc-spin 0.75s linear infinite;
}

.pc-page-loader__text {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #5B6770;
    letter-spacing: 0.01em;
}

/* ── Video Management ─────────────────────────────────────────────────────── */

/* Wide drawer variant — video edit form has many fields */
.pc-drawer--wide {
    --pc-drawer-w: min(680px, 100vw);
}

/* Truncate long URLs and descriptions in the table */
.pc-vl-link {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ac-blue, #0092BC);
    font-size: 13px;
}
.pc-vl-desc {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon buttons in the action column sit side-by-side */
.pc-vl-actions {
    white-space: nowrap;
}

/* Standalone multi-select — used instead of .pc-form-select wrapper
   because that wrapper has height:48px which clips the listbox. */
.pc-multiselect {
    width: 100%;
    border: 1px solid #AAB0B5;
    border-radius: 8px;
    background: #fff;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #2F363A;
    padding: 4px 0;
    outline: none;
    cursor: pointer;
}
.pc-multiselect option {
    padding: 6px 12px;
}
.pc-multiselect option:checked {
    background: var(--ac-blue, #0092BC);
    color: #fff;
}

/* ── Delete confirm modal ─────────────────────────────────────────────────── */
.pc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.2s;
}
.pc-modal-overlay--visible {
    opacity: 1;
}
[hidden].pc-modal-overlay { display: none !important; }

.pc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 1060;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    width: min(440px, calc(100vw - 32px));
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.pc-modal--open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
[hidden].pc-modal { display: none !important; }

.pc-modal__header {
    padding: 20px 24px 0;
}
.pc-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: #1C2329;
    margin: 0;
}
.pc-modal__body {
    padding: 12px 24px 0;
}
.pc-modal__text {
    font-size: 14px;
    color: #5B6770;
    margin: 0;
    line-height: 1.5;
}
.pc-modal__footer {
    padding: 20px 24px;
}
.pc-modal__footer form {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Danger button variant for destructive confirmations */
.pc-btn--danger {
    background: #C8102E;
    color: #fff;
    border: 1px solid #C8102E;
}
.pc-btn--danger:hover {
    background: #a30e26;
    border-color: #a30e26;
}

/* ── Functions (Machine Filtering) ───────────────────────────────────────── */

/* Table wrapper: horizontal scroll for the wide 16-column table */
.pc-fn-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pc-fn-table {
    min-width: 900px;
    font-size: 13px;
}
/* Headers wrap to two lines so multi-word labels don't force wide columns */
.pc-fn-table th {
    padding: 8px 8px;
    white-space: normal;
    word-break: break-word;
    vertical-align: bottom;
}
.pc-fn-table td {
    padding: 8px 8px;
    white-space: nowrap;
    vertical-align: top;
}
/* Tile column: truncate long names with ellipsis, full text on hover */
.pc-fn-tile {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.pc-fn-tile--ok   { color: #16A34A; }
.pc-fn-tile--warn { color: #C8102E; }

/* Filter cell values: clipped to column width, pop out on hover */
.pc-fn-cell--incl,
.pc-fn-cell--excl {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 12px;
    cursor: default;
    line-height: 1.5;
}
.pc-fn-cell--incl { color: #16A34A; }
.pc-fn-cell--excl { color: #C8102E; }

/* Data cell max-width so columns stay compact */
.pc-fn-table td { position: relative; max-width: 110px; }

/* Hover popup: span floats out of the cell to show full content */
.pc-fn-cell--incl:hover,
.pc-fn-cell--excl:hover {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 200;
    background: #fff;
    border: 1px solid #D5D8DA;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px 12px;
    max-width: 260px;
    overflow: visible;
    white-space: normal;
    line-height: 1.7;
}

/* Order inline input — compact */
.pc-fn-order-input {
    width: 32px;
    text-align: center;
    border: 1px solid #D5D8DA;
    border-radius: 6px;
    padding: 3px 2px;
    font-size: 12px;
    color: #2F363A;
    background: #fff;
}
.pc-fn-order-input:focus {
    outline: none;
    border-color: var(--ac-blue, #0092BC);
}
/* Remove spinner arrows on number inputs */
.pc-fn-order-input::-webkit-outer-spin-button,
.pc-fn-order-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-fn-order-input[type=number] { -moz-appearance: textfield; }

/* Header checkbox */
.pc-fn-header-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ac-blue, #0092BC);
}
/* Compact fixed-width columns: Order, Header, Action */
.pc-fn-order-cell,
.pc-fn-table th:nth-child(1) { width: 48px; text-align: center; }
.pc-fn-header-cell,
.pc-fn-table th:nth-child(2) { width: 52px; text-align: center; }
.pc-fn-table th:nth-child(3) { width: 48px; text-align: center; }

/* ── Functions edit drawer ─────────────────────────────────────────────── */
.pc-ef-drawer-subtitle {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #AAB0B5;
    margin-bottom: 2px;
}
.pc-ef-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
    padding: 20px 24px 0;
}
/* Top meta row: Name + Help URL side-by-side */
.pc-bp__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Filter fields 2-col grid */
.pc-ef-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}
@media (max-width: 600px) {
    .pc-bp__meta,
    .pc-ef-grid { grid-template-columns: 1fr; }
}
.pc-ef-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-ef-col__label {
    font-size: 13px;
    font-weight: 600;
    color: #2F363A;
}
.pc-ef-hint {
    font-weight: 400;
    color: #5B6770;
    font-size: 12px;
}
/* Multi-select in drawer */
.pc-ef-multiselect {
    min-height: 80px;
    font-size: 13px;
}
/* Include/Exclude radio pair */
.pc-ef-radio-group {
    display: flex;
    gap: 16px;
    margin-top: 2px;
}
.pc-ef-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #2F363A;
    cursor: pointer;
}
.pc-ef-radio input[type="radio"] {
    accent-color: var(--ac-blue, #0092BC);
    cursor: pointer;
}
/* Readonly name field */
.pc-ef-readonly {
    background: #F5F2EF;
    color: #5B6770;
    cursor: default;
}
/* Save button pinned at drawer bottom */
.pc-ef-drawer-footer {
    padding: 16px 0 24px;
    border-top: 1px solid #E8E5E2;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    gap: 12px;
}

/* Machine Info table — wide scrolling on mobile */
.pc-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
    .pc-table-wrap .pc-table {
        min-width: 900px !important;
        table-layout: auto !important;
        width: auto !important;
    }
    .pc-table-wrap .pc-table th {
        white-space: nowrap !important;
        width: auto !important;
        padding: 10px 12px;
    }
    .pc-table-wrap .pc-table td {
        white-space: nowrap;
        padding: 10px 12px;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Drawer: stack footer buttons full-width */
    .pc-ef-drawer-footer { flex-direction: column; }
    .pc-ef-drawer-footer .pc-btn { display: block; width: 100%; text-align: center; }
}

/* ── Logs page — card tabs ──────────────────────────────────────────────── */
/* Mobile tab select */
.pc-log-body {
    display: flex;
    flex-direction: column;
}
.pc-log-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 12px;
    color: #5B6770;
    background: #F5F7F8;
    border: 1px solid #E4E7EA;
    border-radius: 6px;
    margin-bottom: 16px;
    order: 1;
}
.pc-log-tab-select-wrap {
    display: none;
    position: relative;
    margin-bottom: 16px;
    order: 2;
}
.pc-log-tab-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #2F363A;
    background: #fff;
    border: 1px solid #D1D4D7;
    border-radius: 8px;
    cursor: pointer;
}
.pc-log-tab-select:focus { outline: 2px solid #0092BC; outline-offset: 2px; }
.pc-log-tab-select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #5B6770;
}
.pc-log-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #D1D4D7;
    margin-bottom: 0;
    order: 3;
}
.pc-log-panel { order: 4; }
.pc-log-tab {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #5B6770;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .12s, border-color .12s;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.pc-log-tab:hover {
    color: #2F363A;
    border-bottom-color: #D1D4D7;
}
.pc-log-tab--active {
    color: #0092BC;
    border-bottom-color: #0092BC;
}
@media (max-width: 767px) {
    .pc-log-tabs { display: none; }
    .pc-log-hint { order: 3; margin-bottom: 0; border-radius: 6px 6px 0 0; border-bottom: none; }
    .pc-log-tab-select-wrap { order: 1; display: block; margin-bottom: 16px; }
    .pc-log-panel { order: 4; }
    .pc-log-panel .pc-aum-table-wrap {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* ── Logs page — panel + nav ────────────────────────────────────────────── */
.pc-log-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pc-log-panel[hidden] { display: none; }
/* Table flush against the tab underline — remove top radius so it flows in */
.pc-log-panel .pc-aum-table-wrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

.pc-log-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.pc-log-nav--end {
    justify-content: flex-end;
}
.pc-log-cell-trunc {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Clickable table rows */
.pc-log-row--clickable {
    cursor: pointer;
}
.pc-log-row--clickable:hover td {
    background: #EDF6FA !important;
}
/* Detail drawer — shell stays fixed, body scrolls on small screens */
#log-detail-drawer.pc-drawer--open { overflow-y: hidden; }
#log-detail-body {
    overflow-y: auto;
    min-height: 0;
}
/* Detail drawer field value */
.pc-log-detail-value {
    font-size: 14px;
    color: #2F363A;
    background: #F8F9F9;
    border: 1px solid #E4E6E8;
    border-radius: 4px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
}
/* Only message + exception boxes scroll independently */
.pc-log-detail-value--scroll {
    max-height: 180px;
    overflow-y: auto;
}
.pc-log-detail-value--mono {
    font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
    font-size: 12px;
}
.pc-log-page-info {
    font-size: 13px;
    color: #5B6770;
    padding: 0 4px;
}
.pc-btn--sm {
    padding: 4px 10px;
    font-size: 13px;
    min-height: 32px;
}

/* ── Pagination nav buttons — subtle, no pill shape ─── */
.pc-log-nav .pc-btn {
    width: 28px;
    height: 28px;
    min-height: unset;
    padding: 0;
    border-radius: 4px;
    border: 1px solid #D1D4D7;
    background: transparent;
    color: #5B6770 !important;
    font-size: 13px;
    line-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pc-log-nav .pc-btn:hover {
    background: #F0F2F3;
    border-color: #B0B8BD;
    color: #2F363A !important;
}
.pc-log-nav .pc-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── Service Action Rule drag-drop list ─────────────────────────────────── */
/* ── Service Action Rule — two-column layout ─────────────────────────── */
.pc-sar-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: flex-start;
}
.pc-sar-divider {
    width: 1px;
    background: var(--ac-gray-border);
    align-self: stretch;
    margin: 0 40px;
}
.pc-sar-col__header {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ac-gray-border);
    margin-bottom: 0;
}
.pc-sar-col__body {
    padding-top: 8px;
}
.pc-sar-drag-handle {
    opacity: .4;
    flex-shrink: 0;
}
.pc-sar-order-item--dragging {
    opacity: .45;
    background: #EDF6FA;
}
/* Toned-down column header title */
.pc-sar-col__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #5B6770;
    margin: 0;
    letter-spacing: 0.02em;
}
/* Checked state for pc-mrhb-item checkboxes (reuses pc-rr-rule__check span) */
.pc-mrhb-item input:checked ~ .pc-rr-rule__check {
    background: var(--ac-teal);
    border-color: var(--ac-teal);
}
.pc-mrhb-item input:checked ~ .pc-rr-rule__check::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.pc-sar-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #E8E5E2;
    border-radius: 8px;
    overflow: hidden;
}
.pc-sar-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #2F363A;
    background: #fff;
    border-bottom: 1px solid #F0EDE9;
    cursor: grab;
    user-select: none;
    transition: background .1s;
}
.pc-sar-order-item:last-child { border-bottom: none; }
.pc-sar-order-item:hover { background: #F9F8F7; }
.pc-sar-order-item:active { cursor: grabbing; }
.pc-sar-order-item__label { flex: 1; min-width: 0; }
.pc-sar-move-btns {
    display: none; /* hidden on desktop */
    gap: 2px;
    flex-shrink: 0;
}
.pc-sar-move-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #E0DCD8;
    border-radius: 6px;
    background: #fff;
    color: #5B6770;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.pc-sar-move-btn:hover { background: #F0EDE9; color: #1a1a1a; }
.pc-sar-move-btn:disabled { opacity: .3; cursor: default; }

/* Mobile — SAR page */
@media (max-width: 767px) {
    .pc-sar-grid {
        grid-template-columns: 1fr;
    }
    .pc-sar-divider {
        display: none;
    }
    .pc-sar-divider + .pc-sar-col {
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid var(--ac-gray-border);
    }
    /* Hide desktop top action bar on mobile */
    .pc-sar-top-bar {
        display: none !important;
    }
    /* Show ↑↓ buttons, hide drag handle */
    .pc-sar-move-btns { display: flex; }
    .pc-sar-drag-handle { display: none; }
    .pc-sar-order-item { cursor: default; }
}

/* ── Service Action Filter edit page — include/exclude toggle bar ────────── */
.pc-saf-toggle-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ac-gray-border);
    background: #F8F9F9;
}
.pc-saf-ie-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pc-saf-ie-label {
    font-size: 12px;
    font-weight: 600;
    color: #5B6770;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pc-saf-ie-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--ac-gray-border);
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.pc-saf-ie-radio:has(input:checked) {
    border-color: var(--ac-teal);
    background: #EDF6FA;
    color: var(--ac-teal);
    font-weight: 600;
}
.pc-saf-ie-radio input[type="radio"] {
    display: none;
}
.pc-saf-ie-hint {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* ── Required field asterisk ────────────────────────────────────────────── */
.pc-req {
    color: #D93025;
    font-weight: 700;
    margin-left: 2px;
}

/* ── Form hint text ─────────────────────────────────────────────────────── */
.pc-form-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0 0;
}

/* ── Empty cell placeholder ─────────────────────────────────────────────── */
.pc-empty-cell { color: #aab0b5; }

/* ── Multi-item cell in tables ──────────────────────────────────────────── */
.pc-fn-cell--more { font-size: 11px; color: #6b7280; }

/* ── Header search history suggestions ─────────────────────────────────── */
.pc-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #D1D4D7;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 300;
    max-height: 280px;
    overflow-y: auto;
}
.pc-search-suggestions li {
    padding: 8px 14px;
    font-size: 14px;
    color: #2F363A;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
}
.pc-search-suggestions li::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* Clock icon as SVG data URI */
    background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%239DA5AC' stroke-width='1.5'/%3E%3Cpath d='M12 7v5l3 3' stroke='%239DA5AC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
.pc-search-suggestions li:hover,
.pc-search-suggestions li:focus { background: #F8F9F9; color: var(--ac-blue, #0092BC); }

/* ── Function filter edit – dimensions grid ── */
.pc-fn-ms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
}
@media (max-width: 700px) {
    .pc-fn-ms-grid { grid-template-columns: 1fr; width: 100%; box-sizing: border-box; }
    .pc-fn-ms-field { min-width: 0; max-width: 100%; }
}

/* Each dimension field: label row + dropdown/textarea */
.pc-fn-ms-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-fn-ms-field__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pc-fn-ms-field__header .pc-drawer__label { margin: 0; }

/* Inline Include / Exclude radio pair */
.pc-fn-ie-toggle {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.pc-fn-ie-opt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #5B6770;
    border: 1px solid #D5D8DA;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pc-fn-ie-opt--active {
    background: #0092BC;
    color: #fff;
    border-color: #0092BC;
}

/* ── Multiselect dropdown component (pc-ms) ── */
.pc-ms {
    position: relative;
}
.pc-ms__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #D5D8DA;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #5B6770;
    text-align: left;
    transition: border-color 0.15s;
}
.pc-ms__trigger:hover { border-color: #9DA5AC; }
.pc-ms__trigger--open { border-color: #0092BC; box-shadow: 0 0 0 2px rgba(0,146,188,0.15); }
.pc-ms__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ms__label--active { color: #202020; font-weight: 600; }
.pc-ms__chevron {
    flex-shrink: 0;
    color: #9DA5AC;
    transition: transform 0.2s;
}
.pc-ms__trigger--open .pc-ms__chevron { transform: rotate(180deg); }

.pc-ms__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 200px;
    z-index: 400;
    background: #fff;
    border: 1px solid #D5D8DA;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    overflow: hidden;
}
.pc-ms__search-wrap {
    padding: 8px 8px 6px;
    border-bottom: 1px solid #F0F1F2;
}
.pc-ms__search {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid #D5D8DA;
    border-radius: 6px;
    outline: none;
    background: #F8F9F9;
}
.pc-ms__search:focus { border-color: #0092BC; background: #fff; }
.pc-ms__list {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
.pc-ms__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #2F363A;
    transition: background 0.1s;
}
.pc-ms__item:hover { background: #F5F7F8; }
.pc-ms__item input[type="checkbox"] { display: none; }
.pc-ms__check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid #D5D8DA;
    border-radius: 4px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.pc-ms__item input[type="checkbox"]:checked ~ .pc-ms__check {
    background: #0092BC;
    border-color: #0092BC;
}
.pc-ms__item input[type="checkbox"]:checked ~ .pc-ms__check::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.pc-ms__text { flex: 1; }
.pc-ms__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #9DA5AC;
    font-style: italic;
}

/* ── Function filter edit – text-based panel textarea ── */
.pc-fn-text-panel-input {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}