:root { --opti-primary: #7367f0; --opti-info: #00bad1; --opti-success: #28c76f; --opti-warning: #ff9f43; }

body { font-family: 'Public Sans', sans-serif; }

.optilens-brand .app-brand-logo {
  width: auto;
  height: auto;
}

.africa-optics-logo {
  width: 42px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain;
}

.layout-menu .menu-inner > .menu-item:not(.active) > .menu-link,
.layout-menu .menu-inner > .menu-item:not(.active) > .menu-link i {
  color: #111827 !important;
}

.layout-menu .menu-header-text {
  color: #111827 !important;
}
.logout-menu-item form { margin: 0; }
.logout-menu-button { width: 100%; border: 0; background: transparent; text-align: left; }
.logout-menu-button:hover { color: var(--opti-primary); }
.customer-import-bar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid #e3e8f0; border-radius: .5rem; background: #f8fafd; }
.customer-import-form { display: grid; grid-template-columns: minmax(180px, 320px) auto; gap: .65rem; align-items: end; }
.customer-import-form label { grid-column: 1 / -1; color: #2f3349; font-size: .85rem; font-weight: 700; }
.customer-import-form input[type="file"] { min-height: 2.5rem; border: 1px solid #d9e1ed; border-radius: .375rem; padding: .4rem .55rem; background: #fff; }
.customer-template-links { display: flex; gap: .65rem; flex-wrap: wrap; }
.form-alert.danger { margin: 0 0 1rem; border: 1px solid #f3bec5; border-radius: .4rem; padding: .8rem 1rem; color: #b42335; background: #fff5f6; }
@media (max-width: 767.98px) { .customer-import-bar, .customer-template-links { align-items: stretch; flex-direction: column; } .customer-import-form { grid-template-columns: 1fr; } .customer-template-links .button { width: 100%; } }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: #f8f7fa; }
.login-card { width: min(1060px, 100%); min-height: 640px; display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; background: #fff; border-radius: 1rem; box-shadow: 0 .25rem 1.25rem rgba(75,70,92,.1); }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 3.25rem 4rem; }
.brand.big { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 .75rem; color: var(--opti-primary); font-size: 1.75rem; font-weight: 700; }
.login-brand-logo { width: min(280px, 100%); height: auto; object-fit: contain; }
.tagline, .muted, .help { color: #6f6b7d; text-align: center; }
.tagline { margin: 0 0 2.25rem; }
.login-form h1 { margin: 0 0 .55rem; text-align: center; font-size: 1.75rem; font-weight: 700; }
.muted { margin: 0; }
.stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-row { display: flex; align-items: center; gap: 1rem; }
.between { justify-content: space-between; }
.inline { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; }
.inline input { width: auto; }
.login-visual { display: flex; align-items: flex-start; padding: 6rem 3rem; background: linear-gradient(180deg, rgba(245,244,255,.9), rgba(233,247,255,.65)), url('../images/lens-hero.png') center bottom / cover no-repeat; }
.login-visual h2 { color: #2f2b3d; font-size: 2.2rem; line-height: 1.15; font-weight: 700; }
.login-visual p { max-width: 360px; color: #6f6b7d; }

.button { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--opti-primary); border-radius: .375rem; padding: 0 1rem; color: var(--opti-primary); background: #fff; font-weight: 500; }
.button.primary { color: #fff; background: var(--opti-primary); box-shadow: 0 .125rem .375rem rgba(115,103,240,.3); }
.button.ghost { background: transparent; }
.button.danger { color: #fff; border-color: #ea5455; background: #ea5455; box-shadow: 0 .125rem .375rem rgba(234,84,85,.26); }

.intro { margin-bottom: 1.5rem; }
.intro h2 { margin: 0 0 .35rem; font-size: 1.5rem; font-weight: 700; }
.intro p { margin: 0; color: #6f6b7d; }
.stats-grid, .stats-grid.row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0 0 1.5rem !important; }
.stats-grid > .stat, .stats-grid.row > .stat { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; }
.stat { min-height: 132px; display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem !important; border: 0; border-radius: .75rem; background: #fff; box-shadow: 0 .1875rem .75rem rgba(75,70,92,.08); }
.stat span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; color: var(--opti-primary); background: rgba(115,103,240,.16); font-size: 1.4rem; }
.stat.amber span { color: var(--opti-warning); background: rgba(255,159,67,.16); }
.stat.green span { color: var(--opti-success); background: rgba(40,199,111,.16); }
.stat.violet span { color: #7367f0; background: rgba(115,103,240,.16); }
.stat div { display: grid; gap: .2rem; }
.stat small { color: #6f6b7d; font-weight: 600; }
.stat strong { color: #2f2b3d; font-size: 2rem; line-height: 1; font-weight: 700; }
.stat a { margin-top: .7rem; font-weight: 500; }

.panel { margin-bottom: 1.5rem; background: #fff; border: 0; border-radius: .75rem; box-shadow: 0 .1875rem .75rem rgba(75,70,92,.08); overflow: hidden; }
.panel-heading { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; border-bottom: 1px solid #dbdade; }
.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.panel h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.panel > h2 { padding: 1.5rem 1.5rem 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1.5rem; border-bottom: 1px solid #dbdade; vertical-align: middle; }
th { color: #5d596c; background: #f8f7fa; font-size: .78rem; text-transform: uppercase; font-weight: 600; }
tbody tr:hover { background: #fafafa; }
.status { display: inline-flex; align-items: center; min-height: 1.55rem; border-radius: .375rem; padding: 0 .6rem; font-size: .78rem; font-weight: 600; }
.status-order-received,
.status-prescription-verified,
.status-ordering-lenses { color: #00bad1; background: rgba(0,186,209,.16); }
.status-awaiting-frame,
.status-awaiting-lenses,
.status-lens-processing,
.status-machine-cutting,
.status-tinting-department,
.status-coating-process { color: #ff9f43; background: rgba(255,159,67,.16); }
.status-quality-check,
.status-frame-alignment-qc,
.status-invoice-department { color: #7367f0; background: rgba(115,103,240,.16); }
.status-ready-for-dispatch, .status-delivered { color: #28c76f; background: rgba(40,199,111,.16); }
.status-waiting-for-client-response,
.status-job-marked-blocked { color: #ea5455; background: rgba(234,84,85,.16); }
.icon-button { min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dbdade; border-radius: .375rem; padding: 0 .75rem; color: var(--opti-primary); background: #fff; font-weight: 500; }
.table-status-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, .8fr) auto; gap: .5rem; align-items: center; min-width: 430px; }
.table-status-form select,
.table-status-form input { min-height: 2.2rem; padding-top: .35rem; padding-bottom: .35rem; }
.table-status-form .icon-button { min-height: 2.2rem; }

input, select, textarea { width: 100%; min-height: 2.65rem; border: 1px solid #dbdade; border-radius: .375rem; padding: .55rem .875rem; background: #fff; color: #2f2b3d; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--opti-primary); box-shadow: 0 0 0 .2rem rgba(115,103,240,.16); }
label { display: grid; gap: .45rem; color: #5d596c; font-weight: 500; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #ea5455; box-shadow: 0 0 0 .2rem rgba(234,84,85,.14); }
.field-error { color: #ea5455; font-size: .8rem; font-weight: 700; line-height: 1.35; }
.field-hint { color: #6f6b7d; font-size: .8rem; font-weight: 600; line-height: 1.35; }
.field-hint.is-pending { color: #ff9f43; }
.field-hint.is-success { color: #28c76f; }
.field-hint.is-error { color: #ea5455; }
textarea { min-height: 110px; }
.search, .track-form { display: flex; align-items: end; gap: .75rem; }
.search input { min-width: 280px; }
.job-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem; }
fieldset { display: grid; gap: 1rem; margin: 0; border: 1px solid #dbdade; border-radius: .75rem; padding: 1.25rem; }
legend { float: none; width: auto; padding: 0 .5rem; margin: 0; color: var(--opti-primary); font-size: .95rem; font-weight: 600; }
.wide { grid-column: 1 / -1; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rx-grid { display: grid; grid-template-columns: 58px 1fr 1fr; align-items: center; gap: .75rem; }
.rx-grid.header { color: #6f6b7d; font-size: .8rem; font-weight: 600; }
.actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 1rem; }
.job-actions { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .85rem 1rem; }
.job-actions-left, .job-actions-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.job-actions .button { min-height: 2.55rem; white-space: nowrap; }
.job-actions-right .button[name="submit_action"] { min-width: 210px; }
.customer-fields { display: grid; gap: 1rem; border: 1px dashed #cfd8e6; border-radius: .75rem; padding: 1rem; background: #f8fbff; }
.customer-toggle { width: fit-content; display: inline-flex; grid-auto-flow: column; align-items: center; gap: .55rem; color: #2f2b3d; }
.customer-toggle input { width: 1rem; min-height: 1rem; }
.selected-customer { display: grid; gap: .25rem; border: 1px solid #dbdade; border-radius: .75rem; padding: 1rem; background: #f8f7fa; }
.selected-customer strong { color: #2f2b3d; font-size: 1rem; }
.selected-customer small { color: #6f6b7d; }
.job-card-section { background: #fff; }
.job-card-rx { display: grid; grid-template-columns: 70px repeat(7, minmax(90px, 1fr)); border: 1px solid #9ca3af; overflow-x: auto; }
.rx-cell { min-height: 3rem; display: grid; align-items: center; border-right: 1px solid #9ca3af; border-bottom: 1px solid #9ca3af; padding: .25rem; }
.rx-cell:nth-child(8n) { border-right: 0; }
.rx-heading { justify-items: center; color: #111827; background: #f8fafc; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.rx-eye { justify-items: center; color: #111827; font-size: 1.6rem; font-weight: 900; }
.rx-cell input { min-height: 2.25rem; border: 0; border-radius: 0; padding: .25rem .45rem; text-align: center; box-shadow: none !important; }
.job-card-options { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); border: 1px solid #9ca3af; overflow-x: auto; }
.option-group { display: grid; align-content: start; border-right: 1px solid #9ca3af; }
.option-group:last-child { border-right: 0; }
.option-group strong { min-height: 2.25rem; display: grid; place-items: center; border-bottom: 1px solid #9ca3af; padding: .35rem; color: #111827; background: #f8fafc; font-size: .72rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.option-tile { min-height: 2.45rem; display: flex; align-items: center; gap: .45rem; border-bottom: 1px solid #d1d5db; padding: .45rem .55rem; color: #2f3349; font-size: .78rem; font-weight: 800; line-height: 1.15; }
.option-tile:last-child { border-bottom: 0; }
.option-tile input { width: 1rem; min-height: 1rem; flex: 0 0 auto; }
.compact-options .option-tile { min-height: 2.2rem; }
.frame-card-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr; gap: 1rem; }
.deal-frame-selector { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.deal-frame-box { position: relative; display: grid; gap: .85rem; align-content: start; border: 1px solid #d9e1ed; border-radius: .5rem; padding: 1rem; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease; }
.deal-frame-box strong { display: flex; align-items: center; gap: .45rem; min-height: auto; color: #2f2b3d; font-size: .86rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.deal-frame-box strong::before { content: ''; width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 999px; background: #cbd5e1; }
.deal-frame-box p { min-height: 2.75rem; display: flex; align-items: center; margin: 0; border-radius: .4rem; padding: .65rem .75rem; color: #5d596c; background: #f8fafd; font-size: .78rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.deal-frame-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .55fr); gap: .75rem; }
.deal-frame-fields label { position: relative; display: grid; gap: .45rem; min-height: auto; color: #5d596c; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.deal-frame-fields label > span { color: #8a94a6; font-size: .78rem; font-weight: 600; }
.deal-frame-fields input { min-height: 2.65rem; margin-top: 0; border: 1px solid #dbdade; border-radius: .375rem; padding: .55rem .875rem; background: #fff; box-shadow: none; }
.deal-frame-box.is-active { border-color: rgba(11, 99, 206, .38); background: #fbfdff; box-shadow: 0 .25rem .85rem rgba(47, 51, 73, .06); }
.deal-frame-box.is-active strong::before { background: var(--opti-primary); box-shadow: 0 0 0 4px rgba(var(--opti-primary-rgb), .12); }
.deal-frame-box.is-locked { opacity: .62; background: #f8f9fb; }
.deal-frame-box.is-locked::after { content: 'Locked'; position: absolute; right: 1rem; top: .9rem; border: 1px solid #d9e1ed; border-radius: 999px; padding: .2rem .55rem; color: #6f6b7d; background: #fff; font-size: .68rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.deal-frame-box.is-locked input { background: #eef1f6; cursor: not-allowed; }
.frame-type-box, .measurement-box, .pd-box, .segment-box { display: grid; gap: .75rem; border: 1px solid #d1d5db; border-radius: .5rem; padding: 1rem; }
.frame-type-box strong, .pd-box strong, .segment-box strong { color: #111827; font-weight: 900; text-transform: uppercase; }
.measurement-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-grid { display: grid; grid-template-columns: 42px 1fr 1fr; gap: .5rem; align-items: center; }
.mini-grid.header { color: #6f6b7d; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.segment-box label { display: grid; grid-template-columns: 24px 1fr; align-items: center; }

.detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.5rem; }
.detail-grid .panel { padding: 1.5rem; }
.detail-grid .panel.wide { grid-column: 1 / -1; padding: 0; }
.detail-grid .panel.wide h2 { padding: 1.5rem 1.5rem 0; }
.job-summary-body { padding: 1.5rem; }
.job-summary-body > .summary-list { margin-top: 0; }
.summary-list { display: grid; grid-template-columns: 150px 1fr; gap: .85rem; margin: 1.25rem 0; }
.summary-list dt { color: #6f6b7d; }
.summary-list dd { margin: 0; font-weight: 600; }
.job-summary-list { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .85rem; }
.job-summary-list > div { display: grid; gap: .3rem; border: 1px solid #e7edf6; border-radius: .5rem; padding: .85rem 1rem; background: #fbfcff; }
.job-summary-list dt { font-size: .82rem; font-weight: 700; }
.job-summary-list dd { color: #2f2b3d; font-size: .98rem; }
.order-full-details { overflow: visible; }
.order-detail-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem; }
.job-summary-body .order-detail-sections { padding: .5rem 0 0; }
.order-detail-sections .detail-fieldset { background: #fff; }
.order-detail-sections .summary-list { margin: 0; grid-template-columns: 145px 1fr; gap: .65rem .85rem; }
.detail-rx-table .detail-rx-value { justify-items: center; color: #5d596c; font-weight: 700; }
.detail-readonly-options .option-tile { opacity: .58; }
.detail-readonly-options .option-tile.is-selected,
.detail-choice-box .is-selected { color: var(--opti-primary); background: rgba(var(--opti-primary-rgb), .08); opacity: 1; }
.detail-readonly-options input,
.detail-choice-box input { accent-color: var(--opti-primary); }
.detail-value-fields output,
.detail-mini-row output {
  min-height: 2.2rem;
  display: grid;
  align-items: center;
  border: 1px solid #dbdade;
  border-radius: .375rem;
  padding: .45rem .65rem;
  color: #5d596c;
  background: #f8fafc;
  font-weight: 700;
}
.detail-choice-box .inline { display: inline-flex; align-items: center; gap: .45rem; color: #5d596c; font-weight: 700; }
.detail-mini-row output { justify-items: center; }
.detail-frame-grid .deal-frame-box.is-locked output { background: #eef1f6; }
.barcode-label-card { display: grid; gap: .75rem; margin: 1rem 0; border: 1px dashed #9ca3af; border-radius: .75rem; padding: 1rem; background: #fff; }
.barcode-label-meta { display: grid; gap: .15rem; text-align: center; }
.barcode-label-meta strong { color: #111827; font-size: 1.15rem; letter-spacing: .08em; }
.barcode-label-meta span { color: #2f2b3d; font-weight: 700; }
.barcode-label-meta small { color: #6f6b7d; }
.barcode-svg { display: block; width: 100%; height: auto; max-height: 92px; }
.tray-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: .75rem; align-items: center; }
.qr-code-img { width: 112px; height: 112px; object-fit: contain; border: 1px solid #dbdade; border-radius: .4rem; padding: .25rem; background: #fff; }
.barcode-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.detail-status-form { display: grid; gap: .9rem; margin: 1.25rem 0; border: 1px solid rgba(var(--opti-primary-rgb), .14); border-radius: .75rem; padding: 1rem; background: #f8fbff; }
.detail-status-form .button { justify-self: start; }
.note-box { display: grid; gap: .75rem; border-radius: .75rem; padding: 1rem; background: #f8f7fa; }
.note-box p { margin: 0; color: #6f6b7d; }
.instruction-form { display: grid; gap: .85rem; }
.instruction-form textarea { min-height: 125px; background: #fff; }
.instruction-form .button { justify-self: start; }
.query-alert-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; margin-bottom: 1.25rem; border: 1px solid rgba(234,84,85,.2); border-left: 4px solid #ea5455; border-radius: .75rem; padding: 1rem 1.25rem; color: #2f2b3d; background: linear-gradient(90deg, rgba(234,84,85,.12), #fff 56%); box-shadow: 0 .1875rem .75rem rgba(234,84,85,.1); }
.query-alert-card:hover { color: #2f2b3d; transform: translateY(-1px); box-shadow: 0 .35rem 1rem rgba(234,84,85,.14); }
.query-alert-icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: .75rem; color: #ea5455; background: rgba(234,84,85,.14); font-size: 1.6rem; }
.query-alert-body { display: grid; gap: .25rem; }
.query-alert-body small { color: #ea5455; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.query-alert-body strong { color: #2f2b3d; font-size: 1.15rem; line-height: 1.2; }
.query-alert-body strong em { display: inline-grid; place-items: center; min-width: 1.8rem; min-height: 1.8rem; margin-left: .35rem; border-radius: 999px; color: #fff; background: #ea5455; font-style: normal; font-size: .9rem; }
.query-alert-body p { margin: 0; color: #5d596c; }
.query-alert-body p span { margin-left: .75rem; color: #ea5455; font-weight: 700; }
.query-alert-body ul { display: grid; gap: .35rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.query-alert-body li { display: flex; justify-content: space-between; gap: .75rem; color: #5d596c; font-size: .9rem; }
.query-alert-body li b { color: #ea5455; white-space: nowrap; }
.query-panel { display: grid; gap: 1rem; }
.query-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.query-panel-heading p { margin: .25rem 0 0; color: #6f6b7d; }
.query-count { display: inline-flex; align-items: center; min-height: 1.7rem; border-radius: 999px; padding: 0 .7rem; color: #ea5455; background: rgba(234,84,85,.12); font-size: .78rem; font-weight: 800; }
.query-thread { display: grid; gap: .65rem; border: 1px solid #dbdade; border-left-width: 4px; border-radius: .75rem; padding: 1rem; background: #fff; }
.query-thread.pending { border-left-color: #ff9f43; background: rgba(255,159,67,.05); }
.query-thread.overdue { border-left-color: #ea5455; background: rgba(234,84,85,.06); }
.query-thread.critical { border-left-color: #b42318; background: rgba(180,35,24,.08); }
.query-thread.resolved { border-left-color: #28c76f; background: rgba(40,199,111,.05); }
.query-thread strong { color: #2f2b3d; }
.query-thread small { display: block; margin-top: .15rem; color: #6f6b7d; }
.query-thread p { margin: 0; color: #5d596c; }
.query-response { border-radius: .5rem; padding: .75rem; background: #f8f7fa; }
.query-response-form, .query-create-form { display: grid; gap: .85rem; border-top: 1px dashed #dbdade; padding-top: 1rem; align-items: start; }
.query-response-form input,
.query-response-form select,
.query-create-form input,
.query-create-form select {
  height: 2.6rem;
  min-height: 2.6rem;
  padding: .45rem .75rem;
  font-size: .92rem;
}
.query-response-form textarea {
  min-height: 5.5rem;
}
.query-response-form .button,
.query-create-form .button {
  align-self: start;
  justify-self: start;
  width: auto;
  height: 2.6rem;
  min-height: 2.6rem;
  padding: 0 1rem;
  line-height: 1;
}
.query-create-form .button.danger {
  border-color: #ea5455 !important;
  background: #ea5455 !important;
  color: #fff !important;
}
.query-report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.query-report-summary article { display: flex; gap: 1rem; align-items: center; border: 1px solid rgba(234,84,85,.14); border-radius: .75rem; padding: 1rem; background: #fff; box-shadow: 0 .1875rem .75rem rgba(75,70,92,.08); }
.query-report-summary span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; color: #ea5455; background: rgba(234,84,85,.12); font-size: 1.35rem; }
.query-report-summary small { color: #6f6b7d; font-weight: 700; }
.query-report-summary strong { display: block; color: #2f2b3d; font-size: 1.8rem; line-height: 1.05; }
.query-row td small { display: block; margin-top: .25rem; color: #6f6b7d; }
.query-row.overdue { background: rgba(234,84,85,.04); }
.query-row.critical { background: rgba(180,35,24,.06); }
.query-badge { display: inline-flex; align-items: center; min-height: 1.55rem; border-radius: 999px; padding: 0 .65rem; color: #ff9f43; background: rgba(255,159,67,.14); font-size: .75rem; font-weight: 800; }
.query-badge.overdue { color: #ea5455; background: rgba(234,84,85,.14); }
.query-badge.critical { color: #b42318; background: rgba(180,35,24,.14); }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 1.5rem; }
.scan-panel { padding: 1.5rem; }
.scan-heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.scan-heading > span { width: 3rem; height: 3rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .75rem; color: var(--opti-primary); background: rgba(var(--opti-primary-rgb), .12); font-size: 1.4rem; }
.scan-heading h2 { margin: 0 0 .25rem; }
.scan-heading p { margin: 0; color: #6f6b7d; }
.scan-form { display: grid; gap: 1rem; }
.scan-form input, .scan-form select { min-height: 3rem; font-size: 1rem; }
.scan-form input[data-scan-input] { border-width: 2px; font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scan-allocation-box { border: 1px dashed rgba(var(--opti-primary-rgb), .28); border-radius: .75rem; padding: 1rem; background: rgba(var(--opti-primary-rgb), .05); }
.scan-department-card { display: grid; grid-template-columns: 48px 1fr; gap: .85rem; align-items: center; border: 1px solid rgba(var(--opti-primary-rgb), .22); border-radius: .5rem; padding: 1rem; background: rgba(var(--opti-primary-rgb), .06); }
.scan-department-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: .5rem; color: var(--opti-primary); background: #fff; font-size: 1.35rem; }
.scan-department-card small { color: #6f6b7d; font-weight: 800; text-transform: uppercase; }
.scan-department-card strong { display: block; color: #2f2b3d; font-size: 1.05rem; }
.scan-department-card p { margin: .2rem 0 0; color: #5d596c; }
.scan-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.usb-scan-button { border-color: #0b63ce; color: #0b63ce; background: rgba(11, 99, 206, .06); }
.usb-scan-button:hover { color: #fff; background: #0b63ce; box-shadow: 0 .125rem .375rem rgba(11, 99, 206, .24); }
.scan-mode-status { display: block; color: #6f6b7d; font-weight: 600; line-height: 1.35; }
.hrm-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; padding: 1.5rem; }
.hrm-grid .module-form { border: 1px solid #dbdade; border-radius: .5rem; padding: 1rem; background: #fff; }
.module-form h3 { margin: 0; color: #2f2b3d; font-size: 1rem; font-weight: 800; }
.hrm-grid .button { justify-self: start; }
.panel-heading .muted { margin: .2rem 0 0; text-align: left; }
.email-token-help { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 1.5rem 0; border: 1px dashed rgba(var(--opti-primary-rgb), .28); border-radius: .5rem; padding: .85rem 1rem; background: rgba(var(--opti-primary-rgb), .05); }
.email-token-help strong { margin-right: .25rem; color: #2f2b3d; }
.email-token-help span { border: 1px solid #d9e1ed; border-radius: .35rem; padding: .2rem .45rem; color: #5d596c; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 700; }
.email-template-list { display: grid; gap: 1rem; padding: 1.5rem; }
.email-template-card { display: grid; gap: 1rem; border: 1px solid #dbdade; border-radius: .5rem; padding: 1rem; background: #fff; }
.email-template-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 1px solid #edf0f5; padding-bottom: .85rem; }
.email-template-head strong { display: block; color: #2f2b3d; font-size: 1rem; }
.email-template-head small { display: block; margin-top: .2rem; color: #6f6b7d; font-weight: 600; }
.email-template-switches { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.camera-scanner { display: grid; gap: .75rem; }
.camera-scanner video { width: 100%; aspect-ratio: 4 / 3; border-radius: .75rem; background: #111827; object-fit: cover; }
.html5-qr-reader { width: 100%; overflow: hidden; border-radius: .75rem; background: #111827; }
.html5-qr-reader video { border-radius: .75rem; }
.html5-qr-reader__scan_region { background: #111827; }
.html5-qr-reader__dashboard_section_csr button { min-height: 2.4rem; border: 1px solid var(--opti-primary); border-radius: .375rem; padding: 0 1rem; color: #fff; background: var(--opti-primary); font-weight: 600; }
.camera-scanner small, .scan-help { color: #6f6b7d; }
.scan-help { border-radius: .75rem; padding: 1rem; background: #f8f7fa; }
.scan-help ul { display: grid; gap: .4rem; margin: .75rem 0 0; padding-left: 1.1rem; }
.timeline { display: grid; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.timeline-panel { align-self: start; height: max-content; }
.timeline li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: .75rem; min-height: 64px; }
.timeline li::before { content: ''; position: absolute; left: 10px; top: 26px; bottom: -10px; border-left: 2px solid #dbdade; }
.timeline li:last-child::before { display: none; }
.timeline span { width: 22px; height: 22px; border: 2px solid #dbdade; border-radius: 50%; background: #fff; }
.timeline .done span { border-color: var(--opti-success); background: var(--opti-success); }
.timeline .current span { border-color: var(--opti-primary); background: var(--opti-primary); }
.timeline small { display: block; color: #6f6b7d; }

.admin-grid, .module-form { display: grid; gap: 1rem; padding: 1.5rem; }
.admin-row { display: grid; grid-template-columns: 1.3fr 220px 1fr 100px; gap: .75rem; align-items: center; border: 1px solid #dbdade; border-radius: .75rem; padding: 1rem; }
.admin-row small { display: block; color: #6f6b7d; }
.module-list { display: grid; }
.notification-feed { max-height: calc(100vh - 245px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--opti-primary-rgb), .45) transparent; }
.notification-feed::-webkit-scrollbar { width: 6px; }
.notification-feed::-webkit-scrollbar-track { background: transparent; }
.notification-feed::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--opti-primary-rgb), .42); }
.notification-feed::-webkit-scrollbar-thumb:hover { background: rgba(var(--opti-primary-rgb), .68); }
.notification-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.notification-actions .module-count { display: grid; gap: .15rem; text-align: right; }
.notification-actions .module-count small { color: #ea3d54; font-size: .78rem; font-weight: 800; }
.notification-select-all { display: inline-flex; grid-auto-flow: column; align-items: center; width: fit-content; gap: .55rem; padding: .85rem 1.5rem; color: #5d596c; font-weight: 700; }
.notification-select-all input,
.notification-check input { width: 1rem; min-height: 1rem; }
.notification-check { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.notification-item.is-unread { background: #f8fbff; }
.notification-item.is-read { opacity: .68; }
.notification-item.is-read .module-icon { color: #8a94a6 !important; background: #edf1f7 !important; }
.unread-dot { display: inline-flex; align-items: center; min-height: 1.25rem; margin-left: .45rem; border-radius: 999px; padding: 0 .5rem; color: #ea3d54; background: rgba(234, 61, 84, .12); font-size: .7rem; font-weight: 800; vertical-align: middle; }
.notification-loader { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.5rem; color: #6f6b7d; border-top: 1px solid #dbdade; font-weight: 600; }
.notification-loader i { color: var(--opti-primary); font-size: 1.2rem; animation: notification-spin .8s linear infinite; }
@keyframes notification-spin { to { transform: rotate(360deg); } }
.module-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid #dbdade; }
.faq-item { display: grid; grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.35rem 1.5rem; border-bottom: 1px solid #dbdade; }
.module-item:last-child, .faq-item:last-child { border-bottom: 0; }
.module-item strong, .faq-item strong { display: block; margin-bottom: .25rem; font-weight: 600; }
.faq-item strong { color: #2f2b3d; line-height: 1.35; }
.faq-item p { line-height: 1.55; }
.module-item p, .faq-item p, .support-card p, .profile-summary p { margin: 0; color: #6f6b7d; }
.module-item small { display: block; margin-top: .25rem; color: #a5a3ae; }
.module-item.notification-item { grid-template-columns: 18px 48px minmax(0, 1fr) auto; }
.module-item.notification-item > div { min-width: 0; }
.module-item.notification-item .icon-button { justify-self: end; white-space: nowrap; }
.module-icon, .profile-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: .75rem; color: var(--opti-primary); background: rgba(115,103,240,.16); font-size: 1.25rem; }
.module-icon.large, .profile-avatar { width: 64px; height: 64px; font-size: 1.75rem; }
.profile-grid, .support-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1.5rem; }
.profile-summary, .support-card { padding: 1.75rem; }
.profile-summary h2, .support-card h2 { margin: 1rem 0 .25rem; }
.profile-summary dl { display: grid; grid-template-columns: 90px 1fr; gap: .85rem; margin: 1.5rem 0 0; }
.profile-summary dt { color: #6f6b7d; }
.profile-summary dd { margin: 0; font-weight: 600; }
.form-divider { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid #dbdade; color: var(--opti-primary); font-weight: 600; }
.support-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.empty-state { padding: 1.75rem 1.5rem; color: #6f6b7d; }
.table-subtext { display: block; margin-top: .25rem; color: #6f6b7d; font-weight: 500; }
.customer-form { max-width: 980px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.module-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid #edf1f7;
  border-radius: .75rem;
  padding: 1.1rem 1.25rem;
  color: inherit !important;
  background: #fff;
  box-shadow: 0 .1875rem .75rem rgba(75,70,92,.08);
}

.module-card:hover {
  border-color: rgba(var(--opti-primary-rgb), .28);
  background: #f8fbff;
}

.module-card > span,
.report-card {
  display: grid;
  place-items: center;
  border-radius: .75rem;
  color: var(--opti-primary);
  background: var(--opti-primary-soft);
}

.module-card > span {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

.module-card strong {
  display: block;
  margin-bottom: .2rem;
  color: #2f2b3d;
}

.module-card small {
  color: #6f6b7d;
}

.report-count {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 999px;
  color: #fff;
  background: var(--opti-primary);
  font-weight: 800;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.report-card {
  align-content: center;
  min-height: 7rem;
  padding: 1rem;
  text-align: center;
}

.report-card small {
  color: #5d596c;
  font-weight: 700;
}

.report-card strong {
  color: #2f2b3d;
  font-size: 2rem;
  line-height: 1.1;
}

@media (max-width: 1199.98px) { .stats-grid, .stats-grid.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .job-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-grid, .profile-grid, .support-grid, .scan-grid, .hrm-grid { grid-template-columns: 1fr; } .report-grid, .query-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .admin-row { grid-template-columns: 1fr; } .panel-heading { align-items: flex-start; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; } .search, .track-form { width: 100%; display: grid; grid-template-columns: 1fr auto; } }
@media (max-width: 767.98px) { .login-card { grid-template-columns: 1fr; } .login-visual { order: -1; min-height: 300px; padding: 2.5rem 1.5rem; } .login-form { padding: 2.5rem 1.5rem; } .stats-grid, .stats-grid.row, .module-grid, .report-grid, .query-report-summary, .order-detail-sections { grid-template-columns: 1fr; } .job-form { grid-template-columns: 1fr; padding: 1rem; } .two-col, .frame-card-grid, .measurement-box { grid-template-columns: 1fr; } .actions { display: grid; grid-template-columns: 1fr; } .summary-list:not(.job-summary-list), .order-detail-sections .summary-list { grid-template-columns: 1fr; } .query-alert-card { grid-template-columns: 48px 1fr; align-items: start; } .query-alert-card > .ti { display: none; } .query-alert-body p span { display: block; margin: .15rem 0 0; } .query-alert-body li { display: grid; } .query-panel-heading { display: grid; } th, td { white-space: nowrap; } }
@media (max-width: 575.98px) { .search, .track-form { grid-template-columns: 1fr; } .module-item { grid-template-columns: 42px 1fr; } .faq-item { grid-template-columns: 1fr; gap: .4rem; padding: 1rem; } .module-item .icon-button { grid-column: 2; justify-self: start; } .support-actions { display: grid; } }
@media (max-width: 767.98px) { .actions.job-actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; } .job-actions-left, .job-actions-right { display: grid; grid-template-columns: 1fr; width: 100%; } .job-actions .button { width: 100%; justify-content: center; white-space: normal; } .job-actions-right .button[name="submit_action"] { min-width: 0; } }
@media (max-width: 575.98px) { .table-status-form { grid-template-columns: 1fr; min-width: 240px; } .detail-status-form .button { width: 100%; } }
@media (max-width: 575.98px) { .notification-actions { align-items: stretch; flex-direction: column; width: 100%; } .notification-actions .module-count { text-align: left; } .notification-actions .button { width: 100%; } .notification-select-all { width: 100%; padding: .85rem 1rem; } .module-item.notification-item { grid-template-columns: 18px 42px minmax(0, 1fr); gap: .75rem; padding: 1rem; } .module-item.notification-item .module-icon { width: 42px; height: 42px; } .module-item.notification-item .icon-button { grid-column: 3; justify-self: start; margin-top: .35rem; } .unread-dot { margin-left: 0; margin-top: .35rem; width: fit-content; } }

@media print {
  body * { visibility: hidden !important; }
  .job-print-area,
  .job-print-area *,
  .barcode-print-area,
  .barcode-print-area * { visibility: visible !important; }
  .job-print-area {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .job-print-area .actions,
  .job-print-area .field-error,
  .job-print-area .field-hint { display: none !important; }
  body.printing-job-form,
  body.printing-job-form .layout-wrapper,
  body.printing-job-form .layout-container,
  body.printing-job-form .layout-page,
  body.printing-job-form .content-wrapper,
  body.printing-job-form .container-xxl {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.printing-job-form aside,
  body.printing-job-form nav,
  body.printing-job-form .layout-navbar,
  body.printing-job-form .content-footer { display: none !important; }
  .job-print-area .job-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.printing-job-form {
    background: #fff !important;
    color: #111827 !important;
    font-size: 10px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.printing-job-form .job-print-area > h2 {
    display: block !important;
    margin: 0 0 .4rem !important;
    padding: 0 0 .45rem !important;
    border-bottom: 2px solid var(--opti-primary) !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  .job-print-area fieldset {
    break-inside: avoid-page;
    page-break-inside: avoid;
    border-color: #9ca3af !important;
    border-radius: .25rem !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.printing-job-form .job-print-area fieldset {
    padding: .65rem !important;
    background: #fff !important;
  }
  body.printing-job-form .job-print-area legend {
    padding: 0 .25rem !important;
    background: #fff !important;
    color: var(--opti-primary) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }
  body.printing-job-form .job-print-area label {
    gap: .25rem !important;
    color: #4b5563 !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
  }
  body.printing-job-form .job-print-area input,
  body.printing-job-form .job-print-area select,
  body.printing-job-form .job-print-area textarea {
    min-height: 1.7rem !important;
    border: 1px solid #9ca3af !important;
    border-radius: .18rem !important;
    padding: .22rem .35rem !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
    font-size: .78rem !important;
  }
  body.printing-job-form .job-print-area textarea {
    min-height: 2.8rem !important;
  }
  body.printing-job-form .job-print-area input[type="radio"],
  body.printing-job-form .job-print-area input[type="checkbox"] {
    width: .72rem !important;
    min-height: .72rem !important;
    padding: 0 !important;
    accent-color: var(--opti-primary);
  }
  .job-print-area .wide,
  .job-print-area .job-card-section,
  .job-print-area .job-card-rx,
  .job-print-area .job-card-options,
  .job-print-area .deal-frame-selector,
  .job-print-area .frame-card-grid,
  .job-print-area .measurement-box {
    break-inside: avoid-page;
    page-break-inside: avoid;
    overflow: visible !important;
  }
  body.printing-job-form .job-card-section > legend + * {
    break-before: avoid-page !important;
    page-break-before: avoid !important;
  }
  body.printing-job-form .job-print-area .wide {
    grid-column: 1 / -1 !important;
  }
  body.printing-job-form .job-card-rx {
    grid-template-columns: 38px repeat(7, minmax(0, 1fr)) !important;
    border-color: #9ca3af !important;
  }
  body.printing-job-form .rx-cell {
    min-height: 1.65rem !important;
    padding: .12rem !important;
    border-color: #9ca3af !important;
  }
  body.printing-job-form .rx-heading {
    font-size: .48rem !important;
    background: #f3f7fd !important;
  }
  body.printing-job-form .rx-eye {
    font-size: .95rem !important;
  }
  body.printing-job-form .rx-cell input {
    min-height: 1.28rem !important;
    border: 0 !important;
    padding: .08rem !important;
    text-align: center !important;
  }
  body.printing-job-form .job-card-options {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    border-color: #9ca3af !important;
  }
  body.printing-job-form .option-group {
    border-color: #9ca3af !important;
  }
  body.printing-job-form .option-group strong {
    min-height: 1.45rem !important;
    padding: .18rem !important;
    background: #f3f7fd !important;
    font-size: .43rem !important;
    line-height: 1.1 !important;
  }
  body.printing-job-form .option-tile {
    min-height: 1.35rem !important;
    gap: .2rem !important;
    padding: .14rem .18rem !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    font-size: .48rem !important;
    line-height: 1.05 !important;
  }
  body.printing-job-form .frame-card-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: .45rem !important;
  }
  body.printing-job-form .deal-frame-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .45rem !important;
  }
  body.printing-job-form .deal-frame-box,
  body.printing-job-form .frame-type-box,
  body.printing-job-form .measurement-box,
  body.printing-job-form .pd-box,
  body.printing-job-form .segment-box {
    border-color: #9ca3af !important;
    border-radius: .22rem !important;
    padding: .45rem !important;
    gap: .3rem !important;
    background: #fff !important;
  }
  body.printing-job-form .frame-type-box {
    grid-column: span 4 !important;
  }
  body.printing-job-form .measurement-box {
    grid-column: span 4 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.printing-job-form .pd-box,
  body.printing-job-form .segment-box {
    grid-column: span 2 !important;
  }
  body.printing-job-form .deal-frame-box strong,
  body.printing-job-form .frame-type-box strong,
  body.printing-job-form .measurement-box strong,
  body.printing-job-form .pd-box strong,
  body.printing-job-form .segment-box strong {
    font-size: .58rem !important;
  }
  body.printing-job-form .deal-frame-box p {
    min-height: auto !important;
    padding: .25rem !important;
    background: #f8fafc !important;
    font-size: .48rem !important;
    line-height: 1.18 !important;
  }
  body.printing-job-form .deal-frame-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, .55fr) !important;
    gap: .35rem !important;
  }
  body.printing-job-form .mini-grid {
    grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: .22rem !important;
  }
  body.printing-job-form .mini-grid.header {
    font-size: .44rem !important;
    line-height: 1 !important;
  }
  body.printing-job-form .mini-grid input,
  body.printing-job-form .segment-box input {
    min-height: 1.45rem !important;
    font-size: .68rem !important;
  }
  body.printing-job-form .required-inline-hint,
  body.printing-job-form .swal2-container {
    display: none !important;
  }
  .barcode-print-area {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 76mm !important;
    min-height: 42mm !important;
    margin: 0 !important;
    border: 1px solid #111827 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    page-break-after: avoid;
  }
}

/* OptiLens blue Vuexy theme override */
:root {
  --opti-primary: #0b63ce;
  --opti-primary-rgb: 11, 99, 206;
  --opti-primary-dark: #084f9e;
  --opti-primary-soft: rgba(11, 99, 206, 0.14);
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.open > .menu-link,
.layout-menu .menu-inner > .menu-item.active:before {
  background: linear-gradient(90deg, var(--opti-primary), #0b74de) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i,
.bg-menu-theme .menu-inner > .menu-item.open > .menu-link i {
  color: #fff !important;
}

.brand.big,
.app-brand-text,
a,
.stat a,
.icon-button,
legend,
.form-divider,
.logout-menu-button:hover {
  color: var(--opti-primary) !important;
}

.button.primary,
.btn-primary,
.page-item.active .page-link {
  background-color: var(--opti-primary) !important;
  border-color: var(--opti-primary) !important;
  color: #fff !important;
  box-shadow: 0 .125rem .375rem rgba(var(--opti-primary-rgb), .28) !important;
}

.button.primary:hover,
.btn-primary:hover {
  background-color: var(--opti-primary-dark) !important;
  border-color: var(--opti-primary-dark) !important;
}

.button,
.icon-button {
  border-color: var(--opti-primary) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--opti-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--opti-primary-rgb), .14) !important;
}

.badge.bg-danger,
.nav-badge {
  background-color: #ea3d54 !important;
}

.avatar,
.module-icon,
.profile-avatar,
.stat span {
  color: var(--opti-primary) !important;
  background: var(--opti-primary-soft) !important;
}

.stat.amber span,
.stat.green span,
.stat.violet span {
  color: var(--opti-primary) !important;
  background: var(--opti-primary-soft) !important;
}

.stat,
.stat.amber,
.stat.green,
.stat.violet {
  border-color: rgba(var(--opti-primary-rgb), .16) !important;
}

.status-quality-check,
.status-order-received,
.status-prescription-verified {
  color: var(--opti-primary) !important;
  background: var(--opti-primary-soft) !important;
}

.navbar-detached {
  border-top: 3px solid rgba(var(--opti-primary-rgb), .75);
}

/* Header and icon visibility fix */
.stat span i,
.stat span .ti,
.stat span .bi {
  display: inline-block !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.stat span {
  background: rgba(11, 99, 206, .12) !important;
  border-radius: 14px !important;
}

.layout-navbar.navbar-detached {
  min-height: 72px;
  border: 1px solid rgba(11, 99, 206, .12) !important;
  border-top: 4px solid var(--opti-primary) !important;
  border-radius: 10px !important;
  box-shadow: 0 .35rem 1rem rgba(75, 70, 92, .08) !important;
  padding: 0 1rem !important;
}

.navbar-search-wrapper h5 {
  color: #2f2b3d;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.layout-menu-toggle .nav-link,
.navbar .btn-icon {
  color: var(--opti-primary) !important;
}

.navbar .avatar.avatar-online img {
  border: 3px solid rgba(11, 99, 206, .18);
  box-shadow: 0 .25rem .8rem rgba(11, 99, 206, .18);
}

@media (max-width: 767.98px) {
  .layout-navbar.navbar-detached {
    margin: .75rem .5rem 1.5rem !important;
    width: calc(100% - 1rem) !important;
    min-height: 64px;
    border-radius: 8px !important;
  }

  .container-xxl.flex-grow-1.container-p-y {
    padding-top: .25rem !important;
  }

  .navbar-search-wrapper h5 {
    font-size: 1.15rem;
  }

  .stats-grid,
  .stats-grid.row {
    gap: 1rem;
  }

  .stat {
    min-height: 118px;
    align-items: center;
    border-radius: .85rem;
  }

  .stat span {
    width: 3.25rem;
    height: 3.25rem;
  }
}

/* DataTables polish */
.table-wrap .dataTables_wrapper,
.table-responsive .dataTables_wrapper {
  width: 100%;
}

.table-wrap table.dataTable,
.table-responsive table.dataTable {
  width: 100% !important;
}

.datatable-toolbar,
.datatable-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
  margin: 0;
  background: #fff;
}

.datatable-toolbar {
  border-bottom: 1px solid #eef2f7;
}

.datatable-footer {
  border-top: 1px solid #eef2f7;
}

.datatable-toolbar .dataTables_length,
.datatable-toolbar .dataTables_filter,
.datatable-footer .dataTables_info,
.datatable-footer .dataTables_paginate {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: #667085;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_info {
  color: #8a94a6;
  font-size: 0.9rem;
  font-weight: 600;
  padding-top: 0 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 2.35rem;
  border: 1px solid #d9e3f2;
  border-radius: 0.55rem;
  background-color: #fff;
  color: #2f3349;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_length select {
  width: 4.75rem !important;
  min-width: 4.75rem;
  margin: 0 !important;
  padding: 0.35rem 1.75rem 0.35rem 0.75rem;
}

.dataTables_wrapper .dataTables_filter input {
  width: 15rem;
  margin: 0 !important;
  padding: 0.48rem 0.85rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.12);
}

.table.dataTable {
  margin: 0 !important;
  border-collapse: collapse !important;
}

.table.dataTable > thead > tr > th,
.table.dataTable > thead > tr > td {
  border-bottom: 1px solid #e8edf5;
  background: #fbfcfe;
  color: #4b587c;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 1rem 1.35rem;
}

.table.dataTable > tbody > tr > td {
  border-color: #edf1f6;
  padding: 1rem 1.35rem;
  vertical-align: middle;
}

.table.dataTable > tbody > tr:hover > * {
  background-color: #f7fbff;
}

.dataTables_wrapper .pagination {
  gap: 0.25rem;
  margin: 0;
}

.dataTables_wrapper .page-link {
  border: 0;
  border-radius: 0.5rem;
  color: #0d6efd;
  font-weight: 700;
  min-width: 2.15rem;
  text-align: center;
  box-shadow: none;
}

.dataTables_wrapper .page-item.active .page-link {
  background: #0d6efd;
  box-shadow: 0 0.35rem 0.8rem rgba(13, 110, 253, 0.24);
  color: #fff;
}

@media (max-width: 767.98px) {
  .datatable-toolbar,
  .datatable-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
    white-space: normal;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100% !important;
  }

  .datatable-footer .pagination {
    justify-content: flex-start;
  }
}
/* Track job redesign */
.track-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

.track-hero-copy,
.track-search-card,
.track-result-banner,
.track-alert {
  border: 1px solid rgba(var(--opti-primary-rgb), .1);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .25rem 1rem rgba(75, 70, 92, .08);
}

.track-hero-copy {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  color: #fff;
  background: linear-gradient(135deg, #084f9e 0%, #0b63ce 58%, #0a8be8 100%);
}

.track-hero-copy::after {
  content: '';
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 18rem;
  height: 18rem;
  border: 2.5rem solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}

.track-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .9rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.track-hero-copy h2,
.track-result-banner h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(1.65rem, 2.4vw, 2.5rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}

.track-hero-copy p,
.track-result-banner p,
.compact-heading p,
.track-alert p {
  margin: .65rem 0 0;
  color: inherit;
  opacity: .78;
}

.track-search-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem;
}

.track-search-card label {
  margin-bottom: .65rem;
  color: #2f3349;
  font-size: 1rem;
  font-weight: 800;
}

.track-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
}

.track-input-wrap {
  position: relative;
}

.track-input-wrap i {
  position: absolute;
  left: .95rem;
  top: 50%;
  color: var(--opti-primary);
  font-size: 1.2rem;
  transform: translateY(-50%);
}

.track-input-wrap input {
  min-height: 3.25rem;
  border-radius: .75rem;
  padding-left: 2.75rem;
  font-weight: 600;
}

.track-search-row .button {
  min-height: 3.25rem;
  border-radius: .75rem;
  padding: 0 1.35rem;
}

.track-search-card small {
  margin-top: .85rem;
  color: #7f8797;
  font-weight: 600;
}

.track-alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-color: rgba(234, 61, 84, .18);
  background: #fff7f8;
}

.track-alert span,
.track-card-icon,
.track-recent-item > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
  color: var(--opti-primary);
  background: var(--opti-primary-soft);
  font-size: 1.35rem;
}

.track-alert span {
  color: #ea3d54;
  background: rgba(234, 61, 84, .14);
}

.track-alert strong {
  color: #2f3349;
  font-size: 1rem;
}

.track-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 1.5rem;
}

.track-help-card,
.track-recent-card {
  padding: 1.5rem;
}

.track-help-card h2 {
  margin-top: 1rem;
  padding: 0;
}

.track-stage-list {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}

.track-stage-list span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border: 1px solid #e7edf6;
  border-radius: .75rem;
  padding: 0 1rem 0 2.5rem;
  color: #4b587c;
  font-weight: 700;
  background: #fbfcfe;
}

.track-stage-list span::before {
  content: '';
  position: absolute;
  left: 1rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--opti-primary);
  box-shadow: 0 0 0 .3rem rgba(var(--opti-primary-rgb), .12);
}

.track-recent-card {
  padding: 0;
}

.compact-heading {
  min-height: auto;
  padding: 1.25rem 1.5rem;
}

.compact-heading p {
  color: #7f8797;
  font-size: .9rem;
}

.track-recent-list {
  display: grid;
}

.track-recent-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eef2f7;
  color: inherit !important;
}

.track-recent-item:hover {
  background: #f7fbff;
}

.track-recent-item strong {
  display: block;
  color: #2f3349;
  font-weight: 800;
}

.track-recent-item small {
  display: block;
  margin-top: .2rem;
  color: #7f8797;
  font-weight: 600;
}

.track-recent-item em {
  font-style: normal;
  white-space: nowrap;
}

.track-result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(11, 99, 206, .08), #fff 45%);
}

.track-result-banner .track-kicker {
  color: var(--opti-primary);
}

.track-result-banner h2 {
  color: #2f3349;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.track-result-banner p {
  color: #6f7890;
}

@media (max-width: 1199.98px) {
  .track-hero,
  .track-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .track-hero-copy,
  .track-search-card,
  .track-help-card,
  .track-result-banner {
    padding: 1.25rem;
    border-radius: .85rem;
  }

  .track-search-row,
  .track-recent-item,
  .track-result-banner {
    grid-template-columns: 1fr;
  }

  .track-result-banner {
    display: grid;
  }

  .track-recent-item em {
    justify-self: start;
  }
}
/* Professional top header */
.layout-navbar.navbar-detached.opti-topbar {
  min-height: 82px;
  border: 1px solid rgba(var(--opti-primary-rgb), .12) !important;
  border-top: 0 !important;
  border-radius: 1rem !important;
  padding: .85rem 1rem .85rem 1.15rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
    linear-gradient(90deg, rgba(var(--opti-primary-rgb), .18), rgba(var(--opti-primary-rgb), 0));
  box-shadow: 0 .45rem 1.25rem rgba(75, 70, 92, .09) !important;
  overflow: visible;
}

.layout-navbar.navbar-detached.opti-topbar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #0b63ce, #0a8be8);
  pointer-events: none;
}

.opti-topbar .dropdown-menu {
  z-index: 1100;
}

.opti-topbar .navbar-nav-right {
  width: 100%;
  gap: 1rem;
}

.topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}

.topbar-title-icon,
.topbar-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(var(--opti-primary-rgb), .14);
  border-radius: .85rem;
  color: var(--opti-primary) !important;
  background: rgba(var(--opti-primary-rgb), .08);
  font-size: 1.25rem;
}

.topbar-title-text {
  min-width: 0;
}

.topbar-title-text span {
  display: block;
  margin-bottom: .15rem;
  color: #7f8797;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.topbar-title-text h5 {
  margin: 0;
  color: #24283b;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.topbar-actions {
  gap: .75rem;
}

.topbar-icon {
  position: relative;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.topbar-icon:hover,
.topbar-user:hover {
  background: rgba(var(--opti-primary-rgb), .12);
  box-shadow: 0 .35rem .9rem rgba(var(--opti-primary-rgb), .12);
  transform: translateY(-1px);
}

.notification-dot span {
  position: absolute;
  top: .42rem;
  right: .42rem;
  width: .55rem;
  height: .55rem;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  color: transparent;
  background: #ea3d54;
}

.topbar-user {
  display: inline-flex !important;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  border: 1px solid rgba(var(--opti-primary-rgb), .12);
  border-radius: 1rem;
  padding: .35rem .5rem .35rem .85rem !important;
  color: #2f3349 !important;
  background: rgba(var(--opti-primary-rgb), .05);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.topbar-user-text {
  display: grid;
  text-align: right;
}

.topbar-user-text strong {
  color: #2f3349;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.1;
}

.topbar-user-text small {
  color: #7f8797;
  font-size: .72rem;
  font-weight: 700;
}

.topbar-user .avatar {
  width: 2.35rem;
  height: 2.35rem;
}

.topbar-user > .ti-chevron-down {
  color: #7f8797;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  .layout-navbar.navbar-detached.opti-topbar {
    min-height: 70px;
    margin: .75rem .5rem 1.25rem !important;
    padding: .7rem !important;
  }

  .topbar-title-icon {
    display: none;
  }

  .layout-menu-toggle.navbar-nav {
    margin-right: .75rem;
  }

  .topbar-title-text span {
    font-size: .7rem;
  }

  .topbar-title-text h5 {
    font-size: 1.15rem;
  }

  .topbar-user {
    border: 0;
    padding: .2rem !important;
    background: transparent;
  }

  .topbar-user-text,
  .topbar-user > .ti-chevron-down {
    display: none;
  }

  .topbar-icon {
    width: 2.45rem;
    height: 2.45rem;
  }
}
/* Initials avatar and clickable user menu */
.avatar.avatar-initial {
  display: inline-grid !important;
  place-items: center;
  border: 2px solid rgba(var(--opti-primary-rgb), .18);
  border-radius: 50%;
  color: #fff !important;
  background: linear-gradient(135deg, #0b63ce, #0a8be8) !important;
  box-shadow: 0 .25rem .8rem rgba(var(--opti-primary-rgb), .18);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.topbar-user {
  border: 1px solid rgba(var(--opti-primary-rgb), .12) !important;
  cursor: pointer;
  font-family: inherit;
}

.topbar-user:focus,
.topbar-user:focus-visible {
  outline: 0;
  border-color: rgba(var(--opti-primary-rgb), .4) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--opti-primary-rgb), .14) !important;
}

.dropdown-menu .avatar.avatar-initial {
  width: 2.25rem;
  height: 2.25rem;
  font-size: .78rem;
}

.footer-link {
  color: #111827 !important;
}

.login-form {
  line-height: 1.35;
}

.login-form h1 {
  margin-bottom: .35rem;
}

.login-form .muted {
  margin-bottom: .35rem;
  line-height: 1.35;
}

.login-form .brand.big {
  margin-bottom: .35rem;
  line-height: 1;
}

.login-form .login-brand-logo {
  width: min(235px, 100%);
}

.login-form .stack {
  gap: .8rem;
  margin-top: 1.15rem;
}

.login-form label {
  gap: .35rem;
}

.login-form input {
  min-height: 2.35rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

.login-form .form-row {
  margin-top: .1rem;
}

.login-form .button {
  min-height: 2.45rem;
  margin-top: .15rem;
}

.login-form .help {
  margin: .25rem 0 0;
  line-height: 1.28;
}

/* Optical job card polish */
.job-card-section {
  padding: 1rem;
}

.job-card-priority-panel {
  align-content: start;
  min-height: 100%;
}

.job-card-priority-panel label {
  margin-bottom: .75rem;
}

.job-card-priority-panel label:last-child {
  margin-bottom: 0;
}

.job-card-section legend {
  color: #111827;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.job-card-section input,
.job-card-section select {
  min-height: 2.05rem;
  border-color: #cfd6e3;
  border-radius: .25rem;
  padding: .35rem .55rem;
  font-size: .86rem;
  font-weight: 600;
}

.job-card-section input::placeholder {
  color: #8a94a6;
  opacity: 1;
}

.job-card-section input.is-required-empty {
  border-color: #ea5455 !important;
  background: #fff7f8;
  color: #2f3349;
  box-shadow: inset 0 0 0 1px rgba(234, 84, 85, .18) !important;
}

.job-card-section input.is-required-empty::placeholder {
  color: #ea5455;
  font-weight: 800;
  opacity: 1;
}

.rx-cell.has-required-empty {
  background: #fff7f8;
}

.option-tile.has-required-empty {
  color: #ea5455;
  background: #fff7f8;
}

.frame-card-grid label.has-required-empty,
.deal-frame-fields label.has-required-empty {
  color: #ea5455;
}

.rx-cell,
.frame-card-grid > label,
.deal-frame-fields label {
  position: relative;
}

.required-inline-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  color: #ea5455;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.frame-card-grid > label .required-inline-hint,
.deal-frame-fields label .required-inline-hint {
  left: .6rem;
  right: .6rem;
  top: auto;
  bottom: .55rem;
  transform: none;
  text-align: left;
}

.job-card-is-blocked {
  position: relative;
}

.job-card-required-focus-wrap,
.job-card-required-focus {
  position: relative;
  z-index: 1105 !important;
}

.job-card-required-focus-wrap {
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(234, 84, 85, .18);
}

.job-card-required-focus {
  background: #fff !important;
  border-color: #ea5455 !important;
  box-shadow: 0 0 0 3px rgba(234, 84, 85, .2) !important;
}

.job-card-is-blocked [data-reset-job-form] {
  position: relative;
  z-index: 1105 !important;
  background: #fff;
}

.swal2-container {
  z-index: 1200 !important;
}

.job-card-block-message {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(234, 84, 85, .35);
  border-radius: .375rem;
  background: #fff;
  color: #b42325;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 .35rem 1rem rgba(47, 51, 73, .12);
}

.job-card-block-message .ti {
  font-size: 1.05rem;
}

.job-card-rx {
  grid-template-columns: 56px repeat(7, minmax(72px, 1fr));
  width: 100%;
}

.rx-cell {
  min-height: 2.35rem;
  padding: .15rem;
}

.rx-cell input {
  min-height: 1.95rem;
  padding: .2rem .35rem;
  font-size: .84rem;
}

.rx-heading {
  font-size: .68rem;
}

.rx-eye {
  font-size: 1.25rem;
}

.job-card-options {
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  width: 100%;
}

.option-group strong {
  min-height: 2rem;
  font-size: .66rem;
  line-height: 1.15;
}

.option-tile {
  min-height: 2.05rem;
  padding: .35rem .45rem;
  font-size: .72rem;
}

.option-tile input {
  width: .85rem;
  min-height: .85rem;
}

.frame-card-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .85rem;
}

.frame-card-grid > label:nth-child(1),
.frame-card-grid > label:nth-child(2) {
  grid-column: span 3;
}

.frame-type-box,
.measurement-box,
.pd-box,
.segment-box {
  border-radius: .4rem;
  padding: .85rem;
}

.frame-type-box {
  grid-column: span 2;
}

.measurement-box {
  grid-column: span 2;
}

.pd-box {
  grid-column: span 1;
}

.segment-box {
  grid-column: span 1;
}

.mini-grid {
  grid-template-columns: 28px 1fr 1fr;
  gap: .35rem;
}

.mini-grid input,
.segment-box input {
  min-height: 1.9rem;
}

@media (max-width: 1199.98px) {
  .job-card-options,
  .job-card-rx {
    overflow-x: auto;
  }

  .job-card-options {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .frame-card-grid,
  .deal-frame-selector,
  .frame-card-grid > label:nth-child(1),
  .frame-card-grid > label:nth-child(2),
  .frame-type-box,
  .measurement-box,
  .pd-box,
  .segment-box {
    grid-column: 1 / -1;
  }

  .deal-frame-selector {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .deal-frame-fields {
    grid-template-columns: 1fr;
  }

  .tray-code-row {
    grid-template-columns: 1fr;
  }

  .qr-code-img {
    justify-self: center;
  }
}

.opti-toast-stack {
  z-index: 1200;
}

.opti-toast {
  width: min(360px, calc(100vw - 2rem));
  border: 0;
  border-radius: .75rem;
  overflow: hidden;
  color: #2f3349;
  background: #fff;
  box-shadow: 0 .65rem 1.5rem rgba(75, 70, 92, .18);
}

.opti-toast .toast-body {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: 1rem;
}

.toast-status-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .65rem;
  font-size: 1.25rem;
}

.opti-toast p {
  margin: .15rem 0 0;
  color: #6f6b7d;
}

.opti-toast.is-success {
  border-left: 4px solid #28c76f;
}

.opti-toast.is-success .toast-status-icon {
  color: #28c76f;
  background: rgba(40, 199, 111, .14);
}

.opti-toast.is-error {
  border-left: 4px solid #ea3d54;
}

.opti-toast.is-error .toast-status-icon {
  color: #ea3d54;
  background: rgba(234, 61, 84, .14);
}