:root {
  --navy-950: #0b1f2f;
  --navy-900: #102b40;
  --navy-800: #173b57;
  --navy-700: #20506f;
  --blue-600: #1671a3;
  --blue-500: #2388bb;
  --blue-100: #e5f3fa;
  --blue-50: #f2f9fc;
  --green-700: #27734e;
  --green-600: #348760;
  --green-100: #def3e7;
  --green-50: #f0faf4;
  --amber-800: #8a4b0a;
  --amber-600: #bd6d13;
  --amber-100: #fae9cc;
  --amber-50: #fff8eb;
  --red-700: #a43737;
  --red-600: #c84848;
  --red-100: #f8dddd;
  --red-50: #fff3f3;
  --slate-950: #17212b;
  --slate-900: #222f3d;
  --slate-800: #344454;
  --slate-700: #4a5c6d;
  --slate-600: #657787;
  --slate-500: #7e8e9c;
  --slate-400: #a4b0ba;
  --slate-300: #cbd3da;
  --slate-200: #dfe5e9;
  --slate-150: #e9edf0;
  --slate-100: #f1f4f6;
  --slate-50: #f7f9fa;
  --white: #fff;
  --page: #f5f7f8;
  --text: var(--slate-900);
  --muted: var(--slate-600);
  --border: #dfe5e9;
  --border-strong: #cbd3da;
  --sidebar-width: 268px;
  --topbar-height: 68px;
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 35, 50, .045), 0 2px 8px rgba(15, 35, 50, .035);
  --shadow-md: 0 12px 32px rgba(15, 35, 50, .12);
  --focus: 0 0 0 3px rgba(35, 136, 187, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--page);
  font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
body.has-disclosure::after { position: fixed; inset: 0; z-index: 70; background: rgba(7, 24, 36, .42); content: ""; backdrop-filter: blur(1px); }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-500); }
img, svg { display: block; }
h1, h2, h3, p, dl, dd, ol, ul, blockquote { margin-top: 0; }
h1 { margin-bottom: 8px; color: var(--navy-950); font-size: clamp(27px, 3vw, 36px); line-height: 1.14; letter-spacing: -.035em; }
h2 { margin-bottom: 4px; color: var(--navy-950); font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
h3 { margin-bottom: 6px; color: var(--navy-950); font-size: 16px; }
p { margin-bottom: 0; color: var(--muted); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px; transform: translateY(-150%); border-radius: var(--radius-sm); color: var(--white); background: var(--navy-900); }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--muted); }
.align-right { text-align: right !important; }
.required { color: var(--red-600); }
.eyebrow { display: block; margin-bottom: 7px; color: var(--blue-600); font-size: 11px; font-weight: 750; letter-spacing: .105em; line-height: 1.3; text-transform: uppercase; }
.eyebrow--light { color: #9dd5ec; }
.icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Controls */
.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }
.button.is-loading { cursor: wait; opacity: .72; }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: var(--focus); }
.button--primary { color: var(--white); background: var(--navy-800); border-color: var(--navy-800); }
.button--primary:hover { color: var(--white); background: var(--navy-700); border-color: var(--navy-700); }
.button--secondary { color: var(--navy-800); background: var(--white); border-color: var(--slate-300); }
.button--secondary:hover { color: var(--navy-800); border-color: var(--navy-700); background: var(--blue-50); }
.button--ghost { color: var(--slate-700); background: transparent; }
.button--ghost:hover { color: var(--navy-800); background: var(--slate-100); }
.button--success { color: var(--white); background: var(--green-700); }
.button--success:hover { color: var(--white); background: var(--green-600); }
.button--warning { color: #5e3205; background: #f6cf8a; border-color: #eabb67; }
.button--danger { color: var(--white); background: var(--red-700); }
.button--danger:hover { color: var(--white); background: var(--red-600); }
.button--block { width: 100%; }
.button--lg { min-height: 46px; padding: 11px 18px; }
.button--sm { min-height: 34px; padding: 7px 11px; font-size: 13px; }
.icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--slate-700);
  background: var(--white);
  transition: .16s var(--ease);
}
.icon-button:hover { color: var(--navy-800); border-color: var(--slate-400); background: var(--slate-50); }
.icon-button--danger { color: var(--red-600); }
.icon-button--danger:hover { color: var(--red-700); border-color: var(--red-100); background: var(--red-50); }

/* Forms */
.field { min-width: 0; }
.field > label, .field__label-row label { display: inline-block; margin-bottom: 6px; color: var(--slate-800); font-size: 13px; font-weight: 650; }
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  outline: 0;
  color: var(--slate-900);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--slate-400); }
input:focus, select:focus, textarea:focus { border-color: var(--blue-500); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--slate-400); }
textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
select { padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate-600) 50%), linear-gradient(135deg, var(--slate-600) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-repeat: no-repeat; background-size: 5px 5px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red-600); background: var(--red-50); }
.field__hint { display: block; margin-top: 6px; color: var(--slate-500); font-size: 12px; line-height: 1.4; }
.field__error { display: none; margin-top: 5px; color: var(--red-700); font-size: 12px; font-weight: 600; }
.field.has-error .field__error { display: block; }
.field--wide { grid-column: span 2; }
.field--double { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.field--quantity { max-width: 130px; }
.input-with-icon { position: relative; }
.input-with-icon > .icon { position: absolute; top: 12px; left: 12px; z-index: 1; color: var(--slate-500); pointer-events: none; }
.input-with-icon > input { padding-left: 39px; }
.input-with-action > input { padding-right: 58px; }
.input-action { position: absolute; top: 6px; right: 6px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 5px; color: var(--blue-600); background: transparent; font-size: 12px; font-weight: 700; }
.input-action:hover { background: var(--blue-50); }
.input-suffix { display: flex; }
.input-suffix input { border-radius: 8px 0 0 8px; }
.input-suffix span { display: grid; min-width: 55px; place-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 8px 8px 0; color: var(--slate-600); background: var(--slate-50); font-size: 12px; font-weight: 650; }
.form-grid { display: grid; gap: 18px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--line { grid-template-columns: minmax(180px, .85fr) minmax(260px, 1.45fr) 120px; }
.form-grid--drawer { grid-template-columns: 1fr 1fr 150px; }
.check-control { display: flex; align-items: flex-start; gap: 9px; color: var(--slate-700); font-size: 13px; cursor: pointer; }
.check-control input { width: 17px; min-height: 17px; height: 17px; margin-top: 1px; accent-color: var(--navy-800); }
.switch-field { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch-field > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border-radius: 20px; background: var(--slate-300); transition: background .18s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.switch-field input:checked + .switch { background: var(--green-600); }
.switch-field input:checked + .switch i { transform: translateX(18px); }
.switch-field input:focus-visible + .switch { box-shadow: var(--focus); }
.switch-field > span:last-child { display: flex; flex-direction: column; }
.switch-field strong { color: var(--slate-800); font-size: 13px; }
.switch-field small { color: var(--muted); font-size: 12px; }

/* App shell */
.app-shell { display: grid; min-height: 100vh; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  color: #dce7ed;
  background: var(--navy-950);
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar__brand { display: flex; height: var(--topbar-height); flex: 0 0 auto; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.085); }
.brand { display: inline-flex; min-width: 0; flex: 1; align-items: center; gap: 11px; color: inherit; }
.brand:hover { color: inherit; }
.brand__mark { position: relative; display: block; width: 34px; height: 34px; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: #109ff3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(5,23,38,.18); }
.brand__mark img { position: absolute; top: 50%; left: 50%; width: auto; max-width: none; height: 115%; transform: translate(-50%, -50%); }
.brand__copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
.brand__copy strong { color: var(--white); font-size: 15px; letter-spacing: .01em; }
.brand__copy small { margin-top: 3px; overflow: hidden; color: #8fa5b3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__close { display: none; color: #b8c8d1; background: transparent; border-color: rgba(255,255,255,.12); }
.sidebar__nav { flex: 1; overflow: auto; padding: 20px 12px; scrollbar-width: thin; }
.nav-label { margin: 0 10px 8px; color: #718997; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.nav-label--spaced { margin-top: 23px; }
.nav-item { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 11px; margin: 2px 0; padding: 10px 11px; border: 0; border-radius: 8px; color: #b9c9d2; background: transparent; font-size: 13px; font-weight: 580; text-align: left; transition: color .15s, background .15s; }
.nav-item:hover { color: var(--white); background: rgba(255,255,255,.065); }
.nav-item.is-active { color: var(--white); background: rgba(85, 174, 215, .15); box-shadow: inset 3px 0 0 #55b6df; }
.nav-item .icon { color: #8fa9b8; }
.nav-item.is-active .icon { color: #67c2e7; }
.nav-item--button { cursor: pointer; }
.sidebar__footer { flex: 0 0 auto; padding: 13px 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 5px 10px 11px; }
.sidebar-user__copy { display: flex; min-width: 0; flex-direction: column; }
.sidebar-user__copy strong { overflow: hidden; color: #eef4f7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user__copy small { overflow: hidden; color: #829aa8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-backdrop { display: none; }
.app-main { min-width: 0; grid-column: 2; }
.topbar { position: sticky; top: 0; z-index: 35; display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.topbar__start, .topbar__actions, .topbar__title, .topbar-user { display: flex; align-items: center; }
.topbar__start { min-width: 0; gap: 10px; }
.topbar__title { min-width: 0; gap: 10px; }
.topbar__title strong { overflow: hidden; color: var(--navy-950); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-context { padding-left: 10px; border-left: 1px solid var(--border); color: var(--slate-500); font-size: 12px; }
.topbar__actions { gap: 12px; }
.topbar__menu { display: none; }
.topbar-user { gap: 7px; padding-left: 12px; border-left: 1px solid var(--border); color: var(--slate-700); font-size: 12px; font-weight: 650; }
.avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--navy-800); background: #d9eaf2; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--xs { width: 24px; height: 24px; font-size: 9px; }
.language-switcher { position: relative; }
.language-switcher__button { display: flex; height: 34px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--slate-700); background: var(--white); font-size: 11px; font-weight: 750; }
.language-switcher__menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 10; display: none; width: 150px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); box-shadow: var(--shadow-md); }
.language-switcher.is-open .language-switcher__menu { display: block; }
.language-switcher__menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--slate-700); font-size: 12px; }
.language-switcher__menu a:hover, .language-switcher__menu a[aria-current="true"] { color: var(--navy-800); background: var(--blue-50); }
.main-content { width: 100%; max-width: 1560px; margin: 0 auto; padding: 32px clamp(22px, 3.2vw, 48px) 56px; outline: none; }

/* Global content */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.page-header > div:first-child { min-width: 0; }
.page-header p { max-width: 750px; }
.page-header--compact { align-items: center; }
.page-header--detail { align-items: flex-end; }
.page-header__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 15px; color: var(--slate-600); font-size: 12px; font-weight: 650; }
.back-link:hover { color: var(--navy-800); }
.heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.heading-row h1 { margin-bottom: 0; }
.panel { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--slate-150); }
.panel__header p { font-size: 12px; }
.panel__header--wrap { flex-wrap: wrap; align-items: center; }
.panel__header--action { align-items: center; }
.panel-count { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 15px; color: var(--slate-700); background: var(--slate-100); font-size: 12px; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric-card { display: flex; min-width: 0; min-height: 94px; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; background: var(--white); box-shadow: var(--shadow-sm); }
.metric-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.metric-card > div span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.metric-card > div strong { margin-top: 2px; color: var(--navy-950); font-size: 25px; line-height: 1.15; }
.metric-card__icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 10px; }
.metric-card__icon--blue { color: var(--blue-600); background: var(--blue-100); }
.metric-card__icon--amber { color: var(--amber-800); background: var(--amber-100); }
.metric-card__icon--green { color: var(--green-700); background: var(--green-100); }
.metric-card__icon--slate { color: var(--slate-700); background: var(--slate-100); }
.metric-card__icon--red { color: var(--red-700); background: var(--red-100); }
.metric-card--link { transition: border-color .16s, transform .16s, box-shadow .16s; }
.metric-card--link:hover { color: inherit; border-color: var(--slate-300); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,35,50,.08); }
.metric-card--link > .icon:last-child { color: var(--slate-400); }
.metric-card--danger { border-color: #eabebe; background: var(--red-50); }
.status-badge, .priority-badge, .simple-status, .sla-alert { display: inline-flex; width: max-content; align-items: center; gap: 6px; border-radius: 20px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.status-badge { padding: 6px 9px; color: var(--slate-700); background: var(--slate-100); }
.status-badge__dot, .simple-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge--draft { color: var(--slate-600); background: var(--slate-100); }
.status-badge--submitted { color: #185d89; background: #e3f1f8; }
.status-badge--in-review { color: #65511a; background: #f9efc9; }
.status-badge--needs-info { color: var(--amber-800); background: var(--amber-100); }
.status-badge--awaiting-customer { color: #6c3b83; background: #f1e5f6; }
.status-badge--confirmed { color: var(--green-700); background: var(--green-100); }
.status-badge--preparing, .status-badge--partially-shipped { color: #225b7d; background: #e1f0f7; }
.status-badge--shipped { color: #285588; background: #e3ecf8; }
.status-badge--delivered, .status-badge--closed { color: #32684c; background: #e0efe6; }
.status-badge--cancelled { color: var(--red-700); background: var(--red-100); }
.priority-badge { padding: 5px 8px; }
.simple-status { padding: 6px 8px; }
.simple-status--active { color: var(--green-700); background: var(--green-50); }
.simple-status--inactive { color: var(--slate-600); background: var(--slate-100); }
.sla-alert { padding: 6px 8px; color: var(--red-700); background: var(--red-100); }

.attention-banner, .state-banner { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: var(--radius); }
.attention-banner { color: var(--amber-800); border-color: #ebc982; background: var(--amber-50); }
.attention-banner:hover { color: var(--amber-800); border-color: #dda94d; }
.attention-banner > span:nth-child(2), .state-banner > div { display: flex; flex: 1; flex-direction: column; }
.attention-banner strong, .state-banner strong { color: inherit; font-size: 13px; }
.attention-banner small, .state-banner p { color: inherit; opacity: .8; font-size: 12px; }
.attention-banner__icon, .state-banner > .icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(255,255,255,.65); }
.state-banner--neutral { color: var(--blue-600); border-color: #b9dce9; background: var(--blue-50); }
.state-banner--warning { color: var(--amber-800); border-color: #ebc982; background: var(--amber-50); }
.state-banner--danger { color: var(--red-700); border-color: #ebc0c0; background: var(--red-50); }
.state-banner > span:last-child { font-size: 12px; font-weight: 650; }
.info-box { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #cbe1eb; border-radius: 8px; color: var(--blue-600); background: var(--blue-50); }
.info-box p { color: var(--slate-700); font-size: 12px; }
.inline-alert { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; padding: 10px 12px; border-radius: 8px; color: var(--red-700); background: var(--red-50); font-size: 12px; }
.inline-actions, .drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.drawer-actions { grid-column: 1 / -1; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Tables and filters */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 22px; border-bottom: 1px solid var(--slate-150); }
.table-toolbar--inline { padding: 0; border: 0; }
.search-control { position: relative; display: block; width: min(330px, 100%); }
.search-control--grow { width: auto; min-width: 220px; flex: 1 1 300px; }
.search-control .icon { position: absolute; top: 12px; left: 11px; color: var(--slate-500); }
.search-control input { min-height: 40px; padding-left: 35px; background: var(--slate-50); }
.result-count, .queue-summary { color: var(--slate-500); font-size: 12px; }
.result-count strong, .queue-summary strong { color: var(--slate-700); }
.responsive-table { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.data-table th { padding: 11px 15px; border-bottom: 1px solid var(--border); color: var(--slate-500); background: var(--slate-50); font-size: 10px; font-weight: 750; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 15px; border-bottom: 1px solid var(--slate-150); color: var(--slate-700); font-size: 12px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: #fafcfd; }
.data-table td > strong, .data-table td > a + small, .data-table td > strong + small, .data-table td > span + small { display: block; }
.data-table td small { margin-top: 2px; color: var(--slate-500); font-size: 10.5px; }
.data-table td em { display: block; max-width: 380px; margin-top: 5px; color: var(--slate-600); font-size: 11px; font-style: normal; }
.table-primary { color: var(--navy-800); font-weight: 750; }
.table-action { width: 48px; padding-left: 5px !important; }
.table-action .icon-button { width: 32px; height: 32px; }
.date-value, .assignee, .sla-value { display: inline-flex; align-items: center; gap: 6px; }
.date-value .icon, .sla-value .icon { color: var(--slate-500); }
.assignee { color: var(--slate-800); font-weight: 600; }
.unassigned-label { display: inline-block; padding: 5px 8px; border: 1px dashed var(--slate-300); border-radius: 6px; color: var(--slate-500); }
.sla-value { flex-wrap: wrap; }
.sla-value small { width: 100%; margin-left: 21px !important; }
.sla-value--late { color: var(--red-700); font-weight: 700; }
.data-table tr.is-overdue { box-shadow: inset 3px 0 0 var(--red-600); }
.data-table--lines th:first-child, .data-table--lines td:first-child { width: 42px; color: var(--slate-500); }
.data-table--lines td:nth-child(2) { min-width: 230px; }
.order-total { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 16px 22px; border-top: 1px solid var(--border); color: var(--slate-700); }
.order-total strong { color: var(--navy-950); font-size: 18px; }
.segmented-control { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--slate-50); }
.segmented-control button { padding: 7px 10px; border: 0; border-radius: 6px; color: var(--slate-600); background: transparent; font-size: 11px; font-weight: 650; }
.segmented-control button span { margin-left: 4px; color: var(--slate-500); }
.segmented-control button.is-active { color: var(--navy-800); background: var(--white); box-shadow: 0 1px 4px rgba(15,35,50,.1); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--slate-50); }
.filter-select { min-width: 155px; }
.filter-select label { display: block; margin: 0 0 4px 2px; color: var(--slate-500); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.filter-select select { min-height: 40px; background-color: var(--white); }
.queue-view-tabs, .anchor-tabs { display: flex; overflow-x: auto; }
.queue-view-tabs { gap: 3px; padding: 3px; border-radius: 8px; background: var(--slate-100); }
.queue-view-tabs a { padding: 7px 10px; border-radius: 6px; color: var(--slate-600); font-size: 11px; font-weight: 650; white-space: nowrap; }
.queue-view-tabs a.is-active { color: var(--navy-800); background: var(--white); box-shadow: 0 1px 4px rgba(15,35,50,.1); }
.queue-summary { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.empty-state { display: flex; min-height: 250px; align-items: center; justify-content: center; flex-direction: column; padding: 36px 22px; text-align: center; }
.empty-state__icon, .empty-state > .icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 13px; border-radius: 50%; color: var(--blue-600); background: var(--blue-50); }
.empty-state p { max-width: 430px; margin-bottom: 17px; font-size: 12px; }
.empty-state--filtered { min-height: 220px; }

/* Customer dashboard */
.support-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.support-card__icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--blue-600); background: var(--blue-50); }
.support-card > div { flex: 1; }
.support-card strong { color: var(--navy-950); }
.support-card p { font-size: 12px; }

/* Order form */
.step-indicator { display: flex; align-items: center; gap: 8px; }
.step-indicator span { display: flex; align-items: center; gap: 6px; color: var(--slate-500); font-size: 10px; font-weight: 650; }
.step-indicator b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--slate-300); border-radius: 50%; background: var(--white); }
.step-indicator span.is-active { color: var(--navy-800); }
.step-indicator span.is-active b { color: var(--white); border-color: var(--navy-800); background: var(--navy-800); }
.step-indicator i { width: 24px; height: 1px; background: var(--slate-300); }
.content-grid { display: grid; align-items: start; gap: 20px; }
.content-grid--form { grid-template-columns: minmax(0, 1fr) 300px; }
.content-grid--detail { grid-template-columns: minmax(0, 1fr) 310px; }
.content-grid__main, .content-grid__aside { min-width: 0; }
.form-section > .form-grid { padding: 22px; }
.form-section .panel__header > div:first-child { position: relative; padding-left: 42px; }
.section-number { position: absolute; top: 0; left: 0; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-100); font-size: 12px; font-weight: 800; }
.order-lines { padding: 0 22px 20px; }
.order-line { position: relative; margin-top: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--slate-50); }
.order-line__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; color: var(--navy-800); font-size: 12px; }
.order-line__header .icon-button { width: 30px; height: 30px; background: transparent; }
.product-preview { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 9px 11px; border-radius: 7px; color: var(--blue-600); background: var(--blue-50); }
.product-preview > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: var(--white); }
.product-preview > div { display: flex; min-width: 0; flex-direction: column; }
.product-preview strong { color: var(--navy-800); font-size: 12px; }
.product-preview small { color: var(--slate-600); font-size: 11px; }
.sticky-card { position: sticky; top: calc(var(--topbar-height) + 20px); padding: 20px; }
.sticky-card h2 { margin-bottom: 14px; }
.check-list { display: grid; gap: 10px; padding: 0; margin-bottom: 18px; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--slate-700); font-size: 12px; }
.check-list .icon { margin-top: 1px; color: var(--green-600); }
.summary-count { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--slate-600); font-size: 12px; }
.summary-count strong { color: var(--navy-950); font-size: 20px; }
.sticky-card .info-box { margin-bottom: 15px; }
.sticky-card .button + .button { margin-top: 5px; }

/* Detail views */
.progress-panel { padding-bottom: 4px; }
.status-progress { display: flex; padding: 22px 22px 18px; overflow-x: auto; list-style: none; }
.status-progress li { position: relative; display: flex; min-width: 115px; flex: 1 0 115px; align-items: flex-start; gap: 8px; color: var(--slate-500); }
.status-progress li:not(:last-child)::after { position: absolute; top: 13px; right: 7px; left: 34px; height: 2px; background: var(--slate-200); content: ""; }
.status-progress li > span { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 2px solid var(--slate-300); border-radius: 50%; background: var(--white); font-size: 10px; font-weight: 800; }
.status-progress li > div { display: flex; min-width: 0; flex-direction: column; padding-top: 4px; }
.status-progress strong { font-size: 11px; white-space: nowrap; }
.status-progress small { color: var(--slate-500); font-size: 10px; }
.status-progress li.is-complete > span { color: var(--white); border-color: var(--green-600); background: var(--green-600); }
.status-progress li.is-complete::after { background: var(--green-600); }
.status-progress li.is-complete strong { color: var(--green-700); }
.status-progress li.is-current > span { color: var(--white); border-color: var(--blue-600); background: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); }
.status-progress li.is-current strong { color: var(--navy-800); }
.cancelled-state, .closed-workflow { display: flex; align-items: center; gap: 12px; margin: 18px 22px; padding: 15px; border-radius: 8px; color: var(--red-700); background: var(--red-50); }
.cancelled-state div, .closed-workflow div { display: flex; flex-direction: column; }
.cancelled-state p, .closed-workflow p { font-size: 12px; }
.waiting-workflow { display: flex; align-items: center; gap: 12px; margin: 18px 22px; padding: 15px; border: 1px solid var(--amber-100); border-radius: 8px; color: var(--amber-800); background: var(--amber-50); }
.waiting-workflow > .icon { flex: 0 0 auto; }
.waiting-workflow div { display: flex; flex-direction: column; gap: 3px; }
.waiting-workflow p { color: var(--text-muted); font-size: 12px; }
.proposal-card { overflow: hidden; border-color: #e2bd73; }
.proposal-card__flag { display: flex; align-items: center; gap: 7px; padding: 9px 20px; color: #6d3c08; background: var(--amber-100); font-size: 11px; font-weight: 750; }
.proposal-card__header { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px 14px; }
.proposal-card__header small { color: var(--slate-500); font-size: 11px; }
.proposal-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 16px; }
.proposal-values > div { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--slate-50); }
.proposal-values > div > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-100); }
.proposal-values p { display: flex; flex-direction: column; font-size: 11px; }
.proposal-values strong { color: var(--navy-950); font-size: 17px; }
.proposal-note { margin: 0 22px 16px; padding: 12px 14px; border-left: 3px solid var(--amber-600); background: var(--amber-50); }
.proposal-note strong { color: var(--slate-800); font-size: 11px; }
.proposal-note p { font-size: 12px; }
.proposal-actions { display: flex; gap: 9px; padding: 16px 22px; border-top: 1px solid #eedcb8; background: #fffdf9; }
.proposal-reject { padding: 17px 22px; border-top: 1px solid #eedcb8; background: var(--amber-50); }
.proposal-reject .inline-actions { margin-top: 11px; }
.proposal-history { padding: 6px 22px 16px; }
.proposal-history article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.proposal-history article:last-child { border-bottom: 0; }
.proposal-version { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; color: var(--slate-600); background: var(--slate-100); font-size: 10px; font-weight: 800; }
.proposal-history strong { color: var(--slate-800); font-size: 12px; }
.proposal-history p, .proposal-history blockquote { margin: 3px 0 0; color: var(--slate-600); font-size: 11px; }
.proposal-history blockquote { padding-left: 9px; border-left: 2px solid var(--slate-300); }
.proposal-status { height: max-content; padding: 5px 8px; border-radius: 12px; color: var(--slate-600); background: var(--slate-100); font-size: 10px; font-weight: 700; }
.proposal-status--accepted { color: var(--green-700); background: var(--green-100); }
.proposal-status--rejected { color: var(--red-700); background: var(--red-100); }
.proposal-status--pending { color: var(--amber-800); background: var(--amber-100); }
.detail-sidebar .panel { padding: 18px; }
.detail-sidebar h2 { margin-bottom: 13px; font-size: 15px; }
.key-dates dl, .order-facts dl, .assignment-card dl { margin: 0; }
.key-dates dl > div, .order-facts dl > div, .assignment-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-150); }
.key-dates dl > div:last-child, .order-facts dl > div:last-child { border-bottom: 0; }
.key-dates dt, .order-facts dt, .assignment-card dt { color: var(--slate-500); font-size: 11px; }
.key-dates dd, .order-facts dd, .assignment-card dd { margin: 0; color: var(--slate-800); font-size: 11px; font-weight: 650; text-align: right; }
.key-dates .is-confirmed dd { color: var(--green-700); }
.contact-card { display: flex; align-items: flex-start; gap: 11px; }
.contact-card > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-50); }
.contact-card h2 { margin-bottom: 5px; }
.contact-card strong { color: var(--slate-800); font-size: 12px; }
.contact-card p { font-size: 11px; }

/* Conversations */
.message-list { display: grid; gap: 16px; max-height: 640px; padding: 19px 22px; overflow-y: auto; }
.message { display: flex; align-items: flex-start; gap: 9px; }
.message--own { flex-direction: row-reverse; }
.message__content { min-width: 0; max-width: 82%; }
.message__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 5px; }
.message__meta strong { color: var(--slate-700); font-size: 11px; }
.message__meta time { color: var(--slate-400); font-size: 10px; }
.message__bubble { padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px 10px 10px 10px; color: var(--slate-700); background: var(--slate-50); font-size: 12px; overflow-wrap: anywhere; }
.message--own .message__meta { justify-content: flex-end; }
.message--own .message__bubble { border-color: #c5deea; border-radius: 10px 4px 10px 10px; background: var(--blue-50); }
.message--internal .message__bubble { border-color: #e6d6ad; background: #fffbef; }
.visibility-label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 9px; color: #76571c; background: #f7edcf; font-size: 9px; font-weight: 700; }
.visibility-label--customer { color: var(--blue-600); background: var(--blue-100); }
.conversation-empty { display: flex; min-height: 130px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--slate-400); text-align: center; }
.conversation-empty p { font-size: 12px; }
.message-form { padding: 17px 22px; border-top: 1px solid var(--border); background: var(--slate-50); }
.message-form textarea { background: var(--white); }
.message-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.message-form__footer > span { color: var(--slate-500); font-size: 10px; }
.message-mode { display: flex; gap: 7px; margin-bottom: 9px; }
.message-mode label { cursor: pointer; }
.message-mode input { position: absolute; opacity: 0; }
.message-mode label span { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--slate-600); background: var(--white); font-size: 10px; font-weight: 650; }
.message-mode input:checked + span { color: var(--navy-800); border-color: #9cc8db; background: var(--blue-50); }

/* Backoffice */
.action-drawer { position: fixed; top: calc(var(--topbar-height) + 15px); right: 20px; z-index: 80; width: min(620px, calc(100vw - 40px)); max-height: calc(100vh - var(--topbar-height) - 30px); padding: 22px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 24px 70px rgba(6,25,39,.28); }
.action-drawer--wide { width: min(760px, calc(100vw - 40px)); }
.action-drawer[hidden] { display: none; }
.action-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.action-drawer__header p { max-width: 520px; font-size: 12px; }
.action-drawer.is-open { animation: drawer-in .2s var(--ease); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.internal-workflow > .workflow-options { padding: 14px 20px 20px; }
.workflow-options { display: grid; gap: 8px; }
.workflow-options form { margin: 0; }
.workflow-option { display: flex; width: 100%; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; color: inherit; background: var(--white); text-align: left; transition: border-color .15s, background .15s; }
.workflow-option:hover { border-color: #afd0df; background: var(--blue-50); }
.workflow-option > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-100); }
.workflow-option > div { display: flex; flex: 1; flex-direction: column; }
.workflow-option strong { color: var(--navy-800); font-size: 12px; }
.workflow-option small { color: var(--slate-500); font-size: 11px; }
.workflow-option > .icon { color: var(--slate-400); }
.status-advance { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }
.status-advance > div { display: flex; align-items: center; gap: 11px; }
.status-advance > div > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9px; color: var(--blue-600); background: var(--blue-50); }
.status-advance p { display: flex; flex-direction: column; }
.status-advance strong { color: var(--slate-800); }
.status-advance small { font-size: 11px; }
.logistics-form { padding: 20px 22px; }
.logistics-form .button { margin-top: 16px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title-row .icon-button { width: 30px; height: 30px; }
.assigned-person, .unassigned-box { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 8px; background: var(--slate-50); }
.assigned-person > div, .unassigned-box p { display: flex; flex-direction: column; }
.assigned-person strong, .unassigned-box strong { color: var(--slate-800); font-size: 12px; }
.assigned-person small, .unassigned-box small { color: var(--slate-500); font-size: 10px; }
.unassigned-box > .icon { color: var(--slate-500); }
.sla-card { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px; border-radius: 7px; color: var(--blue-600); background: var(--blue-50); }
.sla-card > div { display: flex; flex-direction: column; }
.sla-card span { font-size: 10px; }
.sla-card strong { color: var(--navy-800); font-size: 12px; }
.sla-card--late { color: var(--red-700); background: var(--red-50); }
.sla-card--late strong { color: var(--red-700); }
.task-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.task-row:last-child { border: 0; }
.task-row__check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--slate-300); border-radius: 6px; }
.task-row__check.is-done { color: var(--white); border-color: var(--green-600); background: var(--green-600); }
.task-row > div { display: flex; flex-direction: column; }
.task-row strong { color: var(--slate-700); font-size: 11px; }
.task-row small { color: var(--slate-500); font-size: 10px; }
.audit-list { padding: 8px 22px 18px; list-style: none; }
.audit-list li { position: relative; display: flex; gap: 11px; padding: 11px 0; }
.audit-list li:not(:last-child)::before { position: absolute; top: 25px; bottom: -10px; left: 5px; width: 1px; background: var(--slate-200); content: ""; }
.audit-list__dot { position: relative; z-index: 1; width: 11px; height: 11px; flex: 0 0 auto; margin-top: 4px; border: 2px solid var(--white); border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }
.audit-list li > div { display: flex; flex-direction: column; }
.audit-list strong { color: var(--slate-700); font-size: 11px; }
.audit-list p, .audit-list small { color: var(--slate-500); font-size: 10px; }

/* Admin */
.admin-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-module { display: flex; min-height: 128px; align-items: flex-start; gap: 13px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; background: var(--white); box-shadow: var(--shadow-sm); transition: border-color .16s, box-shadow .16s, transform .16s; }
.admin-module:hover { color: inherit; border-color: #b5ceda; box-shadow: 0 8px 22px rgba(15,35,50,.08); transform: translateY(-1px); }
.admin-module > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--blue-600); background: var(--blue-50); }
.admin-module > div { min-width: 0; flex: 1; }
.admin-module h2 { margin-bottom: 5px; }
.admin-module p { font-size: 11px; }
.admin-module > .icon { margin-top: 11px; color: var(--slate-400); }
.admin-info-box { margin-bottom: 18px; }
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rule-card { padding: 18px; }
.rule-card__header { display: flex; min-width: 0; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.rule-card__header > div { min-width: 0; flex: 1; }
.rule-card__icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-50); }
.inline-title-input { min-height: 32px; padding: 3px 7px; border-color: transparent; color: var(--navy-900); background: transparent; font-size: 15px; font-weight: 750; }
.inline-title-input:hover, .inline-title-input:focus { border-color: var(--border-strong); background: var(--white); }
.rule-card__customer { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; padding: 8px 10px; border-radius: 7px; color: var(--slate-600); background: var(--slate-50); font-size: 11px; }
.rule-active-control { display: flex; align-items: flex-end; padding-bottom: 6px; }
.rule-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
.rule-card__footer > span { color: var(--slate-500); font-size: 10px; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 18px; }
.settings-layout > .admin-settings-form { grid-column: 1; }
.settings-layout > .admin-settings-form:nth-of-type(2) { margin-top: -2px; }
.settings-save { position: sticky; top: calc(var(--topbar-height) + 20px); display: flex; grid-column: 2; grid-row: 1 / span 2; align-items: center; flex-direction: column; padding: 24px 20px; text-align: center; }
.settings-save__icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 14px; border-radius: 14px; color: var(--green-700); background: var(--green-100); }
.settings-save p { margin-bottom: 18px; font-size: 11px; }
.assignee > span { display: flex; min-width: 0; flex-direction: column; text-align: left; }
.assignee > span strong, .assignee > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-cell { display: flex; align-items: center; gap: 9px; color: inherit; }
.customer-logo { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--navy-800); background: var(--blue-100); font-size: 13px; font-weight: 800; }
.customer-logo--lg { width: 54px; height: 54px; border-radius: 13px; font-size: 21px; }
.customer-cell > span:last-child { display: flex; flex-direction: column; }
.customer-cell strong { color: var(--navy-800); }
.config-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.config-tags i { padding: 4px 6px; border-radius: 5px; color: var(--slate-600); background: var(--slate-100); font-size: 9px; font-style: normal; font-weight: 700; }
.customer-heading { display: flex; align-items: center; gap: 15px; }
.customer-heading > div { min-width: 0; }
.anchor-tabs { gap: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.anchor-tabs a { position: relative; padding: 10px 1px; color: var(--slate-600); font-size: 12px; font-weight: 650; white-space: nowrap; }
.anchor-tabs a.is-active, .anchor-tabs a:hover { color: var(--navy-800); }
.anchor-tabs a.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue-500); content: ""; }
.admin-settings-form > .form-grid { padding: 22px; }
.settings-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 5px; }
.admin-resource-section { scroll-margin-top: calc(var(--topbar-height) + 15px); }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px 22px; }
.resource-card { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; }
.resource-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.resource-card strong, .resource-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card strong { color: var(--slate-800); font-size: 11px; }
.resource-card small { color: var(--slate-500); font-size: 10px; }
.resource-card__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-50); }
.routing-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 22px; }
.routing-summary > div { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; }
.routing-summary > div > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 8px; color: var(--blue-600); background: var(--blue-50); }
.routing-summary p { display: flex; flex-direction: column; }
.routing-summary small { color: var(--slate-500); font-size: 10px; }
.routing-summary strong { color: var(--slate-800); font-size: 11px; }
.admin-resource-section > .info-box { margin: 18px 22px; }

/* Flash messages */
.flash-stack { position: fixed; top: calc(var(--topbar-height) + 12px); right: 18px; z-index: 100; display: grid; width: min(390px, calc(100vw - 36px)); gap: 8px; }
.flash { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); box-shadow: var(--shadow-md); animation: flash-in .22s var(--ease); }
.flash > .icon { margin-top: 1px; color: var(--blue-600); }
.flash > span { flex: 1; color: var(--slate-700); font-size: 12px; }
.flash--success > .icon, .flash--ok > .icon { color: var(--green-600); }
.flash--error > .icon, .flash--danger > .icon { color: var(--red-600); }
.flash--warning > .icon { color: var(--amber-600); }
.flash__close { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 5px; color: var(--slate-500); background: transparent; }
.flash__close:hover { background: var(--slate-100); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Authentication */
.auth-page { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 43%) 1fr; background: var(--white); }
.auth-aside { position: relative; display: flex; overflow: hidden; color: var(--white); background: radial-gradient(circle at 12% 20%, rgba(60,137,172,.28), transparent 34%), linear-gradient(145deg, #0b2233 0%, #153e59 70%, #1e526d 100%); }
.auth-aside::before { position: absolute; right: -130px; bottom: -160px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); content: ""; }
.auth-aside__inner { position: relative; z-index: 1; display: flex; width: 100%; max-width: 620px; flex-direction: column; padding: clamp(30px, 5vw, 64px); }
.brand--inverse { flex: 0 0 auto; }
.auth-aside__message { margin: auto 0; padding: 70px 0; }
.auth-aside h1 { max-width: 500px; color: var(--white); font-size: clamp(38px, 5vw, 62px); letter-spacing: -.045em; }
.auth-aside__message > p { max-width: 510px; margin-top: 16px; color: #c3d5df; font-size: 16px; line-height: 1.65; }
.auth-benefits { display: grid; gap: 12px; padding: 0; margin: 34px 0 0; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; color: #dce9ef; font-size: 13px; }
.auth-benefits .icon { display: block; padding: 3px; border-radius: 50%; color: #b9dd61; background: rgba(185,221,97,.1); }
.auth-aside__foot { color: #88a4b3; font-size: 11px; }
.auth-panel { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; padding: 70px clamp(25px, 6vw, 80px) 34px; }
.auth-panel__top { position: absolute; top: 25px; right: 30px; }
.language-links { display: flex; gap: 4px; padding: 3px; border-radius: 7px; background: var(--slate-100); }
.language-links a { padding: 5px 7px; border-radius: 5px; color: var(--slate-500); font-size: 10px; font-weight: 750; }
.language-links a[aria-current="true"] { color: var(--navy-800); background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card__mobile-brand { display: none; }
.auth-card h2 { margin-bottom: 8px; font-size: 29px; letter-spacing: -.03em; }
.auth-card__lead { margin-bottom: 26px; }
.auth-form { display: grid; gap: 17px; }
.auth-form .button { margin-top: 4px; }
.security-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--green-700); }
.security-note p { color: var(--slate-500); font-size: 11px; }
.security-note strong { color: var(--slate-700); }
.auth-legal { position: absolute; bottom: 20px; color: var(--slate-400); font-size: 10px; }

/* Errors */
.error-page { display: flex; min-height: calc(100vh - var(--topbar-height) - 120px); align-items: center; justify-content: center; flex-direction: column; padding: 30px; text-align: center; }
.error-page__visual { position: relative; display: grid; width: 132px; height: 104px; place-items: center; margin-bottom: 22px; border-radius: 30px; color: var(--blue-600); background: var(--blue-50); }
.error-page__visual > span { position: absolute; top: -12px; right: -12px; display: grid; min-width: 44px; height: 28px; place-items: center; padding: 0 8px; border-radius: 15px; color: var(--white); background: var(--navy-800); font-size: 11px; font-weight: 800; }
.error-page__visual--404 { color: var(--amber-800); background: var(--amber-50); }
.error-page h1 { max-width: 650px; }
.error-page > p { max-width: 560px; font-size: 14px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 24px; }
.error-page__help { display: flex; align-items: flex-start; gap: 8px; max-width: 520px; margin-top: 34px; padding: 12px 14px; border-radius: 8px; color: var(--blue-600); background: var(--blue-50); text-align: left; }
.error-page__help p { font-size: 11px; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid--form, .content-grid--detail { grid-template-columns: minmax(0, 1fr) 280px; }
  .form-grid--line { grid-template-columns: 1fr 1fr 110px; }
  .field--wide { grid-column: auto; }
  .form-grid--drawer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .app-shell { display: block; }
  .app-main { min-width: 0; }
  .sidebar { width: min(310px, 87vw); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: var(--shadow-md); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__close, .topbar__menu { display: grid; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(5,20,30,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-backdrop.is-visible { display: block; opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 20px; }
  .main-content { padding: 28px 24px 48px; }
  .content-grid--form, .content-grid--detail { grid-template-columns: 1fr; }
  .content-grid__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .content-grid__aside > .panel { margin-bottom: 0; }
  .sticky-card { position: static; grid-column: 1 / -1; }
  .form-summary { display: block; }
  .auth-page { grid-template-columns: minmax(320px, 38%) 1fr; }
  .auth-aside h1 { font-size: 42px; }
  .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout > .admin-settings-form, .settings-save { grid-column: 1; }
  .settings-save { position: static; grid-row: auto; }
}

@media (max-width: 760px) {
  :root { --topbar-height: 60px; }
  .topbar { padding: 0 14px; }
  .topbar-user span, .topbar-context { display: none; }
  .main-content { padding: 22px 14px 40px; }
  .page-header, .page-header--detail, .page-header--compact { align-items: stretch; flex-direction: column; gap: 16px; }
  .page-header__actions { justify-content: flex-start; }
  .page-header__actions > .button, .page-header__actions > form { flex: 1 1 auto; }
  .page-header__actions > form .button { width: 100%; }
  .step-indicator { width: 100%; justify-content: space-between; }
  .step-indicator span { flex-direction: column; text-align: center; }
  .step-indicator i { flex: 1; }
  .metric-grid { gap: 10px; }
  .metric-card { min-height: 82px; padding: 13px; }
  .metric-card__icon { width: 36px; height: 36px; }
  .metric-card > div strong { font-size: 21px; }
  .panel__header { padding: 17px 16px; }
  .panel__header--action { align-items: flex-start; }
  .form-section > .form-grid, .admin-settings-form > .form-grid { padding: 17px 16px; }
  .form-grid--2, .form-grid--3, .form-grid--line, .form-grid--drawer { grid-template-columns: 1fr; }
  .field--wide, .field--double, .field--full { grid-column: auto; }
  .field--quantity { max-width: none; }
  .order-lines { padding: 0 14px 15px; }
  .order-line { padding: 14px; }
  .settings-switches { grid-template-columns: 1fr; }
  .content-grid__aside { grid-template-columns: 1fr; }
  .support-card { align-items: flex-start; flex-wrap: wrap; }
  .support-card > div { min-width: calc(100% - 60px); }
  .support-card .button { width: 100%; }
  .segmented-control { width: 100%; overflow-x: auto; }
  .segmented-control button { flex: 1 0 auto; }
  .table-toolbar, .queue-summary { align-items: stretch; flex-direction: column; }
  .search-control { width: 100%; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-select { width: 100%; }
  .queue-view-tabs { width: 100%; }
  .queue-view-tabs a { flex: 1; text-align: center; }
  .responsive-table { overflow: visible; }
  .data-table, .data-table tbody { display: block; }
  .data-table thead { display: none; }
  .data-table tr { display: block; margin: 0 12px 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--white); }
  .data-table td { display: flex; width: 100% !important; align-items: baseline; justify-content: space-between; gap: 15px; padding: 9px 12px !important; border-bottom: 1px solid var(--slate-150); text-align: right !important; }
  .data-table td::before { flex: 0 0 35%; color: var(--slate-500); content: attr(data-label); font-size: 9px; font-weight: 750; letter-spacing: .035em; text-align: left; text-transform: uppercase; }
  .data-table td > * { max-width: 62%; }
  .data-table td:first-child { padding-top: 12px !important; background: var(--slate-50); }
  .data-table td:last-child { border-bottom: 0; }
  .data-table .table-action { display: none; }
  .data-table--lines td:nth-child(2) { min-width: 0; }
  .order-total { padding: 14px 16px; }
  .status-progress { padding: 18px 16px 14px; }
  .proposal-values { grid-template-columns: 1fr; padding-right: 16px; padding-left: 16px; }
  .proposal-card__header, .proposal-actions { padding-right: 16px; padding-left: 16px; }
  .proposal-card__header { flex-direction: column; gap: 5px; }
  .proposal-actions { align-items: stretch; flex-direction: column; }
  .proposal-actions form, .proposal-actions .button { width: 100%; }
  .message-list, .message-form { padding-right: 16px; padding-left: 16px; }
  .message__content { max-width: calc(100% - 42px); }
  .message-form__footer { align-items: stretch; flex-direction: column; }
  .message-form__footer .button { align-self: flex-end; }
  .action-drawer { top: 10px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 20px); padding: 17px; }
  .status-advance { align-items: stretch; flex-direction: column; padding: 17px; }
  .routing-summary, .resource-grid { grid-template-columns: 1fr; }
  .rule-grid { grid-template-columns: 1fr; }
  .anchor-tabs { margin-right: -14px; margin-left: -14px; padding: 0 14px; }
  .auth-page { display: block; min-height: 100vh; background: var(--slate-50); }
  .auth-aside { display: none; }
  .auth-panel { min-height: 100vh; padding: 78px 20px 54px; }
  .auth-panel__top { top: 18px; right: 18px; }
  .auth-card { padding: 24px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
  .auth-card__mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
  .auth-card__mobile-brand > span:last-child { display: flex; flex-direction: column; }
  .auth-card__mobile-brand strong { color: var(--navy-950); }
  .auth-card__mobile-brand small { color: var(--slate-500); font-size: 10px; }
  .auth-legal { position: static; margin-top: 20px; text-align: center; }
  .error-page { min-height: calc(100vh - var(--topbar-height) - 80px); padding: 10px; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 72px; }
  .page-header__actions { flex-direction: column; }
  .page-header__actions > * { width: 100%; }
  .topbar__actions { gap: 6px; }
  .topbar-user { padding-left: 7px; }
  .heading-row { align-items: flex-start; flex-direction: column; }
  .state-banner, .attention-banner { align-items: flex-start; flex-wrap: wrap; }
  .state-banner .button { width: 100%; }
  .step-indicator span { font-size: 9px; }
  .step-indicator i { min-width: 8px; }
  .message-mode { align-items: stretch; flex-direction: column; }
  .proposal-history article { grid-template-columns: 32px minmax(0, 1fr); }
  .proposal-status { grid-column: 2; }
  .customer-heading { align-items: flex-start; }
  .customer-logo--lg { width: 44px; height: 44px; }
  .admin-module-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .topbar, .page-header__actions, .message-form, .action-drawer, .flash-stack, .anchor-tabs { display: none !important; }
  .app-shell, .app-main { display: block; }
  .main-content { max-width: none; padding: 0; }
  .panel { break-inside: avoid; box-shadow: none; }
  body { background: var(--white); }
}