.alko-logo { display: block; object-fit: contain; }

.login-logo-wrap {
  width: 310px;
  border-radius: 11px;
  background: #fff;
  padding: 11px 15px;
}

.login-logo { width: 100%; height: 76px; }
.login-brand .eyebrow { margin-top: 76px; }
.sidebar { padding: 27px 18px 34px; }
.sidebar{overflow:hidden}.sidebar-logo-button,.workspace-label,.sidebar-bottom{flex:0 0 auto}.sidebar nav{flex:1 1 auto;min-height:0;display:grid;grid-auto-rows:max-content;align-content:start;gap:2px;overflow-y:auto;overflow-x:hidden;padding-right:5px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd4e6 transparent}.sidebar nav::-webkit-scrollbar{width:6px}.sidebar nav::-webkit-scrollbar-track{background:transparent}.sidebar nav::-webkit-scrollbar-thumb{background:#cbd4e6;border-radius:999px}.sidebar nav::-webkit-scrollbar-thumb:hover{background:#9eabc2}.sidebar-bottom{margin-top:12px;background:#fff}
.task-team-picker{margin:16px 0;border:1px solid #dfe4ed;border-radius:12px;padding:14px}.task-team-picker legend{padding:0 6px;color:#40506d;font-size:13px;font-weight:700}.task-team-picker label{display:flex;align-items:center;gap:8px;color:#53617b;font-size:13px;font-weight:600}.task-team-picker input{width:17px;height:17px;accent-color:var(--navy)}.task-team-all{padding-bottom:11px;border-bottom:1px solid var(--line)}.task-team-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:12px}@media(max-width:700px){.task-team-options{grid-template-columns:1fr 1fr}}
.dashboard-task-guide{width:100%;border:0;background:transparent;text-align:left;grid-template-columns:18px minmax(0,1fr) auto;transition:background .18s;padding-left:8px;padding-right:8px;border-radius:9px}.dashboard-task-guide:hover{background:#f5f7fb}.dashboard-task-copy{display:grid;gap:4px;min-width:0}.dashboard-task-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.dashboard-task-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-task-heading em{font-style:normal;font-size:9px;font-weight:800;color:var(--navy);background:#edf1fa;padding:4px 6px;border-radius:999px;white-space:nowrap}.dashboard-task-message{font-size:11px;line-height:1.4;color:#53617b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dashboard-task-message b{color:#263754}.dashboard-task-copy small{font-size:10px;color:#929db0}.dashboard-task-guide .task-date{align-self:start;margin-top:2px}@media(max-width:700px){.dashboard-task-guide{grid-template-columns:14px minmax(0,1fr)}.dashboard-task-guide .task-date{grid-column:2}.dashboard-task-heading{align-items:flex-start;flex-direction:column}}
.sidebar-logo { width: 194px; height: 57px; object-position: left center; }
.workspace-label { margin: 22px 12px 10px; line-height: 1.35; }

@media (max-width: 980px) {
  .sidebar-logo { width: 50px; height: 43px; object-position: center; }
}

.login-brand {
  background: #fff;
  color: var(--ink);
}

.login-brand .eyebrow { color: #71809a; }
.login-copy { color: #63708a; }
.login-panel { background: var(--navy); }

.login-card {
  background: #fff;
  padding: 42px;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 33, 80, .24);
}

.login-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 28px;
  padding: 4px;
  border-radius: 12px;
  background: #eef1f7;
}

.login-type-switch button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #71809a;
  font-size: 12px;
  font-weight: 700;
  transition: .2s ease;
}

.login-type-switch button.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 7px rgba(26, 45, 91, .1);
}

.customer-app { min-height: 100vh; background: #f5f7fb; }
.customer-header { min-height: 82px; display: flex; justify-content: space-between; align-items: center; padding: 9px clamp(22px, 5vw, 78px); border-bottom: 1px solid var(--line); background: #fff; }
.customer-logo { width: 190px; height: 58px; }
.customer-header-actions { display: flex; align-items: center; gap: 15px; }
.customer-nav { display: flex; align-self: stretch; gap: 3px; }
.customer-nav button { position: relative; border: 0; background: transparent; padding: 0 12px; color: #758199; font-size: 12px; font-weight: 700; }
.customer-nav button.active { color: var(--navy); }
.customer-nav button.active::after { content: ""; position: absolute; height: 3px; border-radius: 3px 3px 0 0; background: var(--red); inset: auto 12px 0; }
.cart-button { border: 1px solid #dfe4ed; border-radius: 9px; background: #fff; color: var(--navy); padding: 9px 11px; font-size: 11px; font-weight: 700; }
.cart-button b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 9px; }
.portal-label { color: #71809a; font-size: 11px; font-weight: 700; padding-right: 15px; border-right: 1px solid var(--line); }
.customer-account { border: 0; background: transparent; display: flex; gap: 9px; align-items: center; text-align: left; }
.customer-account > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e7ecf8; color: var(--navy); font-size: 11px; font-weight: 700; }
.customer-account i { display: grid; gap: 1px; font-style: normal; }
.customer-account strong { font-size: 12px; }
.customer-account small { color: var(--muted); font-size: 10px; }
.customer-content { width: min(1180px, calc(100% - 44px)); margin: 0 auto; padding: 54px 0 70px; }
.customer-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 29px; }
.customer-welcome h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -1.8px; }
.customer-welcome p:last-child { margin: 0; color: #6d7a92; font-size: 14px; }
.customer-welcome-actions { display: flex; gap: 9px; flex-shrink: 0; }
.customer-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.customer-stat-grid article { min-height: 132px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.customer-stat-grid span { color: #7c899e; font-size: 11px; }
.customer-stat-grid strong { margin: 8px 0 6px; color: var(--navy); font-size: 27px; letter-spacing: -1px; }
.customer-stat-grid small { color: #8a96a9; font-size: 10px; }
.customer-portal-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.order-entry-card > h2 { margin-bottom: 8px; font-size: 21px; }
.order-entry-card > p:not(.eyebrow) { margin: 0; color: #758199; font-size: 13px; }
.order-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.order-methods button { min-height: 144px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 1px solid #dfe4ee; border-radius: 12px; background: #fafbfe; color: var(--ink); text-align: left; transition: .2s ease; }
.order-methods button:hover { border-color: var(--navy); background: #f1f4fb; transform: translateY(-1px); }
.order-methods button > span { margin-bottom: 7px; color: var(--red); font-size: 23px; }
.order-methods button strong { font-size: 13px; }
.order-methods button small { color: #7e8ba0; font-size: 11px; line-height: 1.45; }
.customer-order-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.customer-order-row:last-child { border-bottom: 0; }
.customer-order-row .order-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e8f7f1; color: #137354; font-style: normal; font-size: 12px; font-weight: 700; }
.customer-order-row .muted-icon { background: #eef2fa; color: var(--navy); }
.customer-order-row strong { font-size: 12px; }
.customer-order-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 27px; }
.catalog-heading h1 { margin: 0 0 9px; font-size: 34px; letter-spacing: -1.2px; }
.catalog-heading p:last-child { margin: 0; color: #748098; font-size: 13px; }
.catalog-filters { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.category-filters,.package-filters { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: #e9edf5; overflow-x: auto; }
.category-filters button,.package-filters button { white-space: nowrap; border: 0; border-radius: 7px; background: transparent; padding: 8px 11px; color: #758199; font-size: 10px; font-weight: 700; }
.category-filters button.active,.package-filters button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(38,56,100,.1); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-card { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.product-art { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg,#eef2fb,#dce4f6); background-size: cover; background-position: center; }
.product-art::before, .product-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.42); }
.product-art::before { width: 120px; height: 120px; right: -27px; top: -32px; }
.product-art::after { width: 78px; height: 78px; left: -20px; bottom: -25px; }
.product-art span { z-index: 1; display: grid; place-items: center; width: 88px; height: 112px; border-radius: 13px 13px 18px 18px; background: var(--navy); color: #fff; font-family: "Playfair Display",serif; font-size: 29px; box-shadow: 0 18px 30px rgba(30,48,96,.19); transform: rotate(-4deg); }
.product-art[style] span { display: none; }
.product-art b { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--navy); font-size: 8px; }
.product-art.berry { background: linear-gradient(145deg,#ffe9ed,#f5bac5); }.product-art.berry span { background: #dc2145; }
.product-art.choco { background: linear-gradient(145deg,#f6eadc,#d9b58e); }.product-art.choco span { background: #704128; }
.product-art.biscuit { background: linear-gradient(145deg,#fff4d9,#ebca81); }.product-art.biscuit span { background: #d4881e; }
.product-art.wafer { background: linear-gradient(145deg,#e8efff,#b9c9ef); }.product-art.wafer span { background: #3155ad; }
.product-art.jelly { background: linear-gradient(145deg,#ecf9e9,#b9e4b0); }.product-art.jelly span { background: #2b9a5a; }
.product-art.coconut { background: linear-gradient(145deg,#f4edf9,#d9c2e7); }.product-art.coconut span { background: #8252a3; }
.product-copy { padding: 14px 2px 11px; }.product-copy > small { color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .3px; }.product-copy h3 { margin: 5px 0 4px; font-size: 14px; }.product-copy p { margin: 0; color: #8490a4; font-size: 11px; }
.customer-price { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; }.customer-price strong { color: var(--navy); font-size: 15px; }.customer-price span { color: #1b8a65; font-size: 8px; }
.catalog-empty { grid-column: 1/-1; padding: 50px; border: 1px dashed #d8deea; border-radius: 13px; color: #8490a5; text-align: center; font-size: 12px; }
.product-controls { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7px; margin-bottom: 8px; }
.product-controls select,.product-controls input { width: 100%; height: 38px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; padding: 0 9px; font-size: 11px; }
.product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }.product-actions button { min-height: 36px; width: 100%; }.product-actions .text-action { border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; }
.customer-orders-table { padding: 0; overflow: hidden; }
.customer-order-line { display: grid; grid-template-columns: 1fr 120px 130px 70px; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.customer-order-line:last-child { border: 0; }.customer-order-line strong,.customer-order-line small { display: block; }.customer-order-line small { margin-top: 4px; color: #8c98aa; }
.cart-modal section { padding: 27px; }.cart-items { min-height: 100px; }
.cart-row { display: grid; grid-template-columns: 42px 1fr auto 28px; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #edf1fa; color: var(--navy); font-weight: 700; }
.cart-row strong,.cart-row small { display: block; font-size: 12px; }.cart-row small { margin-top: 3px; color: #8995a8; font-size: 10px; }.cart-row > span { color: var(--navy); font-size: 12px; font-weight: 700; }.cart-row > button { border: 0; background: #f2f4f8; border-radius: 50%; color: #71809a; }
.cart-quantity { display: flex; align-items: center; gap: 5px; margin-top: 5px; }.cart-quantity input { width: 58px; height: 28px; border: 1px solid #dfe4ed; border-radius: 6px; padding: 0 6px; font-size: 10px; }.cart-quantity span { color: #7f8ca0; font-size: 9px; }
.repeat-order-notice { display: grid; grid-template-columns: 35px 1fr; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid #cfdaf1; border-radius: 9px; background: #f2f6fd; }.repeat-order-notice > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; }.repeat-order-notice strong,.repeat-order-notice small { display: block; }.repeat-order-notice strong { color: var(--navy); font-size: 10px; }.repeat-order-notice small { margin-top: 4px; color: #748199; font-size: 9px; line-height: 1.45; }
.empty-cart { padding: 30px 0; text-align: center; color: #8b97aa; font-size: 12px; }
.cart-note { display: grid; gap: 7px; margin-top: 17px; color: #55627a; font-size: 12px; font-weight: 700; }.cart-note textarea { min-height: 75px; resize: vertical; border: 1px solid #dfe4ed; border-radius: 9px; padding: 11px; font: inherit; }
.cart-total { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }.cart-total span { color: #7b879c; font-size: 12px; }.cart-total strong { color: var(--navy); font-size: 18px; }.cart-disclaimer { color: #8995a8; font-size: 10px; line-height: 1.5; }

.role-preview { display: flex; align-items: center; gap: 7px; color: #8490a5; font-size: 10px; font-weight: 700; }
.role-preview select { height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 8px; color: var(--navy); font-size: 10px; font-weight: 700; }
.workflow-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #8591a5; font-size: 11px; font-weight: 700; }.workflow-strip span.active { color: var(--navy); }.workflow-strip .completed-step { color: #16805d; }.workflow-strip b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; border-radius: 99px; background: #edf1f9; color: var(--navy); font-size: 9px; }.workflow-strip .completed-step b { background: #e8f7f1; color: #16805d; }.workflow-strip i { color: #b5becd; font-style: normal; }
.order-work-list { display: grid; gap: 12px; }.work-order { padding: 20px 22px; }.work-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }.work-order-top h2 { margin: 5px 0; }.work-order-top p { margin: 0; color: #7d899d; font-size: 11px; }.order-kind { color: var(--navy); font-size: 9px; font-weight: 800; letter-spacing: 1px; }.order-kind.sample { color: var(--red); }
.work-order-meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 17px 0; padding: 13px; border-radius: 9px; background: #f7f9fc; }.work-order-meta small,.work-order-meta strong { display: block; }.work-order-meta small { margin-bottom: 4px; color: #8a96a9; font-size: 9px; }.work-order-meta strong { font-size: 11px; }.work-order-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sample-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; align-items: start; }.sample-column { padding: 13px; border-radius: 13px; background: #e9edf4; }.sample-column-head { display: flex; justify-content: space-between; padding: 5px 3px 13px; font-size: 12px; }.sample-column-head span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 9px; }.sample-column article { margin-bottom: 9px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.sample-column article:last-child { margin-bottom: 0; }.sample-column article small { color: #8a96aa; font-size: 9px; }.sample-column article h3 { margin: 7px 0 4px; font-size: 13px; }.sample-column article p { margin: 0 0 12px; color: #748097; font-size: 10px; }.sample-column article b { color: var(--navy); font-size: 9px; }

.admin-product-hero { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }.admin-product-hero h2 { margin: 0 0 6px; font-size: 25px; }.admin-product-hero p:last-child { margin: 0; color: #758199; font-size: 12px; }
.admin-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }.admin-kpis article { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.admin-kpis span,.admin-kpis small { display: block; color: #8290a5; font-size: 9px; }.admin-kpis strong { display: block; margin: 7px 0 4px; color: var(--navy); font-size: 22px; }
.admin-product-panel { padding-bottom: 10px; }.admin-filter { height: 39px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 0 10px; color: #60708c; font-size: 11px; }
.admin-product-list { margin: 0 -23px; }.admin-product-row { display: grid; grid-template-columns: 54px 1.25fr 1fr .65fr 72px 136px; align-items: center; gap: 12px; padding: 13px 23px; border-top: 1px solid var(--line); }.admin-product-thumb { width: 50px; height: 50px; display: grid; place-items:center; border-radius: 9px; background-color: #edf1f8; background-size: cover; background-position: center; color: var(--navy); font-weight: 800; }.admin-product-row strong,.admin-product-row small { display: block; }.admin-product-row strong { font-size: 11px; }.admin-product-row small { margin-top: 4px; color: #8995a8; font-size: 8px; }.catalog-status { padding: 5px 7px; border-radius: 99px; text-align: center; font-size: 8px; font-weight: 800; }.catalog-status.active { background: #e8f7f1; color: #137354; }.catalog-status.passive { background: #edf0f5; color: #69758a; }.admin-row-actions { display: flex; gap: 5px; }.admin-row-actions button { flex: 1; }
.admin-product-thumb.berry { background-color: #f5bac5; color: #a61534; }.admin-product-thumb.choco { background-color: #d9b58e; color: #704128; }.admin-product-thumb.biscuit { background-color: #ebca81; color: #935810; }.admin-product-thumb.wafer { background-color: #b9c9ef; color: #3155ad; }.admin-product-thumb.jelly { background-color: #b9e4b0; color: #237947; }.admin-product-thumb.coconut { background-color: #d9c2e7; color: #744292; }
.pricing-policy-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; align-items: center; margin-top: 18px; }.pricing-policy-panel h2 { margin-bottom: 7px; }.pricing-policy-panel p:last-child { margin: 0; color: #7d899e; font-size: 11px; line-height: 1.5; }.price-rule { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 11px; background: #f5f7fb; }.price-rule > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 9px; font-weight: 800; }.price-rule p { margin: 0; flex: 1; }.price-rule strong,.price-rule small { display: block; }.price-rule strong { font-size: 9px; }.price-rule small { margin-top: 3px; color: #8793a6; font-size: 7px; }.price-rule i { color: #a6b0c1; font-style: normal; }
.form-section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 13px; padding-top: 17px; border-top: 1px solid var(--line); }.form-section-title span { color: var(--navy); font-size: 11px; font-weight: 800; }.form-section-title small { color: #8995a8; font-size: 9px; }
.product-upload { display: flex; gap: 15px; align-items: center; margin-bottom: 18px; padding: 13px; border: 1px dashed #cfd7e5; border-radius: 11px; background: #fafbfe; }.product-image-previews { display:flex; gap:7px; }.product-image-previews span { width: 68px; height: 68px; display:grid; place-items:center; border-radius:9px; background:#e9edf5 center/cover; color:#8290a5; font-size:16px; }.product-upload strong { font-size: 12px; }.product-upload p { margin: 4px 0 8px; color: #8995a8; font-size: 9px; }.upload-button { display: inline-block!important; padding: 6px 9px; border-radius: 7px; background: #fff; color: var(--navy)!important; box-shadow: 0 1px 4px rgba(28,46,84,.1); font-size: 9px!important; }.upload-button input { display: none; }
.product-admin-modal { width: min(720px,calc(100vw - 34px)); max-height: calc(100vh - 32px); }.product-admin-modal form { max-height: calc(100vh - 32px); overflow-y: auto; }.wide-field { display: grid; gap: 8px; color: #40506d; font-size: 13px; font-weight: 600; }.wide-field textarea { min-height: 88px; resize: vertical; border: 1px solid #dfe4ed; border-radius: 10px; padding: 12px; font: inherit; color: var(--ink); }.nutrition-form-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.nutrition-form-grid label { display: grid; gap: 7px; color: #40506d; font-size: 10px; font-weight: 700; }.nutrition-form-grid input { width: 100%; height: 42px; border: 1px solid #dfe4ed; border-radius: 9px; padding: 0 10px; }
.product-detail-modal { width: min(820px,calc(100vw - 34px)); }.product-detail-modal > section { padding: 27px; }.product-detail-head { position: relative; display: grid; grid-template-columns: 260px 1fr; gap: 25px; align-items: center; }.product-detail-head > .close-button { position: absolute; right: 0; top: 0; }.product-detail-art { height: 250px; }.product-detail-head h2 { margin: 4px 0 7px; padding-right: 35px; font-size: 27px; letter-spacing: -.8px; }.product-code { display: inline-block; margin: 0; padding: 5px 8px; border-radius: 6px; background: #edf1fa; color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .6px; }.detail-price { display: flex; align-items: baseline; gap: 8px; margin: 17px 0; }.detail-price strong { color: var(--navy); font-size: 23px; }.detail-price small { color: #16805d; font-size: 9px; }.detail-package { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 7px; }.detail-package span { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfe; }.detail-package small,.detail-package strong { display: block; }.detail-package small { margin-bottom: 4px; color: #8995a8; font-size: 8px; }.detail-package strong { color: #37445e; font-size: 10px; }.product-information-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }.product-information-grid > section { padding: 17px; border: 1px solid var(--line); border-radius: 11px; }.product-information-grid > section > p:not(.eyebrow) { margin: 0; color: #68758b; font-size: 11px; line-height: 1.6; }.product-information-grid > section > small { display: block; margin: -7px 0 9px; color: #929daf; font-size: 8px; }.nutrition-table > div { display: flex; justify-content: space-between; gap: 15px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 9px; }.nutrition-table > div:last-child { border-bottom: 0; }.nutrition-table span { color: #718099; }.nutrition-table strong { color: #34415a; }.product-detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); }
.customer-pricing-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; margin-bottom: 14px; padding: 15px; border: 1px solid #d8e0f0; border-radius: 11px; background: #f5f8fd; }.customer-pricing-card h3 { margin: 0 0 4px; font-size: 13px; }.customer-pricing-card small { color: #7f8ba0; font-size: 9px; }.discount-badge { min-width: 70px; padding: 9px; border-radius: 9px; background: #e8f7f1; color: #16805d; text-align: center; font-size: 17px; font-weight: 800; }.discount-badge small { display: block; margin-top: 2px; color: #4b8e78; font-size: 7px; }

.source-pill { padding: 6px 10px; border-radius: 999px; background: #edf1fa; color: var(--navy); font-size: 10px; font-weight: 700; }
.detail-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; overflow-x: auto; border-radius: 10px; background: #eef1f6; }.detail-tabs button { white-space: nowrap; border: 0; border-radius: 7px; background: transparent; padding: 8px 10px; color: #76839a; font-size: 10px; font-weight: 700; }.detail-tabs button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(30,46,80,.1); }
.document-vault { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }.file-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }.file-row:last-child { border: 0; }.file-row > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #ffeaed; color: var(--red); font-size: 9px; font-weight: 800; }.file-row strong,.file-row small { display: block; }.file-row strong { font-size: 11px; }.file-row small { margin-top: 3px; color: #8995a8; font-size: 9px; }
.risk-banner { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; padding: 17px; border: 1px solid #cde8dc; border-radius: 12px; background: #f0faf6; }.risk-banner > div { display: flex; align-items: center; gap: 12px; }.risk-score { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1e9b72; color: #fff; font-size: 22px; font-weight: 800; }.risk-banner h3 { margin: 0 0 3px; font-size: 14px; }.risk-banner small { color: #71847d; font-size: 9px; }
.risk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.risk-grid article { padding: 13px; border: 1px solid var(--line); border-radius: 9px; }.risk-grid span,.risk-grid strong { display: block; }.risk-grid span { margin-bottom: 5px; color: #8793a6; font-size: 9px; }.risk-grid strong { font-size: 11px; }.risk-grid .ok { color: #16805d; }.approval-line { display: flex; justify-content: space-between; margin-top: 12px; padding: 12px; border-radius: 9px; background: #f5f7fb; color: #748097; font-size: 10px; }.approval-line b { color: var(--navy); }
.retention-note { padding: 10px; border-radius: 8px; background: #fff6e9; color: #9b641f; font-size: 9px; }.photo-file-row { display: grid; grid-template-columns: 64px 1fr 120px 90px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.photo-file-row:last-child { border: 0; }.photo-file-row strong,.photo-file-row small { display: block; }.photo-file-row small { margin-top: 3px; color: #8a96a9; }.photo-preview { width: 62px; height: 44px; border-radius: 6px; background: repeating-linear-gradient(0deg,#d9b47a 0 5px,#f1e2c5 5px 13px); }.photo-preview.shelf-two { background: repeating-linear-gradient(90deg,#3155ad 0 8px,#eef2fa 8px 15px); }
body[data-role="production"] .restricted-finance,
body[data-role="purchasing"] .restricted-finance,
body[data-role="production"] .financial-only,
body[data-role="purchasing"] .financial-only { display: none!important; }
body[data-role="finance"] .customer-focus,
body[data-role="finance"] .restricted-sales,
body[data-role="production"] .customer-focus,
body[data-role="production"] .restricted-sales,
body[data-role="purchasing"] .customer-focus,
body[data-role="purchasing"] .restricted-sales { display: none!important; }
body:not([data-role="admin"]) .admin-only,
body:not(.admin-session) .admin-role-switch { display: none!important; }

.empty-state {
  padding: 34px 22px;
  text-align: center;
  color: #7b879c;
}
.empty-state strong { display: block; color: #33415b; font-size: 13px; }
.empty-state p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }

.employee-order-modal { width: min(1100px, calc(100vw - 34px)); }
.employee-order-modal form { max-height: calc(100vh - 32px); overflow-y: auto; }
.employee-order-lines { display: grid; gap: 9px; margin-bottom: 18px; }
.employee-order-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 13px;
  align-items: end;
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fafbfe;
}
.employee-order-line .line-product { grid-column: span 3; }
.employee-order-line .line-product { position: relative; }
.product-suggestions { position:absolute; z-index:20; top:100%; left:0; right:0; max-height:310px; overflow:auto; margin-top:5px; padding:6px; border:1px solid #dfe4ed; border-radius:10px; background:#fff; box-shadow:0 14px 35px rgba(28,46,84,.18); }
.product-suggestions button { width:100%; display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; padding:8px; border:0; border-radius:8px; background:#fff; text-align:left; cursor:pointer; }
.product-suggestions button:hover { background:#f0f4fb; }
.product-suggestions strong,.product-suggestions small { display:block; }.product-suggestions small { margin-top:3px; color:#7c899d; font-weight:500; }
.suggestion-image { width:44px; height:44px; display:grid; place-items:center; border-radius:7px; background:#e9edf5 center/cover; color:#617089; }
.employee-order-line .line-code { grid-column: span 1; padding-right: 38px; }
.employee-order-line .line-price { grid-column: span 2; }
.employee-order-line label { display: grid; gap: 7px; min-width: 0; color: #59677f; font-size: 11px; font-weight: 700; }
.employee-order-line input,
.employee-order-line select { width: 100%; min-width: 0; height: 44px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; padding: 0 11px; }
.employee-order-line .line-display-choice { display: flex; align-items: center; align-self: stretch; min-height: 44px; margin-top: 18px; padding: 0 13px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; cursor: pointer; }
.employee-order-line .line-display-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.employee-order-line .line-display-choice span { font-size: 12px; color: #40506d; }
.employee-order-line .line-calculation { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 15px; padding: 11px 13px; border-radius: 8px; background: #edf2fb; color: #52617a; font-size: 11px; }
.employee-order-line .line-calculation strong { color: var(--navy); text-align: right; }
.employee-order-line .close-button { position: absolute; right: 15px; top: 15px; }
@media(max-width:900px) {
  .employee-order-line { grid-template-columns: 1fr 1fr; }
  .employee-order-line .line-product { grid-column: 1 / -1; }
  .employee-order-line .line-code { padding-right: 38px; }
  .employee-order-line .line-price { grid-column: 1 / -1; }
}
@media(max-width:560px) {
  .employee-order-line { grid-template-columns: 1fr; }
  .employee-order-line .line-product,
  .employee-order-line .line-price,
  .employee-order-line .line-calculation { grid-column: 1; }
  .employee-order-line .line-calculation { display: grid; }
  .employee-order-line .line-calculation strong { text-align: left; }
}

.task-center-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.task-center-head h2 { margin: 0 0 6px; font-size: 25px; }
.task-center-head p:last-child { margin: 0; color: #758199; font-size: 12px; }
.task-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.task-kpis article { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.task-kpis span, .task-kpis small { display: block; color: #8290a5; font-size: 9px; }
.task-kpis strong { display: block; margin: 7px 0 4px; color: var(--navy); font-size: 22px; }
.task-board { max-width: none; }
.task-view-tabs { display: flex; gap: 4px; margin: -7px -7px 18px; padding: 5px; overflow-x: auto; border-radius: 10px; background: #eef1f6; }
.task-view-tabs button { white-space: nowrap; border: 0; border-radius: 7px; background: transparent; padding: 9px 12px; color: #748198; font-size: 10px; font-weight: 800; }
.task-view-tabs button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(30,46,80,.1); }
.team-task-list { display: grid; gap: 11px; }
.team-task-card { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 17px; border: 1px solid var(--line); border-left: 4px solid #aab5c8; border-radius: 11px; background: #fff; }
.team-task-card.yüksek { border-left-color: var(--orange); }
.team-task-card.acil { border-left-color: var(--red); }
.team-task-top { display: flex; gap: 7px; align-items: center; margin-bottom: 8px; }
.task-type, .task-status { padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.task-type { background: #edf1fa; color: var(--navy); }
.task-status { background: #eef1f5; color: #69768b; }
.task-status.pending, .task-status.revision { background: #fff3e4; color: #ad630e; }
.task-status.in_progress, .task-status.active { background: #eaf0ff; color: #3155ad; }
.task-status.waiting, .task-status.review { background: #f2ecff; color: #7045a7; }
.task-status.completed { background: #e8f7f1; color: #137354; }
.task-status.rejected { background: #ffeaed; color: #b41d34; }
.team-task-card h3 { margin: 0 0 6px; font-size: 14px; }
.team-task-card p { margin: 0; color: #738098; font-size: 10px; line-height: 1.5; }
.team-task-meta { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; margin-top: 13px; }
.team-task-meta span { padding: 8px; border-radius: 7px; background: #f7f8fb; }
.team-task-meta small, .team-task-meta strong { display: block; }
.team-task-meta small { margin-bottom: 3px; color: #8c97aa; font-size: 7px; }
.team-task-meta strong { color: #45516a; font-size: 9px; }
.team-task-actions { min-width: 135px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.secondary-button.danger { border-color: #f0cbd1; color: #b41d34; }
.task-create-modal { width: min(720px, calc(100vw - 34px)); }
.task-detail-modal { width: min(720px, calc(100vw - 34px)); }
.task-detail-modal > section { padding: 27px; }
.task-detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.task-detail-summary span { padding: 11px; border: 1px solid var(--line); border-radius: 8px; }
.task-detail-summary small, .task-detail-summary strong { display: block; }
.task-detail-summary small { margin-bottom: 4px; color: #8995a8; font-size: 8px; }
.task-detail-summary strong { font-size: 10px; }
.task-detail-description { margin: 14px 0; padding: 14px; border-radius: 9px; background: #f6f8fb; color: #637089; font-size: 11px; }
.task-detail-description p { margin: 0 0 7px; line-height: 1.6; }
.task-conversation { display: grid; gap: 8px; max-height: 250px; overflow-y: auto; }
.task-conversation article { padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.task-conversation article > div { display: flex; justify-content: space-between; gap: 12px; }
.task-conversation strong { font-size: 10px; }
.task-conversation small { color: #909bad; font-size: 8px; }
.task-conversation p { margin: 7px 0 0; color: #65728a; font-size: 10px; line-height: 1.5; }
.task-comment-form { display: flex; align-items: end; gap: 10px; margin: 16px -27px -27px; padding: 16px 27px 22px; border-top: 1px solid var(--line); }
.task-comment-form label { flex: 1; display: grid; gap: 7px; color: #40506d; font-size: 10px; font-weight: 700; }
.task-comment-form textarea { min-height: 64px; resize: vertical; border: 1px solid #dfe4ed; border-radius: 9px; padding: 10px; font: inherit; }
@media(max-width:800px) {
  .task-center-head { align-items: stretch; flex-direction: column; }
  .task-kpis { grid-template-columns: 1fr 1fr; }
  .team-task-card { grid-template-columns: 1fr; }
  .team-task-meta, .task-detail-summary { grid-template-columns: 1fr 1fr; }
  .team-task-actions { min-width: 0; }
}
body[data-role="production"] .editor-only:not(#editCustomerAction),
body[data-role="purchasing"] .editor-only:not(#editCustomerAction),
body[data-role="production"] #newCustomerButton,
body[data-role="production"] #newCustomerButton2,
body[data-role="production"] #employeeOrderButton,
body[data-role="purchasing"] #newCustomerButton,
body[data-role="purchasing"] #newCustomerButton2,
body[data-role="purchasing"] #employeeOrderButton,
body[data-role="production"] #offerAction,
body[data-role="production"] #fileAction,
body[data-role="production"] #editPricingAction,
body[data-role="purchasing"] #offerAction,
body[data-role="purchasing"] #fileAction,
body[data-role="purchasing"] #editPricingAction { display: none!important; }
body[data-role="sales"] .procurement-visible { display: none!important; }

.login-art { border-color: rgba(44, 71, 143, .18); }

.customer-detail-modal { width: min(860px, calc(100vw - 34px)); }
.customer-detail-modal section { padding: 27px; }
.detail-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.detail-header h2 { margin: 0; font-size: 30px; letter-spacing: -1px; }
.detail-header p:last-child { color: #6f7d95; font-size: 13px; margin: 7px 0 0; }
.detail-badges { display: flex; gap: 8px; margin: 14px 0 20px; }
.health-pill { font-size: 10px; border-radius: 999px; padding: 6px 10px; background: #eff3f7; color: #63718a; font-weight: 700; }
.health-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.health-pill.green i { background: #1e9b72; }.health-pill.yellow i { background: #e68a28; }.health-pill.gray i { background: #8d9aae; }
.detail-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.detail-summary-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfe; }
.detail-summary-grid span, .detail-summary-grid small { display: block; color: #7e8ba1; font-size: 10px; }.detail-summary-grid strong { display: block; margin: 6px 0; font-size: 15px; color: var(--navy); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.detail-card { border: 1px solid var(--line); border-radius: 11px; padding: 16px!important; }.detail-card h3 { margin: 0; font-size: 14px; }.detail-card p:not(.eyebrow) { margin: 6px 0; color: #7b889e; font-size: 12px; }.detail-card a { font-size: 11px; color: var(--navy); text-decoration: none; }.owner-role { font-size: 10px; color: var(--red); font-weight: 700; }.detail-card .text-action { margin-top: 4px; }
.timeline-section { margin-top: 20px; padding: 21px!important; border-radius: 12px; background: #f6f8fc; }.detail-section-heading { display: flex; justify-content: space-between; align-items: center; }.detail-section-heading h3 { margin: 0; font-size: 16px; }.timeline { margin-top: 17px; }.timeline > div { display: grid; grid-template-columns: 13px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; font-size: 12px; color: #46536d; }.timeline i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }.timeline small { color: #8b97aa; font-size: 10px; }

@media (max-width: 620px) { .detail-summary-grid, .detail-grid { grid-template-columns: 1fr; }.detail-section-heading { align-items: flex-start; gap: 12px; flex-direction: column; }.timeline > div { grid-template-columns: 13px 1fr; }.timeline small { grid-column: 2; } }

@media (max-width: 760px) {
  .login-card { padding: 29px 24px; }
  .customer-header { padding: 8px 16px; }
  .customer-header-actions .portal-label, .customer-account i { display: none; }
  .customer-logo { width: 145px; }
  .customer-content { width: min(100% - 28px, 1180px); padding-top: 35px; }
  .customer-welcome { align-items: stretch; flex-direction: column; }
  .customer-welcome-actions { flex-direction: column-reverse; }.customer-welcome-actions button { width: 100%; }
  .customer-stat-grid, .customer-portal-grid, .order-methods { grid-template-columns: 1fr; }
  .customer-nav { position: fixed; z-index: 4; inset: auto 0 0; justify-content: space-around; height: 56px; background: #fff; box-shadow: 0 -5px 20px rgba(20,38,75,.08); }
  .customer-nav button { padding: 0 5px; font-size: 9px; }.customer-nav button.active::after { inset: 0 6px auto; }
  .customer-content { padding-bottom: 90px; }.customer-header-actions .customer-account { display: none; }
  .product-grid { grid-template-columns: 1fr 1fr; }.product-art { height: 135px; }.product-art span { width: 70px; height: 90px; font-size: 23px; }
  .catalog-heading { align-items: stretch; flex-direction: column; }.catalog-heading .search { width: 100%; }
  .customer-order-line { grid-template-columns: 1fr auto; }.customer-order-line .status-pill,.customer-order-line button { grid-column: auto; }
  .role-preview { display: none; }.workflow-strip { overflow-x: auto; }.workflow-strip span { white-space: nowrap; }
  .sample-board { grid-template-columns: 1fr; }.work-order-meta { grid-template-columns: 1fr 1fr; }
  .risk-grid { grid-template-columns: 1fr 1fr; }.photo-file-row { grid-template-columns: 64px 1fr; }.photo-file-row > span,.photo-file-row > small { grid-column: 2; }
  .catalog-filters { align-items: stretch; flex-direction: column; }.admin-kpis { grid-template-columns: 1fr 1fr; }.admin-product-row { grid-template-columns: 50px 1fr auto; }.admin-product-row > span:not(.catalog-status) { display: none; }.pricing-policy-panel { grid-template-columns: 1fr; }.price-rule { overflow-x: auto; }.price-rule p { min-width: 95px; }
  .nutrition-form-grid { grid-template-columns: 1fr 1fr; }.product-detail-head { grid-template-columns: 1fr; }.product-detail-art { height: 210px; }.product-information-grid { grid-template-columns: 1fr; }.detail-package { grid-template-columns: 1fr 1fr; }.detail-package span:last-child { grid-column: 1/-1; }
}

@media (max-width: 460px) { .product-grid { grid-template-columns: 1fr; } }
.customer-access {
  border: 1px solid #dfe4ef;
  border-radius: 16px;
  margin: 20px 0;
  padding: 18px;
}

.customer-access legend {
  color: #17223b;
  font-weight: 700;
  padding: 0 8px;
}

.customer-access > p {
  color: #687087;
  font-size: 13px;
  margin: 0 0 14px;
}

.customer-choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-choice-grid label {
  align-items: center;
  border: 1px solid #e1e5ed;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px;
}

.customer-choice-grid label:has(input:checked) {
  background: #f1f4ff;
  border-color: #3d5598;
}

.customer-choice-grid input {
  accent-color: #3d5598;
  height: 18px;
  width: 18px;
}

.customer-choice-grid span,
.customer-choice-grid small {
  display: block;
}

.customer-choice-grid small,
.product-access-summary {
  color: #697288;
  margin-top: 3px;
}

.procurement-hero {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.procurement-hero h2,
.procurement-card h3 {
  margin: 0;
}

.procurement-hero > div > p:last-child {
  color: #6c7890;
  margin: 8px 0 0;
}

.procurement-board {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.procurement-card-head,
.procurement-meta,
.procurement-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.procurement-card-head small {
  color: #3d5598;
  font-weight: 800;
}

.procurement-card-head p,
.procurement-note {
  color: #738097;
  font-size: 12px;
}

.request-priority {
  background: #edf1f8;
  border-radius: 999px;
  color: #53617b;
  font-size: 10px;
  font-weight: 800;
  padding: 7px 10px;
}

.request-priority.yüksek,
.request-priority.kritik {
  background: #fff0e8;
  color: #c64d18;
}

.procurement-meta {
  border-bottom: 1px solid #e8ebf1;
  border-top: 1px solid #e8ebf1;
  margin: 16px 0 12px;
  padding: 13px 0;
}

.procurement-meta span {
  display: grid;
  gap: 3px;
}

.procurement-meta small {
  color: #8c97aa;
  font-size: 10px;
}

.procurement-meta strong {
  font-size: 12px;
}

.procurement-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.procurement-request-modal { width: min(1040px, calc(100vw - 34px)); }
.procurement-request-modal form { max-height: calc(100vh - 32px); overflow-y: auto; }
.procurement-lines-title { align-items: center; }
.procurement-lines-title > div:first-child { display: grid; gap: 3px; }
.procurement-lines-title > div:last-child { display: flex; gap: 15px; }
.procurement-lines { display: grid; gap: 10px; margin-bottom: 18px; }
.procurement-line {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(180px, 1.4fr) 34px;
  gap: 10px;
  align-items: end;
  padding: 13px;
  border: 1px solid #dfe4ed;
  border-radius: 11px;
  background: #fafbfe;
}
.procurement-line label { display: grid; gap: 6px; min-width: 0; color: #59677f; font-size: 10px; font-weight: 700; }
.procurement-line input,
.procurement-line select { width: 100%; min-width: 0; height: 41px; padding: 0 9px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; }
.procurement-line .close-button { margin-bottom: 5px; }
.procurement-bulk-panel { margin-bottom: 13px; padding: 14px; border: 1px dashed #bfcbe0; border-radius: 11px; background: #f5f8fd; }
.procurement-bulk-panel textarea { min-height: 92px; }
.procurement-bulk-panel > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 9px; }
.procurement-bulk-panel small { color: #748097; font-size: 9px; }
.procurement-item-preview { display: grid; gap: 7px; margin-top: 15px; padding: 11px; border-radius: 9px; background: #f5f7fb; }
.procurement-item-preview > div { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; }
.procurement-item-preview > div strong { color: #34415a; }
.procurement-item-preview > div span { color: var(--navy); font-weight: 700; white-space: nowrap; }
.procurement-item-preview > p { margin: 2px 0 0; color: var(--navy); font-size: 10px; font-weight: 700; }

.detail-header-actions {
  align-items: center;
  display: flex;
  gap: 9px;
}

.order-edit-items {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.order-edit-row {
  align-items: center;
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1.5fr 1fr .7fr .7fr .8fr .8fr;
  position: relative;
  padding: 12px;
}

.order-edit-row small {
  color: #8490a5;
  display: block;
  margin-top: 3px;
}

.order-edit-row label {
  color: #758199;
  display: grid;
  font-size: 10px;
  gap: 4px;
}

.order-edit-row input,
.order-edit-row select {
  border: 1px solid #dfe4ed;
  border-radius: 8px;
  height: 36px;
  padding: 0 9px;
  width: 100%;
}
.order-edit-row .close-button { position:absolute; right:-8px; top:-8px; }

.order-workflow-modal { width: min(920px, calc(100vw - 34px)); }
.order-workflow-modal form { max-height: calc(100vh - 32px); overflow-y: auto; }
.order-workflow-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.order-workflow-summary > div,
.order-workflow-summary > label { display: grid; gap: 6px; min-height: 70px; padding: 13px; border: 1px solid #dfe4ed; border-radius: 10px; background: #f8f9fc; color: #68758b; font-size: 10px; font-weight: 700; }
.order-workflow-summary strong { color: var(--navy); font-size: 14px; }
.order-workflow-summary input { height: 39px; padding: 0 9px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; }
.order-workflow-actions { margin-top: 19px; padding: 15px; border: 1px solid #dfe4ed; border-radius: 12px; background: #fafbfe; }
.order-workflow-actions > p { margin: 13px 0 0; color: #748097; font-size: 11px; text-align: right; }
.order-workflow-actions > .primary-button { display: block; margin: 15px 0 0 auto; }
.workflow-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e9f1; }
.workflow-action-buttons p { flex: 1 1 280px; margin: 0; color: #748097; font-size: 11px; }
.workflow-action-buttons button { flex: 0 0 auto; min-width: 138px; }
#estimatedShipmentField .text-action { justify-self: start; margin-top: 2px; }
#estimatedShipmentField input { width: 100%; }
.shipping-details { margin: 4px 0 18px; padding: 17px; border: 1px solid #dfe4ed; border-radius: 12px; background: #f8f9fc; }
.shipping-details .form-section-title { margin-top: 0; }
.shipping-details .form-grid { margin-top: 12px; }
.shipping-details .form-grid label { display: grid; gap: 7px; color: #53617b; font-size: 11px; font-weight: 700; }
.shipping-details input, .shipping-details select { width: 100%; height: 43px; padding: 0 11px; border: 1px solid #dfe4ed; border-radius: 9px; background: #fff; color: var(--ink); }
.wide-field-grid { grid-column: 1 / -1; }
.dashboard-hero-actions { display: flex; gap: 9px; }
.notification-panel { position: fixed; z-index: 20; top: 86px; right: 28px; width: min(410px, calc(100vw - 32px)); max-height: calc(100vh - 112px); overflow: hidden; border: 1px solid #dfe4ed; border-radius: 17px; background: #fff; box-shadow: 0 22px 70px rgba(22, 35, 61, .22); }
.notification-panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 12px; }
.notification-panel-head h2 { margin: 0; color: var(--ink); font-size: 21px; }
.notification-summary { margin: 0; padding: 0 20px 15px; color: #7b879d; font-size: 11px; border-bottom: 1px solid #edf0f5; }
.notification-list { max-height: calc(100vh - 230px); overflow-y: auto; padding: 8px; }
.notification-item { width: 100%; display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: start; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; }
.notification-item:hover { background: #f4f6fb; }
.notification-item > span:last-child { display: grid; gap: 4px; min-width: 0; }
.notification-item strong { color: #1d2b48; font-size: 12px; }
.notification-item small { overflow: hidden; color: #6f7c93; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.notification-item time { color: #9aa5b8; font-size: 9px; }
.notification-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #edf1fa; color: var(--navy); font-size: 17px; font-weight: 800; }
.notification-icon.order { background: #fff0e3; color: #b96311; }.notification-icon.task { background: #e8f7f1; color: #167859; }.notification-icon.procurement { background: #f3edff; color: #7650ad; }
#notificationBadge { min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; top: -4px; right: -5px; color: #fff; font-size: 8px; line-height: 1; }
.dashboard-widget-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.dashboard-widget-choices label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dfe4ed; border-radius: 11px; background: #fafbfe; cursor: pointer; }
.dashboard-widget-choices input { width: 17px; height: 17px; accent-color: var(--navy); }
.dashboard-widget-choices span { display: grid; gap: 3px; }.dashboard-widget-choices strong { color: #263653; font-size: 11px; }.dashboard-widget-choices small { color: #8b96a9; font-size: 9px; }
.order-stage-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.order-stage-track .order-stage-step { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 4px 2px; border: 0; background: transparent; color: #8a96aa; font: inherit; font-size: 8px; text-align: center; cursor: pointer; }
.order-stage-track .order-stage-step:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: #dce2ed; pointer-events: none; }
.order-stage-track .order-stage-step:not(:disabled):hover i { background: #dce5f7; color: var(--navy); transform: translateY(-1px); }
.order-stage-track .order-stage-step:disabled { cursor: default; opacity: 1; }
.order-stage-track i { z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8ecf3; color: #70809a; font-style: normal; font-size: 9px; font-weight: 800; }
.order-stage-track .done i { background: #dff4ec; color: #16805d; }
.order-stage-track .current { color: var(--navy); font-weight: 800; }
.order-stage-track .current i { background: var(--navy); color: #fff; }

@media (max-width: 720px) {
  .customer-choice-grid { grid-template-columns: 1fr; }
  .procurement-board { grid-template-columns: 1fr; }
  .procurement-hero { align-items: stretch; flex-direction: column; gap: 16px; }
  .order-edit-row { grid-template-columns: 1fr; }
  .order-workflow-summary { grid-template-columns: 1fr; }
  .workflow-action-buttons { align-items: stretch; flex-direction: column; }
  .workflow-action-buttons p, .workflow-action-buttons button { width: 100%; flex: 0 0 auto; }
  .dashboard-hero-actions { flex-direction: column; }
  .notification-panel { top: 74px; right: 16px; }
  .dashboard-widget-choices { grid-template-columns: 1fr; }
  .order-stage-track { overflow-x: auto; grid-template-columns: repeat(7, minmax(90px, 1fr)); padding-bottom: 5px; }
  .procurement-line { grid-template-columns: 1fr 1fr; }
  .procurement-line-name, .procurement-line-note { grid-column: 1 / -1; }
  .procurement-line .close-button { justify-self: end; }
  .procurement-lines-title { align-items: flex-start; flex-direction: column; gap: 10px; }
  .procurement-bulk-panel > div { align-items: stretch; flex-direction: column; }
}

/* AI customer discovery */
.nav-item-with-count{display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;width:100%;column-gap:0}
.sidebar-logo-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.sidebar-logo-button:focus-visible{outline:2px solid #dff45b;outline-offset:5px;border-radius:8px}
.nav-group{margin:0;align-self:start}.nav-group-toggle{display:grid;grid-template-columns:29px 1fr auto;align-items:center;width:100%;min-height:38px;padding:7px 12px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:750;text-align:left;cursor:pointer}.nav-group-toggle:hover{background:#ffffff12}.nav-group-toggle b{transition:transform .18s}.nav-group.open{margin:1px 0 4px}.nav-group.open .nav-group-toggle b{transform:rotate(180deg)}.nav-submenu{display:none;padding:1px 0 2px 17px}.nav-group.open .nav-submenu{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-items:stretch;gap:0}.nav-submenu .nav-item{display:flex;width:100%;min-width:0;min-height:32px;padding-top:5px;padding-bottom:5px;font-size:12px}.nav-submenu .nav-item-with-count{display:grid;grid-template-columns:minmax(0,1fr) auto}
.nav-item-with-count .nav-icon{width:29px}
.nav-item-with-count .nav-label{width:auto;min-width:0;font-size:12px;vertical-align:0;white-space:nowrap}
.nav-count{margin-left:8px;min-width:22px;padding:2px 7px;border-radius:999px;background:#dff45b;color:#17372e;font-size:10px;text-align:center}
.discovery-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:16px 18px;border:1px solid #e2e6df;border-radius:13px;background:#fff}
.discovery-hero h2{margin:2px 0 4px;font-family:inherit;font-size:18px;color:#17372e}.discovery-hero>div>p:last-child{max-width:680px;margin:0;color:#69766f;font-size:11px}
.supplier-hero{background:#fff}
.supplier-query-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;border:1px dashed #b8c3ae;border-radius:15px;background:#fbfcf7}.supplier-query-card>div{display:flex;align-items:center;gap:14px}.supplier-query-card strong{display:block;color:#17372e;font-size:13px}.supplier-query-card p{margin:4px 0 0;color:#75817b;font-size:11px}.query-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#17372e;color:#dff45b;font-size:22px}
.product-section-tabs{margin:0 0 16px}.price-list-settings{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:12px;margin:18px 0}.price-list-settings article{display:grid;grid-template-columns:55px 1fr 1fr;gap:9px;align-items:end;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fafbfe}.price-list-settings article>strong{grid-row:span 2;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff}.price-list-settings label{display:grid;gap:5px;color:#657188;font-size:9px}.price-list-settings input,.price-list-settings select,.pricing-matrix input{width:100%;height:36px;border:1px solid #dfe4ed;border-radius:7px;padding:0 8px;background:#fff}.pricing-matrix-wrap{overflow:auto}.pricing-matrix{min-width:980px}.pricing-matrix th small,.pricing-matrix td small{display:block;margin-top:3px;color:#8b96aa}.pricing-matrix td{min-width:130px}.matrix-show{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:9px}.matrix-show input{width:14px;height:14px}.customer-price-board{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:10px;overflow:auto}.price-customer-column{min-height:260px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f8f9fc}.price-customer-column header{display:grid;gap:3px;padding:7px}.price-customer-column header small{color:#8b96aa}.price-customer-column article{margin-top:7px;padding:10px;border:1px solid #dfe4ed;border-radius:9px;background:#fff;cursor:grab}.price-customer-column article small{display:block;margin-top:3px;color:#8792a5}.partial-order-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px;border:1px dashed #b9c6d8;border-radius:10px;background:#f6f9fd}.partial-order-actions p{margin-right:auto;color:#68758b}.split-item-check{display:flex!important;align-items:center;gap:6px}.split-item-check input{width:18px;height:18px}.purchasing-target-visible.hidden{display:none!important}@media(max-width:900px){.price-list-settings{grid-template-columns:1fr}.customer-price-board{grid-template-columns:repeat(6,220px)}}
.discovery-status{min-width:170px;display:grid;grid-template-columns:auto 1fr;gap:1px 7px;padding:9px 11px;border-radius:9px;background:#f3f6f1;color:#17372e}.discovery-status i{grid-row:1/3;width:7px;height:7px;margin-top:4px;border-radius:50%;background:#87a126}.discovery-status span{font-size:11px;font-weight:700}.discovery-status small{color:#7b8982;font-size:9px}
.lead-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.lead-kpis article{display:grid;gap:4px;padding:18px 20px;border:1px solid #e4e7e1;border-radius:14px;background:#fff}.lead-kpis span,.lead-kpis small{color:#7d8983;font-size:11px}.lead-kpis strong{font-family:"Playfair Display",serif;font-size:27px;color:#17372e}
.lead-score{display:flex;align-items:center;gap:8px}.lead-score strong{min-width:24px}.lead-score i{width:54px;height:5px;border-radius:10px;background:#e7e9e4;overflow:hidden}.lead-score b{display:block;height:100%;border-radius:10px;background:#9caf36}.table-link{color:#53685f;text-decoration:none;font-size:12px}.empty-table{text-align:center;padding:42px!important;color:#829089}.market-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:15px;margin-bottom:20px}.market-card{padding:20px;border:1px solid #e1e5df;border-radius:16px;background:#fff}.market-card.active-market{box-shadow:inset 0 3px #dff45b}.market-card-top{display:flex;justify-content:space-between;align-items:center}.market-flag{display:grid;place-items:center;width:38px;height:30px;border-radius:8px;background:#17372e;color:#dff45b;font-size:11px;font-weight:800;letter-spacing:.1em}.market-card h3{margin:16px 0 5px;font-size:18px;color:#17372e}.market-card>p{min-height:36px;margin:0 0 16px;color:#77847e;font-size:11px;line-height:1.5}.market-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 0;border-top:1px solid #e6e9e4}.market-metrics span{display:grid;gap:3px}.market-metrics small{color:#909a95;font-size:9px}.market-metrics strong{font-size:11px;color:#354b43}.market-card button{width:100%;margin-top:4px}.market-form-panel{padding:24px}.market-form-panel .full-span{grid-column:1/-1}
@media(max-width:1000px){.market-grid{grid-template-columns:1fr 1fr}.lead-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.discovery-hero{align-items:flex-start;flex-direction:column}.discovery-status{width:100%}.market-grid,.lead-kpis{grid-template-columns:1fr}}
@media(max-width:980px){.nav-item-with-count{display:block}.nav-item-with-count .nav-label,.nav-item-with-count .nav-count{display:none}.nav-item-with-count .nav-icon{width:auto}}
.sample-workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0}.sample-workflow span{padding:7px 5px;border-radius:8px;background:#edf0ed;color:#86918c;font-size:9px;text-align:center}.sample-workflow span.done{background:#edf5cf;color:#365044;font-weight:800}.sample-card-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.verification-check{display:flex!important;align-items:flex-start;gap:9px;margin-top:18px;padding:13px;border-radius:10px;background:#f4f7ef;color:#40534a;font-size:11px}.verification-check input{width:18px;height:18px}

/* Recipe calculator and customer email preview */
.recipe-modal{width:min(860px,94vw)}
.recipe-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px}.recipe-grid label,.recipe-line label{display:grid;gap:6px;color:#66736d;font-size:10px}.recipe-grid input,.recipe-grid select,.recipe-line input{height:40px;border:1px solid #dfe4dd;border-radius:9px;padding:0 11px;background:#fff;color:#17372e}
.recipe-lines-head{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.recipe-lines-head span{color:#78847e;font-size:11px}.recipe-lines-head strong{margin-left:5px;color:#17372e}.recipe-lines-head strong.invalid{color:#b7463d}
.recipe-line{display:grid;grid-template-columns:minmax(0,1fr) 150px 38px;align-items:end;gap:10px;margin-bottom:9px}.recipe-line .close-button{margin-bottom:1px}
.recipe-result{margin-top:18px;padding:16px;border:1px solid #dce5d3;border-radius:13px;background:#f8fbf2}.recipe-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.recipe-summary span{display:grid;gap:4px;padding:10px;border-radius:10px;background:#fff}.recipe-summary small{color:#849088;font-size:9px}.recipe-summary strong{color:#17372e}
.recipe-result-line{display:grid;grid-template-columns:1fr 80px 140px;gap:10px;padding:9px 5px;border-top:1px solid #e4e9df}.recipe-result-line span{color:#7c8781}.recipe-result-line b{text-align:right;color:#17372e}
.email-template-modal{width:min(720px,94vw)}.email-preview-shell{padding:28px;border-radius:16px;background:#e9eee9}.email-preview{max-width:570px;margin:auto;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 16px 40px #17372e1f}.email-preview-header{padding:25px 28px;background:#17372e;color:#fff}.email-preview-header strong{display:block;font-family:"Playfair Display",serif;font-size:24px}.email-preview-header small{color:#dff45b}.email-preview-body{padding:28px}.email-preview-status{display:inline-block;margin:10px 0 18px;padding:8px 12px;border-radius:999px;background:#edf5cf;color:#365044;font-weight:700}.email-preview-body p{color:#66736d;line-height:1.6}.email-preview-order{display:grid;grid-template-columns:1fr auto;gap:8px;margin:18px 0;padding:16px;border:1px solid #e5e9e3;border-radius:12px}.email-preview-order small{color:#8b958f}.email-preview-footer{padding:17px 28px;background:#f7f8f5;color:#8a948e;font-size:10px}.email-provider-note{margin-top:14px;color:#7a8580;font-size:11px}
@media(max-width:700px){.recipe-grid{grid-template-columns:1fr 1fr}.recipe-grid label:first-child{grid-column:1/-1}.recipe-summary{grid-template-columns:1fr}.recipe-result-line{grid-template-columns:1fr auto}.recipe-result-line b{grid-column:1/-1;text-align:left}}

/* Human resources and employee self service */
.hr-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:25px 28px;border-radius:18px;background:linear-gradient(135deg,#17372e,#285b4a);color:#fff}.hr-hero .eyebrow{color:#dff45b}.hr-hero h2{margin:4px 0;font:700 28px "Playfair Display",serif}.hr-hero p{margin:0;color:#c3d3cc}.hr-actions{display:flex;gap:9px}.hr-hero .secondary-button{border-color:#ffffff45;background:#ffffff12;color:#fff}.hr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.hr-kpis article{display:grid;gap:4px;padding:18px;border:1px solid #e2e7e3;border-radius:14px;background:#fff}.hr-kpis span,.hr-kpis small{color:#7d8983;font-size:10px}.hr-kpis strong{color:#17372e;font:700 25px "Playfair Display",serif}.hr-employee-modal{width:min(850px,94vw)}
.employee-portal-modal{width:min(460px,96vw);padding:0;border:0;border-radius:24px;background:#eef2ef;box-shadow:0 28px 80px #102a2250}.employee-portal-modal::backdrop{background:#13251f99}.employee-mobile{min-height:720px;padding:22px;background:linear-gradient(180deg,#17372e 0 190px,#f3f5f3 190px)}.employee-mobile header{display:flex;justify-content:space-between;color:#fff}.employee-mobile header small{color:#dff45b;font-weight:800;letter-spacing:.1em}.employee-mobile header h2{margin:9px 0 2px;font:700 27px "Playfair Display",serif}.employee-mobile header p{margin:0;color:#b9cbc4}.employee-close{width:40px;height:40px;border:0;border-radius:50%;background:#ffffff18;color:#fff;font-size:24px}.qr-scan-button{width:100%;display:grid;justify-items:center;gap:5px;margin:29px 0 16px;padding:25px;border:0;border-radius:20px;background:#dff45b;color:#17372e;box-shadow:0 12px 30px #102a2230;cursor:pointer}.qr-scan-button span{font-size:38px}.qr-scan-button strong{font-size:19px;letter-spacing:.04em}.qr-scan-button small{font-size:11px}.employee-today{display:grid;grid-template-columns:1fr 1fr;gap:10px}.employee-today span,.employee-summary article,.employee-history{padding:15px;border:1px solid #e1e7e2;border-radius:14px;background:#fff}.employee-today span{display:grid;gap:4px}.employee-today small,.employee-summary small{color:#849087}.employee-today strong,.employee-summary strong{color:#17372e;font-size:18px}.employee-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0}.employee-summary article{display:grid;gap:5px;padding:13px}.employee-summary span{color:#829087;font-size:9px}.employee-history>div{display:flex;align-items:center;justify-content:space-between}.employee-history h3{margin:0}.employee-history p{display:flex;align-items:center;justify-content:space-between;margin:0;padding:13px 0;border-bottom:1px solid #edf0ed}.employee-history p span{display:grid;gap:3px}.employee-history p small{color:#849087}.employee-history p>strong{color:#17372e}.employee-help{padding:12px;color:#78847e;font-size:10px;text-align:center}.statement-sheet{padding:8px}.statement-sheet header{display:flex;justify-content:space-between;border-bottom:2px solid #17372e;padding-bottom:15px}.statement-sheet h2{margin:3px 0}.statement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.statement-grid span{display:grid;gap:3px;padding:10px;background:#f3f6f3}.statement-days{width:100%;border-collapse:collapse}.statement-days th,.statement-days td{padding:7px;border:1px solid #e1e5e1;font-size:9px;text-align:left}.signature-line{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:42px}.signature-line span{padding-top:8px;border-top:1px solid #56645e;text-align:center}.statement-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.employee-scan-only{display:flex;min-height:650px;flex-direction:column}.employee-scan-only .qr-scan-button{min-height:230px;margin-top:70px}.employee-attendance-form{display:grid;gap:13px;padding:18px;border-radius:16px;background:#fff}.employee-attendance-form label,.employee-attendance-form #employeeExitFields{display:grid;gap:7px;color:#53635c;font-size:11px;font-weight:700}.employee-attendance-form select,.employee-attendance-form input,.employee-attendance-form textarea{width:100%;padding:12px;border:1px solid #dbe2dd;border-radius:10px;background:#fff;font:inherit}.employee-attendance-form textarea{min-height:80px;resize:vertical}.employee-logout{margin-top:auto;padding:14px;border:0;background:transparent;color:#75827c;text-decoration:underline}.login-type-switch{grid-template-columns:repeat(3,1fr)}
.employee-attendance-result{display:grid;gap:5px;margin-top:14px;padding:17px;border-radius:15px;border:1px solid}.employee-attendance-result strong{font-size:15px}.employee-attendance-result span{font-size:12px;line-height:1.5}.employee-attendance-result.success{background:#e9f8ef;border-color:#a8ddbb;color:#17623a}.employee-attendance-result.error{background:#fff0f1;border-color:#f1b7bd;color:#a51d2d}
.employee-row-actions{display:flex;flex-wrap:wrap;gap:5px}.employee-credentials-modal{width:min(520px,94vw)}.credential-identity{display:grid;gap:5px;margin:12px 0 18px;padding:16px;border-radius:13px;background:#f2f5ef}.credential-identity small{color:#7b8781}.credential-identity strong{color:#17372e;font-size:24px}.credential-identity span{color:#65736c}
@media(max-width:800px){.hr-hero,.hr-actions{align-items:stretch;flex-direction:column}.hr-kpis{grid-template-columns:1fr 1fr}.employee-summary{grid-template-columns:1fr}.employee-mobile{min-height:100vh}.statement-grid{grid-template-columns:1fr 1fr}}
@media print{body>:not(#attendanceStatementDialog){display:none!important}.statement-modal[open]{position:static;display:block!important;width:100%;max-width:none;border:0}.statement-actions{display:none!important}}

.attendance-qr-modal{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#102c24;color:#fff}.attendance-qr-modal::backdrop{background:#102c24}.attendance-qr-kiosk{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(22px,3vw,44px);background:radial-gradient(circle at 85% 15%,#295849 0,transparent 32%),linear-gradient(145deg,#102c24,#173b31)}.attendance-qr-kiosk>header,.attendance-qr-kiosk>footer{display:flex;align-items:center;justify-content:space-between;gap:24px}.attendance-qr-brand{display:flex;align-items:center;gap:18px}.attendance-qr-brand img{width:clamp(118px,13vw,190px);height:auto;filter:brightness(0) invert(1)}.attendance-qr-brand small{color:#dff45b;font-weight:800;letter-spacing:.15em}.attendance-qr-brand h1{margin:5px 0 0;font:700 clamp(25px,3vw,46px) "Playfair Display",serif}.attendance-qr-clock{display:grid;text-align:right}.attendance-qr-clock strong{font-size:clamp(32px,4vw,58px);line-height:1}.attendance-qr-clock span{margin-top:7px;color:#b9cec6;text-transform:capitalize}.attendance-qr-kiosk>main{align-self:center;display:grid;grid-template-columns:minmax(210px,330px) minmax(300px,560px);grid-template-rows:auto auto 1fr auto;justify-content:center;align-items:center;gap:14px clamp(30px,6vw,90px);padding:20px 0}.attendance-qr-copy{display:flex;align-items:center;gap:15px}.attendance-qr-copy>span{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#dff45b;color:#17372e;font-weight:900}.attendance-qr-copy div{display:grid;gap:4px}.attendance-qr-copy strong{font-size:17px}.attendance-qr-copy small{color:#b7ccc4;line-height:1.45}.attendance-qr-code{grid-column:2;grid-row:1/4;display:grid;place-items:center;min-height:min(62vh,590px);padding:24px;border-radius:28px;background:#fff;color:#718078;box-shadow:0 25px 70px #071c1660}.attendance-qr-code svg{display:block;width:min(54vh,520px);max-width:100%;height:auto}.attendance-qr-meta{display:flex;align-items:center;gap:12px}.attendance-qr-meta strong{display:grid;place-items:center;min-width:76px;padding:11px;border-radius:999px;background:#dff45b;color:#17372e}.attendance-qr-meta span{color:#b7ccc4}.attendance-qr-kiosk main>p{margin:0;color:#9db7ad;font-size:12px}.attendance-qr-kiosk>footer{color:#8faba0;font-size:11px;letter-spacing:.08em}.attendance-qr-exit{padding:10px 14px;border:1px solid #ffffff35;border-radius:10px;background:#ffffff0b;color:#c7d8d1}.employee-camera-frame canvas{display:none}.hr-actions{flex-wrap:wrap}
@media(max-width:780px){.attendance-qr-kiosk{padding:20px}.attendance-qr-kiosk>header{align-items:flex-start}.attendance-qr-clock span{display:none}.attendance-qr-kiosk>main{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}.attendance-qr-code{grid-column:1;grid-row:auto;min-height:0;order:-1;padding:16px}.attendance-qr-code svg{width:min(60vh,78vw)}.attendance-qr-copy{display:none}.attendance-qr-meta,.attendance-qr-kiosk main>p{justify-content:center;text-align:center}.attendance-qr-brand img{width:110px}.attendance-qr-brand h1{font-size:22px}.attendance-qr-brand small{font-size:8px}.attendance-qr-kiosk>footer span{display:none}.attendance-qr-kiosk>footer{justify-content:center}}
.sample-modal{width:min(680px,calc(100vw - 34px));max-height:calc(100dvh - 28px);overflow:hidden}.sample-modal form{max-height:calc(100dvh - 28px);overflow-y:auto;overflow-x:hidden}.sample-modal .form-grid{grid-template-columns:1fr}.sample-item-rows{display:grid;gap:12px;margin:12px 0}.sample-item-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe}.sample-item-row label{display:grid;gap:7px;font-size:12px;font-weight:600;color:#40506d}.sample-item-row label:first-child,.sample-item-row label:last-of-type{grid-column:1/-1}.sample-item-row input,.sample-item-row select{width:100%;height:42px;border:1px solid #dfe4ed;border-radius:9px;padding:0 10px;background:#fff}.sample-item-row .close-button{grid-column:1/-1;justify-self:end}.sample-note-field{display:grid;gap:8px;margin-top:18px;font-size:13px;font-weight:600;color:#40506d}.sample-note-field textarea{min-height:90px;border:1px solid #dfe4ed;border-radius:10px;padding:12px;font:inherit}.sample-request-list{display:grid;gap:12px}.sample-request-card{display:grid;grid-template-columns:1fr 2fr auto;gap:22px;align-items:center}.sample-request-card h3{margin:9px 0 3px}.sample-request-card p{margin:0;color:var(--muted)}.sample-request-card>div:last-child{display:grid;gap:10px;text-align:right}.sample-card-items{display:flex;flex-wrap:wrap;gap:8px}.sample-card-items span{background:#f3f6fb;border-radius:8px;padding:8px 10px;font-size:11px}.sample-card-items strong{display:block;margin-bottom:3px}.ready-quantity-field input{border-color:#1e9b72!important;background:#f0fbf7!important}@media(max-width:800px){.sample-item-row,.sample-request-card{grid-template-columns:1fr}.sample-item-row label{grid-column:1!important}.sample-request-card>div:last-child{text-align:left}.sample-item-row .close-button{justify-self:end}}
.customer-filter-stack{margin-bottom:19px}.customer-filter-stack .toolbar{margin-bottom:0}.customer-filter-controls{display:flex;align-items:center;gap:9px;min-width:0}.customer-region-filters{width:max-content;padding:4px;background:#dde4f1}.customer-region-filters button{min-width:82px}.customer-location{display:grid;gap:4px}.customer-location strong{font-size:12px!important;font-weight:600!important}.customer-location small,.table-panel td>small{display:block;margin-top:4px}.customer-row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.table-panel td{vertical-align:middle}.work-order-actions{flex-wrap:wrap}@media(max-width:1150px){.customer-filter-stack .toolbar{align-items:stretch;flex-direction:column}.customer-filter-controls{flex-wrap:wrap}.customer-filter-stack .toolbar-actions{justify-content:flex-end}}@media(max-width:700px){.customer-filter-controls{align-items:stretch;flex-direction:column}.customer-region-filters{width:100%}.customer-region-filters button{flex:1}.customer-filter-stack .toolbar{gap:10px}.customer-filter-stack .toolbar-actions{justify-content:stretch}.customer-filter-stack .search{min-width:0}.customer-filter-stack .primary-button{white-space:nowrap}}
.customer-import-panel{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;padding:11px 14px;background:#fafbfc;border-color:#e4e7ed}.customer-import-copy{display:flex;align-items:center;gap:12px;min-width:0}.customer-import-copy>strong{color:#27344d;font-size:12px;white-space:nowrap}.customer-import-panel small{display:block;overflow:hidden;color:#7b8597;font-size:10px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.customer-import-actions{display:flex;gap:6px;flex:0 0 auto}.customer-import-actions>*{text-align:center;justify-content:center}.compact-button{min-height:32px!important;padding:7px 11px!important;font-size:10px!important}@media(max-width:800px){.customer-import-panel{align-items:stretch;flex-direction:column}.customer-import-copy{align-items:flex-start;flex-direction:column;gap:3px}.customer-import-panel small{white-space:normal}.customer-import-actions{width:100%}.customer-import-actions>*{flex:1}}
/* Shipping documents use the existing compact, vertically scrolling dialogs. */
.shipping-doc-modal { width:min(1040px,calc(100vw - 32px)); max-width:1040px; max-height:90dvh; overflow-y:auto; overflow-x:hidden; padding:24px; }
.shipping-doc-modal form {min-width:0;}
.shipping-doc-modal .modal-heading p {margin:6px 0;}
.shipping-doc-modal h2 {font-size:22px;}
.shipping-doc-modal h3 {font-size:17px;margin:20px 0 8px;}
.shipping-doc-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:#f1f4fa;padding:14px;border-radius:12px;}
.shipping-doc-summary small,.shipping-doc-summary strong {display:block;}
.shipping-doc-summary small {color:#63718b;font-size:13px;}
.shipping-doc-summary strong {font-size:18px;margin-top:5px;}
.shipping-doc-note {font-size:14px;line-height:1.5;color:#63718b;}
.shipping-doc-downloads {display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.shipping-doc-downloads button {display:flex;flex-direction:column;gap:4px;text-align:left;}
.shipping-doc-downloads small {font-size:12px;font-weight:400;}
.shipping-doc-modal details {margin:12px 0;border:1px solid #e0e5ef;border-radius:10px;padding:14px;}
.shipping-doc-modal summary {cursor:pointer;font-weight:600;font-size:15px;line-height:1.5;}
.shipping-doc-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:16px;}
.shipping-doc-grid label {min-width:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#4a5974;}
.shipping-doc-grid input,.shipping-doc-grid textarea {box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:9px 11px;font:inherit;border:1px solid #dbe1ed;border-radius:8px;background:white;color:#17233d;}
.shipping-doc-error {white-space:pre-line;background:#fff1f1;border:1px solid #edc2c2;border-radius:8px;padding:12px;color:#8a2727;font-size:14px;}
.shipping-doc-modal [data-saved] {font-size:14px;color:#25624a;}
.shipping-doc-modal button:disabled {opacity:.55;cursor:wait;}
@media(max-width:640px){.shipping-doc-grid{grid-template-columns:1fr}.shipping-doc-modal{padding:16px}.shipping-doc-downloads button{flex:1;min-width:140px}}
.order-customer-info {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:12px 14px;margin:12px 0;border:1px solid #e0e5ef;border-radius:9px;background:#f5f7fb;font-size:14px;}
.order-customer-info[hidden] {display:none;}
.order-customer-info small {color:#687895;font-size:12px;}
.order-customer-info span {color:#586782;}
.line-total-pieces input,.order-edit-row input[readonly] {background:#edf2fb;color:#263f7c;font-weight:600;}
.order-piece-summary {color:#263f7c;font-weight:600;align-self:center;}
.product-suggestions.hidden {display:none!important;}
.order-status-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; background: #fff8; color: var(--navy); font-size: 12px; font-variant-numeric: tabular-nums; }
#orderStatusFilters { display: flex; flex-wrap: wrap; max-width: 100%; gap: 4px; }
#orderStatusFilters button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
#orderStatusFilters button.active .order-status-count { background: #edf1f9; }