/* Shared viewport layout for all signed-in modules. Printing uses its own layout. */
.workspace-page [hidden] { display:none!important; }
body.workspace-page { max-width:100%; overflow-x:clip; overscroll-behavior-x:none; }
.workspace-page .sidebar { overflow-x:hidden; }
.workspace-page main.content,
.workspace-page main.content > *,
.workspace-page .panel,
.workspace-page .container,
.workspace-page .sales-card,
.workspace-page .form-grid > *,
.workspace-page .pos-layout > *,
.workspace-page .catalog > *,
.workspace-page .shop-tools > * { min-width:0; max-width:100%; }
.workspace-page .content .panel,
.workspace-page .content .sales-card,
.workspace-page .content .table-container { overflow-x:visible; }
.workspace-page .content div[style*="overflow-x"] { overflow-x:visible!important; }
.workspace-page .content .toolbar,
.workspace-page .content .topbar,
.workspace-page .content .actions,
.workspace-page .content .form-actions,
.workspace-page .content .buttons,
.workspace-page .content .pagination,
.workspace-page .content .material-page-links,
.workspace-page .content .credential-copy,
.workspace-page .dashboard-panel-heading { flex-wrap:wrap; }
.workspace-page .content .toolbar > *,
.workspace-page .content .search,
.workspace-page .content .search-wrap,
.workspace-page .content .search-control,
.workspace-page .content .form-actions > *,
.workspace-page .content .shop-tool > div { min-width:0; max-width:100%; }
.workspace-page .content input,
.workspace-page .content select,
.workspace-page .content textarea { min-width:0; max-width:100%; }
.workspace-page .content th,
.workspace-page .content td,
.workspace-page .content p,
.workspace-page .content label,
.workspace-page .content h1,
.workspace-page .content h2,
.workspace-page .content h3,
.workspace-page .content .product-name,
.workspace-page .content .product-details,
.workspace-page .content .shop-tool,
.workspace-page .content .account-note { overflow-wrap:anywhere; }
.workspace-page .content table { width:100%; max-width:100%; min-width:0; table-layout:fixed; }
.workspace-page .content table th,
.workspace-page .content table td { min-width:0; white-space:normal; }
.workspace-page .content .status,
.workspace-page .content .stock-pill,
.workspace-page .content .report-status,
.workspace-page .material-alert-badge { max-width:100%; white-space:normal; text-align:center; }
.workspace-page .content .material-actions { min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.workspace-page .content .material-actions .material-row-action { padding-inline:4px; }
.workspace-page .content .product-actions { min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
.workspace-page .content .material-row-action,
.workspace-page .content .actions .button,
.workspace-page .content .actions button,
.workspace-page .content .product-actions .button { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.workspace-page .content .material-filters { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; }
.workspace-page .content .material-filters > * { min-width:0; }
.workspace-page .dashboard-panel-title h2,
.workspace-page .dashboard-panel-link,
.workspace-page .material-stock-group li > span { white-space:normal; overflow-wrap:anywhere; }
.workspace-page .dashboard-panel-title { min-width:0; }
.workspace-page .dashboard-stock-visual { flex-wrap:wrap; }
.filter-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.filter-fields {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));
    align-items:end;
    gap:12px;
    flex:1 1 616px;
    min-width:0;
}
.filter-fields :is(input,select) { display:block; width:100%; height:44px; box-sizing:border-box; }
.filter-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-inline-start:auto; }
.workspace-page .content .filter-actions > :is(button,.button) { min-height:44px; padding-block:8px; }
@media(max-width:480px) {
    .filter-actions > * { flex:1 1 auto; }
}
.workspace-page .modal { max-width:calc(100vw - 32px); min-width:min(320px,calc(100vw - 32px)); overflow-x:hidden; resize:vertical; }
.workspace-page .modal .form-grid > * { min-width:0; }
@media(min-width:1101px) {
    .workspace-page .materials-table th:first-child { width:28%; }
    .workspace-page .materials-table th:last-child { width:20%; }
    .workspace-page .accounts-table th:first-child { width:17%; }
    .workspace-page .accounts-table th:nth-child(2) { width:23%; }
    .workspace-page .accounts-table th:last-child { width:24%; }
}
/* Dense tables become labelled records before their columns become cramped. */
@media(max-width:1100px) {
    .workspace-page .content table.mobile-records { display:block; width:100%; min-width:0; }
    .workspace-page .content .mobile-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .workspace-page .content .mobile-records tbody { display:block; }
    .workspace-page .content .mobile-records tbody tr { display:block; padding:14px 0; border-bottom:1px solid var(--line); }
    .workspace-page .content .mobile-records tbody tr[hidden] { display:none; }
    .workspace-page .content .mobile-records td { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; width:auto; min-width:0; gap:8px 14px; padding:7px 0; border:0; text-align:left; }
    .workspace-page .content .mobile-records td[data-label]::before { content:attr(data-label); flex:0 0 auto; min-width:90px; max-width:100%; color:var(--muted); }
    .workspace-page .content .mobile-records td > * { min-width:0; max-width:100%; }
    .workspace-page .content .mobile-records td[colspan] { justify-content:center; }
    .workspace-page .content .mobile-records .actions { justify-content:flex-start; }
    .workspace-page .content .material-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .workspace-page .content .material-filters .material-search { grid-column:1/-1; }
    .workspace-page .content .pos-layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
    .workspace-page .content .material-filters,
    .workspace-page .content .form-grid { grid-template-columns:minmax(0,1fr); }
    .workspace-page .content .form-grid .full { grid-column:1; }
    .workspace-page .content .material-filters .material-search { grid-column:1; }
    .filter-actions { flex-basis:100%; }
    .workspace-page .dashboard-welcome { flex-wrap:wrap; }
    .workspace-page .dashboard-doughnut { width:min(100%,206px); }
    .workspace-page .dashboard-stock-key { flex:1 1 160px; }
}

/* A persistent account header with its own background and reserved space. */
body.workspace-page main.content {
    padding-top: 108px;
}
body.workspace-page main.content::before {
    content: "";
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 80px;
    z-index: 80;
    background: radial-gradient(ellipse at top left, #e6f4fc 0, transparent 55%), #f5f8fc;
    border-bottom: 1px solid #e2eaf3;
    pointer-events: none;
}
body.workspace-page .content .topbar .account-menu,
body.workspace-page .content .topbar .admin {
    position: fixed;
    top: 16px;
    right: 30px;
    z-index: 150;
    margin: 0;
}
/* Overview pages have no heading to keep below the account header. */
body.workspace-page.dashboard-page .content > .topbar {
    position: static;
    min-height: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
@media (max-width: 800px) {
    body.workspace-page main.content {
        padding-top: 98px;
    }
    body.workspace-page main.content::before {
        left: 0;
        height: 72px;
    }
    body.workspace-page .content .topbar .account-menu,
    body.workspace-page .content .topbar .admin {
        top: 14px;
        right: 18px;
    }
}

/* Keep dashboard notifications and the profile together in the header. */
body.workspace-page .content .topbar .top-right {
    position: fixed;
    top: 16px;
    right: 30px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.workspace-page .content .topbar .top-right .admin {
    position: relative;
    top: auto;
    right: auto;
}
body.workspace-page .content .topbar .notification-panel {
    right: 0;
    max-width: calc(100vw - 36px);
    max-height: min(420px, calc(100dvh - 90px));
}
@media (max-width: 800px) {
    body.workspace-page .content .topbar .top-right {
        top: 14px;
        right: 18px;
        gap: 10px;
    }
    body.workspace-page .content .topbar .notification-panel {
        position: fixed;
        top: 72px;
        right: 18px;
    }
}

/* Separate image labels, file controls, and previews in product forms. */
.workspace-page .product-image-field > label { display:block; margin-bottom:12px; }
.workspace-page .product-image-field input[type=file] { display:block; margin-bottom:12px; }
.workspace-page .product-image-field .image-upload-help { display:block; color:var(--dashboard-muted); margin-bottom:16px; }
.workspace-page .product-image-field .image-upload-preview { margin-top:16px; }

/* One account control and notification menu shared by every workspace page. */
body.workspace-page .content .workspace-header-actions {
    position:fixed; top:16px; right:30px; z-index:150;
    display:flex; align-items:center; gap:12px; font:14px/1.3 Arial,sans-serif;
}
body.workspace-page .content .workspace-header-actions .account-menu {
    position:relative; inset:auto; margin:0; flex:0 0 auto;
}
body.workspace-page .content .workspace-header-actions .user-summary {
    display:flex; align-items:center; gap:10px; box-sizing:border-box;
    height:52px; min-height:52px; padding:5px 12px 5px 5px;
    border:1px solid #e2eaf3; border-radius:28px; background:#f6f9fd;
    color:#1d3153; font:inherit; list-style:none;
}
body.workspace-page .content .workspace-header-actions .user-summary > span:nth-child(2) {
    display:block; width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:0.875rem; font-weight:600; line-height:1.2;
}
body.workspace-page .content .workspace-header-actions .user-summary small {
    display:block; font-size:0.75rem; font-weight:400; color:#7284a4; line-height:1.3;
}
body.workspace-page .content .workspace-header-actions .admin-avatar {
    display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px;
    border-radius:50%; background:#e4f4ff; color:#1689db; font-size:1.375rem;
}
body.workspace-page .content .workspace-header-actions .account-menu-panel {
    top:calc(100% + 8px); min-width:170px; border:1px solid #e2eaf3;
    border-radius:14px; background:white; box-shadow:0 12px 28px #17203329;
}
body.workspace-page .content .workspace-header-actions .notification-wrap { position:relative; }
body.workspace-page .content .workspace-header-actions .notification-toggle {
    position:relative; display:grid; place-items:center; width:46px; height:46px;
    min-height:46px; padding:0; border:1px solid #e2eaf3; border-radius:50%;
    background:#f6f9fd; color:#2c4c72; cursor:pointer;
}
body.workspace-page .content .workspace-header-actions .notification-count {
    position:absolute; top:-4px; right:-4px; min-width:18px; padding:2px 4px;
    border-radius:12px; background:#dc2626; color:white; font:11px/1.2 Arial,sans-serif;
}
body.workspace-page .content .workspace-header-actions .notification-panel {
    display:none; position:absolute; top:calc(100% + 12px); right:0;
    width:min(360px,calc(100vw - 36px)); max-height:min(420px,calc(100dvh - 100px));
    overflow-y:auto; padding:0; border:1px solid #e2eaf3; border-radius:14px;
    background:#fff; box-shadow:0 12px 28px #17203329; color:#1d3153;
}
body.workspace-page .content .workspace-header-actions .notification-wrap.open .notification-panel { display:block; }
.workspace-header-actions .notification-heading { padding:16px; font-weight:700; border-bottom:1px solid #e2eaf3; }
.workspace-header-actions .notification-item { display:block; padding:14px 16px; border-bottom:1px solid #e2eaf3; color:#1d3153; text-decoration:none; }
.workspace-header-actions .notification-item:hover, .workspace-header-actions .notification-item.unread { background:#edf7ff; }
.workspace-header-actions .notification-message { font-size:0.875rem; line-height:1.5; }
.workspace-header-actions .notification-meta { margin-top:5px; font-size:0.75rem; color:#7284a4; }
.workspace-header-actions .notification-empty, .workspace-header-actions .mark-all-read { padding:16px; margin:0; }
@media(max-width:800px) {
    body.workspace-page .content .workspace-header-actions { top:10px; right:18px; gap:8px; }
    body.workspace-page .content .workspace-header-actions .notification-panel { position:fixed; top:72px; right:18px; }
}
@media(max-width:380px) {
    body.workspace-page .content .workspace-header-actions .user-summary > span:nth-child(2) { width:85px; }
}

/* Page headings scroll beneath the fixed header; account actions stay above it. */
body.workspace-page .content > .topbar { z-index:auto; }

.confirmation-dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px; overflow-y:auto; border:1px solid #dbe8f5; border-radius:18px; background:#fff; color:#193153; box-shadow:0 24px 80px #13234440; }
.confirmation-dialog::backdrop { background:#13234470; backdrop-filter:blur(3px); }
.confirmation-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.confirmation-heading h2 { margin:0; font-size:1.375rem; color:#102449; }
.confirmation-dialog p { margin:18px 0 24px; line-height:1.6; overflow-wrap:anywhere; }
.confirmation-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.confirmation-dialog .confirmation-cancel { border:1px solid #bfdbfe; background:#eff8ff; color:#176b9c; }
.confirmation-dialog .confirmation-accept { border:1px solid #168ddc; background:#168ddc; color:#fff; }
.confirmation-dialog .confirmation-cancel:hover { background:#e0f0ff; }
.confirmation-dialog .confirmation-accept:hover { background:#087acb; }
.confirmation-dialog button:focus-visible { outline:2px solid #168ddc; outline-offset:3px; }
body:has(.confirmation-dialog[open]) { overflow:hidden; }

/* Shared close button for dialogs and pop-ups. */
button.popup-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff8ff;
    color: #176b9c;
    font: 400 22px/1 system-ui, sans-serif;
    box-shadow: none;
}
button.popup-close:hover:enabled {
    background: #e0f0ff;
    border-color: #93c5fd;
    color: #125780;
}
button.popup-close:focus-visible {
    outline: 2px solid #168ddc;
    outline-offset: 3px;
}