:root {
    --green: #0d7a45;
    --green-dark: #075c34;
    --green-soft: #eaf7f0;
    --black: #18201c;
    --muted: #66736b;
    --border: #dce5df;
    --surface: #ffffff;
    --background: #f4f7f5;
    --danger: #b42318;
    --danger-soft: #fff1f0;
    --success: #087a45;
    --shadow: 0 14px 40px rgba(25, 58, 40, 0.09);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    color: var(--black);
    background: var(--background);
}

/* Build 1.9.9.1: in-app instruction manual */
.feature-help {
    margin: 0 0 20px;
    border: 1px solid #bfe1cc;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5fcf8, #ffffff);
    box-shadow: 0 8px 24px rgba(13, 122, 69, 0.07);
    overflow: hidden;
}

.feature-help summary {
    min-height: 66px;
    padding: 13px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--green-dark);
    list-style: none;
}

.feature-help summary::-webkit-details-marker { display: none; }
.feature-help summary > span:nth-child(2) { flex: 1; }
.feature-help summary strong, .feature-help summary small { display: block; }
.feature-help summary small { margin-top: 3px; color: var(--muted); font-weight: 600; }

.help-icon, .manual-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    font-size: 20px;
    font-weight: 900;
}

.help-chevron { font-size: 22px; transition: transform 0.2s ease; }
.feature-help[open] .help-chevron { transform: rotate(180deg); }

.feature-help-body {
    padding: 0 18px 18px 67px;
    border-top: 1px solid #d8eee0;
}

.feature-help-purpose { color: var(--muted); font-weight: 650; }

.manual-steps {
    margin: 14px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.manual-steps li { display: flex; align-items: flex-start; gap: 10px; }
.manual-steps li > span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: 12px;
    font-weight: 900;
}
.manual-steps li p { margin: 2px 0 0; line-height: 1.45; }
.manual-steps.compact { font-size: 14px; }

.manual-important {
    padding: 11px 13px;
    border-left: 4px solid #d39b1a;
    border-radius: 8px;
    background: #fff8e7;
    color: #5e4713;
    line-height: 1.45;
}

.manual-full-link { display: inline-block; margin-top: 13px; }
.manual-welcome { align-items: center; }
.manual-search-panel { margin-bottom: 20px; }
.manual-search-panel label { max-width: 720px; }
.manual-search-panel .muted { margin-bottom: 0; }

.manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}

.manual-card {
    scroll-margin-top: 105px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 19px;
    box-shadow: 0 9px 28px rgba(25, 58, 40, 0.06);
}

.manual-card[hidden] { display: none; }
.manual-card-heading { display: flex; align-items: center; gap: 12px; }
.manual-card-heading h3 { margin: 2px 0 0; }
.manual-card > p { color: var(--muted); line-height: 1.5; }
.manual-open-feature { min-height: 44px; margin-top: 14px; }

.manual-no-results {
    padding: 28px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 750;
}

@media (max-width: 760px) {
    .feature-help-body { padding: 0 15px 16px; }
    .manual-grid { grid-template-columns: 1fr; }
    .manual-card { padding: 16px; }
}

@media print {
    .feature-help, .manual-search-panel, .manual-open-feature { display: none !important; }
    .manual-grid { display: block; }
    .manual-card { break-inside: avoid; box-shadow: none; margin-bottom: 14px; }
}

button, input, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(13, 122, 69, 0.18), transparent 30%),
        radial-gradient(circle at 90% 85%, rgba(13, 122, 69, 0.12), transparent 32%),
        linear-gradient(145deg, #f7faf8, #edf5f0);
}

.login-panel {
    width: min(100%, 460px);
    background: var(--surface);
    border: 1px solid rgba(13, 122, 69, 0.12);
    border-radius: 26px;
    box-shadow: var(--shadow);
    padding: 38px;
}

.login-brand { text-align: center; margin-bottom: 28px; }

.login-logo, .brand-mark {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    font-weight: 900;
    letter-spacing: -1px;
}

.login-logo {
    width: 76px;
    height: 76px;
    border-radius: 23px;
    margin: 0 auto 14px;
    font-size: 30px;
    box-shadow: 0 12px 25px rgba(13, 122, 69, 0.25);
}

.login-brand h1 { margin: 0; font-size: 32px; }
.login-brand p { margin: 7px 0 0; color: var(--muted); }

.login-form, .stack-form {
    display: grid;
    gap: 17px;
}

label {
    display: grid;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

input, select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    background: #fff;
    color: var(--black);
    outline: none;
}

input:focus, select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.11);
}

.password-box {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.password-box:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.11);
}

.password-box input {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.password-box button {
    border: 0;
    background: transparent;
    color: var(--green);
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
}

.primary-button {
    min-height: 50px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 122, 69, 0.2);
}

.primary-button:hover { transform: translateY(-1px); }

.button-link {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
}

.first-login-note {
    display: grid;
    gap: 5px;
    margin-top: 22px;
    padding: 15px;
    border-radius: 13px;
    background: var(--green-soft);
    font-size: 13px;
}

.first-login-note strong { color: var(--green-dark); }
.login-panel footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 23px; }

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

.sidebar {
    width: 260px;
    position: fixed;
    inset: 0 auto 0 0;
    background: #10251a;
    color: #fff;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 9px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
.brand strong, .brand small { display: block; }
.brand small { opacity: 0.68; margin-top: 2px; }

.sidebar nav { display: grid; gap: 7px; margin-top: 20px; }

.nav-item {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 12px;
    color: rgba(255,255,255,0.83);
    padding: 0 13px;
    text-decoration: none;
    background: transparent;
    font-weight: 700;
    text-align: left;
}

.nav-item.active, .nav-item:hover:not(.disabled) {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.nav-item.disabled { opacity: 0.38; cursor: not-allowed; }
.nav-section {
    padding: 17px 13px 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.38);
}
.logout-form { margin-top: auto; }
.logout-button { width: 100%; cursor: pointer; }

.main-area { flex: 1; margin-left: 260px; min-width: 0; }

.topbar {
    min-height: 84px;
    padding: 15px 27px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar h1 { margin: 0; font-size: 23px; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 330px;
    min-width: 190px;
}
.topbar-heading > div:last-child { min-width: 0; }
.topbar-heading h1,
.topbar-heading p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip {
    margin-left: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 14px;
    background: var(--green-soft);
}

.user-chip strong, .user-chip small { display: block; }
.user-chip small { color: var(--muted); margin-top: 2px; }
.avatar {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    font-weight: 900;
}
.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
}

.page-content { padding: 27px; max-width: 1500px; margin: 0 auto; }

.welcome-banner {
    background: linear-gradient(135deg, #0b6f40, #0d8a4d);
    color: #fff;
    border-radius: 21px;
    padding: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}

.welcome-banner h2 { margin: 4px 0 6px; font-size: 28px; }
.welcome-banner p { margin: 0; opacity: 0.85; }
.eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.25px;
    color: var(--green);
}
.welcome-banner .eyebrow { color: rgba(255,255,255,0.75); }
.version-box {
    min-width: 105px;
    padding: 14px;
    border-radius: 15px;
    background: rgba(255,255,255,0.13);
    text-align: center;
}
.version-box small, .version-box strong { display: block; }
.version-box strong { font-size: 22px; margin-top: 3px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin: 21px 0;
}

.metric-card, .panel, .form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(25, 58, 40, 0.05);
}

.metric-card {
    padding: 19px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.metric-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    font-size: 21px;
}
.metric-card strong, .metric-card span { display: block; }
.metric-card strong { font-size: 25px; }
.metric-card div span { color: var(--muted); font-size: 13px; margin-top: 2px; }

.two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.panel { padding: 21px; }
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}
.panel h3 { margin: 4px 0 0; font-size: 20px; }
.check-list { display: grid; gap: 12px; }
.check-list div { display: flex; gap: 10px; align-items: center; }
.check-list span {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green);
    font-weight: 900;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eef1ef;
    color: #4f5c54;
    font-size: 11px;
    font-weight: 850;
}
.status-badge.success { background: var(--green-soft); color: var(--success); }
.status-badge.danger { background: var(--danger-soft); color: var(--danger); }

.muted { color: var(--muted); line-height: 1.65; }
.form-card { padding: 27px; margin: 25px auto; }
.form-card.narrow { max-width: 560px; }
.form-card h2 { margin: 10px 0 7px; }
.form-help { color: var(--muted); font-size: 12px; margin: -4px 0 0; }

.alert {
    border-radius: 13px;
    padding: 13px 15px;
    margin-bottom: 17px;
    font-weight: 700;
}
.alert.error { background: var(--danger-soft); color: var(--danger); border: 1px solid #ffd5d2; }
.alert.success { background: var(--green-soft); color: var(--success); border: 1px solid #ccead9; }

.users-layout { grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.7fr); }
.table-panel { min-width: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 11px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .55px; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: 3px; }

.expense-date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 13px;
    border: 1px solid #b9dfca;
    border-radius: 13px;
    background: #f3fbf6;
}
.expense-date-fields label { margin: 0; }
.expense-date-fields label strong { display: block; color: var(--green-deep); }
.expense-date-fields label small { display: block; margin: 3px 0 8px; color: var(--muted); }
.expense-dates-cell { min-width: 155px; white-space: nowrap; }
.expense-dates-cell span {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.expense-dates-cell span:first-child { margin-top: 0; }
.expense-dates-cell strong { color: var(--green-deep); font-size: 13px; }

.center-card {
    max-width: 520px;
    margin: 12vh auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--shadow);
    text-align: center;
}

@media (max-width: 1050px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .expense-date-fields { grid-template-columns: 1fr; }
    .sidebar {
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 15px 0 40px rgba(0,0,0,.2);
    }
    .sidebar.open { transform: translateX(0); }
    .main-area { margin-left: 0; }
    .menu-button { display: block; }
    .topbar { padding: 12px 15px; }
    .topbar h1 { font-size: 19px; }
    .topbar p { display: none; }
    .user-chip { padding: 5px; }
    .user-chip div:last-child { display: none; }
    .page-content { padding: 16px; }
    .welcome-banner { align-items: flex-start; gap: 18px; }
    .welcome-banner h2 { font-size: 23px; }
    .card-grid, .two-column { grid-template-columns: 1fr; }
    .login-panel { padding: 27px 21px; border-radius: 20px; }
}

@media (max-width: 430px) {
    .card-grid { grid-template-columns: 1fr; }
    .welcome-banner { padding: 21px; }
    .version-box { display: none; }
}

textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    background: #fff;
    color: var(--black);
    outline: none;
    resize: vertical;
    font: inherit;
}
textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.11);
}

.six-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-actions { display: grid; gap: 11px; }
.action-button {
    min-height: 48px;
    border-radius: 12px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    background: var(--green);
    font-weight: 800;
}
.action-button.secondary { background: #eef5f1; color: var(--green-dark); }
.action-button:hover { transform: translateY(-1px); }

.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-layout { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.7fr); }
.transaction-layout { grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.55fr); }
.wide-panel { min-width: 0; }
.empty-state { text-align: center; color: var(--muted); padding: 30px 12px; }

.warehouse-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.warehouse-action {
    min-height: 128px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: var(--black);
    display: grid;
    align-content: center;
    gap: 5px;
    box-shadow: 0 8px 25px rgba(25, 58, 40, 0.05);
}
.warehouse-action > span { font-size: 28px; }
.warehouse-action strong { font-size: 18px; }
.warehouse-action small { color: var(--muted); }
.warehouse-action:hover { border-color: var(--green); transform: translateY(-2px); }

.location-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}
.location-card {
    background: var(--green-soft);
    border: 1px solid #cfe8db;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--black);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.location-card > span { font-size: 23px; }
.location-card strong, .location-card small { display: block; }
.location-card small { color: var(--muted); margin-top: 4px; }
.location-card .location-card-open {
    color: var(--green-dark);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-top: 7px;
}
.location-card:hover {
    border-color: var(--green);
    box-shadow: 0 9px 22px rgba(13, 122, 69, 0.12);
    transform: translateY(-2px);
}
.location-card:focus-visible {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.16);
    outline: none;
}

.alert.warning { background: #fff8e6; color: #8a5700; border: 1px solid #f2d48b; }
.alert.warning a { color: inherit; font-weight: 900; }
.status-badge.warning { background: #fff4d8; color: #8a5700; }
.legend { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 12px; margin: -5px 0 15px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.danger-dot { background: var(--danger); }
.warning-dot { background: #d18a00; }
.success-dot { background: var(--success); }
.inline-filter select { min-width: 210px; }

@media (max-width: 1180px) {
    .six-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-layout, .transaction-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .warehouse-actions, .location-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .six-cards, .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
    .responsive-heading { align-items: stretch; flex-direction: column; }
    .inline-filter, .inline-filter select { width: 100%; }
}

/* Build 0.3 — Point of Sale */
.secondary-button {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--green-dark);
    padding: 0 14px;
    font-weight: 800;
    cursor: pointer;
}
.text-link { color: var(--green); font-weight: 800; text-decoration: none; }
.pos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.pos-header h3 { margin: 4px 0 0; }
.pos-form {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(310px, .75fr);
    gap: 18px;
    align-items: start;
}
.pos-products { min-width: 0; }
.pos-lines { display: grid; gap: 11px; }
.pos-line {
    display: grid;
    grid-template-columns: 34px minmax(210px, 1fr) 120px 145px 42px;
    gap: 10px;
    align-items: end;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdfc;
}
.pos-line.is-hidden { display: none; }
.line-number {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green-dark);
    font-weight: 900;
    margin-bottom: 9px;
}
.line-total { padding: 8px 4px 9px; }
.line-total small, .line-total strong { display: block; }
.line-total small { color: var(--muted); margin-bottom: 4px; }
.icon-button {
    width: 42px;
    height: 48px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 21px;
}
.danger-button { color: var(--danger); }
.checkout-card {
    position: sticky;
    top: 102px;
    display: grid;
    gap: 15px;
}
.checkout-card h3 { margin: 4px 0 0; }
.sale-total {
    border-radius: 15px;
    background: var(--green-soft);
    padding: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sale-total span { color: var(--green-dark); font-weight: 800; }
.sale-total strong { font-size: 22px; color: var(--green-dark); }
.checkout-button { width: 100%; }
.recent-sales { margin-top: 18px; }
.receipt-actions {
    max-width: 820px;
    margin: 0 auto 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.print-button { padding: 0 19px; }
.receipt-card {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
}
.receipt-card > header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--green);
}
.cash-receipt-branding {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 92px;
    align-items: center !important;
    gap: 18px !important;
    text-align: center;
}
.receipt-brand-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
    background: #fff;
    flex: 0 0 auto;
}
.receipt-brand-logo-left { justify-self: start; }
.receipt-brand-logo-right { justify-self: end; }
.corporate-receipt-logo { border-radius: 50%; }
.pharmacy-receipt-logo { padding: 8px; }
.receipt-brand-copy { min-width: 0; }
.receipt-brand-copy h2 { margin: 3px 0 0; }
.receipt-brand-copy p { margin: 4px 0; }
.receipt-brand-copy small {
    display: block;
    line-height: 1.35;
}
.receipt-document-type {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}
.receipt-logo {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--green);
    font-weight: 900;
    font-size: 24px;
}
.receipt-card header h2 { margin: 0; font-size: 22px; }
.receipt-card header p { margin: 3px 0; color: var(--green-dark); font-weight: 700; }
.receipt-card header small { color: var(--muted); }
.receipt-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 0;
}
.receipt-meta div, .receipt-summary div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.receipt-meta span, .receipt-summary span { color: var(--muted); }
.receipt-table { margin: 4px 0 18px; }
.receipt-summary {
    margin-left: auto;
    max-width: 420px;
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.receipt-summary .grand-total {
    margin-top: 5px;
    padding-top: 13px;
    border-top: 2px solid var(--black);
    font-size: 18px;
}
.receipt-card footer {
    margin-top: 28px;
    padding-top: 17px;
    border-top: 1px dashed var(--border);
    text-align: center;
    color: var(--muted);
}
.cash-receipt-amount {
    margin: 4px 0 22px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 2px solid var(--green);
    border-radius: 14px;
    background: var(--green-soft);
}
.cash-receipt-amount span { color: var(--green-dark); font-weight: 900; }
.cash-receipt-amount strong { color: var(--green-dark); font-size: 24px; }
.receipt-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
    margin-top: 48px;
}
.receipt-signatures div {
    min-height: 40px;
    padding-top: 10px;
    border-top: 1px solid var(--black);
}
.receipt-signatures span,
.receipt-signatures strong { display: block; }
.receipt-signatures span { color: var(--muted); font-size: 12px; }
.receipt-signatures strong { margin-top: 4px; }
.invoice-card { max-width: 980px; }
.invoice-actions { max-width: 980px; }
.invoice-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.invoice-heading div span,
.invoice-heading div strong { display: block; }
.invoice-heading div span,
.invoice-label { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.invoice-heading div strong { margin-top: 3px; color: var(--green-dark); font-size: 20px; }
.invoice-bill-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr);
    gap: 28px;
    padding: 22px 0;
}
.invoice-bill-grid section {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdfb;
}
.invoice-bill-grid h3 { margin: 5px 0 12px; }
.invoice-bill-grid p { margin: 6px 0; line-height: 1.4; }
.invoice-details { display: grid; align-content: start; gap: 9px; }
.invoice-details div,
.invoice-summary div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}
.invoice-details span,
.invoice-summary span { color: var(--muted); }
.invoice-details strong { text-align: right; }
.invoice-table th:first-child,
.invoice-table td:first-child { width: 42px; text-align: center; }
.invoice-summary {
    width: min(100%, 470px);
    margin: 20px 0 0 auto;
    display: grid;
    gap: 10px;
    padding: 17px 0 0;
    border-top: 1px solid var(--border);
}
.invoice-summary .grand-total {
    margin: 4px 0;
    padding: 13px 0;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    font-size: 18px;
}
.invoice-terms {
    margin-top: 24px;
    padding: 14px 16px;
    border-left: 4px solid var(--green);
    border-radius: 9px;
    background: var(--green-soft);
    line-height: 1.5;
}
.invoice-signatures { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1120px) {
    .pos-form { grid-template-columns: 1fr; }
    .checkout-card { position: static; }
}
@media (max-width: 800px) {
    .pos-line {
        grid-template-columns: 32px minmax(0, 1fr) 95px;
    }
    .pos-line .line-total { grid-column: 2 / 3; }
    .pos-line .icon-button { grid-column: 3; grid-row: 2; }
}
@media (max-width: 570px) {
    .pos-header { align-items: stretch; flex-direction: column; }
    .pos-line { grid-template-columns: 30px 1fr; }
    .pos-line label, .pos-line .line-total { grid-column: 2; }
    .pos-line .icon-button { grid-column: 1; grid-row: 3; }
    .receipt-card { padding: 20px 15px; border-radius: 15px; }
    .receipt-meta { grid-template-columns: 1fr; }
    .receipt-card > header { align-items: flex-start; }
    .cash-receipt-branding {
        grid-template-columns: 58px minmax(0, 1fr) 58px;
        gap: 8px !important;
        align-items: center !important;
    }
    .receipt-brand-logo { width: 56px; height: 56px; }
    .receipt-brand-copy h2 { font-size: 16px; }
    .receipt-brand-copy small { font-size: 10px; }
    .receipt-signatures { grid-template-columns: 1fr; gap: 36px; }
    .invoice-bill-grid { grid-template-columns: 1fr; gap: 12px; }
    .invoice-details strong { text-align: left; }
    .invoice-details div { display: grid; gap: 3px; }
    .invoice-signatures { grid-template-columns: 1fr; }
}
@media print {
    body { background: #fff; }
    .sidebar, .topbar, .no-print { display: none !important; }
    .main-area { margin: 0 !important; }
    .page-content { padding: 0 !important; max-width: none !important; }
    .receipt-card { box-shadow: none; border: 0; max-width: none; padding: 0; }
    .cash-receipt-branding,
    .receipt-brand-logo,
    .cash-receipt-amount {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .receipt-brand-logo { break-inside: avoid; }
    .invoice-bill-grid,
    .invoice-summary,
    .invoice-terms,
    .invoice-signatures { break-inside: avoid; }
}

/* Build 0.4 finance modules */
.finance-layout {
    display: grid;
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.65fr);
    gap: 18px;
    align-items: start;
}
.finance-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.finance-history { margin-top: 18px; }
.summary-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
}
.summary-filter label { min-width: 210px; }
.summary-filter .primary-button { min-width: 150px; padding: 0 18px; }
.summary-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.summary-total td {
    border-top: 2px solid var(--black);
    background: var(--green-soft);
}
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    color: var(--black);
    background: #fff;
    resize: vertical;
}
textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.11);
}

@media (max-width: 1180px) {
    .summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .finance-layout, .finance-forms { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .summary-cards { grid-template-columns: 1fr; }
    .summary-filter { align-items: stretch; }
    .summary-filter label, .summary-filter .primary-button { width: 100%; min-width: 0; }
}

/* Build 0.5 approval and return controls */
.danger-button {
    min-height: 46px;
    border: 1px solid #f1b8b3;
    border-radius: 12px;
    background: var(--danger-soft);
    color: var(--danger);
    padding: 10px 16px;
    font-weight: 850;
    cursor: pointer;
}
.danger-button:hover { filter: brightness(0.98); }
.compact-button {
    min-height: 38px;
    padding: 7px 12px;
    box-shadow: none;
}
.review-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-width: 390px;
}
.review-form input { min-height: 38px; }
.finance-history { margin-top: 18px; }
.receipt-card header .status-badge { margin-left: auto; }
@media (max-width: 760px) {
    .review-form { grid-template-columns: 1fr; min-width: 230px; }
    .compact-button { width: 100%; }
}

/* Build 0.6: employees and payroll */
.employee-layout { display:grid; grid-template-columns:minmax(340px,.8fr) minmax(0,1.5fr); gap:18px; }
.employee-form-panel { align-self:start; }
.form-grid { display:grid; gap:14px; }
.form-grid.two-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-subheading { margin:5px 0 -3px; font-size:14px; }
.checkbox-line { display:flex; align-items:center; gap:9px; }
.checkbox-line input { width:18px; min-height:18px; }
.table-link { color:var(--green); font-weight:800; text-decoration:none; }
.payroll-create { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.payroll-create h3 { margin:4px 0; }
.inline-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.inline-form label { min-width:180px; }
.payroll-run { margin-bottom:18px; }
.payroll-summary { margin:0 0 18px; }
.payroll-table { min-width:1180px; }
.money-input { min-width:105px; min-height:39px; padding:7px 8px; }
.note-input { min-width:150px; min-height:39px; margin-top:6px; }
.payroll-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:17px; }
.payroll-actions form { margin:0; }
.payroll-payment { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.review-form { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:15px; align-items:end; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.decision-buttons { display:flex; gap:10px; }
.payslip { max-width:820px; margin:0 auto; padding:32px; }
.receipt-brand { display:flex; align-items:center; gap:14px; padding-bottom:20px; border-bottom:2px solid var(--green); }
.receipt-brand h2,.receipt-brand p { margin:0; }
.print-logo { width:52px; height:52px; border-radius:15px; }
.payslip-header { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:22px 0; }
.payslip-header div { padding:14px; border-radius:12px; background:var(--green-soft); }
.payslip-header span,.payslip-header strong,.payslip-header small { display:block; }
.payslip-header span { color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:800; }
.payslip-header strong { margin:6px 0 3px; }
.payslip-table { max-width:560px; margin-left:auto; }
.payslip-table td:last-child { text-align:right; }
.payslip-net td { font-size:18px; font-weight:900; color:var(--green-dark); border-top:2px solid var(--green); }
.payslip-note { padding:13px; background:#f6f8f7; border-radius:10px; }
.payslip-signatures { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:70px; }
.payslip-signatures div { border-top:1px solid var(--black); text-align:center; padding-top:7px; font-size:12px; }
.receipt-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:30px; }
@media (max-width:1050px) { .employee-layout { grid-template-columns:1fr; } .form-grid.three-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .form-grid.two-fields,.form-grid.three-fields,.payslip-header { grid-template-columns:1fr; } .payroll-create,.review-form { display:grid; grid-template-columns:1fr; align-items:stretch; } .payroll-actions,.decision-buttons,.receipt-actions { flex-direction:column; align-items:stretch; } .payslip { padding:20px; } .payslip-signatures { gap:25px; } }
@media print { .sidebar,.topbar,.no-print { display:none!important; } .main-area { margin:0!important; } .page-content { padding:0!important; } .payslip { box-shadow:none; border:0; max-width:none; } }

/* Build 0.7 attendance, leave and excuse screens */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    padding: 15px;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}
.filter-bar label { min-width: 180px; flex: 1; }
.attendance-self-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.attendance-self-card h3 { margin: 5px 0; }
.attendance-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.attendance-actions { margin-bottom: 18px; }
.request-layout { margin-bottom: 18px; align-items: start; }
.inline-review-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    min-width: 320px;
}
.inline-review-form input { min-height: 36px; padding: 7px 9px; }
.small-button {
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    padding: 5px 9px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.small-button.approve { background: var(--green); }
.small-button.reject { background: var(--danger); }
.empty-cell { text-align: center; color: var(--muted); padding: 28px; }

@media (max-width: 1100px) {
    .attendance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .form-row, .attendance-metrics { grid-template-columns: 1fr; }
    .attendance-self-card { align-items: stretch; flex-direction: column; }
    .inline-review-form { min-width: 260px; grid-template-columns: 1fr 1fr; }
    .inline-review-form input { grid-column: 1 / -1; }
}

/* Build 0.8 management reporting */
.report-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
}
.report-filter label { min-width: 170px; flex: 1; }
.report-filter button { min-height: 48px; }
.report-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 10px 0 18px;
}
.report-heading h2 { margin: 5px 0; }
.report-heading p { margin: 0; color: var(--muted); }
.report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-summary-grid { align-items: start; }
.report-statement { width: 100%; }
.report-statement td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.report-statement .statement-strong td { font-weight: 850; border-top: 1px solid var(--border); }
.report-statement .statement-total td {
    font-weight: 900;
    font-size: 16px;
    color: var(--green-dark);
    border-top: 2px solid var(--green);
}
.report-section { margin-top: 18px; }
.wide-report-table { min-width: 1280px; }
.aging-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.aging-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8faf9;
}
.aging-card span, .aging-card strong { display: block; }
.aging-card span { min-height: 32px; color: var(--muted); font-size: 12px; }
.aging-card strong { margin-top: 6px; font-size: 16px; }
@media (max-width: 1150px) {
    .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aging-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .report-metrics, .aging-grid { grid-template-columns: 1fr; }
    .report-heading { align-items: flex-start; flex-direction: column; }
    .report-filter { align-items: stretch; }
    .report-filter label, .report-filter button { width: 100%; min-width: 0; }
}
@media print {
    .report-section, .report-summary-grid, .report-metrics { break-inside: avoid; }
    .report-filter { display: none!important; }
}

.data-section { margin-top: 20px; }
.compact-banner { margin-bottom: 20px; }
.export-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}
.export-card {
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 15px;
    background: #fbfdfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.export-card strong, .export-card span { display: block; }
.export-card span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.export-actions { display: flex; align-items: center; gap: 9px; }
.export-actions .secondary-button { min-height: 38px; padding: 0 13px; }
.settings-card { max-width: 820px; }
.settings-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.setting-readonly {
    display: grid;
    align-content: center;
    gap: 5px;
    min-height: 74px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--green-soft);
}
.setting-readonly span { color: var(--muted); font-size: 12px; font-weight: 750; }
.setting-readonly strong { color: var(--green-dark); }
.setting-readonly .table-link { justify-self: start; }
textarea[hidden] { display: none; }
@media (max-width: 1100px) { .export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .export-grid, .settings-form .form-grid { grid-template-columns: 1fr; }
    .export-card { align-items: flex-start; flex-direction: column; }
}

/* Build 1.0 administration and security */
.admin-users-panel { margin-top: 18px; }
.danger-panel { border-color: #f2c8c4; }
.danger-button {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    padding: 0 17px;
    background: #b42318;
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}
.danger-button:hover { filter: brightness(.95); }
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.check-row input { width: 20px; min-height: 20px; margin: 0; }
.inline-form { display: inline; }
.button-as-link {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

/* Mobile money */
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.account-card {
    display: grid;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 19px;
    box-shadow: 0 8px 25px rgba(25, 58, 40, 0.05);
}
.account-card h3 { margin: 4px 0; }
.account-card p { margin: 0; color: var(--muted); font-size: 13px; }
.account-card > strong { font-size: 21px; color: var(--green-dark); }
.money-positive { color: var(--success); font-weight: 800; }
.money-negative { color: var(--danger); font-weight: 800; }
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    color: var(--black);
    resize: vertical;
    outline: none;
}
textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(13,122,69,.11); }
.status-badge.warning { background: #fff7df; color: #8a5a00; }

.account-card > strong.money-negative { color: var(--danger); }

/* Build 1.3 procurement */
.procurement-items {
    display: grid;
    gap: 10px;
}
.procurement-item-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(110px, .55fr) minmax(180px, 1fr);
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdfc;
}
.action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.action-row > button {
    flex: 1 1 170px;
}
@media (max-width: 760px) {
    .procurement-item-row { grid-template-columns: 1fr; }
}

/* Build 1.4 stock-control indicators. */
.variance-negative { color: var(--danger); font-weight: 850; }
.variance-positive { color: var(--green); font-weight: 850; }
.small-button.danger { background: var(--danger); color: #fff; }


/* Build 1.5 till-control cash denomination entry. */
.denomination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.denomination-grid label {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fbfdfc;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.health-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdfc;
}
.health-item strong { display: block; }
.health-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.closing-summary-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.closing-attention-list { display: grid; gap: 10px; }
.closing-attention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid #f0b7b2;
    border-radius: 14px;
    background: #fff8f7;
}
.closing-attention-item strong,
.closing-attention-item span { display: block; }
.closing-attention-item span { margin-top: 3px; color: var(--muted); }
.status-badge.warning { background: #fff7e6; color: #9a6500; }

/* Build 1.9.9.29: ordinary-user data protection */
.data-protection-panel {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.backup-ready-status {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    margin-bottom: 24px;
    border: 1px solid #b9e5cf;
    border-radius: 12px;
    background: var(--green-soft);
    color: var(--success);
    text-align: left;
}
.backup-ready-status.warning {
    border-color: #f0d49a;
    background: #fff7e6;
    color: #8a5700;
}
.backup-ready-status strong,
.backup-ready-status span {
    display: block;
}
.backup-ready-status div span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}
.backup-ready-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    font-weight: 800;
}
.data-protection-copy {
    max-width: 650px;
    margin: 0 auto;
}
.data-protection-copy h3 {
    margin-bottom: 8px;
    font-size: 24px;
}
.data-protection-copy > p {
    line-height: 1.65;
}
.safe-backup-button {
    min-width: 280px;
    margin-top: 12px;
    padding: 15px 24px;
    font-size: 17px;
}
.safe-backup-button span {
    margin-right: 6px;
}
.data-protection-steps {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.data-protection-steps ol {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: safe-backup-step;
}
.data-protection-steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    counter-increment: safe-backup-step;
}
.data-protection-steps li::before {
    content: counter(safe-backup-step);
    grid-row: 1 / span 2;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--success);
    font-weight: 800;
}
.data-protection-steps li span {
    margin-top: 3px;
    color: var(--muted);
}
@media (max-width: 620px) {
    .safe-backup-button {
        width: 100%;
        min-width: 0;
    }
}

/* Build 1.9.9.29: supplier profiles and safe administration */
.supplier-add-panel {
    padding: 0;
}
.supplier-add-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
}
.supplier-add-panel > summary span,
.supplier-add-panel > summary strong,
.supplier-add-panel > summary small {
    display: block;
}
.supplier-add-panel > summary small {
    margin-top: 3px;
    color: var(--muted);
}
.supplier-add-panel > form {
    padding: 0 20px 20px;
    border-top: 1px solid var(--border);
}
.supplier-filter {
    align-items: end;
}
.supplier-filter label {
    flex: 1 1 260px;
}
.supplier-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.supplier-profile-grid > div {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.supplier-profile-grid span,
.supplier-profile-grid strong {
    display: block;
}
.supplier-profile-grid span {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}
.supplier-safe-admin {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #efb5b5;
    border-radius: 12px;
    background: #fff7f7;
}
.supplier-safe-admin.restore-panel {
    border-color: #9bc7a8;
    background: #f2faf4;
}
.supplier-safe-admin p {
    margin: 4px 0 14px;
    color: var(--muted);
}
@media (max-width: 850px) {
    .supplier-profile-grid {
        grid-template-columns: 1fr;
    }
}
.inline-form { display: inline-flex; margin: 0 5px 0 0; }
.button-as-link { border: 0; background: transparent; cursor: pointer; font: inherit; padding: 0; }
.action-cell { white-space: nowrap; }
.restore-success { text-align: center; }
.checkbox-row { grid-template-columns: 22px 1fr; align-items: center; font-weight: 650; }
.checkbox-row input { width: 18px; min-height: 18px; margin: 0; }
@media (max-width: 760px) {
    .health-grid { grid-template-columns: 1fr; }
}

/* Build 1.9.9.40: readable employee access profile. */
.employee-access-layout {
    grid-template-columns: minmax(430px, 1fr) minmax(520px, 1.25fr);
    align-items: start;
}
.employee-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.employee-summary-grid > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
}
.employee-summary-grid span,
.employee-summary-grid strong {
    display: block;
}
.employee-summary-grid span {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
}
.employee-summary-grid strong {
    line-height: 1.42;
    overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
    .employee-access-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .employee-summary-grid { grid-template-columns: 1fr; }
}

/* Build 1.9.9.40: plain Owner task controls. */
.task-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    min-width: 190px;
}
.task-owner-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.task-end-link { color: var(--danger); }
.task-add-panel { border: 2px solid #b9dfca; }
.task-end-panel {
    border: 2px solid #efb5b5;
    background: #fffafa;
}
.task-end-panel > p {
    color: var(--muted);
    line-height: 1.6;
}
@media (max-width: 760px) {
    .task-owner-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
}

/* Build 1.7 notification and alert centre */
.notification-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.top-notification-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    text-decoration: none;
    font-size: 20px;
}
.top-notification-link + .user-chip { margin-left: 0; }
.top-notification-link .notification-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 19px;
    height: 19px;
}
.notification-list { display: grid; gap: 14px; margin: 18px 0; }
.notification-card {
    border: 1px solid var(--border);
    border-left: 5px solid var(--green);
    border-radius: 17px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 7px 24px rgba(25, 58, 40, 0.05);
}
.notification-card.notification-unread {
    border-left-color: #d92d20;
    background: linear-gradient(90deg, #fff8f7, #fff 24%);
}
.notification-card.notification-read { opacity: .86; }
.notification-card-head,
.notification-actions,
.notification-meta,
.notification-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.notification-card-head { justify-content: space-between; }
.notification-card-head time,
.notification-meta { color: var(--muted); font-size: 12px; }
.notification-category { margin-left: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.notification-card h3 { margin: 12px 0 6px; }
.notification-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.notification-meta { margin-top: 12px; }
.notification-actions { margin-top: 15px; }
.notification-toolbar { margin-top: 14px; }
.notification-filter { align-items: end; }
.preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.check-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
    font-weight: 700;
}
.check-option input { width: 18px; min-height: 18px; margin: 0; }
.check-option.compact { min-width: 135px; }
@media (max-width: 760px) {
    .top-notification-link { margin-left: auto; }
    .preference-grid { grid-template-columns: 1fr; }
    .notification-card-head { align-items: flex-start; }
}

/* Build 1.8 persistent storage and dynamic financial trends. */
.persistent-save-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.persistent-save-status + .top-notification-link { margin-left: 0; }
.save-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}
.persistence-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list > div {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.detail-list dt { color: var(--muted); font-weight: 750; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.data-count-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
}
.data-count-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdfc;
}
.data-count-card span, .data-count-card strong { display: block; }
.data-count-card span { color: var(--muted); font-size: 12px; }
.data-count-card strong { margin-top: 5px; font-size: 23px; }
.trend-panel { overflow: hidden; }
.trend-heading { align-items: flex-start; }
.trend-heading p { margin: 5px 0 0; }
.trend-controls {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.financial-chart {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdfc);
}
.trend-svg { display: block; width: 100%; min-width: 720px; height: auto; }
.chart-plot-background { fill: rgba(13, 122, 69, .025); }
.chart-grid-line { stroke: #dce5df; stroke-width: 1; }
.chart-zero-line { stroke: #93a49a; stroke-width: 1.6; }
.chart-axis-tick { stroke: #93a49a; stroke-width: 1; }
.chart-axis-text { fill: #66736b; font-size: 12px; font-weight: 650; }
.chart-axis-title { fill: #4f5c54; font-size: 12px; font-weight: 800; }
.chart-x-label { font-size: 11px; }
.chart-series-line {
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.chart-series-point {
    stroke: #fff;
    stroke-width: 2.5;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}
.chart-series-point:hover, .chart-series-point:focus { r: 7; outline: none; }
.trend-sales { stroke: #0d7a45; fill: #0d7a45; }
.trend-profit { stroke: #6d3cc9; fill: #6d3cc9; }
.trend-expenses { stroke: #d97706; fill: #d97706; }
.trend-result { stroke: #18201c; fill: #18201c; }
.chart-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 15px 0 2px;
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.chart-legend-swatch { width: 24px; height: 4px; border-radius: 999px; }
.chart-loading, .chart-empty {
    min-height: 420px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 750;
}
@media (max-width: 1050px) {
    .persistence-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .persistent-save-status { display: none; }
}
@media (max-width: 760px) {
    .persistence-metrics { grid-template-columns: 1fr; }
    .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
    .financial-chart { min-height: 350px; }
    .trend-svg { min-width: 680px; }
    .chart-loading, .chart-empty { min-height: 350px; }
}
.top-notification-link + .persistent-save-status { margin-left: 0; }
.persistent-save-status + .user-chip { margin-left: 0; }
/* Correct chart-series and legend color application. */
.chart-series-line.trend-sales { stroke: #0d7a45; fill: none; }
.chart-series-line.trend-profit { stroke: #6d3cc9; fill: none; }
.chart-series-line.trend-expenses { stroke: #d97706; fill: none; }
.chart-series-line.trend-result { stroke: #18201c; fill: none; }
.chart-series-point.trend-sales { fill: #0d7a45; stroke: #fff; }
.chart-series-point.trend-profit { fill: #6d3cc9; stroke: #fff; }
.chart-series-point.trend-expenses { fill: #d97706; stroke: #fff; }
.chart-series-point.trend-result { fill: #18201c; stroke: #fff; }
.chart-legend-swatch.trend-sales { background: #0d7a45; }
.chart-legend-swatch.trend-profit { background: #6d3cc9; }
.chart-legend-swatch.trend-expenses { background: #d97706; }
.chart-legend-swatch.trend-result { background: #18201c; }

/* Build 1.9: administrator-wide data editor */
.data-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0;
}
.data-group { min-width: 0; }
.data-table-links { display: grid; gap: 9px; }
.data-table-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--black);
    text-decoration: none;
    background: #fff;
}
.data-table-link:hover {
    border-color: var(--green);
    background: var(--green-soft);
}
.data-table-link strong {
    min-width: 42px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
}
.data-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.data-editor-header h2 { margin: 4px 0; }
.wide-form-card { max-width: 1120px; }
.admin-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}
.admin-edit-grid .full-span,
.stack-form > .full-span { grid-column: 1 / -1; }
.form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    background: #fff;
    color: var(--black);
    outline: none;
    resize: vertical;
}
textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(13, 122, 69, 0.11);
}
@media (max-width: 900px) {
    .data-group-grid, .admin-edit-grid { grid-template-columns: 1fr; }
    .admin-edit-grid .full-span { grid-column: auto; }
    .data-editor-header { align-items: flex-start; flex-direction: column; }
}

/* Build 1.9.2: visible, searchable and grouped feature navigation. */
.sidebar {
    overflow: hidden;
}

.sidebar nav {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    padding-right: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.22) transparent;
}

.sidebar nav::-webkit-scrollbar { width: 7px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
}

.nav-search-wrap {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 5px 10px;
    background: #10251a;
}

.nav-search-icon {
    position: absolute;
    left: 17px;
    color: rgba(255,255,255,0.62);
    pointer-events: none;
}

.nav-search-wrap input {
    min-height: 40px;
    padding: 8px 12px 8px 35px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 11px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: none;
}

.nav-search-wrap input::placeholder { color: rgba(255,255,255,0.55); }
.nav-search-wrap input:focus {
    border-color: rgba(255,255,255,0.42);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.nav-feature-count {
    padding: 0 9px 9px;
    color: rgba(255,255,255,0.47);
    font-size: 11px;
    font-weight: 750;
}

.nav-groups { display: grid; gap: 8px; }

.nav-group {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
    overflow: hidden;
}

.nav-group summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
    color: rgba(255,255,255,0.76);
    font-size: 12px;
    font-weight: 850;
    user-select: none;
}

.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
    content: "›";
    margin-left: 2px;
    font-size: 20px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    color: rgba(255,255,255,0.45);
}
.nav-group[open] summary::after { transform: rotate(90deg); }
.nav-group summary:hover { background: rgba(255,255,255,0.06); color: #fff; }

.nav-group-icon {
    width: 23px;
    text-align: center;
    font-size: 15px;
}
.nav-group-title { flex: 1; }
.nav-group-count {
    min-width: 22px;
    min-height: 22px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.68);
    font-size: 10px;
}

.nav-group-links {
    display: grid;
    gap: 4px;
    padding: 0 6px 7px;
}

.nav-group-links .nav-item {
    min-height: 41px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 13px;
}

.nav-group-links .nav-item.active {
    background: rgba(255,255,255,0.15);
    box-shadow: inset 3px 0 0 #56d68b;
}

.nav-no-results {
    margin: 12px 5px;
    padding: 14px 12px;
    border-radius: 11px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 12px;
}

.logout-form {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 760px) {
    .sidebar { padding-bottom: 14px; }
    .sidebar nav { max-height: calc(100vh - 160px); }
    .nav-search-wrap { padding-top: 4px; }
}

/* Build 1.9.2: administrator import and export centre. */
.alert.info {
    background: #eef7ff;
    border: 1px solid #cfe5fa;
    color: #174b73;
    line-height: 1.55;
}
.help-details {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fafcfb;
}
.help-details summary {
    cursor: pointer;
    padding: 13px 15px;
    font-weight: 800;
    color: var(--green-dark);
}
.template-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 15px 15px;
}
.empty-cell {
    text-align: center;
    color: var(--muted);
    padding: 24px;
}

/* Build 1.9.4 accessible search, import/export shortcuts and validation. */
.topbar-global-search {
    margin-left: 0;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    min-width: 190px;
    max-width: 430px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
    overflow: hidden;
}
.topbar-global-search > span { padding-left: 13px; color: var(--green); font-size: 20px; }
.topbar-global-search input { min-height: 44px; border: 0; box-shadow: none !important; background: transparent; }
.topbar-global-search button { height: 100%; border: 0; padding: 0 15px; background: var(--green); color: #fff; font-weight: 800; cursor: pointer; }
.topbar-import-export { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid var(--green); border-radius: 13px; color: var(--green-dark); text-decoration: none; white-space: nowrap; font-size: 13px; }
.topbar-import-export span { font-size: 20px; }
.dashboard-quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
.dashboard-quick-actions a { display:flex;align-items:center;gap:12px;padding:15px 17px;background:#fff;border:1px solid var(--border);border-radius:16px;text-decoration:none;color:var(--black);box-shadow:0 7px 20px rgba(25,58,40,.04); }
.dashboard-quick-actions a > span { width:42px;height:42px;border-radius:13px;background:var(--green-soft);display:grid;place-items:center;font-size:21px; }
.dashboard-quick-actions strong,.dashboard-quick-actions small { display:block; }
.dashboard-quick-actions small { color:var(--muted);margin-top:3px; }
.dataset-filter { display:flex;align-items:center;gap:10px;margin:0 0 17px;padding:10px 13px;border:1px solid var(--border);border-radius:14px;background:var(--background); }
.dataset-filter input { border:0;background:transparent;box-shadow:none!important;min-height:40px; }
.dataset-filter strong { white-space:nowrap;color:var(--muted);font-size:12px; }
.global-search-hero { display:flex;align-items:center;gap:10px;margin:20px 0;padding:14px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow); }
.global-search-hero > span { font-size:27px;color:var(--green); }
.global-search-hero input { flex:1;font-size:16px; }
.search-summary { margin:15px 0;color:var(--muted); }
.global-result-section { margin:18px 0;background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px; }
.global-result-card { display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-top:1px solid var(--border); }
.global-result-card:first-of-type { border-top:0; }
.global-result-card h3 { margin:4px 0; }
.global-result-card p { margin:0;color:var(--muted); }
.feature-directory-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.feature-directory-card { display:grid;gap:4px;padding:14px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--black); }
.feature-directory-card:hover { border-color:var(--green);background:var(--green-soft); }
.feature-directory-card span { font-weight:850; }
.feature-directory-card small { color:var(--muted); }
.required-mark { justify-self:start;display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;background:#fff1f0;color:var(--danger);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;margin-bottom:-3px; }
.field-invalid { border-color:var(--danger)!important;box-shadow:0 0 0 4px rgba(180,35,24,.12)!important; }
.fz-warning-toast { position:fixed;right:22px;top:96px;z-index:9999;max-width:420px;display:grid;gap:3px;padding:15px 18px;border-radius:15px;background:#fff7e6;border:1px solid #f2c66d;color:#7a4b00;box-shadow:0 18px 45px rgba(0,0,0,.18);transform:translateY(-18px);opacity:0;pointer-events:none;transition:.2s ease; }
.fz-warning-toast.show { transform:translateY(0);opacity:1; }
.fz-warning-toast strong,.fz-warning-toast span { display:block; }
.unit-badge { display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);font-weight:800;white-space:nowrap; }
.field-help { color:var(--muted);font-weight:500;line-height:1.4; }
.banner-actions { display:flex;gap:10px;align-items:center; }
@media (max-width: 1100px) {
    .topbar-global-search { min-width:260px; }
    .topbar-import-export strong { display:none; }
    .feature-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .topbar-global-search { order:5;width:100%;min-width:0;margin:7px 0 0; }
    .topbar { flex-wrap:wrap; }
    .topbar-global-search button { padding:0 11px; }
    .topbar-import-export { margin-left:auto; }
    .dashboard-quick-actions,.feature-directory-grid { grid-template-columns:1fr; }
    .global-search-hero,.global-result-card { align-items:stretch;flex-direction:column; }
    .dataset-filter { align-items:stretch;flex-direction:column; }
    .dataset-filter strong { white-space:normal; }
    .fz-warning-toast { left:14px;right:14px;top:84px;max-width:none; }
}

/* Build 1.9.4 smart import and printable templates. */
.template-link-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.template-link-item strong { color: var(--black); font-size: 13px; }
.export-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Official FEMELTZ business branding integration */
img.login-logo,
img.brand-mark,
img.receipt-logo,
img.print-logo,
img.print-brand {
    object-fit: contain;
}

img.official-login-logo {
    width: 116px;
    height: 116px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 13px 30px rgba(13, 122, 69, 0.2);
}

img.official-brand-mark {
    width: 52px;
    height: 52px;
    padding: 2px;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}

.business-context {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 5px 9px 5px 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    flex: 0 0 auto;
}

.business-context img {
    width: 43px;
    height: 43px;
    object-fit: contain;
    border-radius: 10px;
}

.business-context span {
    max-width: 132px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}

.business-context-pharmacy img { padding: 5px; background: #f7faf8; }

.business-identity-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.business-identity-strip article,
.business-identity-strip a {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 17px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(25, 58, 40, 0.05);
}

.business-identity-strip a:hover {
    border-color: rgba(13, 122, 69, 0.42);
    transform: translateY(-1px);
}

.business-identity-strip img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: 0 0 auto;
}

.business-identity-strip strong,
.business-identity-strip span { display: block; }
.business-identity-strip span { margin-top: 4px; color: var(--muted); font-size: 12px; }

img.official-print-logo {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    padding: 4px;
    background: #fff;
}

img.pharmacy-print-logo { padding: 7px; }

img.official-print-brand {
    width: 82px;
    height: 82px;
    padding: 4px;
    border-radius: 14px;
    background: #fff;
}

img.corporate-print-brand { border-radius: 50%; }
img.pharmacy-print-brand { padding: 9px; }

@media (max-width: 1120px) {
    .business-context span { display: none; }
    .business-context { padding-right: 6px; }
}

@media (max-width: 1650px) {
    .persistent-save-status { display: none; }
    .user-chip div:last-child { display: none; }
    .topbar-heading { flex-basis: 280px; }
}

@media (max-width: 820px) {
    .business-identity-strip { grid-template-columns: 1fr; }
    .business-context { display: none; }
}

@media print {
    .business-context,
    .business-identity-strip { display: none !important; }
    img.official-print-logo,
    img.official-print-brand {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Build 1.9.4 sidebar collapse update. */
.sidebar {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
}

.main-area {
    transition: margin-left 0.22s ease;
}

.menu-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
    color: var(--green-dark);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.menu-button:hover {
    background: var(--green-soft);
    border-color: rgba(13, 122, 69, 0.28);
}

.menu-button:active { transform: scale(0.96); }
.menu-button:focus-visible {
    outline: 3px solid rgba(13, 122, 69, 0.22);
    outline-offset: 2px;
}

html.sidebar-collapsed .sidebar {
    transform: translateX(-105%);
    box-shadow: none;
}

html.sidebar-collapsed .main-area {
    margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .main-area, .menu-button { transition: none !important; }
}

@media (max-width: 760px) {
    html.sidebar-collapsed .sidebar { transform: translateX(-105%); }
    html.sidebar-collapsed .sidebar.open { transform: translateX(0); }
    html.sidebar-collapsed .main-area { margin-left: 0; }
}


/* Build 1.9.6 two-step security */
.secret-key {
  margin: 1rem 0; padding: 1rem; border: 2px dashed var(--border, #cbd5e1);
  border-radius: 12px; text-align: center; font-size: 1.05rem; letter-spacing: .08em;
  overflow-wrap: anywhere; background: rgba(15, 23, 42, .04);
}
.wrap-code { display: block; white-space: normal; overflow-wrap: anywhere; margin-top: .75rem; }
.recovery-code-list { columns: 2; gap: 2rem; margin: 1rem 0 0; padding-left: 1.5rem; }
.recovery-code-list li { margin: .45rem 0; break-inside: avoid; }
.danger-zone { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border, #d7dee8); }
@media (max-width: 640px) { .recovery-code-list { columns: 1; } }
@media print { .recovery-code-list { columns: 2; } .danger-zone { display: none !important; } }

/* Build 1.9.8.1: simplified automatic and manual product entry */
.product-entry-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.product-entry-steps article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border, #d9e2df);
  border-radius: 14px;
  background: var(--panel, #fff);
}
.product-entry-steps article > strong {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f6b4f;
  color: #fff;
}
.product-entry-steps article > span { font-weight: 800; }
.product-entry-steps article > small { color: var(--muted, #66736f); }
.easy-product-entry { margin: 16px 0; }
.easy-entry-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.easy-entry-heading h3 { margin: 3px 0 5px; }
.easy-entry-heading p { margin: 0; color: var(--muted, #66736f); }
.easy-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.easy-entry-card, .advanced-product-entry { padding: 0; overflow: hidden; }
.easy-entry-card > summary, .advanced-product-entry > summary {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  background: rgba(15, 107, 79, 0.06);
  border-bottom: 1px solid transparent;
}
.easy-entry-card[open] > summary, .advanced-product-entry[open] > summary {
  border-bottom-color: var(--border, #d9e2df);
}
.easy-entry-card > summary::-webkit-details-marker,
.advanced-product-entry > summary::-webkit-details-marker { display: none; }
.easy-entry-card > summary > span, .advanced-product-entry > summary > span {
  font-size: 1.35rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
}
.easy-entry-card > summary div, .advanced-product-entry > summary div { display: grid; gap: 2px; }
.easy-entry-card > summary small, .advanced-product-entry > summary small { color: var(--muted, #66736f); }
.easy-entry-form, .advanced-product-entry form { padding: 18px; }
.optional-fields { border: 1px dashed var(--border, #d9e2df); border-radius: 10px; padding: 10px 12px; }
.optional-fields > summary { cursor: pointer; font-weight: 700; }
.optional-fields[open] > summary { margin-bottom: 10px; }
.advanced-product-entry { margin: 16px 0; }
.product-table-full { margin-top: 16px; }
@media (max-width: 900px) {
  .easy-entry-grid, .product-entry-steps { grid-template-columns: 1fr; }
  .easy-entry-heading { flex-direction: column; }
}

/* Build 1.9.8.2 administrator-controlled product entry */
.role-permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.role-permission-grid .check-option {
    align-items: flex-start;
    min-height: 72px;
}
.role-permission-grid .check-option span {
    display: grid;
    gap: 0.2rem;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.table-edit-form {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(110px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
}

.table-edit-form label,
.table-edit-form input,
.table-edit-form select {
    margin: 0;
    width: 100%;
}

@media (max-width: 820px) {
    .table-edit-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}
.duplicate-guard-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #b8d6c3;
    border-left: 4px solid #237a43;
    border-radius: 10px;
    background: #f1faf4;
    color: #174c2c;
}

.duplicate-guard-strip > span {
    font-size: 1.35rem;
}

.duplicate-guard-strip strong,
.duplicate-guard-strip small {
    display: block;
}

.duplicate-guard-strip small {
    margin-top: 0.15rem;
    color: #376348;
    line-height: 1.35;
}

.duplicate-block-icon {
    font-size: 2.6rem;
    margin-bottom: 0.25rem;
}
.customer-profile-layout {
    display: grid;
    gap: 1rem;
}

.customer-profile-panel {
    min-width: 0;
}

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

.customer-form-section {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border, #d9e2dc);
    border-radius: 12px;
    background: #fbfdfb;
}

.customer-form-section legend {
    padding: 0 0.45rem;
    font-weight: 800;
    color: #174c2c;
}

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

.customer-form-grid label {
    min-width: 0;
}

.customer-filter {
    padding: 0 1rem 1rem;
}

.customer-filter input[type="search"] {
    min-width: min(25rem, 100%);
}

@media (max-width: 850px) {
    .customer-profile-form,
    .customer-form-grid {
        grid-template-columns: 1fr;
    }
}
.customer-safe-delete {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
}

.customer-safe-delete > div {
    margin-bottom: 0.75rem;
}

.customer-safe-delete h4 {
    margin: 0.15rem 0 0.35rem;
}

.customer-safe-delete.restore-panel {
    border: 1px solid #9bc7a8;
    background: #f2faf4;
}

/* Build 1.9.9.29: role-aware ordinary-user daily work centre */
.easy-work-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 19px 22px;
    border: 1px solid #b9e5cf;
    border-radius: 14px;
    background: linear-gradient(135deg, #effcf5, #f8fffb);
}
.easy-work-callout h2 {
    margin: 3px 0 4px;
    font-size: 21px;
}
.easy-work-callout p {
    margin: 0;
    color: var(--muted);
}
.daily-task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.daily-task-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 94px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.daily-task-card:hover,
.daily-task-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(18, 92, 55, .10);
    transform: translateY(-1px);
    outline: none;
}
.daily-task-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: var(--green-soft);
    color: var(--success);
    font-size: 21px;
    font-weight: 800;
}
.daily-task-copy,
.daily-task-copy strong,
.daily-task-copy span {
    display: block;
}
.daily-task-copy strong {
    margin-bottom: 4px;
    font-size: 15px;
}
.daily-task-copy span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.daily-task-open {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.daily-more-panel {
    margin-top: 18px;
}
.daily-work-groups {
    display: grid;
    gap: 10px;
}
.daily-work-group {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
}
.daily-work-group summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    cursor: pointer;
    font-weight: 800;
}
.daily-work-group summary span:last-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.daily-work-group[open] summary {
    border-bottom: 1px solid var(--border);
}
.daily-task-grid.compact {
    padding: 13px;
}
.daily-task-grid.compact .daily-task-card {
    min-height: 82px;
}
.daily-work-note {
    color: var(--muted);
    text-align: center;
}

/* Enterprise 2.0 Stage BA: advanced guided work for ordinary users */
.wizard-start-actions,
.guided-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.guided-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}
.guided-how-grid article {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid #b9e5cf;
    border-radius: 12px;
    background: #f5fcf8;
}
.guided-how-grid strong {
    color: var(--primary);
    font-size: 15px;
}
.guided-how-grid span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.guided-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 10px;
}
.guided-search-form label,
.guided-search-form input {
    width: 100%;
}
.guided-task-card {
    min-height: 104px;
}
.guided-area-card .daily-task-icon {
    background: #eaf7ef;
    color: var(--primary);
}
.guided-progress {
    height: 11px;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3eee7;
}
.guided-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #48a66e);
}
.guided-step-list {
    display: grid;
    gap: 13px;
}
.guided-step-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}
.guided-step-card h3 {
    margin: 3px 0 10px;
}
.guided-step-card p {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.55;
}
.guided-step-number {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}
.guided-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.guided-checklist li {
    position: relative;
    padding-left: 25px;
    line-height: 1.5;
}
.guided-checklist li::before {
    position: absolute;
    left: 0;
    content: "✓";
    color: var(--success);
    font-weight: 900;
}
.guided-launch {
    display: inline-block;
    margin-top: 2px;
}
.guided-footer-actions {
    justify-content: space-between;
    margin-top: 16px;
}
.guided-control-note {
    border-left: 4px solid var(--primary);
}

/* Build 1.9.9.29: unified employee and permission review */
.access-task-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .8rem;
}

.access-task-list span {
    display: inline-flex;
    align-items: center;
    padding: .48rem .72rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: .86rem;
    font-weight: 650;
}

.access-role-card summary {
    cursor: pointer;
}

/* Enterprise 2.0 Stage AY: accessible summary-card drill-downs. */
.clickable-summary-card {
    position: relative;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

:is(.metric-card, .stat-card).clickable-summary-card {
    box-sizing: border-box;
    padding-bottom: 44px;
}

.clickable-summary-card:hover,
.clickable-summary-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 10px 28px rgba(18, 92, 55, .14);
    transform: translateY(-2px);
}

.clickable-summary-card:focus-visible {
    outline: 3px solid rgba(18, 92, 55, .22);
    outline-offset: 3px;
}

.summary-card-open {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    margin: 0 !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.stats-grid .stat-card.clickable-summary-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.stats-grid .stat-card.clickable-summary-card .summary-card-open {
    margin: 0 !important;
}

section[id] {
    scroll-margin-top: 108px;
}

@media (prefers-reduced-motion: reduce) {
    .clickable-summary-card {
        transition: none;
    }
}
@media (max-width: 820px) {
    .daily-task-grid {
        grid-template-columns: 1fr;
    }
    .guided-how-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .easy-work-callout {
        align-items: stretch;
        flex-direction: column;
    }
    .easy-work-callout .primary-button {
        width: 100%;
        text-align: center;
    }
    .daily-task-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .daily-task-open {
        display: none;
    }
    .wizard-start-actions,
    .guided-footer-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .wizard-start-actions .button-link,
    .guided-footer-actions .button-link {
        width: 100%;
        text-align: center;
    }
    .guided-search-form {
        grid-template-columns: 1fr;
    }
    .guided-step-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 15px;
    }
    .guided-step-number {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* Enterprise 2.0 Stage BB: plain-language accounting statements. */
.simple-accounting-banner {
    align-items: center;
}
.accounting-period-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
}
.accounting-period-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}
.accounting-period-button:hover,
.accounting-period-button:focus-visible,
.accounting-period-button.active {
    border-color: var(--primary);
    background: var(--green-soft);
    color: var(--primary);
}
.simple-accounting-filter {
    display: grid;
    gap: 15px;
}
.accounting-filter-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}
.accounting-ledger-filter {
    grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.4fr) auto;
    align-items: end;
}
.accounting-ledger-filter .primary-button {
    min-height: 48px;
}
.accounting-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--border);
}
.accounting-status-strip > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--surface);
}
.accounting-status-strip span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.accounting-status-strip strong {
    overflow-wrap: anywhere;
}
.accounting-summary-cards .stat-card {
    color: inherit;
    text-decoration: none;
}
.accounting-summary-cards .stat-card:hover,
.accounting-summary-cards .stat-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(18, 92, 55, .12);
}
.accounting-explainer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.accounting-explainer-grid article {
    display: grid;
    gap: 6px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}
.accounting-explainer-grid span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.accounting-statement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.accounting-statement-grid .panel {
    margin: 0;
}
.accounting-statement-grid h4 {
    margin: 20px 0 5px;
}
.account-code {
    display: inline-block;
    min-width: 48px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}
#cash-movement,
#trial-balance,
#general-ledger {
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .accounting-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .accounting-explainer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .accounting-filter-grid,
    .accounting-ledger-filter,
    .accounting-status-strip,
    .accounting-explainer-grid,
    .accounting-statement-grid {
        grid-template-columns: 1fr;
    }
    .accounting-period-button {
        flex: 1 1 calc(50% - 9px);
    }
}
@media (max-width: 520px) {
    .accounting-period-button {
        flex-basis: 100%;
    }
}
@media print {
    .accounting-status-strip,
    .accounting-explainer-grid,
    .accounting-statement-grid,
    #cash-movement,
    #trial-balance {
        break-inside: avoid;
    }
    .accounting-statement-grid {
        display: block;
    }
    .accounting-statement-grid .panel {
        margin-bottom: 16px;
    }
}

/* Enterprise 2.0 Stage BB4: customer-payment balance receipt and settlement stamp. */
.customer-payment-balance-summary {
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.customer-payment-balance-summary > div {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}
.customer-payment-balance-summary span,
.customer-payment-balance-summary strong {
    display: block;
}
.customer-payment-balance-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.customer-payment-balance-summary strong {
    margin-top: 5px;
    color: var(--green-dark);
    font-size: 20px;
}
.customer-payment-balance-summary .remaining-balance {
    border-width: 2px;
    border-color: var(--green);
    background: var(--green-soft);
}
.paid-in-full-stamp {
    width: fit-content;
    margin: 6px auto 24px;
    padding: 10px 22px 8px;
    border: 4px double #b91c1c;
    border-radius: 8px;
    color: #b91c1c;
    background: rgba(255,255,255,.96);
    font-size: 27px;
    font-weight: 950;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-4deg);
}
@media (max-width: 720px) {
    .customer-payment-balance-summary { grid-template-columns: 1fr; }
}
@media print {
    .paid-in-full-stamp {
        color: #b91c1c !important;
        border-color: #b91c1c !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Enterprise 2.0 Stage BB8 simple sales */
.simple-sales-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}.simple-sales-choice .action-card{text-decoration:none;color:inherit;min-height:170px}.simple-sales-banner{border-left:5px solid #27935a}.simple-sales-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}.simple-sale-lines{display:grid;gap:10px}.simple-sale-line{display:grid;grid-template-columns:42px 82px 100px minmax(200px,1.7fr) 82px 118px 122px 40px;grid-template-areas:"no qty pack desc unit price total remove";gap:8px;align-items:end;padding:10px;border:1px solid rgba(40,80,55,.13);border-radius:12px;min-width:0}.simple-sale-line .line-number{grid-area:no}.simple-line-qty{grid-area:qty}.simple-line-packing{grid-area:pack}.simple-line-description{grid-area:desc;min-width:0}.simple-line-unit{grid-area:unit}.simple-line-price{grid-area:price}.simple-line-total{grid-area:total}.simple-line-remove{grid-area:remove}.simple-sale-line label{margin:0;min-width:0}.simple-sale-line output,.simple-sale-line strong{display:block;min-height:42px;padding:11px 9px;border:1px solid rgba(40,80,55,.12);border-radius:9px;background:#fafcf9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.simple-sale-line select,.simple-sale-line input{min-height:42px;min-width:0;width:100%}@media(max-width:1450px){.simple-sale-line{grid-template-columns:36px 88px 104px minmax(190px,1fr) 40px;grid-template-areas:"no qty pack desc remove" ". unit price total .";row-gap:9px}.simple-line-unit,.simple-line-price,.simple-line-total{min-width:0}}@media(max-width:980px){.simple-sales-choice{grid-template-columns:1fr}.pos-form{grid-template-columns:1fr}.simple-sale-line{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"no desc desc" ". qty pack" ". unit price" ". total total" ". remove remove";overflow:visible}.simple-line-remove{justify-self:start}.checkout-card{position:static}}

/* Enterprise 2.0 Stage BB10: keep Add Another Line immediately below the
   current sales/pro-forma lines for ordinary users. */
.simple-lines-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(40,80,55,.12)}
.simple-lines-footer small{color:#66756b}
@media(max-width:760px){.simple-lines-footer{align-items:stretch}.simple-lines-footer .secondary-button{width:100%}}
/* BB16 data-mode labels */
.bb16-mode-chip {
    flex: 0 0 auto;
    display: grid;
    gap: 1px;
    padding: 6px 9px;
    border: 1px solid #f2b84b;
    border-radius: 8px;
    background: #fff8e6;
    color: #7a4900;
    line-height: 1.15;
    text-decoration: none;
}
.bb16-mode-chip:hover { border-color: #d99100; background: #fff2cc; }
.bb16-mode-chip:focus-visible { outline: 3px solid rgba(247,144,9,.28); outline-offset: 2px; }
.bb16-mode-chip strong {
    font-size: 11px;
    letter-spacing: 0;
}
.bb16-mode-chip small {
    font-size: 10px;
    color: #8a5700;
}
.bb16-mode-chip.staging {
    border-color: #84adff;
    background: #eff4ff;
    color: #1849a9;
}
.bb16-mode-chip.staging small { color: #175cd3; }
.bb16-data-notice {
    display: flex;
    align-items: center;
    gap: 11px;
    border-left: 4px solid #f79009 !important;
    border-radius: 8px;
}
.bb16-data-label {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 6px;
    background: #7a4900;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}
@media (max-width: 760px) {
    .bb16-mode-chip small { display: none; }
    .bb16-mode-chip { padding: 5px 7px; }
}
@media (max-width: 500px) {
    .bb16-data-notice {
        display: grid;
        align-items: start;
    }
    .bb16-data-label { width: max-content; }
}

/* BB16 test-data and real-use guide */
.bb16-guide-hero { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 16px; }
.bb16-guide-hero h2 { margin: 0; font-size: 1.6rem; }
.bb16-guide-hero p { max-width: 760px; }
.bb16-guide-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bb16-guide-status { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #d7dee8; border-radius: 8px; background: #fff; margin-bottom: 16px; }
.bb16-guide-status > div { display: grid; gap: 4px; padding: 14px; min-width: 0; }
.bb16-guide-status > div + div { border-left: 1px solid #d7dee8; }
.bb16-guide-status span,.bb16-guide-status small { color: #667085; }
.bb16-guide-status strong { color: #101828; overflow-wrap: anywhere; }
.bb16-guide-warning { padding: 15px 16px; border: 1px solid #f2b84b; border-left: 4px solid #f79009; border-radius: 8px; background: #fff8e6; margin-bottom: 18px; }
.bb16-guide-warning strong { color: #7a4900; }
.bb16-guide-warning p { margin: 5px 0 0; color: #694f20; }
.bb16-guide-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.8fr); gap: 20px; padding: 4px 0 20px; border-bottom: 1px solid #d7dee8; }
.bb16-guide-main h3,.bb16-guide-dont h3,.bb16-guide-band h3 { margin: 3px 0 10px; font-size: 1.18rem; }
.bb16-live-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bb16-live-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #e4e7ec; }
.bb16-live-steps li:first-child { border-top: 0; }
.bb16-live-steps li > span { display: grid; place-items: center; align-self: start; width: 32px; height: 32px; border: 1px solid #b8c2cf; border-radius: 50%; color: #475467; font-weight: 800; }
.bb16-live-steps li.done > span { border-color: #27935a; background: #e7f3ec; color: #157f3b; }
.bb16-live-steps li.current > span { border-color: #27935a; background: #e7f3ec; color: #157f3b; }
.bb16-live-steps p { margin: 3px 0 0; color: #667085; }
.bb16-live-step-heading { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.bb16-live-step-state { padding: 3px 7px; border-radius: 6px; background: #f2f4f7; color: #475467; font-size: .76rem; font-weight: 800; }
.bb16-live-steps li.done .bb16-live-step-state { background: #dff4e7; color: #157f3b; }
.bb16-live-steps li.current .bb16-live-step-state { background: #e8f1ff; color: #175cd3; }
.bb16-safe-next { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 16px; border: 1px solid #84adff; border-left: 4px solid #175cd3; border-radius: 8px; background: #f5f8ff; margin-bottom: 18px; }
.bb16-safe-next h3 { margin: 3px 0 5px; font-size: 1.18rem; }
.bb16-safe-next p { margin: 0; color: #475467; }
.bb16-owner-note { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 10px; border: 1px solid #b8c2cf; border-radius: 6px; background: #fff; color: #475467; font-size: .84rem; font-weight: 800; white-space: nowrap; }
.bb16-guide-dont { align-self: start; padding: 16px; border: 1px solid #f7b4a9; border-radius: 8px; background: #fff5f2; }
.bb16-guide-dont ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: #7a271a; }
.bb16-guide-band { display: grid; gap: 14px; padding: 20px 0; border-bottom: 1px solid #d7dee8; }
.bb16-guide-band p { margin: 0; color: #667085; }
.bb16-guide-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.bb16-guide-count { display: grid; gap: 4px; min-width: 0; padding: 13px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; }
.bb16-guide-count strong { font-size: 1.28rem; color: #101828; }
.bb16-guide-count span { font-weight: 750; color: #344054; }
.bb16-guide-count small { color: #667085; }
.bb16-owner-actions { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.bb16-user-guidance { border-left: 4px solid #27935a; padding-left: 14px; }
@media (max-width: 980px) {
    .bb16-guide-status,.bb16-guide-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bb16-guide-status > div + div { border-left: 0; }
    .bb16-guide-status > div:nth-child(even) { border-left: 1px solid #d7dee8; }
    .bb16-guide-status > div:nth-child(n+3) { border-top: 1px solid #d7dee8; }
}
@media (max-width: 760px) {
    .bb16-guide-hero,.bb16-owner-actions { grid-template-columns: 1fr; display: grid; }
    .bb16-guide-layout { grid-template-columns: 1fr; }
    .bb16-safe-next { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .bb16-guide-status,.bb16-guide-counts { grid-template-columns: 1fr; }
    .bb16-guide-status > div + div,.bb16-guide-status > div:nth-child(even) { border-left: 0; border-top: 1px solid #d7dee8; }
    .bb16-guide-buttons { display: grid; }
}

/* BB16 simple practice walkthrough */
.bb16-practice-hero { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 16px; }
.bb16-practice-hero h2,.bb16-practice-live h2 { margin: 0; font-size: 1.6rem; }
.bb16-practice-hero p { max-width: 760px; }
.bb16-practice-progress { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(280px,1.3fr); gap: 20px; align-items: center; padding: 15px 16px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; margin-bottom: 14px; }
.bb16-practice-progress > div { display: grid; gap: 3px; }
.bb16-practice-progress span,.bb16-practice-progress small { color: #667085; }
.bb16-practice-progress strong { font-size: 1.28rem; color: #101828; }
.bb16-practice-progress progress { display: block; width: 100%; height: 15px; accent-color: #27935a; }
.bb16-practice-next { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 16px; border: 1px solid #84adff; border-left: 4px solid #175cd3; border-radius: 8px; background: #f5f8ff; margin-bottom: 18px; }
.bb16-practice-next.complete { border-color: #8bc8a5; border-left-color: #27935a; background: #f3faf5; }
.bb16-practice-next h3 { margin: 3px 0 5px; font-size: 1.18rem; }
.bb16-practice-next p { margin: 0; color: #475467; }
.bb16-practice-list { padding: 2px 0 20px; }
.bb16-practice-heading { margin-bottom: 8px; }
.bb16-practice-heading h3 { margin: 3px 0 5px; font-size: 1.18rem; }
.bb16-practice-heading p { margin: 0; color: #667085; }
.bb16-practice-list ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #d7dee8; }
.bb16-practice-step { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 92px; padding: 13px 4px; border-bottom: 1px solid #d7dee8; }
.bb16-practice-step.current { background: #f5f8ff; box-shadow: inset 4px 0 #175cd3; padding-left: 12px; padding-right: 12px; }
.bb16-practice-number { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b8c2cf; border-radius: 50%; color: #475467; font-weight: 800; }
.bb16-practice-step.done .bb16-practice-number { border-color: #27935a; background: #e7f3ec; color: #157f3b; }
.bb16-practice-step.current .bb16-practice-number { border-color: #175cd3; background: #e8f1ff; color: #175cd3; }
.bb16-practice-step.locked .bb16-practice-number { background: #f2f4f7; color: #667085; }
.bb16-practice-copy { display: grid; gap: 4px; min-width: 0; }
.bb16-practice-copy > div { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.bb16-practice-copy p { margin: 0; color: #475467; }
.bb16-practice-copy small,.bb16-practice-role { color: #667085; }
.bb16-practice-state { padding: 3px 7px; border-radius: 6px; background: #fff1df; color: #945200; font-size: .76rem; font-weight: 800; }
.bb16-practice-step.done .bb16-practice-state { background: #dff4e7; color: #157f3b; }
.bb16-practice-step.current .bb16-practice-state { background: #e8f1ff; color: #175cd3; }
.bb16-practice-step.locked .bb16-practice-state { background: #f2f4f7; color: #475467; }
.bb16-practice-action { min-width: 105px; text-align: right; }
.bb16-practice-live { padding: 20px 0; }
.bb16-practice-live p { color: #667085; }
@media (max-width: 760px) {
    .bb16-practice-hero,.bb16-practice-progress { grid-template-columns: 1fr; display: grid; }
    .bb16-practice-next { display: grid; }
}

/* BB16 guided Daily Closing completion */
.daily-closing-checks {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.daily-closing-checks legend {
    width: 100%;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.daily-closing-checks .checkbox-line {
    align-items: flex-start;
    min-height: 48px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    line-height: 1.45;
}
.daily-closing-checks .checkbox-line:last-child { border-bottom: 0; }
.daily-closing-checks input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin-top: 1px;
    accent-color: var(--green);
}
.daily-closing-complete {
    border-left: 4px solid var(--green);
}
.daily-closing-complete p {
    margin: 0 0 14px;
    color: var(--muted);
}
.daily-closing-next-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 520px) {
    .daily-closing-next-actions { display: grid; }
    .daily-closing-next-actions .button-link { width: 100%; text-align: center; }
}
@media (max-width: 560px) {
    .bb16-practice-step { grid-template-columns: 34px minmax(0,1fr); align-items: start; }
    .bb16-practice-action { grid-column: 2; min-width: 0; text-align: left; }
    .bb16-practice-action .button-link { width: 100%; }
}

/* BB16 simple recovery check */
.bb16-recovery-hero h2 { margin-bottom: 5px; }
.bb16-recovery-simple {
    border-left: 4px solid #175cd3;
    border-radius: 8px;
}
.bb16-recovery-simple[data-recovery-state="complete"] { border-left-color: #27935a; }
.bb16-recovery-simple[data-recovery-state="backup_needed"] { border-left-color: #f79009; }
.bb16-recovery-heading { align-items: flex-start; }
.bb16-recovery-heading h3 { margin: 3px 0 5px; font-size: 1.22rem; }
.bb16-recovery-heading p { max-width: 760px; margin: 0; color: #475467; }
.bb16-recovery-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
    list-style: none;
}
.bb16-recovery-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 15px 14px;
}
.bb16-recovery-steps li + li { border-left: 1px solid #d7dee8; }
.bb16-recovery-step-number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #b8c2cf;
    border-radius: 50%;
    color: #475467;
    font-weight: 850;
}
.bb16-recovery-steps li.done .bb16-recovery-step-number {
    border-color: #27935a;
    background: #e7f3ec;
    color: #157f3b;
}
.bb16-recovery-steps li.current .bb16-recovery-step-number {
    border-color: #175cd3;
    background: #e8f1ff;
    color: #175cd3;
}
.bb16-recovery-steps li.locked .bb16-recovery-step-number {
    background: #f2f4f7;
    color: #667085;
}
.bb16-recovery-step-heading { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.bb16-recovery-step-heading span {
    padding: 3px 7px;
    border-radius: 6px;
    background: #f2f4f7;
    color: #475467;
    font-size: .75rem;
    font-weight: 800;
}
.bb16-recovery-steps li.done .bb16-recovery-step-heading span { background: #dff4e7; color: #157f3b; }
.bb16-recovery-steps li.current .bb16-recovery-step-heading span { background: #e8f1ff; color: #175cd3; }
.bb16-recovery-steps p { margin: 4px 0 0; color: #667085; font-size: .84rem; line-height: 1.45; }
.bb16-recovery-safety {
    display: grid;
    gap: 3px;
    margin: 16px 0;
    padding: 12px 14px;
    border-left: 4px solid #27935a;
    border-radius: 8px;
    background: #f3faf5;
    color: #344054;
}
.bb16-recovery-safety strong { color: #157f3b; }
.bb16-recovery-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.bb16-recovery-form label { display: grid; gap: 6px; min-width: 0; }
.bb16-recovery-form label small { color: #667085; }
.bb16-recovery-form select { min-width: 0; width: 100%; }
.bb16-recovery-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bb16-recovery-owner-needed {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 0 2px;
    color: #475467;
}
.bb16-recovery-owner-needed strong { color: #7a4900; }
.bb16-recovery-result {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 16px;
    padding: 0;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
}
.bb16-recovery-result > div { display: grid; gap: 4px; min-width: 0; padding: 13px; }
.bb16-recovery-result > div + div { border-left: 1px solid #d7dee8; }
.bb16-recovery-result dt { color: #667085; font-size: .78rem; }
.bb16-recovery-result dd { margin: 0; color: #101828; font-weight: 850; overflow-wrap: anywhere; }
.bb16-recovery-technical {
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
}
.bb16-recovery-technical > summary {
    display: grid;
    gap: 3px;
    padding: 15px 2px;
    color: #344054;
    cursor: pointer;
    list-style-position: inside;
}
.bb16-recovery-technical > summary span { font-weight: 850; }
.bb16-recovery-technical > summary small { color: #667085; }
.bb16-recovery-technical-body { min-width: 0; max-width: 100%; padding-top: 16px; }
.bb16-recovery-technical .summary-list > div {
    display: grid;
    grid-template-columns: minmax(90px, .4fr) minmax(0, 1fr);
    gap: 12px;
}
.bb16-recovery-technical .summary-list strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: right;
}
@media (max-width: 820px) {
    .bb16-recovery-steps { grid-template-columns: 1fr; }
    .bb16-recovery-steps li + li { border-left: 0; border-top: 1px solid #d7dee8; }
    .bb16-recovery-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb16-recovery-result > div:nth-child(3) { border-left: 0; border-top: 1px solid #d7dee8; }
    .bb16-recovery-result > div:nth-child(4) { border-top: 1px solid #d7dee8; }
}
@media (max-width: 620px) {
    .bb16-recovery-form { grid-template-columns: 1fr; }
    .bb16-recovery-form .primary-button,
    .bb16-recovery-actions .button-link,
    .bb16-recovery-actions .primary-button { width: 100%; text-align: center; }
    .bb16-recovery-result { grid-template-columns: 1fr; }
    .bb16-recovery-result > div + div,
    .bb16-recovery-result > div:nth-child(4) { border-left: 0; border-top: 1px solid #d7dee8; }
}

/* BB16 controlled live-setup handoff */
.bb16-live-setup-hero h2 { margin-bottom: 5px; }
.bb16-live-boundary {
    margin-bottom: 18px;
    padding: 15px 16px;
    border: 1px solid #f7b4a9;
    border-left: 4px solid #b42318;
    border-radius: 8px;
    background: #fff5f2;
}
.bb16-live-boundary strong { color: #912018; }
.bb16-live-boundary p { margin: 5px 0 0; color: #7a271a; }
.bb16-live-readiness {
    display: grid;
    grid-template-columns: minmax(230px, .75fr) minmax(0, 1.6fr);
    gap: 22px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
}
.bb16-live-readiness-heading h3,
.bb16-live-setup-main h3,
.bb16-live-never h3,
.bb16-live-records h3 { margin: 3px 0 6px; font-size: 1.18rem; }
.bb16-live-readiness-heading p,
.bb16-live-records > div:first-child p { margin: 0; color: #667085; }
.bb16-live-checks { display: grid; gap: 0; }
.bb16-live-check {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
    min-width: 0;
    padding: 11px 0;
    border-top: 1px solid #e4e7ec;
}
.bb16-live-check:first-child { border-top: 0; }
.bb16-live-check-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #b8c2cf;
    border-radius: 50%;
    color: #667085;
    font-weight: 850;
}
.bb16-live-check.done .bb16-live-check-mark {
    border-color: #27935a;
    background: #e7f3ec;
    color: #157f3b;
}
.bb16-live-check.waiting .bb16-live-check-mark {
    border-color: #f79009;
    background: #fff8e6;
    color: #945200;
}
.bb16-live-check p { margin: 3px 0 0; color: #667085; font-size: .84rem; line-height: 1.45; }
.bb16-live-check small { padding: 4px 7px; border-radius: 6px; background: #f2f4f7; color: #475467; font-weight: 800; }
.bb16-live-check.done small { background: #dff4e7; color: #157f3b; }
.bb16-live-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 18px 0;
    padding: 15px 16px;
    border: 1px solid #84adff;
    border-left: 4px solid #175cd3;
    border-radius: 8px;
    background: #f5f8ff;
}
.bb16-live-next h3 { margin: 3px 0 5px; font-size: 1.18rem; }
.bb16-live-next p { margin: 0; color: #475467; }
.bb16-live-setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, .65fr);
    gap: 22px;
    padding: 4px 0 20px;
    border-bottom: 1px solid #d7dee8;
}
.bb16-live-handoff-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bb16-live-handoff-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #e4e7ec;
}
.bb16-live-handoff-steps li:first-child { border-top: 0; }
.bb16-live-handoff-steps li > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #175cd3;
    border-radius: 50%;
    background: #e8f1ff;
    color: #175cd3;
    font-weight: 850;
}
.bb16-live-handoff-steps p { margin: 4px 0 0; color: #667085; line-height: 1.45; }
.bb16-live-never {
    align-self: start;
    padding: 15px 16px;
    border: 1px solid #f7b4a9;
    border-radius: 8px;
    background: #fff5f2;
}
.bb16-live-never ul { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: #7a271a; }
.bb16-live-records { display: grid; gap: 16px; padding: 20px 0; border-bottom: 1px solid #d7dee8; }
.bb16-live-record-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.bb16-live-record-heading p { margin: 0; color: #667085; }
.bb16-opening-download { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; max-width: 100%; white-space: normal; letter-spacing: 0; border-radius: 8px; }
.bb16-opening-download svg { flex: 0 0 20px; }
.bb16-opening-download span { min-width: 0; overflow-wrap: anywhere; }
.bb16-live-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb16-live-record-grid article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 13px 10px;
    border-top: 1px solid #e4e7ec;
}
.bb16-live-record-grid article:nth-child(even) { border-left: 1px solid #e4e7ec; }
.bb16-live-box { color: #475467; font-size: 1.35rem; line-height: 1; }
.bb16-live-record-grid p { margin: 4px 0 0; color: #667085; }
.bb16-live-signoff {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0;
    border-top: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
}
.bb16-live-signoff > div { display: grid; gap: 12px; min-width: 0; padding: 14px; }
.bb16-live-signoff > div + div { border-left: 1px solid #d7dee8; }
.bb16-live-signoff span { color: #667085; }
.bb16-live-signoff strong { overflow-wrap: anywhere; color: #344054; }
@media (max-width: 900px) {
    .bb16-live-readiness,
    .bb16-live-setup-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .bb16-live-next { grid-template-columns: 1fr; }
    .bb16-live-record-heading { grid-template-columns: 1fr; }
    .bb16-opening-download { justify-self: start; }
    .bb16-live-record-grid,
    .bb16-live-signoff { grid-template-columns: 1fr; }
    .bb16-live-record-grid article:nth-child(even),
    .bb16-live-signoff > div + div { border-left: 0; }
    .bb16-live-signoff > div + div { border-top: 1px solid #d7dee8; }
}
@media (max-width: 480px) {
    .bb16-live-check { grid-template-columns: 30px minmax(0, 1fr); }
    .bb16-live-check small { grid-column: 2; width: max-content; }
}
@media print {
    .bb16-live-setup-hero { break-inside: avoid; }
    .bb16-live-boundary,
    .bb16-live-readiness,
    .bb16-live-setup-layout,
    .bb16-live-records,
    .bb16-live-signoff { break-inside: avoid; }
}