:root {
  --navy: #102342;
  --blue: #286ff2;
  --green: #17a877;
  --amber: #e99a16;
  --red: #e55058;
  --text: #102143;
  --muted: #71809a;
  --line: #e4eaf3;
  --background: #f4f7fb;
  --surface: #fff;
  --shadow: 0 8px 24px rgba(23, 44, 80, .08);
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--text); background: var(--background); font-family: "Roboto", Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; left: -9999px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 240px; padding: 24px 14px; color: #dce5f4; background: var(--navy); }
.brand { display: flex; gap: 11px; align-items: center; padding: 2px 10px 28px; color: #fff; text-decoration: none; }
.brand-logo { display:block; width:184px; max-width:100%; height:52px; object-fit:contain; object-position:left center; }
.brand strong { display: block; font-size: 26px; }.brand small, .sidebar-bottom small { display: block; color: #a9bbd6; font-size: 11px; }
.brand-mark { display: flex; gap: 3px; align-items: end; height: 33px; }.brand-mark i { display: block; width: 8px; background: #fff; transform: skew(-28deg); }.brand-mark i:nth-child(1) { height: 17px; }.brand-mark i:nth-child(2) { height: 27px; }.brand-mark i:nth-child(3) { height: 33px; background: #367cff; }
.nav-list { display: grid; gap: 4px; }.nav-link { display: flex; gap: 13px; align-items: center; padding: 12px 13px; color: #c8d4e8; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }.nav-link:hover, .nav-link.active { color: #fff; background: #263f68; }.nav-link span { width: 18px; text-align: center; }
.sidebar-bottom { display: flex; gap: 9px; margin-top: auto; padding: 17px 10px 0; border-top: 1px solid #304766; font-size: 11px; }.sidebar-bottom strong { display: block; color: #fff; font-size: 12px; }
main { width: calc(100% - 240px); margin-left: 240px; min-width: 0; }.topbar { position: sticky; top: 0; z-index: 5; display: flex; gap: 20px; align-items: center; min-height: 88px; padding: 15px 34px; background: #fff; border-bottom: 1px solid var(--line); }.topbar h1 { margin: 3px 0 0; font-size: 22px; }.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.search { display: flex; gap: 8px; align-items: center; width: min(310px, 28vw); height: 40px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; }.search input { width: 100%; border: 0; outline: 0; }.icon-button { position: relative; width: 38px; height: 38px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }.notification b { position: absolute; top: -6px; right: -5px; padding: 2px 5px; color: #fff; background: var(--red); border-radius: 10px; font-size: 10px; }.profile { display: flex; gap: 7px; align-items: center; background: transparent; border: 0; }.profile-chevron { margin-left: 2px; color: #526780; font-size: 11px; }.avatar { display: grid; width: 32px; height: 32px; place-items: center; color: #17489c; background: #e9effd; border-radius: 50%; font-size: 10px; font-weight: 700; }.menu-button { display: none; }
.page-content { width: 100%; max-width: 1900px; padding: 25px 34px 40px; }.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.metric { display: flex; gap: 12px; min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }.metric-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: var(--blue); background: #eaf1ff; border-radius: 9px; font-size: 18px; }.metric:nth-child(2) .metric-icon { color: var(--amber); background: #fff4db; }.metric:nth-child(3) .metric-icon { color: var(--green); background: #e0f8ef; }.metric:nth-child(4) .metric-icon { color: var(--red); background: #ffeaeb; }.metric small, .metric strong { display: block; }.metric small { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }.metric strong { margin: 2px 0; font-size: 22px; }.metric em { color: var(--green); font-size: 11px; font-style: normal; font-weight: 700; }.metric em.down { color: var(--red); }
.invoice-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.module-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.orders-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.orders-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(350px, 1fr); min-height: 590px; overflow: hidden; }.orders-list { border-right: 1px solid var(--line); }.orders-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }.orders-list-title { margin: 0; font-size: 21px; }.orders-list-title span { margin-right: 8px; color: var(--blue); }.orders-tabs { display: flex; gap: 3px; overflow-x: auto; }.orders-controls { display: flex; gap: 8px; align-items: center; }.jobs-table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }.jobs-table th { padding: 10px 9px; color: var(--muted); background: #f8faff; border-bottom: 1px solid var(--line); font-size: 8px; letter-spacing: .35px; text-align: left; text-transform: uppercase; }.jobs-table td { padding: 12px 9px; border-bottom: 1px solid var(--line); }.jobs-table tr.selected { background: #f1f6ff; }.job-summary { display: flex; flex-direction: column; padding: 20px; }.stage-track { display: grid; gap: 8px; }.stage-track span { padding: 7px 9px; color: var(--muted); background: #f4f7fb; border-radius: 5px; font-size: 10px; font-weight: 700; }.stage-track .complete { color: #087e56; background: #dcf6eb; }.stage-track .active { color: #2164d3; background: #e7f0ff; }.job-gates { display: grid; gap: 8px; font-size: 10px; }.job-gates b { color: var(--green); }.job-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; padding-top: 16px; }.job-action { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 39px; padding: 7px; color: #fff; border: 0; border-radius: 6px; font-size: 10px; font-weight: 700; }.job-action span { font-size: 13px; }.traveller-action { background: var(--blue); }.pressing-action { background: var(--green); }.defect-action { background: var(--red); }.timeline-action { color: #304b70; background: #eaf0f8; }
.quote-workspace.orders-workspace { grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); grid-template-areas: "job-list selected-job"; }.orders-list { grid-area: job-list; }.job-summary { grid-area: selected-job; }
.release-action { color: #fff; background: var(--navy); }.deposit-action { color: #fff; background: #7354dc; }.purchase-action { color: #fff; background: var(--amber); }
.left-selected-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 13px 16px; background: #f8faff; border-top: 1px solid var(--line); }.left-selected-actions p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.left-action { display: flex; gap: 5px; align-items: center; justify-content: center; min-height: 35px; padding: 6px; border: 0; border-radius: 5px; font-size: 9px; font-weight: 700; }.left-action span { font-size: 12px; }
.job-mini-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 16px; }.job-mini-sections section { min-height: 92px; padding: 10px; background: #f8faff; border: 1px solid var(--line); border-radius: 6px; }.job-mini-sections h3 { margin: 0 0 7px; color: var(--muted); font-size: 9px; text-transform: uppercase; }.job-mini-sections h3 span { margin-right: 4px; color: var(--blue); }.job-mini-sections p { margin: 0 0 4px; font-size: 10px; }.job-mini-sections small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.job-filter-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: end; padding: 10px 16px; background: #f8faff; border-bottom: 1px solid var(--line); }.job-filter-row label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }.job-filter-row select { min-width: 88px; height: 29px; padding: 0 6px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; }.clear-filters { height: 29px; padding: 0 8px; color: var(--blue); background: transparent; border: 0; font-size: 10px; font-weight: 700; }.job-progress { display: flex; gap: 5px; align-items: center; min-width: 65px; }.job-progress::before { width: 45px; height: 4px; content: ""; background: #e3eaf4; border-radius: 5px; }.job-progress { position: relative; }.job-progress i { position: absolute; top: 6px; left: 0; display: block; height: 4px; background: var(--blue); border-radius: 5px; }.job-progress span { margin-left: 48px; font-size: 9px; }
.job-progress::before { height: 8px; }.job-progress i { top: 4px; height: 8px; }
.quote-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.quote-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); min-height: 560px; overflow: hidden; }.quote-list { border-right: 1px solid var(--line); }.quote-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }.quote-list-title { margin: 0; font-size: 21px; }.quote-list-title span { margin-right: 8px; color: var(--blue); }.quote-tabs { display: flex; gap: 3px; overflow-x: auto; }.quote-tab { flex: 0 0 auto; padding: 7px 9px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 11px; font-weight: 700; }.quote-tab.active { color: var(--blue); border-color: var(--blue); }.quote-controls { display: flex; gap: 8px; align-items: center; }.quote-toolbar-actions { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; }.quote-search { display: flex; flex: 1; gap: 8px; align-items: center; height: 38px; margin: 0; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; }.quote-search input { width: 100%; border: 0; outline: 0; font-size: 12px; }.quote-results { display: grid; }.quote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 14px; color: var(--text); background: #fff; border: 0; border-top: 1px solid var(--line); text-align: left; }.quote-row:hover, .quote-row.selected { background: #f1f6ff; }.quote-row strong, .quote-row small { display: block; }.quote-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }.quote-detail { display: flex; flex-direction: column; padding: 20px; }.quote-detail-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.quote-detail-head h2 { margin: 4px 0; font-size: 20px; }.quote-detail-head p { margin: 0; color: var(--muted); font-size: 12px; }.detail-block { padding: 16px 0; border-bottom: 1px solid var(--line); }.detail-block h3 { margin: 0 0 11px; font-size: 13px; }.detail-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.detail-pairs span, .quote-total span { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }.detail-pairs strong, .quote-total strong { color: var(--text); font-size: 12px; }.quote-total { display: flex; gap: 40px; padding: 16px 0; }.quote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; padding-top: 16px; }.quote-action { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; min-height: 43px; color: #fff; border: 0; border-radius: 7px; font-size: 12px; font-weight: 700; }.quote-action span { font-size: 15px; }.send-quote { grid-column: 1 / -1; background: var(--blue); }.record-acceptance { background: var(--amber); }.convert-job { background: var(--green); }.success-action { color: #fff; background: var(--green); }
.quote-table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }.quote-table th { padding: 10px 9px; color: var(--muted); background: #f8faff; border-bottom: 1px solid var(--line); font-size: 8px; letter-spacing: .35px; text-align: left; text-transform: uppercase; }.quote-table td { padding: 12px 9px; border-bottom: 1px solid var(--line); }.quote-table tr.selected { background: #f1f6ff; }.row-action { padding: 5px 7px; color: var(--blue); background: #e8f0ff; border: 0; border-radius: 4px; font-size: 9px; font-weight: 700; }
.quote-status-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }.status-box { display: flex; gap: 5px; align-items: center; min-height: 34px; padding: 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }.status-box.good { color: #087e56; background: #dcf6eb; }.status-box.warning { color: #a66400; background: #fff1d4; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }.panel-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }.panel-heading h2 { margin: 0; font-size: 16px; }.panel-heading h2 span { color: var(--blue); }.board-wrap { overflow-x: auto; }.board { display: grid; grid-template-columns: repeat(7, minmax(175px, 1fr)); gap: 10px; min-width: 1270px; padding: 12px; }.board-column { min-height: 200px; padding: 9px; background: #f5f8fd; border-radius: 8px; }.board-column h3 { display: flex; justify-content: space-between; margin: 0 0 9px; font-size: 12px; }.count { padding: 1px 6px; background: #e4ecf9; border-radius: 10px; font-size: 10px; }.job-card { padding: 10px; margin: 7px 0; background: #fff; border: 1px solid #edf0f5; border-left: 3px solid var(--blue); border-radius: 6px; box-shadow: 0 2px 7px rgba(17,40,80,.04); }.job-card.active-job { border-left-color: var(--green); outline: 1px solid #bcebdc; }.job-card h4 { margin: 0; font-size: 12px; }.job-card p { margin: 3px 0; color: #465773; font-size: 10px; }.job-meta { display: flex; justify-content: space-between; font-size: 10px; }.pill { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 700; }.blue { color: #2164d3; background: #e7f0ff; }.green { color: #087e56; background: #dcf6eb; }.amber { color: #b66e00; background: #fff1d4; }.red { color: #c83742; background: #ffeaec; }.progress { height: 4px; margin-top: 8px; overflow: hidden; background: #e9eef5; border-radius: 5px; }.progress i { display: block; height: 100%; background: var(--blue); }
.board-filters { display: flex; gap: 7px; align-items: center; }.filter-button, .more-button { min-height: 30px; padding: 0 11px; color: #38506f; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 700; }.filter-button.active { color: #fff; background: var(--blue); border-color: var(--blue); }.more-button { width: 32px; padding: 0; font-size: 14px; letter-spacing: 1px; }
.dashboard-lower { display: grid; grid-template-columns: 1.1fr 1.45fr .85fr; gap: 18px; margin-top: 20px; }.exceptions, .analytics, .activity, .readiness, .timeline { padding: 16px; }.exception { display: flex; gap: 10px; padding: 12px; margin-bottom: 8px; background: #fff9e9; border-radius: 7px; }.exception.red-bg { background: #fff0f0; }.exception h3 { margin: 0; font-size: 12px; }.exception p, .muted { color: var(--muted); font-size: 11px; }.text-link { color: var(--blue); background: transparent; border: 0; text-decoration: underline; }.analytics-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.chart { display: flex; gap: 8px; align-items: end; height: 86px; }.chart i { flex: 1; background: var(--blue); }.activity-item, .timeline-event { padding: 0 0 18px 14px; border-left: 2px solid #dbe5f2; font-size: 11px; }.view-title { margin-bottom: 20px; }.section-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }.detail-head { padding: 21px; }.button { padding: 10px 14px; border: 0; border-radius: 7px; font-weight: 700; }.button.primary { color: #fff; background: var(--blue); }.button.secondary { background: #edf2f8; }.button.danger { color: #c83742; background: #fff0f0; }.table-wrap { overflow: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; }.empty-view { padding: 45px; text-align: center; }.dialog { width: min(560px, calc(100% - 28px)); border: 0; border-radius: 12px; }.dialog form { padding: 23px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.dialog input, .dialog select { padding: 10px; border: 1px solid var(--line); border-radius: 6px; }.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }.toast-region { position: fixed; right: 20px; bottom: 20px; }.toast { padding: 13px 16px; color: #fff; background: var(--navy); border-radius: 8px; }
.dashboard-control-grid { display: grid; grid-template-columns: 1.1fr 1.55fr .9fr .65fr; gap: 18px; margin-top: 20px; align-items: start; }.dashboard-stack { display: grid; gap: 18px; }.big-stat strong { display: block; font-size: 22px; }.big-stat span { color: var(--muted); font-size: 11px; }.cause-list { display: grid; gap: 7px; margin-top: 12px; font-size: 10px; }.cause-list div { display: flex; justify-content: space-between; }.inventory-die-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }.inventory-die-grid h3 { margin: 0 0 8px; font-size: 11px; }.compact-table { width: 100%; border-collapse: collapse; font-size: 9px; }.compact-table th, .compact-table td { padding: 6px 2px; border-bottom: 1px solid var(--line); text-align: left; }.compact-table th { color: var(--muted); font-size: 8px; text-transform: uppercase; }.quick-actions > div { display: grid; gap: 10px; padding: 14px; }.quick-action { min-height: 46px; padding: 9px; color: #fff; border: 0; border-radius: 7px; font-weight: 700; text-align: left; }.quick-action.primary { background: var(--blue); }.quick-action.success { background: var(--green); }.quick-action.violet { background: #7354dc; }.quick-action.dark { background: var(--navy); }
@media (max-width: 1250px) { .metric-grid { grid-template-columns: repeat(3, 1fr); }.invoice-summary, .quote-metrics, .orders-metrics { grid-template-columns: repeat(2, 1fr); }.dashboard-lower { grid-template-columns: 1fr 1fr; }.dashboard-control-grid { grid-template-columns: 1fr 1fr; }.quick-actions { grid-column: span 2; }.quick-actions > div { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .sidebar { width: 245px; transform: translateX(-100%); }.sidebar.open { transform: translateX(0); }.app-shell { display: block; } main { width: 100%; margin-left: 0; }.topbar { min-height: 65px; padding: 13px 17px; }.menu-button { display: block; background: transparent; border: 0; }.search, .profile > span:not(.avatar) { display: none; }.profile { margin-left: auto; }.page-content { padding: 17px; }.metric-grid, .invoice-summary, .module-metrics, .quote-metrics, .orders-metrics { grid-template-columns: repeat(2, 1fr); }.dashboard-lower, .section-layout, .dashboard-control-grid, .quote-workspace, .orders-workspace { grid-template-columns: 1fr; }.quote-list, .orders-list { border-right: 0; border-bottom: 1px solid var(--line); }.quote-actions { flex-wrap: wrap; }.quote-status-boxes, .job-mini-sections { grid-template-columns: 1fr; }.left-selected-actions { grid-template-columns: 1fr; }.quick-actions { grid-column: auto; }.quick-actions > div { grid-template-columns: 1fr 1fr; }.inventory-die-grid { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (max-width: 800px) { .orders-workspace { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); grid-template-areas: "job-list selected-job"; }.orders-list { border-right: 1px solid var(--line); border-bottom: 0; } }
.orders-workspace { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "job-list selected-job" !important; }.orders-list { grid-area: job-list; }.job-summary { grid-area: selected-job; }
@media (max-width: 600px) { .orders-workspace { min-width: 900px; } }
.orders-mockup-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr); gap: 12px; align-items: start; }.orders-main { display: grid; gap: 10px; min-width: 0; }.orders-filter-panel { padding: 14px; }.mockup-filter-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 10px; }.mockup-filter-grid label { display: grid; gap: 5px; color: var(--text); font-size: 10px; font-weight: 700; }.mockup-filter-grid input, .mockup-filter-grid select { width: 100%; height: 34px; padding: 0 9px; color: #526681; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; }.filter-actions { display: flex; grid-column: 1 / -1; gap: 8px; justify-content: flex-end; }.filter-actions .button { padding: 8px 10px; font-size: 10px; }.mockup-jobs-table { width: 100%; border-collapse: collapse; font-size: 9px; white-space: nowrap; }.mockup-jobs-table th { padding: 10px 6px; color: var(--text); background: #f8faff; border-bottom: 1px solid var(--line); font-size: 8px; text-align: left; }.mockup-jobs-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); }.mockup-jobs-table tr.selected { background: #eaf4ff; }.mockup-jobs-table small { display: block; font-size: 8px; }.late { color: var(--red) !important; }.table-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px; color: var(--muted); font-size: 9px; }.table-pagination button { min-width: 27px; height: 27px; margin-left: 4px; color: #314865; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; }.table-pagination button.active { color: #fff; background: var(--blue); }.mockup-selected-job { padding: 14px; }.selected-status { display: flex; gap: 8px; align-items: center; }.selected-status .icon-button { margin-left: auto; }.mockup-selected-job h2 { margin: 10px 0 1px; font-size: 23px; }.mockup-selected-job > p { margin: 0 0 10px; color: var(--muted); font-size: 11px; }.selected-tabs { display: flex; gap: 12px; margin: 0 -14px 10px; padding: 0 14px 10px; overflow: auto; border-bottom: 1px solid var(--line); }.selected-tabs button { padding: 0 0 8px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 10px; font-weight: 700; white-space: nowrap; }.selected-tabs button.active { color: var(--blue); border-color: var(--blue); }.selected-card { margin: 10px 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; }.selected-card h3 { display: flex; justify-content: space-between; margin: 0 0 9px; font-size: 11px; }.selected-card h3 button { color: var(--blue); background: transparent; border: 0; font-size: 9px; }.selected-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.selected-summary span { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }.selected-summary strong { color: var(--text); font-size: 10px; }.selected-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.selected-pair .selected-card { min-width: 0; }.selected-card p { margin: 3px 0; font-size: 9px; }.selected-card small { color: var(--muted); font-size: 8px; }.link-like { color: var(--blue); font-size: 11px; }.checklist p { display: flex; justify-content: space-between; gap: 8px; }.checklist p b { color: var(--green); font-size: 8px; }.mockup-job-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.mockup-job-actions button { min-height: 35px; padding: 7px; color: #fff; border: 0; border-radius: 5px; font-size: 9px; font-weight: 700; }.mockup-job-actions .timeline-action { color: #304b70; }
@media (max-width: 900px) { .orders-mockup-grid { grid-template-columns: minmax(680px, 1fr) minmax(380px, 1fr); overflow-x: auto; }.mockup-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }.mockup-filter-grid label:first-child { grid-column: span 2; } }
.production-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }.production-filter-panel { margin-bottom: 12px; }.production-filter-bar { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 10px; }.board-range { display: flex; gap: 4px; margin-right: auto; }.board-range button, .production-filter-bar select { height: 32px; padding: 0 12px; color: #334b6d; background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; font-weight: 700; }.board-range button.active { color: #fff; background: var(--blue); border-color: var(--blue); }.production-filter-bar select { min-width: 130px; }.production-bottom-grid { display: grid; grid-template-columns: .95fr 2.2fr 1.1fr; gap: 12px; margin-top: 12px; }.board-job-details > div:last-child { padding: 13px; }.board-job-details h3 { margin: 0 0 5px; font-size: 14px; }.board-job-details p { margin: 7px 0; color: #46607f; font-size: 10px; }.production-stepper { display: grid; grid-template-columns: 72px repeat(7, 1fr); gap: 7px; align-items: center; padding: 15px; border-bottom: 1px solid var(--line); }.production-stepper > strong { display: grid; width: 58px; height: 58px; place-items: center; color: var(--blue); border: 7px solid #dceaff; border-radius: 50%; font-size: 15px; }.production-stepper > strong small { font-size: 7px; }.production-stepper div { display: grid; justify-items: center; gap: 5px; text-align: center; }.production-stepper b { display: grid; width: 23px; height: 23px; place-items: center; color: #8c9bb0; background: #e9eef5; border-radius: 50%; font-size: 10px; }.production-stepper b.complete { color: #fff; background: var(--green); }.production-stepper b.active { color: #fff; background: #754ff0; box-shadow: 0 0 0 4px #e8e1ff; }.production-stepper span { color: #405674; font-size: 8px; font-weight: 700; }.production-stepper small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 400; }.production-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; }.production-cards article { padding: 9px; background: #f5f8fd; border-radius: 6px; }.production-cards small { color: var(--muted); font-size: 8px; }.production-cards strong { display: block; margin: 4px 0; font-size: 10px; }.production-cards p { margin: 0; color: #536a87; font-size: 8px; }.production-events { padding: 12px; }.production-events p { display: grid; grid-template-columns: 11px 1fr; gap: 7px; margin: 0; padding: 0 0 13px; border-left: 1px solid #dce4ef; color: #526985; font-size: 8px; }.production-events p b { margin-left: -4px; color: var(--green); font-size: 10px; }.production-events p:first-child b { color: #754ff0; }.production-events small { display: block; margin-top: 3px; color: #263f60; font-size: 9px; }
@media (max-width: 1100px) { .production-kpis { grid-template-columns: repeat(3, 1fr); }.production-bottom-grid { grid-template-columns: minmax(290px, 1fr) minmax(520px, 2fr) minmax(270px, 1fr); overflow-x: auto; }.production-filter-bar { min-width: 850px; } }
.production-stepper { position: relative; grid-template-columns: 86px repeat(7, 1fr); }.production-stepper::before { position: absolute; top: 39px; right: 22px; left: 96px; height: 2px; content: ""; background: linear-gradient(90deg, var(--green) 0 44%, #dce4ef 44% 100%); }.production-stepper > strong { position: relative; z-index: 1; width: 70px; height: 70px; background: conic-gradient(var(--blue) 0 30%, #dceaff 30% 100%); border: 0; box-shadow: inset 0 0 0 9px #fff; font-size: 16px; }.production-stepper div { position: relative; z-index: 1; }
.production-cards { grid-template-columns: 1fr 1.35fr 1.2fr; }.production-cards .progress-info-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 92px; padding: 11px; background: #f3f7fd; border: 1px solid #e5edf8; }.progress-card-icon { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: var(--blue); border-radius: 6px; font-size: 13px; }.action-card .progress-card-icon { background: var(--green); }.operator-card .progress-card-icon { background: #2877ef; }.production-cards .progress-info-card small { display: block; margin-bottom: 4px; color: #5e7290; font-size: 9px; font-weight: 700; }.production-cards .progress-info-card strong { margin: 0 0 4px; color: var(--text); font-size: 11px; }.production-cards .progress-info-card p { color: #5e7290; font-size: 8px; line-height: 1.45; }.operator-card button { grid-column: 2; justify-self: end; align-self: end; padding: 5px 14px; color: #fff; background: var(--blue); border: 0; border-radius: 5px; font-size: 9px; font-weight: 700; }