html { font-size: 109.4375%; }
/* Shared visual language for the print shop workspace. */
.mobile-menu-toggle, .mobile-menu-backdrop { display: none; }
:root { --paper: #f5f4f0; --surface: #fff; --ink: #242622; --muted: #73766e; --line: #e3e4dc; --accent: #b64c30; --accent-hover: #953c26; --accent-soft: #f8eee8; --success: #3d624e; --button-navy: #244a73; --button-navy-hover: #193b61; --radius: 8px; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { font-size: 2rem; font-weight: 600; letter-spacing: -1px; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.35px; }
.page-description { margin: 8px 0 0; font-size: 0.875rem; color: var(--muted); }
.sidebar { overflow-x: hidden; scrollbar-width: none; }.sidebar::-webkit-scrollbar { display: none; }
.topbar > div:first-child { min-width: 0; }.topbar .top-right { width: auto; margin-left: auto; flex: 0 0 auto; }.eyebrow { white-space: nowrap; }
.panel .totals .total, .panel .item:not(.catalog .item) { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.content .user-summary { flex-shrink: 0; }.content .container label { margin-top: 14px; }
.material-filters { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(130px, 180px) minmax(130px, 180px) auto auto; align-items: end; gap: 12px; }.material-filters label { margin-bottom: 7px; }
.workspace-empty { min-height: 150px; display: grid; place-items: center; color: var(--muted); font-size: 0.875rem; text-align: center; }
@media (max-width: 1100px) { .material-filters { grid-template-columns: 1fr 1fr; }.material-filters > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .material-filters { grid-template-columns: 1fr; }.material-filters > div:first-child { grid-column: auto; }.topbar .eyebrow { font-size: 0.625rem; }.content .topbar { gap: 10px; }.page-title { font-size: 1.5rem; } }
.auxiliary-panel { max-width: 100%; }.auxiliary-panel > form:not([style]) { max-width: 680px; }.auxiliary-panel > a { display: inline-flex; padding: 7px 12px; font-size: 0.875rem; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }.auxiliary-panel > p { color: var(--muted); }
.content .panel > .item, .content .panel > .totals > .total { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }.content .panel > .totals { margin-top: 18px; }.content .panel > form > label { margin-top: 20px; }.content .change { color: var(--muted); margin-top: 10px; font-size: 0.875rem; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 232px; height: 100dvh; background: #fbfbf8; color: var(--ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; }
.studio-brand { display: flex; align-items: center; gap: 11px; padding: 28px 20px 32px; color: var(--ink); text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px; flex-shrink: 0; background: var(--ink); color: #fff; font-size: 1.3125rem; font-weight: 700; letter-spacing: -1.8px; border-radius: 3px; padding-right: 2px; }
.brand-mark > span { color: #e5a187; }
.brand-name { font-size: 0.875rem; font-weight: 650; line-height: 1.5; letter-spacing: -.2px; }
.brand-name small { display: block; font-size: 0.6875rem; letter-spacing: 1.35px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.nav-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.6px; color: #8c8f85; padding: 0 24px 12px; }
.sidebar .nav { padding: 0 12px; }
.sidebar .nav .nav-label { padding: 28px 12px 12px; }
.sidebar .nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 0 0 5px; border-radius: 5px; font-size: 0.9375rem; font-weight: 500; color: #5f635b; text-decoration: none; transition: background 120ms, color 120ms; }
.sidebar .nav a:hover { background: #efefe8; color: var(--ink); }
.sidebar .nav a.active { color: #171b20; background: rgba(36, 74, 115, .11); box-shadow: inset 2px 0 var(--button-navy); font-weight: 650; }
.sidebar .nav a.active:hover { color: #171b20; background: rgba(36, 74, 115, .17); }
.sidebar .nav-icon { display: inline-flex; width: 20px; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.sidebar-bottom { margin-top: auto; padding: 24px 20px 18px; }
.sidebar .sign-out { display: flex; align-items: center; gap: 12px; background: transparent; color: var(--muted); padding: 9px 3px; font-size: 0.875rem; width: 100%; font-weight: 500; }
.sign-out .app-icon { font-size: 1.1875rem; }.sidebar .sign-out:hover { background: transparent; color: var(--ink); }
main.content { margin-left: 232px; padding: 30px 36px 40px; min-height: 100vh; max-width: none; width: auto; }
.content .topbar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 0.6875rem; letter-spacing: 1.7px; color: var(--muted); margin: 0 0 7px; font-weight: 600; }
.page-title { font-size: 1.9375rem; font-weight: 600; letter-spacing: -.9px; margin: 0; line-height: 1.2; }
.top-right { gap: 16px; }.user-summary, .admin { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: #4c5147; }.user-summary small { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 1px; }
.admin-avatar { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: #eaeae2; color: #6e7568; border-radius: 50%; font-size: 1.1875rem; }
.panel, .chart-card, .stock-card, .sales-card, .stat-card, .table-container, .container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.panel, .chart-card, .stock-card, .sales-card { padding: 24px; }.container { padding: 28px; max-width: 900px; margin: 0 auto; }
.content > .container { max-width: 100%; }.content > .container > h1 { display: none; }
.stats, .stat-grid { gap: 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 24px; overflow: hidden; }
.stats .stat-card, .stat-grid .stat-card { border: 0; border-right: 1px solid var(--line); border-radius: 0; min-height: 126px; padding: 20px 22px; }.stat-card:last-child { border-right: 0; }
.stat-title, .stat-label { font-size: 0.8125rem; color: var(--muted); font-weight: 500; margin: 0 0 13px; }.stat-value { font-size: 1.9375rem; line-height: 1.15; font-weight: 600; letter-spacing: -.9px; margin: 0 0 9px; font-variant-numeric: tabular-nums; }.stat-change { font-size: 0.75rem; }.positive { color: var(--success); }.negative { color: var(--accent); }
.stats .stat-icon { background: none; color: #94988e; border-radius: 0; width: 22px; height: 22px; top: 18px; right: 18px; font-size: 1.3125rem; }.stats .red-icon { color: var(--accent); }
.chart-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.25px; }.chart-row, .bottom-row { gap: 22px; }.chart-card { min-height: 330px; }.chart-container { height: 245px; }.chart-header { gap: 12px; margin-bottom: 22px; }.stock-content { height: 220px; }.legend-number { font-variant-numeric: tabular-nums; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }.toolbar p { color: var(--muted); font-size: 0.875rem; }.toolbar > .search { margin-right: auto; }.search { max-width: 360px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { background: #fff; border: 1px solid #d9dcd2; border-radius: 5px; padding: 10px 12px; color: var(--ink); font-size: 0.9375rem; min-height: 40px; width: 100%; transition: border-color 120ms, box-shadow 120ms; }
input::placeholder, textarea::placeholder { color: #92968a; }input:focus, select:focus, textarea:focus { border-color: #9caa97; outline: 0; box-shadow: 0 0 0 3px #e8ece4; }
label, .form-group label { display: block; color: #555b4e; font-weight: 500; font-size: 0.875rem; margin: 0 0 7px; }textarea { min-height: 100px; resize: vertical; }.form-group { margin-bottom: 18px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.form-group.full { grid-column: 1 / -1; }
button, .button, .btn, .back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--button-navy); color: white; border: 1px solid transparent; border-radius: 5px; padding: 10px 15px; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4; min-height: 38px; transition: background 120ms; }
button:hover, .button:hover, .btn:hover, .back:hover { background: var(--button-navy-hover); }button:disabled { opacity: .5; cursor: not-allowed; }
.button.secondary, button.secondary, .back, .btn-secondary, .button.danger, .btn-danger, .button.restore { background: var(--button-navy); border: 1px solid var(--button-navy); color: #fff; }
.button.secondary:hover, button.secondary:hover, .back:hover, .btn-secondary:hover, .button.danger:hover, .btn-danger:hover, .button.restore:hover { background: var(--button-navy-hover); color: #fff; }
.admin-menu { position: absolute; display: none; right: 0; top: calc(100% + 12px); background: white; padding: 8px; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 20px #24262212; z-index: 110; }.admin { position: relative; cursor: pointer; }.admin.open .admin-menu { display: block; }.admin-menu button { background: transparent; color: var(--ink); width: 100%; justify-content: flex-start; }
.search-box { background: white; border: 1px solid var(--line); border-radius: 5px; color: #8d9384; height: 38px; }.search-box input { border: 0; background: none; min-height: 32px; font-size: 0.875rem; }.search-box input:focus { box-shadow: none; }.notification-toggle { color: #666e5e; background: white; border: 1px solid var(--line); border-radius: 5px; }.notification-count { background: var(--accent); }.notification-item:hover, .notification-item:focus-visible { background: #f4f3ed; outline-color: var(--accent); }
.chip { border-radius: 4px; background: var(--button-navy); color: #fff; font-weight: 500; font-size: 0.8125rem; min-height: 31px; padding: 6px 12px; }.chip.active, .chip:hover { background: var(--button-navy-hover); color: #fff; }.chip-list { gap: 7px; }
table, .sales-table { width: 100%; border-collapse: collapse; border: 0; font-variant-numeric: tabular-nums; }th, .sales-table th { background: #f8f9f5; color: #7b8173; text-transform: uppercase; letter-spacing: .75px; font-weight: 500; font-size: 0.75rem; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); }td, .sales-table td { font-size: 0.875rem; padding: 16px 14px; border: 0; border-bottom: 1px solid #eeefe8; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover { background: #fcfcf9; }td strong { font-weight: 600; }td .muted, td > div > div { color: var(--muted); font-size: 0.8125rem; }.actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }.actions form { margin: 0; }.actions .button, .actions button { padding: 6px 10px; min-height: 30px; font-size: 0.8125rem; }.empty { text-align: center; padding: 40px; color: var(--muted); }
.status, .stock-pill { border-radius: 4px; font-size: 0.75rem; font-weight: 500; padding: 4px 8px; }.active-status, .in-stock { color: #486345; background: #edf2e8; }.inactive-status, .out-stock { color: #9d5842; background: #f9eee7; }.low-stock { color: #8c752e; background: #f7f2df; }
.flash, .errors, .flash.success, .flash.error { padding: 14px 16px; border-radius: 5px; margin-bottom: 20px; font-size: 0.875rem; }.flash, .flash.success { background: #edf2e8; color: #486345; }.errors, .flash.error { background: #faf0eb; color: #a14b3b; }.pagination { display: flex; gap: 16px; justify-content: space-between; padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }.pagination a { margin-left: 14px; }
.modal-backdrop { backdrop-filter: blur(3px); background: #25292366; }.modal { border-radius: 9px; border: 1px solid var(--line); box-shadow: 0 20px 70px #24262230; }.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--line); }.modal-header h2 { font-size: 1.375rem; letter-spacing: -.5px; font-weight: 600; }.modal-body { padding: 24px; }.modal-actions, .form-actions, .buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }.image-upload-preview, .product-image-preview { background: #f3f4ee; border-color: var(--line); border-radius: 4px; }
.pos-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: start; }.pos-layout > .panel:last-child { position: sticky; top: 24px; }.catalog { gap: 12px; }.catalog .item { background: #fff; border-color: var(--line); border-radius: 6px; padding: 16px; }.catalog .item:hover { border-color: #aeb6a3; }.product-name { font-size: 0.9375rem; font-weight: 600; }.price { color: var(--ink); font-size: 1.0625rem; }.stock { font-size: 0.8125rem; color: var(--muted); }.catalog .add-to-cart { background: #f1f3eb; color: #4a5840; font-size: 0.8125rem; border: 1px solid #e0e5d6; }.catalog .add-to-cart:hover { background: #e4eadb; }.catalog .product-image { border-radius: 3px; background: #f1f2eb; }.order-item { font-size: 0.875rem; }.qty-box button { background: white; color: var(--ink); border: 1px solid var(--line); min-height: 26px; padding: 3px 8px; }.line { font-size: 0.875rem; }.grand { font-size: 1.375rem; font-weight: 600; }.checkout, #openAddItemModal { background: var(--accent); }.checkout:hover, #openAddItemModal:hover { background: var(--accent-hover); }.view-all { color: var(--accent); background: none; text-decoration: none; font-size: 0.8125rem; }.muted { color: var(--muted); }.totals { border-color: var(--line); }.order-empty { font-size: 0.875rem; padding: 30px 0; }
@media (min-width: 1600px) { main.content { padding-inline: 52px; } }
@media (max-width: 1100px) { .stats, .stat-grid { grid-template-columns: repeat(2, 1fr); }.stats .stat-card, .stat-grid .stat-card { border-bottom: 1px solid var(--line); }.chart-row, .bottom-row { grid-template-columns: 1fr; }.pos-layout { grid-template-columns: 1fr; }.pos-layout > .panel:last-child { position: static; }.top-right .search-box { display: none; } }
@media (max-width: 800px) { .sidebar { width: 66px; }.studio-brand { padding: 24px 12px; }.brand-mark { width: 40px; }.brand-name, .sidebar .nav-text, .nav-label, .studio-caption { display: none; }.sidebar .nav { padding: 8px; }.sidebar .nav a { justify-content: center; padding: 13px 0; }.sidebar .nav-icon { font-size: 1.3125rem; }.sidebar-bottom { padding: 14px 20px; }.sidebar .sign-out { width: 26px; }.content .topbar { align-items: center; flex-direction: row; margin-bottom: 22px; padding-bottom: 20px; }.page-title { font-size: 1.625rem; }main.content { margin-left: 66px; padding: 24px 18px; }.user-summary > span:last-child, .top-right .admin > span { display: none; }.top-right { gap: 8px; }.panel, .chart-card, .stock-card, .sales-card { padding: 18px; }.toolbar { flex-wrap: wrap; align-items: stretch; }.toolbar .search { max-width: none; flex-basis: 100%; }.form-grid { grid-template-columns: 1fr; }.catalog { grid-template-columns: 1fr; }.stats .stat-card { padding: 18px 14px; }.stats .stat-icon { display: none; }.stat-value { font-size: 1.625rem; }.content table { min-width: 560px; }.panel { overflow-x: auto; }.sales-card { overflow-x: auto; }.chart-header { align-items: flex-start; }.period-select { font-size: 0.8125rem; }.modal { min-width: min(320px, calc(100vw - 20px)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }

/* Keep every search input and its submit button together at each breakpoint. */
.account-note, .credential-note { border: 1px solid #eadfc9; background: #fcf8ef; padding: 20px; border-radius: 6px; margin: 24px 0; color: #6b5a36; font-size: 0.875rem; }
.account-note p, .credential-note p { margin: 7px 0 0; }.credential-note { margin: 0 0 24px; }.credential-note h2 { margin: 0; font-size: 1.0625rem; }.credential-copy { display: flex; gap: 8px; margin-top: 16px; max-width: 640px; }.credential-copy input { min-width: 0; font-family: Consolas, monospace; }.credential-copy button { flex-shrink: 0; }.credential-note .copy-status:empty { display: none; }
.password-setup-page { min-height: 100dvh; padding: 32px 20px; }.password-setup { width: min(100%, 470px); margin: 0 auto; }.password-setup .studio-brand { justify-content: center; padding: 0 0 26px; }.password-setup .brand-name { display: block; }.password-setup .panel { padding: 28px; }.password-setup h1 { font-size: 1.8125rem; margin: 12px 0; }.setup-intro { color: var(--muted); font-size: 0.875rem; margin-bottom: 24px; }.password-entry { margin-bottom: 20px; }.password-control { position: relative; }.password-control input { padding-right: 64px !important; }.password-control button { position: absolute; inset: 4px 4px 4px auto; background: transparent; color: var(--muted); font-size: 0.8125rem; min-height: 0; padding: 6px 8px; }.password-control button:hover { background: var(--paper); color: var(--ink); }.password-requirements { font-size: 0.8125rem; color: var(--muted); background: #f5f6ef; padding: 14px; margin: 24px 0; border-radius: 5px; }.password-requirements strong { color: #5b6452; font-weight: 600; }.password-requirements ul { margin: 8px 0 0; padding-left: 17px; line-height: 1.9; }.password-requirements .met { color: #3d624e; font-weight: 600; }.password-setup .setup-submit { width: 100%; background: var(--accent); }.setup-signout { margin-top: 12px; text-align: center; }.setup-signout button { background: transparent; border: 0; font-size: 0.8125rem; }.password-setup .errors ul { padding-left: 18px; margin: 0; }
@media (max-width: 480px) { .credential-copy { flex-wrap: wrap; }.password-setup-page { padding: 24px 16px; }.password-setup .panel { padding: 22px; } }
.search-control,
.toolbar > .search-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 460px;
    min-width: 0;
    margin: 0;
}
.search-control input[type="search"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    margin: 0;
}
.search-control > button {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    margin: 0;
    white-space: nowrap;
}
.toolbar > .search-control { margin-right: auto; }
.top-right .dashboard-search { width: 290px; }
.toolbar.material-filters {
    display: grid;
    grid-template-columns: minmax(260px, 440px) minmax(140px, 180px) minmax(140px, 180px) auto;
    justify-content: start;
    align-items: end;
    gap: 14px;
}
.material-filters > div { min-width: 0; }
.material-filters .search-control { max-width: none; }
.material-filters .filter-reset { height: 40px; min-height: 40px; margin: 0; }
.material-filters select { height: 40px; }
@media (max-width: 1100px) {
    .top-right .dashboard-search { display: none; }
    .toolbar.material-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .toolbar.material-filters > .material-search { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .toolbar > .search-control { flex: 1 0 100%; max-width: none; }
}
@media (max-width: 480px) {
    .toolbar.material-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .toolbar.material-filters > .material-search { grid-column: 1 / -1; }
    .material-filters .filter-reset { justify-self: start; }
}

/* Readable controls and concise, responsive records. */
td, .sales-table td { font-size: 1rem; }
th, .sales-table th { font-size: 0.875rem; }
label, .form-group label, .status, .stock-pill, .stat-title, .stat-label { font-size: 0.9375rem; }
button, .button, .btn, .back { min-height: 42px; font-size: 0.9375rem; }
.actions .button, .actions button { min-height: 38px; font-size: 0.875rem; }
.qty-box input[type="number"] { width: 64px; min-width: 54px; min-height: 38px; padding: 6px; text-align: center; }
.qty-box { flex-wrap: wrap; justify-content: flex-end; }
.qty-box button { min-height: 40px; min-width: 40px; }
.qty-box .remove-item { color: var(--accent); background: transparent; }
.draft-status { color: var(--muted); font-size: 0.875rem; margin: 0 0 16px; }
.field-error { font-size: 0.875rem; color: #a14b3b; margin: 6px 0 0; }
[aria-invalid="true"] { border-color: #a14b3b !important; }
.notification-item.unread { border-left: 3px solid var(--accent); background: #fcf5ef; }
.mark-all-read { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.mark-all-read button { min-height: 34px; font-size: 0.875rem; }
.toolbar > .button { align-self: center; }
.toolbar.material-filters > .filter-reset { align-self: end; }
@media (max-width: 800px) {
    .mobile-menu-toggle { display: inline-flex; position: fixed; top: 14px; left: 18px; z-index: 230; background: white; color: var(--ink); border-color: var(--line); min-height: 42px; }
    .mobile-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; background: #24262280; z-index: 210; }
    .sidebar { width: 252px; transform: translateX(-100%); z-index: 220; transition: transform 150ms ease; padding-top: 54px; }
    .navigation-open .sidebar { transform: translateX(0); }
    .navigation-open { overflow: hidden; }
    .sidebar .brand-name, .sidebar .nav-text, .sidebar .nav-label, .sidebar .studio-caption { display: block; }
    .sidebar .studio-brand { padding: 22px 20px; }.sidebar .nav a { justify-content: flex-start; padding: 12px; min-height: 44px; }.sidebar .nav { padding: 0 12px; }.sidebar .nav-label { padding: 14px 24px; }.sidebar-bottom { padding: 22px 20px; }.sidebar .sign-out { width: 100%; }
    main.content { margin-left: 0; padding: 80px 18px 28px; }
    .content table.mobile-records { min-width: 0; display: block; width: 100%; }
    .mobile-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .mobile-records tbody { display: block; }
    .mobile-records tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .mobile-records tbody tr[hidden] { display: none; }
    .mobile-records tbody tr:last-child { border-bottom: 0; }
    .mobile-records td { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 14px; padding: 7px 0; text-align: left; border: 0; overflow-wrap: anywhere; }
    .mobile-records td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.875rem; min-width: 90px; flex-shrink: 0; }
    .mobile-records td > * { max-width: 100%; }.mobile-records td[colspan] { justify-content: center; padding: 24px 4px; }
    .content .panel, .content .sales-card { overflow-x: visible; }
    .mobile-records .actions { flex-wrap: wrap; }.mobile-records details { flex-basis: 100%; }
    .mobile-records .material-stock-form { min-width: 0; }
}
.account-menu { position:relative; }.account-menu > summary { list-style:none; cursor:pointer; border-radius:6px; padding:6px; }.account-menu > summary::-webkit-details-marker { display:none; }.account-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }.account-menu-panel { position:absolute; right:0; top:calc(100% + 8px); min-width:160px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 20px #24262212; z-index:120; }.account-menu-panel form { margin:0; }.account-menu-panel button { width:100%; justify-content:flex-start; gap:10px; background:transparent; color:var(--ink); }.account-menu-panel button:hover { background:var(--paper); }
@media(max-width:800px) { .account-menu .user-summary > span:nth-child(2) { display:none; } }
/* Centered section loader; skeletons remain visible softly behind it. */
.section-loading .sidebar .nav a[aria-busy=true] { background:var(--accent-soft); color:var(--accent); }

/* Keep action controls on the same navy button palette across sections. */
.catalog .add-to-cart, .checkout, #openAddItemModal, .password-setup .setup-submit, .view-all,
.qty-box button, .notification-toggle, .mobile-menu-toggle,
.password-control button, .admin-menu button, .account-menu-panel button {
    background: var(--button-navy);
    border-color: var(--button-navy);
    color: #fff;
}
.catalog .add-to-cart:hover, .checkout:hover, #openAddItemModal:hover, .password-setup .setup-submit:hover,
.view-all:hover, .qty-box button:hover, .notification-toggle:hover, .mobile-menu-toggle:hover,
.password-control button:hover, .admin-menu button:hover, .account-menu-panel button:hover {
    background: var(--button-navy-hover);
    color: #fff;
}
button:disabled, .catalog .add-to-cart:disabled, .checkout:disabled {
    background: #dce4ed;
    border-color: #cbd7e4;
    color: #3b4c60;
    opacity: 1;
}
.button.secondary.material-row-action { background: rgba(36, 74, 115, .11); border-color: rgba(36, 74, 115, .18); color: #171b20; }
.button.secondary.material-row-action:hover { background: rgba(36, 74, 115, .17); border-color: rgba(36, 74, 115, .25); color: #171b20; }

/* Compact controls for the raw materials list. */
.materials-table .status, .products-table .stock-pill { display: inline-flex; align-items: center; white-space: nowrap; width: max-content; }
.materials-table th:nth-child(6), .materials-table td:nth-child(6) { min-width: 116px; }
.material-actions { display: grid; grid-template-columns: auto auto; gap: 8px; min-width: 190px; }
.material-actions .material-row-action, .product-actions .button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin: 0; padding: 7px 10px; border: 1px solid rgba(36, 74, 115, .18); border-radius: 5px; background: rgba(36, 74, 115, .11); color: #171b20; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 120ms, border-color 120ms; }
.material-actions .material-row-action:hover, .product-actions .button:hover { background: rgba(36, 74, 115, .17); border-color: rgba(36, 74, 115, .25); }
.material-actions .material-row-action:focus-visible, .product-actions .button:focus-visible { outline: 2px solid var(--button-navy); outline-offset: 2px; }
.material-pagination { align-items: center; flex-wrap: wrap; }
.material-page-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.material-page-links a, .material-page-links .current-page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; font-size: 0.875rem; }
.material-page-links a { color: var(--button-navy); background: var(--surface); }
.material-page-links a:hover { background: rgba(36, 74, 115, .11); border-color: var(--button-navy); }
.material-page-links a:focus-visible { outline: 2px solid var(--button-navy); outline-offset: 2px; }
.material-page-links .current-page { background: var(--button-navy); border-color: var(--button-navy); color: #fff; font-weight: 600; }

/* Match product controls to the raw materials list. */
.material-stock-groups { margin-top: 18px; border-top: 1px solid var(--line); }
.material-stock-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.material-stock-group summary { cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.material-stock-group summary > span { float: right; color: var(--muted); }
.material-stock-group ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 180px; overflow-y: auto; }
.material-stock-group li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 0.875rem; }
.material-stock-group li a { color: var(--ink); overflow-wrap: anywhere; }
.material-stock-group li > span { color: var(--muted); white-space: nowrap; }
.centered-details-table th, .centered-details-table td, .centered-history-table th, .centered-history-table td { text-align: center; }
.centered-details-table th:first-child, .centered-details-table td:first-child:not(.empty) { text-align: left; }
.centered-details-table .actions { justify-content: center; }
.centered-details-table .material-stock-form { text-align: left; }
.accounts-table th, .accounts-table td, .materials-table th, .materials-table td, .products-table th, .products-table td, .archived-products-table th, .archived-products-table td { text-align: center; }
.accounts-table th:first-child, .accounts-table td:first-child:not(.empty), .materials-table th:first-child, .materials-table td:first-child:not(.empty), .products-table th:first-child, .products-table td:first-child:not(.empty), .archived-products-table th:first-child, .archived-products-table td:first-child:not(.empty) { text-align: left; }
.materials-table .material-stock-form { text-align: left; }
.accounts-table .actions { justify-content: center; }
.products-table .product-image-preview { flex: 0 0 72px; width: 72px; height: 72px; }
.products-table td:first-child > div > div:last-child { min-width: 0; }
.products-table th:nth-child(3), .products-table td:nth-child(3) { min-width: 116px; }
.product-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 160px; }
.product-actions form { display: flex !important; }
.product-actions .button { width: 100%; }
.products-table td:nth-child(2), .materials-table td:nth-child(5) { white-space: nowrap; }

/* Stock adjustments open above the workspace, including on narrow screens. */
.stock-adjust-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px #13234440; text-align: left; white-space: normal; }
.stock-adjust-dialog::backdrop { background: #13234470; backdrop-filter: blur(3px); }
.stock-adjust-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.stock-adjust-header h2 { margin: 0; font-size: 1.375rem; }
.stock-adjust-body { padding: 24px; }
.stock-adjust-body p { margin: 0 0 20px; color: var(--muted); }
.stock-adjust-body p strong { color: var(--ink); }
.stock-adjust-dialog .material-stock-form { display: grid; gap: 8px; }
.stock-adjust-dialog .material-stock-form label { margin: 8px 0 0; }
.stock-adjust-dialog .material-stock-form input, .stock-adjust-dialog .material-stock-form select { width: 100%; min-width: 0; }
.stock-adjust-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
body:has(.stock-adjust-dialog[open]) { overflow: hidden; }

.account-access-editor { flex-basis:100%; text-align:left; min-width:0; }
.account-access-editor summary { cursor:pointer; color:var(--accent); padding:8px 0; }
.account-access-editor form { padding:12px; border:1px solid var(--line); border-radius:8px; white-space:normal; }
.account-access-editor label { display:block; margin-top:10px; }

/* Shared stock adjustment and immediate feedback on all material entry points. */
.stock-alert-trigger { width:100%; font:inherit; text-align:left; cursor:pointer; }
.stock-adjust-body h3 { margin:0 0 8px; font-size:1.1875rem; overflow-wrap:anywhere; }
.stock-movement-choice { display:flex; flex-wrap:wrap; gap:12px; border:0; padding:0; margin:4px 0 10px; }
.stock-movement-choice legend { margin-bottom:8px; font-weight:600; }
.stock-movement-choice label { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.stock-movement-choice input { width:18px!important; min-height:18px; margin:0; }
.stock-movement-choice label:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.stock-after-preview { padding:14px; border-radius:10px; background:var(--accent-soft); color:var(--ink)!important; margin:12px 0!important; }
.stock-form-error { color:#a52b35!important; background:#fff1f2; padding:12px; border-radius:8px; }
.stock-adjust-actions > a { margin-right:auto; align-self:center; }
.stock-feedback { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:20px; margin-bottom:16px; border:1px solid #b6ddc7; background:#effaf3; color:#174e32; border-radius:16px; }
.stock-feedback p { margin:6px 0; overflow-wrap:anywhere; }
.stock-feedback .actions { flex-wrap:wrap; }
.stock-recent { margin-bottom:20px; }
.stock-recent h2 { margin:0 0 12px; }
.stock-recent-row { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.stock-recent-row strong { min-width:0; overflow-wrap:anywhere; }
.stock-just-changed { animation:stock-change-highlight 3s ease-out; }
@keyframes stock-change-highlight { from { background:#dcf7e6; } }
@media(prefers-reduced-motion:reduce) { .stock-just-changed { animation:none; outline:2px solid #b6ddc7; outline-offset:-2px; } }

.stock-feedback[hidden], .stock-recent[hidden], .stock-form-error[hidden] { display:none!important; }