@font-face {
  font-family: Tajawal;
  src: url("Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Tajawal;
  src: url("Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --commit: #157347;
  --purple: #5b276e;
  --deep: #31173f;
  --red: #bd334f;
  --paper: #f6f5f8;
  --ink: #2a2432;
  --muted: #706478;
  --line: #ebe6ef;
}
.operation-tabs { display:flex; gap:16px; margin-block:0 26px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.operation-tabs a { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:10px; font-weight:700; min-height:50px; }
.operation-tabs a.selected { background:#efe5f4; color:#51276b; box-shadow:inset 0 -3px #6b3880; }
.operation-tabs svg { width:20px; height:20px; }
#shipment-form > .form-actions,#production-form > .form-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-block:26px 12px; }
#shipment-form [data-cancel],#production-form [data-cancel] { margin-inline-start:auto; background:#f1f2f4; color:#514e58; }
.draft-actions { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; }
.draft-actions button { background:#fff; color:#5b276e; border:1px solid #c6b4ce; }
.draft-actions .fine { margin:10px 0 0; max-width:650px; }
@media(max-width:600px) { .operation-tabs { gap:8px; } .operation-tabs a { flex:1; padding:12px 8px; font-size:14px; } .draft-actions button { width:100%; } }

/* Consistent action hierarchy: navigation purple, committed actions green. */
main button.action-commit { background: var(--commit); color: #fff; box-shadow: 0 3px 8px #15734720; }
main button.action-commit:hover { background: #105c38; }
main button.action-danger { background: #b4233a; color: #fff; }
main button.action-danger:hover { background: #8f1c2e; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid #9766af; outline-offset: 4px; }
main button,main a.button { min-height: 44px; }
main button[aria-disabled="true"] { cursor: wait; opacity: .8; }
button.is-saving::before { content: ''; display: inline-block; width: 17px; height: 17px; margin-inline-end: 9px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; animation: operation-spin .8s linear infinite; vertical-align: middle; }
@keyframes operation-spin { to { transform: rotate(360deg); } }
.operation-pending { padding: 13px 16px; margin-block: 12px; border-radius: 10px; background: #edf4ff; color: #204b7a; border: 1px solid #b8d3ef; font-weight: 700; }
.operation-pending.is-delayed { background: #fff7e8; color: #784b0c; border-color: #e6c893; }
#operation-result { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid #90c8a9; border-inline-start: 6px solid var(--commit); background: #edf9f2; color: #145535; box-shadow: 0 6px 22px #1455350c; scroll-margin-block-start: 20px; }
#operation-result strong { font-size: 21px; }
#operation-result p { margin: 5px 0; font-size: 17px; }
#operation-result small { color: #356348; }
.operation-result-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; color: white; background: var(--commit); font-size: 23px; }
.workday-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.workday-heading h2,.workday-heading p { margin: 0; }
.workday-heading p { color: var(--muted); font-size: 14px; }
.workday-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.workday-action { display: flex; align-items: center; gap: 10px; min-height: 96px; padding: 16px 12px; border: 1px solid #e5d9eb; border-radius: 14px; background: #fcfaff; transition: background .15s,box-shadow .15s; }
.workday-action:hover { background: #f2eaf7; box-shadow: 0 4px 12px #51276b10; }
.workday-action strong { display: block; font-size: 16px; }
.workday-action small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.workday-icon { display: grid; place-items: center; border-radius: 11px; background: #ede2f3; width: 37px; height: 40px; flex-shrink: 0; }
.workday-icon svg { width: 22px; height: 22px; }
.workday-arrow { margin-inline-start: auto; }
@media(max-width:600px) { .workday-actions { grid-template-columns: 1fr; } .workday-action { min-height: 70px; } #operation-result { padding: 16px; gap: 10px; } #operation-result strong { font-size: 18px; } .workday-heading { display: block; } }
@media(prefers-reduced-motion:reduce) { button.is-saving::before { animation: none; } .workday-action { transition: none; } }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Tajawal, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
a {
  color: var(--purple);
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.button {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  font-weight: 700;
  display: inline-block;
}
button:hover,
.button:hover {
  filter: brightness(0.94);
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #ca91de;
  outline-offset: 3px;
}
.primary {
  background: var(--purple);
  color: white;
}
.secondary {
  background: #f0eaf4;
  color: var(--purple);
}
.white {
  background: white;
  color: var(--purple);
}
input,
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #ddd5e3;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  min-height: 47px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #bd9bd0;
  outline-offset: 1px;
}
input[inputmode="decimal"],
input[type="date"] {
  direction: ltr;
  text-align: right;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}
label input,
label select,
label textarea {
  display: block;
  margin-top: 7px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 8px;
}
h2 {
  font-size: 23px;
  margin-bottom: 14px;
}
h3 {
  font-size: 18px;
  margin-top: 24px;
}
.muted,
.fine {
  color: var(--muted);
}
.fine {
  font-size: 13px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 1.7px;
  display: block;
  color: #9676a2;
  font-weight: 700;
  margin-bottom: 12px;
}
.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 245px;
  background: #fff;
  border-left: 1px solid var(--line);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 9px 30px;
  font-weight: 700;
  color: var(--ink);
}
.brand img {
  width: 60px;
  height: 56px;
  object-fit: contain;
}
.brand small {
  display: block;
  letter-spacing: 2px;
  font-size: 10px;
  color: var(--muted);
}
.nav-label {
  font-size: 12px;
  color: #a396ab;
  padding: 0 13px 12px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar nav a {
  display: flex;
  gap: 13px;
  align-items: center;
  color: #6c6075;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 15px;
}
.sidebar nav a:hover {
  background: #f8f4fa;
}
.sidebar nav a.active {
  color: var(--purple);
  background: #f0e8f5;
  font-weight: 700;
}
.nav-icon {
  font-family: Arial;
  font-size: 19px;
  width: 24px;
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 22px 8px 0;
  color: var(--muted);
  font-size: 12px;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #269679;
  border-radius: 50%;
  margin-left: 6px;
}
.logout {
  background: none;
  color: var(--red);
  padding: 10px 0;
}
.workspace {
  margin-right: 245px;
}
.topbar {
  height: 78px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  font-size: 14px;
}
.slash {
  margin: 0 15px;
  color: #ccc;
}
.pill {
  display: inline-block;
  background: #f2edf5;
  color: #70527e;
  border: 1px solid #e6dceb;
  border-radius: 20px;
  padding: 3px 12px;
  white-space: nowrap;
  font-size: 12px;
}
.content {
  max-width: 1400px;
  margin: auto;
  padding: 35px 42px;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
.page-title p {
  margin-bottom: 0;
  font-size: 14px;
}
.date {
  color: var(--muted);
  font-size: 14px;
  direction: ltr;
}
.welcome {
  background: linear-gradient(110deg, #4b235e, #762d80);
  border-radius: 16px;
  padding: 34px 38px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  overflow: hidden;
}
.welcome h2 {
  font-size: 32px;
  line-height: 1.45;
}
.welcome p {
  color: #e5cfe9;
  font-size: 15px;
}
.welcome .eyebrow {
  color: #d6b4df;
}
.welcome-mark {
  font-family: Georgia, serif;
  font-size: 155px;
  line-height: 1;
  color: #b78ac8;
  opacity: 0.5;
  text-align: center;
  padding: 0 40px;
}
.welcome-mark span {
  display: block;
  font: 700 24px Tajawal;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  color: var(--ink);
}
.stat span {
  font-size: 14px;
  color: var(--muted);
}
.stat strong {
  font-size: 36px;
  line-height: 1.4;
  margin: 9px 0;
  color: var(--purple);
}
.stat small {
  font-size: 12px;
  color: var(--muted);
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 25px;
  margin-bottom: 24px;
  min-width: 0;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.panel-heading h2 {
  margin: 0;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.quick-links a {
  padding: 16px;
  border-right: 3px solid #c04665;
  background: #fcf9fc;
}
.quick-links b,
.quick-links span {
  display: block;
}
.quick-links span {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.table-wrap {
  overflow: auto;
  width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 14px;
}
th {
  font-weight: 400;
  color: var(--muted);
  background: #faf8fb;
  white-space: nowrap;
}
td,
th {
  padding: 16px 14px;
  border-bottom: 1px solid #f0ecf3;
}
tbody tr:hover {
  background: #fcfaff;
}
.row-link {
  font-weight: 700;
}
.empty {
  padding: 50px;
  text-align: center;
  color: var(--muted);
}
.search {
  display: flex;
  gap: 9px;
  width: min(430px, 80%);
}
.count {
  font-size: 14px;
  color: var(--muted);
}
.pagination {
  display: flex;
  gap: 8px;
  padding-top: 18px;
}
.pagination a {
  padding: 3px 12px;
  border-radius: 6px;
}
.pagination .selected {
  background: #f0e8f5;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 20px;
  gap: 18px;
}
.pairs div {
  padding: 14px 18px;
  background: #faf8fb;
  border-radius: 8px;
}
.pairs dt {
  color: var(--muted);
  font-size: 13px;
}
.pairs dd {
  margin: 8px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 14px;
}
details {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: 18px;
}
summary {
  cursor: pointer;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 15px;
}
.alert {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 22px;
}
.error {
  background: #fff0f2;
  color: #9c2943;
}
.success {
  background: #e9f6ef;
  color: #20714b;
}
.warning {
  background: #fff7e8;
  color: #946313;
}
footer {
  color: #a398ac;
  font-size: 12px;
  margin: 30px 0;
}
.json {
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  max-height: 550px;
  overflow: auto;
}
.login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.login-brand {
  background: linear-gradient(135deg, #351d45, #70317b);
  color: white;
  padding: 12vh 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.login-brand img {
  width: 180px;
  height: 120px;
  object-fit: contain;
  background: white;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 35px;
}
.login-brand h1 {
  font-size: 42px;
  line-height: 1.5;
}
.login-brand p {
  color: #dbcae1;
}
.environment {
  border: 1px solid #9365a0;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 13px;
  margin-top: 30px;
}
.login-form {
  padding: 12vh 14%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}
.login-form h2 {
  font-size: 30px;
}
.login-form button {
  width: 100%;
}
.divider {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin: 22px 0;
}
.login-form .fine {
  margin-top: 22px;
}
textarea {
  min-height: 85px;
}
@media (max-width: 1150px) {
  .content {
    padding: 28px;
  }
  .topbar {
    padding: 0 28px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome-mark {
    font-size: 120px;
    padding: 0 12px;
  }
  .pairs {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-links {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    padding: 0 0 10px;
  }
  .brand img {
    width: 45px;
    height: 36px;
  }
  .sidebar nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }
  .sidebar nav a {
    white-space: nowrap;
    padding: 8px 12px;
  }
  .nav-label,
  .nav-icon,
  .sidebar-bottom {
    display: none;
  }
  .workspace {
    margin: 0;
  }
  .topbar {
    height: 56px;
    padding: 0 18px;
  }
  .content {
    padding: 22px 16px;
  }
  .page-title .date {
    display: none;
  }
  .page-title {
    margin-bottom: 20px;
  }
  h1 {
    font-size: 27px;
  }
  .welcome {
    padding: 26px;
  }
  .welcome h2 {
    font-size: 26px;
  }
  .welcome-mark {
    display: none;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 15px;
  }
  .stat strong {
    font-size: 30px;
  }
  .panel {
    padding: 18px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .pairs div {
    padding: 12px;
  }
  .search {
    width: 100%;
  }
  .panel-heading {
    flex-wrap: wrap;
  }
  td,
  th {
    padding: 13px 9px;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .login-brand {
    padding: 30px;
  }
  .login-brand img {
    width: 115px;
    height: 75px;
    margin-bottom: 18px;
  }
  .login-brand h1 {
    font-size: 27px;
  }
  .login-brand p,
  .login-brand .environment {
    display: none;
  }
  .login-form {
    padding: 30px;
  }
  .login-form h2 {
    font-size: 25px;
  }
}

@media (max-width:760px) {
  .sidebar { position: relative; }
  .sidebar-bottom { display:block; position:absolute; left:16px; top:14px; border:0; padding:0; margin:0; font-size:0; }
  .sidebar-bottom .dot { display:none; }
  .sidebar-bottom form { font-size:12px; }
}
.field-error{display:block;color:#b42318;font-size:14px;margin-top:6px}[aria-invalid=true]{border-color:#b42318!important}.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}input[inputmode=decimal],input[data-format=date]{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}.audit-table{margin-top:24px}

/* Home layout: right navigation, Arabic content flow. */
.sidebar {right:0;left:auto;border-right:0;border-left:1px solid var(--line);overflow-y:auto;}
.workspace {margin-left:0;margin-right:245px;}
.sidebar nav {gap:2px;}
.sidebar nav a {padding-top:9px;padding-bottom:9px;}
.approved-logo {display:inline-block;position:relative;overflow:hidden;width:76px;aspect-ratio:601/379;flex-shrink:0;vertical-align:middle;}
.approved-logo img {position:absolute!important;width:266.223%!important;height:auto!important;max-width:none!important;left:-77.038%;top:-103.694%;object-fit:initial!important;}
.login-brand .approved-logo {width:170px;}
.home-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.home-grid .panel {margin-bottom:0;}
.home-stats {grid-template-columns:repeat(2,minmax(0,1fr));}
.home-counts {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;}
.home-counts .stat strong {font-size:32px;}
.home-list {margin:0;padding-right:20px;}
.home-list li {margin-bottom:12px;}
.home-section {margin-top:24px;}
@media(max-width:760px){
 .sidebar {left:auto;right:auto;overflow:visible;}
 .workspace {margin:0;}
 .sidebar nav {overflow-x:auto;}
 .approved-logo {width:60px;}
 .home-grid,.home-counts {grid-template-columns:1fr;gap:16px;}
 .home-stats {grid-template-columns:1fr 1fr;}
}

/* Purple right navigation and approved welcome logo. */
.sidebar {background:linear-gradient(165deg,#4b235e,#5b276e);color:#fff;border-left-color:#4b235e;}
.sidebar .brand,.sidebar .brand small,.sidebar .nav-label,.sidebar nav a,.sidebar .sidebar-bottom,.sidebar .logout {color:#fff;}
.sidebar nav a:hover {background:rgba(255,255,255,.12);}
.sidebar nav a.active {background:rgba(255,255,255,.20);color:#fff;box-shadow:inset -3px 0 0 #fff;}
.sidebar .sidebar-bottom {border-top-color:rgba(255,255,255,.25);}
.sidebar .dot {background:#8ce2be;}
.sidebar a:focus-visible,.sidebar button:focus-visible {outline-color:#fff;}
.welcome-logo {padding:0 28px;flex-shrink:0;}
.welcome-logo .approved-logo {width:220px;display:block;}
@media(max-width:760px){
 .welcome {gap:16px;}
 .welcome-logo {padding:0;}
 .welcome-logo .approved-logo {width:85px;}
}

.production-panel h3{padding-bottom:9px;border-bottom:1px solid var(--line)}.production-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:#f0eaf4;padding:16px 20px;border-radius:10px}.production-summary strong{font-size:28px;color:var(--purple)}.production-summary small{color:var(--muted)}.production-number{padding:20px;background:#f0eaf4;border-radius:12px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}.production-number strong{font-size:25px;color:var(--purple)}.barcode-actions{margin-top:0;gap:8px}.barcode-actions button{font-size:14px}button:disabled{opacity:.5;cursor:not-allowed}dialog{border:1px solid var(--line);border-radius:14px;padding:24px;max-width:calc(100vw - 32px);width:540px;color:var(--ink)}dialog::backdrop{background:rgba(30,15,40,.65)}#barcode-video{width:100%;max-height:55vh;border-radius:10px;background:#22152a}input[readonly]{background:#f6f5f8}

.receipt-barcode-binding{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:500}.receipt-barcode-binding input[type="checkbox"]{width:18px;height:18px;min-height:18px;margin:0;padding:0;flex:none;accent-color:#5b276e}

.lid-choice{border:1px solid #ded5e7;border-radius:8px;padding:12px;display:flex;gap:12px}.lid-choice label{display:flex;align-items:center;gap:8px;background:#eee7f4;padding:12px;border-radius:8px;color:#54266a}.lid-choice input[type="radio"]{width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:#5b276e}.lid-choice label:has(input:checked){background:#5b276e;color:white}

.product-click-row{cursor:pointer}.product-click-row:hover{background:#f2ebf7}.product-cell-link{display:block;min-height:24px;padding:8px 0}.product-cell-link:focus-visible{outline:2px solid #5b276e;outline-offset:4px}

.recipe-component{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;padding:16px 0;border-bottom:1px solid #eee7f3}.quick-links a.active{background:#5b276e;color:white}@media(max-width:700px){.recipe-component{grid-template-columns:1fr 1fr}.recipe-component>label:first-child{grid-column:1/-1}}

.material-search{display:flex;gap:12px;align-items:center;margin:20px 0}.material-search input{flex:1}.material-search select{flex:1}.plain-fieldset{border:0;padding:0;margin:0;min-width:0}@media(max-width:700px){.material-search{flex-wrap:wrap}.material-search input,.material-search select{min-width:100%}}

.stock-low{color:#b42318;font-weight:800;font-size:15px}.stock-good{color:#16703b;font-weight:800;font-size:15px}.stock-unknown{font-weight:600}.stock-account{min-height:52px;line-height:1.7}.stock-edit{display:inline-block;margin-top:8px;font-weight:700;text-decoration:underline}


/* Login refinement: approved PNG and quiet folded-tissue motif. */
.login-brand{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vw,112px);background:linear-gradient(145deg,#351d45 0%,#542662 55%,#70317b 100%)}
.login-brand::before{content:"";position:absolute;inset:0;z-index:-1;background:url("tissue-pattern.svg") repeat;background-size:420px 420px;opacity:.48;pointer-events:none}
.login-brand::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,rgba(53,29,69,.36));pointer-events:none}
.login-brand .approved-logo{width:clamp(220px,20vw,310px);margin:0 0 34px;filter:drop-shadow(0 12px 20px rgba(22,6,29,.2))}
.login-brand .approved-logo img{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.login-brand .eyebrow{font-size:22px;font-weight:700;color:#f2e7f5;letter-spacing:0;line-height:1.6;margin-bottom:16px}
.login-brand h1{font-size:clamp(34px,3vw,52px);font-weight:800;line-height:1.45;margin:0 0 20px;max-width:600px}
.login-brand p{font-size:18px;line-height:1.9;color:#eadcf0;margin:0;max-width:510px}
.login-brand .environment{font-size:14px;color:#f3eaf6;border-color:#aa83b5;background:rgba(255,255,255,.05);margin-top:32px;padding:8px 18px}
.login-form{padding:64px clamp(30px,7vw,130px)}
.login-form>.eyebrow{font-size:25px;line-height:1.5;letter-spacing:0;font-weight:700;color:#743b86;margin-bottom:12px}
.login-form h2{font-size:38px;line-height:1.4;margin:0 0 12px;color:#302139}
.login-form>.muted{font-size:17px;line-height:1.8;margin:0 0 30px;color:#73647b}
.login-form label{font-size:16px;font-weight:700;line-height:1.6;margin-bottom:20px}
.login-form input{min-height:54px;font-size:17px;border-radius:10px;margin-top:8px}
.login-form button{min-height:54px;border-radius:10px;font-size:17px;font-weight:700}
.login-form .fine{font-size:14px;line-height:1.9;color:#786980;margin-top:24px}
@media(max-width:760px){.login-brand{padding:32px 28px}.login-brand .approved-logo{width:175px;margin-bottom:18px}.login-brand .eyebrow{font-size:19px;margin-bottom:8px}.login-brand h1{font-size:29px;margin-bottom:0}.login-form{padding:36px 26px 44px}.login-form>.eyebrow{font-size:22px}.login-form h2{font-size:30px}.login-form>.muted{font-size:16px;margin-bottom:24px}.login-brand::before{background-size:320px 320px}}

/* Cost workbench: amounts stay visible on the left while scrolling. */
.cost-sticky{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#f7f5fa;padding:16px 0;border-bottom:1px solid #e4dcec;margin-bottom:24px}
.cost-sticky h2{margin:0}.cost-totals{display:flex;gap:12px;color:white}.cost-totals>div{background:#56266d;border-radius:12px;padding:14px 22px;min-width:170px}.cost-totals span{display:block;font-size:13px;color:#eee1f5}.cost-totals strong{font-size:27px;margin-inline-end:5px}
.cost-changed{background:#fff4d4;border:1px solid #c69b33;border-radius:10px;padding:10px}.cost-changed small{color:#6c4c00}.cost-saved-row{border-bottom:1px solid #e4dcec;padding:12px 0}#cost-errors:empty{display:none}#solution-preparation{scroll-margin-top:30px}
@media(max-width:700px){.cost-sticky{gap:8px;flex-wrap:wrap}.cost-totals{width:100%}.cost-totals>div{min-width:0;flex:1;padding:10px}.cost-totals strong{font-size:22px}}

.cost-group-title{grid-column:1/-1;margin:18px 0 4px;border-bottom:1px solid #e4dcec;padding-bottom:10px;color:#56266d}

.product-tree{border:1px solid #dfd3e8;border-radius:12px;padding:22px;margin:22px 0}.product-tree legend{color:#56266d;font-weight:bold}.capacity-sticky small{display:block;max-width:460px;line-height:1.7}.capacity-sticky .cost-totals strong{font-size:24px}

/* Membership overview: readable permissions and compact native checkboxes. */
.member-table-scroll { overflow-x:auto; margin:24px 0 12px; }
.member-access-table { min-width:1250px; width:100%; }
.member-access-table th { white-space:normal; min-width:75px; }
.member-access-table td { vertical-align:middle; }
.permission-cell { text-align:center; }
.permission-yes { color:#17633b; font-weight:700; }
.permission-no { color:#ab303b; font-weight:700; }
input[type="checkbox"] { width:20px; height:20px; min-height:20px; padding:0; vertical-align:middle; accent-color:#572671; }

.factory-form {margin:20px 0}.factory-form .form-grid{align-items:start}.factory-check{width:20px!important;height:20px!important;vertical-align:middle;accent-color:#582772}.factory-form fieldset{border:1px solid #ddd4e7;border-radius:12px;padding:16px}.factory-form button{margin-top:16px}#count-video{width:100%;max-height:55vh}#count-camera{max-width:560px;width:90%;border:0;border-radius:16px}#count-repeat{background:#f4edf8;padding:16px;border-radius:12px}details>summary{cursor:pointer;padding:14px 0}table{font-size:14px}
@media print { .sidebar,.topbar,.no-print,form,button,.page-title .date,footer{display:none!important}.workspace{margin:0!important;width:100%!important}.content{max-width:none!important;padding:0!important}.panel{break-inside:auto;border:0;box-shadow:none}.table-wrap{overflow:visible!important}table{width:100%;font-size:10pt}thead{display:table-header-group}tr{break-inside:avoid}details{display:block}details>*{display:block!important}a{color:inherit;text-decoration:none}body{background:white;color:black} }

#stock-freeze-banner[hidden],#count-repeat[hidden],.tree-material[hidden]{display:none!important}

@media print { .member-access-table, main.content table { min-width: 0 !important; width: 100% !important; } main.content th, main.content td { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere; padding: 4px !important; } }

.fragrance-weight-card { border-top: 1px solid var(--border, #e7dff0); padding-block: 20px; }
.fragrance-weight-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fragrance-weight-card legend { margin-bottom: 12px; font-weight: 700; }
.fragrance-weight-card input:disabled { opacity: 1; color: #42384e; background: #f5f3f7; }

@media print { body.scoped-report-print main.content > :not(.export-print-target) { display: none !important; } }

#production-form label[hidden],#production-mixtures [hidden]{display:none!important}

.material-picker{position:relative}.material-options{position:absolute;z-index:30;inset-inline:0;top:100%;background:white;border:1px solid #d6c5e5;border-radius:8px;box-shadow:0 8px 24px #29113a26;max-height:260px;overflow:auto}.material-options button{display:block;width:100%;text-align:start;background:white;color:#30243d;border:0;border-radius:0;padding:12px}.material-options button:hover,.material-options button.active{background:#eee6f5}.tree-add{display:block;margin-top:8px}.tree-material small{display:block} .material-options[hidden]{display:none}
.page-navigation{margin-bottom:18px;display:flex;justify-content:flex-start}
.navigation-row{cursor:pointer}.navigation-row:hover td,.navigation-row:focus-visible td{background:#f0eaf4}.navigation-row:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
summary{width:100%;box-sizing:border-box;min-height:44px}
@media print{.page-navigation{display:none!important}}

.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.permission-card{position:relative;display:block!important;margin:0!important;cursor:pointer}.permission-card>input{position:absolute;width:1px!important;height:1px!important;opacity:0;padding:0!important}.permission-card-body{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:94px;padding:16px;border-radius:12px;background:#202024;color:#fff;border:2px solid #202024}.permission-card .permission-on{display:none}.permission-card .permission-off{color:#ff9898}.permission-card>input:checked+.permission-card-body{background:#176437;border-color:#258444}.permission-card>input:checked+.permission-card-body .permission-on{display:block;color:#fff}.permission-card>input:checked+.permission-card-body .permission-off{display:none}.permission-card>input:focus-visible+.permission-card-body{outline:3px solid #9766c4;outline-offset:3px}.permission-card>input:disabled+.permission-card-body{opacity:.55;cursor:not-allowed}.permission-admin{border:1px solid #ded5e7;border-radius:12px;margin:20px 0;padding:16px;min-width:0}@media(max-width:800px){.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.permission-grid{grid-template-columns:1fr}}

/* Supplier details stay directly beneath their selected row. */
.supplier-selected { background: #f3edf8; }
.supplier-detail-row > td { white-space: normal; padding: 20px; }
.supplier-editor { text-align: start; padding-block: 12px 20px; }
.supplier-editor .supplier-categories { grid-column: 1 / -1; min-width: 0; }
.supplier-editor fieldset { border: 1px solid #e3d9eb; border-radius: 10px; }
.supplier-editor textarea { width: 100%; }
/* Shared workspace navigation and action hierarchy; brand palette unchanged. */
.ui-icon{display:inline-block;flex:none;vertical-align:middle;width:23px;height:23px}
.button .ui-icon,button .ui-icon{width:19px;height:19px;margin-inline-end:7px}
.sidebar{padding:24px 14px 16px}
.sidebar .brand{padding:0 8px 20px;flex-shrink:0}
.sidebar nav{gap:16px;padding-bottom:22px}
.navigation-group{display:flex;flex-direction:column;gap:3px}
.navigation-group .nav-label{padding:0 13px 5px;font-size:11px;font-weight:700;opacity:.65;letter-spacing:0}
.sidebar nav a{padding:9px 12px;gap:11px;min-height:43px;font-size:14px;border:1px solid transparent;transition:background .15s ease}
.sidebar nav .navigation-cost{border-color:rgba(255,255,255,.25);font-weight:700}
.sidebar nav a.active{border-color:rgba(255,255,255,.18)}
.sidebar-bottom{padding:12px 10px 0;flex-shrink:0}
.logout{display:flex;align-items:center;gap:8px;font-size:13px}
.navigation-toggle{display:none}
.content{max-width:1540px;margin-inline:auto}
.page-navigation{margin-bottom:8px}
.page-navigation .button{display:inline-flex;align-items:center;padding:7px 13px;font-size:14px}
.page-title{margin-bottom:24px}
.page-title h1{font-size:30px;line-height:1.4}
.panel{border-radius:16px}
.panel-heading{gap:14px;flex-wrap:wrap}
.panel-heading h2{margin-block:0}
.workspace-welcome{padding:32px 38px;min-height:220px;align-items:center;border-radius:18px}
.workspace-welcome h2{font-size:32px;line-height:1.4;margin:8px 0 10px}
.workspace-welcome p{max-width:580px;margin:0 0 20px;font-size:16px}
.workspace-welcome .button{display:inline-flex;align-items:center;min-height:44px}
.workspace-welcome .welcome-logo .approved-logo{width:165px}
.workspace-actions{margin:28px 0}
.section-heading h2{font-size:21px;margin:0}
.section-heading p{margin:3px 0 15px;font-size:14px}
.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.action-card{display:flex;align-items:center;gap:14px;min-height:102px;padding:20px;background:white;border:1px solid var(--line);border-radius:14px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.action-card:hover{border-color:var(--purple);box-shadow:0 5px 18px rgba(49,23,63,.06)}
.action-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#f2edf5;color:var(--purple);flex-shrink:0}
.action-icon .ui-icon{width:25px;height:25px}
.action-card strong{display:block;font-size:16px}
.action-card small{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}
.action-arrow{margin-inline-start:auto;color:var(--purple)}
.quick-links a>.ui-icon{color:var(--purple);margin-bottom:8px}
@media(min-width:761px) and (max-width:1150px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-welcome .welcome-logo{display:none}.workspace-welcome{padding:28px}}
@media(max-width:760px){
 .sidebar{position:relative;width:100%;padding:14px 18px;overflow:visible;display:block}
 .sidebar .brand{padding:0;padding-inline-end:75px;min-height:45px;font-size:14px}
 .navigation-toggle{display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.12);color:white;padding:7px 10px;position:absolute;left:16px;top:20px;font-size:12px}
 .navigation-toggle .ui-icon{margin:0;width:20px;height:20px}.navigation-toggle span{display:none}
 .sidebar nav{display:none;padding:20px 0 8px;overflow:visible;white-space:normal;gap:16px}
 .sidebar.is-open nav{display:flex}
 .navigation-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .navigation-group .nav-label{grid-column:1/-1}.sidebar nav a{font-size:13px;min-width:0}
 .sidebar-bottom{display:none;position:static;font-size:12px;padding:10px 0 0}
 .sidebar.is-open .sidebar-bottom{display:block}.sidebar-bottom form{margin:0}
 .workspace{margin:0}.topbar{height:54px;padding:0 20px;font-size:12px}
 .content{padding:20px 16px}.page-title h1{font-size:25px}.page-title{margin-bottom:18px}
 .workspace-welcome{padding:24px;min-height:0}.workspace-welcome h2{font-size:25px}.workspace-welcome p{font-size:14px}.workspace-welcome .welcome-logo{display:none}
 .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action-card{padding:15px 12px;flex-direction:column;align-items:flex-start;gap:10px;min-height:145px}.action-card strong{font-size:15px}.action-card small{font-size:12px}.action-arrow{display:none}
 .panel-heading .button{min-height:44px}.form-actions{display:flex;flex-wrap:wrap;gap:10px}
}
@media(prefers-reduced-motion:reduce){.sidebar nav a,.action-card{transition:none}}
@media print{.workspace-actions,.navigation-toggle{display:none!important}}
@media(max-width:760px){
 .sidebar.is-open nav{flex-direction:column;width:100%;align-items:stretch}
 .navigation-group{width:100%;min-width:0}.navigation-group .nav-label{display:block}
 .sidebar nav a{white-space:normal;line-height:1.5}.sidebar nav a>span{min-width:0;overflow-wrap:anywhere}
}
.count-cancel{margin-top:18px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.count-cancel>summary{display:list-item;color:var(--red);font-weight:700;cursor:pointer;min-height:32px}
.count-cancel>summary .ui-icon{width:19px;height:19px;margin-inline-end:6px}
.count-cancel .factory-form{margin-bottom:0}

/* Keep owner costing concise on phones and desktop. */
#cost-experiment details>summary{cursor:pointer;font-weight:700;color:#56266d;padding:12px 0}
#film-measurement{margin-top:18px;border-top:1px solid #e4dcec}
.cost-technical-group{margin-top:24px}
.cost-product-picker label{margin:0}

.cost-owner-heading{flex-direction:column;gap:12px}
.cost-owner-heading .cost-product-heading{width:100%;text-align:center}
.cost-owner-heading .cost-selected-product{display:block;font-size:26px;font-weight:800;line-height:1.4;color:#56266d;margin-top:4px;overflow-wrap:anywhere}
.cost-owner-heading .cost-totals{justify-content:center}

.password-field{position:relative;margin-bottom:18px}.login-form .password-field input{padding-left:52px;margin:0;width:100%}.login-form .password-eye{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:10px;margin:0;background:transparent;color:#56266d;border:0;display:grid;place-items:center}.password-eye [hidden]{display:none}.verification-help{width:100%}.login-form #auth-submit:disabled{opacity:.5;cursor:not-allowed}

/* Account greeting stays visible across the workspace, including narrow screens. */
.topbar { height: auto; min-height: 78px; gap: 12px; padding-block: 12px; }
.topbar-context { min-width: 0; }
.user-welcome { color: var(--purple, #51276b); font-size: 16px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.topbar-breadcrumb { font-size: 12px; color: var(--muted, #82768e); }
.topbar > .pill { flex-shrink: 0; }
@media (max-width: 900px) {
  .topbar { height: auto; min-height: 68px; padding-block: 9px; }
  .user-welcome { font-size: 14px; }
  .topbar-breadcrumb { font-size: 11px; }
}

#water-receipt-unit[hidden],#water-receipt-conversion[hidden]{display:none!important}

.trace-table{overflow:auto;max-width:100%;contain:inline-size}body:has(.trace-table) .content{min-width:0}body:has(.trace-table) .panel{min-width:0;max-width:100%}body:has(.trace-table) select{min-width:0;width:100%}@media print{.trace-table{overflow:visible;contain:none} .trace-table table{font-size:9px;table-layout:fixed;word-break:break-word}}

[data-inspection-production][hidden]{display:none!important;}

#film-roll-receipt[hidden],#film-roll-fields[hidden]{display:none!important;}

/* Production setup actions remain aligned on narrow screens. */
#production-form .barcode-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:stretch}
#production-form .barcode-actions>*{flex:1 1 150px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center}
.production-lid-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#production-lid-status{font-weight:700}

#inspection-builder .inspection-row > button,#inspection-builder .inspection-section > button{margin:10px 0 0 14px} #inspection-builder .form-actions{gap:24px;margin-top:24px}

/* Camera previews fit small mobile dialogs, including under the strict CSP. */
dialog video{display:block;width:100%;max-width:100%;max-height:55vh;object-fit:contain}

.correction-badge{display:inline-block;background:#fff0ce;color:#754600;border:1px solid #e9c87d;border-radius:20px;padding:3px 10px;font-size:.85rem;margin-inline-start:8px;white-space:nowrap}.correction-history{margin:16px 0;padding:16px;border:1px solid #e4dfec;border-radius:12px}.correction-history section+section{border-top:1px solid #e4dfec;margin-top:20px;padding-top:16px}.correction-confirm{display:flex;gap:12px;align-items:flex-start;margin:24px 0}.correction-confirm input{width:auto;flex:none}

.correction-action{margin:18px 0 22px}.correction-button,.button.correction-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 18px;border:1px solid #b42318;background:#fff1f0;color:#a51d16;font-weight:700}.correction-button:hover:not(:disabled),.button.correction-button:hover{background:#ffe0dc;color:#8b1a12}.correction-button:disabled{opacity:1;cursor:not-allowed;background:#fff5f4;color:#a51d16;border-style:dashed}.correction-symbol{display:inline-flex;align-items:center;justify-content:center;border:2px solid currentColor;border-radius:50%;width:22px;height:22px;font-weight:800;line-height:1;flex-shrink:0}.correction-action .fine{margin:10px 0;max-width:65ch}



@media(max-width:760px){html,body{overflow-x:hidden}.sidebar{overflow-x:clip}}
/* Cost workspace: compact controls and a persistent live result. */
.cost-mode-switch .form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cost-mode-switch .button{min-width:0;text-align:center;padding:12px 8px}.cost-mode-switch>p{font-size:12px;margin:8px 0 0}.cost-live-summary{position:fixed;bottom:16px;left:24px;z-index:40;background:#fff;box-shadow:0 4px 24px #25132d30;border:1px solid #e2d9e8;border-radius:16px;padding:12px;width:360px;max-width:calc(100vw - 32px)}.cost-live-summary .cost-product-heading{display:none}.cost-live-summary .cost-totals{gap:8px}.cost-live-summary .cost-totals>div{min-width:0;flex:1;padding:8px 10px}.cost-live-summary .cost-totals strong{font-size:22px}.cost-live-summary small{display:block;font-size:11px;margin-top:6px;text-align:center}.content:has(#cost-experiment){padding-bottom:160px}#cost-experiment [hidden]{display:none!important}.cost-lid-panel .form-grid{align-items:start}.cost-name label{margin:0}#film-per-pack{color:#56266d;font-weight:600}#cost-technical>summary{margin-bottom:12px}.cost-lid-panel p{font-size:12px}#cost-experiment .fine{font-size:12px}#cost-result>details{margin:16px 0}
@media(max-width:700px){.cost-live-summary{bottom:0;left:0;right:0;max-width:none;width:auto;border-radius:16px 16px 0 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.cost-live-summary .cost-totals span{font-size:12px}.cost-live-summary .cost-totals strong{font-size:21px}.cost-mode-switch .button{font-size:13px}.content:has(#cost-experiment) .panel{padding:18px}.content:has(#cost-experiment) .page-title{margin-bottom:16px}}
@media print{.cost-live-summary{position:static;width:auto;box-shadow:none}}

/* Keep costing inputs and their live result within reach on phones. */
@media(max-width:700px){
.cost-page .topbar{padding:8px 16px;min-height:0}.cost-page .topbar-breadcrumb{display:none}.cost-page .user-welcome{font-size:12px}
.cost-page .content{padding:12px 14px 110px}.cost-page .page-navigation,.cost-page .page-title .eyebrow,.cost-page .page-title .muted,.cost-page .page-title .date{display:none}
.cost-page .page-title{margin:8px 0 14px!important}.cost-page .page-title h1{font-size:24px;margin:0}.cost-page .panel{margin-bottom:14px}.cost-page .cost-mode-switch{padding:12px!important}.cost-page .cost-mode-switch .form-actions{margin:0}.cost-page .cost-mode-switch>p{font-size:11px;line-height:1.5}
.cost-page .cost-product-picker{padding:14px!important}.cost-page .cost-product-picker label{margin:0}.cost-page .cost-name{padding:14px!important}
.cost-page .cost-live-summary{padding:6px 10px calc(5px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0}.cost-page .cost-live-summary .cost-totals>div{padding:5px 8px;line-height:1.3}.cost-page .cost-live-summary .cost-totals strong{font-size:19px}.cost-page .cost-live-summary .cost-totals span{font-size:11px}.cost-page .cost-live-summary small{margin-top:3px;font-size:10px}
.cost-page.cost-keyboard .cost-live-summary{position:static;width:100%;margin:8px 0}.cost-page input,.cost-page select{scroll-margin:90px 0 130px}
.cost-page .pwa-mobile-status:not([hidden]){padding:0 4px!important;min-height:28px;margin:0 0 8px!important}.cost-page .pwa-mobile-status button{min-height:28px}
}
@media(max-width:700px){.cost-page .sidebar{padding:8px 14px}.cost-page .sidebar .brand{min-height:36px;font-size:13px}.cost-page .sidebar .brand small{display:none}.cost-page .sidebar .approved-logo img{max-height:40px;width:auto}.cost-page .navigation-toggle{top:9px;min-height:36px}.cost-page .topbar .user-welcome{line-height:1.4}}

/* Component costing: editable inputs beside their calculated carton contribution. */
.cost-component-card{padding:20px!important;border-radius:18px!important;margin-bottom:16px!important}
.cost-component-card h3{font-size:1.2rem;margin:0 0 16px}.cost-component-card .form-grid{gap:14px}
.cost-section-note{color:#666;line-height:1.6;font-size:.9rem;margin:0 0 16px}
.cost-section-stats{margin:18px 0 0;padding:12px 14px;background:#f6f2f8;border-radius:12px}
.cost-section-stats>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #e7dfec}
.cost-section-stats>div:last-child{border-bottom:0}.cost-section-stats dt{font-size:.9rem;color:#65546f}.cost-section-stats dd{margin:0;font-weight:700;color:#51276b;white-space:nowrap;direction:ltr}
.cost-component-card input,.cost-component-card select{min-height:44px;padding:10px 12px}.cost-solution-composition{margin-top:14px}.cost-component-card label{font-size:.95rem}
@media(max-width:600px){.cost-component-card{padding:16px!important}.cost-component-card .form-grid{grid-template-columns:1fr 1fr}.cost-component-card label:has(select),.cost-component-card label:has(input[name*=price]),#cost-film-section label,#cost-solution-section label,.cost-lid-panel label{grid-column:1/-1}.cost-section-stats dt{font-size:.82rem}.cost-section-stats dd{font-size:.9rem}.cost-name{padding:16px!important}.cost-mode-switch{padding:16px!important}}

.cost-component-card label{margin:0!important}.cost-component-card input,.cost-component-card select{margin-top:6px;margin-bottom:0}.cost-component-card small{line-height:1.4}

/* Owner workspace: clear hierarchy with the same accessible controls on phone and desktop. */
.owner-priorities,.owner-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.priority-card{position:relative;display:grid;gap:10px;border-radius:20px;padding:26px;text-decoration:none;background:#54296b;color:#fff;box-shadow:0 6px 20px #51276b12}
.priority-capacity{background:#eaf4f0;color:#205b43;border:1px solid #bad9ca}.priority-card strong{font-size:1.3rem}.priority-card small{line-height:1.65}.priority-card .action-icon{background:#ffffff25;color:inherit}.priority-card .action-arrow{position:absolute;left:24px;top:28px}
.history-card{margin:0;min-width:0}.history-card-heading{display:flex;align-items:center;gap:10px;text-decoration:none}.history-card-heading h2{font-size:1.05rem;margin:0}.history-card-heading span{margin-inline-start:auto;font-size:.8rem;white-space:nowrap}.history-card-event{display:grid;grid-template-columns:1fr auto;gap:6px;padding:16px 0;border-bottom:1px solid #eee8f1;text-decoration:none;color:#302738}.history-card-event:last-child{border:0}.history-card-event small{grid-column:1/-1;color:#766b80;font-size:.76rem}.history-card-event span{font-size:.85rem}
.cost-component-card h3{display:flex;align-items:center;gap:10px}.cost-component-card h3 svg{width:23px;height:23px;color:#704188;flex-shrink:0}.cost-section-note,.cost-scenario-note{font-size:.82rem;line-height:1.8;color:#756b7c}.settings-links{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.cost-component-card input:focus,.cost-component-card select:focus{outline:2px solid #8d65a2;outline-offset:2px}.priority-card:focus-visible,.history-card a:focus-visible{outline:3px solid #9872ad;outline-offset:4px}
@media(max-width:640px){.owner-priorities,.owner-history-grid{gap:10px}.priority-card{padding:18px 14px;border-radius:16px}.priority-card strong{font-size:1rem}.priority-card small{font-size:.75rem}.priority-card .action-arrow{display:none}.history-card{padding:16px 12px}.history-card-heading{flex-wrap:wrap;gap:7px}.history-card-heading h2{font-size:.92rem}.history-card-heading span{width:100%;margin:0}.history-card-event{display:flex;flex-direction:column;font-size:.87rem}.history-card-event small{overflow-wrap:anywhere}.cost-mode-switch{padding:16px}.cost-name{padding:18px}.cost-component-card{border-radius:18px}.settings-links .button{width:100%}}

@media(max-width:640px){.page-title{margin:12px 0 18px}.page-title h1{font-size:25px}.page-title .eyebrow{display:none}.page-title p{font-size:11px;margin:4px 0}.topbar{min-height:58px;padding:10px 16px}.pwa-mobile-status{padding:8px 12px!important;margin-bottom:12px!important;gap:8px!important}.pwa-mobile-status button{min-height:36px!important;padding:6px 12px!important}.page-navigation{margin:8px 0}.cost-page .page-navigation .button{padding:8px 14px;min-height:36px}}

/* Hidden material-specific fields must override the shared label layout. */
#material-new-form [hidden]{display:none!important}
#material-validation-summary ul{margin:8px 0;padding-inline-start:24px}

/* Shared report actions: distinctive document icons, keyboard focus and touch sizing. */
.report-export-actions{gap:12px;margin:0 0 24px;align-items:center}
.report-export-actions>small{flex-basis:100%;color:#66616d;font-size:12px;line-height:1.7}
button.report-export-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 18px;border:1px solid;border-radius:12px;font-weight:700;line-height:1.4;box-shadow:0 2px 5px #20102f08;transition:background-color .15s,border-color .15s,box-shadow .15s}
button.report-export-pdf{color:#a52c31;background:#fff4f3;border-color:#e7b9ba}
button.report-export-pdf:hover{color:#8c2026;background:#ffe7e5;border-color:#ca7d80}
button.report-export-excel{color:#17623c;background:#edf8f1;border-color:#add2bb}
button.report-export-excel:hover{color:#124d2f;background:#dcf0e4;border-color:#77b18e}
button.report-export-button:focus-visible{outline:3px solid #684183;outline-offset:3px;box-shadow:none}
.report-export-icon{display:inline-flex;flex:0 0 28px;width:28px;height:32px}
.report-export-icon svg{width:28px;height:32px;display:block}
@media(max-width:520px){.report-export-actions{gap:10px}.report-export-actions .report-export-button{flex:1 1 140px;padding:10px 12px;font-size:14px}}