@font-face { font-family: 'Open Sans'; src: url('../../fonts/open-sans/OpenSans-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../../fonts/open-sans/OpenSans-SemiBold.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../../fonts/open-sans/OpenSans-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
    --ed-font: 'Open Sans', sans-serif;
    --ed-canvas: #faf9f6;
    --ed-brand: #336666;
    --ed-sage: #cad2c5;
    --ed-table-heading: #e3e8e0;
    --ed-ink: #121212;
    --ed-muted: #898989;
    --ed-neutral: #eaeaea;
    --ed-pending: #ddddf8;
    --ed-pending-ink: #080080;
    --ed-urgent: #ffbfb8;
    --ed-radius: 5px;
}

.office-workspace { --ink: var(--ed-ink); --canvas: var(--ed-canvas); --brand: var(--ed-brand); background: var(--ed-canvas); color: var(--ed-ink); font-family: var(--ed-font); }
.office-workspace .app-frame { display: block; min-height: 100vh; }
.office-workspace .app-main { margin: 0; width: 100%; min-width: 0; }
.office-workspace .mobile-bar { display: none; }
.office-workspace .page-shell { max-width: none; padding: 0 23px 24px; margin: 0; }
.workspace-header { height: 110px; display: flex; align-items: center; justify-content: space-between; padding: 0 54px 0 7px; gap: 30px; }
.workspace-brand img { width: 238px; height: 95px; object-fit: contain; display: block; }
.workspace-profile { display: flex; align-items: center; gap: 10px; }
.workspace-profile-name { color: var(--ed-ink); font-size: 24px; font-weight: 700; text-decoration: none; }
.workspace-assignment { display: flex; flex-direction: column; justify-content: center; gap: 5px; border-left: 1px solid var(--ed-brand); min-height: 49px; padding-left: 10px; font-size: 16px; }
.workspace-logout { margin-left: 70px; }
.workspace-logout button { display: flex; gap: 5px; align-items: center; border: 0; background: transparent; padding: 0; font: 400 16px var(--ed-font); color: var(--ed-brand); text-decoration: underline; cursor: pointer; }
.workspace-navigation { min-height: 67px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 55px; background: var(--ed-brand); }
.workspace-primary-nav { grid-column: 2; display: flex; align-items: center; gap: 50px; }
.workspace-primary-nav > a { color: var(--ed-canvas); font-size: 20px; padding: 5px; border-radius: 3px; text-decoration: none; white-space: nowrap; }
.workspace-primary-nav > a[aria-current] { font-weight: 700; color: var(--ed-brand); background: var(--ed-canvas); }
.workspace-quick-nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 15px; }
.ed-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ed-brand); border-radius: 3px; background: var(--ed-canvas); color: var(--ed-ink); text-decoration: none; font: 400 16px var(--ed-font); cursor: pointer; white-space: nowrap; }
.ed-button-primary { background: var(--ed-brand); color: #fff; font-weight: 700; }
.ed-button[disabled], .ed-button[aria-disabled='true'] { opacity: .45; cursor: default; }
.workspace-quick-nav .ed-button { position: relative; width: 120px; min-height: 46px; padding-inline: 10px; gap: 5px; }
.workspace-quick-nav .workspace-notifications { background: transparent; border-color: var(--ed-canvas); color: var(--ed-canvas); }
.workspace-quick-nav [aria-current] { outline: 2px solid var(--ed-sage); outline-offset: 3px; }
.workspace-count { position: absolute; right: -6px; top: -10px; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 4px; border-radius: 50%; background: var(--ed-urgent); color: var(--ed-ink); font: 400 12px var(--ed-font); }
.workspace-context-switch { position: relative; }
.workspace-context-switch summary { cursor: pointer; list-style: none; }
.workspace-context-switch summary::-webkit-details-marker { display: none; }
.workspace-context-switch form { position: absolute; z-index: 20; top: 30px; right: 0; width: min(360px, 85vw); padding: 20px; background: white; border: 1px solid var(--ed-brand); border-radius: var(--ed-radius); box-shadow: 0 5px 20px #1212121a; }
.workspace-context-switch select { width: 100%; margin: 10px 0; }
.office-workspace :focus-visible, .ed-orders :focus-visible { outline: 2px solid var(--ed-brand); outline-offset: 4px; }
.workspace-navigation :focus-visible { outline-color: white; }

@media (min-width: 801px) {
    .workspace-navigation:has(.workspace-primary-nav > [data-module-key="payroll"]) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
    .workspace-navigation:has(.workspace-primary-nav > [data-module-key="payroll"]) .workspace-primary-nav { grid-column: 1; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
    .workspace-navigation:has(.workspace-primary-nav > [data-module-key="payroll"]) .workspace-quick-nav { grid-column: 2; flex-shrink: 0; }
}

@media (max-width: 1200px) {
    .workspace-navigation { display: flex; justify-content: flex-end; gap: 35px; padding-inline: 30px; }
    .workspace-primary-nav { gap: 25px; }
    .workspace-logout { margin-left: 25px; }
    .workspace-profile-name { font-size: 20px; }
    .workspace-assignment { font-size: 14px; }
}
@media (max-width: 800px) {
    .workspace-header { height: auto; min-height: 95px; padding: 10px 20px; flex-wrap: wrap; gap: 10px; }
    .workspace-brand img { width: 180px; height: 72px; }
    .workspace-profile { flex-wrap: wrap; }
    .workspace-logout { margin-left: 10px; }
    .workspace-navigation { justify-content: space-between; flex-wrap: wrap; gap: 15px; padding: 15px 20px; }
    .workspace-primary-nav { flex-wrap: wrap; gap: 20px; }
    .workspace-primary-nav > a { font-size: 16px; }
    .office-workspace .page-shell { padding-inline: 15px; }
}

.workspace-nav-menu { position: relative; }
.workspace-nav-menu > summary { display: flex; align-items: center; gap: 10px; padding: 5px; color: var(--ed-canvas); font: 400 20px/27px var(--ed-font); border-radius: 3px; list-style: none; cursor: pointer; white-space: nowrap; }
.workspace-nav-menu > summary::-webkit-details-marker { display: none; }
.workspace-nav-menu > summary img { filter: brightness(0) invert(1); }
.workspace-nav-menu > summary[aria-current] { background: var(--ed-canvas); color: var(--ed-brand); font-weight: 700; }
.workspace-nav-menu > summary[aria-current] img { filter: none; }
.workspace-nav-menu > div { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 186px; padding: 10px 0; border-radius: 0; background: var(--ed-brand); }
.workspace-nav-menu > div a { display: block; padding: 8px; color: var(--ed-canvas); font-size: 16px; text-decoration: none; white-space: nowrap; }
.workspace-nav-menu > div a:hover, .workspace-nav-menu > div a[aria-current] { background: var(--ed-table-heading); color: var(--ed-brand); }
@media (max-width: 800px) { .workspace-nav-menu > summary { font-size: 16px; } .workspace-nav-menu > div { min-width: 220px; } }
.workspace-primary-nav[data-workspace-role="production_controller"] [data-workspace-menu="orders"] > div { top: calc(100% + 15px); display: flex; flex-direction: column; gap: 15px; width: 186px; min-width: 186px; padding: 14px 8px; }
.workspace-primary-nav[data-workspace-role="production_controller"] [data-workspace-menu="orders"] > div a { width: 164px; padding: 0; white-space: normal; line-height: 1.4; }
.workspace-primary-nav[data-workspace-role="production_controller"] [data-workspace-menu="orders"] > div a[aria-current]:not(:hover) { background: transparent; color: var(--ed-canvas); }

.workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) { position: relative; z-index: 30; }
.workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) [data-workspace-menu="orders"] > div { top: calc(100% + 8px); left: -6px; display: flex; flex-direction: column; gap: 15px; width: 186px; min-width: 186px; padding: 18px 8px 12px; }
.workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) [data-workspace-menu="orders"] > div a { width: 164px; padding: 0; white-space: normal; line-height: 1.4; }
.workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) [data-workspace-menu="orders"] > div a[aria-current]:not(:hover) { background: transparent; color: var(--ed-canvas); }
@media (min-width: 1201px) {
    .workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) { gap: 60px; transform: translate(-92.5px, 7px); }
    .workspace-primary-nav:is([data-workspace-role="warehouse_operator"], [data-workspace-role="procurement_coordinator"]) > a { padding-inline: 0; }
}

/* Management reuses the ERP shell; the full permitted catalog remains in More. */
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-header { height: auto; min-height: 110px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-profile { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-profile-name { max-width: 330px; overflow-wrap: anywhere; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-assignment { min-width: 0; max-width: 310px; overflow-wrap: anywhere; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-logout { margin-left: 24px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-logout button { min-height: 44px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; padding-inline: 30px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-primary-nav { flex-wrap: wrap; gap: 14px; min-width: 0; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-primary-nav > a,
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-nav-menu > summary { display: inline-flex; align-items: center; min-height: 44px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-context-switch > summary { display: grid; place-items: center; width: 44px; height: 44px; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-nav-menu > div { width: min(360px, calc(100vw - 24px)); min-width: 0; max-height: min(440px, calc(100dvh - 200px)); overflow-y: auto; overscroll-behavior: contain; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) [data-workspace-menu="all-modules"] > div { left: auto; right: 0; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-nav-menu > div a { min-height: 44px; padding: 10px 16px; white-space: normal; overflow-wrap: anywhere; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-menu-group { margin: 12px 0 0; padding: 12px 16px 6px; border-top: 1px solid #faf9f64d; color: var(--ed-canvas); font-size: 14px; font-weight: 700; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-menu-group:first-child { margin-top: 0; border-top: 0; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-context-switch form { max-height: calc(100dvh - 24px); overflow-y: auto; }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-context-switch select { min-height: 44px; font: 400 16px/22px var(--ed-font); }
:is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .is-positioned > :is(div, form) { position: fixed; z-index: 100; top: var(--ed-menu-top); left: var(--ed-menu-left); right: auto; max-height: var(--ed-menu-max-height); }
@media (max-width: 800px) {
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-header { padding: 10px 20px; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-profile { width: 100%; justify-content: flex-start; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-profile-name { max-width: 100%; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-assignment { max-width: 100%; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-navigation { padding: 15px; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-primary-nav { gap: 8px; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-primary-nav > a, :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-nav-menu > summary { padding-inline: 4px; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-nav-menu > summary { gap: 6px; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-quick-nav { flex-wrap: wrap; }
    :is(.office-workspace-management, .office-workspace-operator, .office-workspace-standard) .workspace-logout { margin-left: auto; }
}