.outflow-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.outflow-filters label { display: block; font-weight: 650; margin-bottom: .5rem; }
.purchase-line { border: 1px solid #dce5eb; border-radius: 1rem; padding: 1.25rem; margin-top: 1rem; background: #f8fbfc; }
.purchase-line-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
html, body {
    font-family: system-ui, sans-serif;
    background-color: #f4f7fa;
    color: #183347;
}

:root { --bs-primary: #116b72; }
.app-header { background: white; border-bottom: 1px solid #dce5eb; }
.brand { color: #164f58; text-decoration: none; font-size: 1.12rem; font-weight: 750; }
.app-header a { text-decoration: none; }
.app-header a:hover { text-decoration: underline; }
.card { border: 1px solid #dce5eb; border-radius: 1rem; box-shadow: 0 5px 24px #18334706; }
.account-card { width: 100%; max-width: 560px; }
.btn, .form-control, .form-select { min-height: 48px; border-radius: .6rem; }
.form-control, .form-select { border-color: #9babba; }
.form-control:focus, .form-select:focus { border-color: #116b72; box-shadow: 0 0 0 .2rem #116b7230; }
.btn-primary { --bs-btn-bg: #116b72; --bs-btn-border-color: #116b72; --bs-btn-hover-bg: #0b5056; --bs-btn-hover-border-color: #0b5056; --bs-btn-active-bg: #083f45; }
.btn-outline-primary { --bs-btn-color: #116b72; --bs-btn-border-color: #116b72; --bs-btn-hover-bg: #116b72; --bs-btn-hover-border-color: #116b72; }
.eyebrow { font-size: .73rem; font-weight: 750; letter-spacing: .15em; }
.login-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; align-items: stretch; margin: 3vh 0; }
.welcome-panel { background: linear-gradient(145deg, #124f59, #187b80); color: white; border-radius: 1rem; padding: 2.5rem; position: relative; overflow: hidden; }
.welcome-panel h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 750; margin: 2rem 0 1rem; letter-spacing: -.04em; }
.welcome-panel p { font-size: 1.1rem; line-height: 1.7; }
.welcome-panel .login-tagline { font-size: clamp(1.4rem, 2.5vw, 1.75rem); line-height: 1.45; }
.welcome-panel .login-owner { font-size: 1.2rem; font-weight: 750; }
.application-footer { padding-top: 1rem; padding-bottom: 1.5rem; overflow-wrap: anywhere; }
.welcome-mark { font-size: 8rem; line-height: 1; opacity: .25; display: block; text-align: right; }
summary { min-height: 44px; padding: .6rem 0; color: #116b72; cursor: pointer; }
.form-check-input { width: 1.3em; height: 1.3em; margin-right: .4rem; }
code { color: #823f20; }
@media (max-width: 767px) { .login-grid { grid-template-columns: 1fr; margin: 0; } .welcome-panel { padding: 1.5rem; } .welcome-panel h1 { margin: 1rem 0; } .welcome-mark { display: none; } .account-card { max-width: none; } }

main {
    max-width: 960px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #075caa;
}

.btn:focus-visible, a:focus-visible {
    outline: 3px solid #075caa;
    outline-offset: 3px;
}

/* Shared business patterns. Explicit pages own their fields and actions. */
.business-header { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.business-header h1 { font-weight: 750; letter-spacing: -.035em; }
.business-header .eyebrow { color: #116b72; }
.business-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.purchase-detail-actions { align-items: stretch; }
.purchase-detail-actions > .btn { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 575px) { .purchase-detail-actions { flex-direction: column; } }
.business-header .business-actions { flex-shrink: 0; }
.master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.master-card { display: flex; flex-direction: column; border: 1px solid #dce5eb; border-radius: 1rem; background: white; padding: 1.6rem; color: #183347; text-decoration: none; box-shadow: 0 5px 24px #18334706; }
.master-card:hover { border-color: #116b72; background: #fcffff; color: #183347; }
.master-card h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .6rem; }
.master-card p { color: #526677; line-height: 1.6; }
.module-mark { display: grid; place-items: center; border-radius: .75rem; width: 48px; height: 48px; color: #0b5960; background: #e4f3f2; font-size: 1.6rem; }
.module-link { margin-top: auto; font-weight: 650; color: #0b5960; }
.list-filters { display: grid; grid-template-columns: minmax(0,1fr) 150px auto; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.list-filters label, .form-field label { display: block; font-weight: 650; margin-bottom: .5rem; }
.business-table { width: 100%; border-collapse: collapse; }
.business-table th { color: #526677; font-size: .85rem; font-weight: 650; padding: .8rem .65rem; border-bottom: 2px solid #e3eaf0; text-align: left; }
.business-table td { padding: 1rem .65rem; border-bottom: 1px solid #e3eaf0; overflow-wrap: anywhere; }
.business-table tbody tr:last-child td { border-bottom: 0; }
.record-code { display: block; font-size: .85rem; color: #526677; margin-top: .3rem; }
.row-actions { text-align: right; min-width: 225px; }
.row-actions .btn { margin: .2rem; }
.status-badge { display: inline-block; border-radius: 2rem; padding: .35rem .75rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.status-active { background: #e0f3eb; color: #195c40; }
.status-inactive { background: #edf0f4; color: #4a5664; }
.protected-label { display: block; color: #526677; font-size: .8rem; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state > span { display: block; color: #116b72; font-size: 3rem; margin-bottom: 1rem; }
.business-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.business-form .form-field { min-width: 0; }
.business-form small { display: block; margin-top: .4rem; }
.validation-message { color: #a32626; font-size: .9rem; margin-top: .35rem; }
.invalid { border-color: #a32626; }
.form-actions { border-top: 1px solid #e3eaf0; margin-top: 1.5rem; padding-top: 1.25rem; }
.unit-search { display: flex; gap: .5rem; margin-bottom: .5rem; }
.unit-search .form-control { min-width: 0; }
.unit-search .btn { flex-shrink: 0; }
.settings-facts { display: flex; flex-wrap: wrap; gap: 2rem; background: #f4f7fa; padding: 1rem; border-radius: .75rem; }
.settings-facts span, .settings-facts strong { display: block; }
@media (max-width: 767px) {
    .business-header { align-items: start; flex-direction: column; }
    .master-grid, .business-form { grid-template-columns: 1fr; }
    .list-filters { grid-template-columns: 1fr 1fr; }
    .list-filters > div:first-child { grid-column: 1 / -1; }
    .business-table, .business-table tbody, .business-table tr, .business-table td { display: block; width: 100%; }
    .business-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .business-table tr { border: 1px solid #dce5eb; border-radius: .8rem; padding: .65rem; margin-bottom: 1rem; }
    .business-table td { border: 0; padding: .5rem; }
    .business-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: #526677; margin-bottom: .2rem; }
    .row-actions { text-align: left; min-width: 0; display: flex !important; flex-wrap: wrap; }
    .row-actions .btn { flex: 1; }
}

/* Phase 7: compact operational inventory cards; existing form/table touch rules apply. */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1.25rem; }
.inventory-stock { border-top: 4px solid #17857d; }
.inventory-quantity { font-size: 2.2rem; font-weight: 700; color: #173d4c; margin: 1.25rem 0 .5rem; overflow-wrap: anywhere; }
.inventory-quantity small { font-size: 1rem; font-weight: 500; }
.stock-low { color: #78500a; background: #fff4d8; border-radius: .5rem; padding: .5rem .75rem; }
.stock-ok { color: #146452; background: #e5f5ef; border-radius: .5rem; padding: .5rem .75rem; }
.inventory-receipt-line { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 0; border-bottom: 1px solid #e3eaf0; }
.rental-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.rental-card { border-top: 4px solid #087f8c; }
.rental-grid > * { min-width: 0; overflow-wrap: anywhere; }
.rental-tenant { font-size: 1.2rem; font-weight: 600; }
.rental-state { display: inline-block; border-radius: .5rem; padding: .25rem .5rem; background: #e9f0f4; color: #334155; font-weight: 600; }
.rental-paid { background: #def5ea; color: #145a38; }
.rental-overdue { background: #fce7e7; color: #922424; }
.rental-upcoming { background: #fff3d6; color: #754900; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.report-grid > * { min-width: 0; overflow-wrap: anywhere; }
.report-summary { border-top: 4px solid #116b72; }
.report-amount { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 750; color: #164f58; overflow-wrap: anywhere; margin: .5rem 0; }

/* Phase 10.0 shell and the two focused POS dialogs. */
.shell-header { position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; align-items: center; gap: 1rem; padding: .65rem 1.25rem; }
.shell-header .brand { margin-right: auto; overflow-wrap: anywhere; }
.shell-sidebar { position: fixed; top: 72px; bottom: 0; left: 0; width: 220px; overflow-y: auto; background: white; border-right: 1px solid #dce5eb; padding: 1rem; }
.shell-workspace { margin-left: 220px; min-width: 0; }
.shell-main { max-width: 1400px; margin: auto; padding: 1.5rem; }
.shell-navigation a { display: block; padding: .8rem; min-height: 48px; color: #244956; text-decoration: none; border-radius: .5rem; }
.shell-navigation a:hover, .shell-navigation a.active { background: #e4f3f2; color: #0b5960; }
.shell-navigation a.active { font-weight: 750; }
.nav-group { font-size: .72rem; letter-spacing: .12em; color: #657784; margin: 1.25rem .8rem .2rem; }
.shell-toggle { display: none; }
.account-menu { position: relative; flex-shrink: 0; }
.account-menu summary { padding: .6rem; }
.account-menu > div { position: absolute; right: 0; min-width: 210px; background: white; border: 1px solid #dce5eb; border-radius: .75rem; padding: .5rem; box-shadow: 0 8px 24px #18334720; }
.account-menu a { display: block; padding: .75rem; min-height: 48px; }
.app-modal { width: min(920px, 95vw); max-height: 92dvh; border: 1px solid #dce5eb; border-radius: 1rem; padding: 0; box-shadow: 0 10px 60px #18334750; }
.app-modal::backdrop { background: #112d42a0; }
.modal-heading, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #f6fafb; }
.modal-heading { position: sticky; top: 0; z-index: 1; }
.modal-content-body { padding: 1.25rem; overflow-wrap: anywhere; }
.modal-actions { justify-content: flex-end; }
/* Shared native-dialog touch actions, including nested and reconnect dialogs. */
.touch-dialog button {
    min-height: 48px;
    min-width: 48px;
    max-width: 100%;
    padding: .75rem 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
.touch-dialog .business-actions, .touch-dialog .modal-actions {
    flex-wrap: wrap;
    gap: 1rem;
}
.touch-dialog .modal-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.touch-dialog .modal-heading button { flex-shrink: 0; }
.touch-dialog button:focus-visible { outline: 3px solid #087f8c; outline-offset: 3px; }
@media (max-width: 599px) {
    .touch-dialog .business-actions, .touch-dialog .modal-actions { flex-direction: column; align-items: stretch; }
    .touch-dialog .business-actions > button, .touch-dialog .modal-actions > button { width: 100%; }
}
.usage-actual { min-width: 100px; width: 100%; max-width: 180px; }
/* Phase 11.1: paired sale lines keep each transaction and total together. */
.current-sales-table, .usage-table { table-layout: fixed; }
.current-sales-table th:nth-child(3) { width: 38%; }
.sale-lines { list-style: none; padding: 0; margin: 0; }
.sale-line-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: .75rem; }
.sale-lines li + li { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e3eaf0; }
.sale-line-grid > span { min-width: 0; overflow-wrap: anywhere; }
.usage-table th:first-child { width: 34%; }
.usage-table .usage-actual { min-width: 0; min-height: 48px; font-size: 1rem; }
.usage-actual:focus-visible { outline: 3px solid #087f8c; outline-offset: 3px; }
@media (max-width: 767px) {
    .current-sales-table th:nth-child(3), .usage-table th:first-child { width: auto; }
    .usage-table .usage-actual { max-width: 100%; }
}
.inventory-primary { margin-bottom: 1.5rem; }
.inventory-primary .master-card h2 { margin-top: 0; }
@media (max-width:1199px) {
    .shell-sidebar { display: none; }
    .shell-workspace { margin-left: 0; }
    .shell-toggle { display: block; }
    .account-navigation > nav { position: absolute; top: 70px; left: 0; background: white; width: min(320px,95vw); max-height: 80dvh; overflow-y: auto; border: 1px solid #dce5eb; padding: 1rem; }
}
@media (max-width:599px) {
    .shell-header { padding: .5rem; gap: .4rem; }
    .shell-header .brand { font-size: .95rem; }
    .account-menu summary { font-size: .85rem; }
    .shell-main { padding: 1rem .65rem; }
    .app-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: .6rem; }
    .modal-content-body { padding: .75rem; }
}

/* Period sales and history reuse the existing phone card layout. */
.sales-report-table, .product-sales-summary { table-layout: fixed; }
.sales-report-table th:nth-child(2) { width: 36%; }
@media (max-width: 767px) {
    .sales-report-table th:nth-child(2) { width: auto; }
    .sales-report-table, .product-sales-summary { min-width: 0; }
}