/* Component styles — tokens only from theme.css. Solid colors, no gradients. */

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

html { scroll-behavior: smooth; }

html,
body,
.app-shell,
.app-layout,
.app-main,
.page,
.sidebar,
.offcanvas-body,
.biz-split-list,
.biz-loc-detail-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, 0.22) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.app-layout::-webkit-scrollbar,
.app-main::-webkit-scrollbar,
.page::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.biz-split-list::-webkit-scrollbar,
.biz-loc-detail-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.app-shell::-webkit-scrollbar-track,
.app-layout::-webkit-scrollbar-track,
.app-main::-webkit-scrollbar-track,
.page::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track,
.biz-split-list::-webkit-scrollbar-track,
.biz-loc-detail-scroll::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.app-shell::-webkit-scrollbar-thumb,
.app-layout::-webkit-scrollbar-thumb,
.app-main::-webkit-scrollbar-thumb,
.page::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb,
.biz-split-list::-webkit-scrollbar-thumb,
.biz-loc-detail-scroll::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.app-shell::-webkit-scrollbar-thumb:hover,
.app-layout::-webkit-scrollbar-thumb:hover,
.app-main::-webkit-scrollbar-thumb:hover,
.page::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover,
.biz-split-list::-webkit-scrollbar-thumb:hover,
.biz-loc-detail-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 26, 0.32);
    background-clip: content-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.app-shell { min-height: 100vh; }

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

button, input, select, textarea { font: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
h2 { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 600; }
h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.eyebrow {
    margin: 0 0 0.25rem;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lead {
    margin: 0.4rem 0 0;
    color: var(--muted);
    line-height: 1.5;
    max-width: 40rem;
    font-size: 0.925rem;
}

/* ---------- Auth ---------- */
.auth-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.auth-screen-split {
    grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 1.05fr);
    background: #f5f7fa;
}

.auth-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem 2.4rem;
    color: var(--on-brand, #fff);
    background:
        radial-gradient(720px 420px at 18% 12%, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
        linear-gradient(160deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 78%, #0f172a) 100%);
    overflow: hidden;
}

.auth-intro::after {
    content: "";
    position: absolute;
    inset: auto -18% -28% auto;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    box-shadow: 0 0 0 2.75rem color-mix(in srgb, #fff 5%, transparent);
    pointer-events: none;
}

.auth-intro-top,
.auth-intro-copy,
.auth-intro-secure {
    position: relative;
    z-index: 1;
}

.auth-intro-logo {
    display: block;
    max-height: 2.55rem;
    max-width: 10.5rem;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.auth-intro-system {
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.auth-intro-kicker {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 78%, transparent);
}

.auth-intro-copy h2 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.auth-intro-copy > p {
    margin: 0.85rem 0 0;
    max-width: 34ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, #fff 86%, transparent);
}

.auth-intro-points {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.auth-intro-points li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 92%, transparent);
}

.auth-intro-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: #fff;
}

.auth-intro-secure {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 72%, transparent);
}

.brand-mark {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.brand-logo {
    display: block;
    max-height: 3.25rem;
    max-width: 12rem;
    width: auto;
    object-fit: contain;
}

.brand-byline {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--muted);
}

.auth-panel {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.85rem;
    padding: 1.75rem 1.25rem 2rem;
    min-height: 100vh;
    background:
        radial-gradient(640px 360px at 80% 8%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
        #f5f7fa;
}

.auth-screen-split .auth-panel {
    min-height: auto;
}

.auth-card,
.stat,
.menu-card,
.action,
.attendance,
.empty-panel,
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.auth-card {
    width: min(100%, 24rem);
    padding: 1.55rem 1.45rem 1.4rem;
}

.auth-card-brand {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.auth-card-logo {
    display: block;
    max-height: 4.75rem;
    max-width: 14rem;
    width: auto;
    object-fit: contain;
    margin-bottom: 0.55rem;
}

.auth-card-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.35rem;
    border-radius: 0.7rem;
    background: var(--brand-soft, #dbeafe);
    color: var(--brand);
    font-weight: 750;
    font-size: 1.15rem;
}

.auth-card-brand h1 {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.25;
}

.auth-card-brand .lead {
    margin: 0.15rem 0 0;
    max-width: 28ch;
    font-size: 0.9rem;
}

.login-forgot {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: -0.25rem;
}

.login-forgot-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--brand);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-forgot-btn:hover {
    color: color-mix(in srgb, var(--brand) 82%, #000);
}

.login-forgot-bubble {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 20;
    width: min(100vw - 2rem, 17.5rem);
    padding: 0.75rem 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.login-forgot-bubble::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 1.1rem;
    width: 10px;
    height: 10px;
    border-left: 1px solid var(--line, #e5e7eb);
    border-top: 1px solid var(--line, #e5e7eb);
    background: #fff;
    transform: rotate(45deg);
}

.login-forgot-bubble p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-soft, #334155);
    text-align: left;
}

.login-forgot-contact-text {
    margin: 0.55rem 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    font-weight: 500;
    color: var(--ink-soft, #475569) !important;
    word-break: break-word;
}

.app-login-form .login-forgot {
    margin: 0.15rem 0 0.15rem;
}

.app-login-form .login-forgot-btn {
    font-size: 0.8rem;
}

.auth-login-footer {
    width: min(100%, 24rem);
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
}

.auth-login-footer-logo {
    display: block;
    max-height: 2rem;
    max-width: 9rem;
    width: auto;
    object-fit: contain;
    opacity: 0.95;
}

.auth-login-footer-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
}

.auth-login-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.auth-login-footer-links a {
    color: var(--ink-soft, #475569);
    text-decoration: none;
    font-weight: 600;
}

.auth-login-footer-links a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-login-footer-sep {
    color: #94a3b8;
}

.auth-vendor-branding {
    width: min(100%, 24rem);
    text-align: center;
    color: #7a869a;
}

.auth-vendor-branding p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 500;
}

.auth-vendor-branding p + p {
    margin-top: 0.2rem;
}

.auth-vendor-branding a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-vendor-branding a:hover {
    color: var(--brand);
}

.stack { display: grid; gap: 0.85rem; margin-top: 1.15rem; }

label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.field-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control-knock {
    width: 100%;
    min-height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.btn-knock,
button.btn-knock,
.text-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--control-h);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--on-brand);
    text-decoration: none;
    padding: 0 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.btn-knock:hover,
.text-link:hover { background: var(--brand-hover); color: var(--on-brand); }

.btn-knock:disabled { opacity: 0.65; cursor: wait; }

.btn-accent { background: var(--brand); color: var(--on-brand); }
.btn-accent:hover { background: var(--brand-hover); }

.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.btn-sm {
    min-height: 2.25rem;
    padding: 0 0.85rem;
    font-size: 0.85rem;
}

.form-message,
.banner {
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid #fecdca;
    font-size: 0.875rem;
}

.banner-ok {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: #abefc6;
}

/* ---------- Field app login (phone chrome) ---------- */
.app-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(ellipse 50% 40% at 12% 18%, rgba(148, 163, 184, 0.35), transparent 70%),
        radial-gradient(ellipse 45% 35% at 88% 82%, rgba(100, 116, 139, 0.22), transparent 70%),
        linear-gradient(160deg, #eef2f6 0%, #e4e9ef 48%, #dce3eb 100%);
}

.app-login-device {
    width: min(100%, 26.5rem);
    height: min(54.5rem, calc(100dvh - 2.5rem));
}

.app-login-bezel {
    position: relative;
    height: 100%;
    padding: 0.72rem 0.62rem 0.7rem;
    border-radius: 2.55rem;
    background: #dfe4ea;
    box-shadow:
        0 0 0 1px #c5ccd6,
        0 24px 48px rgba(15, 23, 42, 0.12);
}

.app-login-island {
    position: absolute;
    top: 1.05rem;
    left: 50%;
    z-index: 3;
    width: 6.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #1c2430;
    transform: translateX(-50%);
}

.app-login-status {
    position: absolute;
    top: 0.95rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    pointer-events: none;
}

.app-login-time { padding-left: 0.35rem; }

.app-login-meters {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding-right: 0.1rem;
}

.app-login-signal,
.app-login-wifi,
.app-login-battery {
    display: block;
    background: currentColor;
}

.app-login-signal {
    width: 0.95rem;
    height: 0.62rem;
    clip-path: polygon(0 100%, 22% 68%, 22% 100%, 44% 46%, 44% 100%, 66% 24%, 66% 100%, 88% 0, 88% 100%, 100% 100%, 100% 0, 0 100%);
}

.app-login-wifi {
    width: 0.85rem;
    height: 0.62rem;
    border-radius: 0 0 0.7rem 0.7rem;
    clip-path: polygon(50% 100%, 0 30%, 20% 12%, 50% 55%, 80% 12%, 100% 30%);
}

.app-login-battery {
    width: 1.2rem;
    height: 0.58rem;
    border-radius: 0.14rem;
    box-shadow: inset 0 0 0 1.5px currentColor;
    background: transparent;
    position: relative;
}

.app-login-battery::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: currentColor;
    border-radius: 0.08rem;
}

.app-login-battery::after {
    content: "";
    position: absolute;
    right: -0.16rem;
    top: 0.14rem;
    width: 0.12rem;
    height: 0.28rem;
    border-radius: 0 2px 2px 0;
    background: currentColor;
}

.app-login-screen {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0%, transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(148, 163, 184, 0.28) 0%, transparent 32%),
        radial-gradient(circle at 78% 78%, rgba(100, 116, 139, 0.2) 0%, transparent 36%),
        radial-gradient(circle at 22% 84%, rgba(203, 213, 225, 0.55) 0%, transparent 34%),
        linear-gradient(165deg, #f7f9fb 0%, #eef2f6 42%, #e6ebf1 100%);
    color: var(--ink);
    padding: 3.2rem 0.85rem 1.7rem;
}

.app-login-screen::before,
.app-login-screen::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(100, 116, 139, 0.16);
    pointer-events: none;
}

.app-login-screen::before {
    width: 18rem;
    height: 18rem;
    top: -5.5rem;
    right: -6.5rem;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.55), transparent 68%);
    box-shadow: inset 0 0 0 28px rgba(148, 163, 184, 0.05);
}

.app-login-screen::after {
    width: 14rem;
    height: 14rem;
    bottom: -4.5rem;
    left: -5rem;
    background: radial-gradient(circle at 55% 45%, rgba(148, 163, 184, 0.14), transparent 70%);
    box-shadow: inset 0 0 0 22px rgba(148, 163, 184, 0.04);
}

.app-login-sheet {
    position: relative;
    z-index: 1;
}

.app-login-hero {
    text-align: center;
    margin-bottom: 1.1rem;
}

.app-login-logo {
    display: block;
    width: min(72%, 12rem);
    max-height: 3.6rem;
    margin: 0 auto 0.85rem;
    object-fit: contain;
}

.app-login-icon {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.7rem;
    border-radius: 0.95rem;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1.2rem;
    font-weight: 800;
}

.app-login-mark {
    margin: 0 auto 0.55rem;
    max-width: 14rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
}

.app-login-kicker {
    margin: 0 0 0.2rem;
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-login-hero h1 {
    color: var(--ink);
    font-size: 1.7rem;
}

.app-login-lead {
    margin: 0.35rem auto 0;
    max-width: 20rem;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.app-login-sheet {
    width: min(100%, 22.5rem);
    max-height: 100%;
    overflow: auto;
    padding: 1.25rem 1.15rem 1.2rem;
    border-radius: 1.15rem;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.app-login-form {
    display: grid;
    gap: 0.9rem;
}

.app-login-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.28rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface-2);
}

.app-login-role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.85rem;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.app-login-role.is-active {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
}

.app-login-role-ico {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.68rem;
    font-weight: 800;
}

.app-login-field {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
}

.app-login-control {
    position: relative;
    display: block;
}

.app-login-control > svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.app-login-control input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    min-height: 3.15rem;
    height: 3.15rem;
    max-height: none;
    padding: 0.7rem 2.7rem 0.7rem 2.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.9rem;
    background: var(--surface-2);
    color: var(--ink);
}

.app-login-control input:not([type="checkbox"]):not([type="radio"]):focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    background: var(--surface);
}

.app-login-reveal {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.app-login-reveal svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-login-reveal .icon-hide { display: none; }
.app-login-reveal.is-on .icon-show { display: none; }
.app-login-reveal.is-on .icon-hide { display: block; }

.app-login-submit {
    width: 100%;
    min-height: 3.15rem;
    border-radius: 0.9rem;
    font-size: 1rem;
}

.app-login-help {
    display: block;
    width: 100%;
    margin-top: 0.95rem;
    padding: 0.45rem;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-weight: 650;
    font-size: 0.9rem;
    cursor: pointer;
}

.app-login-help:hover { color: var(--brand-hover); }

.pwa-install-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 75%, #fff);
    color: var(--brand);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.pwa-install-chip-icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
    object-fit: cover;
}

.pwa-prompt-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 0.95rem;
}

.pwa-prompt-logo {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.85rem;
    object-fit: cover;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent);
}

.pwa-prompt-hero p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.pwa-prompt-actions {
    display: grid;
    gap: 0.55rem;
}

.pwa-prompt-actions[hidden] {
    display: none !important;
}

.pwa-install-fallback {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.pwa-install-popup .app-login-overlay-card {
    max-height: min(78vh, 34rem);
    overflow: auto;
}

.pwa-ios-steps {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.pwa-ios-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
}

.pwa-ios-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.pwa-ios-steps strong {
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
}

.pwa-ios-steps p {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.app-login-home {
    position: absolute;
    left: 50%;
    bottom: 0.95rem;
    z-index: 3;
    width: 7.4rem;
    height: 0.32rem;
    border-radius: 999px;
    background: #94a3b8;
    transform: translateX(-50%);
}

.app-login-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
}

.app-login-overlay[hidden] { display: none; }

.app-login-overlay-dismiss {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 18, 23, 0.35);
}

.app-login-overlay-card {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.1rem 1.1rem 1.2rem;
    border-radius: 1.15rem;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.app-login-overlay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.app-login-overlay-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.app-login-overlay-x {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.app-login-overlay-card .offcanvas-list { margin: 0.85rem 0 1rem; }
.app-login-overlay-card .app-login-lead { margin: 0.2rem 0 0; text-align: left; max-width: none; }
.app-login-overlay-card .sign-in-help-copy { margin: 0.35rem 0 0.95rem; }
.app-login-overlay-card .app-login-submit { margin-top: 0.35rem; }

.sign-in-help-copy {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.sign-in-help-copy.muted { color: var(--muted); }

.app-login-sheet .banner { margin: 0 0 0.85rem; }

@media (max-width: 720px) {
    .app-login {
        padding: 0;
        background:
            radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0%, transparent 28%),
            radial-gradient(circle at 82% 18%, rgba(148, 163, 184, 0.28) 0%, transparent 32%),
            radial-gradient(circle at 78% 78%, rgba(100, 116, 139, 0.2) 0%, transparent 36%),
            radial-gradient(circle at 22% 84%, rgba(203, 213, 225, 0.55) 0%, transparent 34%),
            linear-gradient(165deg, #f7f9fb 0%, #eef2f6 42%, #e6ebf1 100%);
    }

    .app-login-device {
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .app-login-bezel {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .app-login-island,
    .app-login-status,
    .app-login-home { display: none; }

    .app-login-screen {
        border-radius: 0;
        padding: calc(1.15rem + env(safe-area-inset-top, 0px)) 0.85rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Field mobile app shell ---------- */
.field-app {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: #11161c;
}

.field-app-device {
    width: min(100%, 26.5rem);
    height: min(54.5rem, calc(100dvh - 2.5rem));
}

.field-app-bezel {
    position: relative;
    height: 100%;
    padding: 0.72rem 0.62rem 0.7rem;
    border-radius: 2.55rem;
    background: #0b0d10;
    box-shadow:
        0 0 0 1px #2a313a,
        0 28px 70px rgba(0, 0, 0, 0.5);
}

.field-app-island {
    position: absolute;
    top: 1.05rem;
    left: 50%;
    z-index: 3;
    width: 6.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #050607;
    transform: translateX(-50%);
}

.field-app-status {
    position: absolute;
    top: 0.95rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--on-brand);
    font-size: 0.78rem;
    font-weight: 700;
    pointer-events: none;
}

.field-app-time { padding-left: 0.35rem; }

.field-app-meters {
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.field-app-signal,
.field-app-wifi,
.field-app-battery {
    display: block;
    background: currentColor;
}

.field-app-signal {
    width: 0.95rem;
    height: 0.62rem;
    clip-path: polygon(0 100%, 22% 68%, 22% 100%, 44% 46%, 44% 100%, 66% 24%, 66% 100%, 88% 0, 88% 100%, 100% 100%, 100% 0, 0 100%);
}

.field-app-wifi {
    width: 0.85rem;
    height: 0.62rem;
    clip-path: polygon(50% 100%, 0 30%, 20% 12%, 50% 55%, 80% 12%, 100% 30%);
}

.field-app-battery {
    width: 1.2rem;
    height: 0.58rem;
    border-radius: 0.14rem;
    box-shadow: inset 0 0 0 1.5px currentColor;
    background: transparent;
    position: relative;
}

.field-app-battery::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: currentColor;
    border-radius: 0.08rem;
}

.field-app-battery::after {
    content: "";
    position: absolute;
    right: -0.16rem;
    top: 0.14rem;
    width: 0.12rem;
    height: 0.28rem;
    border-radius: 0 2px 2px 0;
    background: currentColor;
}

.field-app-screen {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2rem;
    background: var(--paper);
    color: var(--ink);
}

.field-app-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 3.35rem;
    padding: 2.15rem 0.75rem 0.55rem;
    background: var(--brand);
    color: var(--on-brand, #fff);
}

.field-app-bar-start {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.field-app-bar-title {
    min-width: 0;
    text-align: left;
    color: var(--on-brand, #fff);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-app-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.field-app-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--on-brand, #fff) 16%, transparent);
    color: var(--on-brand, #fff);
    text-decoration: none;
    cursor: pointer;
}

.field-app-icon-btn.is-ghost {
    visibility: hidden;
    pointer-events: none;
}

.field-app-icon-btn svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-app-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: var(--paper);
    position: relative;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.field-app-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.field-ptr {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 78%, #fff), transparent);
    transition: opacity 0.12s ease;
}

.field-ptr.is-visible,
.field-ptr.is-refreshing {
    height: var(--field-ptr-pull, 0px);
    opacity: 1;
}

.field-ptr-spinner {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-top-color: var(--brand);
    transform: rotate(calc(var(--field-ptr-pull, 0px) * 3deg));
    transition: transform 0.05s linear;
}

.field-ptr.is-ready .field-ptr-spinner,
.field-ptr.is-refreshing .field-ptr-spinner {
    animation: field-ptr-spin 0.7s linear infinite;
}

.field-ptr-label {
    white-space: nowrap;
}

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

.field-app-home {
    position: absolute;
    left: 50%;
    bottom: 0.55rem;
    z-index: 3;
    width: 7.4rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(26, 26, 26, 0.28);
    transform: translateX(-50%);
    pointer-events: none;
}

.field-home {
    padding: 0.85rem 0.85rem 1.5rem;
}

.field-home-head {
    margin: 0.15rem 0 0.85rem;
}

.field-home-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.45rem;
}

.field-home-top-main {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.field-home-kicker {
    margin: 0;
    min-width: 0;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field-home-greeting {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.field-home-user {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.field-home-avatar {
    width: 3.85rem;
    height: 3.85rem;
    flex: 0 0 auto;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}

.field-home-avatar.has-photo {
    background: var(--surface-2, #f3f4f6);
}

.field-home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.field-home-avatar svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-home-user-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.15rem;
}

.field-home-head h1 {
    margin: 0;
    min-width: 0;
    color: var(--brand);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.field-home-subtitle {
    margin: 0.12rem 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}

.field-home-user-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding-top: 0.2rem;
}

.field-home-byline {
    margin: 1.15rem 0 0.35rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field-home-icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 70%, #fff);
    color: var(--brand);
    padding: 0;
    cursor: pointer;
}

.field-home-icon-btn svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-home-icon-btn:hover,
.field-home-icon-btn:focus-visible {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    outline: none;
}

.field-home-icon-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.field-home-clock {
    margin: 0;
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 0.05rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
}

.field-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.field-status-copy {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.field-status-kicker {
    margin: 0;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 700;
}

.field-status-copy strong {
    font-size: 1.05rem;
    line-height: 1.25;
}

.field-status-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.field-status-link {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

.field-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.3rem;
    border-radius: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.field-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.55rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}

.field-tab svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-tab.is-active {
    background: var(--brand);
    color: var(--on-brand);
}

.field-panel {
    display: none;
    gap: 0.55rem;
}

.field-panel.is-active { display: grid; }

.field-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.field-action:hover,
.field-action:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    background: var(--surface);
}

.field-action-thumb {
    width: 3.85rem;
    height: 3.85rem;
    border-radius: 0.55rem;
    object-fit: cover;
    background: var(--brand-soft);
    flex: 0 0 auto;
}

.field-action-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.field-action-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
}

.field-action-copy span {
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.35;
}

.field-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
}

.field-action-trail {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-empty {
    padding: 1.25rem 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.field-empty p { margin: 0; }

/* ---------- Field skeleton loading ---------- */
@keyframes field-skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.field-app-body.is-skel-ready > .field-home,
.field-app-body.is-skel-ready > .field-visitor-list,
.field-app-body.is-skel-ready > .panel {
    animation: field-skel-fade-in 0.28s ease;
}

@keyframes field-skel-fade-in {
    from { opacity: 0.55; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.field-skel-page {
    padding: 0.85rem 0.85rem 1.5rem;
    display: grid;
    gap: 0.85rem;
}

.field-skel,
.field-skel-line,
.field-skel-avatar,
.field-skel-thumb,
.field-skel-photo,
.field-skel-chip,
.field-skel-pill,
.field-skel-btn,
.field-skel-tab,
.field-skel-field,
.field-skel-camera,
.field-skel-meta,
.field-skel-detail-photo {
    display: block;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--line) 82%, #fff) 0%,
        color-mix(in srgb, var(--brand) 10%, #f3f4f6) 42%,
        color-mix(in srgb, var(--line) 82%, #fff) 84%
    );
    background-size: 220% 100%;
    animation: field-skel-shimmer 1.15s ease-in-out infinite;
    border-radius: 0.55rem;
}

.field-skel-line {
    height: 0.78rem;
    width: 100%;
}

.field-skel-line.is-sm { height: 0.62rem; }
.field-skel-line.is-xs { height: 0.52rem; }

.field-skel-head {
    display: grid;
    gap: 0.45rem;
}

.field-skel-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.field-skel-avatar {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

.field-skel-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.field-skel-tab {
    height: 2.45rem;
    border-radius: 999px;
}

.field-skel-stack {
    display: grid;
    gap: 0.55rem;
}

.field-skel-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.field-skel-thumb {
    width: 3.85rem;
    height: 3.85rem;
    border-radius: 0.55rem;
}

.field-skel-action-copy {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.field-skel-chip {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.3rem;
}

.field-skel-visitor {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--surface);
}

.field-skel-photo {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 0.7rem;
}

.field-skel-visitor-copy {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    align-content: start;
}

.field-skel-visitor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.field-skel-pill {
    width: 3.4rem;
    height: 1.05rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

.field-skel-visitor-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.field-skel-btn {
    width: 4.8rem;
    height: 1.55rem;
    border-radius: 0.55rem;
}

.field-skel-btn.is-ghost {
    opacity: 0.72;
}

.field-skel-btn.is-wide {
    width: 100%;
    height: 2.55rem;
    border-radius: 0.75rem;
}

.field-skel-camera {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    min-height: 11rem;
}

.field-skel-field {
    height: 3.1rem;
    border-radius: 0.75rem;
}

.field-skel-panel {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.field-skel-detail {
    display: grid;
    gap: 0.95rem;
}

.field-skel-detail-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: min(58vw, 18rem);
    border-radius: 1rem;
}

.field-skel-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.field-skel-meta {
    height: 2.6rem;
    border-radius: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
    .field-skel,
    .field-skel-line,
    .field-skel-avatar,
    .field-skel-thumb,
    .field-skel-photo,
    .field-skel-chip,
    .field-skel-pill,
    .field-skel-btn,
    .field-skel-tab,
    .field-skel-field,
    .field-skel-camera,
    .field-skel-meta,
    .field-skel-detail-photo,
    .field-app-body.is-skel-ready > .field-home,
    .field-app-body.is-skel-ready > .field-visitor-list,
    .field-app-body.is-skel-ready > .panel {
        animation: none;
    }
}

.field-profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 3.85rem;
    height: 3.85rem;
}

.field-profile-avatar {
    width: 100%;
    height: 100%;
}

.field-profile-avatar-edit {
    appearance: none;
    position: absolute;
    right: -0.15rem;
    bottom: -0.15rem;
    width: 1.55rem;
    height: 1.55rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand, #fff);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.field-profile-avatar-edit svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-profile-avatar-edit:disabled {
    opacity: 0.65;
    cursor: wait;
}

.field-profile-meta {
    margin: 0.18rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.field-profile-meta.is-soft {
    font-weight: 600;
    color: color-mix(in srgb, var(--muted) 88%, var(--brand));
}

.field-profile-card {
    margin-top: 0.75rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.field-profile-card h2 {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    color: var(--ink);
}

.field-profile-lead {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.field-profile-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.field-profile-facts li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface-2);
}

.field-profile-facts span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.field-profile-facts strong {
    text-align: right;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.field-visitor-step {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.field-visitor-step[hidden] {
    display: none !important;
}

.field-visitor-custom,
.field-visitor-group {
    display: grid;
    gap: 0.65rem;
}

.field-visitor-checks {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--surface-2);
    display: grid;
    gap: 0.45rem;
}

.field-visitor-checks legend {
    padding: 0 0.25rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}

.field-visitor-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink);
}

.field-visitor-check input {
    width: auto;
    margin: 0;
}

.field-camera {
    display: grid;
    gap: 0.45rem;
}

.field-camera-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}

.field-camera-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: #0f172a;
    width: min(100%, 11.5rem);
    height: 11.5rem;
    margin-inline: auto;
    display: grid;
    place-items: center;
}

.field-camera-stage video,
.field-camera-preview {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 11.5rem;
    object-fit: cover;
    border-radius: 0.85rem;
    background: #0f172a;
}

.field-camera-preview {
    width: min(100%, 11.5rem);
    height: 11.5rem;
    margin-inline: auto;
}

.field-camera-hint {
    margin: 0;
    padding: 0.75rem;
    color: #cbd5e1;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.4;
}

.field-camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    align-items: center;
}

.field-camera-icon-btn {
    appearance: none;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow-sm);
}

.field-camera-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-camera-icon-btn.is-primary {
    width: 3.35rem;
    height: 3.35rem;
    border-color: transparent;
    background: var(--brand);
    color: var(--brand-ink, #fff);
}

.field-camera-icon-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.field-material-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.field-material-shot {
    min-width: 0;
}

.field-material-shot-trigger {
    width: 100%;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
    border-radius: 0.95rem;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, #fff), var(--surface) 58%);
    color: var(--ink);
    padding: 0.85rem 0.7rem;
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-material-shot-trigger:hover,
.field-material-shot-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: var(--shadow-sm), 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.field-material-shot-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--on-brand, #fff);
    margin-bottom: 0.15rem;
}

.field-material-shot-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-material-shot-trigger strong {
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.2;
}

.field-material-shot-trigger em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.field-material-shot-done {
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.field-material-shot-done[hidden] {
    display: none !important;
}

.field-material-shot-done img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: color-mix(in srgb, var(--surface) 85%, #000 8%);
}

.field-material-shot-done-meta {
    padding: 0.45rem 0.55rem 0.2rem;
    display: grid;
    gap: 0.08rem;
}

.field-material-shot-done-meta strong {
    font-size: 0.74rem;
    font-weight: 750;
}

.field-material-shot-done-meta span {
    color: var(--brand);
    font-size: 0.66rem;
    font-weight: 700;
}

.field-material-shot-done-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem 0.55rem;
}

.field-material-shot-done-actions .field-visitor-btn {
    min-height: 1.9rem;
    padding: 0.28rem 0.4rem;
    font-size: 0.72rem;
}

.field-material-shot.is-ready .field-material-shot-trigger {
    display: none;
}

.field-custom-camera-shot {
    margin: 0.15rem 0 0.35rem;
}

.field-visitor-custom .field-material-photos,
.field-visitor-custom .field-custom-camera-shot {
    width: 100%;
}

.field-custom-form-card {
    padding: 0.75rem 0.85rem;
}

.field-custom-form-card .field-visitor-copy {
    width: 100%;
}

.field-custom-form-tools label {
    margin: 0;
}

.field-custom-form-list {
    gap: 0.35rem;
}

.field-custom-form-action {
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.8rem;
}

.field-custom-form-action .field-action-copy {
    gap: 0.05rem;
}

.field-custom-form-action .field-action-copy strong {
    font-size: 0.92rem;
}

.field-custom-form-action .field-action-copy span {
    font-size: 0.76rem;
    line-height: 1.25;
}

.field-custom-form-action .field-action-trail {
    width: 0.95rem;
    height: 0.95rem;
}

.field-custom-form-photos {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.field-custom-form-photo {
    position: relative;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, #000 6%);
    min-height: 9.5rem;
}

.field-custom-form-photo-zoom {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    position: relative;
}

.field-custom-form-photo img {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: cover;
}

.field-custom-form-photo-zoom-hint {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(10, 14, 20, 0.55);
    color: #fff;
    pointer-events: none;
}

.field-custom-form-photo-zoom-hint svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-custom-form-photo img.is-broken {
    display: none;
}

.field-custom-form-photo.is-missing .field-custom-form-photo-zoom {
    display: none;
}

.field-custom-form-photo-fallback {
    display: none;
    place-items: center;
    gap: 0.4rem;
    min-height: 9.5rem;
    padding: 1rem;
    color: color-mix(in srgb, var(--brand) 70%, var(--muted));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 70%, #fff), color-mix(in srgb, var(--surface) 92%, #e8eaee));
    text-align: center;
}

.field-custom-form-photo.is-missing .field-custom-form-photo-fallback {
    display: grid;
}

.field-custom-form-photo-fallback svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-custom-form-photo-fallback em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--muted);
}

.field-material-camera-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: end center;
    padding: 0.75rem;
    background: rgba(10, 14, 20, 0.55);
}

.field-material-camera-panel[hidden] {
    display: none !important;
}

.field-material-camera-sheet {
    width: min(100%, 26rem);
    max-height: min(92vh, 42rem);
    overflow: auto;
    border-radius: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.28));
    padding: 0.85rem;
}

.field-material-camera-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.field-material-camera-head strong {
    font-size: 0.95rem;
}

.field-material-qty-list {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.field-material-qty-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.75rem;
    gap: 0.55rem;
    align-items: end;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field-material-qty-row > label {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.field-material-qty-row .select2-container,
.field-material-qty-row select,
.field-material-qty-row input {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.field-material-qty-amount input {
    text-align: center;
}

.field-material-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.field-material-photo-grid figure {
    margin: 0;
}

.field-material-photo-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: var(--surface);
}

.field-material-photo-grid figcaption {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.field-emp-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0.15rem 0 0.65rem;
}

.field-home > .field-emp-filters:has([data-request-tab]),
.field-home > .field-emp-filters:has([data-meeting-tab]),
.field-home > .field-emp-filters:has([data-custom-form-tab]),
.field-home > .field-emp-filters:has([data-task-tab]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-task-meta {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 0.15rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface) 96%, #fff);
}

.field-task-meta-block {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.field-task-meta-label {
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--ink);
    line-height: 1.2;
}

.field-task-meta-line {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.field-task-question {
    display: grid;
    gap: 0.45rem;
    margin: 0.15rem 0 0.75rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface) 94%, #fff);
}

.field-task-question-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.field-task-photos {
    display: grid;
    gap: 0.45rem;
}

.field-task-photos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.field-task-photo-cam {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    color: var(--ink);
    min-height: 2rem;
    padding: 0.28rem 0.7rem 0.28rem 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.field-task-photo-cam svg {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.22rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand, #fff);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.field-task-photo-cam:hover,
.field-task-photo-cam:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
    outline: none;
}

.field-task-photo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.field-task-photo-thumbs[hidden] {
    display: none !important;
}

.field-task-photo-thumb {
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, #000 6%);
    box-shadow: var(--shadow-sm);
}

.field-task-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.field-task-photo-thumb-remove {
    appearance: none;
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #111 72%, transparent);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.field-custom-camera-shot.is-selfie-compact {
    margin: 0.15rem 0 0.55rem;
}

.field-custom-camera-shot.is-selfie-compact.is-ready .field-task-photo-cam {
    opacity: 0.92;
}

.field-task-photo-thumb.is-selfie {
    width: 4.25rem;
    height: 4.25rem;
}

.field-request-panel {
    display: none;
}

.field-request-panel.is-active {
    display: block;
}

.field-meeting-options {
    display: grid;
    gap: 0.95rem;
}

.field-meeting-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.field-meeting-group legend {
    padding: 0;
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.field-meeting-choices {
    display: grid;
    gap: 0.4rem;
}

.field-meeting-choice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.field-meeting-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}

.field-meeting-choice input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--brand);
    flex: 0 0 auto;
}

.field-meeting-hint {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: var(--muted);
}

.field-meeting-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.field-meeting-card .field-visitor-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.field-meeting-card-action {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    padding-top: 0.05rem;
}

.field-patrol-timeline-item {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    gap: 0.7rem;
    margin: 0 0 0.85rem;
}

.field-patrol-timeline-item:last-child {
    margin-bottom: 0;
}

.field-patrol-timeline-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.field-patrol-timeline-rail::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: -0.85rem;
    width: 2px;
    background: var(--line);
}

.field-patrol-timeline-item:last-child .field-patrol-timeline-rail::before {
    display: none;
}

.field-patrol-timeline-dot {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
    z-index: 1;
}

.field-patrol-timeline-dot.is-pending {
    background: var(--muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent);
}

.field-patrol-timeline-body {
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--surface);
}

.field-patrol-timeline-photo {
    margin-top: 0.55rem;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.field-patrol-timeline-photo img {
    display: block;
    width: 100%;
    max-height: 11rem;
    object-fit: cover;
}

.field-request-type {
    display: grid;
    gap: 0.35rem;
}

.field-request-type-label {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.field-request-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
}

.field-request-switch-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.field-request-switch-btn.is-active {
    background: var(--brand);
    color: var(--on-brand, #fff);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 28%, transparent);
}

.field-request-switch-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
    outline-offset: 2px;
}

.field-request-panel .input-with-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius, 0.65rem);
    background: var(--surface);
    overflow: hidden;
}

.field-request-panel .input-with-prefix:focus-within {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
}

.field-request-panel .input-with-prefix .input-prefix {
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    background: var(--surface-2, #f3f4f6);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 650;
    border-right: 1px solid var(--line);
}

.field-request-panel .input-with-prefix input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.field-emp-filter {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.45rem 0.55rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.field-emp-filter.is-active {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    background: var(--brand);
    color: var(--on-brand, #fff);
}

.field-visitor-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.field-visitor-card {
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.field-visitor-card.is-openable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-visitor-card.is-openable:hover,
.field-visitor-card.is-openable:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: var(--shadow-sm), 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent);
    outline: none;
}

.field-visitor-main {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
}

.field-visitor-photo {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 0.7rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
    align-self: start;
    padding: 0;
}

.field-visitor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.field-visitor-photo svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-visitor-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.12rem;
}

.field-visitor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.field-visitor-copy strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.field-visitor-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
    color: var(--ink);
    font-size: 0.72rem;
    line-height: 1.25;
}

.field-visitor-times b {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 0.14rem;
    font-size: 0.66rem;
}

.field-visitor-line {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.field-visitor-dot {
    margin: 0 0.24rem;
    color: var(--muted);
}

.field-visitor-meet {
    color: var(--brand);
    font-weight: 700;
    font-size: 0.72rem;
}

.field-visitor-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand);
}

.field-visitor-status.is-pending {
    background: color-mix(in srgb, #2563eb 14%, transparent);
    color: #1d4ed8;
}

.field-visitor-status.is-ok {
    background: color-mix(in srgb, #159947 14%, transparent);
    color: #0f7a38;
}

.field-visitor-status.is-out {
    background: color-mix(in srgb, var(--muted) 18%, transparent);
    color: var(--muted);
}

.field-visitor-status.is-bad {
    background: color-mix(in srgb, #dc2626 14%, transparent);
    color: #b91c1c;
}

.field-visitor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.field-visitor-btn {
    appearance: none;
    border: 0;
    border-radius: 0.55rem;
    padding: 0.3rem 0.6rem;
    background: var(--brand);
    color: var(--brand-ink, #fff);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.15;
}

.field-visitor-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.field-visitor-btn.is-ghost {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line);
}

.field-visitor-btn.is-danger {
    background: #dc2626;
    color: #fff;
}

.field-visitor-detail {
    display: grid;
    gap: 0.95rem;
}

.field-visitor-detail-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: min(58vw, 18rem);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.field-employee-detail-photo {
    width: 7.5rem;
    max-height: 7.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.9rem;
}

.field-visitor-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.field-visitor-detail-photo-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.field-visitor-detail-photo-fallback svg {
    width: 4.5rem;
    height: 4.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-visitor-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.field-visitor-detail-title {
    min-width: 0;
}

.field-visitor-detail-title h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
    color: var(--ink);
}

.field-visitor-detail-title p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.field-visitor-detail-meta {
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.field-visitor-detail-meta > div {
    display: grid;
    gap: 0.12rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.field-visitor-detail-meta > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.field-visitor-detail-meta dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.field-visitor-detail-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.field-visitor-detail-custom h4 {
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    color: var(--ink);
}

.field-app .knock-offcanvas {
    --bs-offcanvas-width: min(100vw, 26.5rem);
}

/* Public SMS visitor approval (no login) — compact + floating actions */
.pva {
    --pva-ink: #102433;
    --pva-muted: #5b6b78;
    --pva-line: color-mix(in srgb, var(--brand, #1a4866) 14%, #dce4eb);
    --pva-paper: #ffffff;
    --pva-soft: color-mix(in srgb, var(--brand, #1a4866) 7%, #f5f8fb);
    --pva-float-h: 4.6rem;
    min-height: 100vh;
    padding: 0.65rem 0.7rem 1rem;
    color: var(--pva-ink);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand, #1a4866) 10%, #f3f6f9) 0%, #f7f9fb 38%, #eef2f6 100%);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.pva.has-float-actions {
    padding-bottom: calc(var(--pva-float-h) + 1rem + env(safe-area-inset-bottom, 0px));
}

.pva-shell {
    width: min(100%, 26rem);
    margin: 0 auto;
}

.pva-brand {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--pva-line);
    border-radius: 0.9rem;
    background: #fff;
}

.pva-brand-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.7rem;
    overflow: hidden;
    background: var(--pva-soft);
    border: 1px solid var(--pva-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pva-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.pva-brand-initial {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand, #1a4866);
}

.pva-brand-copy {
    min-width: 0;
}

.pva-brand-name {
    margin: 0;
    color: var(--brand, #1a4866);
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.pva-brand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    margin: 0.18rem 0 0;
    color: var(--pva-muted);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
}

.pva-dot {
    opacity: 0.7;
}

.pva-brand-by {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.18rem 0 0;
    color: var(--pva-muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.pva-system-mark {
    width: 0.85rem;
    height: 0.85rem;
    object-fit: contain;
    border-radius: 0.15rem;
}

.pva-card {
    padding: 0.7rem 0.7rem 0.8rem;
    border: 1px solid var(--pva-line);
    border-radius: 0.95rem;
    background: var(--pva-paper);
}

.pva-hero {
    display: grid;
    grid-template-columns: 5.4rem 1fr;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.pva-photo {
    position: relative;
    width: 5.4rem;
    height: 5.4rem;
    padding: 0;
    border: 0;
    border-radius: 0.95rem;
    overflow: hidden;
    background: var(--pva-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #1a4866) 16%, #fff);
    cursor: zoom-in;
}

.pva-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pva-photo-hint {
    position: absolute;
    right: 0.28rem;
    bottom: 0.28rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(10, 22, 34, 0.72);
    color: #fff;
    pointer-events: none;
}

.pva-photo-hint svg {
    width: 0.78rem;
    height: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.pva-photo.is-empty {
    display: grid;
    place-items: center;
    cursor: default;
    box-shadow: none;
    border: 1px dashed var(--pva-line);
}

.pva-photo.is-empty svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: color-mix(in srgb, var(--brand, #1a4866) 50%, #8aa0b2);
    stroke-width: 1.5;
}

.pva-hero-copy {
    display: grid;
    gap: 0.28rem;
    justify-items: start;
    min-width: 0;
}

.pva-visitor-name {
    margin: 0;
    color: var(--brand, #1a4866);
    font-size: 1.15rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pva-status {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pva-status.is-pending {
    background: #fff3cd;
    color: #7a5b00;
}

.pva-status.is-ok {
    background: #d8f5e5;
    color: #0f5132;
}

.pva-status.is-out {
    background: #e7eef5;
    color: #355066;
}

.pva-status.is-bad {
    background: #f8d7da;
    color: #842029;
}

.pva-decision {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
}

.pva-decision.is-ok { color: #0f5132; }
.pva-decision.is-bad { color: #842029; }

.pva-facts {
    display: grid;
    gap: 0;
    border: 1px solid var(--pva-line);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}

.pva-fact {
    display: grid;
    grid-template-columns: 5.4rem 1fr;
    gap: 0.45rem;
    align-items: baseline;
    padding: 0.42rem 0.6rem;
    border-top: 1px solid var(--pva-line);
}

.pva-fact:first-child {
    border-top: 0;
}

.pva-fact span {
    color: var(--pva-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pva-fact strong {
    color: var(--pva-ink);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pva-facts.is-compact .pva-fact {
    grid-template-columns: 1fr;
    gap: 0.1rem;
}

.pva-extra {
    margin-top: 0.55rem;
}

.pva-extra h3 {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pva-muted);
}

.pva-float {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    width: min(calc(100% - 1.2rem), 25rem);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.5rem;
    padding: 0.55rem;
    border: 1px solid var(--pva-line);
    border-radius: 1.05rem;
    background: color-mix(in srgb, #fff 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(16, 36, 54, 0.18);
}

.pva-float .pva-btn {
    width: 100%;
    margin: 0;
}

.pva-btn {
    appearance: none;
    border: 0;
    border-radius: 0.8rem;
    min-height: 2.65rem;
    padding: 0.55rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.pva-btn:hover:not(:disabled),
.pva-btn:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
    outline: none;
}

.pva-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.pva-btn.is-accept {
    background: #198754;
    color: #fff;
    box-shadow: 0 8px 18px rgba(25, 135, 84, 0.28);
}

.pva-btn.is-reject {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.24);
}

@media (max-width: 420px) {
    .pva-float {
        width: calc(100% - 1rem);
    }
}

@media (max-width: 720px) {
    .field-app {
        padding: 0;
        background: var(--paper);
    }

    .field-app-device {
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .field-app-bezel {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .field-app-island,
    .field-app-status,
    .field-app-home { display: none; }

    .field-app-screen { border-radius: 0; }

    .field-app-bar {
        padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
    }

    .field-home {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- App layout with sidebar ---------- */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--brand);
    color: var(--on-brand);
    border-right: 1px solid var(--brand-hover);
    z-index: 1040;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--on-brand) 12%, transparent);
    min-height: var(--topbar-h);
}

.sidebar-logo {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--on-brand) 15%, transparent);
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-logo.has-image {
    background: #fff;
    padding: 0.15rem;
}

.sidebar-logo img,
.topbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

.sidebar-brand strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sidebar-brand span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.1rem;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sidebar-label {
    margin: 0.55rem 0.55rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: color-mix(in srgb, var(--on-brand) 90%, transparent);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.sidebar-link:hover,
.sidebar-link.is-active {
    background: color-mix(in srgb, var(--on-brand) 14%, transparent);
    color: var(--on-brand);
}

.sidebar-link .nav-ico {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--on-brand) 12%, transparent);
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
}

.sidebar-group.has-active,
.sidebar-group.is-open {
    background: color-mix(in srgb, var(--on-brand) 6%, transparent);
}

.sidebar-group-toggle {
    position: relative;
}

.sidebar-group.has-active > .sidebar-group-toggle {
    background: transparent;
    color: var(--on-brand);
}

.sidebar-group-toggle .sidebar-group-label {
    flex: 1;
    min-width: 0;
}

.sidebar-caret {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid color-mix(in srgb, var(--on-brand) 70%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--on-brand) 70%, transparent);
    transform: rotate(-45deg);
    transition: transform var(--dur) var(--ease);
    margin-left: auto;
    margin-right: 0.15rem;
    flex-shrink: 0;
}

.sidebar-group.is-open .sidebar-caret {
    transform: rotate(45deg);
    margin-top: -0.1rem;
}

.sidebar-children {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0.35rem 0.45rem 1.15rem;
    padding: 0.2rem 0 0.15rem 0.75rem;
    border-left: 1px solid color-mix(in srgb, var(--on-brand) 16%, transparent);
}

.sidebar-sublink {
    gap: 0.55rem;
    min-height: 2.15rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--on-brand) 78%, transparent);
}

.sidebar-sublink .nav-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--on-brand) 35%, transparent);
    flex-shrink: 0;
}

.sidebar-sublink:hover {
    background: color-mix(in srgb, var(--on-brand) 10%, transparent);
    color: var(--on-brand);
}

.sidebar-sublink:hover .nav-dot {
    background: color-mix(in srgb, var(--on-brand) 70%, transparent);
}

.sidebar-sublink.is-active {
    background: color-mix(in srgb, var(--on-brand) 16%, transparent);
    color: var(--on-brand);
    font-weight: 600;
}

.sidebar-sublink.is-active .nav-dot {
    background: var(--on-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-brand) 18%, transparent);
}

.sidebar-footer {
    padding: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--on-brand) 12%, transparent);
}

.sidebar-footer .btn-knock {
    width: 100%;
    background: color-mix(in srgb, var(--on-brand) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
    color: var(--on-brand);
}

.sidebar-footer .btn-knock:hover {
    background: color-mix(in srgb, var(--on-brand) 20%, transparent);
    color: var(--on-brand);
}

.app-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: var(--topbar-h);
    padding: 0.65rem 1.15rem;
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.topbar-logo {
    display: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    place-items: center;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-logo.has-image {
    background: #fff;
    border: 1px solid var(--line);
    padding: 0.12rem;
}

.topbar div strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

.topbar div span {
    color: var(--muted);
    font-size: 0.8rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar .btn-top {
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.8rem;
    background: var(--surface);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.topbar .btn-top:hover { background: var(--surface-2); }

.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.topbar-user-btn:hover,
.topbar-user-btn[aria-expanded="true"] {
    background: var(--surface-2);
}

.topbar-user-avatar {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.topbar-user-meta {
    text-align: left;
    min-width: 0;
}

.topbar-user-meta strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.15;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-meta span {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-caret {
    width: 0.38rem;
    height: 0.38rem;
    margin: 0 0.1rem 0.15rem 0.15rem;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.topbar-user-menu {
    min-width: 12.5rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.topbar-user-menu .dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
}

.topbar-user-menu .dropdown-item:hover,
.topbar-user-menu .dropdown-item:focus {
    background: var(--brand-soft);
    color: var(--ink);
}

.topbar-theme-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.topbar-theme-btn:hover {
    background: var(--surface-2);
}

.topbar-theme-btn .theme-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.topbar-theme-btn .theme-icon-sun { display: none; }

html[data-theme="dark"] .topbar-theme-btn .theme-icon-moon { display: none; }
html[data-theme="dark"] .topbar-theme-btn .theme-icon-sun { display: block; }

.sidebar-toggle { display: none; }

.page {
    width: 100%;
    max-width: var(--page-max);
    margin: 0;
    padding: 1.15rem 1.25rem 2.25rem;
    flex: 1;
}

.page.page-full {
    max-width: none;
    width: 100%;
}

.page-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.15rem;
}

.knock-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000; /* above Bootstrap offcanvas/modal */
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: min(22rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.knock-toast-stack--field {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    left: 0.65rem;
    width: auto;
    z-index: 40;
}

.knock-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-md, 0 16px 36px rgba(15, 23, 42, 0.16));
    color: var(--ink);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.knock-toast.is-in {
    opacity: 1;
    transform: translateY(0);
}

.knock-toast.is-out {
    opacity: 0;
    transform: translateY(-0.35rem);
}

.knock-toast__bar {
    flex: 0 0 0.28rem;
    align-self: stretch;
    border-radius: 999px;
    background: var(--muted);
}

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

.knock-toast__title {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}

.knock-toast__message {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}

.knock-toast__close {
    flex: 0 0 auto;
    margin: -0.15rem -0.2rem 0 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.knock-toast__close:hover {
    color: var(--ink);
}

.knock-toast--success .knock-toast__bar { background: var(--ok, #15803d); }
.knock-toast--success .knock-toast__title { color: var(--ok, #15803d); }
.knock-toast--error .knock-toast__bar { background: var(--danger); }
.knock-toast--error .knock-toast__title { color: var(--danger); }
.knock-toast--warning .knock-toast__bar { background: #b45309; }
.knock-toast--warning .knock-toast__title { color: #b45309; }

.knock-confirm-modal .modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md, 0 18px 40px rgba(15, 23, 42, 0.16));
}

.knock-confirm-modal .modal-header,
.knock-confirm-modal .modal-footer {
    border-color: var(--line);
}

.knock-confirm-modal .modal-title {
    margin: 0;
    font-size: 1.05rem;
}

.knock-confirm-modal .knock-confirm-message {
    margin: 0;
    color: var(--ink);
    line-height: 1.45;
}

.knock-confirm-modal .modal-footer {
    gap: 0.5rem;
}

/* Field app ID card bottom sheet */
.field-id-card-sheet {
    position: absolute;
    inset: 0;
    z-index: 42;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.55rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    pointer-events: none;
}

.field-id-card-sheet[hidden] {
    display: none !important;
}

.field-id-card-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.18s linear;
    pointer-events: auto;
    cursor: pointer;
}

.field-id-card-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    max-height: min(86%, 36rem);
    margin: 0;
    padding: 0.55rem 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem 1.15rem 1rem 1rem;
    background: var(--surface, #fff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translateY(0.85rem);
    transition: opacity 0.16s linear, transform 0.16s linear;
    pointer-events: auto;
    overflow: auto;
}

.field-id-card-sheet.is-open {
    pointer-events: auto;
}

.field-id-card-sheet.is-open .field-id-card-sheet-backdrop {
    opacity: 1;
}

.field-id-card-sheet.is-open .field-id-card-sheet-panel {
    opacity: 1;
    transform: translateY(0);
}

.field-id-card-sheet-handle {
    width: 2.6rem;
    height: 0.28rem;
    margin: 0.15rem auto 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.field-id-card-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.field-id-card-sheet-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--ink);
}

.field-id-card-sheet-close {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2, #f3f4f6);
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.field-id-card-sheet-body .emp-id-card-inner {
    width: min(100%, 17rem);
    min-height: 0;
}

body.field-id-card-open .field-app-screen {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

/* Field app bottom-sheet confirm */
.field-confirm-sheet {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.7rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    pointer-events: none;
}

.field-confirm-sheet[hidden] {
    display: none !important;
}

.field-confirm-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    transition: opacity 0.18s linear;
    pointer-events: auto;
    cursor: pointer;
}

.field-confirm-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    margin: 0;
    padding: 0.55rem 0.95rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: var(--surface, #fff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.16s linear, transform 0.16s linear;
    pointer-events: auto;
}

.field-confirm-sheet.is-open {
    pointer-events: auto;
}

.field-confirm-sheet.is-open .field-confirm-sheet-backdrop {
    opacity: 1;
}

.field-confirm-sheet.is-open .field-confirm-sheet-panel {
    opacity: 1;
    transform: translateY(0);
}

.field-confirm-sheet-handle {
    width: 2.6rem;
    height: 0.28rem;
    margin: 0.15rem auto 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.field-confirm-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.field-confirm-sheet-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--ink);
}

.field-confirm-sheet-close {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2, #f3f4f6);
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.field-confirm-sheet-message {
    margin: 0 0 1rem;
    color: var(--ink-soft, var(--muted));
    font-size: 0.94rem;
    line-height: 1.45;
}

.field-confirm-sheet-message[hidden] {
    display: none !important;
}

.field-confirm-sheet-phone {
    display: grid;
    gap: 0.2rem;
    margin: 0 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--surface-2, #f8fafc);
}

.field-confirm-sheet-phone[hidden] {
    display: none !important;
}

.field-confirm-sheet-phone-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-confirm-sheet-phone-number {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.field-confirm-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.field-confirm-sheet-actions .field-visitor-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.72rem 0.75rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
}

body.field-confirm-open,
body.field-confirm-open .field-app-body,
body.field-confirm-open .field-app-screen {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

body.field-confirm-open .field-confirm-sheet,
body.field-confirm-open .field-confirm-sheet-panel {
    touch-action: manipulation;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    .field-confirm-sheet-backdrop,
    .field-confirm-sheet-panel {
        transition: none;
    }
}

.btn-knock.btn-danger-solid {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-knock.btn-danger-solid:hover {
    background: color-mix(in srgb, var(--danger) 86%, #000);
    border-color: color-mix(in srgb, var(--danger) 86%, #000);
    color: #fff;
}

.page-head .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-grid,
.menu-grid,
.action-list {
    display: grid;
    gap: 0.75rem;
}

.stat,
.menu-card,
.action,
.attendance {
    padding: 1rem 1.05rem;
}

.stat:hover,
.menu-card:hover,
.action:hover {
    border-color: var(--brand);
}

.stat > span:not(.stat-icon),
.action > span,
.menu-card > span {
    display: block;
    color: var(--muted);
    line-height: 1.45;
    font-size: 0.875rem;
}

.stat strong,
.attendance strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.65rem;
    font-weight: 650;
    color: var(--ink);
}

.stat-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    margin-bottom: 0.65rem;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.menu-card,
.action {
    cursor: pointer;
    text-align: left;
    width: 100%;
    appearance: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

a.menu-card,
a.action {
    display: block;
}

.menu-card strong,
.action strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.menu-card .meta,
.action .meta {
    display: inline-flex;
    margin-top: 0.65rem;
    color: var(--brand);
    font-size: 0.8rem;
    font-weight: 600;
}

.attendance { margin-bottom: 1rem; }
.section-block { margin-top: 1.5rem; }

.dash-section {
    margin-top: 1.15rem;
}

.dash-section:first-of-type {
    margin-top: 0;
}

.dash-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.dash-section-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--ink);
}

.dash-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}

.dash-pill-today {
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand);
}

.dash-pill-total {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink-soft);
}

.dash-section-today {
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
}

.dash-section-today .dash-section-head {
    margin-bottom: 0.7rem;
}

.dash-section-today .dash-kicker {
    color: var(--brand);
}

.stat-grid-today {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
}

.stat-grid-today .stat-today {
    flex: 1 1 0;
    min-width: 9.25rem;
    padding: 0.65rem 0.75rem 0.65rem 0.7rem;
}

.stat-today {
    position: relative;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    align-items: center;
}

.stat-today .stat-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.stat-today > span:not(.stat-icon) {
    grid-column: 2;
    font-size: 0.8rem;
}

.stat-today strong {
    grid-column: 2;
    margin-top: 0;
    color: var(--brand);
    font-size: 1.25rem;
}

.stat-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--dur, 0.18s) var(--ease, ease), background-color var(--dur, 0.18s) var(--ease, ease);
}

.stat-link:hover {
    border-color: var(--brand);
}

.dash-section-total .dash-section-head,
.dash-section-chart .dash-section-head {
    align-items: center;
}

.dash-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

.dash-period-field {
    margin: 0;
    min-width: 11rem;
}

.dash-filter-row .select2-container {
    min-width: 12rem;
    max-width: 16rem;
}

.dash-filter-row .select2-container--default .select2-selection--single {
    min-height: 2.35rem;
    border-color: var(--line-strong, var(--line));
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.dash-period-select {
    width: 100%;
    min-width: 12rem;
    max-width: 16rem;
    appearance: none;
    border: 1px solid var(--line-strong, var(--line));
    border-radius: var(--radius-sm);
    background:
        var(--surface)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.2 1.3 6 6.1l4.8-4.8 1.1 1.1L6 8.3.1 2.4z'/%3E%3C/svg%3E")
        no-repeat right 0.75rem center / 0.7rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    cursor: pointer;
}

.dash-period-select:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--brand);
}

.dash-section-total.is-loading,
.dash-master-panel.is-loading,
.dash-forms-panel.is-loading,
.dash-chart-panel.is-loading {
    pointer-events: none;
}

.dash-section-total.is-loading [data-total-value],
.dash-master-panel.is-loading [data-master-value],
.dash-forms-panel.is-loading [data-form-count] {
    color: transparent !important;
    position: relative;
    display: inline-block;
    min-width: 2.5rem;
}

.dash-section-total.is-loading [data-total-value]::after,
.dash-master-panel.is-loading [data-master-value]::after,
.dash-forms-panel.is-loading [data-form-count]::after {
    content: '';
    position: absolute;
    inset: 0.2rem 0;
    width: 3.25rem;
    max-width: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--line) 82%, #fff) 0%,
        color-mix(in srgb, var(--brand) 10%, #f3f4f6) 42%,
        color-mix(in srgb, var(--line) 82%, #fff) 84%
    );
    background-size: 220% 100%;
    animation: table-skel-shimmer 1.15s ease-in-out infinite;
}

.dash-forms-panel.is-loading .dash-forms-scroll,
.dash-master-panel.is-loading #dashMasterGrid {
    position: relative;
}

.dash-skel-list {
    display: grid;
    gap: 0.55rem;
}

.dash-skel-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2.75rem;
    gap: 0.65rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.55rem 0.65rem;
}

.dash-skel-row .table-skel.is-icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius-sm);
}

.dash-skel-row .dash-skel-text {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.dash-chart-panel.is-loading .dash-chart-wrap {
    position: relative;
    min-height: 14rem;
}

.dash-chart-panel.is-loading .dash-chart-wrap::after {
    content: '';
    position: absolute;
    inset: 1rem 0.5rem;
    border-radius: var(--radius-md);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--line) 82%, #fff) 0%,
        color-mix(in srgb, var(--brand) 10%, #f3f4f6) 42%,
        color-mix(in srgb, var(--line) 82%, #fff) 84%
    );
    background-size: 220% 100%;
    animation: table-skel-shimmer 1.15s ease-in-out infinite;
    opacity: 0.9;
}

.dash-chart-panel.is-loading #companyDashChart {
    opacity: 0.15;
}

.dash-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.dash-split.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.dash-split-col {
    min-width: 0;
}

.dash-forms-panel,
.dash-master-panel {
    height: 100%;
    padding: 1rem 1.05rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dash-forms-scroll {
    max-height: 16.5rem;
    overflow-y: auto;
    display: grid;
    gap: 0.45rem;
    padding-right: 0.15rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dash-forms-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dash-form-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 92%, var(--brand));
    text-decoration: none;
    color: inherit;
}

a.dash-form-row:hover {
    border-color: var(--brand);
}

.dash-form-row .stat-icon {
    margin-bottom: 0;
}

.dash-form-row strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--ink);
}

.dash-form-row div > span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.dash-form-row em {
    font-style: normal;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--brand);
    white-space: nowrap;
}

.dash-forms-empty {
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0.85rem 0.2rem;
}

.dash-section-total .stat-total {
    background: var(--surface);
    border-style: solid;
    border-color: var(--line);
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
}

.dash-section-total .stat-total .stat-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.dash-section-total .stat-total > span:not(.stat-icon) {
    grid-column: 2;
}

.dash-section-total .stat-total strong {
    grid-column: 2;
    margin-top: 0;
    font-size: 1.35rem;
}

.dash-master-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 16.5rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 94%, var(--brand));
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dash-master-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dash-master-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur, 0.18s) var(--ease, ease);
}

.dash-master-row:last-child {
    border-bottom: 0;
}

a.dash-master-row:hover {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.dash-master-row .stat-icon {
    margin-bottom: 0;
}

.dash-master-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.dash-master-row strong {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
    .dash-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dash-chart-panel {
    padding: 1rem 1.05rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dash-chart-wrap {
    position: relative;
    height: min(22rem, 55vh);
    margin-top: 0.35rem;
}

.dash-chart-empty {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.stat-today-alert {
    border-left-color: #c2410c;
}

.stat-today-alert strong {
    color: #c2410c;
}

.admin-expire-panel {
    margin-top: 0;
}

.admin-expire-days {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-expire-days.is-urgent {
    background: color-mix(in srgb, #c2410c 14%, transparent);
    color: #c2410c;
}

.dash-package-panel,
.dash-inactive-panel {
    height: 100%;
    padding: 1rem 1.05rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dash-package-panel.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.admin-package-body {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 0.85rem;
    align-items: stretch;
}

.admin-package-chart-wrap {
    position: relative;
    min-height: 14rem;
}

.admin-package-chart-wrap canvas {
    width: 100% !important;
    height: 14rem !important;
}

.admin-package-legend {
    max-height: 14rem;
    overflow-y: auto;
    display: grid;
    gap: 0.45rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-package-legend::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.admin-package-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 92%, var(--brand));
}

.admin-package-row .stat-icon {
    margin-bottom: 0;
}

.admin-package-row strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ink);
}

.admin-package-row div > span {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.76rem;
    color: var(--muted);
}

.admin-package-row em {
    font-style: normal;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--brand);
    white-space: nowrap;
}

.dash-inactive-list {
    max-height: 16.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 94%, var(--brand));
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dash-inactive-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dash-inactive-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur, 0.18s) var(--ease, ease);
}

.dash-inactive-row:last-child {
    border-bottom: 0;
}

a.dash-inactive-row:hover {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.dash-inactive-row .stat-icon {
    margin-bottom: 0;
}

.dash-inactive-row strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ink);
}

.dash-inactive-row div > span {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.76rem;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .admin-package-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.storage-report.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.storage-list-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.storage-list-summary.is-loading {
    position: relative;
}

.storage-list-summary.is-loading .storage-stat strong {
    color: transparent;
    position: relative;
}

.storage-list-summary.is-loading .storage-stat strong::after {
    content: '';
    position: absolute;
    inset: 0.15rem 0;
    width: 4.5rem;
    max-width: 70%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--line) 82%, #fff) 0%,
        color-mix(in srgb, var(--brand) 10%, #f3f4f6) 42%,
        color-mix(in srgb, var(--line) 82%, #fff) 84%
    );
    background-size: 220% 100%;
    animation: table-skel-shimmer 1.15s ease-in-out infinite;
}

.storage-list-refresh.is-spinning svg {
    animation: storage-refresh-spin 0.85s linear infinite;
}

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

/* Table skeleton loading */
@keyframes table-skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.table-skel-row td {
    vertical-align: middle;
}

.table-skel {
    display: block;
    height: 0.72rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--line) 82%, #fff) 0%,
        color-mix(in srgb, var(--brand) 10%, #f3f4f6) 42%,
        color-mix(in srgb, var(--line) 82%, #fff) 84%
    );
    background-size: 220% 100%;
    animation: table-skel-shimmer 1.15s ease-in-out infinite;
}

.table-skel + .table-skel {
    margin-top: 0.35rem;
}

.table-skel-lg { width: 72%; }
.table-skel-md { width: 58%; }
.table-skel-sm { width: 42%; }
.table-skel-xs { width: 34%; height: 0.55rem; }

.storage-list-summary .stat-icon {
    margin-bottom: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.storage-list-head {
    align-items: flex-start;
}

.storage-list-refresh {
    width: 2.35rem;
    height: 2.35rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.storage-own-sms-note,
.storage-company-link .storage-own-sms-note {
    display: block;
    margin-top: 0.15rem;
    color: #9a3412;
    font-size: 0.72rem;
    font-weight: 650;
    font-style: normal;
    line-height: 1.25;
}

.storage-own-sms-banner {
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid color-mix(in srgb, #c2410c 28%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #c2410c 8%, var(--surface));
    color: #9a3412;
    font-size: 0.82rem;
    line-height: 1.4;
}

.storage-company-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.storage-company-link strong {
    display: block;
    color: var(--brand);
}

.storage-company-link span {
    display: block;
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.storage-offcanvas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.storage-offcanvas-heading {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.35rem;
}

.storage-offcanvas-heading .offcanvas-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.storage-offcanvas-heading .storage-own-sms-note {
    margin-top: 0;
}

.storage-offcanvas-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
    flex: 0 0 auto;
    align-self: flex-start;
}

.storage-report-offcanvas {
    --bs-offcanvas-width: min(42rem, 100vw);
}

.storage-offcanvas-grid {
    margin-top: 0;
}

.storage-month-scroll {
    max-height: 18rem;
}

.storage-month-row em {
    min-width: 4.5rem;
    text-align: right;
}

.storage-offcanvas-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.storage-report-toolbar {
    align-items: center;
    justify-content: space-between;
}

.storage-report-toolbar .icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    margin-left: auto;
    flex-shrink: 0;
}

.storage-report-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.85rem 0 1rem;
}

.storage-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.storage-stat .stat-icon {
    margin-bottom: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.storage-stat .storage-stat-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.storage-stat strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.15rem;
    color: var(--ink);
}

.storage-stat em {
    display: block;
    margin-top: 0.1rem;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--muted);
}

.storage-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.storage-report-panel {
    padding: 1rem 1.05rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.storage-scroll {
    max-height: 16rem;
    overflow-y: auto;
    display: grid;
    gap: 0.45rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.storage-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.storage-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 92%, var(--brand));
}

.storage-row .stat-icon {
    margin-bottom: 0;
}

.storage-row strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ink);
}

.storage-row div > span {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.storage-row em {
    font-style: normal;
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
}

.storage-sms-panel {
    margin-top: 1rem;
}

.storage-sms-body,
.storage-trend-body {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
    gap: 0.85rem;
}

.storage-sms-chart-wrap {
    position: relative;
    min-height: 14rem;
}

.storage-sms-chart-wrap canvas {
    width: 100% !important;
    height: 14rem !important;
}

@media (max-width: 1100px) {
    .storage-report-summary,
    .storage-list-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storage-report-grid,
    .storage-sms-body,
    .storage-trend-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .storage-report-summary,
    .storage-list-summary,
    .storage-offcanvas-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.empty-panel {
    padding: 1.15rem;
    color: var(--muted);
}

/* ---------- Data panels / tables ---------- */
.panel.data-panel {
    padding: 0.85rem 1rem 1rem;
    width: 100%;
}

.data-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.toolbar-field {
    display: grid;
    gap: 0.3rem;
    min-width: 10rem;
    margin: 0;
    font-size: 0.85rem;
}

.toolbar-field.grow { flex: 1; min-width: 14rem; }

.table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, 0.2) transparent;
}

.table-wrap::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 26, 0.32);
    background-clip: content-box;
}

.data-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.35;
}

.data-table td.wrap {
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.data-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.data-table tbody tr:hover {
    background: var(--surface-2);
}

.data-table .muted,
.muted { color: var(--muted); font-size: 0.8rem; }

.table-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none !important;
}

button.table-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.company-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.company-thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface-2);
    object-fit: contain;
    flex: 0 0 auto;
}

.company-cell .company-initial.nav-ico {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 750;
    background: var(--brand-soft, #dbeafe);
    color: var(--brand);
}

.company-cell .table-link {
    min-width: 0;
    overflow-wrap: anywhere;
}

.table-link:hover,
.table-link:focus {
    text-decoration: none !important;
    color: var(--brand-hover);
}

.data-table th.col-actions,
.data-table td.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

#companyTable th.col-company,
#companyTable td.col-company {
    width: 26%;
    min-width: 10rem;
}

#companyTable th.col-username,
#companyTable td.col-username {
    width: 18%;
    max-width: 14rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

#companyTable th.col-contact,
#companyTable td.col-contact {
    width: 20%;
    min-width: 8rem;
}

#companyTable th.col-validity,
#companyTable td.col-validity,
#companyTable th.col-status,
#companyTable td.col-status {
    width: 1%;
    white-space: nowrap;
}

/* Compact company setup tables (Forms, etc.) */
.data-table.data-table-compact {
    min-width: 0;
    table-layout: fixed;
}

.data-table-compact th,
.data-table-compact td {
    padding: 0.4rem 0.5rem;
}

.data-table-compact .col-loc {
    width: 9.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table-compact .col-type {
    width: 7.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table-compact .col-name {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table-compact .col-num {
    width: 4.25rem;
    text-align: right;
    white-space: nowrap;
}

.data-table-compact th.col-num {
    text-align: right;
}

.data-table-compact th.col-actions,
.data-table-compact td.col-actions {
    width: 6.5rem;
    max-width: 6.5rem;
}

.actions-cell {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

.icon-btn.danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.data-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.data-footer-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.data-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.data-pagination .page-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.data-pagination .page-btn.is-active,
.data-pagination .page-btn:hover:not(:disabled) {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

.data-pagination .page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.badge-off {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge-pending {
    background: color-mix(in srgb, var(--brand-soft) 80%, #fff);
    color: var(--brand);
}

.badge-warn {
    background: color-mix(in srgb, #f59e0b 18%, #fff);
    color: #b45309;
}

.visitor-toolbar {
    align-items: end;
}

.visitor-inout {
    display: grid;
    gap: 0.2rem;
    font-size: 0.86rem;
}

.visitor-inout em {
    font-style: normal;
    color: var(--muted);
    margin-right: 0.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.visitor-detail {
    display: grid;
    gap: 1.1rem;
}

.visitor-detail-head {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
}

.visitor-detail-photo-wrap {
    width: 100%;
}

.visitor-detail-photo {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 18rem;
    border-radius: 0.85rem;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--brand-soft);
}

.visitor-detail-photo.emp-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--muted);
}

.visitor-detail-copy {
    min-width: 0;
}

.visitor-detail-name {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.visitor-detail-sub {
    margin: 0.2rem 0 0.45rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.custom-form-detail .att-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-form-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.custom-form-photos figure {
    margin: 0;
}

.custom-form-photos .material-photo-zoom {
    width: 5.5rem;
    height: 5.5rem;
}

.custom-form-photos .material-photo-zoom img,
.custom-form-photos img {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.custom-form-photos figcaption {
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

.company-shell {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.company-shell-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.company-shell-head .title-block h1 {
    font-size: 1.25rem;
}

.company-shell-head .title-block .lead {
    margin-top: 0.15rem;
    font-size: 0.85rem;
}

.tabs-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    overflow-x: auto;
}

.tab-btn {
    position: relative;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    padding: 0.8rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

a.tab-btn {
    display: inline-flex;
    align-items: center;
}

.tab-btn:hover {
    color: var(--brand);
    background: transparent;
}

.tab-btn.is-active {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand);
}

.tab-btn .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
}

.tab-btn.is-active .tab-count {
    background: var(--brand);
    color: var(--on-brand);
}

.tab-panel {
    display: none;
    padding: 1.15rem;
}

.tab-panel.is-active {
    display: block;
}

.tab-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
}

.tab-empty strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ink);
    font-size: 1rem;
}

.form-narrow {
    max-width: 36rem;
}

.tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 0.85rem;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.45rem 0.75rem;
    max-height: 22rem;
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.check-item input {
    width: auto;
    min-height: 0;
    margin-top: 0.15rem;
}

/* Company features: summary table + segmented form */
.feature-summary {
    display: grid;
    gap: 0.35rem;
}

.feature-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.feature-chip strong {
    min-width: 1.1rem;
    text-align: center;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.72rem;
}

.feature-summary-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.feature-total {
    display: inline-flex;
    min-width: 2rem;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-weight: 650;
    font-size: 0.85rem;
}

.feature-form .feature-selected-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.feature-form .feature-selected-bar strong {
    color: var(--brand);
    font-size: 0.95rem;
}

.feature-groups {
    display: grid;
    gap: 0.85rem;
}

.feature-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.feature-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.feature-group-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--ink);
}

.feature-group-head p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.feature-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.feature-select-all input {
    width: auto;
    min-height: 0;
}

.feature-item-list {
    display: grid;
    gap: 0;
}

.feature-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    font-weight: 500;
}

.feature-item:first-child {
    border-top: 0;
}

.feature-item input {
    width: auto;
    min-height: 0;
    margin-top: 0.2rem;
}

.feature-item-body {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.feature-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.feature-item-top strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.feature-role {
    display: inline-flex;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.feature-item-help {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

#featureFormOffcanvas .offcanvas-body,
#roleFormOffcanvas .offcanvas-body {
    overflow-y: auto;
}

#roleFormOffcanvas .feature-item[hidden] {
    display: none;
}

#roleFormOffcanvas .feature-group[hidden] {
    display: none;
}

.permission-check-list {
    display: grid;
    gap: 0.35rem;
    max-height: 18rem;
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.permission-check-list .check-item[hidden] {
    display: none;
}

.permission-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.permission-preview .feature-chip {
    font-weight: 500;
}

@media (min-width: 900px) {
    .feature-item-list {
        grid-template-columns: 1fr 1fr;
    }

    .feature-item:nth-child(2) {
        border-top: 0;
    }

    .feature-item:nth-child(2n + 1) {
        border-right: 1px solid var(--line);
    }
}

/* Mobile sidebar as offcanvas-style drawer */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1035;
}

.sidebar-backdrop.is-open { display: block; }

/* ---------- Right offcanvas (forms / filters) ---------- */
.offcanvas.offcanvas-end.knock-offcanvas {
    --bs-offcanvas-width: var(--offcanvas-w);
    width: var(--offcanvas-w);
    max-width: 70vw;
    border-left: 1px solid var(--line);
    background: var(--surface);
}

.offcanvas.offcanvas-end.knock-offcanvas.knock-offcanvas-md {
    --bs-offcanvas-width: var(--offcanvas-w-md);
    width: var(--offcanvas-w-md);
    max-width: 100vw;
}

.offcanvas.offcanvas-end.knock-offcanvas.knock-offcanvas-sm {
    --bs-offcanvas-width: var(--offcanvas-w-sm);
    width: var(--offcanvas-w-sm);
    max-width: 100vw;
}

.knock-offcanvas .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.knock-offcanvas .offcanvas-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.knock-offcanvas .offcanvas-body {
    padding: 1.15rem 1.25rem 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
}

.form-grid.form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid > label {
    align-content: start;
}

.form-grid > label > input:not([type="checkbox"]):not([type="radio"]),
.form-grid > label > select,
.form-grid > label > textarea {
    height: var(--control-h);
    min-height: var(--control-h);
    max-height: var(--control-h);
    align-self: start;
}

.form-grid > label > textarea {
    height: auto;
    max-height: none;
    min-height: calc(var(--control-h) * 2.2);
}

.form-grid .input-with-prefix {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    min-height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.form-grid .input-with-prefix:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.form-grid .input-with-prefix .input-prefix {
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-grid .input-with-prefix input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: var(--control-h);
    height: var(--control-h);
    max-height: var(--control-h);
}

.form-grid .input-with-prefix input:focus {
    border: 0;
    box-shadow: none;
}

.company-logo-field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.company-logo-field .field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.company-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.company-logo-preview {
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.company-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.company-logo-empty {
    min-height: 5.5rem;
    min-width: 5.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.75rem;
}

.company-logo-pick {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.company-logo-pick input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.form-grid > .span-2 {
    grid-column: span 2;
}

.form-grid > .span-3,
.form-grid > h3 {
    grid-column: 1 / -1;
}

.form-grid .stack {
    margin-top: 0;
}

.knock-offcanvas-sm .form-grid,
.knock-offcanvas-md .form-grid,
.offcanvas .form-grid.form-grid-3 {
    grid-template-columns: 1fr;
}

.knock-offcanvas-sm .form-grid > .span-2,
.knock-offcanvas-md .form-grid > .span-2,
.offcanvas .form-grid.form-grid-3 > .span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .form-grid.form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .offcanvas.offcanvas-end.knock-offcanvas {
        --bs-offcanvas-width: 100vw;
        width: 100vw;
        max-width: 100vw;
    }

    .form-grid,
    .form-grid.form-grid-3 {
        grid-template-columns: 1fr;
    }

    .form-grid > .span-2 {
        grid-column: 1 / -1;
    }
}

.offcanvas-kicker {
    margin: 0 0 0.25rem;
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.offcanvas-lead {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.9rem;
}

.offcanvas-lead:empty,
.field-hint:empty,
[data-oc-meta]:empty { display: none; }

.offcanvas-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offcanvas-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: 0.875rem;
}

.offcanvas-list span { color: var(--muted); }
.offcanvas-list strong { color: var(--ink); font-weight: 600; }

.offcanvas-footer-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

/* ---------- Select2 ---------- */
.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single {
    min-height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 0.25rem 0.15rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 2.15rem;
    padding-left: 0.7rem;
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.55rem;
    right: 0.4rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.select2-dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background: var(--surface);
    color: var(--ink);
}

.field-app-screen .select2-container {
    z-index: 55;
}

.field-app-screen .select2-container--open {
    z-index: 70;
}

.field-app-screen .select2-dropdown {
    z-index: 70;
    max-width: calc(100% - 1.2rem);
}

.field-app-screen .select2-results > .select2-results__options {
    max-height: min(42vh, 14rem);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.6rem;
    background: var(--surface);
    color: var(--ink);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--brand);
    color: var(--on-brand);
}

.select2-results__option { padding: 0.55rem 0.75rem; }

@media (min-width: 720px) {
    .stat-grid:not(.stat-grid-today) { grid-template-columns: repeat(3, 1fr); }
    .menu-grid,
    .action-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .stat-grid:not(.stat-grid-today) { grid-template-columns: repeat(4, 1fr); }
    .menu-grid,
    .action-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
    .app-layout { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-w);
        transform: translateX(-105%);
        transition: transform var(--dur) var(--ease);
        box-shadow: var(--shadow-md);
    }

    .sidebar.is-open { transform: translateX(0); }

    .sidebar-toggle,
    .topbar-logo { display: grid; }

    .topbar-user-meta { display: none; }

    .topbar-user-btn { padding-right: 0.35rem; }

    .auth-screen-split {
        grid-template-columns: 1fr;
    }

    .auth-intro {
        min-height: auto;
        padding: 1.35rem 1.25rem 1.5rem;
        gap: 1.1rem;
    }

    .auth-intro-copy h2 {
        max-width: none;
        font-size: 1.35rem;
    }

    .auth-intro-points {
        grid-template-columns: 1fr;
        margin-top: 0.85rem;
    }

    .auth-intro::after {
        display: none;
    }

    .auth-panel {
        padding: 1.25rem 1rem 1.5rem;
        align-content: start;
        padding-top: 1.5rem;
        min-height: auto;
    }

    .auth-card-logo {
        max-height: 4rem;
        max-width: 12rem;
    }
}

/* ---------- Master setting ---------- */
.ms-shell {
    display: grid;
    gap: 1rem;
}

.ms-layout {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ms-nav {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--topbar-h) + 0.75rem);
}

.ms-nav-btn {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-md);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.ms-nav-btn:hover {
    background: var(--surface-2);
}

.ms-nav-btn.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.ms-panels {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem 1.35rem;
    min-width: 0;
}

.ms-panel h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.ms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ms-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.85rem;
}

.ms-panel-head h2 {
    margin: 0;
}

.ms-editor {
    min-height: 16rem;
    background: var(--surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.ms-editor .ql-editor {
    min-height: 14rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

#pageFormOffcanvas .ql-toolbar.ql-snow {
    border-color: var(--line-strong);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--surface-2);
}

#pageFormOffcanvas .ql-container.ql-snow {
    border-color: var(--line-strong);
}

.pages-table {
    width: 100%;
    table-layout: fixed;
}

.pages-table th,
.pages-table td {
    vertical-align: middle;
}

.pages-table .col-page {
    width: 10.5rem;
    white-space: nowrap;
}

.pages-table .col-slug {
    width: 11.5rem;
    white-space: nowrap;
}

.pages-table .col-preview {
    width: auto;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pages-table .col-status {
    width: 5.5rem;
    white-space: nowrap;
    text-align: left;
}

.pages-table th.col-actions,
.pages-table td.col-actions {
    width: 6.5rem;
    max-width: 6.5rem;
    text-align: center;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.ms-slug {
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.color-picker-row input[type="color"] {
    width: 2.75rem;
    height: var(--control-h);
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
}

.color-picker-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.color-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#appColorTable .col-swatch {
    width: 3.25rem;
}

.check-inline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.check-inline input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--brand);
}

@media (max-width: 900px) {
    .ms-layout {
        grid-template-columns: 1fr;
    }

    .ms-nav {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Custom form builder ---------- */
.fb-shell {
    display: grid;
    gap: 1rem;
}

.fb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.fb-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.fb-meta-item {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.fb-meta-label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fb-meta-item strong {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.fb-workspace {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

.fb-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    min-height: 28rem;
    min-width: 0;
}

.fb-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.fb-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fb-panel-head p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.fb-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.fb-count {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.fb-preview-card {
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
    background: linear-gradient(180deg, var(--surface-2), var(--surface) 8rem);
    min-height: 100%;
}

.fb-preview-empty,
.fb-element-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.fb-preview-field {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    animation: fb-fade-in var(--dur) var(--ease);
}

.fb-preview-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.fb-req {
    color: var(--danger);
    margin-left: 0.15rem;
}

.fb-preview-field input,
.fb-preview-field textarea,
.fb-preview-field select {
    width: 100%;
    min-height: 2.4rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 0.45rem 0.65rem;
    color: var(--muted);
}

.fb-preview-camera,
.fb-preview-file,
.fb-preview-table {
    display: grid;
    place-items: center;
    min-height: 3.2rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 600;
}

.fb-builder-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
}

.fb-palette {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

.fb-palette-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.fb-palette-btn:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.fb-palette-btn.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.fb-palette-icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    position: relative;
    flex: 0 0 auto;
}

.fb-palette-icon::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border: 1.5px solid var(--brand);
    border-radius: 0.2rem;
    opacity: 0.85;
}

.fb-palette-icon[data-icon="2"]::before { border-radius: 50%; }
.fb-palette-icon[data-icon="4"]::before { border-bottom-width: 4px; }
.fb-palette-icon[data-icon="5"]::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 0.55rem;
    border: 4px solid transparent;
    border-top-color: var(--brand);
}
.fb-palette-icon[data-icon="6"]::before {
    border-radius: 50%;
    inset: 0.3rem;
}
.fb-palette-icon[data-icon="12"]::before {
    background:
        linear-gradient(var(--brand), var(--brand)) center/100% 1px no-repeat,
        linear-gradient(var(--brand), var(--brand)) center/1px 100% no-repeat;
    border: none;
}
.fb-palette-icon[data-icon="14"]::before {
    border-style: dashed;
}

.fb-config {
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    display: grid;
    gap: 0.7rem;
    order: -1;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    animation: fb-fade-in var(--dur) var(--ease);
}

.fb-config .fb-field input,
.fb-config .fb-field textarea,
.fb-config .fb-field select {
    background: var(--surface);
}

.fb-config-head,
.fb-config-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fb-field {
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.fb-field input,
.fb-field textarea,
.fb-field select {
    width: 100%;
    min-height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 0.55rem 0.7rem;
    font-weight: 400;
    color: var(--ink);
}

.fb-field textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.fb-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
    font-weight: 500;
}

.fb-element-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.fb-element-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.fb-element-item.is-dragging {
    opacity: 0.55;
}

.fb-element-item.is-over {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.fb-drag {
    width: 1.75rem;
    height: 2.2rem;
    border: 0;
    background: transparent;
    display: grid;
    gap: 0.18rem;
    place-content: center;
    cursor: grab;
}

.fb-drag span {
    width: 0.9rem;
    height: 2px;
    background: var(--line-strong);
    border-radius: 2px;
}

.fb-element-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.25rem 0.15rem;
    cursor: pointer;
    color: inherit;
}

.fb-element-main strong {
    font-size: 0.9rem;
}

.fb-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 600;
}

.fb-badge {
    display: inline-flex;
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 0.68rem;
    font-weight: 600;
}

@keyframes fb-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1200px) {
    .fb-workspace {
        grid-template-columns: 1fr;
    }

    .fb-panel {
        min-height: 0;
    }

    .fb-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .fb-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fb-meta,
    .fb-palette {
        grid-template-columns: 1fr;
    }
}

/* ---------- Company business profile ---------- */
.biz-system-logo {
    display: block;
    max-height: 2.75rem;
    max-width: min(11rem, 42vw);
    width: auto;
    height: auto;
    object-fit: contain;
}

.biz-brand-text { font-size: 1.25rem; }

/* Unlock (no popup) — same shell as portal */
.biz-unlock {
    min-height: 100vh;
    background: var(--paper);
}

.biz-unlock-secure {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.biz-unlock-body {
    padding: 1.5rem 0 2.5rem;
}

.biz-unlock-card {
    width: min(100%, 28rem);
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem 1.4rem 1.6rem;
}

.biz-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}

.biz-step {
    text-align: center;
    padding: 0.55rem 0.4rem;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.biz-step.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.biz-unlock-card h2 {
    margin-bottom: 0.35rem;
    font-size: 1.25rem;
}

.biz-unlock-form {
    margin-top: 1.15rem;
    display: grid;
    gap: 0.9rem;
}

.biz-unlock-form label {
    display: grid;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.biz-input-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.biz-input-prefix {
    display: grid;
    place-items: center;
    padding: 0 0.8rem;
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 700;
    border-right: 1px solid var(--line);
}

.biz-input-row input {
    height: var(--control-h);
    border: 0;
    width: 100%;
    padding: 0 0.85rem;
    background: transparent;
}

.biz-unlock-form > .biz-step-pane input[type='text'],
.biz-unlock-form > .biz-step-pane > label > input {
    height: var(--control-h);
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 0 0.85rem;
}

.biz-unlock-form input:focus {
    outline: none;
}

.biz-input-row:focus-within {
    box-shadow: var(--focus-ring);
    border-color: var(--brand);
}

.biz-step-pane {
    display: grid;
    gap: 1rem;
}

.biz-unlock-btn,
.biz-unlock-actions { width: 100%; }

.biz-unlock-actions {
    display: grid;
    gap: 0.55rem;
}

.biz-step-pane[hidden] { display: none !important; }

.biz-unlock .biz-portal-hero h1 {
    max-width: 28ch;
}

/* Unlocked portal — full width */
.biz-portal {
    min-height: 100vh;
    background: var(--paper);
}

.biz-portal-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}

.biz-shell {
    width: min(100% - 2.5rem, 72rem);
    margin-inline: auto;
}

.biz-portal-body {
    padding: 1.15rem 0 2.5rem;
}

.biz-portal-top-inner {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.biz-portal-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.biz-logout-btn,
a.biz-logout-btn {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.biz-logout-btn:hover,
a.biz-logout-btn:hover {
    background: #912018;
    border-color: #912018;
    color: #fff;
}

.biz-portal-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--line-strong);
}

.biz-portal-handle {
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biz-portal-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.biz-portal-hero {
    background: var(--brand);
    color: var(--on-brand);
    padding: 1.75rem 0;
}

.biz-portal-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.biz-portal-hero-main {
    display: flex;
    gap: 1.15rem;
    align-items: center;
    min-width: 0;
}

.biz-portal-logo {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--on-brand) 25%, transparent);
    flex: 0 0 auto;
}

.biz-portal-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.biz-portal-hero .eyebrow { color: color-mix(in srgb, var(--on-brand) 75%, transparent); }
.biz-portal-hero h1 {
    color: var(--on-brand);
    font-size: clamp(1.7rem, 2.8vw, 2.35rem);
    line-height: 1.15;
}

.biz-portal-lead {
    margin: 0.55rem 0 0;
    color: color-mix(in srgb, var(--on-brand) 84%, transparent);
    max-width: 48rem;
    line-height: 1.5;
}

.biz-portal-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.biz-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--on-brand) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-brand) 28%, transparent);
    color: var(--on-brand);
}

.biz-pill.is-ok {
    background: var(--ok-soft);
    border-color: transparent;
    color: var(--ok);
}

.biz-pill.is-off {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.biz-pill.is-soft {
    background: color-mix(in srgb, var(--on-brand) 10%, transparent);
}

.biz-portal-nav {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.4rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 3.65rem;
    z-index: 25;
}

.biz-tab-btn {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.biz-tab-btn.is-active,
.biz-tab-btn:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.biz-tab-panels {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.25rem 1.5rem;
    min-height: 24rem;
}

.biz-tab-panel[hidden] { display: none !important; }
.biz-tab-panel.is-active { display: block; }

.biz-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.biz-section-head h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.biz-overview {
    display: grid;
    gap: 1.15rem;
}

.biz-overview-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    padding: 1.05rem 1.15rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, #fff), #fff 58%);
}

.biz-overview-hero-main h2 {
    margin: 0.1rem 0 0;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
}

.biz-overview-handle {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.biz-overview-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.biz-overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.biz-metric {
    display: grid;
    gap: 0.18rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.75rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2, #f8fafc) 70%, #fff);
}

.biz-metric span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.biz-metric strong {
    font-size: 1.2rem;
    line-height: 1.2;
}

.biz-metric em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--muted);
}

.biz-overview-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.biz-overview-panel {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--surface);
    overflow: hidden;
}

.biz-overview-panel > header {
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper, #f8fafc) 80%, #fff);
}

.biz-overview-panel > header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.biz-overview-panel > header p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.biz-overview-list {
    margin: 0;
    padding: 0.35rem 0;
}

.biz-overview-list > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.biz-overview-list > div:first-child {
    border-top: 0;
}

.biz-overview-list dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.biz-overview-list dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.biz-overview-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
}

.biz-portal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
    padding: 0.95rem 0.15rem 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.biz-portal-footer-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.biz-portal-footer-logo {
    display: block;
    max-height: 1.7rem;
    max-width: 8rem;
    width: auto;
    object-fit: contain;
}

.biz-portal-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    font-size: 0.8rem;
}

.biz-portal-footer-links a {
    color: var(--ink-soft, #475569);
    text-decoration: none;
    font-weight: 600;
}

.biz-portal-footer-links a:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.biz-portal-footer-links span {
    color: #94a3b8;
}

.biz-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.biz-fact-wide {
    grid-column: span 2;
}

.biz-fact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem;
    display: grid;
    gap: 0.35rem;
    box-shadow: var(--shadow-sm);
}

.biz-fact span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.biz-fact strong {
    font-size: 1.05rem;
    line-height: 1.35;
    word-break: break-word;
}

.biz-fact em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.875rem;
}

.biz-split {
    display: grid;
    grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
    gap: 0;
    min-height: 28rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
}

.biz-split-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border-right: 1px solid var(--line);
    background: var(--surface);
    max-height: 32rem;
    overflow: auto;
}

.biz-loc-item {
    display: grid;
    gap: 0.2rem;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    padding: 0.8rem 0.85rem;
    cursor: pointer;
    color: var(--ink);
}

.biz-loc-item strong {
    font-size: 0.95rem;
    line-height: 1.3;
}

.biz-loc-item span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.biz-loc-item:hover {
    background: var(--surface-2);
}

.biz-loc-item.is-active {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand);
}

.biz-loc-item.is-active span { color: var(--brand); }

.biz-split-detail {
    min-width: 0;
    background: var(--paper);
}

.biz-loc-detail[hidden] { display: none !important; }

.biz-loc-detail-head {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.biz-loc-detail-head h3 { font-size: 1.1rem; }
.biz-loc-detail-head p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.biz-loc-detail-scroll {
    max-height: 26rem;
    overflow: auto;
    padding: 1rem 1.15rem 1.25rem;
}

.biz-feature-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.biz-feature-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.biz-feature-group-head {
    padding: 0.8rem 0.95rem;
    background: var(--brand-soft);
    display: grid;
    gap: 0.2rem;
}

.biz-feature-group-head strong { color: var(--brand); }
.biz-feature-group-head span {
    color: var(--muted);
    font-size: 0.8rem;
}

.biz-role-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0;
}

.biz-role-col {
    padding: 0.85rem 0.95rem;
    border-top: 1px solid var(--line);
}

.biz-role-col + .biz-role-col { border-left: 1px solid var(--line); }

.biz-role-label {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand);
}

.biz-role-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.biz-role-col li {
    position: relative;
    padding-left: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

.biz-role-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--ok);
}

.biz-access-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.biz-access-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    min-width: min(100%, 16rem);
}

.biz-access-filter .select2-container {
    min-width: 14rem;
    width: 14rem !important;
}

.biz-access-filter .select2-container--default .select2-selection--single {
    height: 2.4rem;
    border-color: var(--line-strong);
}

.biz-access-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.3rem;
    padding-left: 0.7rem;
    font-weight: 600;
    color: var(--ink);
}

.biz-access-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.3rem;
}

.biz-subtabs {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.3rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.biz-subtab {
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.9rem;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.biz-subtab em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
}

.biz-subtab.is-active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.biz-subtab.is-active em {
    background: var(--brand-soft);
    color: var(--brand);
}

.biz-access-pane[hidden] { display: none !important; }

.biz-access-pane .table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: auto;
    background: var(--paper);
}

.biz-access-table {
    margin: 0;
    width: 100%;
    table-layout: fixed;
}

.biz-access-table .col-name { width: 28%; }
.biz-access-table .col-loc { width: 28%; }
.biz-access-table .col-contact { width: 34%; }
.biz-access-table .col-act { width: 10%; }

.biz-access-table th,
.biz-access-table td {
    vertical-align: middle;
}

.biz-access-table td.nowrap {
    white-space: nowrap;
}

.biz-access-table th.col-actions,
.biz-access-table td.col-actions {
    width: 4.5rem;
    max-width: 4.5rem;
    text-align: center;
}

.biz-access-table tr.is-filtered-out {
    display: none;
}

.biz-faq { display: grid; gap: 0.65rem; }

.biz-faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    overflow: hidden;
}

.biz-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.1rem;
    font-weight: 700;
}

.biz-faq-item summary::-webkit-details-marker { display: none; }

.biz-faq-body {
    padding: 0 1.1rem 1.1rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.biz-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.biz-support-card {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.biz-support-card span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.biz-support-card strong {
    color: var(--brand);
    word-break: break-word;
}

.biz-cta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.biz-cta {
    display: grid;
    gap: 0.3rem;
    padding: 1.2rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--brand);
    color: var(--on-brand);
    min-height: 5.5rem;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.biz-cta:hover {
    background: var(--brand-hover);
    transform: translateY(-1px);
}

.biz-cta span {
    color: color-mix(in srgb, var(--on-brand) 82%, transparent);
    font-size: 0.875rem;
}

@media (max-width: 1100px) {
    .biz-fact-grid,
    .biz-support-grid,
    .biz-cta-row,
    .biz-feature-groups,
    .biz-overview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .biz-portal-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .biz-portal-status { justify-content: flex-start; }
    .biz-role-col + .biz-role-col { border-left: 0; }
    .biz-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .biz-split-list {
        max-height: 12rem;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .biz-loc-detail-scroll { max-height: 22rem; }
    .biz-overview-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .biz-shell {
        width: min(100% - 1.25rem, 72rem);
    }

    .biz-fact-grid,
    .biz-support-grid,
    .biz-cta-row,
    .biz-feature-groups,
    .biz-overview-metrics {
        grid-template-columns: 1fr;
    }

    .biz-fact-wide { grid-column: auto; }

    .biz-portal-hero-main { flex-direction: column; align-items: flex-start; }
    .biz-section-head { flex-direction: column; align-items: flex-start; }
    .biz-tab-panels { padding: 1rem; }
    .biz-overview-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .biz-portal-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Employee list + ID card ---------- */
.emp-section .tabs-bar {
    margin: 0 0 0.85rem;
    padding: 0 0.25rem;
    background: transparent;
}

.emp-person {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.emp-person-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.emp-person-text small {
    font-size: 0.78rem;
}

.emp-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--brand-soft);
    border: 1px solid var(--line);
}

.emp-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}

.emp-scan-photo {
    border-radius: 0.45rem;
}

.data-table .col-check {
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.data-table .col-check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

.attendance-toolbar {
    align-items: end;
}

.att-detail {
    display: grid;
    gap: 1.1rem;
}

.att-detail-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.att-detail-avatar {
    width: 3rem;
    height: 3rem;
}

.att-detail-name {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.att-detail-code {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.att-detail-meta {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.att-detail-meta > div {
    display: grid;
    gap: 0.15rem;
}

.att-detail-meta dt {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.att-detail-meta dd {
    margin: 0;
    font-size: 0.95rem;
}

.att-detail-block {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.att-detail-block h4 {
    margin: 0;
    font-size: 0.92rem;
}

.att-detail-time {
    margin: 0;
    font-size: 0.95rem;
}

.att-detail-photo {
    margin: 0.25rem 0 0;
    width: 7.5rem;
}

.att-detail-photo img {
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--brand-soft);
}

.att-detail-photo figcaption {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: var(--muted);
}

.material-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.material-photos figure {
    margin: 0;
}

.material-photo-zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: var(--radius);
    overflow: hidden;
}

.material-photos img,
.material-photo-zoom img {
    display: block;
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--brand-soft);
}

.material-photo-zoom-hint {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    pointer-events: none;
}

.material-photo-zoom-hint svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.material-photo-zoom:hover img,
.material-photo-zoom:focus-visible img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
}

.material-photos figcaption {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.knock-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.knock-lightbox[hidden] {
    display: none !important;
}

.knock-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.knock-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.78);
    cursor: pointer;
}

.knock-lightbox__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 56rem);
    max-height: min(90vh, 48rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
}

.knock-lightbox__figure {
    margin: 0;
    min-width: 0;
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.knock-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: min(78vh, 40rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
    background: #0f172a;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.knock-lightbox__caption {
    margin: 0;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
}

.knock-lightbox__close,
.knock-lightbox__nav {
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.knock-lightbox__close {
    position: absolute;
    top: -0.2rem;
    right: 0.1rem;
    z-index: 2;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    font-size: 1.4rem;
    line-height: 1;
}

.knock-lightbox__nav {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
}

.knock-lightbox__nav svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.knock-lightbox__close:hover,
.knock-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

body.knock-lightbox-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .knock-lightbox__panel {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .knock-lightbox__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .knock-lightbox__nav.is-prev { left: 0.2rem; }
    .knock-lightbox__nav.is-next { right: 0.2rem; }
}

.material-toolbar {
    align-items: end;
}

.knock-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.knock-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--control-h);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.knock-tags:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.knock-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.4rem 0.12rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-soft) 80%, #fff);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 600;
}

.knock-tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.knock-tags-input {
    flex: 1 1 8rem;
    width: auto !important;
    min-width: 7rem;
    min-height: 1.7rem !important;
    height: 1.7rem;
    padding: 0.15rem 0.25rem !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.form-grid > label > .knock-tags {
    height: auto;
    max-height: none;
    min-height: var(--control-h);
}

.knock-slot-field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.knock-slot-field .field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.knock-slot-picker {
    display: grid;
    gap: 0.55rem;
}

.knock-slot-chips:empty {
    display: none;
}

.knock-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.knock-slot-time {
    flex: 1 1 8rem;
    min-width: 0;
}

.knock-slot-add {
    flex: 0 0 auto;
}

.emp-id-card {
    display: flex;
    justify-content: center;
}

.emp-id-card-inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: min(100%, 19rem);
    min-height: 0;
    padding: 0.9rem 0.9rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--brand-soft) 55%, #fff) 0%,
        #fff 46%,
        color-mix(in srgb, var(--brand-soft) 28%, #fff) 100%
    );
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.emp-id-card-inner::before,
.emp-id-card-inner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.emp-id-card-inner::before {
    width: 16rem;
    height: 16rem;
    top: -6.5rem;
    right: -6rem;
    border: 1.5px solid color-mix(in srgb, var(--brand) 28%, transparent);
    box-shadow:
        inset 0 0 0 14px color-mix(in srgb, var(--brand) 7%, transparent),
        0 0 0 18px color-mix(in srgb, var(--brand) 8%, transparent),
        0 0 0 34px color-mix(in srgb, var(--brand) 5%, transparent);
    background: radial-gradient(
        circle at 42% 42%,
        color-mix(in srgb, var(--brand) 14%, transparent),
        transparent 62%
    );
}

.emp-id-card-inner::after {
    width: 12.5rem;
    height: 12.5rem;
    left: -5.2rem;
    bottom: -5rem;
    border: 1.5px solid color-mix(in srgb, var(--brand) 22%, transparent);
    box-shadow:
        inset 0 0 0 12px color-mix(in srgb, var(--brand) 6%, transparent),
        0 0 0 16px color-mix(in srgb, var(--brand) 7%, transparent),
        0 0 0 30px color-mix(in srgb, var(--brand) 4%, transparent);
    background: radial-gradient(
        circle at 55% 45%,
        color-mix(in srgb, var(--brand) 12%, transparent),
        transparent 65%
    );
}

.emp-id-card-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.emp-id-card-company {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
    color: #0f172a;
}

.emp-id-card-logo {
    flex: 0 0 auto;
    width: 3.4rem;
    max-width: 38%;
    height: auto;
    max-height: 2.5rem;
    object-fit: contain;
}

.emp-id-card-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.7rem;
    margin: 0.85rem 0 0.75rem;
}

.emp-id-card-photo-wrap {
    display: grid;
    place-items: center;
    min-width: 0;
}

.emp-id-card-photo,
.emp-id-card-qr {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    border: 0;
    border-radius: 0.45rem;
    background: #fff;
}

.emp-id-card-photo {
    object-fit: cover;
    box-shadow: none;
}

.emp-id-card-photo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.emp-id-card-qr {
    margin: 0;
    object-fit: contain;
    padding: 0;
}

.emp-id-card-identity {
    display: grid;
    gap: 0.28rem;
    text-align: left;
}

.emp-id-card-row {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: start;
    margin: 0;
}

.emp-id-card-label {
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.emp-id-card-name,
.emp-id-card-code,
.emp-id-card-role,
.emp-id-card-meta,
.emp-id-card-address {
    margin: 0;
    color: #0f172a;
    font-size: 0.84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.emp-id-card-name,
.emp-id-card-code {
    font-weight: 750;
}

.emp-id-card-name {
    font-size: 0.9rem;
}

.emp-id-card-role,
.emp-id-card-meta,
.emp-id-card-address {
    font-weight: 550;
}

.emp-id-card-footer {
    margin-top: 0.55rem;
    padding: 0.35rem 0.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
    display: grid;
    gap: 0.12rem;
    text-align: center;
}

.emp-id-card-company-address,
.emp-id-card-company-number {
    margin: 0;
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 550;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.emp-id-card-company-number {
    font-weight: 650;
}

.checkpost-qr-card .emp-id-card-brand {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
}

.checkpost-qr-card .emp-id-card-brand h3 {
    text-align: center;
}

.checkpost-qr-card-inner {
    min-height: 0;
    width: min(100%, 15.5rem);
    padding: 0.85rem 0.85rem 1rem;
}

.checkpost-qr-image {
    width: 68%;
    max-width: 8.25rem;
    margin: 0.7rem auto 0.55rem;
}

.checkpost-qr-name {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.card-print-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

@media print {
    .card-print-actions {
        display: none !important;
    }

    .emp-id-card-inner {
        box-shadow: none;
        min-height: 0;
    }
}

/* ---------- Public CMS pages ---------- */
.cms-page {
    min-height: 100vh;
    background: var(--paper);
    padding: 1.25rem 1.25rem 2.5rem;
}

.cms-page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto 1.25rem;
}

.cms-page-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cms-page-logo {
    display: block;
    max-height: 3.25rem;
    max-width: 12rem;
    width: auto;
    object-fit: contain;
}

.cms-page-card {
    max-width: 48rem;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.35rem 1.75rem;
}

.cms-page-card h1 {
    margin: 0 0 1rem;
    font-size: 1.55rem;
    line-height: 1.25;
}

.cms-page-body {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ink);
}

.cms-page-body p:first-child {
    margin-top: 0;
}

.cms-page-body img {
    max-width: 100%;
    height: auto;
}

.cms-page-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.cms-page-list a {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 0.55rem);
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--surface-2, #f8fafc) 70%, #fff);
}

.cms-page-list a:hover {
    border-color: var(--brand);
    background: var(--brand-soft, #dbeafe);
}

.cms-page-list strong {
    font-size: 0.95rem;
}

.cms-page-list span {
    font-size: 0.78rem;
    color: var(--muted);
}

html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-theme="dark"] .ql-toolbar.ql-snow,
html[data-theme="dark"] .ql-container.ql-snow {
    border-color: var(--line-strong);
    background: var(--surface);
}

html[data-theme="dark"] .ql-editor {
    color: var(--ink);
}

html[data-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--ink-soft);
}

html[data-theme="dark"] .ql-snow .ql-fill {
    fill: var(--ink-soft);
}

html[data-theme="dark"] .ql-snow .ql-picker {
    color: var(--ink-soft);
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--ink);
}

/* Help Document tabs */
.help-tabs-shell {
    display: grid;
    gap: 0.9rem;
}

.help-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.help-tab-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    padding: 0.55rem 0.9rem;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-tab-btn:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.help-tab-btn.is-active {
    color: var(--brand);
    background: var(--surface);
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--brand) 12%, transparent);
}

.help-tab-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.help-tab-panel {
    min-width: 0;
}

.help-tab-panel[hidden] {
    display: none !important;
}

.feature-help-panel-intro {
    margin-bottom: 0.15rem;
}

.feature-help-panel-intro h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.feature-help-panel-intro p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Working Flow (Help Document) */
.working-flow-stack {
    display: grid;
    gap: 1rem;
    margin-bottom: 0;
}

.working-flow {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 42%, transparent), transparent 58%),
        var(--surface);
}

.working-flow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.working-flow-kicker {
    margin: 0 0 0.2rem;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.working-flow-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.working-flow-subtitle {
    margin: 0.25rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.working-flow-hint {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.working-flow-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.working-flow-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.working-flow-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    max-height: min(70vh, 40rem);
    overflow-y: auto;
}

.working-flow-step {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    gap: 0.65rem;
    align-items: start;
    text-align: left;
    padding: 0.55rem 0.55rem 0.7rem;
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.working-flow-step:hover {
    background: color-mix(in srgb, var(--brand-soft) 45%, transparent);
}

.working-flow-step.is-active {
    background: color-mix(in srgb, var(--brand-soft) 75%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
}

.working-flow-step:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.working-flow-step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.working-flow-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    z-index: 1;
}

.working-flow-step.is-active .working-flow-step-num {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.working-flow-step-line {
    width: 2px;
    flex: 1 1 auto;
    min-height: 1.1rem;
    margin-top: 0.25rem;
    background: color-mix(in srgb, var(--brand) 28%, var(--line));
}

.working-flow-step-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding-top: 0.15rem;
}

.working-flow-step-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.working-flow-step-short {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
}

.working-flow-detail {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1rem 1.05rem 1.1rem;
    min-height: 14rem;
    position: sticky;
    top: 0.75rem;
}

.working-flow-detail-panel {
    display: grid;
    gap: 0.75rem;
    animation: working-flow-in 0.18s ease;
}

@keyframes working-flow-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.working-flow-detail-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.working-flow-detail-step {
    margin: 0 0 0.15rem;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.working-flow-detail-short {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.working-flow-block h4 {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.working-flow-block p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.working-flow-block-conditions {
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm, 0.4rem);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.working-flow-block-action {
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm, 0.4rem);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 55%, transparent);
}

.working-flow-block-next {
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm, 0.4rem);
    border: 1px dashed var(--line);
    background: var(--surface-2);
}

.working-flow-screens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.working-flow-screens li {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 0.4rem);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (min-width: 1100px) {
    .working-flow-detail-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .working-flow-detail-head {
        grid-column: 1 / -1;
    }

    .working-flow-block:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .working-flow-layout {
        grid-template-columns: 1fr;
    }

    .working-flow-rail {
        max-height: none;
        overflow: visible;
    }

    .working-flow-detail {
        position: static;
    }
}

@media (max-width: 720px) {
    .working-flow {
        padding: 0.85rem;
    }
}

/* Features help (admin + company) */
.feature-help-panel {
    display: grid;
    gap: 0.85rem;
}

.feature-help-toolbar {
    align-items: end;
}

.feature-help-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.feature-help-empty {
    padding: 1.25rem 0.25rem 0.5rem;
    text-align: center;
    line-height: 1.5;
}

.feature-help-groups {
    display: grid;
    gap: 1rem;
}

.feature-help-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.feature-help-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.feature-help-enabled {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.feature-help-enabled-label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.15rem;
}

.feature-help-enabled-chip {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 650;
}

.feature-help-area-tag {
    margin: 0 0 0.2rem;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feature-help-group-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
}

.feature-help-group-head p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.feature-help-count {
    display: inline-flex;
    min-width: 1.6rem;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 700;
}

.feature-help-list {
    display: grid;
    gap: 0;
}

.feature-help-card {
    padding: 0.95rem 1rem 1.05rem;
    border-top: 1px solid var(--line);
}

.feature-help-card:first-child {
    border-top: 0;
}

.feature-help-card-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.feature-help-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.feature-help-card-title h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--ink);
}

.feature-help-id {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.feature-help-summary {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.feature-help-card-body {
    display: grid;
    gap: 0.7rem;
}

.feature-help-block h4 {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.feature-help-block p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.feature-help-block-conditions {
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm, 0.4rem);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.feature-help-block-example {
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm, 0.4rem);
    border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line));
    background: color-mix(in srgb, var(--brand-soft) 55%, transparent);
}

.feature-help-screens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-help-screens li {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 0.4rem);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (min-width: 900px) {
    .feature-help-card-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-help-block:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .feature-help-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Activity log */
.activity-log-panel .page-head,
.activity-log-panel {
    gap: 0.55rem;
}

.activity-log-toolbar {
    gap: 0.75rem !important;
    margin-bottom: 0.7rem !important;
    align-items: end;
}

.activity-log-toolbar .toolbar-field {
    min-width: 0;
    gap: 0.2rem;
}

.activity-field-date {
    width: 10.75rem;
    flex: 0 0 10.75rem;
    min-width: 10.75rem;
}

.activity-field-date input[type="date"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.activity-field-company {
    width: 13rem;
    flex: 0 1 13rem;
    min-width: 11.5rem;
}

.activity-field-portal {
    width: 11rem;
    flex: 0 1 11rem;
}

.activity-field-search {
    width: 9.5rem;
    flex: 0 1 9.5rem;
}

.activity-toolbar-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-left: auto;
    padding-bottom: 0.05rem;
}

.activity-action-btn {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.45rem;
}

.activity-action-btn.is-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.activity-action-btn.is-primary:hover {
    background: color-mix(in srgb, var(--brand) 88%, #000);
    border-color: color-mix(in srgb, var(--brand) 88%, #000);
    color: #fff;
}

.activity-log-panel .data-table th,
.activity-log-panel .data-table td {
    padding: 0.42rem 0.5rem;
    font-size: 0.84rem;
    vertical-align: top;
}

.offcanvas.offcanvas-end.knock-offcanvas.activity-log-offcanvas {
    --bs-offcanvas-width: min(28rem, 56vw);
    --offcanvas-w: min(28rem, 56vw);
    width: min(28rem, 56vw);
    max-width: 56vw;
}

.activity-detail-head {
    border-bottom: 1px solid color-mix(in srgb, var(--line, #e5e7eb) 80%, transparent);
}

.activity-detail-body {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.activity-story {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem 0.95rem 0.95rem 1.05rem;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-soft, #dbeafe) 70%, #fff), #fff 58%),
        var(--surface, #fff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.activity-story::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--brand);
}

.activity-story.is-field::before { background: #0f766e; }
.activity-story.is-company::before { background: #b45309; }
.activity-story.is-master::before { background: #1d4ed8; }
.activity-story.is-unknown::before { background: #64748b; }

.activity-story-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.activity-story-source {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-transform: uppercase;
}

.activity-story-summary {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 650;
    color: var(--text);
}

.activity-highlight {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line, #e5e7eb));
    background: color-mix(in srgb, #fff 70%, var(--brand-soft, #dbeafe));
}

.activity-highlight.is-ok {
    border-color: color-mix(in srgb, #059669 28%, var(--line, #e5e7eb));
    background: color-mix(in srgb, #ecfdf5 80%, #fff);
}

.activity-highlight.is-danger {
    border-color: color-mix(in srgb, #dc2626 28%, var(--line, #e5e7eb));
    background: color-mix(in srgb, #fef2f2 80%, #fff);
}

.activity-highlight.is-warn {
    border-color: color-mix(in srgb, #d97706 28%, var(--line, #e5e7eb));
    background: color-mix(in srgb, #fffbeb 80%, #fff);
}

.activity-highlight-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.activity-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.activity-chip {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    background: color-mix(in srgb, #fff 78%, var(--surface-2, #f8fafc));
    border: 1px solid color-mix(in srgb, var(--line, #e5e7eb) 85%, transparent);
}

.activity-chip span {
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.activity-chip strong {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text);
}

.activity-section {
    display: grid;
    gap: 0.55rem;
}

.activity-section-soft {
    padding: 0.7rem 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface-2, #f8fafc) 88%, #fff);
    border: 1px dashed color-mix(in srgb, var(--line, #e5e7eb) 90%, transparent);
}

.activity-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.activity-section-head h3 {
    margin: 0;
    font-size: 0.86rem;
}

.activity-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft, #dbeafe);
}

.activity-fact-list,
.activity-diff-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-fact {
    display: grid;
    grid-template-columns: 7.8rem minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
}

.activity-fact span {
    font-size: 0.74rem;
    color: var(--muted);
}

.activity-fact strong {
    font-size: 0.82rem;
    font-weight: 650;
}

.activity-diff {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid var(--line, #e5e7eb);
    background: var(--surface, #fff);
}

.activity-diff header {
    font-size: 0.78rem;
    font-weight: 700;
}

.activity-diff-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.activity-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    word-break: break-word;
}

.activity-pill.is-before {
    color: #64748b;
    background: #f1f5f9;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.activity-pill.is-after {
    color: #0f766e;
    background: #ecfdf5;
}

.activity-diff.is-ok .activity-pill.is-after,
.activity-highlight.is-ok .activity-pill.is-after {
    color: #047857;
    background: #d1fae5;
}

.activity-diff.is-danger .activity-pill.is-after,
.activity-highlight.is-danger .activity-pill.is-after {
    color: #b91c1c;
    background: #fee2e2;
}

.activity-diff.is-warn .activity-pill.is-after,
.activity-highlight.is-warn .activity-pill.is-after {
    color: #b45309;
    background: #fef3c7;
}

.activity-diff-arrow {
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 1100px) {
    .activity-toolbar-actions {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .activity-field-date,
    .activity-field-company,
    .activity-field-portal,
    .activity-field-search {
        width: 100%;
        flex: 1 1 100%;
    }

    .activity-chip-grid,
    .activity-fact {
        grid-template-columns: 1fr;
    }
}

#vendorTable td.nowrap {
    white-space: nowrap;
}