/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap');

.daily-work-context-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding-inline: 16px;
  border-color: rgba(70, 78, 91, 0.34) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #46505b !important;
  box-shadow: 0 5px 16px rgba(70, 78, 91, 0.08);
}

.daily-work-context-back:hover {
  border-color: #46505b !important;
  background: #ffffff !important;
  transform: translateY(-1px);
}

.daily-work-context-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Color Variables and Reset - 35% Candle, 35% Juniper, 15% Leaf, 15% Coral */
:root {
  /* 35% Background: Candle (#EFE9D7) */
  --color-candle: #EFE9D7;
  --color-candle-rgb: 239, 233, 215;
  --color-candle-darker: #DFD9C7;
  --color-candle-darkest: #C5BEAC;

  /* 35% Primary structural panels: Juniper (#343723) */
  --color-juniper: #343723;
  --color-juniper-rgb: 52, 55, 35;
  --color-juniper-dark: #232517;
  --color-juniper-light: #4A4E33;
  --color-juniper-border: rgba(239, 233, 215, 0.12);

  /* 15% Secondary 2: Leaf (#898861) - Progress, tick buttons, charts */
  --color-leaf: #898861;
  --color-leaf-rgb: 137, 136, 97;
  --color-leaf-dark: #6C6B4B;
  --color-leaf-light: rgba(137, 136, 97, 0.15);

  /* 15% Secondary 3: Coral (#7D2826) - Primary buttons, active indicators, warnings */
  --color-coral: #7D2826;
  --color-coral-rgb: 125, 40, 38;
  --color-coral-light: #9B3532;
  --color-coral-dark: #621E1C;
  --color-coral-bg: rgba(125, 40, 38, 0.15);

  /* Earth Tone Palette Variables */
  --color-palette-salmon: #BF897F;
  --color-palette-sandstone: #DAC2B2;
  --color-palette-pearl: #F7F2E0;
  --color-palette-olive: #707B6D;
  --color-palette-pewter: #3A3D3A;

  /* Structure mapping */
  --color-bg-app: var(--color-candle);
  --color-card-bg: var(--color-juniper);        /* Cards, Tables, Drawers, Sidebar (Juniper) */
  --color-container-bg: rgba(var(--color-juniper-rgb), 0.8); /* 80% Transparent Juniper cards */
  --color-text-light: var(--color-candle);      /* Light text inside Juniper containers */
  --color-text-dark: var(--color-juniper);      /* Dark text inside Candle containers */
  --color-text-muted-light: var(--color-candle-darker);
  --color-text-muted-dark: var(--color-juniper-light);
  --color-border-light: rgba(239, 233, 215, 0.12);
  --color-border-dark: rgba(52, 55, 35, 0.2);
  
  --shadow-sm: 0 2px 4px rgba(52, 55, 35, 0.08);
  --shadow-md: 0 4px 12px rgba(52, 55, 35, 0.15);
  --shadow-lg: 0 10px 25px rgba(52, 55, 35, 0.25);
  
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --transition-smooth: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-family: 'Outfit', 'Sarabun', 'Inter', sans-serif;
}

/* Light Mode Theme Overrides for Table, Drawers, Modals */
.table-controls,
.table-outer,
.detail-drawer,
.modal-content {
  --color-container-bg: rgba(255, 255, 255, 0.95);
  --color-card-bg: #FAF8F2;
  --color-text-light: var(--color-juniper);
  --color-text-muted-light: var(--color-juniper-light);
  --color-border-light: rgba(52, 55, 35, 0.12);
  color: var(--color-text-light);
}

.table-controls .btn-primary,
.table-outer .btn-primary,
.detail-drawer .btn-primary,
.modal-content .btn-primary {
  color: var(--color-candle) !important;
}

.table-controls .btn-secondary,
.table-outer .btn-secondary,
.detail-drawer .btn-secondary,
.modal-content .btn-secondary {
  background-color: rgba(52, 55, 35, 0.04) !important;
  color: var(--color-juniper) !important;
  border-color: rgba(52, 55, 35, 0.15) !important;
}

.table-controls .btn-secondary:hover,
.table-outer .btn-secondary:hover,
.detail-drawer .btn-secondary:hover,
.modal-content .btn-secondary:hover {
  background-color: rgba(52, 55, 35, 0.08) !important;
}

.table-controls .search-box,
.table-controls .filter-select,
.modal-content .form-select,
.detail-drawer .checkbox-btn {
  background-color: #FAF8F2 !important;
  border: 1px solid rgba(52, 55, 35, 0.15) !important;
  color: var(--color-juniper) !important;
}

.table-controls .search-box input {
  color: var(--color-juniper) !important;
}

.table-controls .search-box input::placeholder {
  color: var(--color-juniper-light) !important;
  opacity: 0.65 !important;
}

.table-controls .search-box svg {
  stroke: var(--color-juniper-light) !important;
  opacity: 1 !important;
}

.detail-drawer .info-item,
.detail-drawer .timeline-content-card {
  background-color: rgba(52, 55, 35, 0.04) !important;
  border: 1px solid rgba(52, 55, 35, 0.1) !important;
}

.modal-header {
  background-color: #FAF8F2 !important;
  border-bottom: 1px solid rgba(52, 55, 35, 0.12) !important;
}

.modal-footer {
  background-color: #FAF8F2 !important;
  border-top: 1px solid rgba(52, 55, 35, 0.12) !important;
}

.drawer-header {
  --color-text-light: var(--color-candle) !important;
  color: var(--color-candle) !important;
}

.action-btn:hover {
  background-color: rgba(52, 55, 35, 0.08) !important;
  color: var(--color-juniper) !important;
  border: 1px solid rgba(52, 55, 35, 0.15) !important;
}

.table-controls {
  background-color: var(--color-leaf) !important;
  border: 1px solid rgba(52, 55, 35, 0.18) !important;
  border-bottom: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--color-bg-app);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100dvh;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-family);
  background-color: transparent;
  color: var(--color-text-dark);
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/bg_pattern_cream_red.jpg');
  background-repeat: repeat;
  background-size: 250px;
  background-attachment: scroll;
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-app);
}
::-webkit-scrollbar-thumb {
  background: var(--color-juniper-light);
  border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-leaf);
}

/* App Container Layout */
.app-container {
  display: flex;
  width: 100vw;
  height: 100dvh;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Sidebar Navigation - 35% Juniper weight */
.sidebar {
  width: 280px;
  background-color: var(--color-juniper);
  border-right: 1px solid rgba(52, 55, 35, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  z-index: 10;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: auto;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(52, 55, 35, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(137, 136, 97, 0.3);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 136, 97, 0.6);
}

.sidebar::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: inherit;
  height: 100vh;
  background-image: url('assets/bg_sidebar_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.sidebar-header {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--color-juniper);
}

/* Project master: shared mold registry sheet */
.mold-registry-sheet-upload {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.25fr);
  gap: 14px 20px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: #f7f5ec;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-left: 3px solid var(--color-leaf);
}

.mold-registry-sheet-copy {
  min-width: 0;
}

.mold-registry-sheet-copy span,
.mold-registry-sheet-copy strong,
.mold-registry-sheet-copy small {
  display: block;
}

.mold-registry-sheet-kicker {
  margin-bottom: 2px;
  color: var(--color-coral-dark);
  font-size: 0.64rem;
  font-weight: 900;
}

.mold-registry-sheet-copy strong {
  color: var(--color-juniper);
  font-size: 0.96rem;
}

.mold-registry-sheet-copy small {
  margin-top: 3px;
  color: var(--color-juniper-light);
  font-size: 0.75rem;
  line-height: 1.45;
}

.mold-registry-sheet-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mold-registry-upload-button {
  display: inline-flex !important;
  width: auto !important;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px !important;
  color: var(--color-juniper) !important;
  background: #fff !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.24) !important;
  font-size: 0.78rem !important;
  white-space: nowrap;
}

.mold-registry-sheet-actions > span {
  color: var(--color-juniper-light);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.mold-registry-sheet-preview {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  gap: 10px;
}

.mold-registry-sheet-preview:empty {
  display: none;
}

.mold-registry-sheet-preview .uploaded-thumb-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.15);
}

.mold-registry-sheet-preview .uploaded-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mold-registry-sheet-preview .uploaded-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
}

.mold-sheet-result-board {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 132px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: #fff;
}

.mold-sheet-board-preview {
  display: grid;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: #f1f0ea;
  color: var(--color-juniper-light);
  cursor: pointer;
}

.mold-sheet-board-preview img { width: 100%; height: 132px; }
.mold-sheet-board-preview span { padding: 16px; font-size: .75rem; font-weight: 800; text-align: center; }
.mold-sheet-board-preview small { display: block; margin-top: 4px; font-size: .65rem; font-weight: 600; }
.mold-sheet-board-details { min-width: 0; padding: 13px 15px; }
.mold-sheet-board-details>strong { color: var(--color-juniper); font-size: .8rem; }
.mold-sheet-board-details>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.mold-sheet-board-details span { min-width: 0; overflow: hidden; color: var(--color-juniper-light); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mold-sheet-board-details span b { display: inline-grid; width: 24px; height: 22px; margin-right: 6px; place-items: center; background: #ecebe4; color: var(--color-juniper); font-size: .62rem; }
.mold-sheet-board-details .empty { white-space: normal; }
.mold-sheet-board-details>small { display: block; margin-top: 7px; color: var(--color-juniper-light); font-size: .65rem; }

@media (max-width: 900px) {
  .mold-registry-sheet-upload {
    grid-template-columns: 1fr;
  }

  .mold-registry-sheet-actions {
    justify-content: flex-start;
  }

  .mold-registry-sheet-preview {
    grid-column: 1;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .mold-sheet-result-board { grid-template-columns: 145px minmax(0,1fr); }
}

@media (max-width: 560px) {
  .mold-registry-sheet-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .mold-registry-upload-button {
    width: 100% !important;
  }

  .mold-registry-sheet-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mold-sheet-result-board { grid-template-columns: 1fr; }
  .mold-sheet-board-preview { border-right: 0; border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14); }
  .mold-sheet-board-details>div { grid-template-columns: 1fr; }
}

/* Material ledger taxonomy and assisted entry */
.material-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 15px 0;
  overflow-x: auto;
  background: #ffffff;
  border-bottom: 2px solid rgba(52, 55, 35, 0.12);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-sm);
}

.material-category-browser {
  margin-bottom: 14px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.material-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.material-category-heading > div { display: grid; gap: 2px; }
.material-category-heading b { color: var(--color-juniper); font-size: 1rem; }
.material-category-heading small { color: var(--color-text-muted-dark); font-size: 0.76rem; }
.material-category-heading button {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgba(125, 40, 38, 0.28);
  border-radius: 6px;
  background: rgba(125, 40, 38, 0.04);
  color: var(--color-coral);
  font: 700 0.78rem var(--font-family);
  cursor: pointer;
}

.material-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.material-category-card {
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: var(--color-juniper);
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 7px;
  background: #f7f4eb;
  cursor: pointer;
  font-family: var(--font-family);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-category-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.material-category-card.is-active { border: 2px solid var(--color-coral); box-shadow: 0 0 0 2px rgba(125, 40, 38, 0.08); }
.material-category-card.tone-1 { background: #eef0ea; }
.material-category-card.tone-2 { background: #e7ecec; }
.material-category-card.tone-3 { background: #f3eee2; }
.material-category-card.tone-4 { background: #eee8e4; }
.material-category-card.tone-5 { background: #e8e7dd; }
.material-category-card b { font-size: 0.82rem; line-height: 1.25; }
.material-category-card small { font-size: 0.72rem; color: var(--color-text-muted-dark); }
.material-category-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: var(--color-juniper);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(52,55,35,.1);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(35,37,23,.08);
}
.material-category-icon svg { width: 23px; height: 23px; }
.material-category-copy { min-width: 0; display: grid; gap: 3px; text-align: left; }
.material-category-card.is-active .material-category-icon { color: #fff; background: var(--color-coral); border-color: var(--color-coral); }
.material-category-code {
  padding: 2px 6px;
  color: #ffffff;
  background: var(--color-juniper-light);
  border-radius: 4px;
  font: 700 0.6rem 'Outfit', sans-serif;
}
.material-category-card.is-active .material-category-code { background: var(--color-coral); }

.material-table-category { display: grid; justify-items: center; gap: 4px; }
.material-table-category > b { color: var(--color-juniper); font-size: 0.76rem; line-height: 1.15; }
.material-table-category > span { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.66rem; font-weight: 700; }
.material-table-category > small { color: #8a6f36; font-size: 0.62rem; }

.material-category-suggestion {
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-juniper);
  background: #f6f3e9;
  border: 1px dashed rgba(52, 55, 35, 0.28);
  border-radius: 7px;
}
.material-category-suggestion.is-ready { background: #f4eee7; border: 1px solid rgba(125, 40, 38, 0.28); }
.material-category-suggestion.is-confirmed { background: #edf3e8; border: 1px solid rgba(82, 118, 65, 0.32); }
.material-suggestion-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--color-juniper);
  font: 800 0.72rem 'Outfit', sans-serif;
}
.material-category-suggestion.is-ready .material-suggestion-icon { background: var(--color-coral); }
.material-category-suggestion.is-confirmed .material-suggestion-icon { background: #527641; }
.material-suggestion-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.material-suggestion-copy b { font-size: 0.82rem; }
.material-suggestion-copy small { font-size: 0.68rem; color: var(--color-text-muted-dark); }
.material-suggestion-alternatives { font-size: 0.68rem; color: var(--color-text-muted-dark); }
.material-suggestion-alternatives button {
  margin: 3px 3px 0 0;
  padding: 3px 6px;
  border: 1px solid rgba(52,55,35,.18);
  border-radius: 4px;
  background: #ffffff;
  color: var(--color-juniper);
  font: 600 0.65rem var(--font-family);
  cursor: pointer;
}
.material-suggestion-accept {
  min-height: 38px;
  padding: 6px 11px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  background: var(--color-coral);
  font: 700 0.72rem var(--font-family);
  cursor: pointer;
}
.material-category-suggestion.is-confirmed .material-suggestion-accept { background: #527641; }

.material-form-modal #material-form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.material-form-modal #material-form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.material-form-modal .modal-header,
.material-form-modal .modal-footer {
  flex: 0 0 auto;
}

#material-modal,
#material-tx-modal {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

#material-modal .material-form-modal,
#material-tx-modal .material-tx-modal-content {
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
}

.material-tx-modal-content #material-tx-form {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.material-tx-modal-content #material-tx-form > .modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.material-tx-modal-content #material-tx-form > .modal-footer,
.material-form-modal #material-form > .modal-footer {
  flex: 0 0 auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

.material-form-modal,
.material-tx-modal-content { background: #fbfaf6; color: var(--color-juniper); }
.material-form-modal .modal-header,
.material-tx-modal-content .modal-header {
  background: var(--color-juniper) !important;
  color: #ffffff !important;
}
.material-form-modal .modal-title,
.material-tx-modal-content .modal-title { color: #ffffff; }
.material-form-modal .modal-header .drawer-close,
.material-tx-modal-content .modal-header .drawer-close { color: #ffffff; }
.material-form-body {
  padding: 18px 20px 20px;
  background: #fbfaf6;
}
.material-form-modal label,
.material-tx-modal-content label { color: var(--color-juniper) !important; }
.material-form-modal .form-input,
.material-form-modal .form-select,
.material-tx-modal-content .form-input,
.material-tx-modal-content .form-select {
  min-height: 46px;
  color: var(--color-juniper) !important;
  background: #ffffff !important;
  border: 1px solid rgba(52,55,35,.2) !important;
  border-radius: 6px;
}
.material-form-intro,
.material-label-copy {
  display: flex;
  align-items: center;
  gap: 11px;
}
.material-form-intro {
  margin: 14px 0;
  padding: 12px 14px;
  background: #f0eee4;
  border-left: 4px solid var(--color-coral);
}
.material-form-intro > div,
.material-label-copy > div { display: grid; gap: 2px; }
.material-form-intro b,
.material-label-copy b { font-size: .92rem; }
.material-form-intro small,
.material-label-copy small { color: var(--color-text-muted-dark); font-size: .72rem; }
.material-form-step {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--color-coral);
  border-radius: 50%;
  font: 800 .78rem 'Outfit', sans-serif;
}
.material-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "id unit"
    "name min-stock"
    "suggestion suggestion"
    "category price"
    "usage location"
    "qty qty";
  gap: 16px;
  align-items: start;
}
.material-form-column {
  display: contents;
}
.material-field-id { grid-area: id; }
.material-field-name { grid-area: name; }
.material-field-suggestion { grid-area: suggestion; }
.material-field-category { grid-area: category; }
.material-field-usage { grid-area: usage; }
.material-field-qty { grid-area: qty; }
.material-field-unit { grid-area: unit; }
.material-field-min-stock { grid-area: min-stock; }
.material-field-price { grid-area: price; }
.material-field-location { grid-area: location; }
.material-form-column .form-group {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(22px, auto) 46px auto;
  align-content: start;
  gap: 5px;
}
.material-form-column .form-group > label {
  min-height: 22px;
  margin: 0;
  display: flex;
  align-items: end;
}
.material-form-column .form-input,
.material-form-column .form-select {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
}
.material-field-help,
.storage-location-help {
  min-height: 18px;
  margin: 0;
  color: var(--color-text-muted-dark);
  font-size: .68rem;
  line-height: 1.35;
}
.material-master-progress { margin-bottom: 0; }
.material-master-photo {
  width: 100%;
  margin: 0 0 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(160px, 1fr);
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  background: #f5f3eb;
  border: 1px solid rgba(52,55,35,.14);
  border-radius: 7px;
}
.material-master-photo > label {
  margin: 0 !important;
  color: var(--color-juniper) !important;
  font-size: .84rem !important;
}
.material-photo-picker {
  width: 160px;
  aspect-ratio: 4 / 3;
  justify-self: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  color: var(--color-text-muted-dark);
  background: #ffffff;
  border: 1px dashed rgba(52,55,35,.35);
  border-radius: 6px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.material-photo-picker:hover,
.material-photo-picker:focus-within {
  border-color: var(--color-leaf-dark);
  box-shadow: 0 0 0 3px rgba(137,136,97,.12);
}
.material-label-preview {
  margin-top: 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.2fr);
  align-items: center;
  gap: 18px;
  background: #f0eee4;
  border: 1px solid rgba(52,55,35,.16);
  border-radius: 7px;
}
.material-label-card {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 88px;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #222;
}
.material-label-card > div:first-child { min-width: 0; display: grid; gap: 2px; }
.material-label-card b,
.material-label-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-label-card b { font-size: .76rem; }
.material-label-card span { color: var(--color-text-muted-dark); font-size: .62rem; }
.material-label-card strong { font: 800 .68rem 'Outfit', monospace; text-align: center; }
.material-label-bars svg { width: 100%; height: 42px; display: block; }
.material-save-print { color: var(--color-coral) !important; border-color: rgba(125,40,38,.35) !important; background: rgba(125,40,38,.05) !important; }

.material-tx-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #efede4;
  border: 1px solid rgba(52,55,35,.12);
}
.material-tx-progress span {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-text-muted-dark);
  font-size: .76rem;
  font-weight: 700;
  border-right: 1px solid rgba(52,55,35,.1);
}
.material-tx-progress span:last-child { border-right: 0; }
.material-tx-progress b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(52,55,35,.22); border-radius: 50%; }
.material-tx-progress .is-active { color: var(--color-coral); background: #fff; }
.material-tx-progress .is-active b { color: #fff; background: var(--color-coral); border-color: var(--color-coral); }
.material-tx-picker { display: grid; gap: 9px; }
.material-tx-search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.material-tx-search-box {
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-juniper);
  background: #fff;
  border: 1px solid rgba(52,55,35,.22);
  border-radius: 6px;
}
.material-tx-search-box:focus-within { border-color: var(--color-leaf-dark); box-shadow: 0 0 0 3px rgba(137,136,97,.12); }
.material-tx-search-box svg { width: 20px; height: 20px; flex: 0 0 20px; }
.material-tx-search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--color-juniper); background: transparent; font: 600 .9rem var(--font-family); }
.material-tx-scan-button {
  min-width: 104px;
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--color-juniper);
  border-radius: 6px;
  color: #fff;
  background: var(--color-juniper);
  font: 800 .8rem var(--font-family);
  cursor: pointer;
}
.material-tx-scan-button svg { width: 21px; height: 21px; }
.material-tx-category-chips { display: grid; gap: 7px; }
.material-tx-category-primary,
.material-tx-category-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.material-tx-category-secondary { padding: 7px; background: #f0eee6; border: 1px solid rgba(52,55,35,.12); border-radius: 6px; }
.material-tx-category-secondary[hidden] { display: none; }
.material-tx-category-chip {
  min-width: 0;
  min-height: 38px;
  padding: 5px 10px 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(52,55,35,.2);
  border-radius: 18px;
  color: var(--color-juniper);
  background: #f8f6ee;
  font: 700 .7rem/1.15 var(--font-family);
  cursor: pointer;
  white-space: nowrap;
}
.material-tx-category-chip:hover,
.material-tx-category-chip:focus-visible { border-color: var(--color-leaf-dark); outline: 0; background: #fff; }
.material-tx-category-chip.is-active { color: #fff; background: var(--color-leaf-dark); border-color: var(--color-leaf-dark); }
.material-tx-category-chip.has-selection { border-color: var(--color-coral); }
.material-tx-category-chip small { padding-left: 2px; color: var(--color-text-muted-dark); font: 700 .62rem 'Outfit', sans-serif; }
.material-tx-category-chip.is-active small { color: rgba(255,255,255,.78); }
.material-tx-category-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; color: var(--color-juniper); background: #fff; box-shadow: 0 1px 4px rgba(35,37,23,.1); }
.material-tx-category-icon svg { width: 15px; height: 15px; }
.material-tx-category-chip.is-active .material-tx-category-icon { color: var(--color-leaf-dark); }
.material-tx-category-caret { width: 15px; color: var(--color-text-muted-dark); font: 800 .78rem/1 'Outfit', sans-serif; text-align: center; }
.material-tx-search-results { max-height: 230px; padding: 5px; display: grid; gap: 5px; overflow-y: auto; background: #f0eee6; border: 1px solid rgba(52,55,35,.12); border-radius: 6px; }
.material-tx-result {
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(52,55,35,.12);
  border-radius: 5px;
  color: var(--color-juniper);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.material-tx-result:hover,
.material-tx-result:focus-visible { border-color: var(--color-coral); outline: 0; }
.material-tx-result-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--color-leaf-dark); background: #eeeee4; font: 800 .66rem 'Outfit', sans-serif; }
.material-tx-result-copy { min-width: 0; display: grid; gap: 2px; }
.material-tx-result-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.material-tx-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted-dark); font-size: .66rem; }
.material-tx-result-stock { min-width: 70px; text-align: right; }
.material-tx-result-stock b { display: block; color: var(--color-coral); font-size: .8rem; }
.material-tx-result-stock small { color: var(--color-text-muted-dark); font-size: .62rem; }
.material-tx-selected { min-height: 44px; padding: 9px 11px; display: flex; align-items: center; color: var(--color-text-muted-dark); background: #edf0e8; border-left: 4px solid var(--color-leaf); font-size: .74rem; }
.material-tx-selected.has-selection { color: var(--color-juniper); font-weight: 700; }
.material-tx-empty { padding: 22px 12px; color: var(--color-text-muted-dark); text-align: center; font-size: .75rem; }
.material-tx-register-new {
  width: 100%;
  min-height: 62px;
  margin-top: 8px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px dashed rgba(125, 41, 38, 0.52);
  border-radius: 6px;
  color: var(--color-coral);
  background: #fffaf7;
  text-align: left;
  cursor: pointer;
}
.material-tx-register-new:hover,
.material-tx-register-new:focus-visible { border-style: solid; background: #fff4ef; outline: 0; }
.material-tx-register-new-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-coral);
  font: 700 1.25rem/1 'Outfit', sans-serif;
}
.material-tx-register-new span:last-child { min-width: 0; display: grid; gap: 2px; }
.material-tx-register-new b { font-size: .8rem; }
.material-tx-register-new small { color: var(--color-text-muted-dark); font-size: .67rem; }
.material-purpose-section {
  padding: 13px;
  background: #f4f1e7;
  border: 1px solid rgba(52,55,35,.14);
  border-radius: 7px;
}
.material-purchase-section {
  padding: 14px;
  background: #f5f1e7;
  border: 1px solid rgba(137, 136, 97, 0.28);
  border-left: 4px solid var(--color-leaf-dark);
  border-radius: 7px;
}
.material-purchase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.material-purchase-conversion-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.material-purchase-grid .form-group { margin: 0; }
.material-purchase-grid label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 700; }
.material-conversion-input {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.material-conversion-input .form-input {
  min-width: 0;
  border-radius: 6px 0 0 6px !important;
}
.material-conversion-input span {
  min-width: 78px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-juniper);
  background: #efede4;
  border: 1px solid rgba(52,55,35,.2);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.material-calculated-field .form-input,
#mat-tx-field-total-cost {
  color: #39533a !important;
  background: #edf3e9 !important;
  border-color: rgba(68,91,62,.22) !important;
  font-weight: 800;
}
#mat-tx-field-total-cost {
  font: 800 1rem 'Outfit', sans-serif;
}
.material-receipt-upload { margin-top: 12px; }
.material-receipt-upload > button {
  width: 100%;
  min-height: 60px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--color-juniper);
  background: #ffffff;
  border: 1px dashed rgba(52, 55, 35, .3);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
.material-receipt-upload svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--color-coral); }
.material-blind-entry-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  color: #5f604c;
  background: rgba(137, 136, 97, 0.1);
  border-left: 3px solid var(--color-leaf-dark);
  font-size: 0.72rem;
  line-height: 1.55;
}
.material-receipt-upload span { display: grid; gap: 2px; }
.material-receipt-upload b { font-size: .8rem; }
.material-receipt-upload small { color: var(--color-text-muted-dark); font-size: .68rem; }
.material-receipt-upload.has-file > button { border-style: solid; border-color: var(--color-leaf-dark); background: #f2f5ec; }
.material-receipt-link {
  width: max-content;
  min-height: 32px;
  margin-top: 3px;
  padding: 5px 10px;
  border: 1px solid rgba(125, 40, 38, 0.35);
  border-radius: 5px;
  background: rgba(125, 40, 38, 0.05);
  color: #7d2826;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.material-section-heading { margin-bottom: 10px; display: grid; gap: 2px; }
.material-section-heading b { font-size: .9rem; }
.material-section-heading small { color: var(--color-text-muted-dark); font-size: .7rem; }
.material-purchase-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.material-purchase-heading > span { min-width: 0; display: grid; gap: 2px; }
.material-guide-toggle {
  min-height: 36px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-juniper);
  background: #fff;
  border: 1px solid rgba(52, 55, 35, .22);
  border-radius: 6px;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.material-guide-toggle[aria-expanded="true"] { color: #fff; background: var(--color-juniper); border-color: var(--color-juniper); }
.material-info-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 800 .7rem/1 'Outfit', sans-serif;
}
.material-purchase-guide {
  margin: 0 0 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr) minmax(210px, 1fr);
  gap: 12px;
  align-items: stretch;
  color: #34372f;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, .17);
  border-left: 3px solid var(--color-coral);
  border-radius: 6px;
}
.material-purchase-guide[hidden] { display: none; }
.material-guide-intro { min-width: 0; display: flex; gap: 9px; align-items: flex-start; }
.material-guide-intro .material-info-icon { margin-top: 1px; color: var(--color-coral); }
.material-guide-intro > span:last-child { min-width: 0; display: grid; gap: 3px; }
.material-guide-intro b { font-size: .78rem; }
.material-guide-intro small { color: var(--color-text-muted-dark); font-size: .67rem; line-height: 1.45; }
.material-guide-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; counter-reset: guide-step; }
.material-guide-steps li { min-width: 0; padding: 2px 10px; display: grid; align-content: start; gap: 2px; border-left: 1px solid rgba(52, 55, 35, .12); counter-increment: guide-step; }
.material-guide-steps li b { font-size: .72rem; }
.material-guide-steps li b::before { content: counter(guide-step) ". "; color: var(--color-coral); }
.material-guide-steps li span { color: var(--color-text-muted-dark); font-size: .64rem; line-height: 1.4; }
.material-guide-steps li.is-highlighted { background: rgba(125, 40, 38, .06); box-shadow: inset 0 -2px var(--color-coral); }
.material-guide-example { min-width: 0; padding: 9px 11px; display: grid; align-content: center; gap: 3px; background: #edf3e9; border-radius: 5px; }
.material-guide-example b { color: #39533a; font-size: .68rem; }
.material-guide-example span { color: #263c29; font-size: .74rem; font-weight: 800; line-height: 1.35; }
.material-guide-example small { color: #627064; font-size: .64rem; line-height: 1.4; }
.material-field-label-row { min-height: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.material-field-label-row label { margin-bottom: 6px; }
.material-field-info {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  color: var(--color-juniper);
  background: transparent;
  border: 1px solid rgba(52, 55, 35, .28);
  border-radius: 50%;
  font: 800 .66rem/1 'Outfit', sans-serif;
  cursor: pointer;
}
.material-field-info:hover, .material-field-info:focus-visible { color: #fff; background: var(--color-juniper); outline: none; }
.material-purpose-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.material-purpose-grid label { position: relative; cursor: pointer; }
.material-purpose-grid input { position: absolute; opacity: 0; pointer-events: none; }
.material-purpose-grid span {
  min-height: 78px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: #ffffff;
  border: 1px solid rgba(52,55,35,.2);
  border-radius: 6px;
}
.material-purpose-grid input:checked + span { border: 2px solid var(--color-coral); background: rgba(125,40,38,.055); box-shadow: 0 0 0 2px rgba(125,40,38,.06); }
.material-purpose-grid b { font-size: .78rem; }
.material-purpose-grid small { color: var(--color-text-muted-dark); font-size: .64rem; line-height: 1.35; }
.material-order-reference { padding: 12px; background: #ffffff; border-left: 4px solid var(--color-leaf); }
.material-order-summary {
  min-height: 42px;
  margin-top: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-muted-dark);
  background: #edf0e8;
  border: 1px solid rgba(137,136,97,.22);
  font-size: .72rem;
}
.material-order-summary b { color: var(--color-juniper); font-size: .8rem; }
.material-tx-review { padding: 11px 13px; display: grid; gap: 2px; color: #fff; background: var(--color-juniper); border-radius: 6px; }
.material-tx-review b { font-size: .8rem; }
.material-tx-review span { color: rgba(255,255,255,.82); font-size: .7rem; }

/* Five readable information groups instead of a wide 11-column ledger. */
.material-ledger-outer { overflow: visible !important; background: #efede4 !important; }
.material-ledger-table,
.material-ledger-table tbody {
  display: block;
  width: 100%;
  min-width: 0 !important;
}
.material-ledger-table thead { display: none; }
.material-ledger-table tbody { padding: 10px; box-sizing: border-box; }
.material-ledger-table tbody tr.order-main-row {
  height: auto !important;
  min-height: 112px;
  margin-bottom: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: 64px minmax(165px,1.35fr) minmax(135px,.9fr) 106px minmax(205px,1.1fr);
  grid-template-rows: repeat(3, auto);
  gap: 3px 12px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(52,55,35,.13) !important;
  border-left: 4px solid var(--color-leaf) !important;
  border-radius: 6px;
  box-sizing: border-box;
}
.material-ledger-table tbody tr.order-main-row:has(.badge-status.rejected) { border-left-color: var(--color-coral) !important; }
.material-ledger-table tbody td { padding: 2px !important; border: 0 !important; min-width: 0; }
.material-ledger-table tbody td:nth-child(1) { grid-column:1; grid-row:1/4; }
.material-ledger-table tbody td:nth-child(2) { display:none; }
.material-ledger-table tbody td:nth-child(3) { grid-column:2; grid-row:1; text-align:left !important; }
.material-ledger-table tbody td:nth-child(4) { grid-column:2; grid-row:2; }
.material-ledger-table tbody td:nth-child(5) { grid-column:3; grid-row:1/3; }
.material-ledger-table tbody td:nth-child(6) { grid-column:4; grid-row:1; text-align:left !important; }
.material-ledger-table tbody td:nth-child(6)::before { content:"คงเหลือ "; color:var(--color-text-muted-dark); font:600 .65rem var(--font-family); }
.material-ledger-table tbody td:nth-child(7) { grid-column:4; grid-row:2; text-align:left !important; }
.material-ledger-table tbody td:nth-child(7)::before { content:"หน่วย "; color:var(--color-text-muted-dark); font:600 .65rem var(--font-family); }
.material-ledger-table tbody td:nth-child(8) { grid-column:3; grid-row:3; text-align:center !important; }
.material-ledger-table tbody td:nth-child(8)::before { content:"ราคา "; font-size:.65rem; }
.material-ledger-table tbody td:nth-child(9) { grid-column:2; grid-row:3; padding-left:2px !important; }
.material-ledger-table tbody td:nth-child(9)::before { content:"ที่เก็บ: "; font-weight:700; }
.material-ledger-table tbody td:nth-child(10) { grid-column:4; grid-row:3; text-align:left !important; }
.material-ledger-table tbody td:nth-child(11) { grid-column:5; grid-row:1/4; }
.material-ledger-table tbody td:nth-child(11) > div { justify-content:flex-end !important; }
.material-table-category { justify-items:start; text-align:left; }

.material-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.material-row-action,
.material-row-more > summary {
  min-height: 42px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(52,55,35,.18);
  border-radius: 6px;
  background: #fff;
  color: var(--color-juniper);
  font: 700 .75rem var(--font-family);
  white-space: nowrap;
  cursor: pointer;
}
.material-row-action svg,
.material-row-more > summary svg { width: 17px; height: 17px; flex: 0 0 auto; }
.material-row-action.is-receive { color: #3f683c; background: #f2f6ef; border-color: rgba(63,104,60,.28); }
.material-row-action.is-issue { color: var(--color-coral); background: #fbf3f1; border-color: rgba(125,40,38,.25); }
.material-row-action:hover,
.material-row-more > summary:hover { box-shadow: 0 3px 9px rgba(35,37,23,.1); transform: translateY(-1px); }
.material-row-more { position: relative; }
.material-row-more > summary { list-style: none; }
.material-row-more > summary::-webkit-details-marker { display: none; }
.material-row-more[open] > summary { background: var(--color-juniper); color: #fff; }
.material-row-menu {
  min-width: 185px;
  margin-top: 6px;
  padding: 5px;
  display: grid;
  gap: 2px;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid rgba(52,55,35,.18);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(35,37,23,.18);
}
.material-row-menu button {
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-juniper);
  font: 700 .76rem var(--font-family);
  text-align: left;
  cursor: pointer;
}
.material-row-menu button:hover { background: #f3f1e8; }
.material-row-menu button > span { width: 20px; text-align: center; font-size: 1rem; }
.material-row-menu button.is-danger { color: var(--color-coral); border-top: 1px solid rgba(125,40,38,.12); }

@media (max-width: 1024px) {
  .material-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .material-form-modal { width: min(900px, 94vw) !important; }
  .material-ledger-table tbody tr.order-main-row { grid-template-columns:58px minmax(145px,1.2fr) minmax(110px,.8fr) 92px minmax(245px,1.25fr); gap:3px 8px; }
  .material-purpose-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material-purchase-conversion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material-purchase-guide { grid-template-columns:1fr 1.6fr; }
  .material-guide-example { grid-column:1/-1; }
  .material-label-preview { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .material-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-category-heading { align-items: flex-start; }
  .material-category-suggestion { align-items: flex-start; flex-wrap: wrap; }
  .material-suggestion-accept { width: 100%; }
  .material-form-grid {
    grid-template-columns:1fr;
    grid-template-areas:
      "id"
      "name"
      "suggestion"
      "category"
      "usage"
      "unit"
      "min-stock"
      "price"
      "location"
      "qty";
  }
  .material-form-body { padding:14px 12px 18px; }
  .material-master-photo { grid-template-columns:1fr; }
  .material-photo-picker { width:min(180px, 100%); }
  .material-tx-progress span { min-width:0; padding:7px 4px; font-size:.67rem; line-height:1.2; text-align:center; }
  .material-label-card { grid-template-columns:1fr; }
  .material-purpose-grid { grid-template-columns:1fr; }
  .material-purchase-grid { grid-template-columns:1fr; }
  .material-purchase-heading { grid-template-columns:1fr; }
  .material-guide-toggle { width:100%; }
  .material-purchase-guide { grid-template-columns:1fr; }
  .material-guide-steps { grid-template-columns:1fr; }
  .material-guide-steps li { padding:7px 4px; border-left:0; border-top:1px solid rgba(52,55,35,.12); }
  .material-guide-example { grid-column:auto; }
  .material-tx-search-row { grid-template-columns:1fr; }
  .material-tx-scan-button { width:100%; }
  .material-tx-category-primary,
  .material-tx-category-secondary { gap: 5px; }
  .material-tx-category-chip { min-height: 36px; padding-right: 8px; }
  .material-tx-category-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .material-ledger-table tbody tr.order-main-row { grid-template-columns:58px minmax(0,1fr) 94px; grid-template-rows:auto; }
  .material-ledger-table tbody td:nth-child(1) { grid-column:1; grid-row:1/4; }
  .material-ledger-table tbody td:nth-child(3), .material-ledger-table tbody td:nth-child(4), .material-ledger-table tbody td:nth-child(9) { grid-column:2; grid-row:auto; }
  .material-ledger-table tbody td:nth-child(5), .material-ledger-table tbody td:nth-child(8) { grid-column:1/3; grid-row:auto; }
  .material-ledger-table tbody td:nth-child(6), .material-ledger-table tbody td:nth-child(7), .material-ledger-table tbody td:nth-child(10) { grid-column:3; grid-row:auto; }
  .material-ledger-table tbody td:nth-child(11) { grid-column:1/4; grid-row:auto; border-top:1px solid rgba(52,55,35,.1) !important; padding-top:8px !important; }
  .material-ledger-table tbody td:nth-child(11) > div { justify-content:flex-start !important; }
  .material-row-menu { position: static; grid-column: 1/-1; }
}

.sidebar-compact-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--color-candle);
  background: rgba(239, 233, 215, 0.08);
  border: 1px solid rgba(239, 233, 215, 0.18);
  border-radius: 6px;
  cursor: pointer;
}

.sidebar-compact-toggle svg {
  width: 18px;
  height: 18px;
}

.sidebar-compact-toggle:hover {
  background: rgba(239, 233, 215, 0.16);
}

.sidebar.is-compact {
  width: 80px;
  align-items: center;
}

.sidebar.is-compact .sidebar-header {
  width: 100%;
  padding: 10px 8px 14px;
  box-sizing: border-box;
}

.sidebar.is-compact .sidebar-logo {
  max-width: 45px;
  margin-bottom: 0;
}

.sidebar.is-compact .sidebar-subtitle,
.sidebar.is-compact .sidebar-category-title,
.sidebar.is-compact .nav-item-title,
.sidebar.is-compact .nav-item-subtitle,
.sidebar.is-compact .user-info,
.sidebar.is-compact .sidebar-footer br {
  display: none !important;
}

.sidebar.is-compact .sidebar-compact-toggle {
  position: static;
  order: -1;
  margin-bottom: 10px;
}

.sidebar.is-compact .sidebar-compact-toggle svg {
  transform: none;
}

.sidebar.is-compact .sidebar-category {
  width: 100%;
  padding: 0 8px;
  margin-bottom: 10px;
}

.sidebar.is-compact .nav-menu {
  padding: 8px 4px;
}

.sidebar.is-compact .nav-item {
  min-height: 60px;
  padding: 8px 4px 7px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation;
}

.sidebar.is-compact .nav-item svg {
  display: block !important;
  width: 21px;
  height: 21px;
}

.nav-item::after {
  content: attr(data-short);
  display: none;
}

.sidebar.is-compact .nav-item::after {
  display: block;
  color: rgba(247, 242, 224, 0.82);
  font: 700 0.56rem/1 'Outfit', 'Inter', sans-serif;
  letter-spacing: 0;
  text-align: center;
}

.sidebar.is-compact .nav-item.active::after { color: #ffffff; }

.sidebar.is-compact .sidebar-user-profile {
  width: 52px;
  min-height: 52px;
  padding: 6px;
  justify-content: center;
  box-sizing: border-box;
}

.sidebar.is-compact .sidebar-user-profile > div {
  flex-grow: 0 !important;
}

.sidebar.is-compact .btn-logout {
  display: none;
}

.sidebar.is-compact #nav-dashboard-li {
  width: 100%;
  padding: 0 8px 10px !important;
  box-sizing: border-box;
}

.sidebar.is-compact .sidebar-footer {
  width: 100%;
  padding: 10px 4px;
  box-sizing: border-box;
  font-size: 0;
}

.sidebar.is-compact #admin-user-management-actions {
  align-items: center;
}

.sidebar.is-compact #admin-user-management-btn,
.sidebar.is-compact #admin-cloud-settings-btn {
  width: 56px !important;
  height: 58px !important;
  padding: 7px 3px !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-radius: 6px !important;
}

.sidebar.is-compact #admin-user-management-btn span,
.sidebar.is-compact #admin-cloud-settings-btn span {
  display: none !important;
}

.sidebar.is-compact #admin-user-management-btn::after,
.sidebar.is-compact #admin-cloud-settings-btn::after {
  content: attr(data-short);
  color: rgba(247, 242, 224, 0.82);
  font: 700 0.54rem/1 'Outfit', sans-serif;
}

/* Material inventory workspace */
.inventory-workspace {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--color-juniper);
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
}

.inventory-overview-bar {
  min-height: 58px;
  margin-bottom: 16px;
  padding: 10px 14px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-left: 5px solid var(--color-juniper);
  border-radius: 6px;
  box-sizing: border-box;
}

.inventory-overview-bar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inventory-overview-bar > .inventory-overview-copy {
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.inventory-overview-copy > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inventory-mode-badge {
  min-height: 30px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #ffffff !important;
  border-radius: 5px;
  font: 800 0.68rem/1 'Sarabun', sans-serif !important;
}
.inventory-mode-badge.is-executive { background: var(--color-coral); }
.inventory-mode-badge.is-worker { background: var(--color-leaf-dark); }
.inventory-overview-bar > .inventory-overview-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.inventory-overview-bar b { font-size: 1rem; }
.inventory-overview-bar span { font-size: 0.78rem; color: var(--color-text-muted-dark); }

.inventory-ledger-button,
.inventory-scan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-juniper);
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.22);
  border-radius: 6px;
  cursor: pointer;
  font: 700 0.82rem 'Sarabun', sans-serif;
}

.inventory-ledger-button { min-height: 38px; padding: 8px 12px; }
.inventory-ledger-button svg,
.inventory-scan-button svg { width: 18px; height: 18px; }

.inventory-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.inventory-action-card {
  min-width: 0;
  min-height: 252px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(35, 37, 23, 0.13);
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  touch-action: manipulation;
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -74px 92px rgba(35, 37, 23, 0.16),
    0 10px 20px rgba(35, 37, 23, 0.16);
}

.inventory-action-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 1.2px, transparent 1.5px),
    radial-gradient(circle, rgba(35, 37, 23, 0.2) 1px, transparent 1.35px);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 100%);
  mask-image: linear-gradient(to top, #000 12%, transparent 100%);
}

.inventory-action-card > * {
  position: relative;
  z-index: 1;
}

.inventory-action-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -76px 96px rgba(35, 37, 23, 0.18),
    0 14px 26px rgba(35, 37, 23, 0.23);
}

.inventory-action-card:active { transform: translateY(0); }
.inventory-action-card:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }
.inventory-action-card.is-receive { background: var(--color-leaf); }
.inventory-action-card.is-issue { background: var(--color-coral); }
.inventory-action-card.is-register { background: var(--color-juniper); }

.inventory-action-icon {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  flex: 0 0 86px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(35, 37, 23, 0.16);
}

.is-receive .inventory-action-icon { color: var(--color-leaf-dark); }
.is-issue .inventory-action-icon { color: var(--color-coral); }
.is-register .inventory-action-icon { color: var(--color-juniper); }
.inventory-action-icon svg { width: 44px; height: 44px; }

.inventory-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.inventory-action-copy b {
  font-size: 1.34rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.inventory-action-copy small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  line-height: 1.4;
}

.inventory-action-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--color-juniper);
  background: #ffffff;
  border-radius: 50%;
}

.inventory-action-arrow svg { width: 19px; height: 19px; }

.inventory-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: start;
}

.inventory-panel {
  min-width: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(35, 37, 23, 0.05);
}

.inventory-search-panel { display: flex; flex-direction: column; border-top: 4px solid var(--color-leaf-dark); }
.inventory-alert-panel { border-color: rgba(125, 40, 38, 0.24); border-top: 4px solid var(--color-coral); background: #fffafa; }
.inventory-movement-panel { grid-column: 1 / -1; border-top: 4px solid var(--color-juniper); }
.inventory-review-panel { grid-column: 1 / -1; border-top: 4px solid #9a783e; background: #fffcf5; }
.inventory-panel-kicker {
  color: var(--color-coral);
  font: 800 0.6rem/1 'Outfit', sans-serif;
}

.inventory-panel-heading {
  min-height: 38px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-panel-heading > div { display: flex; flex-direction: column; gap: 2px; }
.inventory-panel-heading b { font-size: 0.98rem; }
.inventory-panel-heading small { color: var(--color-text-muted-dark); font-size: 0.72rem; }
.inventory-panel-heading > span {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--color-coral);
  border-radius: 13px;
  font: 800 0.76rem 'Outfit', sans-serif;
  box-sizing: border-box;
}

.inventory-search-row { display: flex; gap: 8px; }
.inventory-search-box {
  min-width: 0;
  height: 44px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 6px;
  box-sizing: border-box;
}

.inventory-search-box:focus-within { border-color: var(--color-leaf); box-shadow: 0 0 0 3px rgba(137, 136, 97, 0.14); }
.inventory-search-box svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-leaf-dark); }
.inventory-search-box input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--color-juniper);
  background: transparent;
  border: 0;
  outline: 0;
  font: 600 0.86rem 'Sarabun', sans-serif;
}

.inventory-scan-button { width: 44px; height: 44px; padding: 0; flex: 0 0 44px; }
.inventory-search-results { margin-top: 10px; }
.inventory-search-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.inventory-search-result-actions .small-btn { min-width: 44px; min-height: 38px; }
.inventory-history-button {
  min-height: 34px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--color-juniper);
  background: #efe9d7;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 6px;
  font: 700 0.72rem 'Sarabun', sans-serif;
  cursor: pointer;
}
.inventory-history-button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.inventory-history-button:hover,
.inventory-history-button:focus-visible {
  color: #ffffff;
  background: var(--color-juniper);
  border-color: var(--color-juniper);
}

.inventory-quick-categories {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.inventory-quick-categories button {
  min-width: 0;
  min-height: 98px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-juniper);
  background: rgba(239, 233, 215, 0.52);
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Sarabun', sans-serif;
  text-align: center;
}
.inventory-quick-categories button:hover,
.inventory-quick-categories button:focus-visible { border-color: var(--color-coral); background: #ffffff; }
.inventory-quick-category-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--color-juniper) !important;
  background: #fff;
  border: 1px solid rgba(52,55,35,.1);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(35,37,23,.08);
}
.inventory-quick-category-icon svg { width: 21px; height: 21px; }
.inventory-quick-category-copy { min-width: 0; display: grid; gap: 2px; }
.inventory-quick-categories b { font-size: 0.72rem; line-height: 1.2; overflow-wrap: anywhere; }
.inventory-quick-categories small { color: var(--color-text-muted-dark); font-size: 0.62rem; }

.inventory-scan-zone {
  width: 100%;
  min-height: 108px;
  margin-top: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-juniper);
  background: rgba(239, 233, 215, 0.42);
  border: 1px dashed rgba(52, 55, 35, 0.28);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Sarabun', sans-serif;
}

.inventory-alert-more {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  color: var(--color-coral);
  background: rgba(125, 40, 38, 0.04);
  border: 1px solid rgba(125, 40, 38, 0.2);
  border-radius: 6px;
  font: 700 0.78rem 'Sarabun', sans-serif;
  cursor: pointer;
}

.inventory-scan-zone > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  color: var(--color-leaf-dark);
  background: #ffffff;
  border-radius: 50%;
}

.inventory-scan-zone svg { width: 24px; height: 24px; }
.inventory-scan-zone b { font-size: 0.88rem; }
.inventory-scan-zone small { color: var(--color-text-muted-dark); font-size: 0.7rem; text-align: center; }

.inventory-alert-list,
.inventory-movement-list { display: flex; flex-direction: column; gap: 7px; }

.inventory-alert-item {
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--color-juniper);
  background: #ffffff;
  border: 1px solid rgba(125, 40, 38, 0.12);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.inventory-alert-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--color-coral);
  border-radius: 50%;
  font-weight: 800;
}

.inventory-alert-copy,
.inventory-movement-main,
.inventory-movement-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inventory-alert-copy b,
.inventory-movement-main b { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-alert-copy small,
.inventory-movement-main small,
.inventory-movement-meta small { color: var(--color-text-muted-dark); font-size: 0.68rem; }
.inventory-movement-main small { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.inventory-movement-kind { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px; border: 1px solid rgba(52,55,35,.12); background: rgba(52,55,35,.04); color: var(--color-juniper); font-size: .61rem; font-weight: 800; line-height: 1; }
.inventory-movement-kind.is-in { border-color: rgba(95,114,87,.2); background: rgba(95,114,87,.08); color: var(--color-leaf-dark); }
.inventory-movement-kind.is-out { border-color: rgba(125,40,38,.2); background: rgba(125,40,38,.07); color: var(--color-coral); }
.inventory-movement-kind.is-adjust { border-color: rgba(140,120,83,.22); background: rgba(140,120,83,.08); color: var(--color-juniper); }
.inventory-alert-action { color: var(--color-coral); font-size: 0.72rem; font-weight: 800; }

.inventory-movement-row {
  min-height: 50px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 92px 86px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
}

.inventory-movement-row:last-child { border-bottom: 0; }
.inventory-movement-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.inventory-movement-icon svg { width: 17px; height: 17px; }
.inventory-movement-icon.is-in { color: var(--color-leaf-dark); background: rgba(137, 136, 97, 0.16); }
.inventory-movement-icon.is-out { color: var(--color-coral); background: rgba(125, 40, 38, 0.1); }
.inventory-movement-icon.is-adjust { color: var(--color-juniper); background: rgba(52, 55, 35, 0.08); }
.inventory-movement-meta b { color: var(--color-text-muted-dark); font-size: 0.7rem; }
.inventory-movement-qty { text-align: right; font: 800 0.76rem 'Outfit', sans-serif; }
.inventory-movement-qty.is-in { color: var(--color-leaf-dark); }
.inventory-movement-qty.is-out { color: var(--color-coral); }
.inventory-empty-state { padding: 18px; text-align: center; color: var(--color-text-muted-dark); font-size: 0.8rem; }
.inventory-review-list { max-height: 430px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.inventory-review-row {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(210px, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(154, 120, 62, 0.22);
  border-radius: 6px;
}
.inventory-review-row.is-registration { grid-template-columns: minmax(180px, 1fr) auto; }
.inventory-review-main,
.inventory-review-purchase { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inventory-review-main > span { color: #8f2d2a; font: 800 0.62rem 'Outfit', sans-serif; text-transform: uppercase; }
.inventory-review-main b { overflow: hidden; color: var(--color-juniper); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-review-main small,
.inventory-review-purchase small { color: var(--color-text-muted-dark); font-size: 0.68rem; line-height: 1.35; overflow-wrap: anywhere; }
.inventory-review-purchase b { color: #8f2d2a; font: 800 0.82rem 'Outfit', sans-serif; }
.inventory-review-purchase span { color: var(--color-juniper); font-size: 0.72rem; font-weight: 700; }
.inventory-review-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.inventory-review-actions button {
  min-height: 34px;
  padding: 6px 10px;
  color: #ffffff;
  background: var(--color-juniper);
  border: 1px solid var(--color-juniper);
  border-radius: 5px;
  font: 700 0.7rem 'Sarabun', sans-serif;
  cursor: pointer;
}
.inventory-review-actions button.is-receipt { color: var(--color-juniper); background: #ffffff; border-color: rgba(52, 55, 35, 0.25); }
.inventory-review-actions button.is-correction { color: #8f2d2a; background: #fff8f7; border-color: rgba(143, 45, 42, 0.3); }
.inventory-review-status {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font: 700 0.6rem 'Sarabun', sans-serif;
  font-style: normal;
  vertical-align: middle;
}
.inventory-review-status.is-pending { color: #7a5b20; background: #fff2cf; }
.inventory-review-status.is-correction { color: #8f2d2a; background: #fde7e5; }
.inventory-review-status.is-approved { color: #45633e; background: #e5f0df; }

@media (max-width: 1180px) {
  .inventory-action-card {
    min-height: 230px;
    padding: 17px 14px 14px;
    gap: 8px;
  }
  .inventory-action-icon { width: 72px; height: 72px; flex-basis: 72px; }
  .inventory-action-icon svg { width: 36px; height: 36px; }
  .inventory-action-copy b { font-size: 1.08rem; }
  .inventory-action-copy small { font-size: 0.72rem; }
  .inventory-action-arrow { width: 36px; height: 36px; }
}

@media (max-width: 900px) {
  .inventory-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .inventory-action-card { min-height: 184px; padding: 14px 10px 12px; }
  .inventory-action-icon { width: 62px; height: 62px; flex-basis: 62px; }
  .inventory-action-icon svg { width: 31px; height: 31px; }
  .inventory-action-copy b { font-size: 0.94rem; }
  .inventory-action-copy small { font-size: 0.65rem; }
  .inventory-action-arrow { width: 34px; height: 34px; }
  .inventory-dashboard-grid { grid-template-columns: 1fr; }
  .inventory-movement-panel { grid-column: auto; }
  .inventory-review-panel { grid-column: auto; }
  .inventory-review-row,
  .inventory-review-row.is-registration { grid-template-columns: minmax(0, 1fr) auto; }
  .inventory-review-purchase { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1024px) {
  .sidebar-compact-toggle { display: none; }
  .sidebar-user-profile {
    width: 52px !important;
    min-height: 52px;
    padding: 6px !important;
    justify-content: center;
    box-sizing: border-box;
  }
  .sidebar-user-profile .user-info,
  .sidebar-user-profile .btn-logout,
  .sidebar-footer br { display: none !important; }
  .sidebar-user-profile > div { flex-grow: 0 !important; }
  .sidebar-footer { font-size: 0 !important; }
}

@media (max-width: 768px) {
  .sidebar.is-compact { width: 100%; }
  .inventory-overview-bar { align-items: flex-start; }
  .inventory-ledger-button span { display: none; }
  .inventory-overview-copy > div span { white-space: normal; }
  .inventory-action-card { min-height: 174px; }
  .inventory-quick-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-movement-row { grid-template-columns: 32px minmax(0, 1fr) 74px; }
  .inventory-movement-meta { display: none; }
}

@media (max-width: 620px) {
  .inventory-overview-bar { flex-direction: column; }
  .inventory-overview-actions { width: 100%; }
  .inventory-overview-actions .inventory-ledger-button { flex: 1; }
  .inventory-action-grid { grid-template-columns: 1fr; }
  .inventory-action-card { min-height: 150px; }
  .inventory-quick-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-review-row,
  .inventory-review-row.is-registration { grid-template-columns: 1fr; }
  .inventory-review-purchase { grid-column: auto; grid-row: auto; }
  .inventory-review-actions { justify-content: flex-start; }
}

.sidebar-logo {
  max-width: 145px;
  height: auto;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
}

.sidebar-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-align: center;
}

.sidebar-subtitle {
  font-size: 0.75rem;
  color: var(--color-leaf);
  margin-top: 4px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sidebar-category {
  padding: 0 16px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.sidebar-category-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #FAF8F2; /* Cream/gold */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(137, 136, 97, 0.4); /* Golden line */
  margin-bottom: 10px;
  font-family: 'Outfit', 'Inter', sans-serif;
  opacity: 0.85;
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--color-text-muted-light);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  border: 1px solid rgba(137, 136, 97, 0.15);
  background-color: rgba(52, 55, 35, 0.15);
  box-sizing: border-box;
  width: 100%;
}

.nav-item svg {
  display: none; /* Hidden by default on desktop */
  width: 20px;
  height: 20px;
  stroke: var(--color-text-muted-light);
  transition: color 0.25s ease, stroke 0.25s ease;
}

.nav-item-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.nav-item-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.8;
  font-family: 'Sarabun', sans-serif;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* 15% Coral Accent applied to active tab selection */
.nav-item.active {
  background-color: var(--color-coral) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: var(--shadow-md);
}

.sidebar-footer {
  padding: 14px 16px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  line-height: 1.5;
}

/* Main Content Area - 35% Candle weight */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background-color: transparent;
  position: relative;
  /* Performance: isolate scrolling context from sidebar */
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.content-header {
  height: 120px;
  border-bottom: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  flex-shrink: 0;
  background-color: #efe9d7;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* 15% Coral Accent applied to Main Title - Dual Language Group */
.page-title {
  border-left: 7px solid var(--color-coral);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}

.page-title-main {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  font-weight: normal;
  letter-spacing: 1.2px;
  color: var(--color-text-dark);
  text-transform: uppercase;
}

.page-title-sub {
  font-family: 'Sarabun', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-muted-dark);
  margin-top: 4px;
}

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

@media (max-width: 1320px) {
  .content-header { gap: 24px; padding: 0 32px; }
  .page-title-main { font-size: 2.6rem; letter-spacing: 0; }
  .page-title-sub { font-size: 1.05rem; }
}

@media (max-width: 1100px) {
  .content-header { padding: 0 28px; }
  .page-title-main { font-size: 2.25rem; }
  .page-title-sub { font-size: .95rem; line-height: 1.25; }
}

/* Buttons - 15% Coral Accent for main buttons */
.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  font-family: var(--font-family);
}

.btn-primary {
  background-color: var(--color-coral);
  color: var(--color-text-light);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--color-coral-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-light);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Secondary buttons inside light content header */
.content-header .btn-secondary {
  background-color: rgba(52, 55, 35, 0.06);
  color: var(--color-juniper);
  border-color: rgba(52, 55, 35, 0.15);
}

.content-header .btn-secondary:hover {
  background-color: rgba(52, 55, 35, 0.12);
  color: var(--color-juniper-dark);
  border-color: rgba(52, 55, 35, 0.25);
}

.content-header .btn-secondary svg {
  stroke: var(--color-juniper);
}

.content-header .btn-secondary:hover svg {
  stroke: var(--color-juniper-dark);
}

/* Sidebar footer buttons helper */
.sidebar-footer .btn-secondary {
  background-color: rgba(239, 233, 215, 0.08) !important;
  border-color: rgba(239, 233, 215, 0.15) !important;
  color: var(--color-candle) !important;
}

.sidebar-footer .btn-secondary:hover {
  background-color: rgba(239, 233, 215, 0.15) !important;
}

.btn-icon {
  padding: 10px;
  border-radius: var(--border-radius-md);
}

/* Page Views Container */
.view-container {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  --color-text-muted-light: var(--color-juniper-light);
  /* Performance: auto-skip rendering off-screen content */
  contain: layout style;
}

/* Facebook Style Notification Center */
.dashboard-alert-center.fb-style {
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-lg);
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(52, 55, 35, 0.04);
}

.alert-center-header.fb-style {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
}

.alert-center-title.fb-style {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-juniper);
}

.fb-notification-badge {
  background-color: var(--color-coral);
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(125, 40, 38, 0.3);
}

.alert-items-container.fb-style {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.alert-item-card.fb-style {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
}

.alert-item-card.fb-style:hover {
  background-color: #F2F3F5;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.fb-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
}

.fb-avatar-circle svg {
  width: 16px;
  height: 16px;
}

/* Icons styling using the designated color palette */
.fb-avatar-circle.order {
  background-color: #25344F;
}
.fb-avatar-circle.order svg {
  stroke: #EFE9D7;
}

.fb-avatar-circle.internal {
  background-color: #617891;
}
.fb-avatar-circle.internal svg {
  stroke: #fbfaf5;
}

.fb-avatar-circle.kiln {
  background-color: #6F4D38;
}
.fb-avatar-circle.kiln svg {
  stroke: #EFE9D7;
}

.fb-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
  min-width: 0;
}

.fb-card-text {
  font-size: 0.8rem;
  color: #050505;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-card-text strong {
  color: #050505;
  font-weight: 700;
}

.highlight-work-name {
  color: var(--color-coral) !important;
  font-weight: 600;
}

.fb-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #65676B;
  width: 100%;
}

.fb-doc-id {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #25344F;
}

.fb-time {
  white-space: nowrap;
}

.fb-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.fb-divider {
  color: #8c9096;
}

.fb-unread-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-coral);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
}

.alert-empty-state {
  grid-column: span 3;
  text-align: center;
  padding: 18px;
  color: var(--color-text-muted-dark);
  font-size: 0.82rem;
  border: 1px dashed rgba(52, 55, 35, 0.15);
  border-radius: var(--border-radius-md);
}

/* Dashboard view elements (Juniper Cards on Candle base bg) */
.dashboard-welcome-banner {
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-lg);
  padding: 16px 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(52, 55, 35, 0.04);
}

.welcome-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-juniper);
  margin-bottom: 6px;
}

.welcome-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-muted-dark);
}

.thai-date-badge {
  background-color: rgba(52, 55, 35, 0.06);
  border: 1px solid rgba(52, 55, 35, 0.12);
  color: var(--color-juniper);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* 5 Column KPI Grid */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kpi-card {
  background: rgba(52, 55, 35, 0.85);
  border: 1px solid rgba(239, 233, 215, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-leaf);
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon svg {
  width: 22px;
  height: 22px;
}

.kpi-info {
  display: flex;
  flex-direction: column;
}

.kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 3px;
}

/* Theme variations for KPI Cards */
.kpi-card.total {
  background: linear-gradient(to bottom right, #25344F, #162032);
  border-color: rgba(239, 233, 215, 0.15);
}
.kpi-card.total .kpi-value { color: #EFE9D7; }
.kpi-card.total .kpi-label { color: rgba(239, 233, 215, 0.7); }
.kpi-card.total .kpi-icon { background: rgba(239, 233, 215, 0.1); color: #EFE9D7; }
.kpi-card.total .kpi-icon svg { stroke: #EFE9D7; }
.kpi-card.total:hover { border-color: #EFE9D7; }

.kpi-card.waiting {
  background: linear-gradient(to bottom right, #728A9E, #516478);
  border-color: rgba(251, 250, 245, 0.15);
}
.kpi-card.waiting .kpi-value { color: #fbfaf5; }
.kpi-card.waiting .kpi-label { color: rgba(251, 250, 245, 0.75); }
.kpi-card.waiting .kpi-icon { background: rgba(251, 250, 245, 0.15); color: #fbfaf5; }
.kpi-card.waiting .kpi-icon svg { stroke: #fbfaf5; }
.kpi-card.waiting:hover { border-color: #fbfaf5; }

.kpi-card.progress {
  background: linear-gradient(to bottom right, #E3CDB0, #C5A982);
  border-color: rgba(52, 55, 35, 0.15);
}
.kpi-card.progress .kpi-value { color: #343723; }
.kpi-card.progress .kpi-label { color: rgba(52, 55, 35, 0.75); }
.kpi-card.progress .kpi-icon { background: rgba(52, 55, 35, 0.08); color: #343723; }
.kpi-card.progress .kpi-icon svg { stroke: #343723; }
.kpi-card.progress:hover { border-color: #343723; }

.kpi-card.overdue {
  background: linear-gradient(to bottom right, #7D2D31, #4E1417);
  border-color: rgba(251, 250, 245, 0.15);
}
.kpi-card.overdue .kpi-value { color: #fbfaf5; }
.kpi-card.overdue .kpi-label { color: rgba(251, 250, 245, 0.75); }
.kpi-card.overdue .kpi-icon { background: rgba(251, 250, 245, 0.15); color: #fbfaf5; }
.kpi-card.overdue .kpi-icon svg { stroke: #fbfaf5; }
.kpi-card.overdue:hover { border-color: #fbfaf5; }

.kpi-card.completed {
  background: linear-gradient(to bottom right, #8A644D, #593A27);
  border-color: rgba(239, 233, 215, 0.15);
}
.kpi-card.completed .kpi-value { color: #EFE9D7; }
.kpi-card.completed .kpi-label { color: rgba(239, 233, 215, 0.75); }
.kpi-card.completed .kpi-icon { background: rgba(239, 233, 215, 0.12); color: #EFE9D7; }
.kpi-card.completed .kpi-icon svg { stroke: #EFE9D7; }
.kpi-card.completed:hover { border-color: #EFE9D7; }

/* Pipeline Section */
.pipeline-section {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(52, 55, 35, 0.04);
}

.pipeline-header {
  margin-bottom: 20px;
}

.pipeline-header .section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-juniper);
}

.pipeline-header .section-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted-dark);
  display: block;
  margin-top: 4px;
}

.pipeline-scroll-container {
  overflow-x: auto;
  padding-bottom: 8px;
  cursor: grab;
  user-select: none;
}
.pipeline-scroll-container.grabbing {
  cursor: grabbing;
}

.pipeline-flow {
  display: flex;
  gap: 14px;
  min-width: 1400px;
}

.pipeline-stage-card {
  flex: 1;
  min-width: 220px;
  background-color: #FAF8F2;
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  height: 320px;
  transition: all 0.25s ease;
}

.pipeline-stage-card.active {
  border-color: var(--color-leaf);
  background-color: #f3efe6;
  box-shadow: 0 4px 15px rgba(52, 55, 35, 0.05);
}

.pipeline-stage-card.active .stage-name {
  color: var(--color-juniper);
  text-shadow: none;
}

.pipeline-stage-card.active .stage-num {
  background-color: var(--color-leaf);
  color: #ffffff;
}

.stage-card-header {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stage-num {
  width: 20px;
  height: 20px;
  background-color: rgba(52, 55, 35, 0.08);
  color: var(--color-juniper);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stage-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-juniper);
}

.stage-count-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted-dark);
  background-color: rgba(52, 55, 35, 0.06);
  padding: 2px 8px;
  border-radius: 20px;
}

.stage-count-badge.has-work {
  color: #ffffff;
  background-color: var(--color-leaf);
}

.stage-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-grow: 1;
}

.stage-empty-text {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted-dark);
  margin-top: auto;
  margin-bottom: auto;
  padding: 20px;
  border: 1px dashed rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-sm);
}

/* Pipeline Order Badges */
.pipeline-order-item {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(52, 55, 35, 0.05);
}

.pipeline-order-item:hover {
  background-color: #FAF8F2;
  border-color: rgba(52, 55, 35, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(52, 55, 35, 0.1);
}

.pipeline-order-item.overdue {
  border-left: 3px solid var(--color-coral);
  background-color: rgba(125, 40, 38, 0.04);
  border-color: rgba(125, 40, 38, 0.12);
}

.pipeline-order-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.order-id-txt {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-leaf);
  background-color: rgba(137, 136, 97, 0.15);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.order-name-txt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-juniper);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pipeline-order-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.order-artisan-txt {
  font-size: 0.7rem;
  color: var(--color-text-muted-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.order-size-txt {
  font-size: 0.7rem;
  color: var(--color-juniper-light);
  font-weight: 600;
}

/* Bottom Split Panels */
.dashboard-row-two-new {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.urgent-panel-card, .activity-panel-card {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(52, 55, 35, 0.04);
  display: flex;
  flex-direction: column;
  height: 450px;
}

.panel-header {
  margin-bottom: 18px;
}

.panel-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-juniper);
}

.panel-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-muted-dark);
  margin-top: 3px;
  display: block;
}

.urgent-list-container, .activity-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 4px;
}

/* Urgent Cards */
.urgent-order-card {
  background-color: #FAF8F2;
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: var(--border-radius-md);
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.25s ease;
}

.urgent-order-card:hover {
  background-color: #f3efe6;
  transform: translateX(2px);
}

.urgent-order-card.overdue {
  border-left: 4px solid #BF897F;
  box-shadow: inset 0 0 10px rgba(191, 137, 127, 0.08);
}
.urgent-order-card.overdue:hover {
  border-color: rgba(191, 137, 127, 0.4);
  box-shadow: 0 4px 12px rgba(191, 137, 127, 0.2);
}

.urgent-order-card.urgent {
  border-left: 4px solid #707B6D;
  box-shadow: inset 0 0 10px rgba(112, 123, 109, 0.08);
}
.urgent-order-card.urgent:hover {
  border-color: rgba(112, 123, 109, 0.4);
  box-shadow: 0 4px 12px rgba(112, 123, 109, 0.2);
}

.urgent-card-icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.urgent-card-icon-circle.overdue {
  background-color: rgba(191, 137, 127, 0.2);
  color: #BF897F;
  border: 1px solid rgba(191, 137, 127, 0.4);
}
.urgent-card-icon-circle.urgent {
  background-color: rgba(112, 123, 109, 0.2);
  color: #707B6D;
  border: 1px solid rgba(112, 123, 109, 0.4);
}
.urgent-card-icon-circle svg {
  stroke: currentColor;
  fill: none;
}

.urgent-card-left {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.urgent-work-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-juniper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.urgent-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted-dark);
}

.urgent-meta-info .divider {
  opacity: 0.3;
}

.deadline-txt.overdue {
  color: var(--color-coral);
  font-weight: 700;
}

.urgent-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.progress-bar-bg {
  flex-grow: 1;
  height: 6px;
  background-color: rgba(52, 55, 35, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 10px;
}
.progress-bar-fill.overdue {
  background: linear-gradient(to right, var(--color-coral), #a33835);
}
.progress-bar-fill.urgent {
  background: linear-gradient(to right, var(--color-leaf), #9ea07a);
}

.progress-percentage {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.progress-percentage.overdue {
  color: var(--color-coral);
}
.progress-percentage.urgent {
  color: var(--color-leaf-dark);
}

.urgent-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-status-new {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.badge-status-new.overdue {
  background-color: rgba(125, 40, 38, 0.1);
  color: var(--color-coral);
  border: 1px solid rgba(125, 40, 38, 0.2);
}

.badge-status-new.urgent {
  background-color: rgba(137, 136, 97, 0.1);
  color: var(--color-leaf-dark);
  border: 1px solid rgba(137, 136, 97, 0.2);
}

.urgent-artisan-name {
  font-size: 0.7rem;
  color: var(--color-text-muted-dark);
}

.urgent-empty, .activity-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted-dark);
  font-size: 0.85rem;
  border: 1px dashed rgba(52, 55, 35, 0.15);
  border-radius: var(--border-radius-md);
  margin-top: auto;
  margin-bottom: auto;
}

/* Activity Logs List */
.activity-log-item {
  background-color: #FAF8F2;
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: var(--border-radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.activity-log-item:hover {
  background-color: #f3efe6;
  border-color: rgba(52, 55, 35, 0.2);
  transform: translateX(2px);
}

.activity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-leaf-light);
  border: 1px solid rgba(137, 136, 97, 0.3);
  color: var(--color-juniper);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}

.activity-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-top-line .artisan-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-juniper);
}

.activity-top-line .log-date {
  font-size: 0.7rem;
  color: var(--color-text-muted-dark);
}

.activity-text {
  font-size: 0.8rem;
  color: var(--color-juniper-light);
  line-height: 1.3;
}

.activity-text strong {
  color: var(--color-juniper);
}

.activity-desc {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-muted-dark);
  background-color: rgba(52, 55, 35, 0.05);
  padding: 6px 10px;
  border-radius: var(--border-radius-sm);
  margin-top: 4px;
  word-break: break-word;
}

.card-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text-light);
}

/* Custom SVG Chart styling (Leaf 15% weight) */
.chart-container {
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 20px;
  gap: 10px;
}

.chart-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-leaf);
}

.chart-bar {
  width: 100%;
  max-width: 36px;
  background: linear-gradient(to top, var(--color-juniper-dark), var(--color-leaf));
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 4px;
}

.chart-bar.coral {
  background: linear-gradient(to top, var(--color-coral-dark), var(--color-coral));
}

.chart-bar-label {
  font-size: 0.72rem;
  color: var(--color-text-muted-light);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  border-color: #3C1A17;
  box-shadow: var(--shadow-md);
}
.stat-card.overdue .stat-value {
  color: #3C1A17;
}
.stat-card.overdue .stat-label {
  color: rgba(60, 26, 23, 0.7);
}
.stat-card.overdue .stat-icon {
  background-color: rgba(60, 26, 23, 0.08);
  color: #3C1A17;
}
.stat-card.overdue .stat-icon svg {
  stroke: #3C1A17;
}

.stat-card.completed {
  background-color: #BB8588;
  border-color: rgba(46, 15, 16, 0.15);
}
.stat-card.completed:hover {
  border-color: #FCFAF2;
  box-shadow: var(--shadow-md);
}
.stat-card.completed .stat-value {
  color: #FCFAF2;
}
.stat-card.completed .stat-label {
  color: rgba(252, 250, 242, 0.7);
}
.stat-card.completed .stat-icon {
  background-color: rgba(252, 250, 242, 0.15);
  color: #FCFAF2;
}
.stat-card.completed .stat-icon svg {
  stroke: #FCFAF2;
}

.stat-details {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-light);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted-light);
  font-weight: 600;
  margin-top: 4px;
}

/* Charts and Lists Container */
.dashboard-row-two {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}

.chart-card, .list-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--border-radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}

.chart-card {
  background-color: #A3A380;
  border: 1px solid rgba(30, 32, 19, 0.15);
}

.chart-card .card-title {
  color: #FCFAF2;
}

.chart-card .chart-bar-value {
  color: #FCFAF2;
}

.chart-card .chart-bar-label {
  color: rgba(252, 250, 242, 0.85);
}

.chart-card .chart-bar {
  background: linear-gradient(to top, #4E533C, #D7CE93);
  border: 1px solid rgba(252, 250, 242, 0.1);
}

.chart-card .chart-bar.coral {
  background: linear-gradient(to top, #7D2826, #D8A48F);
  border: 1px solid rgba(252, 250, 242, 0.15);
}

.list-card {
  background-color: #4E533C;
  border: 1px solid rgba(239, 235, 224, 0.15);
}

.list-card .card-title {
  color: #EFEBCE;
}

.list-card div[onclick] {
  background-color: #2D3121 !important;
  border-color: rgba(239, 235, 224, 0.1) !important;
}

.list-card div[onclick]:hover {
  border-color: rgba(239, 235, 224, 0.25) !important;
}

.list-card div[onclick] div {
  color: #EFEBCE !important;
}

.list-card div[onclick] > div:nth-child(2) > span:last-child {
  color: #D7CE93 !important;
}

.list-card .badge-status.overdue {
  background-color: rgba(125, 40, 38, 0.85);
  color: #FFFFFF;
}

.list-card .badge-status.progress {
  background-color: rgba(137, 136, 97, 0.85);
  color: #FFFFFF;
}

.card-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text-light);
}

/* Custom SVG Chart styling (Leaf 15% weight) */
.chart-container {
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 20px;
  gap: 10px;
}

.chart-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-leaf);
}

.chart-bar {
  width: 100%;
  max-width: 36px;
  background: linear-gradient(to top, var(--color-juniper-dark), var(--color-leaf));
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 4px;
}

.chart-bar.coral {
  background: linear-gradient(to top, var(--color-coral-dark), var(--color-coral));
}

.chart-bar-label {
  font-size: 0.72rem;
  color: var(--color-text-muted-light);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Order List table design (Juniper background on Candle base) */
.table-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-container-bg);
  padding: 12px 24px;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  border: 1px solid var(--color-border-light);
  border-bottom: none;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: var(--color-juniper-dark);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 4px 14px;
  width: 100%;
  max-width: 320px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-box:focus-within {
  border-color: var(--color-leaf) !important;
  box-shadow: 0 0 0 3px rgba(137, 136, 97, 0.25) !important;
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-candle) !important;
  padding: 8px 6px;
  width: 100%;
  font-family: var(--font-family);
  font-size: 0.9rem;
}

.search-box input::placeholder {
  color: var(--color-candle) !important;
  opacity: 0.55 !important;
}

.search-box svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-candle) !important;
  opacity: 0.7 !important;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  background-color: var(--color-juniper-dark);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-light);
  padding: 10px 16px;
  border-radius: var(--border-radius-md);
  outline: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.filter-select:focus {
  border-color: var(--color-leaf);
}

/* Custom Table Layout */
.table-outer {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-container-bg);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 850px;
  table-layout: auto;
}

.custom-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-candle-darker);
  padding: 18px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-juniper);
  border-bottom: 1px solid rgba(52, 55, 35, 0.15);
}

.custom-table td {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  font-size: 0.95rem;
  color: var(--color-text-light);
  vertical-align: middle;
}

.custom-table tbody tr {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.custom-table tbody tr:hover {
  background-color: rgba(52, 55, 35, 0.03); /* Soft dark green-grey hover */
}

/* Internal work orders: one master package with drill-down step documents. */
.iw-order-master-table {
  min-width: 980px;
}

.iw-order-master-table th:first-child,
.iw-order-master-table td:first-child {
  width: 54px;
  text-align: center;
}

.iw-order-master-table th:last-child,
.iw-order-master-table td:last-child {
  width: 112px;
  text-align: center;
}

.iw-order-master-row {
  cursor: default !important;
  background: #fffdf8;
  border-left: 4px solid #7d2826;
}

.iw-order-master-row.is-expanded {
  background: #f7f4e9;
}

.iw-order-master-row td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.iw-order-master-row td strong,
.iw-order-child-panel td strong {
  display: block;
  color: #343723;
  font-size: .88rem;
  line-height: 1.3;
}

.iw-order-master-row td small,
.iw-order-child-panel td small {
  display: block;
  margin-top: 3px;
  color: #777665;
  font-size: .72rem;
  line-height: 1.3;
}

.iw-order-group-index,
.iw-order-step-index {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #cec8b7;
  background: #f7f3e7;
  color: #7d2826;
  font-size: .76rem;
  font-weight: 800;
}

.iw-order-group-progress {
  display: block;
  width: 110px;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  background: #e4e0d3;
}

.iw-order-group-progress i {
  display: block;
  height: 100%;
  background: #617650;
}

.iw-order-group-toggle {
  min-height: 36px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #7b7b69;
  border-radius: 5px;
  background: #fffdf8;
  color: #343723;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.iw-order-group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.iw-order-step-summary,
.iw-order-step-summary:hover,
.iw-order-child-row,
.iw-order-child-row:hover {
  cursor: default !important;
  background: #f3f0e6 !important;
}

.iw-order-step-summary td {
  padding: 9px 12px 11px;
}

.iw-order-step-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 5px;
}

.iw-order-step-rail button {
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 7px;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7d2c4;
  border-radius: 4px;
  background: #fffdf8;
  color: #4b4d3c;
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.iw-order-step-rail button:hover {
  border-color: #7d2826;
  color: #7d2826;
}

.iw-order-step-rail button b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #343723;
  color: #fff;
  font-size: .66rem;
}

.iw-order-step-rail button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iw-order-step-rail button i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c69228;
}

.iw-order-step-rail button i.agreed { background: #56784e; }
.iw-order-step-rail button i.progress { background: #8d2926; }

.iw-order-child-row td {
  padding: 0 12px 14px;
}

.iw-order-child-panel {
  border: 1px solid #ccc6b7;
  border-left: 4px solid #343723;
  background: #fff;
}

.iw-order-child-heading {
  padding: 10px 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid #ded9cc;
}

.iw-order-child-heading strong {
  font-size: .82rem;
}

.iw-order-child-heading span {
  color: #777665;
  font-size: .72rem;
}

.iw-order-child-panel table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.iw-order-child-panel th {
  padding: 8px 10px;
  position: static;
  background: #ece8db;
  color: #555747;
  font-size: .7rem;
}

.iw-order-child-panel td {
  padding: 9px 10px;
  border-bottom: 1px solid #e7e3d8;
  font-size: .78rem;
}

.iw-order-child-panel th:first-child,
.iw-order-child-panel td:first-child { width: 48px; text-align: center; }
.iw-order-child-panel th:nth-child(3),
.iw-order-child-panel td:nth-child(3) { width: 150px; }
.iw-order-child-panel th:nth-child(4),
.iw-order-child-panel td:nth-child(4) { width: 175px; }
.iw-order-child-panel th:nth-child(5),
.iw-order-child-panel td:nth-child(5) { width: 135px; text-align: center; }
.iw-order-child-panel th:last-child,
.iw-order-child-panel td:last-child { width: 180px; text-align: center; }

.iw-order-code-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d2826;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.iw-order-child-actions {
  position: relative;
}

.iw-order-child-schedule {
  text-align: left;
}

.iw-order-child-schedule > span {
  display: block;
  margin-bottom: 2px;
  color: #6d8195;
  font-size: .64rem;
  font-weight: 800;
}

.iw-order-child-schedule > strong {
  padding-left: 7px;
  border-left: 3px solid #6d8195;
  font-family: "Outfit", "Sarabun", sans-serif;
  font-size: .78rem !important;
  white-space: nowrap;
}

.iw-order-child-status .badge-status {
  max-width: 100%;
  white-space: nowrap;
}

.iw-order-actions-menu {
  display: none;
  position: absolute;
  right: 48px;
  top: 4px;
  z-index: 100;
  min-width: 145px;
  border: 1px solid #d1ccbd;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(52,55,35,.16);
  text-align: left;
}

.iw-order-actions-menu a {
  display: block;
  padding: 8px 11px;
  border-bottom: 1px solid #eeeae0;
  color: #343723;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}

.iw-order-actions-menu a:last-child { border-bottom: 0; }
.iw-order-actions-menu a.danger { color: #8c1d1a; }

.iw-order-empty {
  padding: 48px 20px !important;
  color: #888777 !important;
  text-align: center;
}

/* Primary info badges in table */
.order-id {
  font-family: monospace;
  font-weight: 700;
  color: var(--color-leaf);
}

.text-bold {
  font-weight: 700;
}

.work-name-container {
  display: flex;
  flex-direction: column;
}

.work-details {
  font-size: 0.78rem;
  color: var(--color-text-muted-light);
  margin-top: 2px;
  font-weight: 500;
}

.badge-status {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
}

.iw-order-child-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.iw-order-child-actions .action-btn {
  flex: 0 0 34px;
}

.iw-assignee-action {
  flex: 0 1 auto;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 40, 38, 0.45);
  border-radius: 5px;
  background: rgba(125, 40, 38, 0.06);
  color: #7d2826;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.iw-assignee-action:hover,
.iw-assignee-action:focus-visible {
  background: #7d2826;
  color: #fff;
  outline: none;
}

.iw-order-child-row-updated {
  animation: iw-order-row-updated 1.8s ease-out;
}

@keyframes iw-order-row-updated {
  from { background-color: rgba(91, 116, 66, 0.22); }
  to { background-color: transparent; }
}

.badge-status.waiting {
  background-color: rgba(52, 55, 35, 0.08);
  color: var(--color-juniper-light);
}
.badge-status.progress {
  background-color: rgba(137, 136, 97, 0.2);
  color: #55573e;
}
.badge-status.shipped {
  background-color: rgba(137, 136, 97, 0.35);
  color: #232517;
}
.badge-status.overdue {
  background-color: rgba(125, 40, 38, 0.15);
  color: var(--color-coral);
}

/* Linear Progress Bar for Table */
.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-track {
  width: 100px;
  height: 6px;
  background-color: rgba(52, 55, 35, 0.12);
  border-radius: 3px;
  border: 1px solid rgba(52, 55, 35, 0.08);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #ddb2b1;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.progress-percent {
  font-size: 0.8rem;
  font-weight: 700;
  width: 35px;
}

/* Quick Actions Cell */
.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--color-text-muted-light);
  padding: 6px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.action-btn:hover {
  background-color: var(--color-juniper-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-light);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* Right Detail Drawer Container - 35% Juniper weight */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(35, 37, 23, 0.5);
  backdrop-filter: none;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.detail-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: calc(100% - 280px);
  max-width: 1550px;
  height: 100%;
  background-color: var(--color-card-bg);
  border-left: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-lg);
  z-index: 101;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: right;
}

.detail-drawer.active {
  right: 0;
}

.drawer-header {
  padding: 30px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--color-juniper-dark);
}

.drawer-title-group {
  display: flex;
  flex-direction: column;
}

.drawer-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-light);
}

.drawer-subtitle {
  font-size: 0.85rem;
  color: var(--color-leaf);
  margin-top: 4px;
  font-weight: 700;
}

.drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted-light);
  padding: 6px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.drawer-close:hover {
  background-color: var(--color-juniper-dark);
  color: var(--color-text-light);
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

.drawer-body {
  padding: 30px;
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  color: var(--color-text-light);
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
  letter-spacing: 0.5px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  background-color: var(--color-juniper-dark);
  padding: 12px 16px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-light);
}

.info-label {
  font-size: 0.75rem;
  color: var(--color-text-muted-light);
  font-weight: 600;
}

.info-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* Timeline Stepper for 9 Workflow Stages */
.timeline-stepper {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 24px;
}

.timeline-stepper::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 5px;
  bottom: 10px;
  width: 2px;
  background-color: var(--color-juniper-dark);
}

.timeline-step {
  position: relative;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-step:last-child {
  padding-bottom: 30px; /* Fix WebKit scroll padding bottom cutoff bug on iPad */
}

.timeline-indicator {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-card-bg);
  border: 2px solid var(--color-juniper-light);
  z-index: 2;
  transition: var(--transition-smooth);
}

.timeline-step.completed .timeline-indicator {
  background-color: var(--color-leaf);
  border-color: var(--color-leaf);
  box-shadow: 0 0 8px rgba(137, 136, 97, 0.4);
}

/* 15% Coral highlight on active workflow step indicators */
.timeline-step.active .timeline-indicator {
  background-color: var(--color-coral);
  border-color: var(--color-coral);
  box-shadow: 0 0 8px rgba(125, 40, 38, 0.4);
}

.timeline-content-card {
  background-color: var(--color-juniper-dark);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-smooth);
}

.timeline-step.active .timeline-content-card {
  border-color: rgba(125, 40, 38, 0.3);
  background-color: var(--color-coral-bg);
}

.timeline-step.completed .timeline-content-card {
  border-color: rgba(137, 136, 97, 0.2);
}

.timeline-step-info {
  display: flex;
  flex-direction: column;
}

.timeline-step-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-light);
}

.timeline-step-dates {
  font-size: 0.75rem;
  color: var(--color-text-muted-light);
  margin-top: 4px;
}

.timeline-step-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--color-juniper-dark);
  transition: var(--transition-smooth);
}

.checkbox-btn:hover {
  border-color: var(--color-leaf);
}

.checkbox-btn.checked {
  background-color: var(--color-leaf);
  border-color: var(--color-leaf);
  color: var(--color-juniper-dark);
}

.checkbox-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 3.5px;
  stroke: var(--color-juniper-dark);
}

/* Modals & Forms */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(35, 37, 23, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  width: 600px;
  max-width: 95vw;
  max-height: 82vh; /* Fitted to standard iPad viewports */
  overflow: hidden; /* Let form handle inner scrolling */
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  color: var(--color-text-light);
}

#order-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.modal-backdrop.active .modal-content {
  transform: translateY(0);
}

.material-barcode-backdrop {
  z-index: 1220;
  padding: 18px;
}

.material-barcode-modal {
  width: min(520px, 100%);
  max-width: 520px;
  max-height: min(760px, calc(100dvh - 36px));
  background: #f7f6f1;
  border: 1px solid #c9c7bd;
  border-radius: 8px;
  color: #2f3130;
}

.material-barcode-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 20px;
  color: #f7f6f1;
  background: #343717;
  border-bottom: 4px solid #7d2926;
}

.material-barcode-heading { min-width: 0; }
.material-barcode-heading > span {
  display: block;
  margin-bottom: 3px;
  color: #d3c9ad;
  font-size: 0.68rem;
  font-weight: 800;
}
.material-barcode-heading h3 { margin: 0; color: #fff; font-size: 1.28rem; line-height: 1.3; }
.material-barcode-heading p { margin: 5px 0 0; color: #d8d8d1; font-size: 0.78rem; line-height: 1.45; }
.material-barcode-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #f7f6f1;
  background: transparent;
  border: 1px solid rgba(247, 246, 241, 0.4);
  border-radius: 6px;
  cursor: pointer;
}
.material-barcode-close svg { width: 19px; height: 19px; }
.material-barcode-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.material-barcode-body { overflow-y: auto; padding: 24px; }
.material-barcode-ready {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 92px;
  margin: 0 auto 15px;
  color: #49535c;
}
.material-barcode-ready span { position: absolute; width: 22px; height: 22px; border-color: #7d2926; border-style: solid; }
.material-barcode-ready span:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.material-barcode-ready span:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.material-barcode-ready span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.material-barcode-ready span:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.material-barcode-ready svg { width: 88px; height: 54px; stroke-width: 2.7px; }
.material-barcode-instruction { margin-bottom: 20px; text-align: center; }
.material-barcode-instruction b { display: block; margin-bottom: 3px; font-size: 1rem; }
.material-barcode-instruction span { color: #646058; font-size: 0.78rem; }
.material-barcode-field { display: block; }
.material-barcode-field > span { display: block; margin-bottom: 7px; font-size: 0.8rem; font-weight: 800; }
.material-barcode-field > div { position: relative; }
.material-barcode-field svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  color: #49535c;
  transform: translateY(-50%);
  pointer-events: none;
}
.material-barcode-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px 12px 48px;
  color: #2f3130;
  background: #fff;
  border: 1px solid #bab4a8;
  border-radius: 6px;
  outline: none;
  font: 700 1rem var(--font-family);
}
.material-barcode-field input:focus { border-color: #7d2926; box-shadow: 0 0 0 3px rgba(125, 41, 38, 0.14); }
.material-barcode-status { min-height: 22px; margin: 9px 0 0; color: #646058; font-size: 0.76rem; }
.material-barcode-status[data-state="error"] { color: #9f211d; font-weight: 700; }
.material-barcode-status[data-state="success"] { color: #3f5b34; font-weight: 700; }
.material-barcode-status[data-state="loading"] { color: #49535c; font-weight: 700; }
.material-barcode-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: #efeee8;
  border-top: 1px solid #d6d2c7;
}
.material-barcode-footer > div { display: flex; gap: 8px; }
.material-barcode-footer button {
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid #bab4a8;
  border-radius: 6px;
  font: 800 0.82rem var(--font-family);
  cursor: pointer;
}
.material-barcode-camera { display: inline-flex; align-items: center; gap: 7px; color: #343717; background: #f7f6f1; }
.material-barcode-camera svg { width: 18px; height: 18px; }
.material-barcode-cancel { color: #2f3130; background: #fff; }
.material-barcode-submit { color: #fff; background: #7d2926; border-color: #7d2926 !important; }
.material-barcode-camera[hidden] { display: none; }

@media (max-width: 560px) {
  .material-barcode-backdrop { align-items: flex-end; padding: 0; }
  .material-barcode-modal { width: 100%; max-width: none; max-height: calc(100dvh - 12px); border-radius: 8px 8px 0 0; }
  .material-barcode-header { padding: 18px 18px 16px; }
  .material-barcode-body { padding: 20px 18px; }
  .material-barcode-footer { align-items: stretch; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .material-barcode-footer > div { flex: 1; }
  .material-barcode-footer > div button { flex: 1; }
  .material-barcode-camera span { display: none; }
  .material-barcode-camera { flex: 0 0 44px; justify-content: center; padding: 9px; }
}

.modal-header {
  padding: 24px 30px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-juniper-dark);
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-light);
}

.modal-body {
  padding: 30px;
  overflow-y: auto; /* Only form content scrolls */
  flex-grow: 1;
}

.modal-footer {
  padding: 20px 30px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: var(--color-juniper-dark);
  flex-shrink: 0;
}

/* Form inputs styling (Light Candle inputs inside Dark Juniper modals) */
.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group-row-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-light);
}

.form-input, .form-select, .form-textarea {
  background-color: var(--color-candle);
  border: 1px solid var(--color-candle-darker);
  border-radius: var(--border-radius-md);
  color: var(--color-text-dark);
  padding: 12px 16px;
  outline: none;
  font-family: var(--font-family);
  font-size: 0.95rem;
  width: 100%;
  transition: var(--transition-smooth);
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.5;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-leaf);
  box-shadow: 0 0 0 3px var(--color-leaf-light);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Uniform Styling for Date, Time, and Datetime-local inputs (iOS Safari/Chrome balance) */
.form-input[type="date"],
.form-input[type="time"],
.form-input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Force left alignment on iOS Safari */
.form-input[type="date"]::-webkit-date-and-time-value,
.form-input[type="time"]::-webkit-date-and-time-value,
.form-input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left !important;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  min-height: 1.2em;
  display: flex;
  align-items: center;
}

/* Make sure empty native placeholders are readable on iOS */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  color: inherit;
  opacity: 0.55;
}

/* Customize date/time picker indicators */
.form-input::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 4px;
}
.form-input::-webkit-calendar-picker-indicator:hover,
input::-webkit-calendar-picker-indicator:hover {
  opacity: 0.9;
}

/* Fix iOS Safari readonly input styling (dark grey backgrounds and invisible placeholder text) */
.form-input[readonly],
.form-input:read-only,
input[readonly],
input:read-only {
  background-color: var(--color-candle) !important;
  color: var(--color-text-dark) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--color-text-dark) !important;
  cursor: pointer;
}

.custom-date-picker-display[readonly] {
  background-color: #ffffff !important;
  -webkit-text-fill-color: var(--color-text-dark) !important;
  color: var(--color-text-dark) !important;
  opacity: 1 !important;
}

/* Responsive UI Adjustments */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-row-two {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    width: 80px;
    align-items: center;
  }
  
  .sidebar-header {
    padding: 20px 10px;
  }
  
  .sidebar-logo {
    max-width: 45px;
  }
  
  .sidebar-title, .sidebar-subtitle, .sidebar-category-title, .nav-item-title, .nav-item-subtitle {
    display: none !important;
  }
  
  .sidebar-footer {
    display: block !important;
    padding: 10px 4px !important;
    border-top: 1px solid var(--color-border-light);
    width: 100%;
  }
  
  #admin-user-management-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  #admin-user-management-btn,
  #admin-cloud-settings-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
  }
  
  #admin-user-management-btn span,
  #admin-cloud-settings-btn span {
    display: none !important;
  }
  
  #admin-user-management-btn svg,
  #admin-cloud-settings-btn svg {
    margin-right: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
  
  .sidebar-category {
    padding: 0 8px;
    margin-bottom: 10px;
  }
  
  .nav-menu {
    padding: 10px 4px;
  }
  
  .nav-item {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px;
  }
  
  .nav-item svg {
    display: block !important;
  }
}

@media (max-width: 768px) {
  html, body {
    height: auto;
    overflow: auto;
    position: static;
  }

  body {
    flex-direction: column;
  }
  
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }
  
  .sidebar::before {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .sidebar-header {
    flex-direction: row;
    padding: 10px 20px;
    border-bottom: none;
    margin-bottom: 0;
  }
  
  .sidebar-logo {
    max-width: 40px;
    margin-bottom: 0;
  }
  
  .sidebar-category {
    display: contents;
  }
  
  .sidebar-category-title, .nav-item-title, .nav-item-subtitle {
    display: none !important;
  }
  
  .sidebar-footer {
    display: flex !important;
    border-top: none !important;
    padding: 0 10px !important;
    width: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #admin-user-management-actions {
    flex-direction: row !important;
    gap: 8px !important;
    width: auto !important;
  }
  
  #admin-user-management-btn,
  #admin-cloud-settings-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
  }
  
  .nav-menu {
    flex-direction: row;
    padding: 10px;
    flex-grow: 0;
    gap: 4px;
    margin-left: auto;
  }
  
  .nav-item {
    padding: 8px 12px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .nav-item svg {
    display: block !important;
  }
  
  .main-content {
    height: calc(100dvh - 70px);
  }
  
  .content-header {
    padding: 0 20px;
    height: 70px;
  }
  
  .view-container {
    padding: 20px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-drawer {
    width: 100%;
    right: -100%;
  }
}

/* ==================================================== */
/* MOLD GALLERY PORTFOLIO GRID */
/* ==================================================== */
.gallery-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted-dark);
  margin-top: -15px;
  margin-bottom: 24px;
}

/* Gallery Filter Buttons - Spring Palette Styling */
.gallery-header .filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.gallery-header .filter-group .btn {
  border-radius: var(--border-radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 20px;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.gallery-header .filter-group .btn-secondary {
  background-color: rgba(163, 163, 128, 0.1) !important;
  color: #4E533C !important;
  border: 1px solid rgba(78, 83, 60, 0.25) !important;
  box-shadow: none !important;
}

.gallery-header .filter-group .btn-secondary:hover {
  background-color: rgba(163, 163, 128, 0.22) !important;
  border-color: #4E533C !important;
  color: #2B2D1B !important;
  transform: translateY(-1px);
}

.gallery-header .filter-group .btn-primary {
  background-color: #4E533C !important;
  color: #EFEBCE !important;
  border: 1px solid #4E533C !important;
  transform: scale(1.06) !important;
}

.gallery-header .filter-group .btn-primary:hover {
  background-color: #3C402E !important;
  border-color: #3C402E !important;
  color: #FCFAF2 !important;
  transform: scale(1.06) translateY(-1px) !important;
  box-shadow: var(--shadow-md);
}

.gallery-grid {
  display: flex;
  gap: 8px;
  width: 100%;
}

.gallery-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid var(--color-border-dark);
  background-color: var(--color-juniper-dark);
  width: 100%;
  height: 385px;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-leaf);
}

/* Masonry / Mosaic pattern similar to reference photo */
.gallery-item.tall {
  height: 460px;
}

.gallery-item.wide {
  /* Removed wide span for column layout */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
  opacity: 0.85;
}

.gallery-item:hover img {
  transform: scale(1.03);
  opacity: 1;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(35, 37, 23, 0.98) 0%, rgba(35, 37, 23, 0.6) 65%, rgba(35, 37, 23, 0) 100%);
  padding: 20px;
  color: var(--color-candle);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 60%;
  transition: var(--transition-smooth);
}

.gallery-item-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.gallery-item-meta {
  font-size: 0.82rem;
  color: var(--color-leaf);
  margin-top: 6px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-item-qty {
  background-color: var(--color-coral);
  color: #FFFFFF;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Mold details manager in Detail Drawer */
.mold-mgr-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-juniper-dark);
  padding: 20px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border-light);
}

.mold-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mold-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.mold-photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.mold-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mold-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(125, 40, 38, 0.9);
  color: #FFFFFF;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  font-weight: bold;
  transition: var(--transition-smooth);
}

.mold-photo-remove:hover {
  background-color: var(--color-coral);
}

.mold-photo-upload-btn {
  aspect-ratio: 1;
  border-radius: var(--border-radius-md);
  border: 2px dashed rgba(239, 233, 215, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted-light);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 4px;
  transition: var(--transition-smooth);
}

.mold-photo-upload-btn:hover {
  border-color: var(--color-leaf);
  color: var(--color-leaf);
  background-color: rgba(137, 136, 97, 0.05);
}

.mold-photo-upload-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .gallery-grid {
    gap: 6px;
  }
  .gallery-column {
    gap: 6px;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    gap: 6px;
  }
  .gallery-column {
    gap: 6px;
  }
  .gallery-item {
    height: 345px;
  }
  .gallery-item.tall {
    height: 400px;
  }
  .mold-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==================================================== */
/* SPRING COLOR PALETTE GALLERY */
/* ==================================================== */
.spring-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.spring-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.spring-gallery-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 380px;
  justify-content: space-between;
}

.meta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(123, 78, 72, 0.1);
  height: calc(20% - 10px);
}

.meta-card-label {
  font-size: 0.76rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-card-arrow {
  margin: 0 8px;
  opacity: 0.4;
}

.meta-card-value {
  font-size: 0.9rem;
  font-weight: 800;
  text-align: right;
  flex-grow: 1;
}

.spring-gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  border: 1px solid var(--color-border-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spring-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.spring-gallery-item.tall {
  height: 380px;
  padding: 0;
}

.spring-gallery-item.wide {
  grid-column: span 2;
  height: 380px;
  padding: 0;
}

.spring-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.spring-gallery-item:hover img {
  transform: scale(1.02);
}

/* Specific pastel blocks styling matching the palette image */
.spring-gallery-item.color-1 {
  background-color: #EFEBCE; /* Artic Daisy */
  color: #2B2D1B;
  border-color: rgba(43, 45, 27, 0.15);
}
.spring-gallery-item.color-2 {
  background-color: #D7CE93; /* Golden Clover */
  color: #2B2D1B;
  border-color: rgba(43, 45, 27, 0.15);
}
.spring-gallery-item.color-3 {
  background-color: #D8A48F; /* Rose Blush */
  color: #3C1A17;
  border-color: rgba(60, 26, 23, 0.15);
}
.spring-gallery-item.color-4 {
  background-color: #BB8588; /* Peach Blossom */
  color: #FCFAF2;
  border-color: rgba(46, 15, 16, 0.15);
}
.spring-gallery-item.color-5 {
  background-color: #A3A380; /* Olive Petal */
  color: #FCFAF2;
  border-color: rgba(30, 32, 19, 0.15);
}
.spring-gallery-item.color-6 {
  background-color: #4E533C; /* Dark Sage Background */
  color: #EFEBCE;
  border-color: rgba(239, 235, 224, 0.15);
}

/* Custom colors for metadata cards matching the user's 5-color palette image */
.meta-card.color-1 {
  background-color: #EFEBCE; /* Artic Daisy */
  color: #2B2D1B;
  border-color: rgba(43, 45, 27, 0.12);
}
.meta-card.color-2 {
  background-color: #D7CE93; /* Golden Clover */
  color: #2B2D1B;
  border-color: rgba(43, 45, 27, 0.12);
}
.meta-card.color-3 {
  background-color: #D8A48F; /* Rose Blush */
  color: #3C1A17;
  border-color: rgba(60, 26, 23, 0.12);
}
.meta-card.color-4 {
  background-color: #BB8588; /* Peach Blossom */
  color: #2E0F10;
  border-color: rgba(46, 15, 16, 0.12);
}
.meta-card.color-5 {
  background-color: #A3A380; /* Olive Petal */
  color: #1E2013;
  border-color: rgba(30, 32, 19, 0.12);
}

/* Empty State */
.gallery-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background-color: rgba(52, 55, 35, 0.88);
  border-radius: var(--border-radius-lg);
  border: 1px dashed var(--color-border-light);
  color: var(--color-text-light);
  gap: 16px;
  text-align: center;
}

.gallery-empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--color-leaf);
  margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .spring-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .spring-gallery-item.tall {
    grid-row: span 1;
  }
}

@media (max-width: 600px) {
  .spring-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
}

/* Label chip overlay on gallery images to specify mold category */
.gallery-image-chip {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: rgba(163, 163, 128, 0.95); /* Olive Petal background */
  color: #1e2013; /* Dark green-grey text */
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 2px 6px rgba(30, 32, 19, 0.2);
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(30, 32, 19, 0.15);
}

/* Tabbed Modal Upload - Folder Tabs Design */
.modal-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid rgba(239, 233, 215, 0.15);
  padding-bottom: 0;
  position: relative;
}

.modal-tab-btn {
  background-color: #A3A380; /* Olive Petal background for inactive tab */
  color: #2B2D1B; /* Dark text for inactive tab */
  border: 1px solid rgba(239, 233, 215, 0.1);
  border-bottom: none;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-family);
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 12px 12px 0 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  position: relative;
  top: 2px;
  transform: translateY(0);
}

.modal-tab-btn:hover {
  background-color: #B5B595;
  color: #1E2013;
  transform: translateY(-1px);
}

.modal-tab-btn.active {
  background-color: #BB8588; /* Peach Blossom background */
  color: #2E0F10; /* Dark contrast text */
  font-size: 1.05rem;
  font-weight: 800;
  padding: 15px 30px 10px 30px; /* Taller and wider padding to scale up */
  border-color: rgba(187, 133, 136, 0.3);
  top: 2px;
  z-index: 2;
  box-shadow: 0 -2px 10px rgba(187, 133, 136, 0.2);
}

/* Urgency pulse animation */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.urgent-badge-pulse {
  animation: none;
  will-change: auto;
}

/* REPORT POPUP / PRINT MODAL STYLING */
#report-modal .report-modal-content {
  background-color: #ffffff; /* pure white for modern minimal feel */
  color: #000000;
  width: 90%;
  max-width: 950px; /* Slightly wider for better details layout */
  height: 85vh;
  height: 85dvh;
  margin: 0 auto;
  border-radius: 4px; /* Japanese minimalist sharper corners */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.report-actions-bar {
  background-color: #1a1a1a; /* Pure dark charcoal for modern minimalist look */
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #333333;
}

.report-actions-bar .btn-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
}

.report-actions-bar .btn-primary:hover {
  background-color: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
}

.report-actions-bar .btn-secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
  border-radius: 4px !important;
  font-weight: bold !important;
}

.report-actions-bar .btn-secondary:hover {
  background-color: #333333 !important;
  border-color: #666666 !important;
}

.report-sheet-scroll {
  flex-grow: 1;
  overflow-y: auto;
  padding: 40px;
  background-color: #fafafa; /* neutral off-white background */
}

.report-sheet {
  background-color: #ffffff;
  color: #000000;
  min-height: 100%;
  padding: 45px;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  font-family: 'Sarabun', sans-serif;
  line-height: 1.6;
  border: 1px solid #dcdcdc;
  margin-bottom: 20px;
}

/* Printable layout styling */
/* Premium Blueprint-style Header */
.report-header-premium {
  border: 1.5px solid #000000;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.report-header-top {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 8px 12px;
}

.report-doc-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 1px;
  font-family: 'Sarabun', sans-serif;
  color: #ffffff !important;
}

.report-doc-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  font-family: 'Outfit', sans-serif;
  opacity: 0.85;
  color: #ffffff !important;
}

.report-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #ffffff;
}

.report-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-meta-logo {
  height: 42px;
  object-fit: contain;
}

.report-meta-company h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #000000;
  font-family: 'Sarabun', sans-serif;
  white-space: nowrap;
}

.report-meta-company p {
  margin: 2px 0 0 0;
  font-size: 0.68rem;
  color: #555555;
  font-family: 'Sarabun', sans-serif;
}

.report-meta-right {
  display: flex;
  gap: 20px;
}

.report-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.report-meta-label {
  font-size: 0.58rem;
  color: #666666;
  font-weight: 700;
  font-family: 'Outfit', 'Sarabun', sans-serif;
  letter-spacing: 0.3px;
}

.report-meta-value {
  font-size: 0.85rem;
  font-weight: 800;
  color: #000000;
  margin-top: 1px;
  font-family: 'Outfit', 'Sarabun', sans-serif;
}

.report-title-section h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.report-title-section p {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  font-weight: bold;
  color: #555555;
}

/* Status Spotlight - Monochrome minimalist highlighted status panel */
.report-status-spotlight {
  border: 1.5px solid #000000;
  padding: 16px 20px;
  margin-bottom: 25px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-status-spotlight-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-status-spotlight-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.report-status-spotlight-badge {
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 12px;
  border: 1.5px solid #000000;
  color: #000000;
  background-color: #ffffff;
}

.report-status-spotlight-badge.active {
  background-color: #000000;
  color: #ffffff;
}

.report-status-spotlight-progress-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.report-status-spotlight-progress-text {
  font-size: 0.85rem;
  font-weight: bold;
  color: #000000;
  white-space: nowrap;
}

.report-status-spotlight-progress-bar {
  flex-grow: 1;
  height: 8px;
  background-color: #e5e5e5;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #d0d0d0;
}

.report-status-spotlight-progress-fill {
  height: 100%;
  background-color: #000000;
  width: 0%; /* Set dynamically in JS */
}

/* Info Grid */
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.report-info-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 16px;
}

.report-info-card h4 {
  margin: 0 0 12px 0;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 6px;
  color: #000000;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.report-info-row:last-child {
  margin-bottom: 0;
}

.report-info-label {
  width: 140px;
  font-weight: bold;
  color: #666666;
}

.report-info-value {
  flex-grow: 1;
  color: #000000;
}

/* Ceremony Box (Monochrome version) */
.report-ceremony-box {
  background-color: #ffffff;
  border: 1.5px dashed #000000;
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: #000000;
}

.report-ceremony-title {
  font-weight: bold;
  color: #000000;
}

.report-ceremony-value {
  font-weight: 800;
  color: #000000;
}

/* Report Table Styling - Crisp Monochrome */
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
  font-size: 0.85rem;
}

.report-table th, .report-table td {
  border: 1px solid #cccccc;
  padding: 8px 12px;
  text-align: left;
}

.report-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #000000;
  border: 1px solid #b0b0b0;
}

.report-table tr:nth-child(even) {
  background-color: #fafafa;
}

.report-notes-section {
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 16px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

.report-notes-title {
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-notes-content {
  font-size: 0.85rem;
  color: #333333;
  white-space: pre-line;
  line-height: 1.5;
}

/* Linear Workflow Checklist */
.report-steps-section {
  margin-bottom: 30px;
}

.report-steps-section h4 {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #000000;
  border-bottom: 1.5px solid #000000;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2-Column Print Layout Containers */
.report-body-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.report-body-left {
  width: 58%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.report-body-right {
  width: 40%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.report-body-left > *, .report-body-right > * {
  page-break-inside: avoid;
}

/* Timeline-style Workflow Checklist */
.report-timeline {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
}

.report-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.76rem;
}

.report-timeline-bullet {
  position: absolute;
  left: -25px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

.report-timeline-bullet.completed {
  background-color: #000000;
  border-color: #000000;
}

.report-timeline-bullet.current {
  background-color: #ffffff;
  border: 2px solid #000000;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
}

.report-timeline-bullet.pending {
  background-color: #ffffff;
  border-color: #cccccc;
}

.report-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.report-timeline-name {
  color: #000000;
}

.report-timeline-row-completed .report-timeline-name {
  color: #666666;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.report-timeline-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
}

.report-timeline-status.completed {
  color: #666666;
}

.report-timeline-status.current {
  color: #000000;
  font-weight: 800;
}

.report-timeline-status.pending {
  color: #999999;
  font-weight: normal;
}

.report-timeline-date {
  color: #666666;
  font-size: 0.7rem;
}

/* Report Signatures */
.report-signatures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1.5px solid #000000;
}

.report-signature-block {
  text-align: center;
  font-size: 0.78rem;
  color: #333333;
}

.report-signature-line {
  margin-bottom: 4px;
  border-bottom: 1px solid #000000;
  height: 35px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* PRINT MEDIA QUERY STYLING */
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body * {
    visibility: hidden;
  }
  
  #report-modal,
  #report-modal * {
    visibility: visible;
  }
  
  #report-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    display: block !important;
    font-size: 10.5pt !important;
    line-height: 1.4 !important;
  }

  #report-modal table {
    font-size: 9pt !important;
    line-height: 1.35 !important;
  }

  #report-modal small {
    font-size: 8.5pt !important;
    line-height: 1.35 !important;
  }
  
  #report-modal .report-modal-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }
  
  .report-actions-bar {
    display: none !important; /* Hide actions bar on print */
  }
  
  .report-sheet-scroll {
    overflow: visible !important;
    padding: 0 !important;
    background: #ffffff !important;
  }
  
  .report-sheet {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }
  




  @page {
    size: 210mm 330mm; /* F4 Paper Size */
    margin: 20mm;
  }
}

/* Table second-line layout and styling for desktop and tablet */
.second-line-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px;
  background-color: rgba(52, 55, 35, 0.04); /* Soft tint background */
  border: 1px solid rgba(52, 55, 35, 0.1); /* Visually clear sand border */
  border-radius: 8px;
  min-height: 40px;
  width: 100%;
  transition: var(--transition-smooth);
}

.custom-table tbody tr:hover .second-line-block {
  border-color: rgba(52, 55, 35, 0.2); /* Brighter border on row hover */
  background-color: rgba(52, 55, 35, 0.08); /* Deeper contrast on hover */
}

.second-line-status-deadline-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.second-line-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.second-line-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted-light);
  white-space: nowrap;
}

/* Adjust cell alignments for main and second row */
.order-main-row td {
  border-bottom: none !important;
}

.order-second-row td {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(52, 55, 35, 0.15) !important;
  vertical-align: middle;
}

/* Specific item styles */
.progress-item {
  flex-grow: 1;
}

.status-item {
  min-width: 100px;
}

.deadline-item {
  min-width: 140px;
}

.actions-item {
  justify-content: space-between;
  width: 100%;
}

/* Responsive adjust for mobile phones (max-width: 768px) */
@media (max-width: 768px) {
  .custom-table, .custom-table thead, .custom-table tbody, .custom-table tr, .custom-table td {
    display: block !important;
    width: 100% !important;
  }
  
  .custom-table thead {
    display: none !important;
  }
  
  .custom-table tr.order-main-row {
    background-color: rgba(43, 62, 57, 0.45) !important;
    border: 1px solid rgba(239, 233, 215, 0.12) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
  }
  
  .custom-table tr.order-second-row {
    background-color: rgba(43, 62, 57, 0.45) !important;
    border: 1px solid rgba(239, 233, 215, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
  }
  
  .order-second-row td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
  }
  
  .order-second-row td:last-child {
    padding-bottom: 0 !important;
  }
  
  .second-line-block {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
  }
  
  .second-line-status-deadline-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .second-line-item {
    width: 100% !important;
  }
  
  .actions-item {
    margin-left: 0 !important;
    justify-content: flex-end !important;
  }

  /* Responsive report modal for mobile */
  #report-modal .report-modal-content {
    width: 96% !important;
    height: 90vh !important;
    height: 90dvh !important;
  }
  
  .report-sheet-scroll {
    padding: 15px !important;
  }
  
  .report-sheet {
    padding: 24px 16px !important;
    margin-bottom: 15px !important;
  }
}

/* ==========================================================================
   AUTHENTICATION & LOGIN STYLES
   ========================================================================== */
.login-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  z-index: 9999;
  background: url('BG/BG.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.login-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

.login-role-selection,
.login-password-box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 15px;
  animation: loginFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loginFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-juniper);
}

.login-logo {
  max-width: 110px;
  height: auto;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.login-header h2 {
  font-family: 'Sarabun', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--color-juniper);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-header p {
  font-size: 0.85rem;
  color: var(--color-leaf-dark, #6C6B4B);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Role Selector Grid */
.role-selection-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-top: 5px;
  flex-wrap: wrap;
}

.role-card {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.role-card-image-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(52, 55, 35, 0.2);
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: transparent;
  height: 48vh;
  max-height: 480px;
  min-height: 280px;
  aspect-ratio: 300 / 480;
}

.role-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: transform 0.5s ease;
}

/* Card Role Colors */
.role-card-admin .role-card-image-wrapper {
  border: none;
}
.role-card-sales .role-card-image-wrapper {
  border: none;
}
.role-card-artisan .role-card-image-wrapper {
  border: none;
}

/* Card Hover Animations */
.role-card:hover {
  transform: translateY(-10px);
}

.role-card:hover .role-card-img {
  transform: scale(1.03);
}

.role-card-admin:hover .role-card-image-wrapper {
  box-shadow: 0 15px 35px rgba(125, 40, 38, 0.35);
}

.role-card-sales:hover .role-card-image-wrapper {
  box-shadow: 0 15px 35px rgba(137, 136, 97, 0.35);
}

.role-card-artisan:hover .role-card-image-wrapper {
  box-shadow: 0 15px 35px rgba(52, 55, 35, 0.35);
}

.role-label-group {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-juniper);
  transition: color 0.3s ease;
}

.role-subtitle {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-leaf-dark, #6C6B4B);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-card-admin:hover .role-title {
  color: var(--color-coral);
}
.role-card-sales:hover .role-title {
  color: var(--color-leaf-dark, #6C6B4B);
}
.role-card-artisan:hover .role-title {
  color: var(--color-juniper-light);
}

/* Password entry step styling */
.login-password-box {
  width: min(440px, 100%);
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  flex: 0 0 auto;
  background: rgba(52, 55, 35, 0.95);
  border: 1px solid rgba(239, 233, 215, 0.18);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  padding: 40px 36px;
  gap: 25px;
  color: var(--color-candle);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.login-container.login-password-step {
  align-items: flex-start;
}

.login-container.login-password-step .login-password-box {
  margin: auto 0;
}

.login-password-box .login-header {
  color: var(--color-candle);
  gap: 15px;
}

.selected-role-card-wrapper {
  width: 90px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  border: none;
  background-color: transparent;
}

.selected-role-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.login-password-box .login-header h2 {
  font-size: 1.5rem;
  color: var(--color-candle);
  text-shadow: none;
}

.login-password-box .login-header p {
  color: var(--color-leaf);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.login-back-btn {
  position: absolute;
  top: 15px;
  left: 20px;
  background: none;
  border: none;
  color: rgba(239, 233, 215, 0.6);
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.login-back-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.login-back-btn:hover {
  color: var(--color-candle);
  transform: translateX(-2px);
}

.login-password-box #login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-password-box .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-password-box label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-candle-darker);
}

.login-password-box .form-input {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(239, 233, 215, 0.15) !important;
  color: var(--color-candle) !important;
  border-radius: var(--border-radius-md);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--font-family);
  transition: var(--transition-smooth);
}

.login-password-box .form-input:focus {
  border-color: var(--color-leaf) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(137, 136, 97, 0.2);
}

.login-error-msg {
  color: #ff9d9b;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  background-color: rgba(125, 40, 38, 0.25);
  border: 1px solid rgba(125, 40, 38, 0.4);
  padding: 10px;
  border-radius: var(--border-radius-sm);
  width: 100%;
  box-sizing: border-box;
}

.login-btn {
  background-color: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
  color: var(--color-candle) !important;
  font-weight: 700;
  transition: var(--transition-smooth);
}

.login-version-badge {
  color: rgba(239, 233, 215, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.login-btn:hover {
  background-color: var(--color-coral-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(125, 40, 38, 0.35);
}

.login-back-btn[hidden] {
  display: none !important;
}

/* Keep the active password field above the iPad on-screen keyboard. */
.login-container.login-keyboard-open {
  align-items: flex-start;
}

html.ptk-keyboard-open .login-container {
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: calc(var(--ptk-keyboard-inset, 0px) + 16px);
}

.login-container.login-keyboard-open .login-password-box,
html.ptk-keyboard-open .login-password-box {
  max-width: 520px;
  margin: 6px 0 24px;
  padding: 18px 24px;
  gap: 12px;
  max-height: calc(100dvh - 12px);
}

.login-container.login-keyboard-open .login-password-box .login-header,
html.ptk-keyboard-open .login-password-box .login-header {
  min-height: 78px;
  flex-direction: row;
  justify-content: center;
  text-align: left;
  gap: 14px;
}

.login-container.login-keyboard-open .selected-role-card-wrapper,
html.ptk-keyboard-open .selected-role-card-wrapper {
  width: 48px;
  height: 77px;
  flex: 0 0 auto;
}

.login-container.login-keyboard-open .login-password-box .login-header h2,
html.ptk-keyboard-open .login-password-box .login-header h2 {
  font-size: 1.2rem;
}

.login-container.login-keyboard-open .login-password-box #login-form,
html.ptk-keyboard-open .login-password-box #login-form {
  gap: 10px;
}

.login-container.login-keyboard-open .login-password-box .form-group,
html.ptk-keyboard-open .login-password-box .form-group {
  gap: 5px;
}

.login-container.login-keyboard-open .login-password-box #login-user-select-group,
html.ptk-keyboard-open .login-password-box #login-user-select-group {
  margin-bottom: 2px !important;
}

.login-container.login-keyboard-open .login-btn,
html.ptk-keyboard-open .login-btn {
  margin-top: 4px !important;
}

@media (max-height: 700px) {
  .login-password-box {
    padding: 22px 28px;
    gap: 14px;
  }

  .selected-role-card-wrapper {
    width: 60px;
    height: 96px;
  }
}

@media (max-width: 600px) {
  .login-container {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .login-password-box {
    width: 100%;
    max-width: 420px;
    padding: 28px 22px;
    gap: 18px;
    border-radius: 12px;
  }

  .login-password-box .login-header {
    gap: 10px;
  }

  .selected-role-card-wrapper {
    width: 68px;
    height: 88px;
  }

  .login-password-box .login-header h2 {
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .login-password-box .login-header p {
    font-size: 0.72rem;
  }

  .login-password-box #login-form {
    gap: 14px;
  }

  .login-password-box .form-input {
    min-height: 46px;
    font-size: 16px !important;
  }

  .role-selection-grid {
    gap: 16px;
  }
  .role-card-img {
    width: 140px;
    height: 224px;
  }
  .login-header h2 {
    font-size: 1.8rem;
  }
}

@media (max-height: 560px) {
  .login-container {
    align-items: flex-start;
    padding-top: 6px;
  }

  .login-password-box {
    margin: 0;
    padding: 14px 18px;
    gap: 9px;
    max-height: calc(100dvh - 12px);
  }

  .login-password-box .login-header {
    min-height: 64px;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }

  .selected-role-card-wrapper {
    width: 42px;
    height: 62px;
  }

  .login-password-box .login-header h2 {
    font-size: 1.08rem;
  }

  .login-password-box .login-header p {
    font-size: 0.66rem;
  }

  .login-password-box #login-form,
  .login-password-box .form-group {
    gap: 6px;
  }

  .login-password-box .form-input {
    min-height: 42px;
  }

  .login-btn {
    min-height: 42px;
    margin-top: 3px !important;
  }
}

/* ==========================================================================
   USER PROFILE WIDGET
   ========================================================================== */
.sidebar-user-profile {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  gap: 10px;
}

.sidebar-user-profile .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-leaf);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: inherit;
  cursor: pointer;
  overflow: visible;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sidebar-user-profile .user-avatar:hover,
.sidebar-user-profile .user-avatar:focus-visible {
  border-color: rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
  outline: none;
}

.sidebar-user-profile .user-avatar[aria-busy="true"] {
  cursor: wait;
  opacity: 0.62;
}

.sidebar-user-profile .user-avatar svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-candle);
}

.sidebar-user-profile .user-avatar > svg[hidden] { display: none; }

.sidebar-user-profile .user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.sidebar-user-profile .user-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-candle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-profile .user-role {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-leaf);
  background-color: rgba(137, 136, 97, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
  text-transform: uppercase;
}

.sidebar-user-profile .btn-logout {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  color: var(--color-candle-darker);
  transition: var(--transition-smooth);
}

.sidebar-user-profile .btn-logout:hover {
  background-color: rgba(125, 40, 38, 0.2);
  color: #ff9d9b;
}

.sidebar-user-profile .btn-logout svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform 0.2s;
}

.sidebar-user-profile .btn-logout:hover svg {
  transform: translateX(2px);
}

/* ==========================================================================
   QUOTATION STATUS BADGES (SPECIAL OVERRIDES)
   ========================================================================== */
.badge-status.agreed {
  background-color: rgba(40, 167, 69, 0.12) !important;
  color: #28a745 !important;
  border: 1px solid rgba(40, 167, 69, 0.3) !important;
  font-weight: 700 !important;
}

.badge-status.pending {
  background-color: rgba(255, 193, 7, 0.12) !important;
  color: #b58900 !important;
  border: 1px solid rgba(255, 193, 7, 0.3) !important;
  font-weight: 700 !important;
}

.quotations-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.quotation-sum-card {
  background-color: var(--color-container-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quotation-sum-card .label {
  font-size: 0.8rem;
  color: var(--color-text-muted-light);
  font-weight: 600;
}

.quotation-sum-card .value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-light);
}

.quotation-sum-card.total-active {
  border-left: 4px solid var(--color-leaf);
}

.quotation-sum-card.total-agreed {
  border-left: 4px solid #28a745;
}

.quotation-sum-card.total-pending {
  border-left: 4px solid #b58900;
}

/* Employee View Toggle Switcher */
.view-toggle-group {
  display: flex;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  padding: 4px;
  border: 1px solid rgba(239, 233, 215, 0.15);
}

.view-toggle-btn {
  background: none;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-candle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
  opacity: 0.75;
}

.view-toggle-btn.active {
  background-color: var(--color-candle);
  color: var(--color-juniper) !important;
  opacity: 1;
}

.view-toggle-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.08);
  opacity: 0.9;
}

/* Employee Card Layout */
.employee-card {
  background-color: var(--color-container-bg);
  border: 4px solid #898861; /* Olive border frame */
  border-radius: var(--border-radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-sizing: border-box;
  width: 100%;
}

.employee-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-leaf);
}

.employee-card-photo-wrapper {
  width: 100%;
  height: 280px; /* Fixed height for portrait uniformity */
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background-color: rgba(0, 0, 0, 0.05);
}

.employee-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.employee-card:hover .employee-card-img {
  transform: scale(1.02);
}

.employee-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-juniper-light);
  color: var(--color-candle);
}

.employee-card-placeholder svg {
  width: 64px;
  height: 64px;
}

.employee-card-info {
  background-color: var(--color-card-bg);
  border-radius: var(--border-radius-md);
  padding: 12px;
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.employee-card-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.employee-card-code {
  font-family: monospace;
  font-weight: 700;
  color: var(--color-text-muted-light);
  font-size: 0.8rem;
}

.employee-card-name {
  font-weight: 800;
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.employee-card-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.employee-card-nickname {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-candle);
  background-color: var(--color-juniper);
  padding: 1px 8px;
  border-radius: 20px;
}

.employee-card-dept {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-light);
  background-color: rgba(137, 136, 97, 0.15);
  padding: 1px 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(137, 136, 97, 0.25);
}

/* Document Hub Swatch Cards styling */
.hub-catalog{width:min(1180px,100%);margin:0 auto 36px;padding:22px;border:2px solid #6e7c89;border-radius:7px;background:#e7e7e0;box-shadow:0 6px 18px rgba(52,55,35,.11)}
.hub-catalog-header{padding:0 2px 16px;border-bottom:1px solid rgba(110,124,137,.3)}
.hub-catalog-header span{display:block;color:#7d2826;font:800 .68rem "Outfit",sans-serif;letter-spacing:0}
.hub-catalog-header h3{margin:3px 0 2px;color:#131936;font:800 1.25rem "Outfit","Noto Sans Thai",sans-serif;letter-spacing:0}
.hub-catalog-header p{margin:0;color:#6e7c89;font-size:.8rem}
.hub-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:18px}
.hub-catalog-card{position:relative;display:flex;min-width:0;min-height:235px;padding:18px;box-sizing:border-box;flex-direction:column;align-items:stretch;overflow:hidden;border:1px solid var(--hub-border);border-radius:7px;background:var(--hub-bg);box-shadow:0 7px 17px rgba(52,55,35,.14);color:var(--hub-fg);font:inherit;text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.hub-catalog-card:hover{transform:translateY(-3px);box-shadow:0 11px 22px rgba(52,55,35,.2)}
.hub-catalog-card:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:0 0 0 3px #7d2826}
.hub-catalog-card-glow{position:absolute;top:-38px;right:-28px;width:120px;height:120px;border-radius:50%;background:currentColor;opacity:.07;pointer-events:none}
.hub-catalog-card-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font:800 .68rem "Outfit",sans-serif;letter-spacing:0}
.hub-catalog-card-head>span{opacity:.82}.hub-catalog-card-head>b{padding:3px 7px;border:1px solid currentColor;border-radius:999px;color:var(--hub-status-fg,currentColor);font-size:.58rem;white-space:nowrap;opacity:.88}
.hub-catalog-card-title{position:relative;margin-top:13px;font:800 1.28rem "Outfit","Noto Sans Thai",sans-serif;letter-spacing:0}
.hub-catalog-card-description{position:relative;min-height:38px;margin-top:4px;font-size:.72rem;line-height:1.45;opacity:.78}
.hub-catalog-card-preview{position:relative;display:grid;width:100%;box-sizing:border-box;gap:7px;margin-top:15px;padding:11px;border:1px solid currentColor;border-radius:6px;background:rgba(255,255,255,.12);color:var(--hub-preview-fg,currentColor);font-size:.66rem;opacity:.94}
.hub-catalog-preview-head,.hub-catalog-preview-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.hub-catalog-preview-head{padding-bottom:7px;border-bottom:1px solid currentColor}.hub-catalog-preview-head b{font:800 .6rem "Outfit",sans-serif}.hub-catalog-preview-head small,.hub-catalog-preview-row small{opacity:.75}.hub-catalog-preview-row strong{font-size:.68rem}
.hub-catalog-database .hub-catalog-card{min-height:230px}
@media(max-width:1050px){.hub-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.hub-catalog{padding:14px}.hub-catalog-grid{grid-template-columns:minmax(0,1fr);gap:12px}.hub-catalog-card,.hub-catalog-database .hub-catalog-card{min-height:225px}}

.document-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 30px 0;
}

.sidebar-user-profile .user-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-leaf);
}

.sidebar-user-profile .user-avatar > img[hidden] { display: none; }

.sidebar-user-profile .user-avatar-edit {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: #49535c;
  color: #f7f6f1;
}

.sidebar-user-profile .user-avatar-edit svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
}

.document-hub:has(> .document-hub-card:nth-child(7)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
}

.document-hub:has(> .document-hub-card:nth-child(7)) > .document-hub-card {
  height: 108px;
}

.document-hub:has(> .document-hub-card:nth-child(7)) > .document-hub-card:last-child:nth-child(odd) {
  grid-column: 1;
  width: 100%;
  justify-self: stretch;
}

@media (max-width: 700px) {
  .document-hub:has(> .document-hub-card:nth-child(7)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-hub:has(> .document-hub-card:nth-child(7)) > .document-hub-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

.document-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 120px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.document-hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.document-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.document-hub-card:hover::before {
  opacity: 1;
}

.document-hub-card:active {
  transform: translateY(-1px);
}

.document-archive{width:min(1180px,100%);margin:0 auto 36px;border:1px solid rgba(52,55,35,.16);background:#fff;border-radius:7px;overflow:hidden;box-shadow:0 5px 18px rgba(52,55,35,.08)}
.document-archive>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-left:6px solid var(--archive-accent);border-bottom:1px solid #e8e5dc;background:#fbfaf6}.document-archive>header span{font:800 .7rem "Outfit";color:#7d2826}.document-archive>header h3{margin:2px 0;font-size:1.3rem}.document-archive>header p{margin:0;color:#777;font-size:.8rem}.document-archive>header>strong{white-space:nowrap;font-size:1rem}
.document-archive-toolbar{padding:14px 18px;border-bottom:1px solid #eee;background:#f7f4ec}.document-archive-toolbar label{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;max-width:620px;padding:0 12px;border:1px solid #d8d2c3;border-radius:5px;background:#fff}.document-archive-toolbar label span{font-size:1.25rem}.document-archive-toolbar input{height:42px;border:0;outline:0;background:transparent;font:inherit}
.document-archive-row{display:grid;grid-template-columns:78px minmax(220px,1.35fr) minmax(210px,1fr) 120px 230px;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid #eee}.document-archive-row:last-child{border-bottom:0}.document-archive-row[hidden]{display:none}.document-archive-thumb{display:grid;width:68px;height:54px;place-items:center;overflow:hidden;border:1px solid rgba(52,55,35,.14);border-left:4px solid var(--archive-accent);background:#f4f2ec;color:#5b5a50;font:800 .78rem "Outfit"}.document-archive-thumb img{width:100%;height:100%;object-fit:cover}.document-archive-main span,.document-archive-main strong,.document-archive-main small,.document-archive-detail span,.document-archive-detail strong,.document-archive-detail small{display:block}.document-archive-main span,.document-archive-detail span{font:800 .68rem "Outfit";color:#7d2826}.document-archive-main strong,.document-archive-detail strong{font-size:.86rem}.document-archive-main small,.document-archive-detail small{color:#777;font-size:.72rem}.document-archive-status span{display:inline-flex;padding:5px 8px;border-radius:4px;background:#f0eee7;font-size:.7rem;font-weight:800;white-space:nowrap}.document-archive-status .approved,.document-archive-status .completed{background:#e8f0e5;color:#3f6339}.document-archive-status .open{background:#f8e5e2;color:#8a2d29}.document-archive-actions{display:flex;justify-content:flex-end;gap:7px}.document-archive-actions button{min-height:34px;padding:6px 10px;border:1px solid rgba(125,40,38,.32);border-radius:5px;background:#fff;color:#7d2826;font-weight:700;cursor:pointer;white-space:nowrap}.document-archive-actions .document-archive-primary{background:rgba(125,40,38,.06)}.document-archive-empty{display:grid;min-height:220px;place-items:center;align-content:center;gap:5px;color:#777;text-align:center}.document-archive-empty strong{color:#343723}
@media(max-width:980px){.document-archive-row{grid-template-columns:68px minmax(0,1fr) 110px}.document-archive-detail{grid-column:2}.document-archive-actions{grid-column:2/4;justify-content:flex-start}.document-archive-status{grid-column:3;grid-row:1}}
@media(max-width:620px){.document-archive>header{align-items:flex-start}.document-archive-row{grid-template-columns:58px minmax(0,1fr);padding:12px}.document-archive-thumb{width:52px;height:48px}.document-archive-detail,.document-archive-status,.document-archive-actions{grid-column:2}.document-archive-status{grid-row:auto}.document-archive-actions{flex-wrap:wrap}.document-archive-toolbar{padding:10px}.document-archive>header{padding:16px}}

/* Production document archives share the Document Hub table language. */
.production-archive-workspace {
  width: min(1180px, 100%);
  margin: 0 auto 36px;
}

.production-archive-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 50px;
  margin-bottom: 26px;
  padding: 12px 18px;
  border-left: 5px solid #8d2a27;
  border-radius: 6px;
  background: #30351f;
  color: #f7f2e0;
  box-shadow: 0 5px 14px rgba(35, 37, 23, 0.1);
}

.production-archive-banner strong,
.production-archive-banner span {
  font-size: 0.76rem;
  font-weight: 800;
}

.production-archive-banner strong::after {
  content: " ·";
}

.production-archive-shell {
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 6px 16px rgba(35, 37, 23, 0.07);
}

.production-archive-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.13);
  background: #dfd9c7;
}

.production-archive-toolbar label {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 4px solid var(--archive-accent);
  border-radius: 5px;
  background: #fffdf8;
  color: #343723;
}

.production-archive-toolbar input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #232517;
  font: 650 0.9rem var(--font-family);
}

.production-archive-toolbar input::placeholder {
  color: #747467;
  opacity: 1;
}

.production-archive-count {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  min-width: 150px;
  padding: 7px 14px;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-top: 3px solid var(--archive-accent);
  border-radius: 5px;
  background: #f7f2e0;
}

.production-archive-count span,
.production-archive-count small {
  color: #6c6b5c;
  font-size: 0.65rem;
  font-weight: 750;
}

.production-archive-count strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  color: #343723;
  font: 800 1.65rem "Outfit", sans-serif;
}

.production-archive-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.production-archive-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.production-archive-table th {
  padding: 13px 11px;
  border-right: 1px solid rgba(247, 242, 224, 0.12);
  background: #30351f;
  color: #f7f2e0;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center !important;
}

.production-archive-table th:nth-child(1) { width: 13%; }
.production-archive-table th:nth-child(2) { width: 25%; }
.production-archive-table th:nth-child(3) { width: 17%; }
.production-archive-table th:nth-child(4) { width: 17%; }
.production-archive-table th:nth-child(5) { width: 11%; }
.production-archive-table th:nth-child(6) { width: 17%; }

.production-archive-row td {
  padding: 13px 11px;
  border-right: 1px solid rgba(52, 55, 35, 0.08);
  border-bottom: 1px solid rgba(52, 55, 35, 0.1);
  background: rgba(255, 253, 248, 0.94);
  color: #343723;
  font-size: 0.78rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.production-archive-row:nth-child(even) td {
  background: rgba(246, 242, 230, 0.82);
}

.production-archive-row[hidden] {
  display: none;
}

.production-archive-row td > strong,
.production-archive-row td > small {
  display: block;
}

.production-archive-row td > small {
  margin-top: 3px;
  color: #777565;
  font-size: 0.68rem;
}

.production-archive-code {
  color: #7d2826;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
}

.production-archive-project {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.production-archive-project .document-archive-thumb {
  width: 58px;
  height: 48px;
}

.production-archive-project span,
.production-archive-project strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-archive-project span {
  color: #7d2826;
  font: 800 0.66rem "Outfit", sans-serif;
}

.production-archive-project strong {
  margin-top: 2px;
  font-size: 0.8rem;
}

.production-archive-customer {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

.production-archive-row .document-archive-status {
  text-align: center;
}

.production-archive-row .document-archive-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.production-archive-row .document-archive-actions button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 0.7rem;
}

.production-archive-empty-row td {
  height: 180px;
  padding: 28px;
  background: #f7f2e0;
  color: #777565;
  text-align: center;
}

.production-archive-empty-row strong,
.production-archive-empty-row span {
  display: block;
}

.production-archive-empty-row strong {
  color: #343723;
  font-size: 0.94rem;
}

.production-archive-empty-row span {
  margin-top: 5px;
  font-size: 0.76rem;
}

.production-archive-empty-row[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .production-archive-workspace {
    width: 100%;
  }

  .production-archive-table th:nth-child(1) { width: 14%; }
  .production-archive-table th:nth-child(2) { width: 25%; }
  .production-archive-table th:nth-child(3) { width: 15%; }
  .production-archive-table th:nth-child(4) { width: 17%; }
  .production-archive-table th:nth-child(5) { width: 12%; }
  .production-archive-table th:nth-child(6) { width: 17%; }

  .production-archive-project {
    grid-template-columns: 1fr;
  }

  .production-archive-project .document-archive-thumb {
    display: none;
  }
}

@media (max-width: 720px) {
  .production-archive-banner {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 14px;
  }

  .production-archive-banner strong::after {
    content: "";
  }

  .production-archive-toolbar {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .production-archive-count {
    grid-template-columns: auto 1fr auto;
    min-width: 0;
  }

  .production-archive-count strong {
    grid-row: auto;
    grid-column: 2;
    justify-self: end;
    font-size: 1.3rem;
  }

  .production-archive-count small {
    align-self: center;
    margin-left: 5px;
  }

  .production-archive-table,
  .production-archive-table tbody,
  .production-archive-row {
    display: block;
  }

  .production-archive-table thead {
    display: none;
  }

  .production-archive-row {
    margin: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(52, 55, 35, 0.14);
    border-left: 4px solid var(--archive-accent);
    border-radius: 5px;
    background: #fffdf8;
  }

  .production-archive-row td,
  .production-archive-row:nth-child(even) td {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 2px;
    border-right: 0;
    border-bottom: 1px dashed rgba(52, 55, 35, 0.1);
    background: transparent;
    text-align: left;
  }

  .production-archive-row td::before {
    content: attr(data-label);
    color: #777565;
    font-size: 0.68rem;
    font-weight: 750;
  }

  .production-archive-row .document-archive-status,
  .production-archive-row .document-archive-actions {
    justify-content: flex-start;
    text-align: left;
  }

  .production-archive-empty-row,
  .production-archive-empty-row td {
    display: table-row;
  }

  .production-archive-empty-row td {
    display: table-cell;
  }
}

/* Card Themes from the Palette Reference */
.card-coral {
  background-color: var(--color-coral);
  color: #ffffff;
  border: 1px solid rgba(125, 40, 38, 0.3);
}

.card-candle {
  background-color: var(--color-candle);
  color: var(--color-juniper);
  border: 1px solid var(--color-candle-darker);
}

.card-leaf {
  background-color: var(--color-leaf);
  color: #ffffff;
  border: 1px solid rgba(137, 136, 97, 0.3);
}

.card-juniper {
  background-color: var(--color-juniper);
  color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.3);
}

.card-olive-petal {
  background-color: #A3A380;
  color: #ffffff;
  border: 1px solid rgba(163, 163, 128, 0.3);
}

.card-golden-clover {
  background-color: #D7CE93;
  color: var(--color-juniper);
  border: 1px solid rgba(215, 206, 147, 0.4);
}

.card-artic-daisy {
  background-color: #EFEBCE;
  color: var(--color-juniper);
  border: 1px solid rgba(239, 235, 206, 0.5);
}

.card-rose-blush {
  background-color: #D8A48F;
  color: #ffffff;
  border: 1px solid rgba(216, 164, 143, 0.3);
}

.card-peach-blossom {
  background-color: #BB8588;
  color: #ffffff;
  border: 1px solid rgba(187, 133, 136, 0.3);
}

.card-cinnamon {
  background-color: #6b4139;
  color: #ffffff;
  border: 1px solid rgba(107, 65, 57, 0.3);
}

.card-baby-blue {
  background-color: #b5c7d3;
  color: var(--color-juniper);
  border: 1px solid rgba(181, 199, 211, 0.4);
}

.card-crystal-gray {
  background-color: #d7cbc4;
  color: var(--color-juniper);
  border: 1px solid rgba(215, 203, 196, 0.4);
}

/* Swatch card titles & details */
.doc-card-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  opacity: 0.75;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.doc-card-title {
  font-family: 'Sarabun', var(--font-family);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}

.card-candle .doc-card-tag {
  opacity: 0.7;
  color: var(--color-juniper-dark);
}

/* Pagination Styling */
.btn-pagination {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-pagination:hover:not([disabled]) {
  background-color: var(--color-candle) !important;
  color: var(--color-juniper) !important;
  border-color: var(--color-leaf) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 2px 4px rgba(52, 55, 35, 0.1);
}

.btn-pagination:active:not([disabled]) {
  transform: translateY(0);
}

/* Scoped Column Widths for Custom Database Tables */
.custom-table th.col-num, .custom-table td.col-num { width: 40px; text-align: center; }
.custom-table th.col-id, .custom-table td.col-id { width: 85px; white-space: nowrap; }
.custom-table th.col-name, .custom-table td.col-name { width: 220px; min-width: 220px; }
.custom-table th.col-address, .custom-table td.col-address { width: 200px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.custom-table th.col-type, .custom-table td.col-type { width: 95px; white-space: nowrap; }
.custom-table th.col-taxid, .custom-table td.col-taxid { width: 110px; white-space: nowrap; }
.custom-table th.col-phone, .custom-table td.col-phone { width: 80px; }
.custom-table th.col-jobs, .custom-table td.col-jobs { width: 90px; text-align: center; }
.custom-table th.col-actions, .custom-table td.col-actions { width: 90px; text-align: center; }
.custom-table th.col-img, .custom-table td.col-img { width: 80px; text-align: center; }
.custom-table th.col-posture, .custom-table td.col-posture { width: 100px; }
.custom-table th.col-scale, .custom-table td.col-scale { width: 140px; }
.custom-table th.col-color, .custom-table td.col-color { width: 120px; }

/* Artwork Thumbnail styling */
.artwork-thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--border-radius-sm, 4px);
  border: 1px solid rgba(52, 55, 35, 0.12);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: block;
  margin: 0 auto;
}
.artwork-thumbnail:hover {
  transform: scale(1.25);
  box-shadow: var(--shadow-md);
  z-index: 10;
  position: relative;
}

/* Responsive adjustments for iPads and medium screens (up to 1200px) */
@media (max-width: 1200px) {
  .view-container {
    padding: 20px 15px !important;
  }
  
  .custom-table th, 
  .custom-table td {
    padding: 10px 5px !important;
    font-size: 0.78rem !important;
  }

  .custom-table td {
    font-size: 0.78rem !important;
  }
  
  .badge-status {
    padding: 2px 6px !important;
    font-size: 0.7rem !important;
  }

  /* Shrink column widths on tablets to fit within ~730px */
  .custom-table th.col-num, .custom-table td.col-num { width: 30px; }
  .custom-table th.col-id, .custom-table td.col-id { width: 70px; }
  .custom-table th.col-name, .custom-table td.col-name { width: 140px; min-width: 140px; }
  .custom-table th.col-address, .custom-table td.col-address { width: 110px; max-width: 110px; }
  .custom-table th.col-type, .custom-table td.col-type { width: 75px; }
  .custom-table th.col-taxid, .custom-table td.col-taxid { width: 85px; }
  .custom-table th.col-phone, .custom-table td.col-phone { width: 70px; }
  .custom-table th.col-jobs, .custom-table td.col-jobs { width: 70px; }
  .custom-table th.col-actions, .custom-table td.col-actions { width: 70px; }
  .custom-table th.col-img, .custom-table td.col-img { width: 60px; }
  .custom-table th.col-posture, .custom-table td.col-posture { width: 80px; }
  .custom-table th.col-scale, .custom-table td.col-scale { width: 100px; }
  .custom-table th.col-color, .custom-table td.col-color { width: 90px; }
  
  /* Make action buttons slightly smaller so they fit */
  .custom-table td.col-actions .btn {
    padding: 4px 6px !important;
  }
  .custom-table td.col-actions svg {
    width: 10px;
    height: 10px;
  }
}

/* ==========================================================================
   DETAILED ARTWORK FORM & COST ESTIMATOR
   ========================================================================== */

.artwork-form-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px 40px 10px;
  width: 100%;
  box-sizing: border-box;

  /* Force dark contrast on light card backgrounds */
  --color-text-light: var(--color-juniper) !important;
  --color-text-muted-light: var(--color-juniper-light) !important;
  --color-text-dark: var(--color-juniper) !important;
  --color-text-muted-dark: var(--color-juniper-light) !important;
  color: var(--color-juniper) !important;
}

/* Specific label contrast enhancements */
.artwork-form-layout label {
  color: var(--color-juniper) !important;
  font-weight: 700 !important;
}

/* Sidebar Navigation */
.form-nav-container {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}

.form-nav-container::-webkit-scrollbar {
  width: 5px;
}

.form-nav-container::-webkit-scrollbar-track {
  background: transparent;
}

.form-nav-container::-webkit-scrollbar-thumb {
  background: rgba(137, 136, 97, 0.4);
  border-radius: 3px;
}

.form-nav-container::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 136, 97, 0.7);
}

.form-nav-sidebar {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-md, 8px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

.form-nav-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-text-muted-light);
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.06);
  margin-bottom: 8px;
}

.form-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted-dark);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  text-align: left;
  background: none;
  border: none;
  width: 100%;
}

.form-nav-item:hover {
  color: var(--color-juniper);
  background-color: rgba(52, 55, 35, 0.04);
}

.form-nav-item.active {
  color: #ffffff;
  background-color: var(--color-leaf) !important;
  box-shadow: var(--shadow-sm);
}

/* Right Content Column */
.form-sections-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0; /* Prevents overflow inside flex child */
}

.form-section-card {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: var(--border-radius-lg, 12px);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 195px;
}

.form-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-juniper);
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  padding-bottom: 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-title svg {
  color: var(--color-leaf);
}

/* Cost Summary Sticky Widget */
.cost-summary-card {
  background-color: var(--color-juniper) !important;
  background-image: linear-gradient(135deg, var(--color-juniper), #25281a) !important;
  border: 1px solid rgba(52, 55, 35, 0.15) !important;
  border-radius: var(--border-radius-md, 8px) !important;
  padding: 16px !important;
  color: #efea9f !important;
  box-shadow: var(--shadow-md) !important;
  display: flex;
  flex-direction: column !important;
  gap: 8px !important;
  
  /* Reset local variables back to light text for this dark card */
  --color-text-light: var(--color-candle) !important;
  --color-text-muted-light: var(--color-candle-darker) !important;
}

.cost-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.8rem !important;
  opacity: 0.85 !important;
  color: #ffffff !important;
}

.cost-summary-total {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
  color: #efea9f !important;
}

/* Drag & Drop Upload Zone */
.upload-dragzone {
  border: 2px dashed rgba(52, 55, 35, 0.2);
  border-radius: var(--border-radius-md, 8px);
  padding: 24px;
  text-align: center;
  background-color: rgba(52, 55, 35, 0.02);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.upload-dragzone:hover, .upload-dragzone.dragover {
  border-color: var(--color-leaf);
  background-color: rgba(52, 55, 35, 0.06);
}

.upload-dragzone-text {
  font-size: 0.85rem;
  color: var(--color-text-muted-dark);
  font-weight: 600;
}

.upload-dragzone-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted-light);
}

/* Image Thumbnails Grid */
.uploaded-thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.uploaded-thumb-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid rgba(52, 55, 35, 0.12);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: #fcfbfa;
}

.uploaded-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploaded-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: rgba(140, 29, 26, 0.85);
  color: #ffffff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease;
}

.uploaded-thumb-remove:hover {
  background-color: rgba(140, 29, 26, 1);
}

.project-images-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
}
.project-images-heading > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.project-images-heading strong { color: var(--color-juniper); font-size: 1rem; }
.project-images-heading span { color: var(--color-text-muted-light); font-size: 0.78rem; line-height: 1.45; }
.project-images-upload-btn {
  min-height: 38px;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  background: #ffffff !important;
  border-color: rgba(52, 55, 35, 0.22) !important;
  color: var(--color-juniper) !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}
.project-images-cover-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--color-text-muted-light);
  font-size: 0.75rem;
}
.project-images-cover-symbol { color: #8b6f35; font-size: 0.9rem; }
.project-images-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.uploaded-thumb-wrapper.project-image-thumb {
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  border-color: rgba(52, 55, 35, 0.18);
  box-shadow: 0 2px 7px rgba(52, 55, 35, 0.08);
}
.project-image-thumb > img[role="button"] { cursor: zoom-in; }
.project-image-thumb > img[role="button"]:focus-visible {
  outline: 3px solid rgba(125, 41, 38, 0.72);
  outline-offset: -3px;
}
.uploaded-thumb-wrapper.project-image-thumb.is-cover {
  border: 2px solid #8b6f35;
  box-shadow: 0 0 0 2px rgba(139, 111, 53, 0.12);
}
.project-image-cover-btn {
  position: absolute;
  left: 7px;
  bottom: 7px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(52, 55, 35, 0.2);
  background: rgba(247, 246, 241, 0.94);
  color: #49535c;
  backdrop-filter: none;
  box-shadow: 0 2px 7px rgba(27, 30, 24, 0.18);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.project-image-cover-btn svg { width: 17px; height: 17px; pointer-events: none; }
.project-image-cover-btn:hover { background: #ffffff; color: #7d2826; transform: translateY(-1px); }
.project-image-cover-btn:focus-visible { outline: 3px solid rgba(125, 40, 38, 0.3); outline-offset: 2px; }
.project-image-cover-btn.is-cover {
  background: #8b6f35;
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
.project-image-cover-btn.is-cover:hover { background: #775d2b; color: #ffffff; }
.project-image-thumb .uploaded-thumb-remove {
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.project-images-empty {
  min-height: 120px;
  margin-top: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px dashed rgba(52, 55, 35, 0.24);
  color: var(--color-text-muted-light);
  background: rgba(52, 55, 35, 0.025);
  text-align: center;
  font-size: 0.82rem;
}
@media (max-width: 640px) {
  .project-images-heading { align-items: stretch; flex-direction: column; }
  .project-images-upload-btn { width: 100%; }
  .project-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}

/* Metal Checkbox Grid */
.metal-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.metal-row-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(52, 55, 35, 0.02);
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.metal-row-inputs {
  display: flex;
  gap: 4px;
  flex-grow: 1;
}

.metal-row-inputs input {
  padding: 4px 6px;
  font-size: 0.78rem;
  border-radius: 4px;
  border: 1px solid rgba(52, 55, 35, 0.15);
  width: 100%;
  text-align: right;
}

.metal-row-inputs input[disabled] {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--color-text-muted-light);
  border-color: rgba(52, 55, 35, 0.06);
  cursor: not-allowed;
}

/* Surface Finish Grid */
.finish-checkbox-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finish-row-item {
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  align-items: center;
  gap: 10px;
  background-color: rgba(52, 55, 35, 0.02);
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: 6px;
  padding: 6px 12px;
}

.finish-row-item input[type="text"], .finish-row-item input[type="number"] {
  padding: 6px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(52, 55, 35, 0.15);
}

.finish-row-item input[disabled] {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--color-text-muted-light);
  border-color: rgba(52, 55, 35, 0.06);
  cursor: not-allowed;
}

/* Mold Table */
.mold-table-mini {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.8rem;
}

.mold-table-mini th {
  background-color: rgba(52, 55, 35, 0.06);
  color: var(--color-juniper);
  font-weight: 800;
  padding: 8px;
  text-align: center;
  border: 1px solid rgba(52, 55, 35, 0.1);
}

.mold-table-mini td {
  padding: 8px;
  border: 1px solid rgba(52, 55, 35, 0.08);
  color: var(--color-juniper);
}

.mold-table-mini tr:nth-child(even) {
  background-color: rgba(52, 55, 35, 0.01);
}

/* Dropdown Item hover style */
#mold-item-dropdown-menu .dropdown-item:hover {
  background-color: rgba(52, 55, 35, 0.06) !important;
}

/* Responsive adjustments for Form Layout */
@media (max-width: 1024px) {
  .artwork-form-layout {
    flex-direction: column;
    padding: 0 10px 30px 10px;
  }
  
  .form-nav-container {
    width: 100%;
    position: static;
  }
  
  .form-nav-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    white-space: nowrap;
    gap: 8px;
  }
  
  .form-nav-title {
    display: none;
  }
  
  .form-nav-item {
    width: auto;
    display: inline-flex;
    padding: 6px 12px;
  }
  
  .cost-summary-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(52, 55, 35, 0.2);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
  }
  
  .cost-summary-row {
    display: none; /* Hide breakdown on mobile bar */
  }
  
  .cost-summary-total {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    font-size: 1.3rem;
    width: 100%;
  }

  .form-sections-column {
    padding-bottom: 80px; /* Give room for sticky cost summary footer */
  }
}

/* Searchable Select Dropdown component */
.searchable-select-container {
  position: relative;
  width: 100%;
}
.master-record-picker {
  position: relative;
  width: 100%;
}
.master-record-picker-icon {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6f7456;
  font-size: 1.1rem;
  pointer-events: none;
}
.master-record-picker > input[type="search"] {
  padding-left: 38px !important;
  padding-right: 34px !important;
  min-height: 42px;
}
.master-record-picker.has-selection > input,
.designer-block-item.has-selection .designer-search-input {
  border-color: #667a58;
  box-shadow: 0 0 0 2px rgba(102, 122, 88, 0.12);
}

.master-record-picker-invalid {
  border-color: #9b2424 !important;
  box-shadow: 0 0 0 3px rgba(155, 36, 36, 0.12) !important;
}

.resp-search-input.has-selection {
  border-color: #6f7d55 !important;
  background: #f7f8f2 !important;
  font-weight: 700;
}
.resp-picker-control {
  flex: 1 1 260px;
  min-width: 180px;
}
.resp-picker-control .master-record-picker-icon {
  display: grid;
  place-items: center;
}
.resp-picker-control .master-record-picker-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.resp-picker-control > .resp-search-input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  font-size: .82rem;
}
.resp-picker-control .resp-dropdown-results {
  min-width: min(430px, calc(100vw - 32px));
  max-height: 310px;
}
.resp-picker-option .master-record-picker-option-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resp-picker-option .master-record-picker-option-meta {
  flex: 0 0 auto;
  max-width: 52%;
}
.master-record-picker-results {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 1200;
  display: none;
  max-height: 290px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(35, 38, 24, 0.16);
}
.master-record-picker-summary {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: #f3f0e6;
  color: #737765;
  font-size: 0.72rem;
  font-weight: 700;
}
.master-record-picker-option,
.master-record-picker-add {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  background: #fff;
  color: #343723;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.master-record-picker-option:hover,
.master-record-picker-option:focus-visible {
  background: #eef1e8;
  outline: none;
}
.master-record-picker-option-main,
.master-record-picker-option-meta {
  display: block;
}
.master-record-picker-option-main { font-weight: 700; }
.master-record-picker-option-meta { margin-left: auto; color: #777b6c; font-size: 0.75rem; text-align: right; }
.master-record-picker-add { color: #7d2926; background: #fbf6f4; font-weight: 700; }
.master-record-picker-add b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #b97b76; border-radius: 50%; font-size: 1rem; }
.master-record-picker-add span { display: flex; flex-direction: column; }
.master-record-picker-add small { color: #827c70; font-size: 0.7rem; font-weight: 400; }
.master-record-picker-empty { padding: 18px 12px; color: #858779; text-align: center; font-size: 0.82rem; }

.print-contractor-picker {
  position: relative;
}

.print-contractor-picker .master-record-picker-results {
  right: 0;
  z-index: 180;
}

.print-contractor-detail {
  position: relative;
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px 38px 10px 12px;
  border: 1px solid #cfd8c8;
  border-left: 4px solid #5f7655;
  border-radius: 6px;
  background: #f7faf4;
}

.print-contractor-detail[hidden] {
  display: none;
}

.print-contractor-detail > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.print-contractor-detail strong {
  color: #343723;
  font-size: 0.84rem;
}

.print-contractor-detail span,
.print-contractor-detail p,
.print-contractor-help {
  color: #747868;
  font-size: 0.72rem;
}

.print-contractor-detail p {
  margin: 0;
  line-height: 1.45;
}

.print-contractor-detail button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #7d2926;
  font-size: 18px;
  cursor: pointer;
}

.print-contractor-detail button:hover,
.print-contractor-detail button:focus-visible {
  background: #efe8e4;
  outline: none;
}

.print-contractor-help {
  display: block;
  margin-top: 6px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .print-contractor-detail > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}
.searchable-select-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none;
}
.searchable-select-item {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: #fff;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--color-juniper) !important;
  cursor: pointer;
  border-bottom: 1px solid rgba(52, 55, 35, 0.05);
  transition: background 0.15s ease;
  text-align: left;
}
.searchable-select-item:hover {
  background-color: var(--color-leaf) !important;
  color: #ffffff !important;
}
.searchable-select-item.add-new {
  color: #d19a32 !important;
  font-weight: bold;
  background-color: rgba(209, 154, 50, 0.05);
}
.searchable-select-item.add-new:hover {
  background-color: var(--color-leaf) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   ROLE-BASED VIEW CONTROL (ARTISAN/LEVEL 3 RESTRICTIONS)
   ========================================================================== */

/* Hide pricing estimations card in sidebar */
.role-artisan .cost-summary-card {
  display: none !important;
}

/* Hide price and total cost inputs in dynamic rows */
.role-artisan .mold-cost-price,
.role-artisan .mold-cost-total,
.role-artisan .metal-price,
.role-artisan .metal-total,
.role-artisan .finish-price,
.role-artisan #artw-print-price {
  display: none !important;
}

/* Hide Section 10 entirely for Artisan */
.role-artisan #sec-copyright {
  display: none !important;
}

/* Hide Section 10 navigation buttons in sidebar */
.role-artisan .form-nav-item[onclick*="sec-copyright"] {
  display: none !important;
}

/* Hide save cost values in labels or other tables if any */
.role-artisan .summary-mold-fee,
.role-artisan .summary-metal-fee,
.role-artisan .summary-finish-fee,
.role-artisan .summary-prototype-fee,
.role-artisan .summary-other-fee,
.role-artisan .summary-grand-total {
  display: none !important;
}

/* Custom class to hide elements completely for artisans */
.role-artisan .artisan-hide {
  display: none !important;
}
.searchable-select-container.has-selection > input {
  border-color: #667a58;
  box-shadow: 0 0 0 2px rgba(102, 122, 88, 0.12);
}
.master-record-list-option {
  display: flex;
  align-items: center;
  gap: 12px;
}
.master-record-list-option strong { font-weight: 700; }
.master-record-list-option small { margin-left: auto; color: #7c8070; font-size: 0.72rem; }
.searchable-select-results::before {
  content: "ค้นหาและเลือกจากทะเบียน";
  display: block;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 12px;
  background: #f3f0e6;
  color: #737765;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Employee directory - current operations UI */
.employee-directory {
  container-type: inline-size;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  color: #343723;
}

.employee-overview-band {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(520px, 1.5fr);
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  color: #f8f5eb;
  background: #30351f;
  border-left: 5px solid #8d2a27;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 5px 16px rgba(31, 34, 20, 0.12);
}

.employee-overview-copy > span {
  display: block;
  color: #d58c82;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.gallery-album-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  color: #343723;
}

.gallery-album-summary strong {
  font-size: 1rem;
}

.gallery-album-summary span {
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.8rem;
}

.gallery-album-grid,
.gallery-brick-grid {
  width: 100%;
  column-count: 4;
  column-gap: 10px;
}

.gallery-album-card,
.gallery-brick-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 6px;
  background: #f7f4e9;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(52, 55, 35, 0.1);
}

.gallery-album-card {
  height: 280px;
  text-align: left;
}

.gallery-album-card.gallery-brick-1,
.gallery-album-card.gallery-brick-4 {
  height: 350px;
}

.gallery-album-card.gallery-brick-2 {
  height: 240px;
}

.gallery-album-card img,
.gallery-brick-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.gallery-album-card:hover img,
.gallery-brick-photo:hover img {
  transform: scale(1.025);
}

.gallery-album-card:focus-visible,
.gallery-brick-photo:focus-visible,
.gallery-album-back:focus-visible {
  outline: 3px solid rgba(125, 40, 38, 0.42);
  outline-offset: 2px;
}

.gallery-album-gradient {
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(to top, rgba(24, 26, 16, 0.94), rgba(24, 26, 16, 0));
  pointer-events: none;
}

.gallery-album-count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(250, 248, 242, 0.94);
  color: #343723;
  font-size: 0.7rem;
  font-weight: 800;
}

.gallery-album-copy {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gallery-album-copy strong {
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-album-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-album-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-left: 4px solid #7D2826;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(52, 55, 35, 0.08);
}

.gallery-album-toolbar > div {
  display: grid;
  min-width: 0;
}

.gallery-album-toolbar span,
.gallery-album-toolbar small {
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.72rem;
}

.gallery-album-toolbar strong {
  overflow: hidden;
  color: #343723;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-album-back {
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(52, 55, 35, 0.24);
  border-radius: 6px;
  background: #faf8f2;
  color: #343723;
  cursor: pointer;
}

.gallery-brick-photo {
  min-height: 120px;
}

.gallery-brick-photo img {
  height: auto;
  min-height: 120px;
}

.gallery-brick-photo > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(24, 26, 16, 0.76);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
}

.gallery-album-card.is-loading::before,
.gallery-brick-photo.is-loading::before,
.gallery-album-card.has-image-error::before,
.gallery-brick-photo.has-image-error::before,
.gallery-album-card.is-broken::before,
.gallery-brick-photo.is-broken::before {
  content: "กำลังโหลดรูป...";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: rgba(52, 55, 35, 0.7);
  background: #f7f4e9;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}
.gallery-album-card.has-image-error::before,
.gallery-brick-photo.has-image-error::before,
.gallery-album-card.is-broken::before,
.gallery-brick-photo.is-broken::before { content: "กำลังลองโหลดรูปอีกครั้ง"; }
.gallery-album-card.is-loading img:not([src]),
.gallery-brick-photo.is-loading img:not([src]),
.gallery-album-card.has-image-error img,
.gallery-brick-photo.has-image-error img,
.gallery-album-card.is-broken img,
.gallery-brick-photo.is-broken img { visibility: hidden; }

.gallery-empty-albums {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 180px;
  padding: 32px;
  border: 1px dashed rgba(52, 55, 35, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.56);
  color: #343723;
  column-span: all;
  text-align: center;
}

.gallery-empty-albums span {
  color: rgba(52, 55, 35, 0.58);
  font-size: 0.8rem;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
  padding: 28px;
  background: rgba(20, 21, 15, 0.92);
}

.gallery-lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 56px);
  margin: auto;
}

.gallery-lightbox figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  margin: auto;
  object-fit: contain;
}

.gallery-lightbox figcaption {
  color: #f7f6f1;
  font-size: 0.82rem;
  text-align: center;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

.gallery-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1.8rem;
}

.gallery-lightbox-nav {
  font-size: 2rem;
}

.gallery-lightbox-open {
  overflow: hidden;
}

@media (max-width: 1200px) {
  .gallery-album-grid,
  .gallery-brick-grid {
    column-count: 3;
  }
}

@media (max-width: 820px) {
  .gallery-album-grid,
  .gallery-brick-grid {
    column-count: 2;
  }

  .gallery-album-card,
  .gallery-album-card.gallery-brick-1,
  .gallery-album-card.gallery-brick-4 {
    height: 260px;
  }
}

/* Internal work order: multi-department team planning */
.internal-work-modal-content {
  width: min(1240px, 96vw);
  max-width: 96vw;
  --iw-font-title: 0.94rem;
  --iw-font-body: 0.82rem;
  --iw-font-label: 0.75rem;
  --iw-font-help: 0.7rem;
}
.iw-department-picker { position: relative; min-width: 0; }
#iw-linked-identity {
  grid-template-columns: 180px minmax(230px, 1.5fr) minmax(205px, 1.25fr) minmax(145px, .85fr) minmax(145px, .8fr);
  margin-bottom: 14px;
}
.iw-top-fields {
  display: grid;
  grid-template-columns: minmax(230px, 1.45fr) minmax(180px, 1.05fr) minmax(175px, 1fr) minmax(150px, .82fr) minmax(150px, .82fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 4px;
}
.iw-top-field { min-width: 0; display: grid; gap: 6px; }
.iw-top-field > label { color: var(--color-text-light); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.iw-top-field > label b { color: #7d2826; }
.iw-top-field input, .iw-top-field button { width: 100%; min-width: 0; }
.iw-handover-method {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(260px, 1fr) minmax(300px, 1.45fr);
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid #d5d0c2;
  border-left: 4px solid #667657;
  background: #f8f7f1;
}
.iw-handover-method__heading { display: grid; gap: 1px; min-width: 0; }
.iw-handover-method__heading > span { color: #7d2826; font: 800 var(--iw-font-help) "Outfit", sans-serif; }
.iw-handover-method__heading > strong { color: #343723; font-size: var(--iw-font-title); }
.iw-handover-method__heading > small { color: #77746b; font-size: var(--iw-font-help); line-height: 1.4; }
.iw-handover-method__field { display: grid; gap: 4px; min-width: 0; }
.iw-handover-method__field > span { color: #66685b; font-size: var(--iw-font-label); font-weight: 800; }
.iw-handover-method__field select { width: 100%; min-height: 42px; }
.iw-handover-method__note { min-height: 48px; display: grid; align-content: center; gap: 2px; padding: 8px 11px; border-left: 3px solid #8a927c; background: #fff; }
.iw-handover-method__note strong { color: #435735; font-size: var(--iw-font-body); }
.iw-handover-method__note span { color: #77746b; font-size: var(--iw-font-help); line-height: 1.45; }
.iw-key-date-section { border: 1px solid #d8d3c5; border-left: 4px solid #7d2826; background: #fffdf8; }
.iw-key-date-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.iw-key-date-heading strong, .iw-key-date-heading span { display: block; }
.iw-key-date-heading strong { color: #343723; font-size: var(--iw-font-title); }
.iw-key-date-heading > div > span { margin-top: 2px; color: #77746b; font-size: var(--iw-font-help); line-height: 1.45; }
.iw-add-milestone-button, .iw-manual-schedule-button { min-height: 38px; padding: 6px 11px; border: 1px solid #b7b09f; border-radius: 5px; background: #fff; color: #435735; font: inherit; font-size: var(--iw-font-label); font-weight: 800; cursor: pointer; white-space: nowrap; }
.iw-add-milestone-button { border-color: #7d2826; color: #7d2826; }
.iw-manual-schedule-button.is-active { border-color: #7d2826; background: #7d2826; color: #fff; }
.iw-milestone-list { display: grid; gap: 8px; padding: 0 12px 12px; }
.iw-milestone-empty { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px dashed #d5cebf; background: #faf8f2; }
.iw-milestone-empty strong, .iw-milestone-empty span { display: block; }
.iw-milestone-empty strong { color: #56594b; font-size: .78rem; }
.iw-milestone-empty span { color: #858177; font-size: .7rem; text-align: right; }
.iw-milestone-card { border: 1px solid #ddd6c8; border-left: 4px solid #9a927b; background: #fff; }
.iw-milestone-card.is-fixed { border-left-color: #8c1d1a; }
.iw-milestone-card > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid #ece7dc; background: #f7f4ec; }
.iw-milestone-card > header div { display: flex; align-items: center; gap: 8px; }
.iw-milestone-card > header span { color: #7d2826; font: 800 var(--iw-font-help) "Outfit", sans-serif; }
.iw-milestone-card > header strong { font-size: var(--iw-font-body); }
.iw-milestone-card > header button { width: 28px; height: 28px; border: 1px solid #d8b6af; background: #fff; color: #8c1d1a; font-size: 1rem; cursor: pointer; }
.iw-milestone-fields { display: grid; grid-template-columns: .85fr 1.35fr .8fr .85fr 1.15fr 1.1fr; gap: 9px; padding: 10px; }
.iw-milestone-fields label { display: grid; align-content: start; gap: 4px; min-width: 0; }
.iw-milestone-fields label > span { color: #66685b; font-size: var(--iw-font-label); font-weight: 800; line-height: 1.35; }
.iw-milestone-fields label > span b { color: #8c1d1a; }
.iw-milestone-fields input, .iw-milestone-fields select { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #cec9ba; border-radius: 4px; background: #fff; padding: 6px 8px; font: inherit; font-size: var(--iw-font-body); }
.iw-sample-spec { margin: 0 10px 10px; border: 1px solid #d8d2c2; border-left: 3px solid #667657; background: #f8f7f1; }
.iw-sample-spec > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 10px; border-bottom: 1px solid #dfd9cb; background: #f0f1e9; }
.iw-sample-spec > header div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.iw-sample-spec > header span { color: #7d2826; font: 800 var(--iw-font-help) "Outfit", sans-serif; }
.iw-sample-spec > header strong { font-size: var(--iw-font-body); }
.iw-sample-spec > header small { grid-column: 1 / -1; color: #747568; font-size: var(--iw-font-help); }
.iw-sample-spec > header button { min-height: 34px; padding: 5px 10px; border: 1px solid #89917b; background: #fff; color: #34432b; font: inherit; font-size: var(--iw-font-label); font-weight: 800; cursor: pointer; }
.iw-sample-variant-list { display: grid; gap: 1px; background: #e3ded2; }
.iw-sample-variant-row { display: grid; grid-template-columns: 34px minmax(150px, 1fr) minmax(150px, 1.15fr) 110px 34px; align-items: end; gap: 8px; padding: 8px 10px; background: #fff; }
.iw-sample-variant-row > b { align-self: center; color: #7d2826; font: 800 var(--iw-font-label) "Outfit", sans-serif; }
.iw-sample-variant-row label { display: grid; gap: 4px; min-width: 0; }
.iw-sample-variant-row label span { color: #66685b; font-size: var(--iw-font-label); font-weight: 800; }
.iw-sample-variant-row label i { color: #8c1d1a; font-style: normal; }
.iw-sample-variant-row input,
.iw-sample-variant-row select { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #cec9ba; border-radius: 4px; background: #fff; padding: 6px 8px; color: #343723; color-scheme: light; font: inherit; font-size: var(--iw-font-body); }
.iw-sample-variant-row select { padding-right: 30px; cursor: pointer; }
.iw-sample-variant-row input:focus,
.iw-sample-variant-row select:focus { border-color: #687b58; outline: 2px solid rgba(104, 123, 88, .16); outline-offset: 0; }
.iw-sample-color-picker { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 5px 7px; min-width: 0; }
.iw-sample-color-swatch { width: 14px; height: 14px; justify-self: center; border: 1px solid rgba(52, 55, 35, .28); border-radius: 50%; background: var(--sample-color); box-shadow: 0 0 0 2px #fff; }
.iw-sample-color-picker .iw-sample-color-custom { grid-column: 2; min-height: 34px; }
.iw-sample-finish-field .iw-sample-finish-custom { min-height: 34px; }
.quotation-milestone-fields label > span small,
.iw-milestone-fields label > span small { color: #858779; font-size: inherit; font-weight: 500; }
.iw-sample-variant-remove { width: 34px; height: 38px; border: 1px solid #d8b6af; background: #fff; color: #8c1d1a; font-size: 1rem; cursor: pointer; }
.iw-sample-spec > footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 42px; padding: 7px 10px; border-top: 1px solid #dfd9cb; font-size: var(--iw-font-label); }
.iw-sample-spec > footer.is-complete { background: #eef4e9; color: #3d6439; }
.iw-sample-spec > footer.is-incomplete { background: #fbefec; color: #8c1d1a; }
.iw-sample-spec > footer label { display: flex; align-items: center; gap: 6px; color: #34372f; font-weight: 700; }
.iw-sample-spec > footer input { accent-color: #526843; }
.iw-priority-sample-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 7px 8px; border-left: 3px solid #7d2826; background: #f3f0e7; font-size: var(--iw-font-label); }
.iw-priority-sample-spec > span { padding: 3px 6px; border: 1px solid #d9d2c3; background: #fff; }
.iw-priority-sample-spec > small { flex-basis: 100%; color: #7d2826; font-weight: 700; }
@media (max-width: 900px) {
  .iw-sample-variant-row { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 90px 34px; }
  .iw-sample-spec > footer { grid-template-columns: auto 1fr; }
  .iw-sample-spec > footer label { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .iw-sample-spec > header { align-items: flex-start; flex-direction: column; }
  .iw-sample-spec > header button { width: 100%; }
  .iw-sample-variant-row { grid-template-columns: 30px minmax(0, 1fr) 34px; align-items: start; }
  .iw-sample-variant-row > b { grid-column: 1; grid-row: 1; }
  .iw-sample-variant-row label { grid-column: 2; }
  .iw-sample-variant-remove { grid-column: 3; grid-row: 1; }
  .iw-sample-spec > footer { grid-template-columns: 1fr; }
  .iw-sample-spec > footer label { grid-column: auto; }
}
.iw-milestone-preparation { grid-column: span 2; }
.iw-department-picker-button { width: 100%; text-align: left; cursor: pointer; background: #fff; }
.iw-department-picker-button::after { content: "⌄"; float: right; color: #69675e; }
.iw-project-route-summary .iw-department-picker-button:disabled { opacity: 1; cursor: default; border-color: #c7c3b5; background: #f2efe5; color: #435735; font-weight: 800; }
.iw-project-route-summary .iw-department-picker-button:disabled::after { content: "✓"; color: #6f7d5c; }
.iw-department-picker-menu {
  position: absolute; z-index: 1100; top: calc(100% + 5px); left: 0; width: min(390px, 80vw);
  max-height: 360px; overflow: auto; padding: 10px; border: 1px solid #cec9ba;
  border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(35, 38, 26, .18);
}
.iw-department-picker-intro { padding: 2px 7px 9px; color: #77746b; font-size: .7rem; border-bottom: 1px solid #ebe7dc; }
.iw-department-picker-group + .iw-department-picker-group { margin-top: 10px; padding-top: 9px; border-top: 1px solid #ebe7dc; }
.iw-department-picker-group > strong { display: flex; align-items: center; gap: 7px; margin: 0 7px 5px; color: #7d2826; font-size: .72rem; }
.iw-department-picker-group > strong > span { color: #8a8e80; font: 700 var(--iw-font-help) "Outfit", sans-serif; }
.iw-department-picker-group label { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 5px 7px; cursor: pointer; }
.iw-department-picker-group label:hover { background: #f5f2e8; }
.iw-department-picker-group input { width: 18px; height: 18px; accent-color: #435735; }
.iw-planning-section { border: 1px solid #d8d3c5; border-left: 4px solid #435735; background: #fbfaf6; }
.iw-planning-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #e4dfd3; }
.iw-planning-heading strong, .iw-planning-heading span { display: block; }
.iw-planning-heading strong { color: #343723; font-size: var(--iw-font-title); }
.iw-planning-heading span { color: #77746b; font-size: var(--iw-font-help); line-height: 1.45; margin-top: 2px; }
.iw-planning-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.iw-release-mode { display: inline-flex; min-height: 38px; padding: 3px; border: 1px solid #c9c4b6; background: #f1eee4; }
.iw-release-mode button { min-height: 30px; padding: 4px 9px; border: 0; background: transparent; color: #66685b; font: inherit; font-size: var(--iw-font-label); font-weight: 800; cursor: pointer; }
.iw-release-mode button.is-active { background: #435735; color: #fff; box-shadow: 0 1px 3px rgba(31,42,24,.18); }
.iw-check-capacity-button { min-height: 38px; padding: 6px 12px; border: 1px solid #435735; border-radius: 5px; background: #435735; color: #fff; font: inherit; font-size: var(--iw-font-label); font-weight: 800; cursor: pointer; }
.iw-check-capacity-button:hover { background: #35452a; }
.iw-urgent-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 10px; border: 1px solid rgba(125,40,38,.35); background: #fff8f5; cursor: pointer; }
.iw-urgent-toggle input { width: 18px; height: 18px; accent-color: #8c1d1a; }
.iw-urgent-toggle span { color: #7d2826; font-weight: 800; margin: 0; }
.iw-department-plan-details { border-top: 1px solid #e4dfd3; background: #fff; }
.iw-department-plan-details > summary { min-height: 42px; display: flex; align-items: center; padding: 8px 14px; color: #435735; font-size: .76rem; font-weight: 800; cursor: pointer; list-style: none; }
.iw-department-plan-details > summary::before { content: "+"; width: 22px; margin-right: 7px; color: #7d2826; font-size: 1rem; }
.iw-department-plan-details[open] > summary::before { content: "−"; }
.iw-manual-schedule-controls { display: grid; grid-template-columns: minmax(300px, 1.5fr) 1fr; align-items: end; gap: 12px; padding: 10px 14px; border-top: 1px solid #eee8dc; border-bottom: 1px solid #e4ded1; background: #fff8f5; }
.iw-manual-schedule-controls[hidden] { display: none; }
.iw-manual-schedule-controls label { display: grid; gap: 5px; }
.iw-manual-schedule-controls label span { color: #7d2826; font-size: .72rem; font-weight: 800; }
.iw-manual-schedule-controls textarea { width: 100%; min-height: 54px; border: 1px solid #cfb5ae; padding: 8px 10px; font: inherit; resize: vertical; }
.iw-manual-schedule-controls > span { color: #77746b; font-size: .7rem; }
.iw-department-plans { padding: 0 12px; }
.iw-department-plan { display: grid; grid-template-columns: 38px minmax(130px, .72fr) minmax(175px, 1fr) 88px 118px 118px 108px; align-items: center; gap: 8px; min-height: 60px; border-bottom: 1px solid #ebe7dc; }
.iw-department-plan:last-child { border-bottom: 0; }
.iw-department-plan-head { min-height: 34px; color: #747168; font-size: .7rem; font-weight: 800; }
.iw-department-plan-index { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfcabb; color: #435735; font-weight: 800; }
.iw-department-plan select, .iw-department-plan input { width: 100%; min-height: 38px; border: 1px solid #cec9ba; border-radius: 4px; background: #fff; padding: 6px 9px; font: inherit; color: #343723; }
.iw-duration-field { position: relative; min-width: 0; }
.iw-duration-field input { padding-right: 30px; text-align: center; font-weight: 800; }
.iw-duration-field small { position: absolute; right: 9px; bottom: 11px; color: #77746b; font-size: var(--iw-font-help); font-weight: 800; pointer-events: none; }
.iw-duration-field input:focus { border-color: #7d2826; outline: 2px solid rgba(125,40,38,.12); outline-offset: 1px; }
.iw-department-plan time { min-height: 38px; display: flex; align-items: center; padding: 6px 9px; border: 1px solid #e2ddd1; background: #f7f5ef; color: #4e5143; font-size: .75rem; font-weight: 800; }
.iw-date-display { width: 100%; min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #d7d1c3; border-radius: 4px; background: #f7f5ef; color: #4e5143; font: inherit; text-align: left; cursor: pointer; }
.iw-date-display b { min-width: 0; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.iw-date-display small { color: #7d2826; font-size: var(--iw-font-help); font-weight: 800; white-space: nowrap; }
.iw-date-display:hover, .iw-date-display:focus-visible { border-color: #7d2826; background: #fff; outline: 2px solid rgba(125,40,38,.12); outline-offset: 1px; }
.iw-mobile-field-label { display: none; }
.iw-capacity-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 7px; border: 1px solid #d8d3c5; background: #f4f2eb; color: #69675e; font-size: var(--iw-font-label); font-weight: 800; text-align: center; }
.iw-capacity-badge.is-available { border-color: #b8c8b1; background: #eaf1e7; color: #3f6339; }
.iw-capacity-badge.is-busy { border-color: #d8c99e; background: #f8f0d9; color: #78651d; }
.iw-capacity-badge.is-full, .iw-capacity-badge.is-risk { border-color: #deb1aa; background: #f8e6e2; color: #8c1d1a; }
.iw-release-badge { display: grid; justify-items: center; gap: 1px; min-height: 38px; padding: 5px 7px; border: 1px solid #d8d3c5; background: #f4f2eb; color: #69675e; font-size: var(--iw-font-label); font-weight: 800; text-align: center; }
.iw-release-badge small { color: inherit; font-size: var(--iw-font-help); font-weight: 600; }
.iw-release-badge.is-released { border-color: #b8c8b1; background: #eaf1e7; color: #3f6339; }
.iw-release-badge.is-ready_to_release { border-color: #d7ba75; background: #fff4d9; color: #76530b; }
.iw-release-badge.is-awaiting_team { border-color: #cfcabb; background: #f5f2e9; color: #68675f; }
.iw-release-badge.is-blocked { border-color: #deb1aa; background: #f8e6e2; color: #8c1d1a; }
.iw-capacity-result { display: block; margin: 10px 12px 12px; border: 1px solid #cfd6c9; background: #fff; }
.iw-capacity-result[hidden] { display: none; }
.iw-capacity-result span, .iw-capacity-result strong { display: block; }
.iw-review-summary span, .iw-review-decisions span { color: #747168; font-size: var(--iw-font-help); font-weight: 700; line-height: 1.4; }
.iw-review-summary strong, .iw-review-decisions strong { margin-top: 3px; color: #343723; font-size: var(--iw-font-body); line-height: 1.4; }
.iw-review-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #eef4ea; }
.iw-review-summary > div { min-height: 58px; padding: 9px 12px; border-right: 1px solid #d7e0d2; }
.iw-review-summary > div:last-child { border-right: 0; }
.iw-capacity-result-status { border-left: 4px solid #527046; }
.iw-capacity-result.is-risk { border-color: #dfb6af; background: #fff7f5; }
.iw-capacity-result.is-risk .iw-review-summary { background: #fff0ed; }
.iw-capacity-result.is-risk .iw-capacity-result-status { border-left-color: #8c1d1a; }
.iw-capacity-result.is-risk .iw-capacity-result-status strong { color: #8c1d1a; }
.iw-risk-action-panel { display: grid; grid-template-columns: 38px minmax(190px, .8fr) minmax(430px, 1.45fr) auto; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid #dfb6af; border-bottom: 1px solid #dfb6af; background: #fffaf7; }
.iw-risk-action-icon { width: 34px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; background: #8c1d1a; color: #fff; font: 900 1rem "Outfit", sans-serif; }
.iw-risk-action-copy span, .iw-risk-action-copy strong, .iw-risk-action-copy small, .iw-risk-action-choices > span { display: block; }
.iw-risk-action-copy span, .iw-risk-action-choices > span { color: #7d2826; font-size: var(--iw-font-help); font-weight: 800; }
.iw-risk-action-copy strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-body); line-height: 1.35; }
.iw-risk-action-copy small { margin-top: 2px; color: #777168; font-size: var(--iw-font-help); line-height: 1.4; }
.iw-risk-action-choices > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.iw-risk-action-choices button, .iw-risk-impact-link { min-height: 34px; padding: 6px 10px; border: 1px solid #c8c1b2; border-radius: 4px; background: #fff; color: #4d5043; font: inherit; font-size: var(--iw-font-label); font-weight: 800; cursor: pointer; }
.iw-risk-action-choices button:hover, .iw-risk-action-choices button:focus-visible, .iw-risk-impact-link:hover, .iw-risk-impact-link:focus-visible { border-color: #7d2826; color: #7d2826; outline: 2px solid rgba(125,40,38,.1); outline-offset: 1px; }
.iw-risk-action-choices button.is-primary { border-color: #435735; background: #435735; color: #fff; }
.iw-risk-action-choices button.is-primary:hover, .iw-risk-action-choices button.is-primary:focus-visible { background: #35452a; color: #fff; }
.iw-risk-impact-link { border-color: transparent; background: transparent; color: #7d2826; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.iw-calendar-basis { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid #dde2d9; border-bottom: 1px solid #e4dfd3; background: #f7f5ee; }
.iw-calendar-basis > span { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: #435735; color: #fff; font-size: .85rem; }
.iw-calendar-basis strong, .iw-calendar-basis small { margin: 0; }
.iw-calendar-basis strong { font-size: var(--iw-font-body); }
.iw-calendar-basis small { display: block; margin-top: 2px; color: #77746b; font-size: var(--iw-font-help); line-height: 1.45; }
.iw-priority-batches { border-bottom: 1px solid #ded8ca; background: #fbfaf6; }
.iw-priority-batches > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 11px 12px; border-bottom: 1px solid #ded8ca; background: #f1eee5; }
.iw-priority-batches > header span, .iw-priority-batches > header strong { display: block; }
.iw-priority-batches > header span { color: #7d2826; font: 800 var(--iw-font-help) "Outfit", sans-serif; }
.iw-priority-batches > header strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-body); }
.iw-priority-batches > header small { color: #706d64; font-size: var(--iw-font-help); text-align: right; }
.iw-priority-batch { margin: 10px 12px 12px; border: 1px solid #c9d2c4; border-left: 4px solid #536847; background: #fff; }
.iw-priority-batch.is-risk { border-color: #dfb6af; border-left-color: #9b2c28; background: #fff9f7; }
.iw-priority-batch > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-bottom: 1px solid #e3ded2; }
.iw-priority-batch > header span, .iw-priority-batch > header strong { display: block; }
.iw-priority-batch > header span { color: #777168; font-size: var(--iw-font-help); font-weight: 800; }
.iw-priority-batch > header strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-body); }
.iw-priority-batch > header > b { padding: 5px 8px; border: 1px solid #b8c8b1; background: #eaf1e7; color: #3f6339; font-size: var(--iw-font-help); }
.iw-priority-batch.is-risk > header > b { border-color: #deb1aa; background: #f8e6e2; color: #8c1d1a; }
.iw-priority-batch-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e8e3d8; background: #f8f6ef; }
.iw-priority-batch-summary > span { padding: 7px 10px; border-right: 1px solid #e1dccf; color: #727067; font-size: var(--iw-font-help); }
.iw-priority-batch-summary > span:last-child { border-right: 0; }
.iw-priority-batch-summary strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-label); }
.iw-priority-batch ol { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 9px 10px; list-style: none; overflow-x: auto; }
.iw-priority-batch li { position: relative; min-width: 132px; flex: 1 0 132px; padding: 7px 24px 7px 9px; border: 1px solid #d8d3c6; background: #fff; }
.iw-priority-batch li + li { border-left: 0; }
.iw-priority-batch li:not(:last-child)::after { content: "›"; position: absolute; z-index: 1; top: 50%; right: 7px; transform: translateY(-50%); color: #8b887d; font-size: 1rem; font-weight: 900; }
.iw-priority-batch li strong, .iw-priority-batch li span, .iw-priority-batch li small { display: block; }
.iw-priority-batch li strong { color: #343723; font-size: var(--iw-font-label); }
.iw-priority-batch li span { margin-top: 3px; color: #5d6155; font-size: var(--iw-font-help); }
.iw-priority-batch li small { margin-top: 2px; color: #807c72; font-size: var(--iw-font-help); line-height: 1.35; }
.iw-priority-batch > p { margin: 0; padding: 0 11px 10px; color: #777168; font-size: var(--iw-font-help); line-height: 1.45; }
.iw-schedule-timeline { position: relative; padding: 11px 12px 13px; background: #fff; }
.iw-schedule-timeline > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.iw-schedule-timeline > header strong { font-size: var(--iw-font-body); }
.iw-schedule-timeline > header span { font-size: var(--iw-font-label); color: #5f6255; }
.iw-timeline-axis, .iw-timeline-milestone-row, .iw-timeline-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; }
.iw-timeline-axis { min-height: 52px; border: 1px solid #dfdbcf; background: #f5f2e9; }
.iw-timeline-axis-label { display: flex; align-items: center; padding: 8px 10px; color: #67695e; font-size: var(--iw-font-label); font-weight: 800; }
.iw-timeline-axis-calendar { position: relative; min-width: 0; overflow: hidden; }
.iw-timeline-months { position: relative; height: 27px; border-bottom: 1px solid #ded9cc; }
.iw-timeline-months > span { position: absolute; inset-block: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid #d8d2c4; color: #343723; font-size: var(--iw-font-label); font-weight: 800; white-space: nowrap; }
.iw-timeline-weeks { position: relative; height: 24px; }
.iw-timeline-weeks > span { position: absolute; top: 4px; padding-left: 5px; border-left: 1px solid #cbc5b6; color: #7b776d; font-size: var(--iw-font-help); line-height: 16px; white-space: nowrap; }
.iw-timeline-milestone-row { min-height: 52px; align-items: stretch; border-bottom: 1px solid #e4dfd3; }
.iw-timeline-milestone-label { display: flex; justify-content: center; flex-direction: column; padding: 7px 10px; }
.iw-timeline-milestone-label strong, .iw-timeline-milestone-label span { margin: 0; }
.iw-timeline-milestone-label strong { font-size: var(--iw-font-label); }
.iw-timeline-milestone-label span { margin-top: 2px; color: #77746b; font-size: var(--iw-font-help); }
.iw-timeline-marker-track { position: relative; height: 52px; background: repeating-linear-gradient(90deg, #f1eee6 0, #f1eee6 1px, transparent 1px, transparent 10%); }
.iw-timeline-marker { position: absolute; bottom: 0; width: 1px; height: 36px; border-left: 2px solid #9a927b; }
.iw-timeline-marker.is-fixed { border-left-color: #8c1d1a; }
.iw-timeline-marker b, .iw-timeline-marker small { position: absolute; left: 5px; width: max-content; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-timeline-marker b { bottom: 22px; color: #7d2826; font-size: var(--iw-font-help); }
.iw-timeline-marker small { bottom: 6px; color: #62655a; font-size: var(--iw-font-help); }
.iw-timeline-marker.is-near-end b, .iw-timeline-marker.is-near-end small { right: 6px; left: auto; text-align: right; }
.iw-timeline-no-marker { display: block; padding-top: 16px; color: #858176; font-size: var(--iw-font-help); text-align: center; }
.iw-timeline-row { align-items: center; min-height: 68px; border-bottom: 1px solid #eeeae1; }
.iw-timeline-row.is-focus-risk { background: #fff0ed; box-shadow: inset 4px 0 #9b2c28; }
.iw-timeline-info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px; }
.iw-timeline-info strong, .iw-timeline-info span, .iw-timeline-info em { margin: 0; }
.iw-timeline-info strong { grid-column: 1 / -1; color: #343723; font-size: var(--iw-font-body); }
.iw-timeline-info span { color: #686b60; font-size: var(--iw-font-help); line-height: 1.35; }
.iw-timeline-info em { justify-self: end; color: #4b6541; font-size: var(--iw-font-help); font-style: normal; font-weight: 800; }
.iw-timeline-info em.is-risk { color: #8c1d1a; }
.iw-timeline-info small { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: #8a5a18; font-size: var(--iw-font-help); font-weight: 800; }
.iw-timeline-info small::before { content: ""; width: 12px; height: 6px; background: linear-gradient(90deg, #70889b 0 50%, #b07927 50% 100%); }
.iw-timeline-track { position: relative; height: 32px; background: repeating-linear-gradient(90deg, #ede9df 0, #ede9df 1px, transparent 1px, transparent 10%); }
.iw-timeline-track.has-priority-batch { height: calc(33px + (var(--iw-priority-lanes, 1) * 25px)); background: repeating-linear-gradient(90deg, #ede9df 0, #ede9df 1px, transparent 1px, transparent 10%), linear-gradient(to bottom, transparent 29px, #eee7d8 29px, #eee7d8 30px, transparent 30px); }
.iw-timeline-bar { position: absolute; top: 4px; min-width: 10px; height: 24px; display: flex !important; align-items: center; justify-content: center; padding: 0 7px; border: 1px solid #536847; border-radius: 2px; background: #687b58; color: #fff !important; overflow: hidden; }
.iw-timeline-bar.is-risk { background: #9b2c28; }
.iw-timeline-bar.is-compact { min-width: 10px; padding: 0; border-radius: 1px; }
.iw-timeline-bar b { color: inherit; font-size: var(--iw-font-help); white-space: nowrap; }
.iw-timeline-priority-bar { position: absolute; top: calc(33px + (var(--iw-priority-lane, 0) * 25px)); min-width: 12px; height: 21px; display: flex !important; align-items: center; justify-content: center; padding: 0 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #fff !important; overflow: hidden; cursor: help; }
.iw-timeline-priority-bar.is-sample { border: 1px solid #526c80; background: #70889b; }
.iw-timeline-priority-bar.is-special { border: 1px solid #8d5c17; background: #b07927; }
.iw-timeline-priority-bar.is-risk { border-color: #7f1e1b; background: repeating-linear-gradient(135deg, #a42b26 0, #a42b26 7px, #8f211d 7px, #8f211d 14px); }
.iw-timeline-priority-bar.is-compact { min-width: 3px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.iw-timeline-priority-bar.is-compact::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 2px; background: #8d5c17; }
.iw-timeline-priority-bar.is-compact b { position: absolute; z-index: 1; top: 0; left: 5px; display: flex; align-items: center; justify-content: center; width: max-content; min-width: 64px; height: 21px; padding: 0 7px; border: 1px solid #8d5c17; border-radius: 3px; background: #b07927; box-shadow: 0 1px 3px rgba(62, 48, 34, .18); }
.iw-timeline-priority-bar.is-compact.is-sample::before { background: #526c80; }
.iw-timeline-priority-bar.is-compact.is-sample b { border-color: #526c80; background: #70889b; }
.iw-timeline-priority-bar.is-compact.is-risk::before { background: #7f1e1b; }
.iw-timeline-priority-bar.is-compact.is-risk b { border-color: #7f1e1b; background: #9b2c28; }
.iw-timeline-priority-bar.is-compact.is-near-end b { right: 5px; left: auto; }
.iw-timeline-priority-bar b { color: inherit; font-size: var(--iw-font-help); line-height: 1; white-space: nowrap; }
.iw-timeline-hover-guide { position: absolute; z-index: 6; top: 42px; bottom: 38px; width: 0; border-left: 2px solid #a52320; pointer-events: none; }
.iw-timeline-hover-guide[hidden] { display: none; }
.iw-timeline-hover-guide::after { content: ""; position: absolute; bottom: -4px; left: -4px; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid #a52320; background: #fff; }
.iw-timeline-hover-guide > span { position: absolute; top: 3px; left: 0; display: block; width: max-content; transform: translateX(-50%); padding: 3px 6px; border: 1px solid #8c1d1a; border-radius: 2px; background: #fff; box-shadow: 0 2px 6px rgba(62, 48, 34, .16); color: #8c1d1a; font-size: var(--iw-font-help); font-weight: 900; white-space: nowrap; }
.iw-timeline-hover-guide.is-near-left > span { transform: translateX(4px); }
.iw-timeline-hover-guide.is-near-right > span { transform: translateX(calc(-100% - 4px)); }
.iw-timeline-legend { display: flex; justify-content: flex-end; gap: 14px; padding: 9px 0 0; color: #66685f; font-size: var(--iw-font-help); }
.iw-timeline-legend span { display: inline-flex; align-items: center; gap: 5px; }
.iw-timeline-legend i { width: 16px; height: 8px; background: #687b58; }
.iw-timeline-legend i.is-sample { background: #70889b; }
.iw-timeline-legend i.is-special { background: #b07927; }
.iw-timeline-legend i.is-risk { background: #9b2c28; }
.iw-timeline-legend i.is-milestone { width: 8px; height: 8px; transform: rotate(45deg); background: #8c1d1a; }
.iw-priority-timeline-summary { border-bottom: 1px solid #ded8ca; background: #fbfaf6; }
.iw-priority-timeline-summary > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid #ded8ca; background: #f1eee5; }
.iw-priority-timeline-summary > header span, .iw-priority-timeline-summary > header strong { display: block; }
.iw-priority-timeline-summary > header span { color: #8a5a18; font: 800 var(--iw-font-help) "Outfit", sans-serif; }
.iw-priority-timeline-summary > header strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-body); }
.iw-priority-timeline-summary > header small { color: #706d64; font-size: var(--iw-font-help); text-align: right; }
.iw-priority-timeline-item { display: grid; grid-template-columns: 12px minmax(190px, 1.2fr) minmax(150px, .8fr) minmax(190px, .9fr) auto; align-items: center; gap: 10px; min-height: 58px; margin: 0 12px; padding: 7px 10px; border-bottom: 1px solid #e5dfd2; background: #fff; }
.iw-priority-timeline-item:last-child { border-bottom: 0; }
.iw-priority-timeline-item > i { width: 12px; height: 30px; border-radius: 1px; background: #b07927; }
.iw-priority-timeline-item.is-sample > i { background: #70889b; }
.iw-priority-timeline-item.is-special > i { background: #b07927; }
.iw-priority-timeline-item > div span, .iw-priority-timeline-item > div strong { display: block; }
.iw-priority-timeline-item > div span { color: #777168; font-size: var(--iw-font-help); }
.iw-priority-timeline-item > div strong { margin-top: 2px; color: #343723; font-size: var(--iw-font-label); }
.iw-priority-timeline-item > b { padding: 5px 8px; border: 1px solid #d4bd91; background: #fff7e6; color: #7a5016; font-size: var(--iw-font-help); white-space: nowrap; }
.iw-priority-timeline-item.is-sample > b { border-color: #b8c7d1; background: #eef3f6; color: #496478; }
.iw-priority-timeline-item.is-risk > i { background: #9b2c28; }
.iw-priority-timeline-item.is-risk > b { border-color: #deb1aa; background: #f8e6e2; color: #8c1d1a; }
.iw-milestone-review-list { border-top: 1px solid #e4dfd3; background: #fff; }
.iw-milestone-review-list > header, .iw-milestone-review-list > article { display: grid; grid-template-columns: 1.05fr 1fr 105px; align-items: center; gap: 10px; padding: 8px 12px; }
.iw-milestone-review-list > header { min-height: 34px; background: #f1eee5; }
.iw-milestone-review-list > header strong { font-size: var(--iw-font-body); }
.iw-milestone-review-list > header span { grid-column: 3; text-align: right; }
.iw-milestone-review-list > article { min-height: 48px; border-top: 1px solid #eee9de; }
.iw-milestone-review-list > article strong, .iw-milestone-review-list > article span { margin: 0; }
.iw-milestone-review-list > article strong { font-size: var(--iw-font-body); line-height: 1.4; }
.iw-milestone-review-list > article span { color: #676a5f; font-size: var(--iw-font-help); line-height: 1.4; }
.iw-milestone-review-list > article small { display: block; margin-top: 3px; color: #858176; font-size: var(--iw-font-help); line-height: 1.35; }
.iw-milestone-review-list > article b { justify-self: end; padding: 5px 8px; border: 1px solid #b8c8b1; background: #eaf1e7; color: #3f6339; font-size: var(--iw-font-help); }
.iw-milestone-review-list > article.is-risk b { border-color: #deb1aa; background: #f8e6e2; color: #8c1d1a; }
.iw-review-decisions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e4dfd3; background: #f7f5ef; }
.iw-review-decisions > div { padding: 9px 12px; border-right: 1px solid #e2ddd1; }
.iw-review-decisions > div:last-child { border-right: 0; }
.planning-urgent-key-date { display: block; margin-top: 5px; padding-left: 7px; border-left: 3px solid #9b2c28; color: #8c1d1a; font-size: var(--iw-font-help); font-style: normal; font-weight: 800; }
.iw-planning-note { padding: 9px 14px; border-top: 1px solid #e4dfd3; background: #f2f0e8; color: #69675e; font-size: .73rem; }
.iw-planning-note strong { color: #435735; }
.iw-phase-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 12px; padding: 12px; background: #f5f2e9; }
.iw-department-plans { min-width: 0; padding: 0; }
.iw-production-phases { display: grid; gap: 8px; }
.iw-production-phase { min-width: 0; border: 1px solid #d8d3c5; border-left: 4px solid #9b9688; background: #fff; }
.iw-production-phase.is-active { border-left-color: #7d2826; box-shadow: 0 3px 10px rgba(52, 55, 35, .08); }
.iw-phase-header { display: grid; grid-template-columns: 42px minmax(160px, 1fr) minmax(130px, .75fr) minmax(150px, .85fr) 92px 34px; align-items: center; gap: 10px; min-height: 70px; padding: 9px 10px; }
.iw-production-phase.is-active .iw-phase-header { background: #f7f3ea; border-bottom: 1px solid #ddd7c9; }
.iw-phase-number { color: #7d2826; font: 800 .78rem "Outfit", sans-serif; }
.iw-phase-title strong, .iw-phase-title span, .iw-phase-team strong, .iw-phase-team span, .iw-phase-date strong, .iw-phase-date span { display: block; }
.iw-phase-title strong { color: #343723; font-size: .86rem; }
.iw-phase-title span, .iw-phase-team span, .iw-phase-date span { margin-top: 2px; color: #77746b; font-size: var(--iw-font-help); line-height: 1.35; }
.iw-phase-team strong, .iw-phase-date strong { margin-top: 3px; color: #4f5244; font-size: .74rem; line-height: 1.35; }
.iw-phase-progress { display: grid; gap: 6px; }
.iw-phase-progress span { color: #66685d; font-size: var(--iw-font-help); font-weight: 800; text-align: right; }
.iw-phase-progress i { height: 5px; background: #e4e0d4; overflow: hidden; }
.iw-phase-progress b { display: block; height: 100%; background: #637854; }
.iw-phase-toggle { width: 32px; height: 32px; border: 1px solid #bdb7a7; border-radius: 4px; background: #fff; color: #435735; font: 800 1.05rem "Outfit", sans-serif; cursor: pointer; }
.iw-phase-toggle:hover { border-color: #7d2826; color: #7d2826; }
.iw-phase-step-head { display: grid; grid-template-columns: 38px minmax(130px, .72fr) minmax(175px, 1fr) 88px 118px 118px 108px; align-items: center; gap: 8px; padding: 7px 10px; background: #ece8dc; color: #747168; font-size: .7rem; font-weight: 800; }
.iw-phase-steps { padding: 0 10px; }
.iw-phase-step { grid-template-columns: 38px minmax(130px, .72fr) minmax(175px, 1fr) 88px 118px 118px 108px; }
.iw-plan-review-panel { position: sticky; top: 10px; min-width: 0; border: 1px solid #d3cdbd; border-top: 4px solid #563733; background: #fff; }
.iw-plan-review-panel > header { padding: 12px 13px; border-bottom: 1px solid #ddd7c9; }
.iw-plan-review-panel > header span, .iw-plan-review-panel > header strong, .iw-plan-review-panel > header small { display: block; }
.iw-plan-review-panel > header span { color: #7d2826; font: 800 .7rem "Outfit", sans-serif; }
.iw-plan-review-panel > header strong { margin-top: 2px; color: #343723; font-size: .92rem; }
.iw-plan-review-panel > header small { margin-top: 3px; color: #77746b; font-size: var(--iw-font-help); line-height: 1.35; }
.iw-plan-review-status, .iw-plan-review-block, .iw-plan-release-control { padding: 10px 12px; border-bottom: 1px solid #e5e0d5; }
.iw-plan-review-status span, .iw-plan-review-block span, .iw-plan-release-control > span { display: block; color: #77746b; font-size: var(--iw-font-help); font-weight: 700; }
.iw-plan-review-status strong, .iw-plan-review-block strong { display: block; margin-top: 3px; color: #343723; font-size: .78rem; }
.iw-plan-review-status.is-ready { border-left: 3px solid #547248; background: #f0f5ed; }
.iw-plan-review-status.is-risk { border-left: 3px solid #9b2c28; background: #fff0ed; }
.iw-plan-review-status.is-pending { border-left: 3px solid #a87318; background: #fff8e7; }
.iw-plan-review-block.is-warning strong, .iw-plan-review-block.is-important strong { color: #8c1d1a; }
.iw-plan-review-block.is-complete strong { color: #3f6339; }
.iw-plan-review-block ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.iw-plan-review-block li { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64665b; font-size: .7rem; }
.iw-plan-review-block li button { border: 0; padding: 0; background: transparent; color: #7d2826; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.iw-plan-review-block li b { color: #4d5044; }
.iw-plan-review-block li time { white-space: nowrap; }
.iw-plan-release-control { border-bottom: 0; background: #f7f5ef; }
.iw-plan-release-control .iw-release-mode { width: 100%; margin-top: 7px; }
.iw-plan-release-control .iw-release-mode button { flex: 1; }
.iw-plan-release-control small { display: block; margin-top: 6px; color: #77746b; font-size: var(--iw-font-help); line-height: 1.4; }
.iw-capacity-details { border-top: 1px solid #d8d3c5; }
.iw-capacity-details > summary { background: #fff; }
.iw-capacity-details .iw-capacity-result { margin-top: 0; }
#iw-modal-submit-btn.is-urgent { background: #8c1d1a !important; }
.iw-items-table { table-layout: fixed; }
.iw-items-table th { padding: 9px 7px !important; font-size: .72rem !important; line-height: 1.25; }
.iw-items-table td { padding: 8px 6px !important; vertical-align: middle; }
.iw-items-table-wrap { margin-top: 0; height: auto !important; max-height: none !important; overflow: visible !important; border: 1px solid rgba(52, 55, 35, 0.15); border-radius: 6px; }
.iw-spec-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.iw-spec-stack label { min-width: 0; }
.iw-spec-stack small { display: block; margin-bottom: 3px; color: #77746b; font-size: var(--iw-font-help); font-weight: 700; }
.iw-production-lot { min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 8px; border-left: 3px solid #7d2826; background: #f7f3ea; text-align: left; }
.iw-production-lot strong { color: #7d2826; font: 800 .74rem "Outfit", sans-serif; }
.iw-production-lot span { color: #343723; font-size: .74rem; font-weight: 800; overflow-wrap: anywhere; }
.iw-production-lot small { color: #77746b; font-size: var(--iw-font-help); }
.iw-production-lot.is-general { border-left-color: #7c846e; background: #f3f3ee; }

.iw-schedule-review-submitted { position: fixed; z-index: 10100; top: 22px; right: 22px; width: min(520px, calc(100vw - 32px)); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 46px 15px 15px; transform: translateY(-12px); border: 1px solid #aeb9a7; border-left: 5px solid #435735; border-radius: 6px; background: #fff; box-shadow: 0 14px 34px rgba(34, 39, 27, .22); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.iw-schedule-review-submitted.show { transform: translateY(0); opacity: 1; }
.iw-schedule-review-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #435735; color: #fff; font-weight: 900; }
.iw-schedule-review-submitted strong, .iw-schedule-review-submitted p, .iw-schedule-review-submitted small { display: block; margin: 0; }
.iw-schedule-review-submitted strong { color: #343723; font-size: .9rem; }
.iw-schedule-review-submitted p { margin-top: 3px; color: #54574a; font-size: .76rem; }
.iw-schedule-review-submitted small { margin-top: 4px; color: #8c1d1a; font-size: .7rem; font-weight: 800; }
.iw-schedule-review-status-button { min-height: 36px; padding: 7px 12px; border: 1px solid #435735; border-radius: 4px; background: #435735; color: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.iw-schedule-review-close { position: absolute; top: 7px; right: 8px; width: 28px; height: 28px; border: 0; background: transparent; color: #6d7064; font-size: 1.1rem; cursor: pointer; }

/* Planning Center: department schedule dashboard */
.planning-department-dashboard {
  min-height: 680px;
  background: #f7f3e7;
  color: #343723;
}
.planning-department-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #d8d1bf;
  background: #fffdf8;
}
.planning-department-header h2,
.planning-department-header p { margin: 0; }
.planning-department-header h2 { color: #7d2826; font-size: 1.45rem; }
.planning-department-header > div:first-child > p:last-child { margin-top: 3px; color: #747168; font-size: .82rem; }
.planning-department-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.planning-department-controls label { display: grid; gap: 4px; }
.planning-department-controls label > span { color: #747168; font-size: .75rem; font-weight: 800; }
.planning-department-controls select,
.planning-department-period button,
.planning-department-today-button,
.planning-department-range-tabs button {
  min-height: 40px;
  border: 1px solid #cbc3ad;
  background: #fff;
  color: #343723;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
}
.planning-department-today-button { padding: 0 12px; cursor: pointer; white-space: nowrap; }
.planning-department-today-button:hover { border-color: #4a5d6b; color: #40505d; background: #eef1f3; }
.planning-department-breadcrumb { min-height: 20px; display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; color: #77746b; font-size: .72rem; font-weight: 700; }
.planning-department-breadcrumb button { padding: 0; border: 0; border-bottom: 1px solid #7d2826; background: transparent; color: #7d2826; font: inherit; font-weight: 800; cursor: pointer; }
.planning-department-breadcrumb b { color: #40505d; }
.planning-department-controls select { min-width: 180px; padding: 7px 34px 7px 10px; }
.planning-department-controls select:disabled { color: #343723; opacity: 1; }
.planning-department-period { display: grid; grid-template-columns: 38px minmax(150px, 1fr) 38px; align-items: stretch; }
.planning-department-period strong { display: flex; align-items: center; justify-content: center; padding: 0 12px; border-top: 1px solid #cbc3ad; border-bottom: 1px solid #cbc3ad; background: #fff; white-space: nowrap; font-size: .84rem; }
.planning-department-period button { padding: 0; font-size: 1.35rem; cursor: pointer; }
.planning-department-range-tabs { display: flex; }
.planning-department-range-tabs button { min-width: 58px; margin-left: -1px; padding: 0 10px; cursor: pointer; }
.planning-department-range-tabs button.active { border-color: #435735; background: #435735; color: #fff; }
.planning-department-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 20px;
  border: 1px solid #d8d1bf;
  background: #fffdf8;
}
.planning-department-kpis > div { min-height: 72px; padding: 12px 16px; border-right: 1px solid #e0dac9; }
.planning-department-kpis > div:last-child { border-right: 0; }
.planning-department-kpis span,
.planning-department-kpis strong,
.planning-department-kpis small { display: block; }
.planning-department-kpis span { color: #747168; font-size: .76rem; }
.planning-department-kpis strong { margin-top: 2px; color: #35452a; font-size: 1.4rem; line-height: 1.1; }
.planning-department-kpis small { margin-top: 2px; color: #77746b; font-size: .71rem; }
.planning-department-kpis .is-danger strong { color: #8c1d1a; }
.planning-department-kpis .is-warning strong { color: #a7680a; }
.planning-department-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 20px 14px; }
.planning-department-filters > span { margin-right: 3px; color: #747168; font-size: .72rem; font-weight: 800; }
.planning-department-filters button { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #cbc3ad; border-radius: 16px; background: #fffdf8; color: #4f5246; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.planning-department-filters button b { min-width: 19px; padding: 1px 5px; border-radius: 10px; background: #ece8dc; color: #62645a; font-size: .7rem; text-align: center; }
.planning-department-filters button.active { border-color: #40505d; background: #40505d; color: #fff; }
.planning-department-filters button.active b { background: #fff; color: #40505d; }
.planning-department-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 12px; margin: 0 20px 20px; }
.planning-department-board,
.planning-department-actions,
.planning-department-capacity { min-width: 0; border: 1px solid #d8d1bf; background: #fffdf8; }
.planning-department-board > header,
.planning-department-actions > header,
.planning-department-capacity > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #ddd6c4; }
.planning-department-board h3,
.planning-department-actions h3,
.planning-department-capacity h3 { margin: 0; font-size: .9rem; }
.planning-department-board header span,
.planning-department-actions header span,
.planning-department-capacity header span { display: block; margin-top: 2px; color: #77746b; font-size: .72rem; }
.planning-department-board > header > b,
.planning-department-actions > header > b { color: #8c1d1a; font-size: .75rem; }
.planning-department-date-head {
  display: grid;
  grid-template-columns: 230px repeat(var(--planning-department-columns), minmax(54px, 1fr));
  background: #eee8d8;
  border-bottom: 1px solid #d8d1bf;
}
.planning-department-date-head > div { min-height: 47px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; border-left: 1px solid #d9d1be; text-align: center; }
.planning-department-date-head > div:first-child { align-items: flex-start; padding-left: 14px; border-left: 0; font-size: .76rem; font-weight: 800; }
.planning-department-date-head strong { font-size: .75rem; }
.planning-department-date-head span { color: #747168; font-size: .7rem; }
.planning-department-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 70px;
  border-bottom: 1px solid #e5dfcf;
  cursor: pointer;
}
.planning-department-row:last-child { border-bottom: 0; }
.planning-department-row:hover,
.planning-department-row.is-selected { background: #f2f5eb; }
.planning-department-row.is-selected { box-shadow: inset 4px 0 #40505d; }
.planning-department-project { padding: 10px 11px 9px 14px; }
.planning-department-project strong,
.planning-department-project span { display: block; }
.planning-department-project strong { font-size: .8rem; line-height: 1.35; }
.planning-department-project span { margin-top: 2px; color: #747168; font-size: .72rem; }
.planning-department-project > b { display: inline-block; margin-top: 5px; padding: 2px 6px; font-size: .7rem; }
.planning-department-project > b.tone-normal { background: #e8f0e3; color: #436139; }
.planning-department-project > b.tone-warning { background: #f7ecd6; color: #996009; }
.planning-department-project > b.tone-danger { background: #f7e3df; color: #8c1d1a; }
.planning-department-project > b.tone-unassigned { background: #ecebe7; color: #696a62; }
.planning-department-lane {
  position: relative;
  min-width: 0;
  background: repeating-linear-gradient(to right, transparent 0, transparent calc((100% / var(--planning-department-columns)) - 1px), #e7e0d1 calc((100% / var(--planning-department-columns)) - 1px), #e7e0d1 calc(100% / var(--planning-department-columns)));
}
.planning-department-bar { position: absolute; top: 22px; height: 24px; display: block; min-width: 0; overflow: hidden; padding: 4px 7px; color: #fff; font-size: .7rem; line-height: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.planning-department-bar.tone-normal { background: #677b8f; }
.planning-department-bar.tone-warning { background: #bd7609; }
.planning-department-bar.tone-danger { background: #8c2421; }
.planning-department-bar.tone-unassigned { background: #948f8c; }
.planning-department-overview-row { position: relative; min-height: 78px; }
.planning-department-overview-row:hover { background: #eef1f3; box-shadow: inset 4px 0 #40505d; }
.planning-department-overview-row.is-expanded { background: #f3f5f6; box-shadow: inset 4px 0 #40505d; }
.planning-department-overview-toggle { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 7px; padding: 10px 10px 10px 14px; border: 0; background: transparent; color: #343723; font: inherit; text-align: left; cursor: pointer; }
.planning-department-overview-toggle strong,
.planning-department-overview-toggle small { display: block; }
.planning-department-overview-toggle strong { font-size: .8rem; line-height: 1.3; }
.planning-department-overview-toggle small { margin-top: 3px; color: #747168; font-size: .7rem; }
.planning-department-overview-toggle > b { padding: 2px 5px; font-size: .7rem; white-space: nowrap; }
.planning-department-overview-toggle > b.tone-normal { background: #e8f0e3; color: #436139; }
.planning-department-overview-toggle > b.tone-warning { background: #f7ecd6; color: #996009; }
.planning-department-overview-toggle > b.tone-danger { background: #f7e3df; color: #8c1d1a; }
.planning-department-overview-toggle > b.tone-unassigned { background: #ecebe7; color: #696a62; }
.planning-department-overview-toggle > i { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #9aa6ae; border-radius: 50%; color: #40505d; font-size: .9rem; font-style: normal; font-weight: 800; }
.planning-department-overview-lane .planning-department-bar { display: flex; align-items: center; gap: 5px; }
.planning-department-overview-lane .planning-department-bar > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.planning-department-tag { flex: 0 0 auto; padding: 0 4px; border-radius: 7px; background: rgba(255,255,255,.9); font-size: .7rem; line-height: 14px; }
.planning-department-tag.tone-danger { color: #8c1d1a; }
.planning-department-tag.tone-ceremony { background: #f4e8c5; color: #775310; }
.planning-department-tag.tone-special { background: #e7e0ef; color: #5c4674; }
.planning-department-tag.tone-fixed { color: #7d2826; }
.planning-department-more { position: absolute; top: 23px; right: 8px; z-index: 3; padding: 3px 6px; border: 1px solid #b4bec5; border-radius: 10px; background: #fff; color: #40505d; font-size: .7rem; font-style: normal; font-weight: 900; }
.planning-department-overview-jobs { grid-column: 1 / -1; display: grid; gap: 1px; padding: 7px 8px 9px 14px; border-top: 1px solid #d9dfe3; background: #eef1f3; }
.planning-department-overview-job { min-width: 0; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #d6dde1; background: #fff; color: #343723; font: inherit; text-align: left; cursor: pointer; }
.planning-department-overview-job:hover { border-color: #7f919d; background: #f8fafb; }
.planning-department-overview-job strong,
.planning-department-overview-job small { display: block; }
.planning-department-overview-job strong { overflow: hidden; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.planning-department-overview-job small { margin-top: 2px; color: #747168; font-size: .7rem; }
.planning-department-overview-job-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.planning-department-overview-job-tags .planning-department-tag { border: 1px solid currentColor; }
.planning-department-overview-job > em { color: #40505d; font-size: .7rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.planning-department-view-all { min-height: 34px; border: 1px solid #40505d; background: #40505d; color: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.planning-department-overview-no-match { padding: 12px; color: #77746b; font-size: .72rem; text-align: center; }
.planning-department-lane-empty { position: absolute; top: 25px; left: 10px; max-width: calc(100% - 20px); overflow: hidden; color: #7d7d77; font-size: .7rem; line-height: 1.2; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.planning-department-milestone,
.planning-department-today { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; }
.planning-department-milestone { z-index: 2; border-left: 2px solid #8c1d1a; }
.planning-department-milestone::before { content: ""; position: absolute; top: 7px; left: -4px; width: 8px; height: 8px; background: #8c1d1a; transform: rotate(45deg); }
.planning-department-milestone.is-ceremony { border-left-color: #9b6d16; }
.planning-department-milestone.is-ceremony::before { border-radius: 50%; background: #e4b34d; transform: none; }
.planning-department-today { z-index: 1; border-left: 1px solid #c09c3c; }
.planning-department-detail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr 1.2fr auto; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-top: 1px solid #d8decf; background: #f1f4eb; }
.planning-department-detail span,
.planning-department-detail strong { display: block; }
.planning-department-detail span { color: #747168; font-size: .7rem; }
.planning-department-detail strong { margin-top: 2px; font-size: .76rem; }
.planning-department-detail strong.is-fixed { color: #8c1d1a; }
.planning-department-detail button { min-height: 34px; padding: 6px 10px; border: 1px solid #526345; background: #fff; color: #35452a; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.planning-department-detail button.is-release { border-color: #7d2826; background: #7d2826; color: #fff; }
.planning-department-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #77746b; text-align: center; }
.planning-department-empty strong,
.planning-department-empty span { display: block; }
.planning-department-empty span { margin-top: 4px; font-size: .7rem; }
.planning-department-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.planning-department-empty button { min-height: 38px; padding: 7px 12px; border: 1px solid #40505d; background: #fff; color: #40505d; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.planning-department-empty button:first-child { background: #40505d; color: #fff; }
.planning-department-board > footer { padding: 8px 12px; border-top: 1px solid #ddd6c4; color: #747168; font-size: .72rem; text-align: right; }
.planning-department-side { display: grid; gap: 12px; }
.planning-department-actions > header { border-top: 4px solid #7d2826; }
.planning-department-actions.is-clear > header { border-top-color: #687b5c; background: #f2f6ef; }
.planning-department-actions.is-clear > header > b { color: #49633f; font-size: 1rem; }
.planning-department-actions > button { width: 100%; min-height: 74px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-bottom: 1px solid #e2dccb; background: #fffdf8; color: #343723; text-align: left; font: inherit; cursor: pointer; }
.planning-department-actions > button:last-child { border-bottom: 0; }
.planning-department-actions > button:hover { background: #f7f3e9; }
.planning-department-actions > button > i { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #68785c; color: #fff; font-size: .7rem; font-style: normal; font-weight: 900; }
.planning-department-actions > button.tone-danger > i { background: #8c1d1a; }
.planning-department-actions > button.tone-warning > i { background: #be790b; }
.planning-department-actions > button strong,
.planning-department-actions > button small { display: block; }
.planning-department-actions > button strong { font-size: .76rem; }
.planning-department-actions > button small { margin-top: 3px; color: #747168; font-size: .7rem; line-height: 1.35; }
.planning-department-actions > button > em { padding: 5px 7px; border: 1px solid #b7af98; color: #435735; font-size: .7rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.planning-department-actions > button.tone-danger > em { border-color: #c88d88; color: #8c1d1a; }
.planning-department-actions > button.tone-warning > em { border-color: #d5ad6e; color: #996009; }
.planning-department-capacity > div { display: grid; grid-template-columns: minmax(0, 1fr) 82px minmax(54px, auto); align-items: center; gap: 7px; padding: 8px 10px; border-top: 1px solid #ebe5d6; }
.planning-department-capacity > div.is-department { cursor: pointer; }
.planning-department-capacity > div.is-department:hover { background: #eef1f3; }
.planning-department-capacity > div:first-of-type { border-top: 0; }
.planning-department-capacity > div > span strong,
.planning-department-capacity > div > span small { display: block; }
.planning-department-capacity > div > span strong { font-size: .75rem; }
.planning-department-capacity > div > span small { color: #77746b; font-size: .7rem; }
.planning-department-capacity > div > i { height: 7px; background: #e8e3d3; }
.planning-department-capacity > div > i > b { display: block; height: 100%; background: #516543; }
.planning-department-capacity > div > i > b.is-warning { background: #bd7609; }
.planning-department-capacity > div > i > b.is-danger { background: #8c2421; }
.planning-department-capacity > div > em { font-size: .7rem; font-style: normal; font-weight: 800; text-align: right; }
.planning-department-side-empty { padding: 22px 12px; color: #77746b; font-size: .72rem; text-align: center; }

@media (max-width: 1180px) {
  .planning-department-header { align-items: flex-start; flex-direction: column; }
  .planning-department-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .planning-department-workspace { grid-template-columns: 1fr; }
  .planning-department-side { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); }
}

@media (max-width: 820px) {
  .planning-tool-shell:has(.planning-department-dashboard) { min-width: 0; overflow: hidden; }
  .planning-department-dashboard { width: 100%; min-width: 0; }
  .planning-department-header { padding: 16px; }
  .planning-department-header h2 { font-size: 1.25rem; }
  .planning-department-controls { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .planning-department-controls > * { min-width: 0; }
  .planning-department-controls select { width: 100%; }
  .planning-department-period { width: 100%; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .planning-department-range-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .planning-department-range-tabs button { width: 100%; min-width: 0; margin: 0 0 0 -1px; }
  .planning-department-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 16px; }
  .planning-department-filters { margin: 0 16px 12px; }
  .planning-department-kpis > div:nth-child(2) { border-right: 0; }
  .planning-department-kpis > div:nth-child(-n + 2) { border-bottom: 1px solid #e0dac9; }
  .planning-department-workspace { margin: 0 16px 16px; }
  .planning-department-board { overflow: visible; }
  .planning-department-board > header,
  .planning-department-board > footer { min-width: 0; }
  .planning-department-date-head { display: none; }
  .planning-department-rows { min-width: 0; display: grid; gap: 10px; padding: 10px; }
  .planning-department-row { display: block; min-height: 0; border: 1px solid #d8d1bf; background: #fff; }
  .planning-department-project { min-height: 92px; }
  .planning-department-lane { height: 52px; border-top: 1px solid #e5dfcf; background: repeating-linear-gradient(to right, transparent 0, transparent calc((100% / var(--planning-department-columns)) - 1px), #e7e0d1 calc((100% / var(--planning-department-columns)) - 1px), #e7e0d1 calc(100% / var(--planning-department-columns))); }
  .planning-department-bar { top: 14px; }
  .planning-department-lane-empty { top: 17px; }
  .planning-department-overview-toggle { min-height: 76px; }
  .planning-department-overview-job { grid-template-columns: minmax(0, 1fr) auto; }
  .planning-department-overview-job-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .planning-department-overview-job > em { grid-column: 2; grid-row: 1; }
  .planning-department-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-department-detail button { justify-self: start; }
  .planning-department-side { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .planning-department-kpis { grid-template-columns: 1fr; }
  .planning-department-kpis > div { min-height: 64px; border-right: 0; border-bottom: 1px solid #e0dac9; }
  .planning-department-kpis > div:last-child { border-bottom: 0; }
  .planning-department-detail { grid-template-columns: 1fr; }
  .planning-department-controls { gap: 8px; }
  .planning-department-today-button { width: 100%; }
  .planning-department-capacity > div { grid-template-columns: minmax(0, 1fr) 64px minmax(48px, auto); }
}

/* Planning Center: simplified assignment flow for large teams */
.planning-team-board { background: #f9f7f0; min-height: 680px; }
.planning-team-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px 13px; background: #fff; }
.planning-team-header h2, .planning-team-header p { margin: 0; }
.planning-team-header h2 { font-size: 1.35rem; }
.planning-team-heading { min-width: 0; }
.planning-team-heading > p:last-child { color: #747168; font-size: .78rem; }
.planning-team-back-button { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #aaa593; border-radius: 6px; background: #fbfaf6; color: #343723; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(52,55,35,.06); }
.planning-team-back-button span { font-size: 1rem; line-height: 1; }
.planning-team-back-button:hover { border-color: #7d2826; color: #7d2826; background: rgba(125,40,38,.05); box-shadow: 0 4px 10px rgba(52,55,35,.1); }
.planning-team-back-button:focus-visible { outline: 3px solid rgba(125,40,38,.2); outline-offset: 2px; }
.planning-team-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 0 20px 14px; border-bottom: 1px solid #d8d3c5; background: #fff; }
.planning-team-header-actions .planning-search { width: min(420px, 42vw); }
.planning-team-picker > header > button { min-height: 42px; padding: 8px 13px; border: 1px solid #aaa593; background: #fff; color: #343723; font: inherit; font-weight: 800; cursor: pointer; }
.planning-team-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 20px 10px; border: 1px solid #d8d3c5; background: #fff; }
.planning-team-steps span { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border-right: 1px solid #e0dbcf; font-weight: 800; }
.planning-team-steps span:last-child { border-right: 0; }
.planning-team-steps b { width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #aaa593; border-radius: 50%; }
.planning-team-steps .done { color: #435735; }
.planning-team-steps .active { background: #8c1d1a; color: #fff; }
.planning-team-steps .active b { border-color: rgba(255,255,255,.75); }
.planning-team-departments { margin: 0 20px 12px; }
.planning-team-departments h3 { margin: 0 0 7px; font-size: .84rem; }
.planning-team-step-select { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr); align-items: center; gap: 14px; min-height: 72px; padding: 10px 12px; border: 1px solid #d4cfc1; border-left: 4px solid #8c1d1a; background: #fff; color: #343723; }
.planning-team-step-select > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px 10px; min-width: 0; }
.planning-team-step-select > span b { grid-row: 1 / 3; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: #343723; color: #fff; font-size: .73rem; }
.planning-team-step-select > span strong, .planning-team-step-select > span small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-team-step-select > span strong { font-size: .84rem; }
.planning-team-step-select > span small { color: #77746b; font-size: .69rem; }
.planning-team-step-select select { width: 100%; min-height: 42px; border: 1px solid #c9c4b6; border-radius: 4px; padding: 7px 10px; background: #fbfaf6; color: #343723; font: inherit; font-weight: 700; cursor: pointer; }
.planning-team-main { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.5fr); gap: 12px; margin: 0 20px; }
.planning-team-orders, .planning-team-picker { border: 1px solid #d8d3c5; background: #fff; min-width: 0; }
.planning-team-orders > header, .planning-team-picker > header { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #e2ddd1; }
.planning-team-orders h3, .planning-team-picker h3, .planning-team-picker header strong, .planning-team-picker header span { margin: 0; display: block; }
.planning-team-orders > header strong { color: #8c1d1a; }
.planning-team-picker header strong { font-size: .82rem; margin-top: 3px; }
.planning-team-picker header span { color: #77746b; font-size: .7rem; }
.planning-team-order-list { padding: 10px; display: grid; gap: 8px; }
.planning-team-order-list > button { position: relative; min-height: 112px; padding: 13px 110px 13px 14px; border: 1px solid #d8d3c5; border-left: 4px solid transparent; background: #fff; color: #343723; text-align: left; font: inherit; cursor: pointer; }
.planning-team-order-list > button.active { border-left-color: #435735; background: #f3f6ed; }
.planning-team-order-code { display: block; font-weight: 900; }
.planning-team-order-list > button > strong, .planning-team-order-list > button > small { display: block; margin-top: 5px; }
.planning-team-order-list > button > small { color: #747168; font-size: .72rem; }
.planning-team-order-key-date { display: block; width: fit-content; margin-top: 7px; padding: 3px 6px; border-left: 3px solid #8c1d1a; background: #f8e9e5; color: #8c1d1a; font-size: .66rem; font-weight: 800; }
.planning-team-selected-key-date { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; background: #f8e9e5; color: #8c1d1a; font-style: normal; font-size: .68rem; font-weight: 800; }
.planning-team-order-list > button > em { position: absolute; right: 13px; bottom: 13px; padding: 6px 9px; border: 1px solid #aaa593; background: #fff; color: #435735; font-style: normal; font-size: .72rem; font-weight: 800; }
.planning-team-urgent { position: absolute; top: 12px; right: 12px; padding: 3px 7px; background: #8c1d1a; color: #fff; font-size: .68rem; }
.planning-team-template-list { padding: 10px 12px; display: grid; gap: 7px; }
.planning-assignment-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 10px 12px 0; padding: 4px; border: 1px solid #d8d3c5; background: #f3f0e7; }
.planning-assignment-mode button { min-height: 40px; border: 1px solid transparent; background: transparent; color: #5f5d55; font: inherit; font-weight: 800; cursor: pointer; }
.planning-assignment-mode button.active { border-color: #8c1d1a; background: #fff; color: #8c1d1a; box-shadow: 0 2px 7px rgba(52,55,35,.08); }
.planning-team-template-list article { display: grid; grid-template-columns: 116px minmax(180px, 1fr) 120px 105px; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px; border: 1px solid #ddd8cc; }
.planning-team-template-list article.active { border-color: #8c1d1a; background: #fff9f7; }
.planning-team-template-list article > div > strong, .planning-team-template-list article > div > small { display: block; }
.planning-team-template-list article > div > small { color: #77746b; font-size: .68rem; margin-top: 2px; }
.planning-team-recommended { display: inline-block; margin-left: 7px; padding: 2px 6px; background: #e6eedf; color: #3e7137; font-style: normal; font-size: .62rem; font-weight: 900; vertical-align: middle; }
.planning-team-template-list article > button { min-height: 36px; border: 1px solid #8c1d1a; background: #fff; color: #8c1d1a; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.planning-team-template-list article.active > button { background: #8c1d1a; color: #fff; }
.planning-individual-discovery { margin: 10px 12px 0; overflow: hidden; border: 1px solid #ddd8cc; background: #fbfaf6; }
.planning-individual-discovery > header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid #e3ded2; background: #f3f0e7; }
.planning-individual-discovery > header strong, .planning-individual-discovery > header small { display: block; }
.planning-individual-discovery > header strong { color: #343723; font-size: .85rem; }
.planning-individual-discovery > header small { margin-top: 3px; color: #77746b; font-size: .68rem; }
.planning-individual-controls { display: grid; grid-template-columns: minmax(190px,.85fr) minmax(250px,1.15fr); gap: 9px; width: min(570px, 68%); }
.planning-individual-department, .planning-individual-search-field { display: grid; gap: 5px; min-width: 0; }
.planning-individual-department > span, .planning-individual-search-field > span { color: #646259; font-size: .64rem; font-weight: 900; }
.planning-individual-department select { width: 100%; min-height: 38px; padding: 6px 9px; border: 1px solid #c9c4b6; border-radius: 6px; outline: 0; background: #fff; color: #343723; font: inherit; font-size: .72rem; font-weight: 700; }
.planning-individual-department select:focus { border-color: #657459; box-shadow: 0 0 0 3px rgba(67,87,53,.1); }
.planning-individual-search { display: flex; width: 100%; min-height: 38px; box-sizing: border-box; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #c9c4b6; border-radius: 6px; background: #fff; font-style: normal; }
.planning-individual-search:focus-within { border-color: #657459; box-shadow: 0 0 0 3px rgba(67,87,53,.1); }
.planning-individual-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #65705f; stroke-width: 1.8; }
.planning-individual-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #343723; font: inherit; font-size: .74rem; }
.planning-individual-list { display: grid; gap: 7px; padding: 10px 12px; }
.planning-individual-list.is-expanded { max-height: 430px; overflow-y: auto; scrollbar-gutter: stable; }
.planning-individual-list article { position: relative; display: grid; grid-template-columns: 46px minmax(180px, 1fr) 94px 105px; align-items: center; gap: 10px; min-height: 72px; padding: 9px 10px; border: 1px solid #ddd8cc; background: #fff; }
.planning-individual-list article.active { border-color: #8c1d1a; background: #fff9f7; }
.planning-individual-list article > div > strong, .planning-individual-list article > div > small { display: block; }
.planning-individual-list article > div > small { margin-top: 2px; color: #77746b; font-size: .68rem; }
.planning-individual-copy { min-width: 0; }
.planning-individual-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-individual-copy > span { display: block; margin-top: 4px; color: #526149; font-size: .65rem; font-weight: 800; }
.planning-individual-list article > button { min-height: 36px; border: 1px solid #8c1d1a; background: #fff; color: #8c1d1a; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.planning-individual-list article.active > button { background: #8c1d1a; color: #fff; }
.planning-individual-discovery > footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 12px 11px; border-top: 1px solid #e3ded2; background: #f7f4ec; }
.planning-individual-discovery > footer button { min-height: 36px; padding: 7px 13px; border: 1px solid #657459; border-radius: 5px; background: #fff; color: #435735; font: inherit; font-size: .73rem; font-weight: 900; cursor: pointer; }
.planning-individual-discovery > footer button:hover { background: #eef2e8; }
.planning-individual-discovery > footer span { color: #77746b; font-size: .68rem; }
.planning-individual-avatar { display: grid !important; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #e5eadc; color: #435735; font-size: .7rem; font-weight: 900; }
.planning-team-template-list article > button:disabled { border-color: #d2cfc6; background: #eee; color: #999; cursor: default; }
.planning-team-avatar-stack { display: flex; }
.planning-team-avatar-stack span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; margin-left: -5px; border: 2px solid #fff; border-radius: 50%; background: #e5eadc; font-size: .66rem; font-weight: 900; }
.planning-team-avatar-stack span:first-child { margin-left: 0; }
.planning-team-availability { font-size: .72rem; font-weight: 800; }
.planning-team-availability.available { color: #3e7137; }
.planning-team-availability.partial { color: #a76510; }
.planning-team-availability.busy, .planning-team-availability.unavailable { color: #9b2825; }
.planning-team-selection { margin: 4px 12px 12px; border: 1px solid #ddd8cc; }
.planning-team-selection > header { display: flex; justify-content: space-between; padding: 9px 11px; background: #f3f0e7; }
.planning-team-selection h4 { margin: 0; }
.planning-team-selection p { display: grid; grid-template-columns: minmax(180px,1fr) 160px 50px; gap: 8px; margin: 0; padding: 7px 11px; border-top: 1px solid #ece8de; font-size: .74rem; }
.planning-team-selection p b { color: #3e7137; }
.planning-team-selection-empty { display: block !important; color: #77746b; text-align: center; }
.planning-assignment-empty { display: grid; min-height: 220px; place-content: center; gap: 5px; padding: 24px; color: #77746b; text-align: center; }
.planning-assignment-empty strong { color: #435735; font-size: .92rem; }
.planning-assignment-empty span { max-width: 480px; font-size: .74rem; line-height: 1.5; }
.planning-team-empty { min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 20px; color: #77746b; text-align: center; }
.planning-team-footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 20px; border-top: 1px solid #d8d3c5; background: #fff; box-shadow: 0 -5px 14px rgba(52,55,35,.06); }
.planning-team-footer span { color: #435735; font-weight: 800; }
.planning-team-footer button { min-height: 44px; padding: 8px 22px; border: 0; background: #435735; color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.planning-team-footer button:disabled { background: #d8d6cf; color: #999; cursor: default; }

.team-template-editor-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(32,34,25,.62); backdrop-filter: blur(4px); }
.team-template-editor { width: min(820px, 96vw); max-height: 92vh; overflow: auto; background: #fbfaf6; color: #343723; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.team-template-editor > header { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #d8d3c5; }
.team-template-editor > header span { color: #8c1d1a; font: 800 .64rem 'Outfit'; }
.team-template-editor > header h2, .team-template-editor > header p { margin: 0; }
.team-template-editor > header p { color: #77746b; font-size: .74rem; }
.team-template-editor > header button { width: 38px; height: 38px; border: 1px solid #d2cdbf; background: #fff; font-size: 1.4rem; cursor: pointer; }
.team-template-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 22px; }
.team-template-fields label { display: flex; flex-direction: column; gap: 6px; }
.team-template-fields label > span { font-size: .78rem; font-weight: 800; }
.team-template-fields label > span small { color: #8c1d1a; font-size: .65rem; font-weight: 700; }
.team-template-fields select, .team-template-fields input { min-height: 42px; border: 1px solid #cec9ba; background: #fff; padding: 7px 10px; font: inherit; }
.team-template-fields .is-hidden { display: none; }
.team-template-members { margin: 0 22px 18px; border: 1px solid #d8d3c5; }
.team-template-members > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 10px 12px; background: #f2efe7; }
.team-template-members h3, .team-template-members header span { margin: 0; display: block; }
.team-template-members header span { color: #77746b; font-size: .7rem; }
.team-template-member-controls { display: grid; grid-template-columns: minmax(170px,.85fr) minmax(220px,1.15fr); gap: 8px; width: min(500px, 66%); }
.team-template-member-department, .team-template-member-search-field { display: grid; gap: 5px; min-width: 0; }
.team-template-member-department > span, .team-template-member-search-field > span { color: #646259; font-size: .64rem; font-weight: 900; }
.team-template-member-department select { width: 100%; min-height: 40px; padding: 6px 8px; border: 1px solid #9fa88f; outline: 0; background: #fff; color: #343723; font: inherit; font-size: .7rem; font-weight: 700; }
.team-template-member-search { width: 100%; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; border: 1px solid #9fa88f; background: #fff; font-style: normal; }
.team-template-member-search > svg { width: 18px; height: 18px; margin: 0 9px; fill: none; stroke: #435735; stroke-width: 2; stroke-linecap: round; }
.team-template-members header .team-template-member-search input { width: 100%; min-height: 38px; border: 0; outline: 0; padding: 7px 9px 7px 0; background: transparent; }
#team-editor-employee-list { max-height: 310px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; }
#team-editor-employee-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 7px 11px; border-top: 1px solid #ece8de; cursor: pointer; }
#team-editor-employee-list > [hidden] { display: none !important; }
#team-editor-employee-list label:nth-child(odd) { border-right: 1px solid #ece8de; }
#team-editor-employee-list label:hover { background: #f7f5ef; }
@media (max-width: 700px) {
  .team-template-members > header { align-items: stretch; flex-direction: column; }
  .team-template-member-controls { grid-template-columns: 1fr; width: 100%; }
  .team-template-member-search { width: 100%; box-sizing: border-box; }
  #team-editor-employee-list { grid-template-columns: 1fr; }
  #team-editor-employee-list label:nth-child(odd) { border-right: 0; }
}
#team-editor-employee-list input { width: 18px; height: 18px; accent-color: #435735; }
#team-editor-employee-list strong, #team-editor-employee-list small { display: block; }
#team-editor-employee-list small { color: #77746b; font-size: .68rem; }
#team-editor-employee-list em { padding: 2px 6px; font-style: normal; font-size: .61rem; font-weight: 900; }
#team-editor-employee-list em.recommended { background: #e6eedf; color: #3e7137; }
#team-editor-employee-list em.other { background: #eeeae1; color: #77746b; }
#team-editor-employee-empty { grid-column: 1 / -1; margin: 0; padding: 22px; color: #77746b; text-align: center; }
.team-template-editor form > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px; border-top: 1px solid #d8d3c5; background: #fbfaf6; }
.team-template-editor form > footer button { min-height: 42px; padding: 8px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.team-template-editor form > footer .secondary { border: 1px solid #aaa593; background: #fff; color: #343723; }
.team-template-editor form > footer .primary { border: 1px solid #435735; background: #435735; color: #fff; }

@media (max-width: 980px) {
  .iw-top-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iw-handover-method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iw-handover-method__note { grid-column: 1 / -1; }
  .iw-top-field--quotation { grid-column: 1 / -1; }
  #iw-linked-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #iw-linked-identity .document-screen-identity__heading { grid-column: 1 / -1; }
  .iw-milestone-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iw-phase-workspace { grid-template-columns: 1fr; }
  .iw-plan-review-panel { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iw-plan-review-panel > header { grid-column: 1 / -1; }
  .iw-plan-review-status, .iw-plan-review-block, .iw-plan-release-control { border-right: 1px solid #e5e0d5; }
  .iw-phase-header { grid-template-columns: 38px minmax(150px, 1fr) minmax(120px, .75fr) minmax(135px, .85fr) 80px 34px; gap: 7px; }
  .iw-phase-step-head, .iw-phase-step { grid-template-columns: 34px minmax(115px, .72fr) minmax(145px, 1fr) 78px 108px 108px 94px; gap: 6px; }
  .planning-team-main { grid-template-columns: 1fr; }
  .planning-team-step-select { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .iw-planning-heading { align-items: flex-start; flex-direction: column; }
  .iw-planning-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .iw-phase-workspace { padding: 8px; }
  .iw-phase-header { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .iw-phase-team, .iw-phase-date, .iw-phase-progress { grid-column: 2; }
  .iw-phase-toggle { grid-column: 3; grid-row: 1; }
  .iw-phase-step-head { display: none; }
  .iw-department-plan { grid-template-columns: 36px minmax(0, 1fr); padding: 8px 0; }
  .iw-department-plan-head { display: none; }
  .iw-department-plan label, .iw-department-plan time, .iw-department-plan .iw-date-display, .iw-department-plan .iw-capacity-badge, .iw-department-plan .iw-release-badge { grid-column: 2; }
  .iw-mobile-field-label { display: block; margin-bottom: 4px; color: #747168; font-size: var(--iw-font-label); font-weight: 800; }
  .iw-key-date-heading, .iw-milestone-empty { align-items: stretch; flex-direction: column; }
  .iw-milestone-empty span { text-align: left; }
  .iw-milestone-fields { grid-template-columns: 1fr 1fr; }
  .iw-milestone-preparation { grid-column: 1 / -1; }
  .iw-review-summary { grid-template-columns: 1fr 1fr; }
  .iw-review-summary > div:nth-child(2) { border-right: 0; }
  .iw-risk-action-panel { grid-template-columns: 36px minmax(0, 1fr); }
  .iw-risk-action-choices, .iw-risk-impact-link { grid-column: 1 / -1; }
  .iw-risk-impact-link { justify-self: start; }
  .iw-manual-schedule-controls { grid-template-columns: 1fr; }
  .iw-timeline-axis, .iw-timeline-milestone-row, .iw-timeline-row { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
  .iw-timeline-info { grid-template-columns: 1fr; }
  .iw-timeline-info strong { grid-column: 1; }
  .iw-timeline-info em { justify-self: start; }
  .iw-priority-timeline-summary > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .iw-priority-timeline-summary > header small { text-align: left; }
  .iw-priority-timeline-item { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .iw-priority-timeline-item > div:nth-of-type(2), .iw-priority-timeline-item > div:nth-of-type(3) { grid-column: 2 / -1; }
  .iw-priority-timeline-item > b { grid-column: 3; grid-row: 1; }
  .iw-milestone-review-list > header, .iw-milestone-review-list > article { grid-template-columns: 1fr; }
  .iw-milestone-review-list > header span, .iw-milestone-review-list > article b { grid-column: 1; justify-self: start; text-align: left; }
  .iw-review-decisions { grid-template-columns: 1fr; }
  .iw-review-decisions > div { border-right: 0; border-bottom: 1px solid #e2ddd1; }
  .iw-plan-review-panel { grid-template-columns: 1fr; }
  .iw-plan-review-panel > header { grid-column: 1; }
  .planning-team-header { align-items: flex-start; flex-direction: row; gap: 12px; padding: 14px 10px 11px; }
  .planning-team-header h2 { font-size: 1.1rem; }
  .planning-team-back-button { min-height: 38px; padding: 7px 10px; }
  .planning-team-header-actions { align-items: stretch; flex-direction: column; }
  .planning-team-header-actions .planning-search { width: 100%; }
  .planning-team-steps { margin-left: 10px; margin-right: 10px; }
  .planning-team-steps span { font-size: .72rem; }
  .planning-team-departments, .planning-team-main { margin-left: 10px; margin-right: 10px; }
  .planning-team-template-list article { grid-template-columns: 78px minmax(0,1fr); }
  .planning-individual-discovery > header { align-items: stretch; flex-direction: column; }
  .planning-individual-controls { grid-template-columns: 1fr; width: 100%; }
  .planning-individual-search { width: auto; }
  .planning-individual-list article { grid-template-columns: 46px minmax(0,1fr); }
  .planning-team-availability, .planning-team-template-list article > button, .planning-individual-list .planning-team-availability, .planning-individual-list article > button { grid-column: 2; }
  .planning-individual-list article > .planning-team-recommended { position: static; grid-column: 2; width: fit-content; margin-left: 0; }
  .team-template-fields, #team-editor-employee-list { grid-template-columns: 1fr; }
  #team-editor-employee-list label:nth-child(odd) { border-right: 0; }
  .team-template-members > header { align-items: stretch; flex-direction: column; }
  .team-template-members header input { width: 100%; }
  .iw-schedule-review-submitted { top: 12px; right: 12px; grid-template-columns: 34px minmax(0, 1fr); }
  .iw-schedule-review-status-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .gallery-album-grid,
  .gallery-brick-grid {
    column-count: 1;
  }

  .gallery-album-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .gallery-lightbox {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 4px;
    padding: 16px 8px;
  }

  .gallery-lightbox-close,
  .gallery-lightbox-nav {
    width: 38px;
    height: 38px;
  }
}

.employee-overview-copy h2 {
  margin: 2px 0 1px;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.35;
}

.employee-overview-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.72rem;
}

.employee-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
}

.employee-overview-metrics > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 8px;
}

.employee-overview-metrics > div + div { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.employee-overview-metrics strong { color: #ffffff; font: 800 1.28rem "Outfit", sans-serif; }
.employee-overview-metrics span {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.64rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-directory-panel {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 5px 16px rgba(31, 34, 20, 0.09);
}

.employee-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: end;
  gap: 14px;
  padding: 16px 18px;
  background: #f3f0e5;
  border-bottom: 1px solid rgba(52, 55, 35, 0.14);
}

.employee-search-control {
  height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: #565a3d;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 5px;
}

.employee-search-control:focus-within {
  border-color: #6c724b;
  box-shadow: 0 0 0 3px rgba(108, 114, 75, 0.12);
}

.employee-search-control svg,
.employee-view-switch svg,
.employee-reset-filter svg,
.employee-icon-btn svg,
.employee-card-command svg,
.employee-form-footer svg,
.employee-directory-empty svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.employee-search-control input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: #343723;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.employee-filter-controls { display: flex; align-items: end; gap: 9px; }
.employee-filter-controls label { display: grid; gap: 4px; }
.employee-filter-controls label > span {
  color: #737466;
  font-size: 0.62rem;
  font-weight: 800;
}
.employee-filter-controls select {
  min-width: 126px;
  height: 44px;
  padding: 0 30px 0 11px;
  color: #343723;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 5px;
  font: 700 0.76rem var(--font-family);
}

.employee-reset-filter {
  min-width: 68px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7d2826;
  background: rgba(125, 40, 38, 0.04);
  border: 1px solid rgba(125, 40, 38, 0.26);
  border-radius: 5px;
  font: 700 0.72rem var(--font-family);
  cursor: pointer;
}

.employee-view-switch {
  height: 44px;
  display: grid;
  grid-template-columns: repeat(2, 42px);
  gap: 3px;
  padding: 3px;
  background: #dedbce;
  border-radius: 5px;
}
.employee-view-switch button {
  display: grid;
  place-items: center;
  color: #77786b;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.employee-view-switch button.active {
  color: #ffffff;
  background: #4f5635;
  box-shadow: 0 2px 5px rgba(38, 41, 24, 0.18);
}

.employee-directory-results { min-height: 180px; }
.employee-table-wrap { overflow-x: auto; }
.employee-directory-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.employee-directory-table th {
  height: 42px;
  padding: 0 14px;
  color: #f9f7ef;
  background: #4b5032;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left !important;
}
.employee-directory-table th:nth-child(1) { width: 31%; }
.employee-directory-table th:nth-child(2) { width: 13%; }
.employee-directory-table th:nth-child(3) { width: 12%; }
.employee-directory-table th:nth-child(4) { width: 17%; }
.employee-directory-table th:nth-child(5) { width: 15%; }
.employee-directory-table th:nth-child(6) { width: 90px; }
.employee-directory-table td {
  height: 58px;
  padding: 8px 14px;
  color: #4a4d37;
  border-bottom: 1px solid rgba(52, 55, 35, 0.09);
  font-size: 0.78rem;
  vertical-align: middle;
}
.employee-directory-table tbody tr { cursor: pointer; transition: background-color 0.16s ease; }
.employee-directory-table tbody tr:hover,
.employee-directory-table tbody tr:focus-visible { background: #f5f3e9; outline: none; }
.employee-directory-table tbody tr:last-child td { border-bottom: 0; }

.employee-person-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.employee-person-cell strong {
  min-width: 0;
  overflow: hidden;
  color: #343723;
  font-size: 0.81rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.employee-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.employee-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #59603d;
  font-size: 0.82rem;
  font-weight: 800;
}
.employee-code { color: #8d2a27; font: 800 0.75rem "Outfit", sans-serif; }
.employee-department-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 2px 9px;
  overflow: hidden;
  color: #555b3a;
  background: #efeee4;
  border: 1px solid #d7d4c5;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.employee-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.employee-status.is-active { color: #4d6b3d; background: #edf3e8; border: 1px solid #cad9c0; }
.employee-status.is-paused { color: #9a6a1f; background: #fbf1df; border: 1px solid #e8d2a9; }
.employee-status.is-former { color: #8a3431; background: #f8eaea; border: 1px solid #e4c0be; }

.employee-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.employee-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: #4c5135;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 5px;
  cursor: pointer;
}
.employee-icon-btn:hover { color: #ffffff; background: #59603d; }
.employee-icon-btn.is-danger { color: #8d2a27; background: #fffafa; border-color: rgba(141, 42, 39, 0.2); }
.employee-icon-btn.is-danger:hover { color: #ffffff; background: #8d2a27; }

.employee-photo-grid {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: #f8f6ef;
}
.employee-photo-column {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.employee-photo-spacer {
  height: 30px;
  flex: 0 0 30px;
  visibility: hidden;
  pointer-events: none;
}
.gallery-column-spacer {
  height: 30px;
  margin-bottom: 8px;
  visibility: hidden;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.employee-photo-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  color: #f8f5e9;
  background: #252918;
  border: 1px solid rgba(52, 55, 35, 0.28);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(36, 39, 24, 0.12);
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.employee-photo-card.is-tall { aspect-ratio: 3 / 4; }
.employee-photo-card:hover,
.employee-photo-card:focus-visible {
  transform: translateY(-4px);
  border-color: #74794f;
  box-shadow: 0 12px 24px rgba(31, 34, 20, 0.22);
  outline: none;
}
.employee-photo-card-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d8d8ca 0%, #bfc1ad 100%);
}
.employee-photo-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(29, 32, 18, 0.98) 0%, rgba(29, 32, 18, 0.72) 33%, rgba(29, 32, 18, 0.12) 68%, rgba(29, 32, 18, 0.03) 100%);
}
.employee-photo-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.02);
  transition: transform 0.35s ease, filter 0.35s ease;
}
.employee-photo-card:hover .employee-photo-card-media > img,
.employee-photo-card:focus-visible .employee-photo-card-media > img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.03);
}
.employee-photo-card-media .employee-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-height: 25px;
  color: #f7f4e7;
  background: rgba(35, 38, 22, 0.78);
  border-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
}
.employee-photo-card-fallback {
  color: rgba(52, 55, 35, 0.62);
  font: 800 4rem "Outfit", sans-serif;
}
.employee-photo-card-body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 18px 14px 14px;
}
.employee-photo-card-body .employee-code { color: #e2a29a; font-size: 0.7rem; }
.employee-photo-card-body h3 {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
}
.employee-photo-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #d5d1bf;
  font-size: 0.7rem;
}
.employee-photo-card-meta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-photo-card-meta .employee-department-tag {
  min-height: 24px;
  flex: 0 1 auto;
  color: #f4f0df;
  background: rgba(125, 40, 38, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
}
.employee-photo-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.employee-card-command {
  height: 34px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  font: 700 0.72rem var(--font-family);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.employee-card-command:hover { background: rgba(116, 121, 79, 0.92); }
.employee-photo-card-actions .employee-icon-btn.is-danger {
  color: #f6cfca;
  background: rgba(125, 40, 38, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
}

.employee-directory-empty {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #77786b;
  text-align: center;
}
.employee-directory-empty svg { width: 36px; height: 36px; color: #8d2a27; }
.employee-directory-empty strong { color: #343723; }
.employee-directory-empty span { font-size: 0.75rem; }

/* Employee form and profile modals */
.employee-form-modal {
  width: min(780px, calc(100vw - 30px));
  max-height: min(760px, calc(100dvh - 30px));
  overflow: hidden;
  border-radius: 7px;
}
.employee-modal-header {
  align-items: center;
  padding: 18px 22px;
  color: #ffffff;
  background: #30351f !important;
  border-bottom: 4px solid #8d2a27 !important;
}
.employee-modal-header .drawer-close { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); }
.employee-modal-header .modal-title { color: #ffffff; font-size: 1.08rem; }
.employee-modal-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #d58c82;
  font: 800 0.66rem "Outfit", sans-serif;
}
.employee-form-modal form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.employee-form-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  overflow-y: auto;
  background: #fbfaf6;
}
.employee-form-photo-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 18px 14px;
  text-align: center;
  background: #efeee4;
  border-left: 3px solid #74794f;
}
.employee-form-photo-panel > span:first-child { align-self: flex-start; color: #7d2826; font: 800 0.65rem "Outfit", sans-serif; }
.employee-form-photo-panel > strong { margin-top: 12px; color: #343723; font-size: 0.8rem; }
.employee-form-photo-panel > small { margin-top: 4px; color: #77786b; font-size: 0.66rem; line-height: 1.45; }
.employee-photo-uploader {
  position: relative;
  width: 126px;
  height: 126px;
  margin-top: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #777b59;
  background: #d9dacd;
  border: 2px dashed #9da083;
  border-radius: 50%;
  cursor: pointer;
}
.employee-photo-uploader > svg { width: 48px; height: 48px; }
.employee-photo-uploader > img { width: 100%; height: 100%; object-fit: cover; display: none; }
.employee-photo-uploader > span {
  position: absolute;
  inset: auto 0 0;
  padding: 6px 3px;
  color: #ffffff;
  background: rgba(48, 53, 31, 0.82);
  font-size: 0.64rem;
  font-weight: 700;
}
.employee-form-fields { min-width: 0; display: grid; gap: 20px; }
.employee-form-section { display: grid; gap: 12px; }
.employee-form-section + .employee-form-section { padding-top: 18px; border-top: 1px solid rgba(52, 55, 35, 0.12); }
.employee-form-section-title { display: flex; align-items: center; gap: 9px; color: #343723; }
.employee-form-section-title span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #74794f;
  border-radius: 50%;
  font: 800 0.65rem "Outfit", sans-serif;
}
.employee-form-section-title strong { font-size: 0.82rem; }
.employee-form-grid { display: grid; gap: 12px; }
.employee-identity-grid { grid-template-columns: minmax(130px, 0.75fr) minmax(220px, 1.35fr); }
.employee-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-form-grid .form-group { min-width: 0; }
.employee-form-grid .form-group label { color: #4b4e36; font-size: 0.72rem; font-weight: 800; }
.employee-form-grid .form-input,
.employee-form-grid .form-select {
  width: 100%;
  min-width: 0;
  height: 42px;
  color: #343723;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 5px;
}
.employee-form-grid .form-input:focus,
.employee-form-grid .form-select:focus { border-color: #74794f; box-shadow: 0 0 0 3px rgba(116, 121, 79, 0.12); }
.employee-form-grid .form-input.is-readonly { color: #77786b; background: #ebe9df; cursor: not-allowed; }
.employee-form-footer { padding: 14px 22px; background: #f3f0e7; border-top: 1px solid rgba(52, 55, 35, 0.12); }
.employee-form-footer .btn { min-height: 40px; }
.employee-form-footer .btn-primary { display: inline-flex; align-items: center; gap: 7px; }

.employee-profile-modal {
  width: min(540px, calc(100vw - 30px));
  max-height: min(720px, calc(100dvh - 30px));
  overflow: hidden;
  border-radius: 7px;
}
.employee-profile-body {
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  background: #fbfaf6;
}
.employee-profile-hero {
  display: grid;
  justify-items: center;
  padding: 28px 24px 22px;
  text-align: center;
  background: linear-gradient(180deg, #ecebdd 0%, #fbfaf6 100%);
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
}
.employee-profile-photo {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #74794f;
  background: #d8d9cc;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(52, 55, 35, 0.14);
}
.employee-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.employee-profile-photo > div { display: grid; place-items: center; }
.employee-profile-photo svg { width: 48px; height: 48px; }
.employee-profile-hero h2 {
  margin: 14px 0 5px;
  color: #30351f;
  font-size: 1.22rem;
  line-height: 1.35;
}
.employee-profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.employee-profile-badges > span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: #555842;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.13);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.employee-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 22px 24px;
  overflow: hidden;
  background: rgba(52, 55, 35, 0.12);
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: 5px;
}
.employee-profile-facts > div { min-width: 0; padding: 14px 16px; background: #ffffff; }
.employee-profile-facts span { display: block; margin-bottom: 4px; color: #77786b; font-size: 0.66rem; font-weight: 700; }
.employee-profile-facts strong { display: block; overflow-wrap: anywhere; color: #343723; font-size: 0.84rem; }
.employee-profile-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #f3f0e7;
  border-top: 1px solid rgba(52, 55, 35, 0.12);
}
.employee-profile-footer .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.employee-profile-footer .employee-profile-delete { margin-right: auto; color: #8d2a27; border-color: rgba(141, 42, 39, 0.24); }

@container (max-width: 920px) {
  .employee-overview-band { grid-template-columns: 1fr; gap: 12px; }
  .employee-directory-toolbar { grid-template-columns: 1fr auto; align-items: end; }
  .employee-search-control { grid-column: 1 / -1; }
}

@container (max-width: 700px) {
  .employee-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-overview-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .employee-overview-metrics > div:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .employee-directory-toolbar { grid-template-columns: 1fr auto; }
  .employee-filter-controls { overflow-x: auto; padding-bottom: 2px; }
  .employee-filter-controls select { min-width: 112px; }
  .employee-photo-card .employee-card-command,
  .employee-photo-card-actions .employee-icon-btn { height: 38px; }
  .employee-directory-table thead { display: none; }
  .employee-directory-table,
  .employee-directory-table tbody,
  .employee-directory-table tr,
  .employee-directory-table td { display: block; width: 100%; }
  .employee-directory-table tbody { padding: 10px; }
  .employee-directory-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.8fr) auto;
    gap: 8px 12px;
    margin-bottom: 9px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid rgba(52, 55, 35, 0.14);
    border-left: 3px solid #74794f;
    border-radius: 5px;
  }
  .employee-directory-table td { height: auto; padding: 0; border: 0; }
  .employee-directory-table td:nth-child(1) { grid-column: 1 / 3; }
  .employee-directory-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .employee-directory-table td:nth-child(3) { display: none; }
  .employee-directory-table td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .employee-directory-table td:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
  .employee-directory-table td:nth-child(6) { grid-column: 3; grid-row: 1 / 4; align-self: center; }
  .employee-row-actions { flex-direction: column; }
}

@media (max-width: 760px) {
  .employee-form-modal { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .employee-form-body { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .employee-form-photo-panel { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 4px 14px; text-align: left; }
  .employee-form-photo-panel > span:first-child { grid-column: 1 / -1; }
  .employee-photo-uploader { width: 88px; height: 88px; grid-row: 2 / span 2; margin-top: 6px; }
  .employee-form-photo-panel > strong { margin-top: 0; }
  .employee-form-photo-panel > small { margin-top: 0; }
  .employee-identity-grid,
  .employee-work-grid { grid-template-columns: 1fr 1fr; }
  .employee-work-grid .form-group:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .employee-identity-grid,
  .employee-work-grid { grid-template-columns: 1fr; }
  .employee-work-grid .form-group:last-child { grid-column: auto; }
  .employee-form-footer { display: grid; grid-template-columns: 1fr 1.25fr; }
  .employee-profile-facts { grid-template-columns: 1fr; margin: 16px; }
  .employee-profile-footer { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .employee-profile-footer .employee-profile-delete { grid-column: 1 / -1; grid-row: 2; margin-right: 0; }
}

/* Daily Work: touch-first reporting for iPad and phone */
.daily-work-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  container-type: inline-size;
}

.daily-work-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  background: #e5e1d2;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: 6px;
}

.daily-work-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  color: #50533c;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font: 800 0.78rem var(--font-family);
  cursor: pointer;
}

.daily-work-tab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-work-tab.active {
  color: #ffffff;
  background: #74794f;
  box-shadow: 0 3px 8px rgba(52, 55, 35, 0.14);
}

.daily-work-shell:has(.daily-manager-shell),
.daily-work-shell:has(.daily-attendance-shell) { max-width: 1320px; }
.daily-work-tabs:has(.daily-work-tab:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, auto)); }
.daily-work-tabs:has(.daily-work-tab:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, auto)); }

.daily-manager-shell { width: 100%; color: #303426; }
.daily-review-queue { margin-bottom: 16px; overflow: hidden; background: #fff; border: 1px solid #d7d3c7; border-radius: 8px; }
.daily-review-queue > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 14px 18px; color: #fff; background: #30381f; }
.daily-review-queue > header span,
.daily-review-queue > header h2,
.daily-review-queue > header p { display: block; margin: 0; }
.daily-review-queue > header span { color: #d9b2aa; font-size: .65rem; font-weight: 900; }
.daily-review-queue > header h2 { margin-top: 2px; font-size: 1.02rem; }
.daily-review-queue > header p { margin-top: 3px; color: rgba(255, 255, 255, .68); font-size: .68rem; }
.daily-review-queue > header > strong { flex: 0 0 auto; padding: 7px 11px; color: #8d2a27; background: #f8f4e9; border-radius: 999px; font-size: .75rem; }
.daily-review-list { display: grid; }
.daily-review-card { display: grid; grid-template-columns: 108px minmax(220px, 1fr) minmax(370px, 1.1fr); gap: 14px; align-items: center; min-width: 0; padding: 14px 16px; border-top: 1px solid #e5e1d6; }
.daily-review-evidence { display: grid; place-items: center; width: 108px; aspect-ratio: 4 / 3; overflow: hidden; color: #8c8d7d; background: #f1efe7; border: 1px solid #dedacf; border-radius: 6px; font-size: .67rem; }
.daily-review-evidence img { width: 100%; height: 100%; object-fit: cover; }
.daily-review-context { min-width: 0; }
.daily-review-context > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.daily-review-context > div span { color: #777968; font-size: .68rem; }
.daily-review-context > div strong { font-size: .78rem; }
.daily-review-context h4,
.daily-review-context p,
.daily-review-context small { display: block; margin: 0; overflow-wrap: anywhere; }
.daily-review-context h4 { margin-top: 7px; font-size: .86rem; }
.daily-review-context p { margin-top: 4px; color: #596044; font-size: .76rem; font-weight: 800; }
.daily-review-context small { margin-top: 5px; color: #777968; font-size: .68rem; line-height: 1.45; }
.daily-review-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; min-width: 0; padding-left: 14px; border-left: 1px solid #e2ded2; }
.daily-review-result > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; grid-column: 1 / -1; }
.daily-review-result > header span { color: #777968; font-size: .65rem; font-weight: 800; }
.daily-review-result > header strong { color: #8d2a27; font-size: .84rem; }
.daily-review-quantity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.daily-review-quantity-grid label,
.daily-review-note { min-width: 0; }
.daily-review-quantity-grid span,
.daily-review-note span { display: block; margin-bottom: 4px; color: #696b5b; font-size: .63rem; font-weight: 800; }
.daily-review-quantity-grid input,
.daily-review-note input { width: 100%; min-height: 38px; padding: 7px 9px; color: #303426; background: #faf8f0; border: 1px solid #d3cebe; border-radius: 5px; font: 700 .76rem var(--font-family); }
.daily-review-outcome { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.daily-review-outcome label { position: relative; min-width: 0; cursor: pointer; }
.daily-review-outcome input { position: absolute; opacity: 0; pointer-events: none; }
.daily-review-outcome span { display: grid; place-items: center; min-height: 38px; padding: 7px; color: #666957; background: #faf8f0; border: 1px solid #d3cebe; border-radius: 5px; font-size: .7rem; font-weight: 800; }
.daily-review-outcome input:checked + span { color: #fff; background: #5c6540; border-color: #5c6540; }
.daily-review-note { grid-column: 1 / 2; }
.daily-review-result > button { align-self: end; min-height: 38px; padding: 7px 12px; color: #fff; background: #8d2a27; border: 1px solid #8d2a27; border-radius: 5px; font: 800 .72rem var(--font-family); cursor: pointer; }
.daily-review-empty { padding: 28px 18px; color: #777968; text-align: center; font-size: .78rem; }
.daily-manager-toolbar {
  display: grid;
  grid-template-columns: 180px 220px minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d7d3c7;
  border-radius: 6px;
}
.daily-manager-toolbar label { min-width: 0; }
.daily-manager-toolbar label > span { display: block; margin-bottom: 5px; color: #6f715f; font-size: .7rem; font-weight: 800; }
.daily-manager-toolbar input,
.daily-manager-toolbar select {
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  color: #343723;
  background: #faf8f0;
  border: 1px solid #d1cdbc;
  border-radius: 5px;
  font: 700 .82rem var(--font-family);
}
.daily-manager-toolbar-summary { align-self: center; min-width: 0; padding-left: 12px; border-left: 3px solid #8d2a27; }
.daily-manager-toolbar-summary span,
.daily-manager-toolbar-summary strong { display: block; }
.daily-manager-toolbar-summary span { color: #666957; font-size: .72rem; }
.daily-manager-toolbar-summary strong { margin-top: 3px; font-size: .9rem; }
.daily-manager-toolbar button,
.daily-manager-note > button {
  min-height: 42px;
  padding: 8px 14px;
  color: #7d2826;
  background: rgba(125, 40, 38, .05);
  border: 1px solid rgba(125, 40, 38, .4);
  border-radius: 5px;
  font: 800 .78rem var(--font-family);
  cursor: pointer;
}
.daily-manager-toolbar button:disabled,
.daily-manager-note > button:disabled { opacity: .45; cursor: not-allowed; }
.daily-manager-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 260px; gap: 14px; align-items: stretch; }
.daily-manager-people,
.daily-manager-profile,
.daily-manager-note { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #d7d3c7; border-radius: 6px; }
.daily-manager-people > header { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 12px 14px; border-bottom: 1px solid #e4e0d5; }
.daily-manager-people > header strong { font-size: .94rem; }
.daily-manager-people > header span { color: #818273; font-size: .68rem; }
.daily-manager-search { padding: 10px 12px; }
.daily-manager-search input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #d7d3c7; border-radius: 5px; font: 500 .78rem var(--font-family); }
.daily-manager-person {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 13px;
  color: #303426;
  background: #fff;
  border: 0;
  border-top: 1px solid #ebe8df;
  text-align: left;
  font-family: var(--font-family);
  cursor: pointer;
}
.daily-manager-person.active { padding-left: 9px; background: #eef0e6; border-left: 4px solid #8d2a27; }
.daily-manager-person > span:nth-child(2) { min-width: 0; }
.daily-manager-person strong,
.daily-manager-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-manager-person strong { font-size: .78rem; }
.daily-manager-person small { margin-top: 3px; color: #818273; font-size: .64rem; }
.daily-manager-person > b { text-align: right; font-size: 1rem; }
.daily-manager-person > b small { margin-top: 2px; font-size: .58rem; font-weight: 600; }
.daily-manager-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; background: #d8d0bb; border-radius: 50%; font-size: .68rem; font-weight: 900; }
.daily-manager-avatar.large { width: 50px; height: 50px; font-size: .82rem; }
.daily-manager-profile { padding: 16px; }
.daily-manager-profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e2ded2; }
.daily-manager-profile-head > div { min-width: 0; }
.daily-manager-profile-head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; }
.daily-manager-profile-head p { margin: 4px 0 0; color: #777866; font-size: .68rem; }
.daily-manager-complete { margin-left: auto; padding: 5px 8px; color: #58613b; background: #edf0e5; border-radius: 4px; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.daily-manager-metrics { display: grid; grid-template-columns: repeat(5, 1fr); margin: 14px 0; border: 1px solid #ddd9cc; }
.daily-manager-metrics > div { min-width: 0; padding: 11px; border-right: 1px solid #ddd9cc; }
.daily-manager-metrics > div:last-child { border-right: 0; }
.daily-manager-metrics b,
.daily-manager-metrics span { display: block; }
.daily-manager-metrics b { font-size: 1.25rem; }
.daily-manager-metrics span { margin-top: 2px; color: #777866; font-size: .62rem; }
.daily-manager-section { margin-top: 16px; }
.daily-manager-section > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #e2ded2; }
.daily-manager-section h3 { margin: 0; font-size: .9rem; }
.daily-manager-section > header span { color: #7e7f70; font-size: .62rem; text-align: right; }
.daily-manager-contribution { padding: 10px 0; border-bottom: 1px solid #ece9df; }
.daily-manager-contribution > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
.daily-manager-contribution strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.daily-manager-contribution span { grid-column: 1; color: #777866; font-size: .62rem; }
.daily-manager-contribution b { grid-column: 2; grid-row: 1 / span 2; font-size: .68rem; }
.daily-manager-contribution > i { display: block; height: 6px; margin-top: 7px; overflow: hidden; background: #e8e5db; border-radius: 4px; }
.daily-manager-contribution > i span { display: block; height: 100%; background: #74794f; }
.daily-manager-event { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ece9df; }
.daily-manager-event time { font-size: .66rem; font-weight: 800; }
.daily-manager-event strong,
.daily-manager-event small { display: block; }
.daily-manager-event strong { font-size: .72rem; }
.daily-manager-event small { margin-top: 2px; color: #777866; font-size: .6rem; }
.daily-manager-event p { margin: 5px 0 0; color: #555846; font-size: .68rem; line-height: 1.45; }
.daily-manager-event em { align-self: start; padding: 4px 6px; color: #58613b; background: #edf0e5; border-radius: 3px; font-size: .58rem; font-style: normal; white-space: nowrap; }
.daily-manager-note { padding: 14px; }
.daily-manager-note h3 { margin: 0; font-size: .92rem; }
.daily-manager-note > p { margin: 7px 0 12px; color: #747668; font-size: .66rem; line-height: 1.45; }
.daily-manager-note textarea { width: 100%; height: 140px; resize: vertical; padding: 10px; color: #343723; background: #faf8f0; border: 1px solid #d9d5c8; border-radius: 5px; font: 500 .72rem/1.5 var(--font-family); }
.daily-manager-audit { min-height: 45px; margin-top: 8px; color: #77786b; font-size: .62rem; line-height: 1.45; }
.daily-manager-principle { margin: 12px 0; padding: 9px; color: #555846; background: #fffaf4; border-left: 3px solid #8d2a27; font-size: .64rem; line-height: 1.45; }
.daily-manager-note > button { width: 100%; color: #fff; background: #8d2a27; border-color: #8d2a27; }
.daily-manager-empty { padding: 30px 14px; color: #929285; text-align: center; font-size: .72rem; }
.daily-manager-empty.compact { padding: 18px 10px; }
.daily-manager-empty.full { display: grid; min-height: 420px; place-items: center; }
.daily-manager-attendance-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border: 1px solid #ddd9cc; }
.daily-manager-attendance-stats > div { min-width: 0; padding: 9px 10px; border-right: 1px solid #ddd9cc; }
.daily-manager-attendance-stats > div:last-child { border-right: 0; }
.daily-manager-attendance-stats b,
.daily-manager-attendance-stats span { display: block; }
.daily-manager-attendance-stats b { font-size: 1rem; }
.daily-manager-attendance-stats span { margin-top: 2px; color: #777866; font-size: .58rem; }
.daily-manager-attendance-events { border: 1px solid #e4e0d5; border-top: 0; }
.daily-manager-attendance-events > div { display: grid; grid-template-columns: 82px 110px minmax(0, 1fr); gap: 8px; padding: 7px 9px; border-bottom: 1px solid #ece9df; font-size: .64rem; }
.daily-manager-attendance-events > div:last-child { border-bottom: 0; }
.daily-manager-attendance-events time { font-weight: 800; }
.daily-manager-attendance-events span { color: #777866; }

.daily-attendance-shell { width: 100%; color: #303426; }
.daily-attendance-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 180px 220px;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: #fff;
  border: 1px solid #d7d3c7;
  border-radius: 6px;
}
.daily-attendance-title { min-width: 0; padding-left: 12px; border-left: 4px solid #8d2a27; }
.daily-attendance-title > span { color: #8d2a27; font-size: .62rem; font-weight: 900; }
.daily-attendance-title h3 { margin: 2px 0 0; font-size: 1.08rem; }
.daily-attendance-title p { margin: 4px 0 0; color: #747668; font-size: .66rem; line-height: 1.35; }
.daily-attendance-toolbar label > span,
.daily-leave-entry label > span,
.daily-leave-value > span,
.daily-leave-department > span { display: block; margin-bottom: 5px; color: #6f715f; font-size: .65rem; font-weight: 800; }
.daily-attendance-toolbar input,
.daily-attendance-toolbar select,
.daily-leave-entry input,
.daily-leave-entry select {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  color: #343723;
  background: #faf8f0;
  border: 1px solid #d1cdbc;
  border-radius: 5px;
  font: 700 .76rem var(--font-family);
}
.daily-attendance-summary { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); margin-top: 12px; background: #fff; border: 1px solid #d7d3c7; border-radius: 6px; }
.daily-attendance-summary > div { min-width: 0; padding: 11px 12px; border-right: 1px solid #e4e0d5; }
.daily-attendance-summary > div:last-child { border-right: 0; }
.daily-attendance-summary b,
.daily-attendance-summary span { display: block; }
.daily-attendance-summary b { font-size: 1.18rem; }
.daily-attendance-summary span { margin-top: 3px; color: #777866; font-size: .62rem; }
.daily-attendance-summary .all-leave { border-top: 3px solid #58613b; }
.daily-attendance-summary .half-leave { border-top: 3px solid #a99d67; }
.daily-attendance-summary .full-leave { border-top: 3px solid #9e705c; }
.daily-leave-entry {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) repeat(3, 130px) 120px;
  gap: 12px;
  align-items: end;
  margin: 12px 0;
  padding: 14px;
  background: #f8f6ee;
  border: 1px solid #d3cfbf;
  border-left: 4px solid #58613b;
  border-radius: 6px;
}
.daily-leave-entry-title span,
.daily-leave-entry-title strong { display: block; }
.daily-leave-entry-title span { color: #8d2a27; font-size: .62rem; font-weight: 900; }
.daily-leave-entry-title strong { margin-top: 4px; font-size: .78rem; }
.daily-leave-entry .daily-attendance-note-field { grid-column: 2 / 6; }
.daily-leave-department { min-height: 40px; padding: 7px 10px; background: #fff; border: 1px solid #d1cdbc; border-radius: 5px; }
.daily-leave-department span { margin-bottom: 2px; }
.daily-leave-department b { display: block; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.daily-leave-entry > button,
.daily-line-draft-footer button { min-height: 40px; padding: 8px 14px; border-radius: 5px; font: 800 .72rem var(--font-family); cursor: pointer; }
.daily-leave-entry > button.primary { color: #fff; background: #58613b; border: 1px solid #58613b; }
.daily-leave-entry > button.primary { grid-column: 6; grid-row: 1; }
.daily-attendance-list { overflow: hidden; background: #fff; border: 1px solid #d7d3c7; border-radius: 6px; }
.daily-attendance-list-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #f3f1e8; border-bottom: 1px solid #ddd9cc; }
.daily-attendance-list-head strong { font-size: .86rem; }
.daily-attendance-list-head span { color: #777866; font-size: .68rem; }
.daily-attendance-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) 110px 120px minmax(210px, 1fr) 140px 104px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
  border-bottom: 1px solid #ebe8df;
  border-left: 4px solid #a99d67;
}
.daily-attendance-row:last-child { border-bottom: 0; }
.daily-attendance-row[data-status="leave_am"],
.daily-attendance-row[data-status="leave_pm"] { border-left-color: #a99d67; }
.daily-attendance-row[data-status="leave_full"] { border-left-color: #9e705c; }
.daily-attendance-person { display: flex; min-width: 0; align-items: center; gap: 10px; }
.daily-attendance-person > div { min-width: 0; }
.daily-attendance-person strong,
.daily-attendance-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-attendance-person strong { font-size: .76rem; }
.daily-attendance-person small { margin-top: 3px; color: #808172; font-size: .61rem; }
.daily-leave-value { min-width: 0; }
.daily-leave-value b { display: block; overflow: hidden; font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.daily-attendance-audit { color: #858679; font-size: .58rem; line-height: 1.4; }
.daily-leave-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.daily-leave-row-actions button { min-height: 34px; padding: 6px 9px; color: #4f5638; background: #fff; border: 1px solid #c7c3b5; border-radius: 4px; font: 800 .64rem var(--font-family); cursor: pointer; }
.daily-leave-row-actions button.danger { color: #8d2a27; background: #fff5f4; border-color: #dfbbb8; }
.daily-line-draft-card { margin-top: 14px; overflow: hidden; background: #fff; border: 1px solid #d7d3c7; border-radius: 6px; }
.daily-line-draft-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 15px; border-bottom: 1px solid #e3dfd4; }
.daily-line-draft-head span { color: #6b7050; font-size: .6rem; font-weight: 900; }
.daily-line-draft-head h3 { margin: 2px 0 0; font-size: .9rem; }
.daily-line-draft-head b { padding: 5px 8px; color: #8d2a27; background: #faf0ef; border: 1px solid #e5c2bf; border-radius: 4px; font-size: .62rem; }
.daily-line-draft-card pre { margin: 0; padding: 14px 16px; color: #343723; background: #faf9f5; white-space: pre-wrap; font: 500 .72rem/1.55 var(--font-family); }
.daily-line-draft-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid #e3dfd4; }
.daily-line-draft-footer span { color: #777866; font-size: .62rem; }
.daily-line-draft-footer button { min-height: 38px; padding: 7px 13px; color: #fff; background: #4f5f3d; border: 1px solid #435234; border-radius: 4px; font-weight: 800; cursor: pointer; }
.daily-calendar-attendance { display: flex; justify-content: space-between; gap: 4px; width: 100%; margin-bottom: 2px; padding: 2px 4px; overflow: hidden; color: #704944; background: #f7ebe8; border: 1px solid #e4c6c1; border-radius: 4px; font-size: .62rem; }
.daily-calendar-attendance span,
.daily-calendar-attendance b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-calendar-attendance.field { color: #4e6672; background: #edf2f4; border-color: #c5d2d8; }
.daily-calendar-attendance.half-leave { color: #756a3b; background: #f8f4e5; border-color: #e1d7ad; }

@media (max-width: 1180px) {
  .daily-manager-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .daily-manager-note { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 10px 16px; align-items: start; }
  .daily-manager-note h3,
  .daily-manager-note > p { grid-column: 1 / -1; }
  .daily-manager-note textarea { grid-row: 3 / span 3; height: 118px; }
  .daily-manager-audit,
  .daily-manager-principle,
  .daily-manager-note > button { grid-column: 2; }
  .daily-manager-principle { margin: 0; }
  .daily-attendance-toolbar { grid-template-columns: minmax(280px, 1fr) repeat(2, minmax(160px, .55fr)); }
  .daily-leave-entry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-leave-entry-title { grid-column: 1 / -1; }
  .daily-leave-entry .daily-attendance-note-field { grid-column: span 2; }
  .daily-leave-entry > button.primary { grid-column: auto; grid-row: auto; }
  .daily-attendance-row { grid-template-columns: minmax(220px, 1fr) 110px 120px minmax(180px, 1fr); }
  .daily-attendance-audit { padding-left: 44px; }
  .daily-leave-row-actions { justify-content: flex-start; }
}

@media (max-width: 820px) {
  .daily-review-card { grid-template-columns: 88px minmax(0, 1fr); }
  .daily-review-evidence { width: 88px; }
  .daily-review-result { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid #e2ded2; border-left: 0; }
  .daily-work-tabs:has(.daily-work-tab:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-work-tabs:has(.daily-work-tab:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-manager-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-manager-toolbar-summary { align-self: stretch; display: flex; justify-content: center; flex-direction: column; }
  .daily-manager-layout { grid-template-columns: 1fr; }
  .daily-manager-people { max-height: 330px; overflow-y: auto; }
  .daily-manager-note { grid-column: auto; grid-template-columns: 1fr; }
  .daily-manager-note h3,
  .daily-manager-note > p,
  .daily-manager-note textarea,
  .daily-manager-audit,
  .daily-manager-principle,
  .daily-manager-note > button { grid-column: 1; grid-row: auto; }
  .daily-manager-attendance-stats { grid-template-columns: repeat(3, minmax(92px, 1fr)); overflow-x: auto; }
  .daily-attendance-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-attendance-title { grid-column: 1 / -1; }
  .daily-attendance-summary { grid-template-columns: repeat(4, 1fr); }
  .daily-leave-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-attendance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .daily-attendance-person,
  .daily-attendance-note-field,
  .daily-attendance-audit { grid-column: 1 / -1; }
  .daily-attendance-audit { padding-left: 44px; }
}

@media (max-width: 560px) {
  .daily-review-queue > header { align-items: flex-start; }
  .daily-review-card { grid-template-columns: 1fr; }
  .daily-review-evidence { width: 100%; max-height: 180px; aspect-ratio: 16 / 7; }
  .daily-review-result { grid-column: auto; }
  .daily-review-result > button { min-width: 112px; }
  .daily-work-tab { padding: 8px 5px; }
  .daily-work-tab span { font-size: .62rem; line-height: 1.25; }
  .daily-work-tab svg { display: none; }
  .daily-manager-toolbar { grid-template-columns: 1fr; padding: 12px; }
  .daily-manager-toolbar-summary { min-height: 48px; }
  .daily-manager-toolbar button { width: 100%; }
  .daily-manager-profile { padding: 12px; }
  .daily-manager-profile-head { align-items: flex-start; flex-wrap: wrap; }
  .daily-manager-complete { width: 100%; margin-left: 0; text-align: center; }
  .daily-manager-metrics { grid-template-columns: repeat(2, 1fr); }
  .daily-manager-metrics > div:nth-child(2),
  .daily-manager-metrics > div:nth-child(4) { border-right: 0; }
  .daily-manager-metrics > div:nth-child(-n+4) { border-bottom: 1px solid #ddd9cc; }
  .daily-manager-metrics > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .daily-manager-event { grid-template-columns: 70px minmax(0, 1fr); }
  .daily-manager-event em { grid-column: 2; justify-self: start; }
  .daily-manager-attendance-events > div { grid-template-columns: 74px minmax(0, 1fr); }
  .daily-manager-attendance-events span { grid-column: 2; }
  .daily-attendance-toolbar { grid-template-columns: 1fr; padding: 12px; }
  .daily-attendance-title { grid-column: auto; }
  .daily-attendance-summary { grid-template-columns: repeat(2, 1fr); }
  .daily-attendance-summary > div { border-bottom: 1px solid #e4e0d5; }
  .daily-attendance-summary > div:nth-child(even) { border-right: 0; }
  .daily-leave-entry { grid-template-columns: 1fr; padding: 12px; }
  .daily-leave-entry-title,
  .daily-leave-entry .daily-attendance-note-field { grid-column: auto; }
  .daily-leave-entry > button { width: 100%; }
  .daily-attendance-row { grid-template-columns: 1fr; padding: 12px; }
  .daily-attendance-person,
  .daily-attendance-note-field,
  .daily-attendance-audit { grid-column: auto; }
  .daily-attendance-audit { padding-left: 44px; }
  .daily-line-draft-head,
  .daily-line-draft-footer { align-items: flex-start; flex-direction: column; }
  .daily-line-draft-footer button { width: 100%; }
}

.daily-work-tab-content { width: 100%; min-width: 0; }

.daily-work-form-card {
  width: min(100%, 820px);
  margin: 0 auto;
  overflow: visible;
  background: #fbfaf6;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(52, 55, 35, 0.08);
}

.daily-work-form-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  color: #ffffff;
  background: #30351f;
  border-bottom: 4px solid #8d2a27;
}

.daily-work-form-header span {
  display: block;
  margin-bottom: 2px;
  color: #d58c82;
  font: 800 0.63rem "Outfit", sans-serif;
}

.daily-work-form-header h3 { margin: 0; color: #ffffff; font-size: 1rem; line-height: 1.35; }
.daily-work-form-header p { margin: 0 0 1px; color: rgba(255, 255, 255, 0.67); font-size: 0.7rem; }

.daily-work-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
}

.daily-work-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.daily-work-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.daily-work-stage-field{position:relative;z-index:20}.daily-work-stage-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;pointer-events:none}.daily-work-stage-picker{position:relative}.daily-work-stage-button{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 11px;color:#34404a;background:#fff;border:1px solid #b8bec1;border-radius:6px;font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.daily-work-stage-button:hover:not(:disabled){border-color:#6c8098;box-shadow:0 0 0 3px rgba(108,128,152,.12)}.daily-work-stage-button:disabled{color:#8a8b7e;background:#e8e6dc;cursor:not-allowed}.daily-work-stage-button>span:first-child{min-width:0;flex:1}.daily-work-stage-button strong,.daily-work-stage-button small{display:block}.daily-work-stage-button strong{overflow:hidden;font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.daily-work-stage-button small{margin-top:2px;color:#777d7e;font-size:.61rem}.daily-work-stage-button.status-active{border-color:#6c8098;background:#f1f4f7}.daily-work-stage-button.status-completed{border-color:#abc0ad;background:#f1f6f0}.daily-work-stage-chevron{flex:0 0 auto;color:#526777;font-size:.9rem}.daily-work-stage-tag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:4px 8px;border-radius:999px;font-size:.59rem;font-weight:800;line-height:1.1;white-space:nowrap}.daily-work-stage-tag.completed{color:#396148;background:#e1ece1}.daily-work-stage-tag.active{color:#fff;background:#6c8098}.daily-work-stage-tag.waiting{color:#6e716d;background:#ebe9e2}.daily-work-stage-tag.unused{color:#8d8983;background:transparent}.daily-work-stage-menu{position:absolute;z-index:120;top:calc(100% + 4px);right:0;left:0;max-height:min(430px,60vh);overflow-y:auto;background:#fff;border:1px solid #8fa0ad;border-radius:7px;box-shadow:0 18px 40px rgba(38,49,56,.2)}.daily-work-stage-menu[hidden]{display:none}.daily-work-stage-option{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px;color:#343723;background:#fff;border:0;border-bottom:1px solid #e3dfd5;font:inherit;text-align:left;cursor:pointer}.daily-work-stage-option:last-child{border-bottom:0}.daily-work-stage-option:hover:not(:disabled),.daily-work-stage-option.is-selected{background:#edf2f5}.daily-work-stage-option.completed:hover:not(:disabled){background:#edf4ec}.daily-work-stage-option:disabled{opacity:.58;cursor:not-allowed}.daily-work-stage-number{color:#777d7e;font-size:.66rem;font-weight:800;text-align:center}.daily-work-stage-name{min-width:0}.daily-work-stage-name strong,.daily-work-stage-name small{display:block}.daily-work-stage-name strong{color:#343723;font-size:.72rem;font-weight:800}.daily-work-stage-name small{margin-top:2px;color:#777d7e;font-size:.58rem}.daily-work-stage-option.completed .daily-work-stage-number{color:#396148}.daily-work-stage-option.active .daily-work-stage-number{color:#526777}

.daily-work-form .prod-step-field-group { min-width: 0; }
.daily-work-form .prod-step-field-label { display: block; margin-bottom: 6px; color: #555842; font-size: 0.7rem; font-weight: 800; }
.daily-work-form .prod-step-input,
.daily-work-form .custom-date-picker-display {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 12px;
  color: #343723;
  background: #ffffff !important;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 0.86rem;
}
.daily-work-form .prod-step-input:focus {
  border-color: #74794f;
  box-shadow: 0 0 0 3px rgba(116, 121, 79, 0.12);
  outline: none;
}
.daily-work-form .prod-step-input:disabled {
  color: #8a8b7e !important;
  background: #e8e6dc !important;
  cursor: not-allowed;
}
.daily-work-search-wrap:has(.prod-step-input:disabled) > svg { opacity: 0.45; }

.daily-work-search-wrap { position: relative; width: 100%; }
.daily-work-search-wrap > svg {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: #74794f;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.daily-work-search-wrap > .prod-step-input { padding-left: 40px !important; padding-right: 48px !important; }
#daily-log-employee-suggestions,
.daily-log-artwork-suggestions-list {
  max-height: min(250px, 45vh) !important;
  border-radius: 5px !important;
  box-shadow: 0 14px 30px rgba(52, 55, 35, 0.18) !important;
}

.daily-log-blocks-container { display: flex; flex-direction: column; gap: 12px; }
.daily-log-project-block-item { min-width: 0; }
.daily-log-block-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 16px;
  background: #f1f0e7;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-left: 3px solid #74794f;
  border-radius: 5px;
  box-sizing: border-box;
}
.daily-work-block-title { display: flex; align-items: center; gap: 8px; color: #343723; font-size: 0.78rem; font-weight: 800; }
.daily-work-block-title > span:first-child {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  color: #ffffff;
  background: #74794f;
  border-radius: 50%;
  font: 800 0.65rem "Outfit", sans-serif;
}
.daily-work-remove-project {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #8d2a27;
  background: #fff7f5;
  border: 1px solid rgba(141, 42, 39, 0.22);
  border-radius: 4px;
  cursor: pointer;
}
.daily-work-remove-project svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.daily-log-block-card:has(.daily-work-remove-project) .daily-work-block-title { padding-right: 44px; }
.daily-log-task-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.5fr);
  overflow: hidden;
  background: #fbfaf5;
  border: 1px solid #d6d2c5;
  border-radius: 5px;
}
.daily-log-assignment-context{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid #cfd5c7;border-left:4px solid #4f5f3d;border-radius:5px;background:#f4f7f1;color:#343723}.daily-log-assignment-context[hidden]{display:none}.daily-log-assignment-context>div{min-width:210px}.daily-log-assignment-context small,.daily-log-assignment-context strong{display:block}.daily-log-assignment-context small{margin-bottom:2px;color:#68705d;font-size:.62rem;font-weight:800}.daily-log-assignment-context strong{font-size:.76rem}.daily-log-assignment-context>span{color:#707363;font-size:.65rem;line-height:1.4}.daily-log-assignment-context select{min-width:280px;margin-left:auto;padding:8px 10px;border:1px solid #b9b49f;border-radius:4px;background:#fff;color:#343723;font:700 .72rem var(--font-family)}.daily-log-assignment-context.needs-choice{border-color:#c8a869;border-left-color:#a46f1d;background:#fff8e9}.daily-log-assignment-context.needs-choice small{color:#8a5d18}.daily-log-assignment-context.is-extra{border-color:#d9b9b1;border-left-color:#9b332f;background:#fff7f4}.daily-log-assignment-context.is-extra small{color:#8d2a27}
.daily-log-task-progress[hidden] { display: none; }
.daily-log-task-progress > div { min-width: 0; padding: 10px 12px; border-right: 1px solid #dedacf; }
.daily-log-task-progress > div:last-child { border-right: 0; }
.daily-log-task-progress span { display: block; margin-bottom: 2px; color: #797a6b; font-size: .61rem; font-weight: 700; }
.daily-log-task-progress strong { display: block; overflow: hidden; color: #343723; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.daily-log-task-progress .next { background: #edf1e8; border-left: 3px solid #4f5f3d; }
.daily-log-task-progress .next strong { color: #33412b; }
.daily-log-task-progress .next small { display: block; margin-top: 3px; color: #6f725e; font-size: .58rem; line-height: 1.35; }
.daily-work-assembly-output { padding: 12px 14px; background: #f6f7f1; border: 1px solid #cfd5c7; border-left: 3px solid #4f5f3d; border-radius: 5px; }
.daily-work-assembly-output > div { display: flex; align-items: center; gap: 8px; }
.daily-work-assembly-output input { width: 120px; min-height: 42px; padding: 7px 10px; color: #343723; background: #fff; border: 1px solid #bfc5b7; border-radius: 4px; font: 800 .9rem var(--font-family); text-align: right; }
.daily-work-assembly-output div span { color: #4f5f3d; font-size: .75rem; font-weight: 800; }
.daily-work-assembly-output small { display: block; margin-top: 6px; color: #737565; font-size: .64rem; line-height: 1.45; }

.daily-work-add-row { display: flex; }
.daily-work-add-project {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  color: #686d45;
  background: #ffffff;
  border: 1.5px dashed #858a5c;
  border-radius: 5px;
  font: 800 0.78rem var(--font-family);
  cursor: pointer;
}
.daily-work-add-project svg { width: 17px; height: 17px; }

.daily-work-details {
  min-height: 106px !important;
  padding: 12px !important;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}
.daily-work-photo-panel { display: flex; flex-direction: column; gap: 9px; }
.daily-work-photo-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.daily-log-thumbs-container { display: flex; flex-wrap: wrap; gap: 8px; }
.daily-log-upload-card,
.daily-log-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  overflow: hidden;
  border-radius: 5px;
  box-sizing: border-box;
}
.daily-log-upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #555842;
  background: #efeee4;
  border: 1.5px dashed #858a6a;
  cursor: pointer;
}
.daily-log-upload-card svg { width: 25px; height: 25px; }
.daily-log-upload-card span { font-size: 0.66rem; font-weight: 800; }
.daily-log-thumb { display: flex; align-items: center; justify-content: center; background: #efeee4; border: 1px solid rgba(52, 55, 35, 0.15); }
.daily-log-thumb-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(125, 40, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
}
.daily-work-photo-count { color: #77786b; font-size: 0.68rem; }
.daily-work-submit {
  width: 100%;
  min-height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  color: #ffffff !important;
  background: #74794f !important;
  border-color: #74794f !important;
  font-size: 0.88rem;
  font-weight: 800;
}

.daily-work-parts-selection { padding: 10px 12px; background: #ffffff; border: 1px solid rgba(52, 55, 35, 0.15); border-radius: 5px; box-sizing: border-box; }
.daily-work-part-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border-bottom: 1px dashed rgba(52, 55, 35, 0.1); }
.daily-work-part-quantity { align-items: center; justify-content: flex-end; gap: 6px; }
.daily-work-part-row input[type="checkbox"] { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
.daily-work-part-quantity input[type="number"] { width: 66px !important; height: 38px !important; }

.daily-calendar-controls,
.daily-calendar-panel {
  padding: 16px;
  background: #fbfaf6;
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 7px;
  box-sizing: border-box;
}
.daily-calendar-controls { margin-bottom: 14px; }
.daily-calendar-control-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.daily-calendar-month-nav { display: flex; align-items: center; gap: 8px; }
.daily-calendar-nav-btn { min-height: 40px !important; }
.daily-calendar-month-label { min-width: 145px; color: #343723; text-align: center; font-size: 1rem; font-weight: 800; }
.daily-calendar-filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.daily-calendar-filter-row > div { display: flex !important; align-items: center !important; gap: 6px !important; }
.daily-calendar-filter-row select { min-height: 40px !important; }
.daily-calendar-weekdays,
.daily-calendar-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important; }
.daily-calendar-weekdays { padding: 6px; background: rgba(52, 55, 35, 0.05); border-radius: 5px; }
.daily-calendar-weekdays > div { padding: 8px 0; color: #343723; background: #f1f0e8; border-radius: 3px; text-align: center; font-size: 0.72rem; font-weight: 800; }
.daily-calendar-grid { margin-top: 6px !important; }
.daily-calendar-day { min-width: 0; }
.daily-calendar-entry { min-height: 25px; }
.daily-calendar-mobile-empty { display: none; padding: 34px 12px; color: #77786b; text-align: center; font-size: 0.78rem; }
.daily-calendar-mobile-empty.is-hidden { display: none !important; }

@container (max-width: 760px) {
  .daily-work-form-card { width: 100%; }
  .daily-work-form-header { padding: 16px 18px; }
  .daily-work-form { padding: 18px; }
  .daily-work-form-header p { display: none; }
  .daily-work-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-work-employee-field { grid-column: 1 / -1; }
  .daily-calendar-control-row { align-items: stretch; flex-direction: column; }
  .daily-calendar-month-nav { justify-content: space-between; }
  .daily-calendar-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-calendar-filter-row > div { min-width: 0; align-items: stretch !important; flex-direction: column; }
  .daily-calendar-filter-row select { width: 100% !important; }
}

@media (max-width: 620px) {
  .daily-work-shell { width: 100%; }
  .daily-work-tabs { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; box-sizing: border-box; }
  .daily-work-tab { min-width: 0; min-height: 48px; padding: 8px 7px; font-size: 0.7rem; }
  .daily-work-tab svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .daily-work-form-card { border-radius: 5px; }
  .daily-work-form-header { padding: 15px 16px; }
  .daily-work-form-header h3 { font-size: 0.92rem; }
  .daily-work-form { gap: 16px; padding: 14px; }
  .daily-work-meta-grid,
  .daily-work-project-grid { grid-template-columns: 1fr; gap: 12px; }
  .daily-work-employee-field { grid-column: auto; }
  .daily-work-form .prod-step-input,
  .daily-work-form .custom-date-picker-display { min-height: 48px; font-size: 16px; }
  .daily-log-block-card { padding: 14px 12px; }
  .daily-log-task-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-log-task-progress .next { grid-column: 1 / -1; }
  .daily-work-add-project { width: 100%; min-height: 48px; }
  .daily-log-upload-card,
  .daily-log-thumb { width: calc((100vw - 86px) / 3); height: calc((100vw - 86px) / 3); max-width: 112px; max-height: 112px; flex-basis: calc((100vw - 86px) / 3); }
  .daily-work-submit { position: sticky; z-index: 20; bottom: 8px; min-height: 52px; box-shadow: 0 8px 20px rgba(52, 55, 35, 0.24); }
  .daily-work-part-row { grid-template-columns: 1fr; gap: 8px; }
  .daily-work-part-quantity { justify-content: flex-start; padding-left: 30px; }

  .daily-calendar-controls,
  .daily-calendar-panel { padding: 12px; border-radius: 5px; }
  .daily-calendar-month-nav { display: grid; grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr); gap: 5px; }
  .daily-calendar-nav-btn { min-width: 0; padding: 5px 7px !important; font-size: 0.68rem !important; }
  .daily-calendar-month-label { min-width: 0; font-size: 0.86rem; }
  .daily-calendar-filter-row { grid-template-columns: 1fr; gap: 10px; }
  .daily-calendar-weekdays { display: none !important; }
  .daily-calendar-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 0 !important; }
  .daily-calendar-day.is-outside,
  .daily-calendar-day:not(.has-logs):not(.is-today) { display: none !important; }
  .daily-calendar-day.has-logs,
  .daily-calendar-day.is-today {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px !important;
    padding: 11px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid rgba(52, 55, 35, 0.14) !important;
    border-left: 3px solid #74794f !important;
    border-radius: 5px !important;
  }
  .daily-calendar-day.is-today { border-left-color: #8d2a27 !important; }
  .daily-calendar-day > div:first-child { align-items: flex-start !important; flex-direction: column; justify-content: flex-start !important; gap: 4px; }
  .daily-calendar-day .calendar-cell-logs { max-height: none !important; overflow: visible !important; gap: 5px; }
  .daily-calendar-entry { min-height: 40px; padding: 7px 9px !important; margin: 0 !important; font-size: 0.75rem !important; }
  .daily-calendar-mobile-empty:not(.is-hidden) { display: block; }
}

.role-sales .artisan-hide {
  display: none !important;
}

.role-sales .planning-intake-create {
  display: none !important;
}

.l2-locked-field label::after {
  content: " · ล็อกข้อมูลหลัก";
  color: #8f2d2a;
  font-size: 0.72rem;
  font-weight: 700;
}

.l2-locked-field .form-input,
.l2-locked-order-qty .item-qty {
  background: #efede5 !important;
  border-color: #c8c2b1 !important;
  color: #6f6b60 !important;
  cursor: not-allowed !important;
}

/* Style for disabled form inputs/selects/textareas */
.form-input[disabled], .form-select[disabled], .form-textarea[disabled] {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-text-muted-light) !important;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Responsible person photo preview sizes (PC vs iPad) */
.resp-photo-preview-box {
  width: 60px;
  height: 85px;
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(52, 55, 35, 0.03);
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .resp-photo-preview-box {
    width: 42px;
    height: 60px;
  }
}

/* All Orders View Enhancements */
.badge-imported {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #7d2826;
  background-color: rgba(220, 53, 69, 0.08);
  border: 1.5px solid rgba(125, 40, 38, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.badge-imported:hover {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(125, 40, 38, 0.3);
}

.artisan-table-badge {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.artisan-table-badge:hover {
  transform: translateX(2px);
}

.artisan-avatar-circle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.artisan-table-badge:hover .artisan-avatar-circle {
  border-color: var(--color-leaf) !important;
  box-shadow: 0 2px 4px rgba(52, 55, 35, 0.2);
}

/* Premium Orders Table Enhancements */
.custom-table tbody tr.order-main-row {
  transition: background-color 0.2s ease;
}

.custom-table tbody tr.order-second-row {
  transition: background-color 0.2s ease;
}

/* Connect hover effect of double rows */
.custom-table tbody tr.order-main-row:hover,
.custom-table tbody tr.order-main-row:hover + tr.order-second-row {
  background-color: rgba(52, 55, 35, 0.04) !important;
}

.custom-table tbody tr.order-second-row:hover {
  background-color: rgba(52, 55, 35, 0.04) !important;
}

/* Sleeker Status Badges */
.badge-status {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  letter-spacing: 0.2px;
  font-weight: 700 !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.badge-status.waiting {
  background: linear-gradient(135deg, rgba(239, 233, 215, 0.3), rgba(239, 233, 215, 0.5));
}

.badge-status.progress {
  background: linear-gradient(135deg, rgba(139, 164, 158, 0.25), rgba(139, 164, 158, 0.45));
}

.badge-status.shipped {
  background: linear-gradient(135deg, rgba(137, 136, 97, 0.25), rgba(137, 136, 97, 0.45));
}

.badge-status.overdue {
  background: linear-gradient(135deg, rgba(125, 40, 38, 0.12), rgba(125, 40, 38, 0.22));
  animation: pulse-overdue 2s infinite ease-in-out;
  will-change: opacity;
}

@keyframes pulse-overdue {
  0% { opacity: 1; }
  50% { opacity: 0.85; }
  100% { opacity: 1; }
}

/* Glowing linear progress bar */
.progress-track {
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-fill {
  background: linear-gradient(90deg, #ddb2b1, #c89594);
  box-shadow: 0 0 4px rgba(221, 178, 177, 0.4);
}

/* Horizontal jump-tag navbar for project form sections */
.form-section-navbar {
  position: sticky;
  top: 120px; /* Right under .content-header which is 120px tall */
  background-color: rgba(250, 248, 242, 1);
  display: flex;
  flex-wrap: wrap; /* Wrap tags instead of horizontal scrollbar */
  gap: 8px;
  padding: 12px;
  z-index: 9;
  border: 1px solid rgba(137, 136, 97, 0.2);
  border-radius: 8px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
}

.form-section-navbar::-webkit-scrollbar {
  display: none;
}

.form-section-nav-btn {
  padding: 6px 12px;
  background-color: #FAF8F2;
  color: var(--color-juniper);
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
  font-family: var(--font-family);
}

.form-section-nav-btn:hover {
  background-color: rgba(52, 55, 35, 0.05);
  border-color: var(--color-juniper);
}

.form-section-nav-btn.active {
  background-color: var(--color-leaf);
  color: #ffffff;
  border-color: var(--color-leaf);
  box-shadow: var(--shadow-sm);
}

/* Premium form tab buttons for sidebar */
.form-tab-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 16px auto;
  box-sizing: border-box;
}

.form-tab-btn {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(137, 136, 97, 0.25);
  background-color: #FAF8F2;
  color: var(--color-juniper);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.form-tab-btn svg {
  width: 18px;
  height: 18px;
  color: var(--color-juniper-light);
  transition: all 0.2s ease-in-out;
}

.form-tab-btn:hover {
  background-color: rgba(137, 136, 97, 0.08);
  border-color: var(--color-juniper);
  transform: translateY(-1px);
}

.form-tab-btn.active {
  box-shadow: 0 4px 12px rgba(52, 55, 35, 0.15);
}

.form-tab-btn.active svg {
  transform: scale(1.1);
}

/* Responsive Grid for All Documents tab */
.form-documents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .form-documents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .form-documents-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Unified form navigation: one visual language with a clear active state. */
.form-tab-buttons-container {
  gap: 0 !important;
  padding: 5px;
  background: var(--color-palette-pearl, #F7F2E0);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(var(--color-juniper-rgb), 0.07);
}

.form-tab-buttons-container .form-tab-btn {
  min-height: 42px;
  padding: 9px 11px;
  color: var(--color-juniper) !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 5px;
  box-shadow: none !important;
  transform: none !important;
}

.form-tab-buttons-container .form-tab-btn + .form-tab-btn {
  border-top: 1px solid rgba(var(--color-juniper-rgb), 0.09) !important;
}

.form-tab-buttons-container .form-tab-btn svg {
  color: var(--color-leaf-dark) !important;
  transform: none !important;
}

.form-tab-buttons-container .form-tab-btn:hover {
  background: rgba(var(--color-leaf-rgb), 0.1) !important;
}

.form-tab-buttons-container .form-tab-btn.active {
  color: #ffffff !important;
  background: var(--color-juniper) !important;
  border-left-color: var(--color-coral) !important;
}

.form-tab-buttons-container .form-tab-btn.active svg {
  color: var(--color-candle) !important;
}

/* Light financial summary keeps attention on the workflow while staying scannable. */
#form-cost-summary-card {
  padding: 14px !important;
  gap: 7px !important;
  color: var(--color-juniper) !important;
  background: var(--color-palette-pearl, #F7F2E0) !important;
  background-image: none !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18) !important;
  box-shadow: 0 3px 10px rgba(var(--color-juniper-rgb), 0.08) !important;
}

#form-cost-summary-card .form-nav-title {
  color: var(--color-juniper) !important;
  border-bottom-color: rgba(var(--color-juniper-rgb), 0.16) !important;
}

#form-cost-summary-card > div {
  color: var(--color-juniper) !important;
  border-color: rgba(var(--color-juniper-rgb), 0.12) !important;
}

#form-cost-summary-card [id^="summary-"] {
  color: var(--color-juniper) !important;
}

#form-cost-summary-card [id$="-cost"] {
  color: var(--color-leaf-dark) !important;
}

#form-cost-summary-card #summary-grand-total,
#form-cost-summary-card #summary-profit-total {
  color: var(--color-leaf-dark) !important;
}

.artwork-form-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--color-juniper-rgb), 0.14);
}

.artwork-form-save-btn,
.artwork-form-cancel-btn {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.artwork-form-save-btn {
  color: #ffffff;
  background: var(--color-coral);
  border: 1px solid var(--color-coral-dark);
  box-shadow: 0 3px 8px rgba(var(--color-coral-rgb), 0.2);
}

.artwork-form-save-btn:hover { background: var(--color-coral-light); }

.artwork-form-cancel-btn {
  min-height: 38px;
  color: var(--color-juniper);
  background: var(--color-palette-pearl, #F7F2E0);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.22);
  box-shadow: none;
}

.artwork-form-cancel-btn:hover {
  background: var(--color-candle);
  border-color: var(--color-leaf-dark);
}

/* Production Steps Responsive Grid */
.prod-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1024px) {
  .prod-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 680px) {
  .prod-steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Base Card Styling */
.prod-step-card {
  position: relative;
  background-color: #FAF8F2;
  border: 1px solid rgba(137, 136, 97, 0.25);
  border-left: 5px solid #7f8c8d; /* Left color indicator */
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 10px rgba(52, 55, 35, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.prod-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(52, 55, 35, 0.08);
}

/* Card States */
.prod-step-card.status-pending,
.wp-sub-step-card.status-pending {
  border-left: 5px solid #7f8c8d !important;
  background-color: #FAF9F5 !important;
  border-color: rgba(137, 136, 97, 0.2) !important;
}

.prod-step-card.status-in_progress,
.wp-sub-step-card.status-in_progress {
  border-left: 5px solid #d97706 !important;
  background: linear-gradient(135deg, #FFFDF9 0%, #FFF9E6 100%) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.04);
}

.prod-step-card.status-waiting,
.wp-sub-step-card.status-waiting {
  border-left: 5px solid #0284c7 !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.04);
}

.prod-step-card.status-completed,
.wp-sub-step-card.status-completed {
  border-left: 5px solid #2e7d32 !important;
  background: linear-gradient(135deg, #F4FDF7 0%, #EBFBF0 100%) !important;
  border-color: rgba(46, 125, 50, 0.2) !important;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.04);
}

/* Step Header */
.prod-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  padding-bottom: 10px;
  margin-bottom: 2px;
}

.prod-step-title {
  font-weight: 800;
  color: #343723;
  font-size: 1rem;
  letter-spacing: 0.2px;
  margin: 0;
}

/* Custom Status Select Styling */
.prod-step-status-select {
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 800;
  border: 1px solid #c9c1ad;
  background-color: #f8f5ec;
  color: #3c3c3c;
  font-family: "Sarabun", sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.prod-step-status-select option {
  background: #f8f5ec;
  color: #3c3c3c;
}

.prod-step-status-select.status-val-pending {
  border-color: #c9c1ad !important;
  background-color: #e1dbc9 !important;
  color: #5e4b3b !important;
}

.prod-step-status-select.status-val-in_progress {
  border-color: #6b7b84 !important;
  background-color: #6b7b84 !important;
  color: #ffffff !important;
}

.prod-step-status-select.status-val-waiting {
  border-color: #5e4b3b !important;
  background-color: #5e4b3b !important;
  color: #ffffff !important;
}

.prod-step-status-select.status-val-completed {
  border-color: #2d4530 !important;
  background-color: #2d4530 !important;
  color: #ffffff !important;
}

/* Fields Styling */
.prod-step-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prod-step-field-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(52, 55, 35, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prod-step-field-label svg {
  opacity: 0.7;
}

/* Modern inputs */
.prod-step-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(52, 55, 35, 0.15);
  background-color: #ffffff;
  color: #343723;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.prod-step-input:focus {
  border-color: var(--color-leaf) !important;
  box-shadow: 0 0 0 3px rgba(137, 136, 97, 0.15);
}

/* Qty Completed Section */
.prod-step-qty-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  background-color: rgba(52, 55, 35, 0.04);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(52, 55, 35, 0.15);
}

.prod-step-qty-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(52, 55, 35, 0.75);
}

.prod-step-qty-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prod-step-qty-val {
  width: 55px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(52, 55, 35, 0.15);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #343723;
  outline: none;
  background-color: #ffffff;
}

.prod-step-qty-val:focus {
  border-color: var(--color-leaf) !important;
}

.prod-step-qty-total {
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(52, 55, 35, 0.5);
}

/* Overall Progress Card */
.overall-progress-card {
  background-color: white;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(52, 55, 35, 0.08);
  box-shadow: 0 4px 15px rgba(52, 55, 35, 0.02);
  margin-bottom: 8px;
}

.overall-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overall-progress-title {
  font-weight: 800;
  color: #343723;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.overall-progress-pct {
  font-weight: 900;
  color: var(--color-leaf);
  font-size: 1.15rem;
}

.overall-progress-track {
  width: 100%;
  height: 12px;
  background-color: rgba(52, 55, 35, 0.06);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.overall-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-leaf) 0%, #898861 100%);
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card view/edit modes */
.wp-sub-step-card.mode-view .prod-step-input,
.wp-sub-step-card.mode-view .prod-step-status-select {
  pointer-events: none;
  background-color: rgba(52, 55, 35, 0.01) !important;
  border-color: rgba(52, 55, 35, 0.08) !important;
  box-shadow: none !important;
}

/* 4 Work Process Cards Layout - Kanban-style Horizontal Slider */
.wp-process-grid {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  padding-bottom: 16px; /* spacing for horizontal scrollbar */
  scroll-behavior: smooth;
  cursor: grab;
  flex-shrink: 0;
  /* Scrollbar custom styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-juniper-light) var(--color-bg-app);
}
.wp-process-grid:active,
.wp-process-grid.active-dragging {
  cursor: grabbing;
}
.wp-process-grid.active-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Scrollbar styling for Webkit browsers */
.wp-process-grid::-webkit-scrollbar {
  height: 10px;
}
.wp-process-grid::-webkit-scrollbar-track {
  background: rgba(52, 55, 35, 0.05);
  border-radius: 5px;
}
.wp-process-grid::-webkit-scrollbar-thumb {
  background: var(--color-juniper-light);
  border-radius: 5px;
}
.wp-process-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-leaf);
}

/* Process Card Container */
.wp-process-card {
  width: 365px; /* fixed width for Kanban columns */
  flex-shrink: 0; /* do not compress */
  background-color: #FAF9F5;
  border-radius: 16px;
  border: 1px solid rgba(52, 55, 35, 0.12);
  box-shadow: 0 4px 15px rgba(52, 55, 35, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .wp-process-card {
    width: 290px;
  }
  .wp-process-grid {
    gap: 16px;
  }
}

.wp-process-card:hover {
  box-shadow: 0 8px 24px rgba(52, 55, 35, 0.08);
}

/* Process Card Headers */
.wp-process-header {
  padding: 16px 20px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
}

.wp-process-header:focus-visible {
  outline: 3px solid rgba(239, 233, 215, 0.85);
  outline-offset: -4px;
}

.wp-process-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.wp-process-card.is-collapsed .wp-process-chevron {
  transform: rotate(-90deg);
}

.wp-process-card.is-collapsed .wp-process-body {
  display: none;
}

.wp-process-header.theme-rosewood { background-color: #B46A72; }
.wp-process-header.theme-sage { background-color: #A8B58A; color: #2D3A47; }
.wp-process-header.theme-misty { background-color: #A9B7C6; color: #2D3A47; }
.wp-process-header.theme-midnight { background-color: #2D3A47; }

.wp-process-title {
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin: 0;
}

.wp-process-badge {
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-process-header.theme-sage .wp-process-badge,
.wp-process-header.theme-misty .wp-process-badge {
  background-color: rgba(45, 58, 71, 0.08);
  border-color: rgba(45, 58, 71, 0.12);
}

/* Process Card Body */
.wp-process-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Nested Sub-Step Card */
.wp-sub-step-card {
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.01);
  position: relative;
  transition: all 0.2s ease;
}

.wp-sub-step-card:hover {
  border-color: rgba(52, 55, 35, 0.15);
}

/* Assignee Row Styling */
.assignee-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #FAF9F6;
  border: 1px solid rgba(52, 55, 35, 0.08);
  border-radius: 10px;
  padding: 12px;
  position: relative;
}

.assignee-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assignee-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assignee-row-name {
  font-weight: 800;
  color: #343723;
  font-size: 0.85rem;
}

.assignee-row-delete {
  color: #c62828;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 800;
  display: none; /* Hidden in view mode */
  padding: 2px;
  line-height: 1;
}

.wp-sub-step-card.mode-edit .assignee-row-delete {
  display: inline-block;
}

.assignee-row-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.work-task-guidance,
.work-task-source-note {
  margin: 0;
  color: #666958;
  font-size: 0.78rem;
  line-height: 1.45;
}

.work-task-source-note {
  padding: 8px 10px;
  border-left: 3px solid #8b2926;
  background: #f6f3ea;
  color: #4d503f;
}

.work-task-overview {
  display: grid;
  gap: 6px;
}

.work-task-overview-row {
  display: grid;
  grid-template-columns: 64px minmax(150px, 1.35fr) minmax(130px, 1fr) minmax(100px, 0.55fr) 90px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(52, 55, 35, 0.09);
  background: #fff;
}

.work-task-overview-row.is-na {
  opacity: 0.58;
}

.work-task-number,
.work-task-status-label {
  font-weight: 800;
  color: #59603f;
}

.work-task-overview-name,
.work-task-overview-assignee {
  min-width: 0;
  overflow-wrap: anywhere;
}

.work-task-overview-assignee {
  color: #737568;
  font-size: 0.78rem;
}

.work-task-overview-quantity {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  color: #343723;
  white-space: nowrap;
}

.work-task-overview-quantity b {
  font-size: 0.92rem;
}

.work-task-overview-quantity small {
  color: #747765;
  font-size: 0.72rem;
}

.work-task-status-label {
  justify-self: end;
  font-size: 0.72rem;
}

.assignee-task-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.assignee-task-picker {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 8px;
  background: #fbfaf6;
}

.assignee-task-picker.is-invalid {
  border-color: #9b2c29;
  box-shadow: 0 0 0 3px rgba(155, 44, 41, 0.12);
}

.assignee-task-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 12px 16px;
  background: #30381f;
  color: #fff;
}

.assignee-task-picker-head > span {
  display: grid;
  gap: 2px;
}

.assignee-task-picker-head b {
  font-size: 0.95rem;
}

.assignee-task-picker-head small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.assignee-task-summary {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f8f4e9;
  color: #8f2926;
  font-size: 0.76rem;
  white-space: nowrap;
}

.assignee-task-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #fbfaf6;
}

.assignee-task-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 12px 42px 12px 14px;
  border: 1px solid #d9d5ca;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.assignee-task-option:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 41, 38, 0.5);
}

.assignee-task-option.is-selected,
.assignee-task-option:has(input:checked) {
  border-color: #8b2926;
  border-left-width: 4px;
  background: #f8f0ed;
}

.assignee-task-option input {
  display: none !important;
}

.assignee-task-card-copy {
  display: grid;
  gap: 5px;
}

.assignee-task-card-copy b {
  color: #8b2926;
  font-size: 0.78rem;
}

.assignee-task-card-copy strong {
  color: #20251a;
  font-size: 0.92rem;
  line-height: 1.35;
}

.assignee-task-card-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  border: 2px solid #d4d0c4;
  border-radius: 50%;
  background: #fff;
}

.assignee-task-option.is-selected .assignee-task-card-dot,
.assignee-task-option:has(input:checked) .assignee-task-card-dot {
  border-color: #f0d8d5;
  background: #9b2c29;
  box-shadow: 0 0 0 4px rgba(155, 44, 41, 0.12);
}

.assignee-target-control,
.assignee-vehicle-control {
  min-width: 0;
}

.assignee-scope-badge {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border-left: 3px solid #85885c;
  background: #f4f3eb;
  font-weight: 700;
}

.assignee-view-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #666958;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .work-task-overview-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(88px, auto) 86px;
  }

  .work-task-overview-assignee {
    grid-column: 2 / -1;
  }
}

@media (max-width: 500px) {
  .assignee-row-inputs {
    grid-template-columns: 1fr;
  }

  .assignee-task-options,
  .work-task-overview-row {
    grid-template-columns: 1fr;
  }

  .assignee-task-picker-head {
    align-items: flex-start;
  }

  .work-task-number,
  .work-task-status-label,
  .work-task-overview-assignee,
  .work-task-overview-quantity {
    grid-column: auto;
    justify-self: start;
  }
}

/* Search autocomplete box */
.assignee-search-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.assignee-suggestions-box {
  position: static;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  background-color: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  z-index: 100;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}

.assignee-suggestion-item {
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.85rem;
  font-weight: 700;
  color: #343723;
}

.assignee-suggestion-item:hover {
  background-color: rgba(137, 136, 97, 0.08);
}

.assignee-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 8px;
}

.assignee-filter-chip {
  flex: 1 1 92px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 6px;
  background: #f7f2e0;
  color: #343723;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
}

.assignee-filter-chip.active {
  background: #343723;
  border-color: #343723;
  color: #fff;
}

.assignee-result-header {
  padding: 4px 6px 7px;
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.7rem;
  font-weight: 700;
}

.assignee-empty-result {
  padding: 16px 10px;
  color: rgba(52, 55, 35, 0.58);
  font-size: 0.8rem;
  text-align: center;
}

.assignee-suggestion-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.assignee-suggestion-name {
  font-size: 0.9rem;
  font-weight: 900;
  color: #343723;
}

.assignee-suggestion-meta {
  overflow: hidden;
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignee-workload-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(125, 40, 38, 0.08);
  color: #7d2826;
  font-size: 0.68rem;
  font-weight: 900;
}

.assignee-workload-badge.available {
  background: rgba(112, 123, 109, 0.14);
  color: #53614f;
}

.assignee-picker-avatar,
.assignee-picker-photo,
.assignee-picker-initials {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}

.assignee-picker-avatar {
  position: relative;
  overflow: hidden;
  background: #efe9d7;
  border: 1px solid rgba(52, 55, 35, 0.12);
}

.assignee-picker-photo {
  display: block;
  object-fit: cover;
  object-position: center;
}

.assignee-picker-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .assignee-suggestions-box {
    max-height: 340px;
  }

  .assignee-filter-chip,
  .assignee-suggestion-item {
    min-height: 48px;
  }
}

.prod-step-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(52, 55, 35, 0.08);
}

.prod-step-avatar-initials {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.65rem;
  text-transform: uppercase;
}

/* Card Footer Action Button */
.prod-step-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  border-top: 1px solid rgba(52, 55, 35, 0.06);
  padding-top: 10px;
}

.prod-step-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(52, 55, 35, 0.18);
  background-color: #ffffff;
  color: #343723;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.prod-step-action-btn:hover {
  background-color: rgba(52, 55, 35, 0.04);
  border-color: rgba(52, 55, 35, 0.3);
}

/* Save style button */
.prod-step-action-btn.btn-save-style {
  background-color: var(--color-leaf) !important;
  color: #ffffff !important;
  border-color: var(--color-leaf) !important;
  box-shadow: 0 2px 6px rgba(137, 136, 97, 0.3) !important;
}

.prod-step-action-btn.btn-save-style:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Toast Notification inside card */
.prod-step-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -10px);
  background-color: #2e7d32;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 10px rgba(46, 125, 50, 0.25);
  z-index: 10;
}

.prod-step-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.global-mini-notification {
  position: fixed;
  top: 78px;
  right: 18px;
  left: auto;
  z-index: 10090;
  max-width: min(420px, calc(100vw - 36px));
  padding: 11px 14px;
  border: 1px solid rgba(52, 55, 35, .16);
  border-left: 4px solid #52675a;
  border-radius: 5px;
  background: #fff;
  color: #343723;
  box-shadow: 0 8px 24px rgba(35, 37, 23, .18);
  font-size: .8rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-10px);
}
.global-mini-notification.warning { border-left-color: #a96f22; }
.global-mini-notification.info { border-left-color: #607d8b; }
.global-mini-notification.show { opacity: 1; transform: translateY(0); }

/* Custom Date Picker for uniform วัน/เดือน/ปี display format */
.custom-date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.custom-date-picker-display {
  width: 100% !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  font-weight: 700;
  box-sizing: border-box;
  text-align: left;
}

/* Make sure the text input displays a calendar icon or indicator if desired, 
   or just looks like a clean input with the custom value */

/* Hidden native input date overlay */
.assignee-date-input-hidden {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  inset: auto auto 0 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Style display input when hidden input is focused */
.assignee-date-input-hidden:focus + .custom-date-picker-display {
  border-color: var(--color-leaf) !important;
  box-shadow: 0 0 0 3px rgba(137, 136, 97, 0.15) !important;
}

.assignee-date-input-hidden:focus + .form-input.custom-date-picker-display {
  border-color: var(--color-coral) !important;
  box-shadow: 0 0 0 3px rgba(125, 40, 38, 0.15) !important;
}

/* Stepper styles */
.wp-stepper-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.wp-stepper-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #FAF8F2;
  border: 2.5px solid rgba(52, 55, 35, 0.15);
  color: #343723;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.78rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.wp-stepper-step.completed .wp-stepper-circle {
  background-color: var(--color-leaf);
  border-color: var(--color-leaf);
  color: white;
}

.wp-stepper-step.in-progress .wp-stepper-circle {
  background-color: #d97706;
  border-color: #d97706;
  color: white;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25);
  animation: pulse-orange-stepper 2s infinite;
  will-change: box-shadow;
}

.wp-stepper-step.waiting .wp-stepper-circle {
  background-color: #0284c7;
  border-color: #0284c7;
  color: white;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25);
  animation: pulse-blue-stepper 2s infinite;
  will-change: box-shadow;
}

.wp-stepper-label {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: bold;
  color: rgba(52, 55, 35, 0.5);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.wp-stepper-step.completed .wp-stepper-label {
  color: var(--color-leaf);
  font-weight: 800;
}

.wp-stepper-step.in-progress .wp-stepper-label {
  color: #d97706;
  font-weight: 900;
}

.wp-stepper-step.waiting .wp-stepper-label {
  color: #0284c7;
  font-weight: 900;
}

@keyframes pulse-orange-stepper {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
  }
}

@keyframes pulse-blue-stepper {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(2, 132, 199, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
  }
}

.pulsing-dot-white {
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot-animation 1.5s infinite;
  will-change: transform, opacity;
}

@keyframes pulse-dot-animation {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

@media (max-width: 992px) {
  .wp-stepper-label {
    font-size: 0.62rem;
    white-space: normal;
    max-width: 65px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .wp-stepper-label {
    display: none;
  }
}

/* Button for Merging Parts in Wax Dressing Card */
.btn-merge-parts {
  background: linear-gradient(135deg, var(--color-coral-light, #9B3532) 0%, var(--color-coral, #7D2826) 100%);
  border: none;
  color: #FAF8F2 !important; /* Premium cream white */
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 8px rgba(125, 40, 38, 0.25);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-merge-parts:hover {
  background: linear-gradient(135deg, #B14340 0%, #9B3532 100%);
  box-shadow: 0 5px 15px rgba(125, 40, 38, 0.4);
  transform: translateY(-1.5px) scale(1.02);
  color: #ffffff !important;
}

.btn-merge-parts:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 4px rgba(125, 40, 38, 0.2);
}

.btn-merge-parts svg {
  stroke: #FAF8F2;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-merge-parts:hover svg {
  stroke: #ffffff;
  transform: rotate(15deg) scale(1.1);
}

/* ==========================================================================
   ARTWORK ACCORDION FORM STYLING
   ========================================================================== */
.artw-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.artw-accordion-item {
  border: 1.5px solid rgba(137, 136, 97, 0.3);
  border-radius: 12px;
  overflow: hidden;
  background-color: #FAF8F2;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.artw-accordion-header {
  padding: 14px 20px;
  background-color: #EFE9D7;
  color: var(--color-juniper-dark);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  border-bottom: 1.5px solid transparent;
  transition: all 0.2s ease;
}

.artw-accordion-header:hover {
  background-color: #E2DFD5;
}

.artw-accordion-header .accordion-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  color: var(--color-leaf);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Active Expanded State */
.artw-accordion-item.active {
  border-color: #7D2826;
  box-shadow: 0 4px 12px rgba(125, 40, 38, 0.08);
}

.artw-accordion-item.active .artw-accordion-header {
  background-color: #7D2826;
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.artw-accordion-item.active .artw-accordion-header .accordion-icon {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Accordion Content Panel */
.artw-accordion-content {
  padding: 24px;
  display: none;
  background-color: #FAF8F2;
  border-top: 1px solid rgba(137, 136, 97, 0.15);
}

.artw-accordion-item.active .artw-accordion-content {
  display: block;
}

/* Smooth toggle content adjustments */
.artw-accordion-content .form-section-card {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  background: transparent !important;
}

.artw-accordion-content .form-section-card:last-child {
  margin-bottom: 0 !important;
}

.artw-accordion-content .form-section-card .form-section-title {
  display: none !important; /* Title is now handled by accordion header */
}

/* Distinct master-data zones keep project identity separate from each creator. */
.project-section-content .form-section-card.project-master-zone-card {
  margin-bottom: 14px;
  padding: 18px;
  overflow: visible;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(52, 55, 35, 0.05);
}
.project-section-content .project-master-zone-card > .form-section-title { display: none !important; }
.project-master-zone-project { border-top: 4px solid #7d2926 !important; }
.project-master-zone-creator { border-top: 4px solid #667a58 !important; }
.project-master-zone-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -2px 0 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
}
.project-master-zone-number {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: #343723;
  font: 800 0.78rem/1 'Outfit', 'Sarabun', sans-serif;
}
.project-master-zone-creator .project-master-zone-number { background: #667a58; }
.project-master-zone-heading > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-master-zone-heading strong { color: #343723; font-size: 1rem; line-height: 1.3; }
.project-master-zone-heading small { color: #707268; font-size: 0.75rem; line-height: 1.4; }
#artw-designers-container { gap: 12px !important; }
.designer-block-item {
  overflow: visible;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 4px solid #667a58;
  border-radius: 5px;
  background: #fafaf7;
}
.designer-block-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.13);
  background: rgba(102, 122, 88, 0.08);
}
.designer-block-heading { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.designer-block-index { color: #667a58; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.designer-block-name { overflow: hidden; color: #343723; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.designer-block-remove {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(125, 41, 38, 0.35);
  border-radius: 4px;
  color: #7d2926;
  background: #fff;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
}
.designer-block-remove:hover { color: #fff; background: #7d2926; }
.designer-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px; }
.designer-block-grid-secondary { padding-top: 0; }
.designer-add-button {
  align-self: flex-start;
  margin-top: 2px;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border-color: rgba(102, 122, 88, 0.38) !important;
  color: #4f6245 !important;
  background: #fff !important;
  font-size: 0.8rem !important;
}

.mold-field-help {
  display: block;
  margin-top: 4px;
  color: #74766d;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .project-section-content .form-section-card.project-master-zone-card { padding: 14px; }
  .designer-block-heading { flex-direction: column; gap: 1px; }
  .designer-block-grid { grid-template-columns: 1fr; gap: 12px; }
  .designer-block-grid-secondary { padding-top: 0; }
}

/* ==========================================================================
   ARTWORK ACCORDION PANEL COLOR THEMES (SOCIABLE & BALANCED SUBTLE ACCENTS)
   ========================================================================== */

/* Theme 1: Green (รายละเอียดของงาน) - Outer Space (#4C5760) */
.artw-accordion-item.theme-green {
  border-color: rgba(76, 87, 96, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(76, 87, 96, 0.04);
}
.artw-accordion-item.theme-green .artw-accordion-header {
  background-color: #4C5760;
  color: #ffffff;
  border-left: 4px solid #384148;
}
.artw-accordion-item.theme-green .artw-accordion-header .accordion-icon {
  color: #ffffff;
}
.artw-accordion-item.theme-green .artw-accordion-header:hover {
  filter: brightness(1.1);
}
.artw-accordion-item.theme-green.active {
  border-color: #4C5760;
  box-shadow: 0 4px 14px rgba(76, 87, 96, 0.12);
}
.artw-accordion-item.theme-green.active .artw-accordion-header {
  background-color: #4C5760;
  color: #ffffff;
  border-left-color: #384148;
}

/* New transition themes preserve the original nine-color sequence. */
.artw-accordion-item.theme-project-images {
  border-color: rgba(91, 105, 110, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(91, 105, 110, 0.04);
}
.artw-accordion-item.theme-project-images .artw-accordion-header {
  background-color: #5B696E;
  color: #ffffff;
  border-left: 4px solid #455156;
}
.artw-accordion-item.theme-project-images .artw-accordion-header .accordion-icon { color: #ffffff; }
.artw-accordion-item.theme-project-images .artw-accordion-header:hover { filter: brightness(1.1); }
.artw-accordion-item.theme-project-images.active {
  border-color: #5B696E;
  box-shadow: 0 4px 14px rgba(91, 105, 110, 0.12);
}
.artw-accordion-item.theme-project-images.active .artw-accordion-header {
  background-color: #5B696E;
  color: #ffffff;
  border-left-color: #455156;
}

.artw-accordion-item.theme-scale-details {
  border-color: rgba(100, 118, 123, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(100, 118, 123, 0.04);
}
.artw-accordion-item.theme-scale-details .artw-accordion-header {
  background-color: #64767B;
  color: #ffffff;
  border-left: 4px solid #4d5e63;
}
.artw-accordion-item.theme-scale-details .artw-accordion-header .accordion-icon { color: #ffffff; }
.artw-accordion-item.theme-scale-details .artw-accordion-header:hover { filter: brightness(1.1); }
.artw-accordion-item.theme-scale-details.active {
  border-color: #64767B;
  box-shadow: 0 4px 14px rgba(100, 118, 123, 0.12);
}
.artw-accordion-item.theme-scale-details.active .artw-accordion-header {
  background-color: #64767B;
  color: #ffffff;
  border-left-color: #4d5e63;
}

/* Theme 2: Blue (รายละเอียดงานต้นแบบ) - Slate Gray (#708086) */
.artw-accordion-item.theme-blue {
  border-color: rgba(112, 128, 134, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(112, 128, 134, 0.04);
}
.artw-accordion-item.theme-blue .artw-accordion-header {
  background-color: #708086;
  color: #ffffff;
  border-left: 4px solid #58656a;
}
.artw-accordion-item.theme-blue .artw-accordion-header .accordion-icon {
  color: #ffffff;
}
.artw-accordion-item.theme-blue .artw-accordion-header:hover {
  filter: brightness(1.1);
}
.artw-accordion-item.theme-blue.active {
  border-color: #708086;
  box-shadow: 0 4px 14px rgba(112, 128, 134, 0.12);
}
.artw-accordion-item.theme-blue.active .artw-accordion-header {
  background-color: #708086;
  color: #ffffff;
  border-left-color: #58656a;
}

/* Theme 3: Purple (รายละเอียดการทำพิมพ์) - Cadet Gray (#93A8AC) */
.artw-accordion-item.theme-purple {
  border-color: rgba(147, 168, 172, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(147, 168, 172, 0.04);
}
.artw-accordion-item.theme-purple .artw-accordion-header {
  background-color: #93A8AC;
  color: #ffffff;
  border-left: 4px solid #72898c;
}
.artw-accordion-item.theme-purple .artw-accordion-header .accordion-icon {
  color: #ffffff;
}
.artw-accordion-item.theme-purple .artw-accordion-header:hover {
  filter: brightness(1.1);
}
.artw-accordion-item.theme-purple.active {
  border-color: #93A8AC;
  box-shadow: 0 4px 14px rgba(147, 168, 172, 0.12);
}
.artw-accordion-item.theme-purple.active .artw-accordion-header {
  background-color: #93A8AC;
  color: #ffffff;
  border-left-color: #72898c;
}

/* Theme 4: Amber (รายละเอียด ขี้ผึ้ง/เทียน) - Ash Gray (#B5BBAF) */
.artw-accordion-item.theme-amber {
  border-color: rgba(181, 187, 175, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(181, 187, 175, 0.04);
}
.artw-accordion-item.theme-amber .artw-accordion-header {
  background-color: #B5BBAF;
  color: #2d3330;
  border-left: 4px solid #929a8a;
}
.artw-accordion-item.theme-amber .artw-accordion-header .accordion-icon {
  color: #2d3330;
}
.artw-accordion-item.theme-amber .artw-accordion-header:hover {
  filter: brightness(0.96);
}
.artw-accordion-item.theme-amber.active {
  border-color: #B5BBAF;
  box-shadow: 0 4px 14px rgba(181, 187, 175, 0.12);
}
.artw-accordion-item.theme-amber.active .artw-accordion-header {
  background-color: #B5BBAF;
  color: #2d3330;
  border-left-color: #929a8a;
}

/* Theme 5: Red (รายละเอียดหล่อโลหะ) - Bone (#C6C5B1) */
.artw-accordion-item.theme-red {
  border-color: rgba(198, 197, 177, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(198, 197, 177, 0.04);
}
.artw-accordion-item.theme-red .artw-accordion-header {
  background-color: #C6C5B1;
  color: #333333;
  border-left: 4px solid #a3a28c;
}
.artw-accordion-item.theme-red .artw-accordion-header .accordion-icon {
  color: #333333;
}
.artw-accordion-item.theme-red .artw-accordion-header:hover {
  filter: brightness(0.96);
}
.artw-accordion-item.theme-red.active {
  border-color: #C6C5B1;
  box-shadow: 0 4px 14px rgba(198, 197, 177, 0.12);
}
.artw-accordion-item.theme-red.active .artw-accordion-header {
  background-color: #C6C5B1;
  color: #333333;
  border-left-color: #a3a28c;
}

/* Theme 6: Teal (รายละเอียดการทำผิว) - Pearl (#D7CEB2) */
.artw-accordion-item.theme-teal {
  border-color: rgba(215, 206, 178, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(215, 206, 178, 0.04);
}
.artw-accordion-item.theme-teal .artw-accordion-header {
  background-color: #D7CEB2;
  color: #333333;
  border-left: 4px solid #b7ab8b;
}
.artw-accordion-item.theme-teal .artw-accordion-header .accordion-icon {
  color: #333333;
}
.artw-accordion-item.theme-teal .artw-accordion-header:hover {
  filter: brightness(0.96);
}
.artw-accordion-item.theme-teal.active {
  border-color: #D7CEB2;
  box-shadow: 0 4px 14px rgba(215, 206, 178, 0.12);
}
.artw-accordion-item.theme-teal.active .artw-accordion-header {
  background-color: #D7CEB2;
  color: #333333;
  border-left-color: #b7ab8b;
}

/* Theme 7: Rose (รายละเอียดบรรจุภัณฑ์) - Khaki (#A59E8C) */
.artw-accordion-item.theme-rose {
  border-color: rgba(165, 158, 140, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(165, 158, 140, 0.04);
}
.artw-accordion-item.theme-rose .artw-accordion-header {
  background-color: #A59E8C;
  color: #2d2c27;
  border-left: 4px solid #827c6b;
}
.artw-accordion-item.theme-rose .artw-accordion-header .accordion-icon {
  color: #2d2c27;
}
.artw-accordion-item.theme-rose .artw-accordion-header:hover {
  filter: brightness(0.96);
}
.artw-accordion-item.theme-rose.active {
  border-color: #A59E8C;
  box-shadow: 0 4px 14px rgba(165, 158, 140, 0.12);
}
.artw-accordion-item.theme-rose.active .artw-accordion-header {
  background-color: #A59E8C;
  color: #2d2c27;
  border-left-color: #827c6b;
}

/* Theme 8: Bronze (รายละเอียดค่าใช้จ่ายพิเศษอื่นๆ) - Battleship Gray (#868174) */
.artw-accordion-item.theme-bronze {
  border-color: rgba(134, 129, 116, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(134, 129, 116, 0.04);
}
.artw-accordion-item.theme-bronze .artw-accordion-header {
  background-color: #868174;
  color: #ffffff;
  border-left: 4px solid #656157;
}
.artw-accordion-item.theme-bronze .artw-accordion-header .accordion-icon {
  color: #ffffff;
}
.artw-accordion-item.theme-bronze .artw-accordion-header:hover {
  filter: brightness(1.08);
}
.artw-accordion-item.theme-bronze.active {
  border-color: #868174;
  box-shadow: 0 4px 14px rgba(134, 129, 116, 0.12);
}
.artw-accordion-item.theme-bronze.active .artw-accordion-header {
  background-color: #868174;
  color: #ffffff;
  border-left-color: #656157;
}

/* Theme 9: Gray (รายชื่อผู้รับผิดชอบ) - Dim Gray (#66635B) */
.artw-accordion-item.theme-gray {
  border-color: rgba(102, 99, 91, 0.3);
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(102, 99, 91, 0.04);
}
.artw-accordion-item.theme-gray .artw-accordion-header {
  background-color: #66635B;
  color: #ffffff;
  border-left: 4px solid #494741;
}
.artw-accordion-item.theme-gray .artw-accordion-header .accordion-icon {
  color: #ffffff;
}
.artw-accordion-item.theme-gray .artw-accordion-header:hover {
  filter: brightness(1.1);
}
.artw-accordion-item.theme-gray.active {
  border-color: #66635B;
  box-shadow: 0 4px 14px rgba(102, 99, 91, 0.12);
}
.artw-accordion-item.theme-gray.active .artw-accordion-header {
  background-color: #66635B;
  color: #ffffff;
  border-left-color: #494741;
}

/* Align panel backgrounds to prevent bleed-through of fallback colors */
.artw-accordion-item.theme-green .artw-accordion-content { background-color: #fafaf8; }
.artw-accordion-item.theme-project-images .artw-accordion-content { background-color: #fafbf9; }
.artw-accordion-item.theme-scale-details .artw-accordion-content { background-color: #fbfbf9; }
.artw-accordion-item.theme-blue .artw-accordion-content { background-color: #fbfbf9; }
.artw-accordion-item.theme-purple .artw-accordion-content { background-color: #fcfbfa; }
.artw-accordion-item.theme-amber .artw-accordion-content { background-color: #fcfafa; }
.artw-accordion-item.theme-red .artw-accordion-content { background-color: #faf6f6; }
.artw-accordion-item.theme-teal .artw-accordion-content { background-color: #fafbf9; }
.artw-accordion-item.theme-rose .artw-accordion-content { background-color: #faf9f8; }
.artw-accordion-item.theme-bronze .artw-accordion-content { background-color: #faf9f7; }
.artw-accordion-item.theme-gray .artw-accordion-content { background-color: #fcfbfa; }

/* The two inserted tabs bridge the original slate-to-blue palette without losing contrast. */
.artw-accordion-item.theme-project-images .artw-accordion-header,
.artw-accordion-item.theme-project-images.active .artw-accordion-header {
  background-color: #596653 !important;
  color: #ffffff !important;
  border-left-color: #3f493b !important;
}
.artw-accordion-item.theme-project-images .accordion-icon { color: #ffffff !important; }
.artw-accordion-item.theme-scale-details .artw-accordion-header,
.artw-accordion-item.theme-scale-details.active .artw-accordion-header {
  background-color: #62787a !important;
  color: #ffffff !important;
  border-left-color: #43585a !important;
}
.artw-accordion-item.theme-scale-details .accordion-icon { color: #ffffff !important; }

/* Project detail navigation palette (11 sections) */
.artw-accordion {
  --artw-nav-bg: #F1ECDD;
  --artw-nav-line: #E8E1CE;
  --artw-nav-accent: #7D2926;
  --artw-nav-light: #F7F6F1;
  --artw-nav-dark: #2F3130;
}

.artw-accordion .artw-accordion-item {
  border-color: var(--artw-nav-line);
  background-color: var(--artw-nav-bg);
  box-shadow: 0 2px 6px rgba(47, 49, 48, 0.06);
}

.artw-accordion .artw-accordion-header {
  border-left: 4px solid var(--artw-nav-line);
}

.artw-accordion .artw-accordion-item.active {
  border-color: var(--artw-nav-line);
  box-shadow: 0 4px 14px rgba(47, 49, 48, 0.12);
}

.artw-accordion .artw-accordion-item.active .artw-accordion-header {
  border-left-color: var(--artw-nav-accent) !important;
}

.artw-accordion .artw-accordion-content {
  background-color: var(--artw-nav-bg) !important;
  border-top-color: var(--artw-nav-line);
}

.artw-accordion-item.theme-green .artw-accordion-header,
.artw-accordion-item.theme-green.active .artw-accordion-header {
  background-color: #49535C !important;
  color: var(--artw-nav-light) !important;
}

.artw-accordion-item.theme-project-images .artw-accordion-header,
.artw-accordion-item.theme-project-images.active .artw-accordion-header {
  background-color: #AEBAB0 !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-scale-details .artw-accordion-header,
.artw-accordion-item.theme-scale-details.active .artw-accordion-header {
  background-color: #BAB4A8 !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-blue .artw-accordion-header,
.artw-accordion-item.theme-blue.active .artw-accordion-header {
  background-color: #66757A !important;
  color: var(--artw-nav-light) !important;
}

.artw-accordion-item.theme-purple .artw-accordion-header,
.artw-accordion-item.theme-purple.active .artw-accordion-header {
  background-color: #93A6A9 !important;
  color: var(--artw-nav-light) !important;
}

.artw-accordion-item.theme-amber .artw-accordion-header,
.artw-accordion-item.theme-amber.active .artw-accordion-header {
  background-color: #A0A59B !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-red .artw-accordion-header,
.artw-accordion-item.theme-red.active .artw-accordion-header {
  background-color: #C3C1AE !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-teal .artw-accordion-header,
.artw-accordion-item.theme-teal.active .artw-accordion-header {
  background-color: #D3C9AD !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-rose .artw-accordion-header,
.artw-accordion-item.theme-rose.active .artw-accordion-header {
  background-color: #9E9786 !important;
  color: var(--artw-nav-dark) !important;
}

.artw-accordion-item.theme-bronze .artw-accordion-header,
.artw-accordion-item.theme-bronze.active .artw-accordion-header {
  background-color: #827C70 !important;
  color: var(--artw-nav-light) !important;
}

.artw-accordion-item.theme-gray .artw-accordion-header,
.artw-accordion-item.theme-gray.active .artw-accordion-header {
  background-color: #646058 !important;
  color: var(--artw-nav-light) !important;
}

.artw-accordion .artw-accordion-header .accordion-icon {
  color: currentColor !important;
}

/* Editable scale-sheet studio */
.scale-sheet-builder {
  margin: 0 0 22px;
  border: 1px solid rgba(67, 88, 90, 0.2);
  border-top: 4px solid #62787a;
  background: #f7f7f3;
  box-shadow: 0 8px 24px rgba(52, 55, 35, 0.06);
}
.scale-sheet-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(67, 88, 90, 0.14);
}
.scale-sheet-kicker {
  display: block;
  margin-bottom: 3px;
  color: #7d2826;
  font-size: 0.68rem;
  font-weight: 900;
}
.scale-sheet-builder h3 {
  margin: 0;
  color: #343723;
  font-size: 1.08rem;
  letter-spacing: 0;
}
.scale-sheet-builder-head p {
  margin: 4px 0 0;
  color: #737468;
  font-size: 0.78rem;
  line-height: 1.45;
}
.scale-sheet-head-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.scale-sheet-action,
.scale-sheet-preview-bar button,
.scale-sheet-stage-tools button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 6px;
  background: #ffffff;
  color: #343723;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}
.scale-sheet-action.print {
  border-color: rgba(125, 40, 38, 0.4);
  background: rgba(125, 40, 38, 0.05);
  color: #7d2826;
}
.scale-sheet-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  min-height: 430px;
}
.scale-sheet-stage-panel {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(67, 88, 90, 0.14);
}
.scale-sheet-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #d5d7d0;
  background-color: #eceee9;
  background-image: linear-gradient(45deg, rgba(52,55,35,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(52,55,35,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(52,55,35,.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(52,55,35,.035) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  touch-action: none;
}
.scale-sheet-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.scale-sheet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #596653;
  cursor: pointer;
}
.scale-sheet-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 3px;
  border: 1px solid rgba(89, 102, 83, 0.35);
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  font-size: 1.5rem;
}
.scale-sheet-empty small { color: #85867b; }
.scale-sheet-stage-tools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}
.scale-sheet-stage-tools .danger { color: #982f2c; }
.scale-sheet-marker {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  padding: 4px 8px 4px 4px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(52, 55, 35, 0.65);
  border-radius: 5px;
  background: rgba(255,255,255,.94);
  color: #343723;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  font: inherit;
  font-size: 0.7rem;
  cursor: grab;
  touch-action: none;
}
.scale-sheet-marker b {
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #343723;
  color: #fff;
  font-size: 0.62rem;
}
.scale-sheet-marker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scale-sheet-marker.is-dragging {
  z-index: 4;
  cursor: grabbing;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
}
.scale-sheet-parts-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  background: #fff;
}
.scale-sheet-part-entry label {
  display: block;
  margin-bottom: 6px;
  color: #343723;
  font-size: 0.75rem;
  font-weight: 800;
}
.scale-sheet-part-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px auto;
  gap: 6px;
}
.scale-sheet-part-entry-row input { min-width: 0; height: 40px; }
.scale-sheet-part-entry-row input[type="number"] { text-align: center; }
.scale-sheet-part-entry-row button {
  min-height: 40px;
  padding: 7px 11px;
  border: 0;
  border-radius: 5px;
  background: #596653;
  color: #fff;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
}
.scale-sheet-parts-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 8px;
  padding-top: 13px;
  border-top: 1px solid #ecece6;
  color: #343723;
  font-size: 0.78rem;
}
.scale-sheet-parts-title span { color: #85867b; font-size: 0.68rem; }
.scale-sheet-parts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 290px;
  overflow-y: auto;
}
.scale-sheet-part-row {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 76px 30px;
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid #e5e5df;
  background: #fafaf7;
}
.scale-sheet-part-number {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #62787a;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
}
.scale-sheet-part-row > input,
.scale-sheet-qty-control input {
  min-width: 0;
  height: 32px;
  padding: 5px 7px;
  border: 1px solid #dcdcd4;
  border-radius: 4px;
  background: #fff;
  color: #343723;
  font: inherit;
  font-size: 0.72rem;
}
.scale-sheet-qty-control { display: flex; flex-direction: column; gap: 2px; }
.scale-sheet-qty-control span { color: #85867b; font-size: 0.55rem; }
.scale-sheet-qty-control input { text-align: center; }
.scale-sheet-remove-label {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(152,47,44,.22);
  border-radius: 4px;
  background: #fff;
  color: #982f2c;
  font-size: 1rem;
  cursor: pointer;
}
.scale-sheet-parts-empty {
  padding: 30px 12px;
  border: 1px dashed #d4d4cb;
  color: #77786d;
  text-align: center;
  font-size: 0.76rem;
}
.scale-sheet-parts-empty small { color: #9a9b91; }
.scale-sheet-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 18px;
  border-top: 1px solid rgba(67, 88, 90, 0.14);
  background: #eef0eb;
}
.scale-sheet-preview-bar div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scale-sheet-preview-bar strong { color: #343723; font-size: 0.75rem; }
.scale-sheet-preview-bar span { color: #7d7e74; font-size: 0.67rem; }
.scale-sheet-preview-bar button { flex: 0 0 auto; border-color: rgba(98,120,122,.38); color: #43585a; }

@media (max-width: 1100px) {
  .scale-sheet-workspace { grid-template-columns: 1fr; }
  .scale-sheet-stage-panel { border-right: 0; border-bottom: 1px solid rgba(67, 88, 90, 0.14); }
  .scale-sheet-parts-list { max-height: none; }
}
@media (max-width: 700px) {
  .scale-sheet-builder-head,
  .scale-sheet-preview-bar { align-items: stretch; flex-direction: column; }
  .scale-sheet-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .scale-sheet-stage-panel,
  .scale-sheet-parts-panel { padding: 12px; }
  .scale-sheet-stage { aspect-ratio: 1 / 1; }
  .scale-sheet-part-entry-row { grid-template-columns: minmax(0,1fr) 58px; }
  .scale-sheet-part-entry-row button { grid-column: 1 / -1; }
  .scale-sheet-preview-bar button { width: 100%; }
}

/* ==========================================================================
   FLOATING ACTION BUTTON (FAB) PRINT MENU
   ========================================================================== */
.fab-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.fab-trigger-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #4E2323; /* Crater brown */
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-trigger-btn:hover {
  transform: scale(1.08) rotate(15deg);
  background-color: #5D4848; /* Ferra */
}

.fab-container.active .fab-trigger-btn {
  background-color: #5D4848; /* Ferra */
  transform: scale(1.05) rotate(90deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 4px;
}

.fab-container.active .fab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
}

.fab-label {
  background-color: #5D4848; /* Ferra */
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  font-family: 'Sarabun', sans-serif;
}

.fab-menu-item:hover .fab-label {
  opacity: 1;
  transform: translateX(0);
}

.fab-sub-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-sub-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

/* Sub-buttons colors based on customer palette */
.item-quotation .fab-sub-btn {
  background-color: #52503A; /* Kelp */
}
.item-quotation .fab-sub-btn:hover {
  background-color: #857B4D; /* Creek */
}

.item-contract .fab-sub-btn {
  background-color: #857B4D; /* Creek */
}
.item-contract .fab-sub-btn:hover {
  background-color: #52503A; /* Kelp */
}

.item-internal .fab-sub-btn {
  background-color: #4E2323; /* Crater brown */
}
.item-internal .fab-sub-btn:hover {
  background-color: #5D4848; /* Ferra */
}

.item-billing .fab-sub-btn {
  background-color: #8F6C51; /* Golden */
}
.item-billing .fab-sub-btn:hover {
  background-color: #DCCFC6; /* Wafer */
  color: #4E2323;
}

.item-receipt .fab-sub-btn {
  background-color: #906262; /* Copper Rose */
}
.item-receipt .fab-sub-btn:hover {
  background-color: #5D4848; /* Ferra */
}

.item-tax .fab-sub-btn {
  background-color: #5D4848; /* Ferra */
}
.item-tax .fab-sub-btn:hover {
  background-color: #4E2323; /* Crater brown */
}
/* Custom Accordion Themes based on June 18 updates */
.artw-accordion-item.theme-olive .artw-accordion-header { background-color: #898861; color: #fff; }
.artw-accordion-item.theme-clay .artw-accordion-header { background-color: #9B7763; color: #fff; }
.artw-accordion-item.theme-rosewood .artw-accordion-header { background-color: #915E65; color: #fff; }
.artw-accordion-item.theme-maroon .artw-accordion-header { background-color: #4A2525; color: #fff; }
.artw-accordion-item.theme-charcoal .artw-accordion-header { background-color: #604F52; color: #fff; }
.artw-accordion-item.theme-sand .artw-accordion-header { background-color: #DCD1CB; color: #333; }
.artw-accordion-item.theme-white .artw-accordion-header { background-color: #F2F1EC; color: #333; }

.artw-accordion-item.theme-olive .artw-accordion-content { border: 2px solid #898861; }
.artw-accordion-item.theme-clay .artw-accordion-content { border: 2px solid #9B7763; }
.artw-accordion-item.theme-rosewood .artw-accordion-content { border: 2px solid #915E65; }
.artw-accordion-item.theme-maroon .artw-accordion-content { border: 2px solid #4A2525; }
.artw-accordion-item.theme-charcoal .artw-accordion-content { border: 2px solid #604F52; }
.artw-accordion-item.theme-sand .artw-accordion-content { border: 2px solid #DCD1CB; }
.artw-accordion-item.theme-white .artw-accordion-content { border: 2px solid #F2F1EC; }

/* Overall step note container styled to look like a premium note card */
.prod-step-overall-note-box {
  background: #FAF8F2 !important;
  border-left: 4px solid var(--color-leaf) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  border-top: 1px solid rgba(52, 55, 35, 0.08) !important;
  border-right: 1px solid rgba(52, 55, 35, 0.08) !important;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

/* Update border left based on card status */
.wp-sub-step-card.status-pending .prod-step-overall-note-box {
  border-left-color: #94a3b8 !important;
}
.wp-sub-step-card.status-in_progress .prod-step-overall-note-box {
  border-left-color: #d97706 !important;
}
.wp-sub-step-card.status-waiting .prod-step-overall-note-box {
  border-left-color: #0284c7 !important;
}
.wp-sub-step-card.status-completed .prod-step-overall-note-box {
  border-left-color: #2e7d32 !important;
}

.prod-step-overall-note-box .prod-step-field-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: var(--color-juniper-dark) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

/* Quotation Detail and Edit View Styles */
.quotation-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quotation-detail-card, .quotation-edit-card {
  background-color: var(--color-palette-pearl);
  color: var(--color-palette-pewter);
  border: 1px solid rgba(218, 194, 178, 0.5);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.quotation-header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(218, 194, 178, 0.3);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.quotation-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-palette-pewter);
  display: flex;
  align-items: center;
  gap: 12px;
}

.quotation-status-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.quotation-status-badge.draft {
  background-color: rgba(191, 137, 127, 0.15);
  color: var(--color-palette-salmon);
  border: 1px solid rgba(191, 137, 127, 0.3);
}

.quotation-status-badge.sent {
  background-color: rgba(112, 123, 109, 0.15);
  color: var(--color-palette-olive);
  border: 1px solid rgba(112, 123, 109, 0.3);
}

.quotation-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
  background-color: rgba(218, 194, 178, 0.12);
  border: 1px solid rgba(218, 194, 178, 0.3);
  border-radius: var(--border-radius-md);
  padding: 18px;
}

.quotation-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quotation-meta-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-palette-olive);
  font-weight: 600;
}

.quotation-meta-value {
  font-size: 0.95rem;
  color: var(--color-palette-pewter);
  font-weight: 500;
}

.quotation-table-wrapper {
  margin-bottom: 28px;
  border: 1px solid rgba(112, 123, 109, 0.18);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.quotation-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}

.quotation-table th {
  background-color: rgba(112, 123, 109, 0.12);
  color: var(--color-palette-pewter);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(112, 123, 109, 0.18);
  text-align: center !important;
}

.quotation-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(218, 194, 178, 0.2);
  font-size: 0.9rem;
  color: var(--color-palette-pewter);
  vertical-align: middle;
}

.quotation-table tr:last-child td {
  border-bottom: none;
}

.quotation-service-row.is-standard {
  background: rgba(112, 123, 109, 0.035);
}

.quotation-service-row.is-custom {
  background: rgba(140, 120, 83, 0.055);
}

.quotation-service-category {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 9px;
  border-left: 3px solid var(--color-palette-olive);
  line-height: 1.25;
}

.quotation-service-row.is-custom .quotation-service-category {
  border-left-color: #8c7853;
}

.quotation-service-category strong {
  font-size: 0.88rem;
  color: var(--color-palette-pewter);
}

.quotation-service-category span {
  font-size: 0.68rem;
  color: rgba(52, 55, 35, 0.58);
}

.quotation-service-table-wrapper {
  overflow: hidden;
}

#edit-quote-special-items-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#edit-quote-special-items-table .quotation-service-col-number { width: 5%; }
#edit-quote-special-items-table .quotation-service-col-category { width: 22%; }
#edit-quote-special-items-table .quotation-service-col-description { width: 57%; }
#edit-quote-special-items-table .quotation-service-col-price { width: 16%; }
#edit-quote-special-items-table th,
#edit-quote-special-items-table td { box-sizing: border-box; }
#edit-quote-special-items-table .table-input { width: 100%; min-width: 0; box-sizing: border-box; }

.quotation-service-category-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.quotation-service-category-wrap .quotation-service-category { min-width: 0; }

.quotation-service-delete {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(143, 45, 40, 0.3);
  border-radius: 6px;
  background: #fff;
  color: #8f2d28;
  cursor: pointer;
}

.quotation-service-delete:hover {
  border-color: #8f2d28;
  background: rgba(143, 45, 40, 0.07);
}

.quotation-milestone-section {
  margin-top: 20px;
  border: 1px solid rgba(125, 40, 38, 0.2);
  border-left: 4px solid #7d2826;
  background: #fffdf9;
}

.quotation-milestone-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid #e6dfd2;
  background: #f8f5ed;
}

.quotation-milestone-section > header span,
.quotation-milestone-section > header h4,
.quotation-milestone-section > header p { display: block; margin: 0; }
.quotation-milestone-section > header span { color: #8c1d1a; font: 800 .68rem "Outfit", sans-serif; }
.quotation-milestone-section > header h4 { margin-top: 2px; color: #343723; font-size: .95rem; }
.quotation-milestone-section > header p { margin-top: 3px; color: #77756d; font-size: .72rem; line-height: 1.45; }
.quotation-milestone-add { flex: 0 0 auto; min-height: 36px; color: #7d2826 !important; border-color: rgba(125, 40, 38, .42) !important; background: #fff !important; font-weight: 800; }
.quotation-milestone-list { display: grid; gap: 9px; padding: 12px; }
.quotation-milestone-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 10px 12px; border: 1px dashed #d5cebf; background: #faf8f2; }
.quotation-milestone-empty strong { color: #56594b; font-size: .78rem; }
.quotation-milestone-empty span { color: #858177; font-size: .7rem; text-align: right; }
.quotation-milestone-card { border: 1px solid #ddd6c8; border-left: 4px solid #9a927b; background: #fff; }
.quotation-milestone-card.is-fixed { border-left-color: #8c1d1a; }
.quotation-milestone-card > header { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 6px 10px; border-bottom: 1px solid #ece7dc; background: #f7f4ec; }
.quotation-milestone-card > header div { display: flex; align-items: center; gap: 8px; }
.quotation-milestone-card > header span { color: #7d2826; font: 800 .7rem "Outfit", sans-serif; }
.quotation-milestone-card > header strong { font-size: .82rem; }
.quotation-milestone-card > header button { width: 28px; height: 28px; border: 1px solid #d8b6af; background: #fff; color: #8c1d1a; cursor: pointer; }
.quotation-milestone-fields { display: grid; grid-template-columns: .85fr 1.35fr .8fr .85fr 1.15fr 1.1fr; gap: 9px; padding: 10px; }
.quotation-milestone-fields label { display: grid; align-content: start; gap: 4px; min-width: 0; }
.quotation-milestone-fields label > span { color: #66685b; font-size: .72rem; font-weight: 800; line-height: 1.35; }
.quotation-milestone-fields label > span b { color: #8c1d1a; }
.quotation-milestone-fields input,
.quotation-milestone-fields select { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #cec9ba; border-radius: 4px; background: #fff; padding: 6px 8px; font: inherit; font-size: .8rem; }
.quotation-milestone-notes { grid-column: span 2; }

@media (max-width: 1100px) {
  .quotation-milestone-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .quotation-milestone-section > header,
  .quotation-milestone-empty { align-items: stretch; flex-direction: column; }
  .quotation-milestone-empty span { text-align: left; }
  .quotation-milestone-fields { grid-template-columns: 1fr 1fr; }
  .quotation-milestone-notes { grid-column: 1 / -1; }
}

.quotation-auto-sync-note {
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: right;
}

.quotation-internal-finance {
  margin-top: 22px;
  padding: 18px 0 4px;
  border-top: 2px solid rgba(125, 40, 38, 0.2);
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
}

.quotation-internal-finance-header,
.quotation-finance-block-heading,
.quotation-advance-toggle-row,
.quotation-internal-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.quotation-internal-finance-header > div > span,
.quotation-internal-detail header > div > span {
  color: var(--color-coral, #7D2826);
  font-size: 0.68rem;
  font-weight: 800;
}

.quotation-internal-finance-header h4,
.quotation-internal-detail h4 { margin: 2px 0 3px; color: var(--color-palette-pewter); font-size: 1rem; }
.quotation-internal-finance-header p { margin: 0; color: rgba(52, 55, 35, 0.62); font-size: 0.76rem; }
.quotation-internal-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(125, 40, 38, 0.28); border-radius: 4px; color: var(--color-coral, #7D2826); background: rgba(125, 40, 38, 0.05); font-size: 0.68rem; font-weight: 800; }

.quotation-validity-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  align-items: end;
  gap: 16px;
  margin: 16px 0 0;
  padding: 12px 0;
  border-top: 1px solid rgba(52, 55, 35, 0.1);
}
.quotation-validity-row label,
.quotation-payment-row label,
.quotation-advance-grid label,
.quotation-advance-terms { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.quotation-validity-row label > span,
.quotation-payment-row label > span,
.quotation-advance-grid label > span,
.quotation-advance-terms > span { color: var(--color-palette-olive); font-size: 0.7rem; font-weight: 700; }
.quotation-validity-row p { margin: 0 0 9px; color: rgba(52, 55, 35, 0.58); font-size: 0.72rem; }
.quotation-validity-row p strong { color: #8f2d28; }

.quotation-finance-block { padding: 15px 0; border-top: 1px solid rgba(52, 55, 35, 0.1); }
.quotation-finance-block-heading { align-items: center; }
.quotation-finance-block-heading strong,
.quotation-advance-toggle-row strong { display: block; color: var(--color-palette-pewter); font-size: 0.86rem; }
.quotation-finance-block-heading small,
.quotation-advance-toggle-row small { display: block; margin-top: 2px; color: rgba(52, 55, 35, 0.58); font-size: 0.7rem; }
.quotation-finance-add {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border-color: rgba(52, 55, 35, 0.24) !important;
  background: rgba(52, 55, 35, 0.05) !important;
  color: var(--color-palette-olive) !important;
  font-size: 0.75rem;
}
.quotation-finance-add:hover { border-color: var(--color-palette-olive) !important; background: rgba(52, 55, 35, 0.1) !important; }
.quotation-finance-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.quotation-payment-schedule { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.quotation-payment-row {
  display: grid;
  grid-template-columns: 28px minmax(145px, 1.2fr) minmax(92px, .72fr) minmax(105px, .8fr) minmax(112px, .85fr) minmax(112px, .85fr) minmax(105px, .72fr) 34px;
  grid-template-areas: "number detail mode amount trigger condition status delete";
  align-items: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-left: 4px solid var(--color-palette-olive);
  border-radius: 6px;
  background: #fff;
}
.quotation-payment-number{grid-area:number}.quotation-payment-row>label:nth-of-type(1){grid-area:detail}.quotation-payment-mode-field{grid-area:mode}.quotation-payment-amount-field{grid-area:amount}.quotation-payment-row>label:nth-of-type(4){grid-area:trigger}.quotation-payment-condition{grid-area:condition}.quotation-payment-row>label:nth-of-type(7){grid-area:status}.quotation-payment-delete{grid-area:delete}
.quotation-payment-number { align-self: start; display: grid; place-items: center; width: 24px; height: 36px; margin-top: 19px; background: var(--color-palette-olive); color: #fff; font-size: 0.7rem; font-weight: 800; }
.quotation-payment-row .quotation-form-control { min-width: 0; height: 36px; padding: 6px 8px; font-size: 0.76rem; }
.quotation-payment-amount.is-calculated{background:#eef1e9;color:#465541;font-weight:800}
.quotation-payment-balance{display:block;min-height:25px;margin-top:1px;padding:4px 6px;box-sizing:border-box;border-radius:4px;background:#f2f4ee;color:#64715f;font-size:.61rem;line-height:1.3}.quotation-payment-balance.is-over{background:#fbefed;color:#9b332f;font-weight:800}
.quotation-payment-allocation-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:8px;overflow:hidden;border:1px solid #63715e;border-radius:6px;background:#63715e;color:#596356;font-size:.68rem}.quotation-payment-allocation-summary[hidden]{display:none}.quotation-payment-allocation-summary span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;background:#f2f4ee}.quotation-payment-allocation-summary small{display:block;color:#667161;font-size:.62rem}.quotation-payment-allocation-summary strong{color:#343723;font-size:.76rem}.quotation-payment-allocation-summary.is-over{border-color:#9b332f;background:#9b332f;color:#8d2f2c}.quotation-payment-allocation-summary.is-over span{background:#fbefed}
.quotation-payment-condition.is-hidden { display: none; }
.quotation-payment-delete { display: grid; place-items: center; width: 34px; height: 36px; margin-top: 19px; padding: 0; border: 1px solid rgba(143, 45, 40, 0.3); border-radius: 6px; background: #fff; color: #8f2d28; cursor: pointer; }
.quotation-payment-delete svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quotation-payment-delete:hover { border-color: #8f2d28; background: rgba(143, 45, 40, 0.07); }
.quotation-payment-empty { padding: 15px; border: 1px dashed rgba(52, 55, 35, 0.2); color: rgba(52, 55, 35, 0.56); text-align: center; font-size: 0.74rem; }

.quotation-advance-block { border-bottom: 0; }
.quotation-advance-toggle-row { align-items: center; }
.quotation-advance-title { flex: 1 1 auto; }
.quotation-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; cursor: pointer; }
.quotation-switch input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); appearance: none !important; opacity: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none; }
.quotation-switch > span { position: relative; width: 38px; height: 21px; border-radius: 11px; background: rgba(52, 55, 35, 0.2); transition: background .2s; }
.quotation-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.quotation-switch input:checked + span { background: var(--color-palette-olive); }
.quotation-switch input:checked + span::after { transform: translateX(17px); }
.quotation-switch b { min-width: 48px; color: var(--color-palette-olive); font-size: 0.72rem; }
.quotation-finance-help { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; padding: 0; border: 1px solid rgba(125,40,38,.28); border-radius: 50%; background: #fff; color: #7d2826; font-size: .76rem; font-weight: 900; cursor: pointer; }
.quotation-finance-help:hover,.quotation-finance-help[aria-expanded="true"] { background: #7d2826; color: #fff; }
.quotation-finance-guide { display: grid; gap: 7px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(125,40,38,.18); border-left: 3px solid #7d2826; background: #f8f5ed; }
.quotation-finance-guide[hidden] { display: none; }
.quotation-finance-guide>strong { color: #343723; font-size: .8rem; }
.quotation-finance-guide>div { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; color: #68675f; font-size: .7rem; line-height: 1.45; }
.quotation-finance-guide>div>b { display: grid; width: 20px; height: 20px; place-items: center; background: #7d2826; color: #fff; font-size: .65rem; }
.quotation-finance-guide em { color: #343723; font-style: normal; font-weight: 800; }
.quotation-advance-fields { margin-top: 14px; padding-left: 12px; border-left: 3px solid #8c7853; }
.quotation-advance-fields.is-hidden { display: none; }
.quotation-advance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quotation-advance-grid .quotation-form-control { min-width: 0; height: 38px; padding: 6px 8px; font-size: 0.75rem; }
.quotation-recipient-field { position: relative; z-index: 4; }
.quotation-recipient-picker > input[type="search"] { width: 100%; min-height: 38px; height: 38px; padding-left: 34px !important; }
.quotation-recipient-picker .master-record-picker-icon { left: 10px; color: #6f7456; }
.quotation-recipient-picker .master-record-picker-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.quotation-recipient-results { right: auto; width: max(100%, 360px); max-width: min(420px, calc(100vw - 48px)); max-height: 258px; }
.quotation-recipient-results .master-record-picker-option { min-height: 48px; }
.quotation-recipient-results .master-record-picker-option-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.quotation-recipient-results .master-record-picker-option-meta b { color: #68715f; font-size: .68rem; }
.quotation-recipient-results .master-record-picker-option-meta small { max-width: 150px; overflow: hidden; color: #929487; font-size: .62rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.quotation-recipient-results .master-record-picker-empty small { display: inline-block; margin-top: 3px; color: #6f7456; }
.quotation-reference-upload { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.quotation-reference-upload>span { color: var(--color-palette-olive); font-size: .7rem; font-weight: 700; }
.quotation-reference-upload>input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.quotation-reference-upload>div { display: flex; min-width: 0; height: 38px; align-items: center; gap: 7px; padding: 4px 6px; border: 1px dashed rgba(112,123,109,.38); border-radius: 5px; background: #fff; }
.quotation-reference-upload button { min-height: 28px; padding: 4px 8px; border: 1px solid rgba(52,55,35,.18); border-radius: 4px; background: #f6f4ed; color: #343723; font: 700 .68rem "Sarabun",sans-serif; cursor: pointer; white-space: nowrap; }
.quotation-reference-upload button.remove { margin-left: auto; border-color: rgba(143,45,40,.25); color: #8f2d28; background: #fff; }
.quotation-reference-upload small { min-width: 0; overflow: hidden; color: #6f7068; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.quotation-advance-terms { margin-top: 10px; }
.quotation-advance-terms textarea { min-height: 68px; resize: vertical; }

.quotation-internal-detail { margin: 22px 0 28px; padding: 16px 0; border-top: 2px solid rgba(125, 40, 38, 0.2); border-bottom: 1px solid rgba(52, 55, 35, 0.12); }
.quotation-internal-validity { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(52, 55, 35, 0.1); font-size: 0.78rem; }
.quotation-internal-schedule,
.quotation-internal-advance { padding-top: 10px; border-top: 1px solid rgba(52, 55, 35, 0.1); }
.quotation-internal-schedule > strong,
.quotation-internal-advance > strong { display: block; margin-bottom: 6px; color: var(--color-palette-pewter); font-size: 0.8rem; }
.quotation-internal-schedule > div,
.quotation-internal-advance > div { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 7px 0; color: var(--color-palette-pewter); font-size: 0.75rem; }
.quotation-internal-schedule small,
.quotation-internal-advance small { color: rgba(52, 55, 35, 0.62); }

.dashboard-executive-panel { margin-top: 18px; overflow: hidden; }
.dashboard-section-header.tone-executive { align-items: center; min-height: 78px; background: #4f302b; color: #fff; }
.dashboard-section-header.tone-executive .dashboard-eyebrow { color: rgba(255,255,255,.68); }
.dashboard-section-header.tone-executive h4 { margin-top: 2px; }
.dashboard-section-header.tone-executive p { margin: 3px 0 0; color: rgba(255,255,255,.7); font-size: 0.7rem; }
.dashboard-section-header.tone-executive .dashboard-count { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.dashboard-executive-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
  background: #fbfaf6;
}
.dashboard-executive-summary > div { position: relative; min-width: 0; padding: 14px 16px 13px 20px; border-right: 1px solid rgba(52, 55, 35, 0.1); }
.dashboard-executive-summary > div::before { position: absolute; top: 14px; bottom: 14px; left: 8px; width: 3px; background: #8c7853; content: ""; }
.dashboard-executive-summary > div.tone-receivable::before { background: #5f7257; }
.dashboard-executive-summary > div.tone-return::before { background: #8c7853; }
.dashboard-executive-summary > div.tone-overdue::before { background: #9b332f; }
.dashboard-executive-summary > div.tone-upcoming::before { background: #b28a3c; }
.dashboard-executive-summary > div:last-child { border-right: 0; }
.dashboard-executive-summary small { display: block; color: rgba(52, 55, 35, 0.58); font-size: 0.68rem; font-weight: 700; }
.dashboard-executive-summary strong { display: block; margin-top: 3px; color: var(--color-palette-pewter); font-size: 1.18rem; line-height: 1.15; }
.dashboard-executive-summary strong span { font-size: 0.66rem; font-weight: 700; }
.dashboard-executive-summary em { display: block; margin-top: 4px; color: rgba(52,55,35,.55); font-size: .64rem; font-style: normal; }
.dashboard-money-ledgers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; background: rgba(140,120,83,.055); }
.dashboard-money-ledger { min-width: 0; overflow: hidden; border: 1px solid rgba(52,55,35,.14); background: #fff; }
.dashboard-money-ledger > header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 67px; padding: 11px 13px; border-bottom: 1px solid rgba(52,55,35,.12); background: #f7f7f2; }
.dashboard-money-ledger.tone-return > header { background: #f8f4eb; }
.dashboard-money-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(52,55,35,.16); background: #fff; color: #5f7257; }
.dashboard-money-ledger.tone-return .dashboard-money-icon { color: #7d2826; }
.dashboard-money-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-money-ledger > header div { min-width: 0; }
.dashboard-money-ledger > header div small { display: block; overflow: hidden; color: rgba(52,55,35,.5); font-size: .57rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-money-ledger > header h5 { margin: 2px 0 0; color: var(--color-palette-pewter); font-size: .8rem; }
.dashboard-money-ledger > header > strong { color: #4f302b; font-size: .92rem; white-space: nowrap; }
.dashboard-money-ledger > header > strong small { color: rgba(79,48,43,.62); font-size: .58rem; }
.dashboard-executive-list { display: flex; flex-direction: column; }
.dashboard-executive-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(104px, auto) 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(52, 55, 35, 0.1);
  border-left: 4px solid transparent;
  background: #fff;
  color: var(--color-palette-pewter);
  text-align: left;
  cursor: pointer;
}
.dashboard-executive-row:last-child { border-bottom: 0; }
.dashboard-executive-row:hover { background: rgba(52, 55, 35, 0.035); }
.dashboard-executive-row.tone-danger { border-left-color: #9b332f; }
.dashboard-executive-row.tone-urgent { border-left-color: #c7653d; }
.dashboard-executive-row.tone-warning { border-left-color: #b28a3c; }
.dashboard-executive-row.tone-notice { border-left-color: #707b6d; }
.dashboard-executive-copy { min-width: 0; }
.dashboard-executive-copy strong { display: block; overflow: hidden; color: var(--color-palette-pewter); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-executive-copy small { display: block; overflow: hidden; margin-top: 2px; color: rgba(52, 55, 35, 0.6); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-executive-row > b { color: #7d2826; font-size: 0.8rem; white-space: nowrap; }
.dashboard-executive-row > b small { display: inline; font-size: .56rem; }
.dashboard-executive-date { padding: 5px 7px; border: 1px solid rgba(52, 55, 35, 0.12); color: var(--color-palette-olive); background: rgba(52, 55, 35, 0.035); font-size: 0.64rem; font-weight: 700; text-align: center; white-space: nowrap; }
.dashboard-executive-row.tone-danger .dashboard-executive-date { border-color: rgba(155,51,47,.25); color: #8d2f2c; background: rgba(155,51,47,.06); }
.dashboard-executive-row.tone-urgent .dashboard-executive-date { border-color: rgba(199,101,61,.25); color: #9a4d2d; background: rgba(199,101,61,.06); }
.dashboard-money-empty { display: grid; place-items: center; min-height: 116px; padding: 22px; text-align: center; }
.dashboard-money-empty strong { color: var(--color-palette-pewter); font-size: .78rem; }
.dashboard-money-empty small { margin-top: 4px; color: rgba(52,55,35,.52); font-size: .66rem; }

@media (max-width: 1100px) {
  .quotation-payment-row { grid-template-columns:28px repeat(4,minmax(0,1fr)) 34px;grid-template-areas:"number detail detail detail detail delete" ". mode amount trigger trigger ." ". condition condition status status ."; }
  .quotation-advance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-executive-summary { grid-template-columns: 1fr 1fr; }
  .dashboard-executive-summary > div:nth-child(2) { border-right: 0; }
  .dashboard-executive-summary > div:nth-child(-n+2) { border-bottom: 1px solid rgba(52, 55, 35, 0.1); }
  .dashboard-money-ledgers { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .quotation-internal-finance-header,
  .quotation-finance-block-heading,
  .quotation-advance-toggle-row { align-items: stretch; flex-direction: column; }
  .quotation-internal-badge { align-self: flex-start; }
  .quotation-validity-row { grid-template-columns: 1fr; gap: 5px; }
  .quotation-validity-row p { margin: 0; }
  .quotation-finance-add { align-self: flex-start; }
  .quotation-payment-row { grid-template-columns:26px minmax(0,1fr) 34px;grid-template-areas:"number detail delete" ". mode ." ". amount ." ". trigger ." ". condition ." ". status ."; }
  .quotation-payment-allocation-summary{grid-template-columns:1fr}
  .quotation-advance-grid { grid-template-columns: 1fr; }
  .quotation-recipient-results { width: 100%; max-width: 100%; }
  .quotation-internal-schedule > div,
  .quotation-internal-advance > div { grid-template-columns: 1fr auto; }
  .quotation-internal-schedule small,
  .quotation-internal-advance small { grid-column: 1 / -1; }
  .dashboard-section-header.tone-executive { align-items: flex-start; }
  .dashboard-executive-summary { grid-template-columns: 1fr; }
  .dashboard-executive-summary > div { border-right: 0; border-bottom: 1px solid rgba(52,55,35,.1); }
  .dashboard-executive-summary > div:last-child { border-bottom: 0; }
  .dashboard-money-ledgers { padding: 10px; }
  .dashboard-money-ledger > header { grid-template-columns: 32px minmax(0,1fr); }
  .dashboard-money-ledger > header > strong { grid-column: 2; }
  .dashboard-executive-row { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px; }
  .dashboard-executive-row > b,
  .dashboard-executive-date { grid-column: 1; justify-self: start; }
  .dashboard-executive-row .dashboard-row-arrow { grid-column: 2; grid-row: 1; }
}

.quotation-summary-box {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-bottom: 28px;
  align-items: start;
}

.baht-text-container {
  background-color: rgba(112, 123, 109, 0.08);
  border: 1px dashed var(--color-palette-olive);
  border-radius: var(--border-radius-md);
  padding: 14px 16px;
  font-size: 0.95rem;
  color: var(--color-palette-olive);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  gap: 4px;
}

.summary-financial-list {
  background-color: rgba(218, 194, 178, 0.12);
  border: 1px solid rgba(218, 194, 178, 0.3);
  border-radius: var(--border-radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-financial-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-palette-olive);
}

.summary-financial-row.grand-total {
  border-top: 1px solid rgba(112, 123, 109, 0.18);
  padding-top: 12px;
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-palette-pewter);
}

.quotation-actions-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(218, 194, 178, 0.3);
  padding-top: 24px;
}

.actions-left {
  display: flex;
  gap: 12px;
}

.actions-right {
  display: flex;
  gap: 12px;
  position: relative;
}

/* Edit Form Specifics */
.quotation-edit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quotation-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quotation-form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-palette-olive);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quotation-form-control {
  background-color: #FFFFFF;
  border: 1px solid rgba(112, 123, 109, 0.3);
  border-radius: var(--border-radius-sm);
  color: var(--color-palette-pewter);
  padding: 10px 14px;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  width: 100%;
}

.quotation-form-control:focus {
  outline: none;
  border-color: var(--color-palette-olive);
  box-shadow: 0 0 8px rgba(112, 123, 109, 0.2);
  background-color: #FFFFFF;
}

.quotation-radio-group {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 8px 0;
}

.quotation-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-palette-pewter);
  cursor: pointer;
}

.quotation-radio-option input[type="radio"] {
  accent-color: var(--color-palette-olive);
  width: 16px;
  height: 16px;
}

.scale-image-upload-box {
  border: 2px dashed rgba(112, 123, 109, 0.3);
  border-radius: var(--border-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: rgba(218, 194, 178, 0.1);
  min-height: 250px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  color: var(--color-palette-olive);
}

.scale-image-upload-box:hover {
  border-color: var(--color-palette-olive);
  background-color: rgba(218, 194, 178, 0.2);
}

.scale-image-preview-container {
  width: 100%;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid rgba(112, 123, 109, 0.3);
  position: relative;
}

.scale-image-preview {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
}

/* Print Dropdown Styling */
.print-dropdown {
  position: relative;
  display: inline-block;
}

.print-dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--color-palette-pearl);
  border: 1px solid rgba(112, 123, 109, 0.3);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  margin-bottom: 8px;
  z-index: 100;
  display: none;
  min-width: 160px;
}

.print-dropdown-menu.show {
  display: block;
}

.print-dropdown-item {
  padding: 10px 16px;
  color: var(--color-palette-pewter);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.print-dropdown-item:hover {
  background-color: rgba(112, 123, 109, 0.1);
}

/* Edit items row actions */
.quotation-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  background-color: rgba(112, 123, 109, 0.1);
  color: var(--color-palette-olive);
}

.quotation-btn-icon:hover {
  background-color: rgba(112, 123, 109, 0.2);
  color: var(--color-palette-pewter);
}

.quotation-btn-icon.delete:hover {
  background-color: rgba(191, 137, 127, 0.2);
  color: var(--color-palette-salmon);
}

.table-input {
  background-color: transparent !important;
  border: 1px solid rgba(112, 123, 109, 0.2) !important;
  border-radius: 4px;
  padding: 6px 10px !important;
  color: var(--color-palette-pewter) !important;
  font-size: 0.85rem;
  width: 100%;
}

.table-input:focus {
  border-color: var(--color-palette-olive) !important;
  outline: none;
}

/* Button overrides for light theme cards */
.quotation-detail-card .btn-secondary,
.quotation-edit-card .btn-secondary {
  background-color: rgba(58, 61, 58, 0.08) !important;
  color: var(--color-palette-pewter) !important;
  border: 1px solid rgba(112, 123, 109, 0.3) !important;
}

.quotation-detail-card .btn-secondary:hover,
.quotation-edit-card .btn-secondary:hover {
  background-color: rgba(58, 61, 58, 0.15) !important;
  color: var(--color-palette-pewter) !important;
}

/* Create Tax Invoice Table Layout Fixes */
.invoice-create-table {
  width: 100% !important;
  table-layout: fixed !important;
}
.invoice-create-table th {
  padding: 10px 4px !important;
  text-align: center !important;
  font-size: 0.8rem !important;
}
.invoice-create-table td {
  padding: 6px 4px !important;
  font-size: 0.85rem !important;
  vertical-align: middle !important;
}
.invoice-create-table input.filter-select {
  padding: 6px 8px !important;
  height: 32px !important;
  min-width: 0 !important;
  width: 100% !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-sm) !important;
  box-sizing: border-box !important;
}
.invoice-create-table input[type=number]::-webkit-outer-spin-button,
.invoice-create-table input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.invoice-create-table input[type=number] {
  -moz-appearance: textfield !important;
}

/* User Management Role Badges & Animations */
.badge-admin {
  background-color: rgba(125, 40, 38, 0.08) !important;
  color: var(--color-coral) !important;
  border: 1px solid rgba(125, 40, 38, 0.2) !important;
}
.badge-sales {
  background-color: rgba(137, 136, 97, 0.08) !important;
  color: var(--color-leaf-dark) !important;
  border: 1px solid rgba(137, 136, 97, 0.2) !important;
}
.badge-artisan {
  background-color: rgba(52, 55, 35, 0.05) !important;
  color: var(--color-juniper) !important;
  border: 1px solid rgba(52, 55, 35, 0.15) !important;
}
.badge-spun {
  background-color: rgba(94, 38, 125, 0.08) !important;
  color: #5e267d !important;
  border: 1px solid rgba(94, 38, 125, 0.25) !important;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Split row layout for alerts and KPI cards */
.dashboard-top-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.document-screen-identity {
  display: grid;
  grid-template-columns: 1.05fr 1.4fr 1.15fr 1.25fr 1fr;
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 4px solid #7d2826;
  border-radius: 6px;
  background: #fff;
}

.document-screen-identity__heading,
.document-screen-identity__item {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid rgba(52, 55, 35, 0.12);
}

.document-screen-identity__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(52, 55, 35, 0.055);
}

.document-screen-identity__heading span,
.document-screen-identity__item span {
  display: block;
  margin-bottom: 4px;
  color: #707b6d;
  font-size: 0.68rem;
  font-weight: 800;
}

.document-screen-identity__heading strong,
.document-screen-identity__item strong {
  display: block;
  color: #343723;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-screen-identity__item:last-child {
  border-right: 0;
}

.document-screen-identity__empty {
  grid-column: span 4;
  align-self: center;
  padding: 12px 14px;
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.82rem;
}

.casting-linked-work {
  display: grid;
  gap: 4px;
}

.casting-linked-work__creator {
  color: #68715f;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .document-screen-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-screen-identity__heading {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid rgba(52, 55, 35, 0.12);
  }

  .document-screen-identity__item:nth-last-child(-n + 2) {
    border-top: 1px solid rgba(52, 55, 35, 0.12);
  }

  .document-screen-identity__empty {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .document-screen-identity {
    grid-template-columns: 1fr;
  }

  .document-screen-identity__item {
    border-right: 0;
    border-top: 1px solid rgba(52, 55, 35, 0.12);
  }
}

/* Dashboard operations layout: clear sections with the project workspace palette. */
.dashboard-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-left: 5px solid #7d2826;
  border-radius: 6px;
}

.dashboard-command-bar h3,
.dashboard-section-header h4 {
  margin: 0;
  letter-spacing: 0;
}

.dashboard-command-bar h3 {
  color: #343723;
  font-size: 1.15rem;
  line-height: 1.25;
}

.dashboard-command-bar p {
  margin: 3px 0 0;
  color: #707b6d;
  font-size: 0.8rem;
}

.dashboard-eyebrow {
  display: block;
  margin-bottom: 2px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0;
  opacity: 0.72;
}

.dashboard-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 6px;
  background: #f7f2e0;
  color: #343723;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-date-chip svg,
.dashboard-kpi-icon svg,
.dashboard-document-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dashboard-kpi-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 74px;
  padding: 12px 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 6px;
  color: #343723;
  cursor: pointer;
  text-align: left;
}

.dashboard-kpi-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--kpi-tone);
}

.dashboard-kpi-tile:hover {
  border-color: var(--kpi-tone);
  background: #faf8f2;
}

.dashboard-kpi-tile.tone-total { --kpi-tone: #4d5b68; }
.dashboard-kpi-tile.tone-progress { --kpi-tone: #7f9298; }
.dashboard-kpi-tile.tone-waiting { --kpi-tone: #b7bcae; }
.dashboard-kpi-tile.tone-overdue { --kpi-tone: #7d2826; }
.dashboard-kpi-tile.tone-shipped { --kpi-tone: #726f66; }

.dashboard-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 6px;
  color: var(--kpi-tone);
  background: color-mix(in srgb, var(--kpi-tone) 12%, white);
}

.dashboard-kpi-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-kpi-copy strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  line-height: 1;
}

.dashboard-kpi-copy small {
  margin-top: 4px;
  color: #707b6d;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-section {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 6px;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 12px 16px;
}

.dashboard-section-header h4 {
  font-size: 0.98rem;
  line-height: 1.25;
}

.dashboard-section-header.tone-slate {
  background: #4d5b68;
  color: #fff;
}

.dashboard-section-header.tone-charcoal {
  background: #6f6b62;
  color: #fff;
}

.dashboard-section-header.tone-juniper {
  background: #343723;
  color: #fff;
}

.dashboard-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
}

.dashboard-section-body {
  padding: 8px 12px 12px;
}

.dashboard-document-list,
.dashboard-attention-list {
  height: 244px;
  overflow-y: auto;
}

.dashboard-document-row,
.dashboard-attention-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(52, 55, 35, 0.1);
  color: #343723;
  cursor: pointer;
  text-align: left;
}

.dashboard-document-row {
  gap: 10px;
  min-height: 46px;
  padding: 7px 4px;
}

.dashboard-document-row:hover,
.dashboard-attention-row:hover {
  background: #faf8f2;
}

.dashboard-document-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 6px;
}

.dashboard-document-icon.tone-order { color: #4d5b68; background: #e9edf0; }
.dashboard-document-icon.tone-internal { color: #6f7f83; background: #edf1ef; }
.dashboard-document-icon.tone-kiln { color: #7d2826; background: #f5e9e7; }
.dashboard-document-icon.tone-quotation { color: #7d2826; background: #f3e4df; }

.dashboard-document-copy,
.dashboard-attention-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.dashboard-document-copy strong,
.dashboard-attention-copy strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-document-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.dashboard-document-heading strong {
  flex: 1;
  min-width: 0;
}

.dashboard-document-type {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.25;
}

.dashboard-document-type.tone-order { color: #3f4c57; background: #e9edf0; }
.dashboard-document-type.tone-internal { color: #526267; background: #e7ece9; }
.dashboard-document-type.tone-kiln { color: #7d2826; background: #f3e1de; }
.dashboard-document-type.tone-quotation { color: #7d2826; background: #f5e7df; }

.dashboard-document-package-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid #ccd4cf;
  border-radius: 999px;
  color: #526267;
  background: #f5f7f5;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.dashboard-document-copy small,
.dashboard-attention-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: #707b6d;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-document-copy small b { color: #7d2826; }
.dashboard-row-arrow { color: #898861; font-size: 1.2rem; }

/* Internal work-order detail is a white document surface, so it needs dark text tokens. */
.internal-work-order-detail {
  --color-text-light: #343723 !important;
  --color-text-muted-light: #5b6045 !important;
  --color-text-dark: #343723 !important;
  --color-text-muted-dark: #5b6045 !important;
  color: #343723;
  background: #fff;
  border: 0;
  border-top: 1px solid rgba(52, 55, 35, 0.08);
  text-align: left;
}

.internal-work-order-detail .btn-secondary {
  background-color: #f7f5ef !important;
  color: #343723 !important;
  border-color: rgba(52, 55, 35, 0.28) !important;
}

.internal-work-order-detail .btn-secondary:hover {
  background-color: #eeeadd !important;
  border-color: rgba(52, 55, 35, 0.42) !important;
}

.internal-work-order-detail .btn-primary {
  color: #faf8f2 !important;
  font-weight: 700;
}

.internal-work-order-detail .badge-status.pending {
  background-color: #f5eed2 !important;
  color: #665000 !important;
  border-color: #d8c87a !important;
}

.dashboard-attention-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
  background: #f7f2e0;
}

.dashboard-attention-summary button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(52, 55, 35, 0.12);
  color: #343723;
  cursor: pointer;
}

.dashboard-attention-summary button:last-child { border-right: 0; }
.dashboard-attention-summary button:hover { background: #efe9d7; }
.dashboard-attention-summary strong { font-size: 1.15rem; }
.dashboard-attention-summary span { font-size: 0.66rem; color: #707b6d; }

.dashboard-attention-list {
  height: 184px;
}

.dashboard-attention-row {
  gap: 9px;
  min-height: 44px;
  padding: 6px 4px;
}

.dashboard-priority-dot {
  width: 8px;
  height: 28px;
  flex: 0 0 8px;
  border-radius: 4px;
  background: #898861;
}

.dashboard-priority-dot.is-overdue { background: #7d2826; }
.dashboard-progress-compact { display: flex; align-items: center; gap: 6px; width: 76px; flex: 0 0 76px; }
.dashboard-progress-compact i { width: 46px; height: 5px; overflow: hidden; background: #e5e3dc; border-radius: 3px; }
.dashboard-progress-compact b { display: block; height: 100%; background: #898861; }
.dashboard-progress-compact small { font-size: 0.64rem; color: #707b6d; }

.dashboard-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
  color: #707b6d;
  font-size: 0.76rem;
  text-align: center;
}

.dashboard-pipeline-panel { margin-bottom: 16px; }
.dashboard-header-note { font-size: 0.7rem; opacity: 0.72; }
.dashboard-pipeline-scroll { padding: 12px 12px 9px; scrollbar-color: #898861 #e5e1d6; scrollbar-width: auto; }
.dashboard-pipeline-scroll::-webkit-scrollbar { height: 10px; }
.dashboard-pipeline-scroll::-webkit-scrollbar-track { background: #e5e1d6; border-radius: 5px; }
.dashboard-pipeline-scroll::-webkit-scrollbar-thumb { background: #898861; border-radius: 5px; }
.dashboard-pipeline-flow { min-width: max-content; gap: 10px; }

.dashboard-stage {
  width: 224px;
  min-width: 224px;
  height: 276px;
  background: #f8f7f2;
  border-color: color-mix(in srgb, var(--stage-tone) 42%, white);
  border-radius: 6px;
}

.dashboard-stage .stage-card-header {
  min-height: 48px;
  padding: 9px 11px;
  background: var(--stage-tone);
  color: var(--stage-text, #343723);
  border-bottom: 0;
}

.dashboard-stage .stage-name { flex: 1; color: inherit; }
.dashboard-stage .stage-num { background: rgba(255, 255, 255, 0.32); color: inherit; }
.dashboard-stage .stage-count-badge { background: rgba(255, 255, 255, 0.32); color: inherit; }
.dashboard-stage .stage-count-badge.has-work { background: rgba(52, 55, 35, 0.2); color: inherit; }
.dashboard-stage .stage-card-body { padding: 9px; }
.dashboard-stage .pipeline-order-item { width: 100%; text-align: left; }
.tone-stage-1 { --stage-tone: #4d5b68; --stage-text: #fff; }
.tone-stage-2 { --stage-tone: #7f9298; --stage-text: #fff; }
.tone-stage-3 { --stage-tone: #a6b9bd; --stage-text: #25323a; }
.tone-stage-4 { --stage-tone: #b7bcae; --stage-text: #343723; }
.tone-stage-5 { --stage-tone: #cbcab8; --stage-text: #343723; }
.tone-stage-6 { --stage-tone: #d9ceb0; --stage-text: #343723; }
.tone-stage-7 { --stage-tone: #aaa496; --stage-text: #343723; }
.tone-stage-8 { --stage-tone: #8b877e; --stage-text: #fff; }
.tone-stage-9 { --stage-tone: #6f6b62; --stage-text: #fff; }
.tone-stage-10 { --stage-tone: #5f5b53; --stage-text: #fff; }

@media (max-width: 1024px) {
  .dashboard-kpi-strip { grid-template-columns: repeat(5, minmax(142px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
  .dashboard-focus-grid { grid-template-columns: 1fr; }
  .dashboard-document-list { height: 220px; }
  .dashboard-attention-list { height: 176px; }
}

@media (max-width: 680px) {
  .dashboard-command-bar { align-items: flex-start; flex-direction: column; }
  .dashboard-date-chip { width: 100%; justify-content: center; }
  .dashboard-section-header { min-height: 58px; }
  .dashboard-attention-summary span { white-space: normal; }
}

@media (max-width: 1024px) {
  .dashboard-top-split-row {
    grid-template-columns: 1fr !important;
  }
}

/* Quotation wizard: keep the existing form controls while reducing repeat entry. */
.quotation-wizard {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quotation-wizard-summary {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.8fr 0.9fr;
  border: 1px solid rgba(52, 55, 35, 0.16);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.quotation-wizard-summary > div {
  min-width: 0;
  padding: 12px 16px;
  border-right: 1px solid rgba(52, 55, 35, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quotation-wizard-summary > div:last-child { border-right: 0; }
.quotation-wizard-summary small,
.quotation-review-grid small {
  color: var(--color-palette-olive);
  font-size: 0.72rem;
  font-weight: 700;
}
.quotation-wizard-summary strong {
  color: var(--color-palette-pewter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-wizard-summary span {
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.72rem;
}
.quotation-wizard-summary .quotation-wizard-total {
  background: var(--color-palette-juniper, #343723);
}
.quotation-wizard-summary .quotation-wizard-total small,
.quotation-wizard-summary .quotation-wizard-total strong,
.quotation-wizard-summary .quotation-wizard-total span { color: #fff; }

.quotation-wizard-navigation {
  overflow: hidden;
  border: 1px solid var(--color-palette-juniper, #343723);
  border-radius: 8px;
  background: #f7f5ed;
  box-shadow: 0 5px 14px rgba(52, 55, 35, 0.1);
}
.quotation-wizard-navigation-head {
  min-height: 42px;
  padding: 8px 14px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--color-palette-juniper, #343723);
  color: #fff;
}
.quotation-wizard-navigation-head span {
  color: rgba(255, 255, 255, 0.68);
  font: 800 0.64rem "Outfit", sans-serif;
  letter-spacing: 0;
}
.quotation-wizard-navigation-head strong { font-size: 0.84rem; }
.quotation-wizard-navigation-head small { color: rgba(255, 255, 255, 0.72); font-size: 0.68rem; }
.quotation-wizard-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #f7f5ed;
}
.quotation-wizard-nav::before {
  content: "";
  position: absolute;
  top: 25px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: rgba(52, 55, 35, 0.2);
}

.quotation-wizard-tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 82px;
  padding: 10px 8px 9px;
  border: 0;
  border-right: 1px solid rgba(52, 55, 35, 0.12);
  background: transparent;
  color: var(--color-palette-pewter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;
  text-align: center;
}
.quotation-wizard-tab:last-child { border-right: 0; }
.quotation-wizard-tab:hover { background: rgba(137, 136, 97, 0.08); }
.quotation-wizard-tab.is-active {
  background: var(--color-coral, #7D2826);
  color: #fff;
}
.quotation-wizard-tab.is-complete .quotation-wizard-number {
  background: var(--color-palette-leaf, #898861);
  border-color: var(--color-palette-leaf, #898861);
  color: #fff;
}
.quotation-wizard-tab strong,
.quotation-wizard-tab small { display: block; }
.quotation-wizard-tab strong { font-size: 0.78rem; }
.quotation-wizard-tab small { margin-top: 2px; font-size: 0.67rem; color: rgba(52, 55, 35, 0.58); }
.quotation-wizard-tab.is-active small { color: rgba(255, 255, 255, 0.7); }
.quotation-wizard-number {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid rgba(52, 55, 35, 0.22);
  border-radius: 50%;
  background: #f7f5ed;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.76rem;
}
.quotation-wizard-tab.is-active .quotation-wizard-number {
  background: #fff;
  border-color: #fff;
  color: var(--color-coral, #7D2826);
}

.quotation-wizard-panel {
  display: none;
  min-height: 430px;
  padding: 22px;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 8px;
  background: #fff;
}
.quotation-wizard-panel.is-active { display: block; }
.quotation-step-heading {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.12);
}
.quotation-step-heading > div:first-child > span {
  color: var(--color-coral, #7D2826);
  font-size: 0.72rem;
  font-weight: 800;
}
.quotation-step-heading h4 {
  margin: 2px 0 3px;
  color: var(--color-palette-pewter);
  font-size: 1.12rem;
}
.quotation-step-heading p {
  margin: 0;
  color: rgba(52, 55, 35, 0.62);
  font-size: 0.82rem;
}
.quotation-step-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.quotation-wizard-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}
.quotation-project-column,
.quotation-customer-column,
.quotation-price-column,
.quotation-terms-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.quotation-reuse-box {
  width: min(430px, 48%);
  padding: 10px 12px;
  border: 1px solid rgba(137, 136, 97, 0.32);
  background: rgba(137, 136, 97, 0.07);
  border-radius: 6px;
}
.quotation-reuse-box label { display: block; margin-bottom: 5px; font-size: 0.75rem; font-weight: 800; }
.quotation-reuse-box > div { display: flex; gap: 8px; }
.quotation-reuse-box .quotation-form-control { min-width: 0; height: 38px; padding: 6px 10px; }
.quotation-reuse-box .btn { flex: 0 0 auto; padding: 7px 12px; }
.quotation-reuse-box small { display: block; margin-top: 5px; color: rgba(52, 55, 35, 0.6); font-size: 0.68rem; }

.quotation-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quotation-review-grid button {
  min-height: 110px;
  padding: 16px;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 7px;
  background: #fff;
  color: var(--color-palette-pewter);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.quotation-review-grid button:hover { border-color: var(--color-coral, #7D2826); background: rgba(125, 40, 38, 0.03); }
.quotation-review-grid strong { font-size: 1rem; }
.quotation-review-grid span { color: rgba(52, 55, 35, 0.64); font-size: 0.78rem; }

.quotation-wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -4px 16px rgba(35, 37, 23, 0.08);
}
.quotation-wizard-actions-right { display: flex; justify-content: flex-end; gap: 9px; }
.quotation-wizard-actions .btn { min-height: 40px; padding: 8px 16px; }
.quotation-wizard-actions .btn-primary { background: var(--color-coral, #7D2826) !important; border-color: var(--color-coral-dark, #621E1C) !important; }
.quotation-save-draft { color: var(--color-coral, #7D2826) !important; border-color: rgba(125, 40, 38, 0.35) !important; background: rgba(125, 40, 38, 0.04) !important; }

.quotation-wizard-panel > div[style*="margin-top: 24px"] { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.quotation-wizard-panel .quotation-table-wrapper { margin-bottom: 12px; }

.quotation-operation-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}
.quotation-operation-meta-grid .quotation-form-group,
.quotation-operation-material-grid .quotation-form-group {
  min-width: 0;
  margin-bottom: 0;
}
.quotation-operation-meta-grid .quotation-form-group > label,
.quotation-operation-material-grid .quotation-form-group > label,
.quotation-material-label-row label {
  min-height: 34px;
  display: flex;
  align-items: flex-end;
  line-height: 1.3;
}
.quotation-operation-meta-grid .quotation-form-control,
.quotation-operation-material-grid > .quotation-form-group > .quotation-form-control {
  min-height: 44px;
}
.quotation-operation-material-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.quotation-material-label-row,
.quote-material-select-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px 40px;
  gap: 12px !important;
  align-items: start !important;
  width: 100%;
}
.quotation-material-label-row { margin-bottom: 6px; }
.quotation-material-label-row label { font-weight: 700; }
.quotation-material-label-row span { width: 40px; }
.quotation-material-label-row label,
.quotation-operation-material-grid > .quotation-form-group > label { min-height: 54px; }
.quote-material-select-row .quote-material-qty { width: 112px !important; }
.quote-finish-field{display:flex;min-width:0;flex-direction:column;gap:6px}
.quote-patina-color-panel {
  grid-column: 1 / 4;
  border-left: 3px solid #7d2826;
  background: rgba(255, 255, 255, 0.62);
  padding: 10px 12px;
  margin-top: -2px;
}
.quote-patina-color-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.quote-patina-color-heading > div { display: flex; flex-direction: column; gap: 2px; }
.quote-patina-color-heading strong { font-size: 0.82rem; color: #4f302b; }
.quote-patina-color-heading small { font-size: 0.7rem; color: rgba(52, 55, 35, 0.64); }
.quote-patina-color-heading .btn { min-height: 30px; padding: 4px 9px; font-size: 0.72rem; }
.quote-patina-color-list { display: flex; flex-direction: column; gap: 6px; }
.quote-patina-color-row {
  display: grid;
  grid-template-columns: 18px minmax(180px, 1fr) 96px 32px;
  align-items: start;
  gap: 8px;
}
.quote-patina-color-row > div { display: flex; flex-direction: column; gap: 5px; }
.quote-patina-color-row .quotation-form-control { min-height: 34px; height: 34px; padding: 5px 8px; font-size: 0.78rem; }
.quote-patina-swatch,
.quotation-finish-color-summary i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--finish-color, #d8d6cc);
  border: 1px solid rgba(52, 55, 35, 0.25);
  display: inline-block;
  flex: 0 0 auto;
}
.quote-patina-swatch { width: 16px; height: 16px; margin-top: 9px; }
.quote-patina-color-remove {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(143, 45, 40, 0.3);
  border-radius: 6px;
  background: #fff;
  color: #8f2d28;
  cursor: pointer;
}
.quote-patina-color-remove:hover { border-color: #8f2d28; background: rgba(143, 45, 40, 0.07); }
.quote-patina-color-balance { margin-top: 7px; font-size: 0.72rem; font-weight: 700; text-align: right; }
.quote-patina-color-balance.is-complete { color: #39714f; }
.quote-patina-color-balance.is-incomplete { color: #9b332f; }
.quote-material-select-row.has-patina-color-error .quote-patina-color-panel { outline: 2px solid rgba(155, 51, 47, 0.45); }
.quotation-finish-color-summary { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 5px; }
.quotation-finish-color-summary span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; background: rgba(52, 55, 35, 0.06); font-size: 0.68rem; font-weight: 500; }
.quotation-finish-color-summary.is-compact { justify-content: flex-start; gap: 2px 6px; }
.quotation-finish-color-summary.is-compact span { padding: 0; background: transparent; font-size: 7px; }

@media (max-width: 1024px) {
  .quotation-wizard-summary { grid-template-columns: 1fr 1fr; }
  .quotation-wizard-summary > div:nth-child(2) { border-right: 0; }
  .quotation-wizard-summary > div:nth-child(-n+2) { border-bottom: 1px solid rgba(52, 55, 35, 0.12); }
  .quotation-wizard-nav { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; }
  .quotation-wizard-tab small { display: none; }
  .quotation-wizard-panel { padding: 18px; }
  .quotation-wizard-two-column { gap: 18px; }
  .quotation-step-heading-row { flex-direction: column; }
  .quotation-reuse-box { width: 100%; }
  .quotation-operation-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotation-operation-meta-grid .quotation-form-group:last-child { grid-column: 1 / -1; }
  .quotation-operation-material-grid { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr); }
}

@media (max-width: 700px) {
  .quotation-wizard-navigation-head { grid-template-columns: 1fr auto; }
  .quotation-wizard-navigation-head span { display: none; }
  .quotation-wizard-summary,
  .quotation-wizard-two-column,
  .quotation-review-grid { grid-template-columns: 1fr; }
  .quotation-wizard-summary > div { border-right: 0; border-bottom: 1px solid rgba(52, 55, 35, 0.12); }
  .quotation-wizard-summary > div:last-child { border-bottom: 0; }
  .quotation-wizard-tab { min-width: 62px; justify-content: center; }
  .quotation-wizard-tab > span:last-child { display: none; }
  .quotation-wizard-panel { min-height: 0; padding: 14px; }
  .quotation-wizard-actions { align-items: stretch; }
  .quotation-wizard-actions-right { flex: 1; flex-wrap: wrap; }
  .quotation-wizard-actions .btn { flex: 1 1 auto; }
  #quotation-wizard-cancel { display: none; }
  .quotation-operation-meta-grid,
  .quotation-operation-material-grid { grid-template-columns: 1fr; }
  .quotation-material-label-row{display:none!important}
  .quote-material-select-row{grid-template-columns:minmax(0,1fr) 88px 40px}
  .quote-material-select-row>div:first-child{grid-column:1/-1}
  .quote-material-select-row .quote-material-qty{width:88px!important}
  .quote-finish-field{grid-column:1/-1}
  .quote-patina-color-panel{grid-column:1/-1}
  .quote-patina-color-heading{align-items:flex-start}
  .quote-patina-color-row{grid-template-columns:18px minmax(0,1fr) 72px 32px}
}

/* ================================================================
   PTK ONE Planning Center
   ================================================================ */
.planning-center {
  width: 100%;
  color: var(--color-juniper);
  font-family: 'Sarabun', sans-serif;
}

.planning-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-radius: 6px 6px 0 0;
  background: var(--color-palette-pearl);
}
.planning-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(var(--planning-tab-count, 3), minmax(160px, 1fr));
  gap: 0;
  overflow-x: auto;
  min-width: 0;
}

.planning-workspace-tab {
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  background: transparent;
  color: var(--color-juniper);
  font-family: 'Sarabun', sans-serif;
  font-size: 0.87rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.planning-workspace-tab:last-child { border-right: 0; }
.planning-workspace-tab:hover { background: rgba(var(--color-leaf-rgb), 0.09); }
.planning-workspace-tab.active {
  background: var(--color-juniper);
  color: var(--color-palette-pearl);
}
.planning-workspace-tab.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--color-coral);
}
.planning-workspace-tab svg,
.planning-print-button svg,
.planning-search svg,
.planning-placeholder-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.planning-workspace-tab small {
  padding: 2px 5px;
  background: rgba(var(--color-juniper-rgb), 0.07);
  color: var(--color-leaf-dark);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  border-radius: 4px;
  font-size: 0.62rem;
  line-height: 1;
}
.planning-workspace-tab.active small {
  color: var(--color-candle);
  border-color: rgba(var(--color-candle-rgb), 0.25);
  background: rgba(var(--color-candle-rgb), 0.08);
}

.planning-workspace-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-left: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: rgba(var(--color-leaf-rgb), 0.05);
}
.planning-workspace-actions button {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.22);
  border-radius: 4px;
  background: #fff;
  color: var(--color-juniper);
  font: 700 0.78rem 'Sarabun', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.planning-workspace-actions button:hover,
.planning-workspace-actions button.active { border-color: var(--color-leaf-dark); background: var(--color-leaf-dark); color: #fff; }
.planning-workspace-actions button.is-urgent { border-color: rgba(var(--color-coral-rgb), 0.4); color: var(--color-coral-dark); }
.planning-workspace-actions button.is-urgent:hover,
.planning-workspace-actions button.is-urgent.active { background: var(--color-coral); color: #fff; }
.planning-workspace-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.planning-queue-modebar {
  min-height: 62px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-top: 0;
  background: var(--color-candle-darker);
}
.planning-queue-modebar-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-juniper);
  font: 700 0.78rem 'Sarabun', sans-serif;
}
.planning-queue-modebar-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-radius: 4px;
  background: rgba(var(--color-leaf-rgb), 0.09);
  color: var(--color-leaf-dark);
}
.planning-queue-modebar-icon svg,
.planning-queue-switch button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.planning-queue-modebar .planning-segmented {
  height: 42px;
  padding: 3px;
  gap: 3px;
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(var(--color-juniper-rgb), 0.2);
}
.planning-queue-switch button {
  min-width: 128px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
}
.planning-queue-switch button:hover:not(.active) {
  border-color: rgba(var(--color-leaf-rgb), 0.22);
  background: rgba(var(--color-leaf-rgb), 0.08);
}
.planning-queue-switch button.active {
  box-shadow: inset 0 -3px 0 var(--color-coral);
}

.planning-filter-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--color-candle-darker);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-top: 0;
}
.planning-filter-main,
.planning-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.planning-filter-main { flex: 0 1 auto; }
.planning-filter-actions { flex: 1 1 320px; justify-content: flex-end; }
.planning-segmented {
  height: 44px;
  padding: 3px;
  display: flex;
  align-items: stretch;
  background: var(--color-palette-pearl);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  border-radius: 6px;
  box-sizing: border-box;
}
.planning-segmented button {
  min-width: 58px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-juniper);
  font: 700 0.82rem 'Sarabun', sans-serif;
  cursor: pointer;
}
.planning-segmented button.active {
  color: var(--color-palette-pearl);
  background: var(--color-leaf-dark);
}
.planning-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.planning-field.is-hidden { display: none; }
.planning-field label {
  color: var(--color-juniper-light);
  font-size: 0.68rem;
  font-weight: 700;
}
.planning-field select,
.planning-search {
  height: 44px;
  min-width: 118px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.2);
  border-radius: 6px;
  background: var(--color-palette-pearl);
  color: var(--color-juniper);
  font: 700 0.82rem 'Sarabun', sans-serif;
}
.planning-field select { padding: 0 34px 0 11px; }
#ds-week-selector { width: 168px; }
#ds-month-selector { width: 120px; }
#ds-year-selector { width: 118px; }
.planning-search {
  width: min(320px, 100%);
  min-width: 170px;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.planning-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-juniper);
  font: 500 0.84rem 'Sarabun', sans-serif;
}
.planning-print-button,
.planning-secondary-button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(var(--color-coral-rgb), 0.4);
  background: rgba(var(--color-coral-rgb), 0.05);
  color: var(--color-coral);
  font: 700 0.82rem 'Sarabun', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.planning-print-button:hover,
.planning-secondary-button:hover { background: rgba(var(--color-coral-rgb), 0.1); }

.planning-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-top: 0;
  background: var(--color-palette-pearl);
}
.planning-kpi {
  min-height: 82px;
  padding: 13px 16px 11px 18px;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1px 12px;
}
.planning-kpi:last-child { border-right: 0; }
.planning-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--color-leaf);
}
.planning-kpi-overdue::before { background: var(--color-coral); }
.planning-kpi-week::before { background: var(--color-palette-salmon); }
.planning-kpi-next::before { background: var(--color-leaf); }
.planning-kpi-active::before { background: var(--color-juniper-light); }
.planning-kpi span {
  grid-column: 1 / -1;
  color: var(--color-juniper-light);
  font-size: 0.74rem;
  font-weight: 700;
}
.planning-kpi strong {
  color: var(--color-juniper-dark);
  font: 700 1.8rem 'Outfit', sans-serif;
  line-height: 1;
}
.planning-kpi-overdue strong { color: var(--color-coral); }
.planning-kpi small {
  color: var(--color-leaf-dark);
  font-size: 0.68rem;
  padding-bottom: 2px;
}

.planning-table-shell {
  margin-top: 12px !important;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-palette-pearl) !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 330px);
}
.planning-center-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.planning-center-table thead { position: sticky; top: 0; z-index: 3; }
.planning-center-table th {
  padding: 12px 10px !important;
  text-align: center !important;
  color: var(--color-palette-pearl) !important;
  background: var(--color-juniper) !important;
  border-right: 1px solid rgba(var(--color-candle-rgb), 0.13);
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}
.planning-center-table td {
  padding: 12px 11px !important;
  vertical-align: top !important;
  background: rgba(247, 242, 224, 0.7);
  overflow-wrap: anywhere;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.08);
}
.planning-center-table td:last-child { border-right: 0; }
.planning-center-table tbody tr:hover td { background: #fffdf5; }
.planning-center-table .order-main-row { transition: background-color 0.15s ease; }

.planning-deadline-cell { vertical-align: middle !important; }
.planning-cell-section {
  min-width: 0;
}
.planning-cell-section + .planning-cell-section {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(var(--color-juniper-rgb), 0.14);
}
.planning-cell-section-muted {
  color: var(--color-juniper-light);
}
.planning-cell-label {
  margin-bottom: 5px;
  color: var(--color-leaf-dark);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.2;
}
.planning-cell-section img { max-width: 100%; }

.planning-calendar-shell,
.planning-briefing-shell {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-radius: 6px;
  background: var(--color-palette-pearl);
  box-shadow: var(--shadow-sm);
}
.planning-briefing-table { max-height: none; }

/* Monday operations review */
.planning-briefing-shell {
  padding: 0;
  overflow: hidden;
}

.briefing-command-center {
  width: 100%;
  background: var(--color-palette-pearl);
  color: var(--color-juniper);
}

.briefing-command-header {
  min-height: 78px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  background: var(--color-juniper);
  color: var(--color-palette-pearl);
}

.briefing-command-header p,
.briefing-section-heading span {
  margin: 0 0 3px;
  color: var(--color-palette-sandstone);
  font: 700 0.64rem 'Outfit', sans-serif;
  letter-spacing: 0;
}

.briefing-command-header h3 {
  margin: 0;
  color: var(--color-palette-pearl);
  font: 700 1.03rem 'Sarabun', sans-serif;
  letter-spacing: 0;
}

.briefing-date-control {
  display: grid;
  grid-template-columns: auto 150px;
  align-items: center;
  gap: 9px;
}

.briefing-date-control label {
  color: var(--color-candle-darker);
  font-size: 0.72rem;
  font-weight: 700;
}

.briefing-date-control input {
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid rgba(var(--color-candle-rgb), 0.25);
  border-radius: 4px;
  background: var(--color-palette-pearl);
  color: var(--color-juniper);
  font: 700 0.8rem 'Sarabun', sans-serif;
}

.briefing-admin-badge {
  padding: 5px 8px;
  border: 1px solid rgba(var(--color-candle-rgb), 0.25);
  border-radius: 4px;
  background: rgba(var(--color-coral-rgb), 0.8);
  color: var(--color-palette-pearl);
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
}

.briefing-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14);
}

.briefing-summary-item {
  min-height: 80px;
  padding: 12px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1px 10px;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  position: relative;
}

.briefing-summary-item:last-child { border-right: 0; }
.briefing-summary-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  background: var(--color-leaf);
}
.briefing-summary-item.is-overdue::before { background: var(--color-coral); }
.briefing-summary-item.is-this-week::before { background: var(--color-palette-salmon); }
.briefing-summary-item.is-next-week::before { background: var(--color-leaf); }
.briefing-summary-item.is-total::before { background: var(--color-juniper-light); }
.briefing-summary-item span {
  grid-column: 1 / -1;
  color: var(--color-juniper-light);
  font-size: 0.72rem;
  font-weight: 700;
}
.briefing-summary-item strong {
  color: var(--color-juniper-dark);
  font: 700 1.75rem 'Outfit', sans-serif;
  line-height: 1;
}
.briefing-summary-item.is-overdue strong { color: var(--color-coral); }
.briefing-summary-item small {
  padding-bottom: 2px;
  color: var(--color-leaf-dark);
  font-size: 0.65rem;
  text-align: right;
}

.briefing-operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.briefing-operations-section {
  min-width: 0;
  padding: 16px 18px 18px;
}

.briefing-artisans {
  border-left: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: rgba(var(--color-candle-rgb), 0.34);
}

.briefing-section-heading {
  min-height: 42px;
  margin-bottom: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.briefing-section-heading span { color: var(--color-coral); }
.briefing-section-heading h4 {
  margin: 0;
  color: var(--color-juniper-dark);
  font: 800 0.9rem 'Sarabun', sans-serif;
  letter-spacing: 0;
}
.briefing-section-heading small {
  color: var(--color-leaf-dark);
  font-size: 0.64rem;
  white-space: nowrap;
}

.briefing-dept-list {
  display: flex;
  flex-direction: column;
}

.briefing-process-list {
  display: flex;
  flex-direction: column;
}

.briefing-process-row {
  min-height: 52px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1);
  position: relative;
}

.briefing-process-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  background: var(--color-leaf);
}
.briefing-process-row.is-active::before { background: var(--color-palette-salmon); }
.briefing-process-row.is-overdue::before { background: var(--color-coral); }
.briefing-process-row.is-selected {
  background: rgba(var(--color-juniper-rgb), 0.055);
  box-shadow: inset 0 0 0 1px rgba(var(--color-juniper-rgb), 0.14);
}

.briefing-step-number {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  border-radius: 50%;
  background: var(--color-candle);
  color: var(--color-juniper);
  font: 700 0.72rem 'Outfit', sans-serif;
  display: grid;
  place-items: center;
}

.briefing-step-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.briefing-step-info strong {
  color: var(--color-juniper-dark);
  font-size: 0.8rem;
  line-height: 1.25;
}
.briefing-step-info small {
  color: var(--color-leaf-dark);
  font-size: 0.62rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.briefing-step-statuses {
  max-width: 220px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.briefing-step-chip {
  appearance: none;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-radius: 4px;
  background: rgba(var(--color-juniper-rgb), 0.04);
  color: var(--color-juniper-light);
  font-size: 0.61rem;
  font-weight: 800;
  white-space: nowrap;
}
.briefing-step-chip:hover,
.briefing-step-chip:focus-visible {
  border-color: var(--color-juniper);
  box-shadow: 0 0 0 2px rgba(var(--color-juniper-rgb), 0.1);
  outline: none;
}
.briefing-step-chip.is-selected {
  border-color: var(--color-juniper-dark);
  box-shadow: inset 0 0 0 1px var(--color-juniper-dark);
  transform: translateY(-1px);
}
.briefing-step-chip.is-overdue {
  border-color: rgba(var(--color-coral-rgb), 0.28);
  background: rgba(var(--color-coral-rgb), 0.08);
  color: var(--color-coral);
}
.briefing-step-chip.is-progress {
  border-color: rgba(191, 137, 127, 0.38);
  background: rgba(191, 137, 127, 0.12);
  color: var(--color-coral-dark);
}
.briefing-step-chip.is-waiting {
  border-color: rgba(var(--color-leaf-rgb), 0.38);
  background: rgba(var(--color-leaf-rgb), 0.12);
  color: var(--color-leaf-dark);
}
.briefing-step-chip.is-completed {
  border-color: rgba(112, 123, 109, 0.3);
  background: rgba(112, 123, 109, 0.1);
  color: var(--color-palette-olive);
}
.briefing-step-chip.is-pending,
.briefing-step-chip.is-empty {
  color: var(--color-juniper-light);
  opacity: 0.72;
}
.briefing-step-chip.is-empty { cursor: default; }

.briefing-process-detail {
  margin: 10px 8px 12px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.briefing-process-detail > header {
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  background: var(--color-juniper);
  color: #fff;
}
.briefing-process-detail > header div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.briefing-process-detail > header span {
  color: var(--color-sandstone);
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
}
.briefing-process-detail > header strong { font-size: .78rem; }
.briefing-process-detail > header small { color: rgba(255,255,255,.72); font-size: .58rem; }
.briefing-process-detail > header button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font: 500 1.15rem/1 'Outfit', sans-serif;
  cursor: pointer;
}
.briefing-process-jobs {
  max-height: 280px;
  overflow-y: auto;
}
.briefing-process-job {
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px 64px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1);
}
.briefing-process-job:last-child { border-bottom: 0; }
.briefing-process-job-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.briefing-process-job-main span { color: var(--color-coral); font-size: .56rem; font-weight: 800; }
.briefing-process-job-main strong { color: var(--color-juniper-dark); font-size: .72rem; overflow-wrap: anywhere; }
.briefing-process-job-main small { color: var(--color-pewter); font-size: .56rem; line-height: 1.35; overflow-wrap: anywhere; }
.briefing-process-job-date { display: flex; flex-direction: column; gap: 2px; }
.briefing-process-job-date span { color: var(--color-pewter); font-size: .52rem; }
.briefing-process-job-date strong { color: var(--color-juniper); font-size: .62rem; }
.briefing-process-job > button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(var(--color-coral-rgb), .35);
  border-radius: 5px;
  background: rgba(var(--color-coral-rgb), .05);
  color: var(--color-coral);
  font: 800 .61rem 'Sarabun', sans-serif;
  cursor: pointer;
}
.briefing-process-jobs-empty { min-height: 80px; padding: 20px; display: grid; place-items: center; color: var(--color-pewter); font-size: .65rem; }

.briefing-dept-row,
.briefing-artisan-row {
  min-height: 46px;
  margin: 0 !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center !important;
  column-gap: 10px;
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.briefing-dept-row::before,
.briefing-artisan-row::before {
  content: '';
  width: 3px;
  height: 30px;
  align-self: center;
  margin: 0;
  background: var(--color-leaf);
}
.briefing-dept-row.is-overdue::before,
.briefing-artisan-row.is-overloaded::before { background: var(--color-coral); }
.briefing-dept-row.is-busy::before,
.briefing-artisan-row.is-full::before { background: var(--color-palette-salmon); }

.briefing-dept-row > span:first-of-type,
.briefing-artisan-row > div:first-of-type {
  min-width: 0;
  margin: 0 !important;
  justify-self: stretch;
  text-align: left;
}

.briefing-dept-row > span:last-child,
.briefing-artisan-row > span:last-child {
  margin: 0 !important;
  justify-self: end;
}

.briefing-artisan-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.briefing-capacity-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: #fff;
}
.briefing-capacity-summary > div {
  min-width: 0;
  padding: 9px 5px;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  text-align: center;
}
.briefing-capacity-summary > div:last-child { border-right: 0; }
.briefing-capacity-summary strong {
  display: block;
  color: var(--color-juniper-dark);
  font: 700 1.15rem 'Outfit', sans-serif;
}
.briefing-capacity-summary span {
  display: block;
  margin-top: 1px;
  color: var(--color-pewter);
  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
}
.briefing-capacity-summary .is-alert strong { color: var(--color-coral); }
.briefing-capacity-summary .is-free strong { color: #507455; }
.briefing-capacity-layout { margin-top: 10px; }
.briefing-department-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.briefing-department-tab {
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-radius: 4px;
  background: rgba(255,255,255,.72);
  color: var(--color-juniper);
  text-align: left;
  cursor: pointer;
}
.briefing-department-tab:hover { border-color: var(--color-leaf); }
.briefing-department-tab.active {
  border-color: var(--color-juniper);
  background: var(--color-juniper);
  color: #fff;
}
.briefing-department-tab.has-overload:not(.active) { border-left: 3px solid var(--color-coral); }
.briefing-department-tab span,
.briefing-department-tab strong,
.briefing-department-tab small { min-width: 0; display: block; }
.briefing-department-tab strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.briefing-department-tab small { margin-top: 2px; color: currentColor; font-size: .56rem; opacity: .74; }
.briefing-department-tab > b { padding: 2px 5px; border-radius: 3px; background: rgba(var(--color-leaf-rgb),.12); color: var(--color-leaf-dark); font-size: .55rem; white-space: nowrap; }
.briefing-department-tab.has-overload > b { background: rgba(var(--color-coral-rgb),.1); color: var(--color-coral); }
.briefing-department-tab.active > b { background: rgba(255,255,255,.14); color: #fff; }
.briefing-department-tab > i {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background: rgba(var(--color-juniper-rgb),.1);
}
.briefing-department-tab > i span { height: 100%; background: var(--color-leaf); }
.briefing-department-tab.has-overload > i span { background: var(--color-coral); }
.briefing-capacity-detail {
  margin-top: 9px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: #fff;
}
.briefing-capacity-detail > header {
  min-height: 42px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb),.12);
  background: #f5f4ef;
}
.briefing-capacity-detail header span,
.briefing-capacity-detail header strong { display: block; }
.briefing-capacity-detail header span { color: var(--color-coral); font: 800 .52rem 'Outfit', sans-serif; }
.briefing-capacity-detail header strong { font-size: .75rem; }
.briefing-capacity-detail header small { color: var(--color-pewter); font-size: .58rem; white-space: nowrap; }
.briefing-capacity-people { max-height: 235px; overflow-y: auto; }
.briefing-capacity-person {
  min-height: 48px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px 58px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb),.09);
  position: relative;
}
.briefing-capacity-person:last-child { border-bottom: 0; }
.briefing-capacity-person::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--color-leaf); }
.briefing-capacity-person.is-overloaded::before { background: var(--color-coral); }
.briefing-capacity-person.is-full::before { background: #b9782d; }
.briefing-capacity-person.is-available::before { background: #5d8a63; }
.briefing-capacity-avatar { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(var(--color-juniper-rgb),.14); border-radius: 50%; background: var(--color-candle); color: var(--color-leaf-dark); font-size: .58rem; font-weight: 800; }
.briefing-capacity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.briefing-capacity-name { min-width: 0; }
.briefing-capacity-name strong,
.briefing-capacity-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.briefing-capacity-name strong { font-size: .68rem; }
.briefing-capacity-name small { margin-top: 1px; color: var(--color-pewter); font-size: .52rem; }
.briefing-capacity-count { text-align: center; }
.briefing-capacity-count strong,
.briefing-capacity-count span { display: block; }
.briefing-capacity-count strong { font: 700 .9rem 'Outfit', sans-serif; }
.briefing-capacity-count span { color: var(--color-pewter); font-size: .5rem; }
.briefing-capacity-state { text-align: right; }
.briefing-capacity-state b { display: inline-block; padding: 2px 5px; border-radius: 3px; background: rgba(var(--color-leaf-rgb),.1); color: var(--color-leaf-dark); font-size: .53rem; white-space: nowrap; }
.briefing-capacity-person.is-overloaded .briefing-capacity-state b { background: rgba(var(--color-coral-rgb),.1); color: var(--color-coral); }
.briefing-capacity-person.is-full .briefing-capacity-state b { background: #fff2de; color: #99601e; }
.briefing-capacity-person.is-available .briefing-capacity-state b { background: #e9f3e9; color: #427249; }
.briefing-capacity-state small { display: block; margin-top: 2px; color: var(--color-coral); font-size: .5rem; }
.briefing-capacity-empty { min-height: 90px; padding: 18px; display: grid; place-items: center; color: var(--color-pewter); font-size: .66rem; text-align: center; }

@media (max-width: 980px) {
  .briefing-command-header { grid-template-columns: 1fr auto; }
  .briefing-admin-badge { display: none; }
  .briefing-operations-grid { grid-template-columns: 1fr; }
  .briefing-artisans { border-left: 0; border-top: 1px solid rgba(var(--color-juniper-rgb), 0.14); }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .briefing-process-row {
    grid-template-columns: 28px minmax(100px, 1fr);
  }
  .briefing-step-statuses {
    grid-column: 2;
    max-width: none;
    justify-content: flex-start;
  }
}

/* Casting Operations: strong visual separation between work zones */
.casting-workspace {
  counter-reset: casting-zone;
}

.casting-workspace .casting-zone {
  counter-increment: casting-zone;
  position: relative;
  margin: 0 0 34px;
  padding: 18px;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(35, 37, 23, 0.09);
}

.casting-workspace .casting-zone::before {
  content: "0" counter(casting-zone);
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  width: 38px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.72;
}

.casting-workspace .casting-zone-heading {
  min-height: 44px;
  margin: -18px -18px 18px;
  padding: 12px 68px 12px 18px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.14);
}

.casting-workspace .casting-zone-heading small {
  margin-bottom: 2px;
}

.casting-zone-furnaces {
  background: #f7f4eb;
  border-top: 5px solid #4a4e33 !important;
  color: #4a4e33;
}

.casting-zone-furnaces .casting-zone-heading {
  background: #ebe7da;
}

.casting-zone-furnaces .casting-furnace-grid {
  margin-bottom: 0;
}

.casting-workspace .casting-zone-plan {
  border-top: 5px solid #898861;
  background: #eef0e8;
  color: #6c6b4b;
}

.casting-workspace .casting-zone-plan .casting-panel-header {
  margin: -18px -18px 14px;
  padding-right: 70px;
  border-radius: 3px 3px 0 0;
  background: #6c6b4b;
}

.casting-workspace .casting-zone-plan > div:last-child {
  overflow: hidden;
  border: 1px solid rgba(108, 107, 75, 0.2);
  border-radius: 5px;
  background: #fffdf8;
}

.casting-zone-archive {
  background: #f4efe2;
  border-top: 5px solid #7d2826 !important;
  color: #7d2826;
}

.casting-zone-archive .casting-zone-heading {
  background: #eadfd5;
}

.casting-zone-archive .casting-archive-controls {
  border-radius: 6px 6px 0 0;
}

.casting-zone-archive .casting-archive-table-wrap {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .casting-workspace .casting-zone {
    margin-bottom: 26px;
    padding: 14px;
  }

  .casting-workspace .casting-zone-heading,
  .casting-workspace .casting-zone-plan .casting-panel-header {
    margin-right: -14px;
    margin-left: -14px;
  }

  .casting-workspace .casting-zone-heading {
    margin-top: -14px;
  }

  .casting-workspace .casting-zone-plan .casting-panel-header {
    margin-top: -14px;
  }

  .casting-workspace .casting-zone::before {
    top: 12px;
    right: 14px;
  }
}

@media (max-width: 720px) {
  .briefing-command-header { grid-template-columns: 1fr; gap: 10px; }
  .briefing-date-control { grid-template-columns: 1fr; }
  .briefing-date-control input { width: 100%; }
  .briefing-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .briefing-summary-item:nth-child(2) { border-right: 0; }
  .briefing-summary-item:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.12); }
  .briefing-process-job { grid-template-columns: minmax(0, 1fr) 62px; }
  .briefing-process-job-date { grid-column: 1; }
  .briefing-process-job > button { grid-column: 2; grid-row: 1 / span 2; }
}

/* Artwork form: deliberate eleven-step production palette. */
.artw-accordion-item.theme-green { --artw-tab-bg: #49535C; --artw-tab-fg: #F7F6F1; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-project-images { --artw-tab-bg: #AEBAB0; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-scale-details { --artw-tab-bg: #BAB4A8; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-blue { --artw-tab-bg: #66757A; --artw-tab-fg: #F7F6F1; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-purple { --artw-tab-bg: #93A6A9; --artw-tab-fg: #F7F6F1; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-amber { --artw-tab-bg: #A0A59B; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-red { --artw-tab-bg: #C3C1AE; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-teal { --artw-tab-bg: #D3C9AD; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-rose { --artw-tab-bg: #9E9786; --artw-tab-fg: #2F3130; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-bronze { --artw-tab-bg: #827C70; --artw-tab-fg: #F7F6F1; --artw-tab-edge: #E8E1CE; }
.artw-accordion-item.theme-gray { --artw-tab-bg: #646058; --artw-tab-fg: #F7F6F1; --artw-tab-edge: #E8E1CE; }

.artw-accordion .artw-accordion-item[class*="theme-"] {
  margin-bottom: 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: 0 2px 5px rgba(38, 40, 29, 0.08) !important;
  opacity: 1 !important;
}

.artw-accordion .artw-accordion-item[class*="theme-"] .artw-accordion-header,
.artw-accordion .artw-accordion-item[class*="theme-"].active .artw-accordion-header {
  min-height: 50px !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-left: 4px solid var(--artw-tab-edge) !important;
  border-radius: 6px !important;
  background: var(--artw-tab-bg) !important;
  color: var(--artw-tab-fg) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  transition: filter 140ms ease, transform 140ms ease !important;
}

.artw-accordion .artw-accordion-item[class*="theme-"] .artw-accordion-header:hover {
  filter: brightness(1.07) !important;
  transform: translateX(2px);
}

.artw-accordion .artw-accordion-item[class*="theme-"] .accordion-icon {
  color: inherit !important;
  opacity: 0.9 !important;
}

.artw-accordion .artw-accordion-item[class*="theme-"].active .artw-accordion-header {
  border-left-color: #7D2926 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

/* Compact doorway from the artwork form into the dedicated scale workspace. */
.scale-sheet-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: start;
  gap: 22px;
  margin: 4px 0 20px;
  padding: 20px;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-top: 3px solid #5d7476;
  border-radius: 6px;
  background: #f9f9f5;
}

.scale-sheet-entry-copy { min-width: 0; }
.scale-sheet-entry-copy h3 { margin: 2px 0 5px; color: #343723; font-size: 1rem; letter-spacing: 0; }
.scale-sheet-entry-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #555749; font-size: 0.72rem; }
.scale-sheet-inline-status { padding: 4px 7px; border: 1px solid #d3c89e; border-radius: 999px; background: #fff8dd; color: #756320; font-weight: 800; }
.scale-sheet-inline-status.approved { border-color: #a8c7a7; background: #edf7ec; color: #38623a; }
.scale-sheet-board-page { display: grid; grid-template-rows: 22px 220px 26px; width: min(100%, 420px); margin-top: 16px; overflow: hidden; border: 1px solid #c9c9c0; background: #fff; box-shadow: 0 5px 16px rgba(40,40,30,.09); }
.scale-sheet-board-page-header { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #e3e3dd; }
.scale-sheet-board-page-header i { display: block; height: 3px; background: #d7d7d0; }
.scale-sheet-board-page-header i:first-child { background: #7d2926; }
.scale-sheet-board-image { display: grid; min-height: 0; place-items: center; overflow: hidden; background: #f3f3ef; }
.scale-sheet-board-image img { width: 100%; height: 100%; object-fit: contain; }
.scale-sheet-board-image.empty { color: #88897e; font-size: .75rem; }
.scale-sheet-board-page-table { display: grid; grid-template-columns: 1fr 2fr 1fr; border-top: 1px solid #deded8; }
.scale-sheet-board-page-table i { border-right: 1px solid #deded8; }
.scale-sheet-board-page-table i:last-child { border-right: 0; }
.scale-sheet-board-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 14px 0 0; border-top: 1px solid #d9d9d1; border-left: 1px solid #d9d9d1; }
.scale-sheet-board-summary>div { min-width: 0; padding: 10px 12px; border-right: 1px solid #d9d9d1; border-bottom: 1px solid #d9d9d1; background: #fff; }
.scale-sheet-board-summary .wide { grid-column: 1 / -1; }
.scale-sheet-board-summary dt { color: #77786d; font-size: .68rem; font-weight: 750; }
.scale-sheet-board-summary dd { margin: 3px 0 0; overflow-wrap: anywhere; color: #343723; font-size: .8rem; font-weight: 800; line-height: 1.45; }
.scale-sheet-entry-actions { position: sticky; top: 12px; display: grid; min-width: 0; gap: 8px; }
.scale-sheet-entry-actions button { min-height: 38px; border-radius: 6px; font-weight: 800; cursor: pointer; }
.scale-sheet-entry-open { border: 1px solid #343723; background: #343723; color: #fff; }

/* Full-screen Scale Sheet Builder. */
body.scale-sheet-builder-open { overflow: hidden !important; }
.scale-builder-modal { position: fixed; inset: 0; z-index: 10050; display: none; background: #ecebe6; color: #24251f; }
.scale-builder-modal.active { display: block; }
.scale-builder-app { display: grid; grid-template-rows: 66px 52px minmax(0,1fr) 68px; width: 100%; height: 100dvh; background: #f3f2ed; }
.scale-builder-topbar { display: grid; grid-template-columns: 66px minmax(0,1fr) 44px; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid #d5d4ce; background: #fff; }
.scale-builder-brand { display: grid; height: 44px; place-content: center; border-right: 1px solid #d7d7d0; color: #343f29; line-height: 1; }
.scale-builder-brand span { font-size: 1.2rem; font-weight: 900; }
.scale-builder-brand b { color: #898861; font-size: .56rem; letter-spacing: 2px; }
.scale-builder-title strong,.scale-builder-title span { display: block; letter-spacing: 0; }
.scale-builder-title strong { font-size: 1.12rem; }
.scale-builder-title span { color: #696a60; font-size: .72rem; }
.scale-builder-close { width: 40px; height: 40px; border: 1px solid #d5d4ce; border-radius: 6px; background: #fff; color: #343723; font-size: 1.45rem; cursor: pointer; }
.scale-builder-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px 20px; background: #f3f2ed; }
.scale-builder-steps button { position: relative; min-width: 0; height: 36px; border: 1px solid #d4d3cb; border-right: 0; background: #fff; color: #5c5e55; font-weight: 750; cursor: pointer; }
.scale-builder-steps button:first-child { border-radius: 6px 0 0 6px; }
.scale-builder-steps button:last-child { border-right: 1px solid #d4d3cb; border-radius: 0 6px 6px 0; }
.scale-builder-steps button.active { border-color: #40502f; background: #40502f; color: #fff; }
.scale-builder-steps button span { display: inline-grid; width: 22px; height: 22px; margin-right: 8px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .7rem; }
.scale-builder-body { display: grid; min-height: 0; grid-template-columns: minmax(320px, 410px) minmax(0,1fr); border-top: 1px solid #dddcd6; }
.scale-builder-controls { min-width: 0; overflow: auto; padding: 20px; border-right: 1px solid #d2d2ca; background: #faf9f5; }
.scale-builder-panel-title { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #dddcd4; }
.scale-builder-panel-title strong,.scale-builder-panel-title span { display: block; }
.scale-builder-panel-title strong { color: #343723; font-size: 1rem; }
.scale-builder-panel-title span { margin-top: 3px; color: #77786d; font-size: .7rem; }
.scale-builder-field { display: block; margin-bottom: 11px; }
.scale-builder-field span,.scale-builder-entry-grid label span { display: block; margin-bottom: 5px; color: #55574c; font-size: .7rem; font-weight: 750; }
.scale-builder-field input,.scale-builder-entry-grid input,.scale-builder-entry-grid select { width: 100%; height: 38px; padding: 7px 10px; border: 1px solid #d5d3c8; border-radius: 5px; background: #fff; color: #343723; }
.scale-builder-field input[readonly] { background: #f0efe9; }
.scale-builder-project-details { margin: 15px 0 18px; padding: 13px; border: 1px solid #d7d5ca; border-left: 3px solid #7d2926; background: #fff; }
.scale-builder-section-heading { margin-bottom: 10px; }
.scale-builder-section-heading strong,.scale-builder-section-heading span { display: block; }
.scale-builder-section-heading strong { color: #343723; font-size: .8rem; }
.scale-builder-section-heading span { margin-top: 2px; color: #77786d; font-size: .66rem; line-height: 1.45; }
.scale-builder-dimension-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.scale-builder-dimension-grid label,.scale-builder-notes { min-width: 0; }
.scale-builder-dimension-grid label span,.scale-builder-notes span { display: block; margin-bottom: 4px; color: #55574c; font-size: .68rem; font-weight: 750; }
.scale-builder-dimension-grid input,.scale-builder-dimension-grid select,.scale-builder-notes textarea { width: 100%; border: 1px solid #d5d3c8; border-radius: 5px; background: #fff; color: #343723; }
.scale-builder-dimension-grid input,.scale-builder-dimension-grid select { height: 38px; padding: 7px 9px; }
.scale-builder-dimension-grid .unit { grid-column: span 2; }
.scale-builder-notes { display: block; margin-top: 9px; }
.scale-builder-notes textarea { min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.scale-builder-linked-values { margin: 0 0 12px; padding: 12px; border: 1px solid #cfd6c8; border-left: 3px solid #465839; background: #f4f7f1; }
.scale-builder-linked-values>div strong,.scale-builder-linked-values>div span { display: block; }
.scale-builder-linked-values>div strong { color: #343723; font-size: .78rem; }
.scale-builder-linked-values>div span { margin-top: 2px; color: #6c6f63; font-size: .66rem; line-height: 1.45; }
.scale-builder-linked-values dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 10px 0 0; }
.scale-builder-linked-values dl>div { min-width: 0; padding: 7px 8px; border: 1px solid #d9ded4; background: #fff; }
.scale-builder-linked-values dt { color: #74776c; font-size: .62rem; font-weight: 750; }
.scale-builder-linked-values dd { margin: 2px 0 0; color: #343723; font-size: .75rem; font-weight: 850; overflow-wrap: anywhere; }
.scale-builder-linked-values .empty dd { color: #98998f; font-weight: 650; }
.scale-builder-view-tabs,.scale-builder-mode-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 13px 0 10px; }
.scale-builder-view-tabs button,.scale-builder-mode-tabs button { min-height: 36px; border: 1px solid #cbcabe; background: #fff; color: #55574a; font-weight: 750; cursor: pointer; }
.scale-builder-view-tabs button:first-child,.scale-builder-mode-tabs button:first-child { border-radius: 5px 0 0 5px; }
.scale-builder-view-tabs button:last-child,.scale-builder-mode-tabs button:last-child { border-left: 0; border-radius: 0 5px 5px 0; }
.scale-builder-view-tabs button.active,.scale-builder-mode-tabs button.active { background: #465839; color: #fff; }
.scale-builder-image-picker { display: grid; height: 240px; place-items: center; overflow: hidden; border: 1px dashed #b8b7aa; border-radius: 5px; background: #f0efe8; }
.scale-builder-image-picker img { width: 100%; height: 100%; }
.scale-builder-image-picker div { padding: 20px; text-align: center; }
.scale-builder-image-picker b,.scale-builder-image-picker span { display: block; }
.scale-builder-image-picker span { margin-top: 4px; color: #77786c; font-size: .7rem; }
.scale-builder-image-actions,.scale-builder-tool-row,.scale-builder-undo-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.scale-builder-image-actions button,.scale-builder-tool-row button,.scale-builder-undo-row button { min-height: 34px; padding: 6px 10px; border: 1px solid #cbcabe; border-radius: 5px; background: #fff; color: #414337; cursor: pointer; }
.scale-builder-image-actions .danger { color: #8d2e2a; }
.scale-builder-next,.scale-builder-add { width: 100%; min-height: 40px; margin-top: 14px; border: 1px solid #40502f; border-radius: 5px; background: #40502f; color: #fff; font-weight: 800; cursor: pointer; }
.scale-builder-add { min-height: 36px; margin-top: 8px; background: #fff; color: #40502f; }
.scale-builder-entry-grid { display: grid; grid-template-columns: 1.45fr .7fr .7fr .9fr; gap: 7px; }
.scale-builder-entry-grid.text-mode { grid-template-columns: minmax(0,1fr) 118px; align-items: end; }
.scale-builder-entry-grid.text-mode>label { display: grid; min-width: 0; grid-template-rows: auto 48px; align-content: end; }
.scale-builder-entry-grid.text-mode>label>span { white-space: nowrap; }
.scale-builder-list-title { display: flex; justify-content: space-between; margin: 16px 0 7px; font-size: .72rem; }
.scale-builder-list-title span { color: #77786d; }
.scale-builder-measure-list { display: grid; gap: 5px; }
.scale-builder-measure-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 58px 35px 30px; align-items: center; gap: 5px; min-height: 38px; padding: 4px; border: 1px solid #deddd6; border-radius: 4px; background: #fff; font-size: .7rem; }
.scale-builder-measure-row>b { display: grid; height: 28px; place-items: center; background: #f0efe8; }
.scale-builder-measure-row input { width: 100%; height: 28px; padding: 4px; border: 1px solid #d3d2ca; text-align: center; }
.scale-builder-measure-row.linked { border-color: #cfd6c8; background: #f8faf6; }
.scale-builder-measure-row.linked input[readonly] { border-color: transparent; background: #eef2ea; color: #343723; font-weight: 800; cursor: default; }
.scale-builder-measure-row em { font-style: normal; color: #6c6e63; }
.scale-builder-measure-row button { height: 28px; border: 0; background: #f7ecea; color: #8f2925; cursor: pointer; }
.scale-builder-linked-mark { display: grid; width: 28px; height: 28px; place-items: center; background: #e3ebde; color: #40502f; font-size: .72rem; font-weight: 900; }
.scale-builder-empty-list { padding: 22px 12px; border: 1px dashed #d4d2c7; color: #848479; font-size: .7rem; text-align: center; }
.scale-builder-review-list { border: 1px solid #d9d8d0; background: #fff; }
.scale-builder-review-list>div { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid #e7e6e0; font-size: .76rem; }
.scale-builder-review-list>div:last-child { border-bottom: 0; }
.scale-builder-review-note { margin-top: 12px; padding: 11px; border-left: 3px solid #898861; background: #f1f0e8; color: #626359; font-size: .72rem; line-height: 1.5; }
.scale-builder-preview-pane { position: relative; min-width: 0; overflow: auto; padding: 22px 58px 60px 24px; background: #dededb; }
.scale-builder-paper-wrap { display: flex; min-width: 794px; justify-content: center; }
.scale-builder-paper { --scale-sheet-zoom: .82; display: flex; width: 210mm; height: 297mm; padding: 12mm 13mm 9mm; overflow: hidden; flex-direction: column; transform: scale(var(--scale-sheet-zoom)); transform-origin: top center; background: #fff; color: #171717; box-shadow: 0 5px 22px rgba(0,0,0,.17); font-family: Arial,"Noto Sans Thai",sans-serif; }
.scale-paper-header { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding-bottom: 8px; border-bottom: 2px solid #111; }
.scale-paper-header span { color: #7d2826; font-size: 11px; font-weight: 800; }
.scale-paper-header h1 { margin: 2px 0 0; font-size: 26px; line-height: 1; letter-spacing: 0; }
.scale-paper-header small { font-size: 11px; }
.scale-paper-header dl { display: grid; grid-template-columns: auto auto; gap: 3px 11px; margin: 0; font-size: 11px; }
.scale-paper-header dt { color: #666; }
.scale-paper-header dd { margin: 0; font-weight: 700; text-align: right; }
.scale-paper-meta { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; margin-top: 8px; border: 1px solid #e3e3e3; }
.scale-paper-meta div { min-width: 0; padding: 8px 9px; border-right: 1px solid #eee; font-size: 12px; line-height: 1.3; }
.scale-paper-meta div:last-child { border-right: 0; }
.scale-paper-meta b { display: block; margin-bottom: 2px; color: #666; font-size: 10px; }
.scale-paper-views { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; margin-top: 8px; }
.scale-paper-view { display: flex; min-width: 0; flex-direction: column; }
.scale-paper-view>strong { margin-bottom: 4px; font-size: 11px; }
.scale-paper-image { position: relative; min-height: 0; flex: 1; overflow: hidden; border: 1px solid #eee; background: #fafafa; touch-action: none; }
.scale-paper-image>img { width: 100%; height: 100%; object-fit: contain; }
.scale-paper-image.empty { display: grid; place-items: center; color: #999; font-size: 10px; }
.scale-paper-measure,.scale-paper-label { position: absolute; z-index: 2; transform: translate(-50%,-50%); font-size: 8px; cursor: move; touch-action: none; }
.scale-paper-measure i { position: absolute; left: 50%; top: 50%; display: block; width: 76px; border-top: 1px solid #7d2826; transform: translate(-50%,-50%); }
.scale-paper-measure.vertical i { width: 1px; height: 76px; border-top: 0; border-left: 1px solid #7d2826; }
.scale-paper-measure b,.scale-paper-label b { position: relative; display: inline-grid; width: 17px; height: 17px; place-items: center; background: #3d4930; color: #fff; }
.scale-paper-measure span,.scale-paper-label span { position: relative; display: block; margin-top: 2px; padding: 3px 4px; border: 1px solid #bbb; background: rgba(255,255,255,.95); white-space: nowrap; }
.scale-paper-measure small { display: block; font-size: 8px; font-weight: 700; }
.scale-paper-label { display: flex; align-items: center; gap: 3px; }
.scale-paper-label span { margin: 0; }
.scale-paper-table { width: 100%; margin-top: 7px; border-collapse: collapse; font-size: 11px; line-height: 1.25; }
.scale-paper-table th,.scale-paper-table td { padding: 6px; border: 1px solid #ddd; }
.scale-paper-table th { background: #f2f2f2; text-align: center !important; }
.scale-paper-notes { display: grid; grid-template-columns: 118px 1fr; margin-top: 7px; border: 1px solid #ddd; font-size: 10px; line-height: 1.4; }
.scale-paper-notes>b { padding: 7px 8px; background: #f2f2f2; color: #555; }
.scale-paper-notes>p { min-width: 0; margin: 0; padding: 7px 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.scale-paper-signatures { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 7px; border: 1px solid #ddd; font-size: 10px; }
.scale-paper-signatures div { min-height: 52px; padding: 6px 8px; border-right: 1px solid #ddd; }
.scale-paper-signatures div:last-child { border-right: 0; }
.scale-paper-signatures b,.scale-paper-signatures small { display: block; }
.scale-paper-signatures b { color: #555; font-size: 10px; }
.scale-signature-line { display: block; height: 16px; margin-top: 2px; border-bottom: 1px solid #999; }
.scale-paper-signatures small { margin-top: 3px; color: #666; font-size: 9px; }
.scale-paper-signature-image { display: block; width: 100%; height: 19px; margin-top: 1px; object-fit: contain; object-position: center bottom; }
.scale-paper-signature-name { display: block; overflow: hidden; color: #222; font-size: 9px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.document-certification-panel { margin-top: 14px; overflow: hidden; border: 1px solid #d9d6ca; border-radius: 6px; background: #fff; }
.document-certification-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #e4e1d7; background: #f7f6f1; }
.document-certification-heading strong,.document-certification-heading span { display: block; }
.document-certification-heading strong { color: #2f3526; font-size: 15px; }
.document-certification-heading span { margin-top: 2px; color: #73756c; font-size: 11px; }
.document-certification-mode { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #bbb8ad; border-radius: 5px; background: #fff; }
.document-certification-mode button { min-height: 34px; padding: 7px 11px; border: 0; border-right: 1px solid #d6d3ca; background: #fff; color: #4d5048; font: inherit; font-size: 12px; cursor: pointer; }
.document-certification-mode button:last-child { border-right: 0; }
.document-certification-mode button.active { background: #3d4930; color: #fff; font-weight: 700; }
.document-certification-manual { padding: 20px; color: #5e6257; font-size: 13px; text-align: center; }
.document-certification-slots { display: grid; grid-template-columns: 1fr; }
.document-certification-slot { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(150px,.65fr); column-gap: 12px; min-width: 0; padding: 12px; border-bottom: 1px solid #e4e1d7; }
.document-certification-slot:last-child { border-bottom: 0; }
.document-certification-slot header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.document-certification-slot header,.document-certification-signed { grid-column: 1 / -1; }
.document-certification-slot header b { color: #33372b; font-size: 13px; }
.document-certification-slot header span { padding: 3px 6px; border-radius: 3px; background: #efeee9; color: #7b7d75; font-size: 10px; white-space: nowrap; }
.document-certification-slot.signed header span { background: #e5efe2; color: #42613b; }
.document-certification-slot.invalid header span { background: #f7e5e3; color: #8d2926; }
.document-certification-slot label { display: block; margin-top: 7px; }
.document-certification-slot label>span { display: block; margin-bottom: 4px; color: #66695f; font-size: 10px; }
.document-certification-slot input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #d3d0c5; border-radius: 5px; background: #fff; color: #30332c; font: inherit; font-size: 12px; }
.document-certification-slot input:disabled { background: #f3f2ed; color: #565950; opacity: 1; }
.document-certification-picker { position: relative; min-width: 0; }
.document-certification-picker-icon { position: absolute; top: 50%; left: 10px; z-index: 1; transform: translateY(-50%); color: #777b70; font-size: 15px; pointer-events: none; }
.document-certification-picker input[type="search"] { padding-left: 31px; padding-right: 30px; }
.document-certification-picker.disabled .document-certification-picker-icon { opacity: .45; }
.document-certification-picker-results { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 25; display: none; max-height: 230px; overflow-y: auto; border: 1px solid #cfccc1; border-radius: 6px; background: #fff; box-shadow: 0 10px 26px rgba(40,42,34,.16); }
.document-certification-picker-summary { padding: 7px 10px; border-bottom: 1px solid #ebe8df; background: #f7f6f1; color: #777a70; font-size: 10px; }
.document-certification-picker-option { display: block; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid #efede6; background: #fff; color: #30332c; text-align: left; cursor: pointer; }
.document-certification-picker-option:last-child { border-bottom: 0; }
.document-certification-picker-option:hover,.document-certification-picker-option:focus-visible { background: #eef2e9; outline: 0; }
.document-certification-picker-option span,.document-certification-picker-option small { display: block; }
.document-certification-picker-option span { font-size: 12px; font-weight: 700; }
.document-certification-picker-option small { margin-top: 2px; color: #777a70; font-size: 10px; }
.document-certification-picker-option em { display: inline-block; margin-top: 5px; padding: 2px 6px; border-radius: 3px; background: #e7f0e4; color: #365336; font-size: 9px; font-style: normal; font-weight: 700; }
.document-certification-picker-option.is-unavailable { cursor: pointer; opacity: .86; }
.document-certification-picker-option.is-unavailable:hover { background: #faf8f2; }
.document-certification-picker-option.is-unavailable em { background: #f1ece4; color: #756b5d; }
.document-certification-picker-empty { padding: 16px 10px; color: #8a8c84; font-size: 11px; text-align: center; }
.document-certification-sign { width: 100%; min-height: 36px; margin-top: 10px; border: 0; border-radius: 5px; background: #3d4930; color: #fff; font-weight: 700; cursor: pointer; }
.document-certification-slot .document-certification-sign,.document-certification-slot .document-certification-help { grid-column: 1 / -1; }
.document-certification-sign:disabled { background: #dddcd6; color: #999b94; cursor: not-allowed; }
.document-certification-help { display: block; min-height: 0; margin-top: 5px; color: #85877f; font-size: 9px; line-height: 1.35; }
.document-certification-signed { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 56px; margin-top: 9px; padding: 6px; border: 1px solid #dce6d9; background: #f5faf3; }
.document-certification-signed img { width: 74px; height: 40px; object-fit: contain; }
.document-certification-signed small { min-width: 0; color: #4d5547; font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.document-certification-resign { min-height: 34px; padding: 7px 10px; border: 1px solid rgba(125,40,38,.34); border-radius: 5px; background: rgba(125,40,38,.05); color: #7d2826; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.document-certification-resign:hover { background: rgba(125,40,38,.1); }
.document-certification-audit { border-top: 1px solid #e4e1d7; padding: 9px 13px; color: #66695f; font-size: 11px; }
.document-certification-audit summary { color: #4b5044; font-weight: 700; cursor: pointer; }
.document-certification-audit div { display: flex; gap: 8px; margin-top: 6px; }
.document-certification-audit div b { color: #7d2926; }
.document-signature-modal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 18px; background: rgba(24,27,20,.58); backdrop-filter: blur(3px); }
.document-signature-dialog { width: min(620px,100%); overflow: hidden; border-radius: 8px; background: #fdfcf8; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.document-signature-dialog>header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #ddd9cd; }
.document-signature-dialog>header strong,.document-signature-dialog>header span { display: block; }
.document-signature-dialog>header strong { font-size: 16px; }
.document-signature-dialog>header span { margin-top: 2px; color: #73766b; font-size: 11px; }
.document-signature-dialog>header button { width: 36px; height: 36px; border: 1px solid #d1cec4; border-radius: 5px; background: #fff; font-size: 22px; cursor: pointer; }
.document-signature-canvas-wrap { position: relative; margin: 18px; border: 1px solid #aaa99f; background: #fff; }
.document-signature-canvas-wrap:after { content: ""; position: absolute; right: 24px; bottom: 34px; left: 24px; border-bottom: 1px solid #c8c6bc; pointer-events: none; }
.document-signature-canvas-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.document-signature-canvas-wrap>span { position: absolute; right: 12px; bottom: 8px; color: #aaa89f; font-size: 10px; }
.document-signature-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px; }
.document-signature-actions button { min-height: 38px; padding: 8px 13px; border: 1px solid #c9c6bc; border-radius: 5px; background: #fff; color: #44483e; font-weight: 700; cursor: pointer; }
.document-signature-actions button.primary { border-color: #3d4930; background: #3d4930; color: #fff; }
.document-signature-actions button:disabled { opacity: .45; cursor: not-allowed; }
.document-signature-dialog>p { margin: 12px 18px 17px; color: #777970; font-size: 10px; text-align: right; }
.legacy-certification-dialog { display: flex; width: min(920px,100%); max-height: calc(100dvh - 36px); flex-direction: column; }
.legacy-certification-dialog>header { flex: 0 0 auto; }
.legacy-certification-body { min-height: 0; padding: 14px; overflow: auto; background: #f5f3ec; overscroll-behavior: contain; }
.legacy-certification-body .document-certification-panel { margin: 0; }
.legacy-certification-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 9px; padding: 13px 16px; border-top: 1px solid #ddd9cd; background: #fff; }
.legacy-certification-actions button { min-width: 132px; min-height: 40px; padding: 8px 14px; border: 1px solid #c7c3b8; border-radius: 5px; background: #fff; color: #3c4036; font: inherit; font-weight: 700; cursor: pointer; }
.legacy-certification-actions button.primary { min-width: 190px; border-color: #7d2926; background: #7d2926; color: #fff; }
@media (min-width: 760px) {
  .legacy-certification-body .document-certification-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .legacy-certification-body .document-certification-slot { grid-template-columns: 1fr; align-content: start; border-right: 1px solid #e4e1d7; border-bottom: 0; }
  .legacy-certification-body .document-certification-slot:last-child { border-right: 0; }
}
@media (max-width: 720px) {
  .document-signature-modal { align-items: end; padding: 8px; }
  .legacy-certification-dialog { width: 100%; max-height: calc(100dvh - 16px); }
  .legacy-certification-dialog>header { padding: 12px; }
  .legacy-certification-dialog>header span { max-width: 72vw; }
  .legacy-certification-body { padding: 8px; }
  .document-certification-heading { align-items: stretch; flex-direction: column; }
  .document-certification-mode { display: grid; grid-template-columns: 1fr 1fr; }
  .document-certification-slot { grid-template-columns: minmax(0,1fr) minmax(118px,.72fr); padding: 10px; }
  .legacy-certification-actions { display: grid; grid-template-columns: 1fr 1.2fr; padding: 9px; }
  .legacy-certification-actions button,.legacy-certification-actions button.primary { min-width: 0; }
}
.scale-paper-footer { display: flex; justify-content: space-between; margin-top: 4px; color: #666; font-size: 9px; }
.scale-builder-zoom { position: fixed; right: 14px; top: 50%; z-index: 2; display: grid; width: 42px; border: 1px solid #c8c8c1; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.scale-builder-zoom button,.scale-builder-zoom span { display: grid; min-height: 36px; place-items: center; border: 0; border-bottom: 1px solid #ddd; background: transparent; font-weight: 800; }
.scale-builder-zoom button { cursor: pointer; font-size: 1.1rem; }
.scale-builder-zoom span { font-size: .62rem; }
.scale-builder-zoom button:last-child { border-bottom: 0; }
.scale-builder-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid #d4d3cd; background: #fff; }
.scale-builder-footer-btn { min-width: 150px; min-height: 42px; padding: 8px 14px; border: 1px solid #b9b8af; border-radius: 5px; background: #fff; color: #343723; font-weight: 800; cursor: pointer; }
.scale-builder-footer-btn.primary { min-width: 230px; border-color: #7d2826; background: #7d2826; color: #fff; }

/* Master mold sheet builder: labels feed the existing mold registry. */
.mold-sheet-workflow-note { margin-bottom: 12px; padding: 11px 12px; border-left: 3px solid #7d2926; background: #f1eee8; }
.mold-sheet-workflow-note b,.mold-sheet-workflow-note span { display: block; }
.mold-sheet-workflow-note b { color: #343723; font-size: .75rem; }
.mold-sheet-workflow-note span { margin-top: 3px; color: #707166; font-size: .67rem; line-height: 1.45; }
.mold-sheet-part-list { display: grid; gap: 6px; }
.mold-sheet-part-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 58px 28px 30px; align-items: center; gap: 5px; min-height: 42px; padding: 5px; border: 1px solid #deddd6; background: #fff; }
.mold-sheet-part-row>b { display: grid; height: 30px; place-items: center; background: #ecebe4; color: #343723; font-size: .68rem; }
.mold-sheet-part-row input { min-width: 0; width: 100%; height: 30px; padding: 4px 7px; border: 1px solid #d3d2ca; background: #fff; color: #343723; }
.mold-sheet-part-row input[type=number] { text-align: center; }
.mold-sheet-part-row small { color: #6c6e63; font-size: .65rem; text-align: center; }
.mold-sheet-part-row button { width: 28px; height: 28px; border: 0; background: #f7ecea; color: #8f2925; cursor: pointer; }
.mold-sheet-paper { padding-bottom: 9mm; }
.mold-paper-visual { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; margin-top: 8px; }
.mold-paper-visual>strong { margin-bottom: 4px; font-size: 11px; }
.mold-paper-stage { position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid #eee; background: #fafafa; touch-action: none; }
.mold-paper-stage>img { width: 100%; height: 100%; }
.mold-paper-stage.empty { display: grid; place-items: center; color: #999; font-size: 10px; }
.mold-paper-annotation { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.mold-paper-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mold-paper-leader line { stroke: #7d2926; stroke-width: .22; vector-effect: non-scaling-stroke; }
.mold-paper-anchor { position: absolute; z-index: 4; width: 10px; height: 10px; padding: 0; transform: translate(-50%,-50%); border: 2px solid #7d2926; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.85); cursor: crosshair; pointer-events: auto; touch-action: none; }
.mold-paper-label { position: absolute; z-index: 5; display: inline-flex; max-width: 240px; align-items: center; padding: 0; transform: translate(-50%,-50%); border: 0; background: transparent; color: #222; cursor: move; pointer-events: auto; touch-action: none; }
.mold-paper-label b { display: grid; flex: 0 0 27px; height: 27px; place-items: center; background: #3d4930; color: #fff; font-size: 10px; }
.mold-paper-label span { display: -webkit-box; min-width: 0; max-width: 205px; overflow: hidden; padding: 6px 8px; border: 1px solid #aaa; background: rgba(255,255,255,.96); font-size: 11px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mold-paper-label:focus-visible,.mold-paper-anchor:focus-visible { outline: 2px solid #7d2926; outline-offset: 2px; }
.mold-paper-label.dragging { z-index: 8; }
.mold-paper-anchor.dragging { z-index: 9; transform: translate(-50%,-50%) scale(1.3); }
.mold-paper-bottom { flex: 0 0 auto; }
.mold-paper-table th,.mold-paper-table td { text-align: center; }
.mold-paper-table td:nth-child(2) { text-align: left; }
.mold-paper-weights { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 7px; border: 1px solid #d3d3cf; }
.mold-paper-weight-cell { display: grid; grid-template-columns: minmax(0,1fr) 62px 30px; min-width: 0; min-height: 46px; align-items: center; gap: 5px; padding: 6px 8px; border-right: 1px solid #d3d3cf; font-size: 10px; }
.mold-paper-weight-cell:last-child { border-right: 0; }
.mold-paper-weight-cell>span { min-width: 0; }
.mold-paper-weight-cell b,.mold-paper-weight-cell small { display: block; }
.mold-paper-weight-cell b { color: #343723; font-size: 10px; white-space: nowrap; }
.mold-paper-weight-cell small { margin-top: 2px; overflow: hidden; color: #77786f; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.mold-paper-weight-cell strong { display: grid; min-height: 26px; place-items: center; border-bottom: 1px solid #888; color: #343723; font-size: 11px; font-variant-numeric: tabular-nums; }
.mold-paper-weight-cell.is-empty strong { color: #999; font-weight: 500; }
.mold-paper-weight-cell em { color: #555; font-size: 9px; font-style: normal; }

@media print {
  .mold-sheet-print-host .mold-paper-label { color: #222 !important; }
  .mold-sheet-print-host .mold-paper-label b { background: #3d4930 !important; color: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mold-sheet-print-host .mold-paper-leader line { stroke: #7d2926 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mold-sheet-print-host .mold-paper-anchor { border-color: #7d2926 !important; background: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@media (max-width: 1100px) {
  .scale-builder-body { grid-template-columns: 330px minmax(0,1fr); }
  .scale-builder-controls { padding: 15px; }
  .scale-builder-paper-wrap { min-width: 794px; }
  .scale-builder-entry-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .document-certification-heading { align-items: stretch; flex-direction: column; }
  .document-certification-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .document-certification-slot { grid-template-columns: 1fr; }
  .document-certification-slot header,.document-certification-signed,.document-certification-slot .document-certification-sign,.document-certification-slot .document-certification-help { grid-column: 1; }
}

@media (max-width: 900px) {
  .scale-sheet-entry { grid-template-columns: 1fr; }
  .scale-sheet-entry-actions { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scale-sheet-board-page { grid-template-rows: 20px 200px 24px; width: min(100%, 360px); }
  .scale-sheet-board-summary { grid-template-columns: 1fr 1fr; }
  .scale-sheet-board-summary>div:nth-child(3) { grid-column: 1 / -1; }
  .scale-builder-app { grid-template-rows: 60px 48px minmax(0,1fr) auto; }
  .scale-builder-topbar { grid-template-columns: 52px minmax(0,1fr) 40px; padding: 0 12px; }
  .scale-builder-steps { padding: 6px 10px; }
  .scale-builder-steps button { font-size: 0; }
  .scale-builder-steps button span { margin: 0; font-size: .7rem; }
  .scale-builder-body { display: block; overflow: auto; }
  .scale-builder-controls { max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid #d2d2ca; }
  .scale-builder-preview-pane { min-height: 720px; overflow: auto; padding: 18px 48px 50px 12px; }
  .scale-builder-paper-wrap { min-width: 794px; }
  .scale-builder-zoom { position: absolute; top: 28px; }
  .scale-builder-footer { flex-wrap: wrap; padding: 9px 10px; }
  .scale-builder-footer-btn { min-width: 0; flex: 1 1 130px; }
  .scale-builder-footer-btn.primary { min-width: 0; flex-basis: 210px; }
}

@media (max-width: 600px) {
  .scale-sheet-entry { grid-template-columns: 1fr; padding: 15px; }
  .scale-sheet-entry-actions { min-width: 0; }
  .scale-sheet-entry-meta { align-items: flex-start; flex-direction: column; }
  .scale-sheet-board-page { grid-template-rows: 20px 190px 24px; }
  .scale-builder-dimension-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scale-builder-dimension-grid .unit { grid-column: auto; }
  .scale-builder-title strong { font-size: .94rem; }
  .scale-builder-controls { padding: 13px; }
  .scale-builder-entry-grid,.scale-builder-entry-grid.text-mode { grid-template-columns: 1fr 1fr; }
  .scale-builder-preview-pane { min-height: 600px; }
  .scale-builder-paper-wrap { min-width: 794px; }
  .scale-builder-footer-btn { font-size: .72rem; }
  .document-certification-heading { align-items: stretch; flex-direction: column; }
  .document-certification-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .document-certification-mode button { padding-inline: 7px; }
  .document-certification-slots { grid-template-columns: 1fr; }
  .document-certification-slot { display: block; border-right: 0; border-bottom: 1px solid #e4e1d7; }
  .document-certification-slot:last-child { border-bottom: 0; }
  .document-signature-canvas-wrap canvas { height: 180px; }
  .document-signature-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .document-signature-actions button.primary { grid-column: 1 / -1; }
}

.planning-placeholder {
  min-height: 420px;
  padding: 48px 24px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-top: 0;
  background: var(--color-palette-pearl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.planning-placeholder-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--color-coral);
  border: 1px solid rgba(var(--color-coral-rgb), 0.25);
  background: rgba(var(--color-coral-rgb), 0.05);
  border-radius: 6px;
}
.planning-placeholder-eyebrow {
  margin: 16px 0 5px;
  color: var(--color-coral);
  font-size: 0.72rem;
  font-weight: 800;
}
.planning-placeholder h2 {
  margin: 0;
  color: var(--color-juniper);
  font: 700 1.35rem 'Outfit', 'Sarabun', sans-serif;
  letter-spacing: 0;
}
.planning-placeholder > p:not(.planning-placeholder-eyebrow) {
  max-width: 560px;
  margin: 8px 0 20px;
  color: var(--color-juniper-light);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* Production status workspace: compact, readable and iPad-friendly. */
.production-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 2px solid rgba(var(--color-juniper-rgb), 0.12);
}

.production-data-alert {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--color-coral-rgb), 0.38);
  border-left: 4px solid var(--color-coral);
  border-radius: 6px;
  background: var(--color-palette-pearl, #F7F2E0);
  color: var(--color-juniper);
  box-shadow: 0 2px 8px rgba(var(--color-juniper-rgb), 0.08);
}
.production-data-alert-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--color-palette-pearl);
  font-weight: 900;
}
.production-data-alert strong,
.production-data-alert span { display: block; }
.production-data-alert strong { font-size: 0.84rem; }
.production-data-alert span {
  margin-top: 2px;
  color: var(--color-juniper-light);
  font-size: 0.76rem;
  line-height: 1.45;
}

#production-status-detail-panel .overall-progress-card {
  padding: 16px 18px;
  border-radius: 8px;
  box-shadow: none;
}
#production-status-detail-panel .overall-progress-header > div {
  min-width: 0;
}
.overall-progress-detail {
  color: var(--color-juniper-light);
  font-size: 0.76rem;
  font-weight: 700;
}
.production-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
}
.production-status-chip.is-active { background: var(--color-coral); }
.production-status-chip.is-waiting { background: var(--color-palette-olive); }
.production-status-chip.is-next { background: var(--color-leaf-dark); }
.production-status-chip.is-complete { background: var(--color-leaf); }

#production-status-detail-panel .overall-progress-bar {
  background: var(--color-leaf);
}
#production-status-detail-panel .wp-stepper-container {
  padding: 18px 20px !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
  box-shadow: none;
}
#production-status-detail-panel .wp-stepper-circle {
  box-shadow: none;
}
#production-status-detail-panel .wp-stepper-step.in-progress .wp-stepper-circle {
  background: var(--color-coral);
  border-color: var(--color-coral);
  box-shadow: 0 0 0 4px rgba(var(--color-coral-rgb), 0.15);
}
#production-status-detail-panel .wp-stepper-step.in-progress .wp-stepper-label {
  color: var(--color-coral);
}
#production-status-detail-panel .wp-stepper-step.waiting .wp-stepper-circle {
  background: var(--color-palette-olive);
  border-color: var(--color-palette-olive);
  box-shadow: 0 0 0 4px rgba(112, 123, 109, 0.15);
}
#production-status-detail-panel .wp-stepper-step.waiting .wp-stepper-label {
  color: var(--color-palette-olive);
}

#production-status-detail-panel .wp-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  overflow: visible;
  padding: 0;
  cursor: default;
}
#production-status-detail-panel .wp-process-card {
  width: auto;
  min-width: 0;
  border-radius: 8px;
  box-shadow: none;
}
#production-status-detail-panel .wp-process-card:hover {
  box-shadow: none;
}
#production-status-detail-panel .wp-process-header {
  min-height: 62px;
  padding: 13px 15px;
  gap: 10px;
}
#production-status-detail-panel .wp-process-header.theme-rosewood { background: var(--color-coral); }
#production-status-detail-panel .wp-process-header.theme-sage { background: var(--color-leaf); }
#production-status-detail-panel .wp-process-header.theme-misty { background: var(--color-palette-olive); color: #fff; }
#production-status-detail-panel .wp-process-header.theme-midnight { background: var(--color-juniper); }
#production-status-detail-panel .wp-process-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: 12px;
  gap: 12px;
}
#production-status-detail-panel .wp-process-card.is-collapsed .wp-process-body {
  display: none;
}
#production-status-detail-panel .wp-sub-step-card {
  padding: 13px;
  gap: 11px;
  border-radius: 6px;
  box-shadow: none;
}
.prod-step-schedule {
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) minmax(128px, 1fr) 18px minmax(128px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: rgba(247, 246, 241, 0.82);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-radius: 5px;
}
.prod-step-schedule-heading {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  color: var(--color-juniper);
  font-size: 0.76rem;
  font-weight: 800;
}
.prod-step-schedule-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.prod-step-schedule-field > span {
  color: rgba(var(--color-juniper-rgb), 0.72);
  font-size: 0.68rem;
  font-weight: 800;
}
.prod-step-schedule-field input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
}
.prod-step-schedule-arrow {
  align-self: center;
  color: rgba(var(--color-juniper-rgb), 0.55);
  font-size: 1rem;
  text-align: center;
}
.wp-sub-step-card.mode-view .prod-step-schedule input {
  color: var(--color-juniper);
  opacity: 1;
  -webkit-text-fill-color: var(--color-juniper);
}
.wp-sub-step-card.mode-edit .prod-step-schedule {
  background: #fff;
  border-color: rgba(var(--color-coral-rgb), 0.34);
}

/* Detailed production tasks use one compact layout across every Work Process surface. */
.work-task-checklist { position: relative; border: 1px solid rgba(var(--color-juniper-rgb), .14); border-radius: 6px; background: #fff; }
.work-task-checklist > header { position: relative; display: grid; grid-template-columns: minmax(180px, auto) 1fr auto; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; background: rgba(var(--color-leaf-rgb), .07); border-bottom: 1px solid rgba(var(--color-juniper-rgb), .12); border-radius: 6px 6px 0 0; }
.work-task-checklist > header > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.work-task-checklist > header strong { font-size: .76rem; color: var(--color-juniper); }
.work-task-checklist > header span { font-size: .66rem; color: var(--color-pewter); }
.work-task-progress { height: 5px; border-radius: 3px; background: rgba(var(--color-juniper-rgb), .1); overflow: hidden; }
.work-task-progress i { display: block; height: 100%; background: var(--color-leaf); transition: width .3s ease; }
.work-task-tip { position: relative; z-index: 12; }
.work-task-tip > summary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid rgba(var(--color-juniper-rgb), .18); border-radius: 5px; background: #fff; color: var(--color-juniper); cursor: pointer; list-style: none; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.work-task-tip > summary::-webkit-details-marker { display: none; }
.work-task-tip > summary:hover,
.work-task-tip[open] > summary { border-color: rgba(var(--color-coral-rgb), .45); background: #faf5ed; color: var(--color-coral); }
.work-task-tip > summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.work-task-tip > summary span { color: inherit; }
.work-task-tip-panel { position: absolute; top: calc(100% + 7px); right: 0; display: grid; gap: 8px; width: min(360px, calc(100vw - 48px)); padding: 11px; border: 1px solid rgba(var(--color-juniper-rgb), .18); border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(35, 38, 24, .16); }
.work-task-tip-panel::before { content: ''; position: absolute; top: -5px; right: 18px; width: 9px; height: 9px; border-top: 1px solid rgba(var(--color-juniper-rgb), .18); border-left: 1px solid rgba(var(--color-juniper-rgb), .18); background: #fff; transform: rotate(45deg); }
.work-task-list { display: grid; gap: 1px; background: rgba(var(--color-juniper-rgb), .1); }
.work-task-section-title { padding: 7px 12px; background: var(--color-candle); color: var(--color-juniper); font-size: .7rem; font-weight: 800; }
.work-task-row { background: #fff; }
.work-task-row[open] { background: #fbfaf6; }
.work-task-row.is-na { opacity: .62; }
.work-task-row summary { min-height: 40px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; }
.work-task-row summary::-webkit-details-marker { display: none; }
.work-task-row summary::after { content: '›'; font-size: 1.05rem; transform: rotate(90deg); transition: transform .18s ease; }
.work-task-row:not([open]) summary::after { transform: rotate(0deg); }
.work-task-number { font: 800 .7rem 'Outfit', sans-serif; color: var(--color-coral); }
.work-task-row summary strong { min-width: 0; font-size: .76rem; overflow-wrap: anywhere; }
.work-task-status-label, .work-task-qc { padding: 3px 6px; border-radius: 3px; font-size: .61rem; font-weight: 800; white-space: nowrap; }
.work-task-status-label { background: #efeee8; color: var(--color-pewter); }
.status-in_progress > summary .work-task-status-label { background: #fff0d8; color: #9a5c12; }
.status-waiting > summary .work-task-status-label { background: #e8eef0; color: #3d6674; }
.status-completed > summary .work-task-status-label { background: #e8f1e7; color: #42643f; }
.work-task-qc { background: var(--color-coral); color: #fff; }
.work-task-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 10px; border-top: 1px solid rgba(var(--color-juniper-rgb), .09); }
.work-task-fields label { min-width: 0; display: grid; gap: 4px; }
.work-task-fields label > span { font-size: .64rem; font-weight: 800; color: var(--color-juniper); }
.work-task-fields input, .work-task-fields select { width: 100%; min-width: 0; min-height: 34px; box-sizing: border-box; font-size: .72rem; }
.work-task-note-field { grid-column: span 3; }
.work-task-na { display: flex !important; flex-direction: row; align-items: center; align-self: end; min-height: 34px; }
.work-task-na input { width: 16px; min-height: 16px; }

.planning-vehicle-schedule { margin: 14px; border: 1px solid rgba(var(--color-juniper-rgb), .16); background: #fff; }
.planning-vehicle-schedule > header { min-height: 52px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(var(--color-juniper-rgb), .12); }
.planning-vehicle-schedule h3 { margin: 1px 0 0; font-size: .92rem; }
.planning-vehicle-schedule > header > span { color: var(--color-pewter); font-size: .7rem; }
.planning-vehicle-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.planning-vehicle-column { min-width: 0; min-height: 88px; padding: 8px; border-right: 1px solid rgba(var(--color-juniper-rgb), .1); }
.planning-vehicle-column:last-child { border-right: 0; }
.planning-vehicle-column h4 { margin: 0 0 6px; color: var(--color-juniper); font-size: .73rem; }
.planning-vehicle-column p { margin: 16px 0; text-align: center; color: #aaa; font-size: .67rem; }
.planning-vehicle-column button { width: 100%; display: grid; gap: 2px; padding: 7px; border: 1px solid rgba(var(--color-leaf-rgb), .22); border-radius: 4px; background: rgba(var(--color-leaf-rgb), .06); text-align: left; cursor: pointer; }
.planning-vehicle-column button + button { margin-top: 5px; }
.planning-vehicle-column button strong, .planning-vehicle-column button span, .planning-vehicle-column button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-vehicle-column button strong { font-size: .66rem; }
.planning-vehicle-column button span, .planning-vehicle-column button small { font-size: .59rem; color: var(--color-pewter); }

@media (max-width: 1100px) {
  .work-task-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-task-note-field { grid-column: span 2; }
  .planning-vehicle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planning-vehicle-column { border-bottom: 1px solid rgba(var(--color-juniper-rgb), .1); }
}
@media (max-width: 640px) {
  .work-task-checklist > header { grid-template-columns: minmax(0, 1fr) auto; }
  .work-task-checklist > header > .work-task-progress { grid-column: 1 / -1; grid-row: 2; }
  .work-task-tip { grid-column: 2; grid-row: 1; }
  .work-task-tip > summary span { display: none; }
  .work-task-tip > summary { width: 32px; padding: 4px; }
  .work-task-row summary { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .work-task-status-label { grid-column: 2; }
  .work-task-fields { grid-template-columns: 1fr; }
  .work-task-note-field { grid-column: auto; }
  .planning-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#production-status-detail-panel .wp-sub-step-card.status-in_progress {
  background: rgba(var(--color-coral-rgb), 0.045) !important;
  border-left-color: var(--color-coral) !important;
  border-color: rgba(var(--color-coral-rgb), 0.22) !important;
}
#production-status-detail-panel .wp-sub-step-card.status-waiting {
  background: rgba(112, 123, 109, 0.07) !important;
  border-left-color: var(--color-palette-olive) !important;
  border-color: rgba(112, 123, 109, 0.24) !important;
}
#production-status-detail-panel .wp-sub-step-card.status-completed {
  background: rgba(var(--color-leaf-rgb), 0.07) !important;
  border-left-color: var(--color-leaf) !important;
  border-color: rgba(var(--color-leaf-rgb), 0.2) !important;
}
.prod-step-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.completed-step-toggle {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid rgba(var(--color-leaf-rgb), 0.35);
  border-radius: 5px;
  background: transparent;
  color: var(--color-leaf-dark);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 800;
  cursor: pointer;
}
#production-status-detail-panel .wp-sub-step-card.mode-view:not(.is-expanded) > :not(.prod-step-header) {
  display: none !important;
}
#production-status-detail-panel .wp-sub-step-card.mode-view:not(.is-expanded) .prod-step-header {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

/* Keep the quick order drawer in sync with the full production tracker. */
#detail-drawer .overall-progress-card {
  padding: 16px 18px;
  border-radius: 8px;
  box-shadow: none;
}
#detail-drawer .overall-progress-bar { background: var(--color-leaf); }
#detail-drawer .wp-stepper-container {
  border-radius: 8px !important;
  box-shadow: none;
}
#detail-drawer .wp-stepper-circle { box-shadow: none; }
#detail-drawer .wp-stepper-step.in-progress .wp-stepper-circle {
  background: var(--color-coral);
  border-color: var(--color-coral);
  box-shadow: 0 0 0 4px rgba(var(--color-coral-rgb), 0.15);
}
#detail-drawer .wp-stepper-step.in-progress .wp-stepper-label { color: var(--color-coral); }
#detail-drawer .wp-stepper-step.waiting .wp-stepper-circle {
  background: var(--color-palette-olive);
  border-color: var(--color-palette-olive);
  box-shadow: 0 0 0 4px rgba(112, 123, 109, 0.15);
}
#detail-drawer .wp-stepper-step.waiting .wp-stepper-label { color: var(--color-palette-olive); }

#drawer-wp-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  overflow: visible;
  padding: 0;
  cursor: default;
}
#drawer-wp-process-grid .wp-process-card {
  width: auto;
  min-width: 0;
  align-self: start;
  border-radius: 8px;
  box-shadow: none;
}
#drawer-wp-process-grid .wp-process-card:hover { box-shadow: none; }
#drawer-wp-process-grid .wp-process-header {
  min-height: 62px;
  padding: 13px 15px;
}
#drawer-wp-process-grid .wp-process-header.theme-rosewood { background: var(--color-coral); }
#drawer-wp-process-grid .wp-process-header.theme-sage { background: var(--color-leaf); color: #fff; }
#drawer-wp-process-grid .wp-process-header.theme-misty { background: var(--color-palette-olive); color: #fff; }
#drawer-wp-process-grid .wp-process-header.theme-midnight { background: var(--color-juniper); }
#drawer-wp-process-grid .wp-process-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: 12px;
  gap: 12px;
}
#drawer-wp-process-grid .wp-process-card.is-collapsed .wp-process-body { display: none; }
#drawer-wp-process-grid .wp-sub-step-card {
  padding: 13px;
  gap: 11px;
  border-radius: 6px;
  box-shadow: none;
}
#drawer-wp-process-grid .wp-sub-step-card.status-in_progress {
  background: rgba(var(--color-coral-rgb), 0.045) !important;
  border-left-color: var(--color-coral) !important;
  border-color: rgba(var(--color-coral-rgb), 0.22) !important;
}
#drawer-wp-process-grid .wp-sub-step-card.status-waiting {
  background: rgba(112, 123, 109, 0.07) !important;
  border-left-color: var(--color-palette-olive) !important;
  border-color: rgba(112, 123, 109, 0.24) !important;
}
#drawer-wp-process-grid .wp-sub-step-card.status-completed {
  background: rgba(var(--color-leaf-rgb), 0.07) !important;
  border-left-color: var(--color-leaf) !important;
  border-color: rgba(var(--color-leaf-rgb), 0.2) !important;
}
#drawer-wp-process-grid .wp-sub-step-card.mode-view:not(.is-expanded) > :not(.prod-step-header) {
  display: none !important;
}
#drawer-wp-process-grid .wp-sub-step-card.mode-view:not(.is-expanded) .prod-step-header {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

@media (max-width: 1200px) {
  #drawer-wp-process-grid .wp-process-body { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  #production-status-detail-panel .wp-process-grid { grid-template-columns: 1fr; }
  #production-status-detail-panel .wp-process-body { grid-template-columns: 1fr; }
  #production-status-detail-panel .wp-stepper-container { padding-inline: 10px !important; }
  #production-status-detail-panel .wp-stepper-track { left: 24px !important; right: 24px !important; }
  .production-detail-toolbar > div:last-child { width: 100%; }
  .prod-step-schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prod-step-schedule-heading { grid-column: 1 / -1; }
  .prod-step-schedule-arrow { display: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .artwork-form-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding-inline: 8px;
  }
  .form-nav-container {
    width: 218px;
    position: sticky;
    top: 116px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    flex-shrink: 0;
  }
  .form-nav-container .form-nav-info-card,
  .form-tab-buttons-container {
    max-width: 218px !important;
  }
  .form-tab-buttons-container {
    flex-direction: column !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .form-tab-buttons-container .form-tab-btn {
    width: 100%;
    justify-content: flex-start;
  }
  .form-nav-container #form-cost-summary-card {
    position: static;
    width: 100% !important;
    max-width: 218px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
    border: 1px solid rgba(var(--color-juniper-rgb), 0.18) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(var(--color-juniper-rgb), 0.08) !important;
  }
  .form-nav-container #form-cost-summary-card .form-nav-title {
    display: block;
  }
  .form-nav-container .artwork-form-actions {
    max-width: 218px;
  }
  .form-sections-column {
    padding-bottom: 0;
  }
  .form-sections-column {
    min-width: 0;
    flex: 1 1 auto;
  }
  #production-status-detail-panel .wp-process-grid {
    grid-template-columns: 1fr;
  }
  #production-status-detail-panel .wp-process-body {
    grid-template-columns: 1fr;
  }
}

/* Production control palette and hierarchy. */
#production-status-detail-panel {
  --production-charcoal: #3c3c3c;
  --production-slate: #6b7b84;
  --production-pine: #2d4530;
  --production-sand: #e1dbc9;
  --production-earth: #5e4b3b;
  --production-paper: #fbfaf6;
  color: var(--production-charcoal);
}
.production-command-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  overflow: hidden;
  padding: 24px 26px 0;
  border: 1px solid rgba(60, 60, 60, 0.24);
  border-top: 7px solid var(--production-pine);
  border-radius: 8px;
  background: var(--production-charcoal);
  color: #fff;
}
.production-command-copy { min-width: 0; }
.production-command-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--production-sand);
  font: 800 0.7rem 'Outfit', 'Sarabun', sans-serif;
  letter-spacing: 0;
}
.production-command-copy h3 {
  margin: 0;
  color: #fff;
  font: 800 1.75rem 'Outfit', 'Sarabun', sans-serif;
  letter-spacing: 0;
}
.production-command-copy p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  line-height: 1.55;
}
.production-command-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.production-print-button {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}
.production-print-button:hover { background: rgba(255, 255, 255, 0.1) !important; }
.production-command-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.1);
}
.production-command-stats > div {
  min-width: 0;
  padding: 13px 18px 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.production-command-stats > div:last-child { border-right: 0; }
.production-command-stats span,
.production-command-stats strong { display: block; }
.production-command-stats > div > span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 700;
}
.production-command-stats strong {
  margin-top: 3px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.25;
}
.production-deadline-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.65rem !important;
  font-weight: 800;
  line-height: 1.3;
}
.production-deadline-chip.is-on-track { color: #d9ead7; }
.production-deadline-chip.is-due { color: #f4cc75; }
.production-deadline-chip.is-late { color: #f2a39e; }
.production-deadline-chip.is-unscheduled { color: var(--production-sand); }

#production-status-detail-panel .overall-progress-card {
  border-color: rgba(45, 69, 48, 0.28);
  background: var(--production-paper);
}
#production-status-detail-panel .overall-progress-bar { background: var(--production-pine); }
#production-status-detail-panel .wp-process-grid { gap: 14px; }
#production-status-detail-panel .wp-process-card {
  overflow: hidden;
  border: 1px solid rgba(60, 60, 60, 0.22);
  background: var(--production-paper);
}
#production-status-detail-panel .wp-process-card.is-current {
  border-color: var(--production-earth);
  box-shadow: 0 0 0 2px rgba(94, 75, 59, 0.12);
}
#production-status-detail-panel .wp-process-header,
#production-status-detail-panel .wp-process-header.theme-rosewood,
#production-status-detail-panel .wp-process-header.theme-sage,
#production-status-detail-panel .wp-process-header.theme-misty,
#production-status-detail-panel .wp-process-header.theme-midnight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  grid-template-rows: auto auto;
  min-height: 70px;
  padding: 13px 16px;
  border-top: 4px solid transparent;
  background: var(--production-sand);
  color: var(--production-charcoal);
  text-align: left;
}
#production-status-detail-panel .wp-process-card.phase-active .wp-process-header {
  border-top-color: var(--production-earth);
  background: var(--production-slate);
  color: #fff;
}
#production-status-detail-panel .wp-process-card.phase-completed .wp-process-header {
  border-top-color: var(--production-pine);
  background: #e8eee5;
  color: var(--production-pine);
}
#production-status-detail-panel .wp-process-card.phase-waiting .wp-process-header {
  border-top-color: #b8ae99;
  background: #f2eee4;
  color: var(--production-charcoal);
}
#production-status-detail-panel .wp-process-sequence {
  grid-column: 1;
  grid-row: 1;
  color: currentColor;
  opacity: 0.78;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}
#production-status-detail-panel .wp-process-title {
  grid-column: 1;
  grid-row: 2;
  margin: 3px 0 0;
  font-size: 1rem;
  line-height: 1.35;
}
#production-status-detail-panel .wp-process-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: currentColor;
  opacity: 0.9;
  font-size: 0.68rem;
}
#production-status-detail-panel .wp-process-chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}
#production-status-detail-panel .wp-process-body {
  padding: 14px;
  gap: 14px;
  background: #f4f1e9;
}
#production-status-detail-panel .wp-sub-step-card {
  border: 1px solid rgba(60, 60, 60, 0.18) !important;
  border-left: 5px solid var(--production-sand) !important;
  background: #fff !important;
}
#production-status-detail-panel .wp-sub-step-card.status-in_progress {
  border-left-color: var(--production-earth) !important;
  background: rgba(225, 219, 201, 0.32) !important;
}
#production-status-detail-panel .wp-sub-step-card.status-waiting {
  border-left-color: var(--production-slate) !important;
  background: rgba(107, 123, 132, 0.07) !important;
}
#production-status-detail-panel .wp-sub-step-card.status-completed {
  border-left-color: var(--production-pine) !important;
  background: rgba(45, 69, 48, 0.05) !important;
}
#production-status-detail-panel .prod-step-title { font-size: 0.92rem; }
#production-status-detail-panel .completed-step-toggle { min-height: 30px; font-size: 0.72rem; }
#production-status-detail-panel .prod-step-schedule-heading,
#production-status-detail-panel .work-task-checklist > header strong { font-size: 0.78rem; }
#production-status-detail-panel .work-task-checklist > header span { font-size: 0.7rem; }
#production-status-detail-panel .work-task-overview-row {
  min-height: 46px;
  border-left: 4px solid transparent;
  font-size: 0.76rem;
}
#production-status-detail-panel .work-task-overview-row.is-current {
  border-left-color: var(--production-slate);
  background: rgba(107, 123, 132, 0.12);
}
#production-status-detail-panel .work-task-overview-name { font-size: 0.8rem; font-weight: 800; }
#production-status-detail-panel .work-task-status-label { font-size: 0.68rem; }
#production-status-detail-panel .work-task-overview-row.status-in_progress .work-task-status-label {
  background: #eadfca;
  color: var(--production-earth);
}
#production-status-detail-panel .work-task-overview-row.status-waiting .work-task-status-label {
  background: #dfe7ea;
  color: #405a67;
}
#production-status-detail-panel .work-task-overview-row.status-completed .work-task-status-label {
  background: #e0eadf;
  color: var(--production-pine);
}

@media (max-width: 760px) {
  .production-command-header { grid-template-columns: 1fr; padding: 20px 18px 0; }
  .production-command-actions { justify-content: flex-start; }
  .production-command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -18px; }
  .production-command-stats > div:nth-child(2) { border-right: 0; }
  .production-command-stats > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  #production-status-detail-panel .wp-process-header,
  #production-status-detail-panel .wp-process-header.theme-rosewood,
  #production-status-detail-panel .wp-process-header.theme-sage,
  #production-status-detail-panel .wp-process-header.theme-misty,
  #production-status-detail-panel .wp-process-header.theme-midnight {
    grid-template-columns: minmax(0, 1fr) 22px;
  }
  #production-status-detail-panel .wp-process-badge { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 7px; }
  #production-status-detail-panel .wp-process-chevron { grid-column: 2; }
}

@media (max-width: 560px) {
  #production-status-detail-panel .overall-progress-header { align-items: flex-start; gap: 8px; }
  #production-status-detail-panel .overall-progress-pct { flex-shrink: 0; }
  #production-status-detail-panel .wp-process-title { font-size: 0.95rem; }
  #production-status-detail-panel .wp-process-badge { padding-inline: 8px; }
  #production-status-detail-panel .prod-step-header { align-items: flex-start; gap: 8px; }
  .prod-step-schedule { grid-template-columns: 1fr; }
  .prod-step-schedule-heading { grid-column: auto; }
}

@media (max-width: 1180px) {
  .planning-filter-bar { align-items: stretch; flex-direction: column; }
  .planning-filter-actions { justify-content: space-between; }
  .planning-search { width: min(520px, 70vw); }
  .planning-table-shell { max-height: calc(100vh - 390px); }
}

/* Project master v2: compact prototype record with independent commercial history. */
.prototype-fee-total{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2px;padding-top:10px;border-top:3px solid #8b2725}
.prototype-fee-total>div{display:grid;min-width:0;gap:2px;padding:9px 11px;border:1px solid rgba(52,55,35,.16);border-radius:5px;background:#fff}
.prototype-fee-total span{color:rgba(52,55,35,.62);font-size:.68rem;font-weight:800}
.prototype-fee-total strong{overflow:hidden;color:#343723;font-size:.94rem;font-weight:900;letter-spacing:0;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.prototype-fee-total-cost{background:#fcfaf2!important;border-color:#d6cbab!important}
.prototype-fee-total-sell{background:#edf3e9!important;border-color:#afc2a4!important}.prototype-fee-total-sell strong{color:#385d34}
@media(max-width:520px){.prototype-fee-total{grid-template-columns:1fr}.prototype-fee-total strong{text-align:left}}

#db-artwork-full-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-master-summary {
  display: grid;
  grid-template-columns: 120px 0.8fr 1.8fr repeat(4, minmax(120px, 1fr));
  align-items: stretch;
  min-height: 92px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(var(--color-juniper-rgb), 0.06);
}

.project-master-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: var(--color-leaf-dark);
  background: rgba(var(--color-leaf-rgb), 0.08);
  border: 1px solid rgba(var(--color-leaf-rgb), 0.35);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
}
.project-master-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-master-fact {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px;
  border-left: 1px solid rgba(var(--color-juniper-rgb), 0.15);
}
.project-master-fact strong { color: var(--color-juniper); font-size: 0.94rem; overflow-wrap: anywhere; }
.project-master-fact:nth-child(2) strong { white-space: nowrap; font-size: 0.8rem; overflow-wrap: normal; }
.project-master-name strong { font-size: 1rem; }
.project-master-fact span { color: rgba(var(--color-juniper-rgb), 0.62); font-size: 0.68rem; font-weight: 700; }
.project-master-count strong { color: var(--color-coral); }

.project-master-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.25);
}
.project-master-tabs .form-tab-btn {
  min-height: 48px;
  justify-content: center;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.46);
}
.project-master-tabs .form-tab-btn.active { color: #fff; background: var(--color-juniper); border-color: var(--color-juniper); }

#db-artwork-full-form .artwork-form-layout { display: block; width: 100%; max-width: none; padding: 0; }
#db-artwork-full-form .form-nav-container { display: none !important; }
#db-artwork-full-form .form-sections-column { width: 100%; min-width: 0; }

.project-master-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  min-height: 580px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  border-radius: 6px;
  overflow: hidden;
}
.project-section-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 34px 10px 10px;
  background: rgba(var(--color-candle-rgb), 0.64);
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.16);
}
.project-section-rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 37px;
  right: 17px;
  bottom: 37px;
  width: 1px;
  background: rgba(125, 41, 38, 0.18);
}
.project-section-button {
  position: relative;
  z-index: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.project-section-button span { min-width: 0; }
.project-section-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(125, 41, 38, 0.22);
  background: #F7F6F1;
  box-shadow: 0 0 0 3px rgba(247, 246, 241, 0.9);
}
.project-section-button:hover { filter: brightness(1.06); }
.project-section-button:focus-visible {
  outline: 3px solid rgba(125, 41, 38, 0.34);
  outline-offset: 2px;
}
.project-section-button.active {
  filter: none;
  box-shadow: none;
}
.project-section-button.active:focus-visible {
  outline: none;
}
.project-section-button.active::after {
  width: 16px;
  height: 16px;
  right: -26px;
  border-color: #7D2926;
  background: #7D2926;
  box-shadow: 0 0 0 4px rgba(247, 246, 241, 0.96), 0 0 0 5px rgba(125, 41, 38, 0.14);
}
.project-section-button.theme-green { color: #F7F6F1; background: #1B2417; }
.project-section-button.theme-project-images { color: #F7F6F1; background: #2B371D; }
.project-section-button.theme-scale-details { color: #F7F6F1; background: #3E4A29; }
.project-section-button.theme-blue { color: #F7F6F1; background: #566036; }
.project-section-button.theme-purple { color: #FFFFFF; background: #727A49; }
.project-section-button.theme-amber { color: #292B29; background: #999A6E; }
.project-section-button.theme-red { color: #2F3130; background: #F5F1EA; }
.project-section-button.theme-teal { color: #2F3130; background: #D7C9B8; }
.project-section-button.theme-rose { color: #2F3130; background: #B2967D; }
.project-section-button.theme-bronze { color: #F7F6F1; background: #7D5A44; }
.project-section-button.theme-gray { color: #F7F6F1; background: #4A342A; }

.project-section-stage { min-width: 0; padding: 18px 22px 24px; background: rgba(255, 255, 255, 0.68); }
.project-section-content { padding: 0 !important; background: transparent !important; }
.project-section-content::before {
  content: attr(data-project-section-title);
  display: block;
  margin-bottom: 18px;
  padding: 0 0 10px 14px;
  color: var(--color-juniper);
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-left: 5px solid var(--color-coral);
  font-family: 'Outfit', 'Sarabun', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}
.project-section-content .form-section-card { margin: 0 0 16px; padding: 0; background: transparent; border: 0; box-shadow: none; }

.project-history-panel { display: flex; flex-direction: column; gap: 16px; }
.project-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; background: rgba(var(--color-leaf-rgb), 0.08); border: 1px solid rgba(var(--color-leaf-rgb), 0.22); border-radius: 5px; }
.project-history-heading > div { display: flex; flex-direction: column; gap: 3px; }
.project-history-heading strong { color: var(--color-juniper); }
.project-history-heading span { color: rgba(var(--color-juniper-rgb), 0.66); font-size: 0.76rem; }
.project-history-create,
.project-history-empty button { padding: 8px 12px; color: var(--color-coral); background: rgba(var(--color-coral-rgb), 0.05); border: 1px solid rgba(var(--color-coral-rgb), 0.35); border-radius: 4px; font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.project-history-table-wrap { overflow-x: auto; border: 1px solid #e5e5e5; border-radius: 4px; }
.project-history-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.project-history-table th { padding: 10px; text-align: center !important; background: #f2f2f2; color: #222; font-size: 0.74rem; }
.project-history-table td { padding: 11px 10px; border-top: 1px solid #eee; color: #333; font-size: 0.77rem; vertical-align: top; }
.project-history-date { color: #777; font-size: 0.68rem; margin-top: 3px; }
.project-history-amount { text-align: right; white-space: nowrap; }
.project-history-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-juniper); border: 1px dashed rgba(var(--color-juniper-rgb), 0.25); border-radius: 5px; }
.project-history-empty span { font-size: 0.78rem; color: rgba(var(--color-juniper-rgb), 0.62); }
.project-history-cards { display: flex; flex-direction: column; gap: 12px; }
.project-history-card { border: 1px solid #dfdfdf; border-radius: 6px; overflow: hidden; background: #fff; }
.project-history-card > header { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 86px; padding: 14px 16px; background: #f7f7f7; border-bottom: 1px solid #e7e7e7; }
.project-history-round-index { grid-row: 1 / span 2; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-right: 12px; border-right: 1px solid #ddd; }
.project-history-round-index small { color: #70736d; font-size: 0.66rem; line-height: 1.25; text-align: center; }
.project-history-round-index strong { color: var(--color-coral); font-size: 1.12rem; line-height: 1; }
.project-history-card-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-history-card-identity > strong { color: var(--color-juniper); font-size: 0.98rem; line-height: 1.25; }
.project-history-card-identity > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5f625d; font-size: 0.78rem; line-height: 1.4; }
.project-history-status { grid-column: 3; min-width: 102px; padding: 5px 10px; border-radius: 3px; font-size: 0.72rem; line-height: 1.2; font-weight: 800; text-align: center; white-space: nowrap; }
.project-history-status.is-agreed { color: #35563b; background: #e5eee4; }
.project-history-status.is-pending { color: #725b18; background: #f4edd8; }
.project-history-status.is-rejected { color: #7d2826; background: #f5e4e2; }
.project-history-card > header button { min-height: 36px; padding: 8px 12px; border: 1px solid rgba(var(--color-coral-rgb), 0.35); border-radius: 4px; background: #fff; color: var(--color-coral); font: inherit; font-size: 0.78rem; line-height: 1.2; font-weight: 800; cursor: pointer; }
.project-history-card-total { grid-column: 2; min-width: 125px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.project-history-card-total small { color: #70736d; font-size: 0.7rem; line-height: 1.3; }
.project-history-card-total strong { color: var(--color-coral); font-size: 0.9rem; line-height: 1.25; white-space: nowrap; }
.project-history-lines { display: flex; flex-direction: column; }
.project-history-line { display: grid; grid-template-columns: minmax(190px, 2fr) repeat(4, minmax(82px, 0.8fr)); gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #eee; }
.project-history-line.history-wax { grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.28fr); }
.project-history-line.history-packaging,
.project-history-line.history-special { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(90px, 0.72fr)); }
.project-history-line:last-child { border-bottom: 0; }
.project-history-line > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-history-line small { color: #777; font-size: 0.64rem; }
.project-history-line strong { color: #333; font-size: 0.76rem; overflow-wrap: anywhere; }
.project-history-line-main > strong { font-size: 0.8rem; }
.project-history-line-main > small { color: var(--color-palette-olive); }
.project-history-line-price { text-align: right; }
.project-history-card > footer { padding: 8px 14px; border-top: 1px solid #eee; background: #fafafa; color: #666; font-size: 0.68rem; }
.project-history-source-note { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-left: 4px solid var(--color-coral); background: rgba(var(--color-coral-rgb), 0.04); color: var(--color-juniper); }
.project-history-source-note strong { font-size: 0.76rem; }
.project-history-source-note span { color: rgba(var(--color-juniper-rgb), 0.68); font-size: 0.72rem; }
.project-history-round-empty { min-height: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px; text-align: center; }
.project-history-round-empty strong { color: var(--color-juniper); font-size: 0.86rem; line-height: 1.35; }
.project-history-round-empty span { max-width: 620px; color: #6c6f69; font-size: 0.76rem; line-height: 1.45; }
.project-legacy-storage { display: none !important; }
.project-linked-history {
  margin-top: 22px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
}
.project-linked-history > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  color: var(--color-juniper);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.project-linked-history > summary::-webkit-details-marker { display: none; }
.project-linked-history > summary::after { content: "+"; font-size: 1.15rem; font-weight: 500; }
.project-linked-history[open] > summary::after { content: "−"; }
.project-linked-history > summary small { margin-left: auto; color: rgba(var(--color-juniper-rgb), 0.62); font-size: 0.7rem; font-weight: 600; }
.project-linked-history-content { padding: 14px; border-top: 1px solid rgba(var(--color-juniper-rgb), 0.14); }

@media (max-width: 760px) {
  .project-linked-history > summary { align-items: flex-start; flex-direction: column; gap: 2px; padding-right: 40px; position: relative; }
  .project-linked-history > summary small { margin-left: 0; }
  .project-linked-history > summary::after { position: absolute; top: 12px; right: 14px; }
}

.project-master-footer {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(var(--color-juniper-rgb), 0.18);
  border-radius: 6px;
  box-shadow: 0 -3px 12px rgba(var(--color-juniper-rgb), 0.08);
  backdrop-filter: blur(6px);
}
.project-master-footer[hidden] { display: none !important; }
.project-master-footer .artwork-form-save-btn { flex: 0 1 280px; width: auto; }
.project-master-footer .artwork-form-cancel-btn { flex: 0 1 220px; width: auto; }

.content-header.project-form-header {
  min-height: 120px;
  height: auto;
  gap: 24px;
  padding-block: 14px;
  box-sizing: border-box;
}
.project-form-page-title {
  flex: 1 1 auto;
  min-width: 260px;
  max-width: 460px;
}
.project-form-page-title .page-title-main {
  font-size: 2.7rem;
  line-height: 0.96;
  letter-spacing: 0;
  white-space: nowrap;
}
.project-form-page-title .page-title-sub {
  max-width: 430px;
  font-size: 1rem;
  line-height: 1.35;
}
.project-form-header .header-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 10px;
}
.project-form-header .header-actions .btn { min-height: 42px; padding: 8px 13px !important; margin-right: 0 !important; }

.order-production-qty-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(210px, 1.8fr);
  align-items: end;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(var(--color-leaf-rgb), 0.08);
  border: 1px solid rgba(var(--color-leaf-rgb), 0.2);
  border-radius: 5px;
}
.order-production-qty-row label { display: flex; flex-direction: column; gap: 3px; color: var(--color-juniper); font-size: 0.68rem; font-weight: 800; }
.order-production-qty-row input { height: 32px; padding: 5px 8px; text-align: right; }
.order-production-qty-row .item-order-qty-readonly { color: #777; background: #f2f2f2; }
.order-production-qty-row span { align-self: center; color: rgba(var(--color-juniper-rgb), 0.62); font-size: 0.68rem; line-height: 1.35; }

@media (max-width: 1100px) {
  .project-master-summary { grid-template-columns: 90px repeat(3, minmax(130px, 1fr)); }
  .project-master-fact { border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1); }
  .project-master-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .project-history-card > header { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 8px 12px; padding: 13px 14px; }
  .project-history-status { justify-self: end; }
  .project-history-line { grid-template-columns: minmax(150px, 1.6fr) repeat(2, minmax(90px, 1fr)); }
  .project-history-line.history-metal,
  .project-history-line.history-finish,
  .project-history-line.history-packaging,
  .project-history-line.history-special { grid-template-columns: minmax(150px, 1.6fr) repeat(2, minmax(90px, 1fr)); }
  .project-history-line-price { text-align: left; }
  .project-form-page-title { max-width: 340px; }
  .project-form-page-title .page-title-main { font-size: 2.25rem; }
  .project-form-page-title .page-title-sub { font-size: 0.88rem; }
  .project-form-header .header-actions .btn { padding-inline: 10px !important; font-size: 0.78rem; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .project-images-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .content-header.project-form-header { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 16px; }
  .project-form-page-title { width: 100%; max-width: none; min-width: 0; }
  .project-form-page-title .page-title-main { font-size: 2rem; }
  .project-form-header .header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .project-form-header .header-actions .btn:last-child { grid-column: 1 / -1; justify-content: center; }
  .project-master-summary { grid-template-columns: 80px 1fr 1fr; }
  .project-master-name { grid-column: span 2; }
  .project-master-tabs { grid-template-columns: repeat(3, minmax(110px, 1fr)); overflow-x: auto; }
  .project-master-tabs .form-tab-btn { padding: 8px; font-size: 0.74rem; }
  .project-master-workspace { display: block; min-height: 0; }
  .project-section-rail { flex-direction: row; overflow-x: auto; padding: 10px 10px 34px; border-right: 0; border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.16); }
  .project-section-rail::after { top: auto; right: 115px; bottom: 17px; left: 115px; width: auto; height: 1px; }
  .project-section-button { min-width: 210px; min-height: 48px; }
  .project-section-button::after { top: auto; right: auto; bottom: -25px; left: 50%; transform: translateX(-50%); }
  .project-section-button.active::after { right: auto; bottom: -26px; }
  .project-section-stage { padding: 16px 12px 20px; }
  .project-history-heading { align-items: flex-start; flex-direction: column; }
  .project-history-source-note { grid-template-columns: 1fr; gap: 3px; }
  .project-history-card > header { grid-template-columns: 62px minmax(0, 1fr); gap: 9px 12px; min-height: 0; padding: 13px; }
  .project-history-round-index { grid-row: 1 / span 3; }
  .project-history-round-index small { font-size: 0.62rem; }
  .project-history-round-index strong { font-size: 1.04rem; }
  .project-history-card-identity > strong { font-size: 0.92rem; }
  .project-history-card-identity > span { white-space: normal; font-size: 0.74rem; }
  .project-history-status { grid-column: 2; justify-self: start; }
  .project-history-card-total { grid-column: 2; align-items: flex-start; }
  .project-history-card > header button { grid-column: 1 / -1; width: 100%; }
  .project-history-line { grid-template-columns: 1fr 1fr; }
  .project-history-line.history-wax,
  .project-history-line.history-metal,
  .project-history-line.history-finish,
  .project-history-line.history-packaging,
  .project-history-line.history-special { grid-template-columns: 1fr 1fr; }
  .project-history-line-main { grid-column: 1 / -1; }
  .project-master-footer { bottom: 6px; padding: 10px; gap: 8px; }
  .project-master-footer .artwork-form-save-btn,
  .project-master-footer .artwork-form-cancel-btn { flex: 1 1 50%; min-width: 0; }
  .order-production-qty-row { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .order-production-qty-row span { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .planning-workspace-header { grid-template-columns: 1fr; }
  .planning-workspace-tabs { grid-template-columns: repeat(var(--planning-tab-count, 3), minmax(160px, 1fr)); }
  .planning-workspace-tab { min-height: 48px; padding: 7px 10px; }
  .planning-workspace-actions { justify-content: flex-end; border-left: 0; border-top: 1px solid rgba(var(--color-juniper-rgb), 0.14); }
  .planning-queue-modebar { justify-content: space-between; }
  .planning-queue-switch { width: auto; }
  .planning-queue-switch button { min-width: 112px; padding-inline: 10px; }
  .planning-workspace-tab small { display: none; }
  .planning-kpi-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .planning-kpi:nth-child(2) { border-right: 0; }
  .planning-kpi:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.12); }
  .planning-filter-main { display: grid; grid-template-columns: 1fr 1fr; }
  .planning-segmented { grid-column: 1 / -1; }
  .planning-field select { width: 100%; }
  .planning-filter-actions { flex-wrap: nowrap; }
  .planning-search { width: 100%; min-width: 0; }
  .planning-print-button span { display: none; }
  .planning-print-button { width: 44px; padding: 0; flex: 0 0 44px; }
  .planning-table-shell { max-height: none; }
}

@media (max-width: 560px) {
  .planning-queue-modebar { align-items: stretch; flex-direction: column; gap: 8px; }
  .planning-queue-switch { width: 100%; }
  .planning-queue-switch button { flex: 1 1 50%; min-width: 0; }
}

/* Planning Center: production flow and urgent control */
.planning-tool-shell {
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-top: 0;
  background: #fff;
  min-width: 0;
}
.planning-tool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: #fff;
}
.planning-tool-toolbar h2,
.planning-tool-toolbar p { margin: 0; }
.planning-tool-toolbar h2 { font-size: 1.15rem; line-height: 1.35; }
.planning-tool-toolbar p:not(.planning-tool-eyebrow) { margin-top: 3px; color: var(--color-pewter); font-size: 0.78rem; }
.planning-tool-eyebrow { color: var(--color-coral); font: 800 0.64rem 'Outfit', sans-serif; }
.planning-tool-search { width: min(360px, 42%); flex: 0 1 360px; background: var(--color-palette-pearl); }
.planning-tool-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  background: var(--color-candle);
}
.planning-tool-kpis button {
  min-height: 68px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.12);
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-juniper);
  text-align: left;
  cursor: pointer;
}
.planning-tool-kpis button:last-child { border-right: 0; }
.planning-tool-kpis button:hover { background: rgba(var(--color-leaf-rgb), 0.1); }
.planning-tool-kpis button.active { border-bottom-color: var(--color-leaf-dark); background: #fff; }
.planning-tool-kpis button.is-waiting.active { border-bottom-color: #b9782d; }
.planning-tool-kpis button.is-overdue.active { border-bottom-color: var(--color-coral); }
.planning-tool-kpis span { display: block; font-size: 0.7rem; font-weight: 700; }
.planning-tool-kpis strong { display: block; margin-top: 2px; font: 700 1.35rem 'Outfit', sans-serif; }
.planning-process-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--color-leaf-dark) var(--color-candle-darker);
  padding: 14px;
  box-sizing: border-box;
  background: #f7f7f5;
}
.planning-process-board {
  display: grid;
  grid-template-columns: repeat(10, 244px);
  gap: 10px;
  min-width: max-content;
}
.planning-stage {
  min-height: 490px;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.planning-stage > header {
  min-height: 50px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #fff;
  background: #52606d;
}
.planning-stage-2 > header { background: #718793; }
.planning-stage-3 > header { background: #98adb1; color: var(--color-juniper); }
.planning-stage-4 > header { background: #b7beb1; color: var(--color-juniper); }
.planning-stage-5 > header { background: #c5c3ad; color: var(--color-juniper); }
.planning-stage-6 > header { background: #d8ccb0; color: var(--color-juniper); }
.planning-stage-7 > header { background: #aaa495; color: var(--color-juniper); }
.planning-stage-8 > header { background: #8c887e; }
.planning-stage-9 > header { background: #68665f; }
.planning-stage > header h3 { margin: 0; font-size: 0.82rem; }
.planning-stage > header > strong { min-width: 23px; text-align: center; font-size: 0.75rem; }
.planning-stage-number { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--color-juniper); font-size: 0.7rem; font-weight: 800; }
.planning-stage-list { max-height: 570px; display: flex; flex-direction: column; gap: 8px; padding: 9px; overflow-y: auto; }
.planning-stage-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 132px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-left: 4px solid var(--color-leaf);
  border-radius: 4px;
  background: #fff;
  color: var(--color-juniper);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(35,37,23,.07);
}
.planning-stage-card:hover { border-color: var(--color-leaf-dark); transform: translateY(-1px); }
.planning-stage-card.is-waiting { border-left-color: #b9782d; }
.planning-stage-card.is-overdue { border-left-color: var(--color-coral); }
.planning-stage-card-code { display: block; max-width: 100%; overflow-wrap: anywhere; color: var(--color-leaf-dark); font: 700 0.63rem 'Outfit', sans-serif; }
.planning-stage-card > strong {
  display: -webkit-box;
  max-width: 100%;
  margin: 3px 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.78rem;
  line-height: 1.35;
}
.planning-stage-card > small { display: block; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; color: var(--color-pewter); font-size: 0.68rem; }
.planning-stage-card-meta,
.planning-stage-card-footer { display: flex; min-width: 0; max-width: 100%; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; font-size: 0.65rem; }
.planning-stage-card-meta > *,
.planning-stage-card-footer > * { min-width: 0; }
.planning-stage-card-meta { padding-top: 7px; border-top: 1px solid #eee; }
.planning-stage-card-meta em { color: var(--color-leaf-dark); font-style: normal; }
.planning-stage-card-meta em.danger { color: var(--color-coral); font-weight: 800; }
.planning-stage-card-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-stage-empty { min-height: 110px; display: grid; place-items: center; border: 1px dashed #d8d8d2; color: #8b8b80; font-size: 0.7rem; text-align: center; }

.planning-urgent-heading { border-left: 4px solid var(--color-coral); }
.planning-urgent-toolbar-actions { width: min(530px, 54%); display: flex; align-items: center; gap: 10px; }
.planning-urgent-toolbar-actions .planning-tool-search { width: auto; flex: 1 1 260px; }
.planning-urgent-add-button {
  min-width: 146px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-coral);
  border-radius: 5px;
  background: var(--color-coral);
  color: #fff;
  font: 800 .82rem 'Sarabun', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(var(--color-coral-rgb), .18);
}
.planning-urgent-add-button span { margin-right: 4px; font-size: 1.15rem; }
.planning-urgent-intake { padding: 16px; border-top: 5px solid var(--color-coral); border-bottom: 8px solid var(--color-candle); background: #f8eeeb; }
.planning-urgent-intake > header { min-height: 64px; padding: 0 0 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(var(--color-juniper-rgb), .14); }
.planning-urgent-intake > header span { color: var(--color-coral); font-size: .7rem; font-weight: 800; }
.planning-urgent-intake > header h3 { margin: 2px 0; font-size: 1rem; }
.planning-urgent-intake > header p { margin: 0; color: var(--color-pewter); font-size: .72rem; }
.planning-urgent-intake > header > button { width: 42px; height: 42px; border: 1px solid #ddd9d0; border-radius: 50%; background: #fff; color: var(--color-juniper); font-size: 1.4rem; cursor: pointer; }
.planning-intake-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 0; }
.planning-intake-types button { min-height: 92px; padding: 10px 11px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto 1fr; gap: 3px 7px; border: 1px solid #dcd9d0; border-radius: 5px; background: #faf9f6; color: var(--color-juniper); text-align: left; cursor: pointer; }
.planning-intake-types button > span { grid-row: 1 / 3; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid #bcb8ac; border-radius: 50%; color: #fff; font-size: .7rem; }
.planning-intake-types button strong { align-self: end; font-size: .78rem; }
.planning-intake-types button small { color: var(--color-pewter); font-size: .63rem; line-height: 1.35; }
.planning-intake-types button.active { border: 2px solid var(--color-coral); background: rgba(var(--color-coral-rgb), .05); }
.planning-intake-types button.active > span { border-color: var(--color-coral); background: var(--color-coral); }
.planning-intake-source { display: grid; grid-template-columns: minmax(0, 1.25fr) 46px minmax(230px, .75fr); align-items: stretch; gap: 8px; }
.planning-intake-existing { min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #d7c7c1; background: rgba(255,255,255,.68); }
.planning-intake-existing label { font-size: .72rem; font-weight: 800; }
.planning-intake-search-box { min-height: 46px; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; border: 2px solid #c9c3b7; border-radius: 5px; background: #fff; }
.planning-intake-search-box:focus-within { border-color: var(--color-coral); box-shadow: 0 0 0 3px rgba(var(--color-coral-rgb),.1); }
.planning-intake-search-box > span { text-align: center; color: var(--color-coral); font: 700 1.25rem 'Outfit', sans-serif; }
.planning-intake-search-box input { width: 100%; min-width: 0; height: 42px; padding: 0 10px 0 0; border: 0; outline: 0; background: transparent; color: var(--color-juniper-dark); font: 700 .76rem 'Sarabun', sans-serif; }
.planning-intake-results { max-height: 248px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.planning-intake-result { width: 100%; min-height: 58px; padding: 7px 9px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #d9d6cc; border-radius: 4px; background: #fff; color: var(--color-juniper); text-align: left; cursor: pointer; }
.planning-intake-result > span { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #bcb8ac; border-radius: 50%; color: #fff; font-size: .66rem; font-weight: 900; }
.planning-intake-result strong,
.planning-intake-result small { display: block; overflow-wrap: anywhere; }
.planning-intake-result strong { font-size: .7rem; line-height: 1.35; }
.planning-intake-result small { margin-top: 2px; color: var(--color-pewter); font-size: .59rem; line-height: 1.35; }
.planning-intake-result.active { border: 2px solid var(--color-coral); background: rgba(var(--color-coral-rgb),.06); }
.planning-intake-result.active > span { border-color: var(--color-coral); background: var(--color-coral); }
.planning-intake-no-results { min-height: 84px; display: grid; place-content: center; gap: 3px; padding: 12px; border: 1px dashed #d1ccc0; color: var(--color-pewter); text-align: center; }
.planning-intake-no-results strong { color: var(--color-juniper); font-size: .72rem; }
.planning-intake-no-results span { font-size: .62rem; }
.planning-intake-confirm { min-height: 46px; padding: 0 12px; border: 1px solid var(--color-leaf-dark); border-radius: 4px; background: var(--color-leaf-dark); color: #fff; font: 800 .74rem 'Sarabun', sans-serif; cursor: pointer; }
.planning-intake-confirm:disabled { border-color: #cbc7ba; background: #e4e1d8; color: #817e73; cursor: not-allowed; }
.planning-intake-divider { display: grid; place-items: center; color: var(--color-pewter); font-size: .65rem; font-weight: 800; }
.planning-intake-create { min-height: 78px; padding: 10px 12px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-content: center; gap: 3px 8px; border: 1px solid rgba(var(--color-coral-rgb), .38); border-radius: 5px; background: rgba(var(--color-coral-rgb), .04); color: var(--color-coral); text-align: left; cursor: pointer; }
.planning-intake-create > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-coral); color: #fff; font-size: 1.2rem; }
.planning-intake-create strong { font-size: .78rem; }
.planning-intake-create small { color: var(--color-pewter); font-size: .61rem; line-height: 1.3; }
.planning-urgent-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.5fr); min-width: 0; background: var(--color-candle); }
.planning-urgent-queue { border-top: 5px solid var(--color-leaf-dark); border-right: 6px solid var(--color-candle); min-width: 0; background: #f3f0e2; }
.planning-urgent-queue > header,
.planning-urgent-impact > header { min-height: 62px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.12); background: #dfe5dc; }
.planning-urgent-queue > header { min-height: 62px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.12); background: #e6e0c8; }
.planning-urgent-queue header span,
.planning-urgent-impact header span { display: block; font-size: .68rem; color: var(--color-pewter); }
.planning-urgent-queue header strong,
.planning-urgent-impact header strong { display: block; font-size: .9rem; }
.planning-urgent-queue header small { max-width: 170px; color: var(--color-pewter); font-size: .64rem; text-align: right; }
.planning-urgent-step-heading > div { min-width: 0; }
.planning-urgent-step-heading > div > small { display: block; margin-top: 3px; color: var(--color-pewter); font-size: .62rem; }
.planning-urgent-list { max-height: 560px; overflow-y: auto; padding: 10px; background: #f3f0e2; }
.planning-urgent-item { width: 100%; min-height: 112px; margin-bottom: 8px; padding: 12px 12px 11px 46px; border: 2px solid transparent; border-radius: 5px; background: #fff; color: var(--color-juniper); text-align: left; cursor: pointer; position: relative; box-shadow: 0 1px 4px rgba(35,37,23,.06); }
.planning-urgent-item.active { border-color: var(--color-coral); background: rgba(var(--color-coral-rgb), .06); box-shadow: 0 3px 10px rgba(var(--color-coral-rgb), .12); }
.planning-urgent-select-mark { position: absolute; left: 12px; top: 14px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #aaa79e; border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 900; }
.planning-urgent-item.active .planning-urgent-select-mark { border-color: var(--color-coral); background: var(--color-coral); }
.planning-urgent-type-label { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 3px; background: rgba(var(--color-juniper-rgb), .07); color: var(--color-juniper); font-size: .61rem; font-weight: 800; }
.planning-urgent-selected-label { position: absolute; right: 9px; bottom: 8px; color: var(--color-coral); font-size: .62rem; }
.planning-urgent-item > strong,
.planning-urgent-item > small { display: block; margin-top: 7px; }
.planning-urgent-item > strong { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.35; }
.planning-urgent-item > small { color: var(--color-pewter); font-size: .68rem; }
.planning-urgent-level { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #fff1df; color: #995b16; font-size: .62rem; font-weight: 800; }
.planning-urgent-level.danger { background: #f8e5e3; color: var(--color-coral); }
.planning-urgent-impact { min-width: 0; border-top: 5px solid var(--color-palette-olive); background: #edf0ea; }
.planning-urgent-impact > header button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(var(--color-coral-rgb),.36); border-radius: 4px; background: #fff; color: var(--color-coral); font-weight: 700; cursor: pointer; }
.planning-impact-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #e8e6df; }
.planning-impact-summary div { min-height: 70px; padding: 12px; border-right: 1px solid #e8e6df; }
.planning-impact-summary div:last-child { border-right: 0; }
.planning-impact-summary span { display: block; color: var(--color-pewter); font-size: .65rem; }
.planning-impact-summary strong { display: block; margin-top: 5px; font-size: .78rem; }
.planning-urgent-route { margin: 12px; border: 1px solid rgba(var(--color-palette-olive-rgb, 112,123,109), .32); background: rgba(255,255,255,.72); }
.planning-urgent-route > header { min-height: 54px; padding: 9px 11px; display: flex; align-items: center; border-bottom: 1px solid rgba(var(--color-juniper-rgb),.11); background: rgba(112,123,109,.08); }
.planning-urgent-route > header div { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 7px; }
.planning-urgent-route > header span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-palette-olive); color: #fff; font: 800 .66rem 'Outfit', sans-serif; }
.planning-urgent-route > header strong { color: var(--color-juniper-dark); font-size: .76rem; }
.planning-urgent-route > header small { color: var(--color-pewter); font-size: .59rem; line-height: 1.35; }
.planning-urgent-start-steps { padding: 9px; display: grid; grid-template-columns: repeat(10, minmax(54px,1fr)); gap: 5px; }
.planning-urgent-start-steps button { min-width: 0; min-height: 62px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d5d5cd; border-radius: 4px; background: #fff; color: var(--color-juniper); cursor: pointer; }
.planning-urgent-start-steps button > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #c8c8c0; border-radius: 50%; background: var(--color-candle); font: 800 .63rem 'Outfit', sans-serif; }
.planning-urgent-start-steps button strong { max-width: 100%; font-size: .55rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.planning-urgent-start-steps button.before-start { opacity: .45; background: #ecece8; }
.planning-urgent-start-steps button.active { border: 2px solid var(--color-coral); background: rgba(var(--color-coral-rgb),.07); color: var(--color-coral-dark); box-shadow: 0 2px 7px rgba(var(--color-coral-rgb),.12); }
.planning-urgent-start-steps button.active > span { border-color: var(--color-coral); background: var(--color-coral); color: #fff; }
.planning-urgent-route-list { max-height: 430px; overflow-y: auto; }
.planning-urgent-route-row { min-height: 76px; padding: 8px 9px; display: grid; grid-template-columns: 30px minmax(92px,.65fr) minmax(210px,1.6fr) 76px; align-items: center; gap: 8px; border-bottom: 1px solid rgba(var(--color-juniper-rgb),.1); background: rgba(255,255,255,.55); }
.planning-urgent-route-row:last-child { border-bottom: 0; }
.planning-urgent-route-row.is-start { border-left: 4px solid var(--color-coral); background: rgba(var(--color-coral-rgb),.045); }
.planning-urgent-route-row.has-assignee { box-shadow: inset 0 0 0 1px rgba(var(--color-leaf-rgb),.16); }
.planning-urgent-route-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-palette-olive); color: #fff; font: 800 .68rem 'Outfit', sans-serif; }
.planning-urgent-route-name strong,
.planning-urgent-route-name small { display: block; }
.planning-urgent-route-name strong { color: var(--color-juniper-dark); font-size: .72rem; }
.planning-urgent-route-name small { margin-top: 2px; color: var(--color-pewter); font-size: .54rem; line-height: 1.3; overflow-wrap: anywhere; }
.planning-urgent-route-row label { min-width: 0; }
.planning-urgent-route-row label > span { display: block; margin-bottom: 3px; color: var(--color-pewter); font-size: .54rem; font-weight: 700; }
.planning-urgent-route-row select { width: 100%; min-width: 0; min-height: 40px; padding: 0 8px; border: 1px solid #c9c8bf; border-radius: 4px; background: #fff; color: var(--color-juniper-dark); font: 700 .64rem 'Sarabun', sans-serif; }
.planning-urgent-route-row.is-start select { border: 2px solid rgba(var(--color-coral-rgb),.58); }
.planning-urgent-route-load { text-align: right; }
.planning-urgent-route-load strong,
.planning-urgent-route-load small { display: block; }
.planning-urgent-route-load strong { color: var(--color-coral); font: 800 .72rem 'Outfit', sans-serif; }
.planning-urgent-route-load small { margin-top: 2px; color: var(--color-pewter); font-size: .5rem; line-height: 1.25; }
.planning-urgent-subheading { margin: 12px 12px 0; padding: 9px 11px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 7px; border: 1px solid rgba(var(--color-juniper-rgb),.13); background: rgba(var(--color-leaf-rgb),.08); }
.planning-urgent-subheading > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-leaf-dark); color: #fff; font: 800 .66rem 'Outfit', sans-serif; }
.planning-urgent-subheading strong,
.planning-urgent-subheading small { display: block; }
.planning-urgent-subheading strong { font-size: .75rem; }
.planning-urgent-subheading small { margin-top: 2px; color: var(--color-pewter); font-size: .58rem; }
.planning-strategy-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.planning-strategy-list label { min-height: 88px; display: flex; gap: 8px; padding: 10px; border: 1px solid #dedbd2; border-radius: 4px; cursor: pointer; }
.planning-strategy-list label.active { border-color: var(--color-leaf-dark); background: rgba(var(--color-leaf-rgb), .1); }
.planning-strategy-list input { margin-top: 2px; accent-color: var(--color-coral); }
.planning-strategy-list strong,
.planning-strategy-list small { display: block; }
.planning-strategy-list strong { font-size: .72rem; line-height: 1.35; }
.planning-strategy-list small { margin-top: 5px; color: var(--color-pewter); font-size: .63rem; }
.planning-affected-list { margin: 0 12px; padding: 12px; border: 1px solid #e5e2da; background: #fafaf8; }
.planning-affected-list h3 { margin: 0 0 7px; font-size: .77rem; }
.planning-affected-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #eceae4; font-size: .68rem; }
.planning-affected-list > div small { color: var(--color-pewter); text-align: right; }
.planning-affected-list p { margin: 0; color: var(--color-pewter); font-size: .68rem; }
.planning-urgent-impact footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px; }
.planning-primary-button { min-height: 42px; padding: 0 16px; border: 1px solid var(--color-coral); border-radius: 4px; background: var(--color-coral); color: #fff; font-weight: 800; cursor: pointer; }
.planning-urgent-history { border-top: 8px solid var(--color-candle); }
.planning-urgent-history header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--color-juniper); color: #fff; }
.planning-urgent-history h3 { margin: 0; font-size: .86rem; }
.planning-urgent-history > div { display: grid; grid-template-columns: 82px minmax(140px,.7fr) 1fr; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eceae4; font-size: .7rem; }
.planning-urgent-history > div span { color: #9a651e; font-weight: 800; }
.planning-urgent-history > div span.approved { color: #2e7d4a; }
.planning-urgent-history > p { margin: 0; padding: 18px; color: var(--color-pewter); font-size: .72rem; }
.planning-tool-empty { min-height: 160px; display: grid; place-content: center; gap: 4px; padding: 20px; color: var(--color-pewter); text-align: center; }
.planning-tool-empty strong,
.planning-tool-empty span { display: block; }
.planning-tool-empty span { font-size: .7rem; }

@media (max-width: 980px) {
  .planning-tool-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .planning-tool-search { width: 100%; flex-basis: auto; }
  .planning-urgent-toolbar-actions { width: 100%; }
  .planning-intake-types { grid-template-columns: repeat(2, 1fr); }
  .planning-intake-source { grid-template-columns: 1fr; }
  .planning-intake-divider { min-height: 22px; }
  .planning-tool-kpis { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; }
  .planning-urgent-layout { grid-template-columns: 1fr; }
  .planning-urgent-queue { border-right: 0; border-bottom: 8px solid var(--color-candle); }
  .planning-urgent-list { max-height: 300px; }
}

@media (max-width: 680px) {
  .planning-process-scroll { padding: 9px; }
  .planning-process-board { grid-template-columns: repeat(10, 224px); }
  .planning-stage { min-height: 430px; }
  .planning-impact-summary,
  .planning-strategy-list { grid-template-columns: 1fr; }
  .planning-impact-summary div { min-height: 58px; border-right: 0; border-bottom: 1px solid #e8e6df; }
  .planning-urgent-history > div { grid-template-columns: 76px 1fr; }
  .planning-urgent-history > div small { grid-column: 1 / -1; }
  .planning-urgent-toolbar-actions { align-items: stretch; flex-direction: column; }
  .planning-urgent-add-button { width: 100%; }
  .planning-intake-types { grid-template-columns: 1fr; }
  .planning-intake-results { max-height: 220px; }
  .planning-urgent-start-steps { grid-template-columns: repeat(3, 1fr); }
  .planning-urgent-route-row { grid-template-columns: 30px minmax(0,1fr) 64px; }
  .planning-urgent-route-row label { grid-column: 2 / -1; }
}

/* Keep the tablet sidebar truly icon-only after legacy profile rules. */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar .nav-menu { gap: 7px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
  .sidebar .nav-item {
    min-height: 62px !important;
    padding: 8px 3px 7px !important;
    flex-direction: column !important;
    gap: 4px !important;
    touch-action: manipulation;
  }
  .sidebar .nav-item svg { width: 21px !important; height: 21px !important; }
  .sidebar .nav-item::after {
    display: block;
    color: rgba(247, 242, 224, 0.82);
    font: 700 0.54rem/1 'Outfit', 'Inter', sans-serif;
    letter-spacing: 0;
  }
  .sidebar .nav-item.active::after { color: #ffffff; }
  .sidebar .sidebar-user-profile {
    width: 52px !important;
    min-height: 52px !important;
    padding: 6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
  .sidebar .sidebar-user-profile .user-info,
  .sidebar .sidebar-user-profile .btn-logout,
  .sidebar .sidebar-footer br {
    display: none !important;
  }
  .sidebar .sidebar-user-profile > div { flex-grow: 0 !important; }
  .sidebar .sidebar-footer { font-size: 0 !important; }
  .sidebar #admin-user-management-btn,
  .sidebar #admin-cloud-settings-btn {
    width: 56px !important;
    height: 58px !important;
    padding: 7px 3px !important;
    flex-direction: column !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }
  .sidebar #admin-user-management-btn::after,
  .sidebar #admin-cloud-settings-btn::after {
    content: attr(data-short);
    color: rgba(247, 242, 224, 0.82);
    font: 700 0.52rem/1 'Outfit', sans-serif;
  }
}

/* Project catalog: shared calm workspace language with a catalog-specific layout. */
.project-catalog-add {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  background: var(--color-coral) !important;
  border-color: var(--color-coral) !important;
  color: #fff !important;
}

.artwork-catalog {
  width: min(1120px, 100%);
  margin: 0 auto;
  color: var(--color-juniper);
}

.artwork-catalog-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(52, 55, 35, 0.18);
  background: #f8f4e8;
  overflow: hidden;
}

.artwork-catalog-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid rgba(52, 55, 35, 0.13);
  background: transparent;
  color: var(--color-juniper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.artwork-catalog-tab:last-child { border-right: 0; }
.artwork-catalog-tab b {
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(52, 55, 35, 0.08);
  font-size: 0.78rem;
}
.artwork-catalog-tab.is-active {
  background: var(--color-juniper);
  color: #fff;
}
.artwork-catalog-tab.is-active::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 3px;
  background: var(--color-coral);
}
.artwork-catalog-tab.is-active b { background: rgba(255, 255, 255, 0.16); }

.artwork-catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 230px;
  gap: 16px;
  padding: 18px;
  background: #dfd9c7;
  border-right: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 1px solid rgba(52, 55, 35, 0.18);
}
.artwork-catalog-search {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  background: #fffdf8;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 6px;
}
.artwork-catalog-search svg {
  width: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.artwork-catalog-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-juniper);
  font: inherit;
}
.artwork-catalog-filter { display: grid; gap: 4px; }
.artwork-catalog-filter span { font-size: 0.72rem; font-weight: 700; }
.artwork-catalog-filter select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--color-juniper);
  font: inherit;
  font-weight: 600;
}

.artwork-catalog-list {
  border-right: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 1px solid rgba(52, 55, 35, 0.18);
  background: rgba(255, 255, 255, 0.72);
}
.artwork-catalog-row {
  display: grid;
  grid-template-columns: 72px minmax(210px, 1.3fr) minmax(230px, 1.2fr) minmax(180px, .9fr) 146px;
  gap: 10px;
  align-items: center;
  min-height: 116px;
  padding: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(52, 55, 35, 0.13);
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.artwork-catalog-row:hover,
.artwork-catalog-row:focus-visible {
  z-index: 1;
  outline: none;
  background: #fffdf8;
  box-shadow: inset 4px 0 0 var(--color-coral);
}
.artwork-catalog-thumb { width: 72px; height: 72px; }
.artwork-catalog-image-wrap,
.artwork-catalog-image,
.artwork-catalog-placeholder {
  display: block;
  width: 72px;
  height: 72px;
}
.artwork-catalog-image {
  object-fit: cover;
  border: 1px solid rgba(52, 55, 35, 0.15);
  border-radius: 4px;
  background: #f1eee5;
}
.artwork-catalog-image[hidden] { display: none; }
.artwork-catalog-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed rgba(52, 55, 35, 0.24);
  border-radius: 4px;
  background: #f3f1e9;
  color: rgba(52, 55, 35, 0.55);
}
.artwork-catalog-placeholder[hidden] { display: none; }
.artwork-catalog-placeholder svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.artwork-catalog-placeholder small { font-size: 0.64rem; }
.artwork-catalog-primary,
.artwork-catalog-owner { min-width: 0; }
.artwork-catalog-code { color: var(--color-coral); font-family: monospace; font-size: 0.78rem; font-weight: 800; }
.artwork-catalog-primary h3 {
  margin: 3px 0 6px;
  overflow-wrap: anywhere;
  color: var(--color-juniper);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0;
}
.artwork-catalog-primary p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; color: rgba(52, 55, 35, 0.7); font-size: 0.78rem; }
.artwork-catalog-primary p i { width: 1px; height: 14px; background: rgba(52, 55, 35, 0.2); }
.artwork-catalog-owner { display: grid; gap: 3px; }
.artwork-catalog-owner span { color: rgba(52, 55, 35, 0.58); font-size: 0.7rem; }
.artwork-catalog-owner strong { overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.35; }
.artwork-catalog-owner small { color: var(--color-leaf-dark); font-size: 0.7rem; font-weight: 700; }
.artwork-catalog-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(52, 55, 35, 0.13); background: #f8f6ef; }
.artwork-catalog-history > div { min-width: 0; padding: 9px 6px; border-right: 1px solid rgba(52, 55, 35, 0.11); text-align: center; }
.artwork-catalog-history > div:last-child { border-right: 0; }
.artwork-catalog-history strong,
.artwork-catalog-history span { display: block; }
.artwork-catalog-history strong { font-size: 1rem; }
.artwork-catalog-history span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  color: rgba(52, 55, 35, 0.68);
  font-size: 0.62rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}
.artwork-catalog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 146px;
}
.artwork-open-btn,
.artwork-more summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(125, 40, 38, .28);
  border-radius: 6px;
  background: rgba(125, 40, 38, .04);
  color: var(--color-coral);
  cursor: pointer;
}
.artwork-open-btn { gap: 5px; padding: 0 10px; font: inherit; font-size: .76rem; font-weight: 800; }
.artwork-open-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.artwork-more { position: relative; }
.artwork-more summary { width: 44px; list-style: none; }
.artwork-more summary::-webkit-details-marker { display: none; }
.artwork-more summary svg { width: 20px; height: 20px; fill: currentColor; }
.artwork-more > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: 150px;
  padding: 6px;
  border: 1px solid rgba(52, 55, 35, .16);
  background: #fffdf8;
  box-shadow: 0 8px 20px rgba(35, 37, 23, .15);
}
.artwork-more button { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: transparent; color: var(--color-juniper); font: inherit; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; }
.artwork-more button:hover { background: rgba(52, 55, 35, .06); }
.artwork-more button.is-danger { color: var(--color-coral); }
.artwork-catalog-empty { display: grid; place-items: center; gap: 6px; min-height: 240px; padding: 30px; text-align: center; }
.artwork-catalog-empty svg { width: 32px; height: 32px; fill: none; stroke: rgba(52, 55, 35, .45); stroke-width: 1.6; }
.artwork-catalog-empty span { color: rgba(52, 55, 35, .6); font-size: .85rem; }
.artwork-catalog-pagination { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 10px 16px; border: 1px solid rgba(52, 55, 35, .18); background: #f8f4e8; }
.artwork-catalog-pagination > span { color: rgba(52, 55, 35, .68); font-size: .78rem; }
.artwork-catalog-pagination > div { display: flex; align-items: center; gap: 5px; }
.artwork-page-btn { min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid rgba(52, 55, 35, .16); border-radius: 4px; background: #fff; color: var(--color-juniper); font: inherit; font-weight: 700; cursor: pointer; }
.artwork-page-btn.is-active { background: var(--color-juniper); color: #fff; }
.artwork-page-btn:disabled { opacity: .4; cursor: default; }
.artwork-page-gap { padding: 0 3px; }

/* Internal orders workspace */
.internal-orders {
  width: min(1120px, 100%);
  margin: 0 auto;
  color: var(--color-juniper);
}
.internal-orders-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, .18);
  background: #f8f4e8;
}
.internal-orders-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-right: 1px solid rgba(52, 55, 35, .13);
  background: transparent;
  color: var(--color-juniper);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.internal-orders-tab:last-child { border-right: 0; }
.internal-orders-tab span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.internal-orders-tab b {
  min-width: 27px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(52, 55, 35, .08);
  font-size: .76rem;
}
.internal-orders-tab.is-active { background: var(--color-juniper); color: #fff; }
.internal-orders-tab.is-active::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 3px;
  background: var(--color-coral);
}
.internal-orders-tab.is-active b { background: rgba(255,255,255,.17); }

.internal-orders-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
  border-right: 1px solid rgba(52, 55, 35, .18);
  border-left: 1px solid rgba(52, 55, 35, .18);
  background: #dfd9c7;
}
.internal-orders-search {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(52, 55, 35, .18);
  border-radius: 6px;
  background: #fffdf8;
}
.internal-orders-search svg {
  width: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.internal-orders-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-juniper);
  font: inherit;
}
.internal-orders-sort { display: grid; gap: 4px; }
.internal-orders-sort span { font-size: .72rem; font-weight: 750; }
.internal-orders-sort select {
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(52, 55, 35, .18);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--color-juniper);
  font: inherit;
  font-weight: 650;
}
.internal-orders-list {
  border-right: 1px solid rgba(52, 55, 35, .18);
  border-left: 1px solid rgba(52, 55, 35, .18);
  background: rgba(255,255,255,.72);
}
.internal-order-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(190px, .95fr) minmax(250px, 1.25fr) minmax(170px, .8fr);
  gap: 18px;
  align-items: center;
  min-height: 148px;
  padding: 18px 20px 18px 24px;
  border-bottom: 1px solid rgba(52, 55, 35, .13);
  background: rgba(255,255,255,.64);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.internal-order-row::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  background: var(--color-leaf);
}
.internal-order-row.is-overdue::before { background: var(--color-coral); }
.internal-order-row.is-waiting::before { background: #b9a36b; }
.internal-order-row.is-shipped::before { background: #707b6d; }
.internal-order-row:hover,
.internal-order-row:focus-visible { z-index: 1; outline: 0; background: #fffdf8; box-shadow: 0 4px 16px rgba(35,37,23,.08); }
.internal-order-identity,
.internal-order-production,
.internal-order-progress,
.internal-order-people { min-width: 0; }
.internal-order-identity {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.internal-order-identity-copy { display: grid; min-width: 0; gap: 5px; }
.internal-order-thumbnail,
.internal-order-thumbnail > img,
.internal-order-thumbnail-fallback {
  width: 76px;
  height: 76px;
}
.internal-order-thumbnail {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(52,55,35,.16);
  border-radius: 4px;
  background: #f3f1e9;
}
.internal-order-thumbnail > img { display: block; object-fit: cover; }
.internal-order-thumbnail > img[hidden] { display: none; }
.internal-order-thumbnail.is-empty,
.internal-order-thumbnail-fallback {
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed rgba(52,55,35,.22);
  background: #f3f1e9;
  color: rgba(52,55,35,.5);
}
.internal-order-thumbnail.is-empty { display: grid; }
.internal-order-thumbnail-fallback { display: grid; }
.internal-order-thumbnail-fallback[hidden] { display: none; }
.internal-order-thumbnail svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.internal-order-thumbnail small { font-size: .6rem; }
.internal-order-code { display: flex; align-items: center; gap: 8px; }
.internal-order-code span { color: var(--color-coral); font-family: monospace; font-size: .8rem; font-weight: 850; }
.internal-order-code small,
.internal-order-section-label,
.internal-order-production span,
.internal-order-identity p span { color: rgba(52,55,35,.58); font-size: .68rem; }
.internal-order-identity h3 { margin: 0; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.35; letter-spacing: 0; }
.internal-order-identity p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.internal-order-identity p strong { font-size: .82rem; }
.internal-order-production { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px; }
.internal-order-production > div { display: grid; gap: 2px; }
.internal-order-production strong { overflow-wrap: anywhere; font-size: .86rem; line-height: 1.3; }
.internal-order-production strong small { font-size: .7rem; font-weight: 600; }
.internal-order-material {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(52,55,35,.1);
  border-radius: 4px;
  background: var(--material-bg);
  color: var(--material-fg);
  font-size: .72rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.internal-order-material.is-empty { background: #f1eee5; color: rgba(52,55,35,.58); }
.internal-order-note { grid-column: 1 / -1; margin: 0; color: rgba(52,55,35,.65); font-size: .7rem; line-height: 1.35; }
.internal-order-progress { display: grid; gap: 9px; }
.internal-order-status-line,
.internal-order-progress-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.internal-order-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(52,55,35,.14);
  border-radius: 999px;
  background: rgba(137,136,97,.12);
  color: var(--color-leaf-dark);
  font-size: .72rem;
  font-weight: 850;
}
.internal-order-status.is-overdue { border-color: rgba(125,40,38,.24); background: rgba(125,40,38,.08); color: var(--color-coral); }
.internal-order-status.is-waiting { background: rgba(218,194,178,.28); color: #6c584f; }
.internal-order-status.is-shipped { background: rgba(112,123,109,.13); color: #4e6452; }
.internal-order-deadline { display: grid; gap: 1px; color: var(--color-juniper); font-size: .8rem; font-weight: 750; text-align: right; }
.internal-order-deadline small { color: rgba(52,55,35,.55); font-size: .64rem; font-weight: 650; }
.internal-order-progress-line { color: rgba(52,55,35,.66); font-size: .7rem; }
.internal-order-progress-line strong { color: var(--color-juniper); font-size: .76rem; }
.internal-order-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(52,55,35,.1); }
.internal-order-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--color-leaf); }
.internal-order-row.is-overdue .internal-order-progress-track i { background: var(--color-coral); }
.internal-order-row.is-shipped .internal-order-progress-track i { background: #707b6d; }
.internal-order-people { display: grid; gap: 8px; }
.internal-order-artisans { min-height: 34px; }
.internal-order-artisans .artisan-table-badge { min-width: 0; }
.internal-order-artisans .artisan-avatar-name {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.internal-order-actions { display: flex; align-items: center; gap: 6px; }
.internal-order-open,
.internal-order-more summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(125,40,38,.3);
  border-radius: 6px;
  background: rgba(125,40,38,.045);
  color: var(--color-coral);
  cursor: pointer;
}
.internal-order-open { flex: 1; gap: 5px; padding: 0 12px; font: inherit; font-size: .76rem; font-weight: 850; }
.internal-order-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.internal-order-more { position: relative; }
.internal-order-more summary { width: 44px; list-style: none; }
.internal-order-more summary::-webkit-details-marker { display: none; }
.internal-order-more summary svg { width: 20px; height: 20px; fill: currentColor; }
.internal-order-more > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 180px;
  padding: 6px;
  border: 1px solid rgba(52,55,35,.16);
  background: #fffdf8;
  box-shadow: 0 8px 20px rgba(35,37,23,.16);
}
.internal-order-more button { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; background: transparent; color: var(--color-juniper); font: inherit; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; }
.internal-order-more button:hover { background: rgba(52,55,35,.06); }
.internal-order-more button.is-danger { color: var(--color-coral); }
.internal-orders-empty { display: grid; place-items: center; gap: 6px; min-height: 230px; padding: 30px; text-align: center; }
.internal-orders-empty span { color: rgba(52,55,35,.62); font-size: .82rem; }
.internal-orders-pagination { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 16px; border: 1px solid rgba(52,55,35,.18); background: #f8f4e8; }
.internal-orders-pagination > span { color: rgba(52,55,35,.66); font-size: .78rem; }
.internal-orders-pagination > div { display: flex; gap: 5px; }
.internal-order-page { min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid rgba(52,55,35,.16); border-radius: 4px; background: #fff; color: var(--color-juniper); font: inherit; font-weight: 750; cursor: pointer; }
.internal-order-page.is-active { background: var(--color-juniper); color: #fff; }
.internal-order-page:disabled { opacity: .4; cursor: default; }

@media (max-width: 1450px) {
  .internal-order-row { grid-template-columns: minmax(240px,1.15fr) minmax(210px,1fr) minmax(250px,1.15fr); }
  .internal-order-people { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(180px,1fr) 210px; align-items: center; padding-top: 10px; border-top: 1px dashed rgba(52,55,35,.14); }
}
@media (max-width: 900px) {
  .internal-orders-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .internal-orders-tab { min-height: 54px; padding: 8px 5px; gap: 5px; font-size: .74rem; }
  .internal-orders-tab b { min-width: 23px; padding: 2px 5px; font-size: .66rem; }
  .internal-orders-toolbar { grid-template-columns: minmax(0,1fr) 200px; }
  .internal-order-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .internal-order-progress { align-self: stretch; padding: 12px; border: 1px solid rgba(52,55,35,.12); background: #f8f6ef; }
  .internal-order-people { grid-column: 1 / -1; grid-template-columns: auto minmax(150px,1fr) 210px; }
}
@media (max-width: 620px) {
  .internal-orders-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .internal-orders-tab { border-bottom: 1px solid rgba(52,55,35,.13); }
  .internal-orders-tab:first-child { grid-column: 1 / -1; }
  .internal-orders-toolbar { grid-template-columns: 1fr; padding: 12px; }
  .internal-order-row { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px 16px 18px; }
  .internal-order-people { grid-column: 1; grid-template-columns: 1fr; }
  .internal-orders-pagination { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 1420px) {
  .artwork-catalog-row {
    grid-template-columns: 72px minmax(185px, 1.1fr) minmax(245px, 1.35fr) minmax(170px, .9fr) 146px;
  }
  .artwork-catalog-actions { grid-column: 5; }
}

@media (max-width: 1180px) {
  .artwork-catalog-row {
    grid-template-columns: 76px minmax(0, 1fr) 146px;
    gap: 12px 14px;
  }
  .artwork-catalog-primary { grid-column: 2; }
  .artwork-catalog-owner { grid-column: 2; grid-row: 2; }
  .artwork-catalog-history { grid-column: 1 / 3; grid-row: 3; }
  .artwork-catalog-actions { grid-column: 3; grid-row: 1 / 4; }
}

@media (max-width: 900px) {
  .content-header {
    height: 88px;
    min-height: 88px;
  }
  .page-title-main {
    font-size: 2.5rem;
    line-height: 1;
  }
  .page-title-sub {
    max-width: 470px;
    font-size: .9rem;
    line-height: 1.25;
  }
  .artwork-catalog-tabs { grid-template-columns: repeat(5, minmax(132px, 1fr)); overflow-x: auto; }
  .artwork-catalog-toolbar { grid-template-columns: 1fr; }
  .artwork-catalog-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px 14px;
  }
  .artwork-catalog-primary { grid-column: 2; }
  .artwork-catalog-owner { grid-column: 2; grid-row: 2; }
  .artwork-catalog-history { grid-column: 1 / 3; grid-row: 3; }
  .artwork-catalog-actions { grid-column: 3; grid-row: 1 / 4; }
}

@media (max-width: 620px) {
  .artwork-catalog-toolbar { padding: 12px; }
  .artwork-catalog-tab { min-height: 52px; font-size: .8rem; }
  .artwork-catalog-row { grid-template-columns: 64px minmax(0, 1fr); padding: 14px 12px; }
  .artwork-catalog-thumb,
  .artwork-catalog-image-wrap,
  .artwork-catalog-image,
  .artwork-catalog-placeholder { width: 60px; height: 60px; }
  .artwork-catalog-owner { grid-column: 1 / 3; grid-row: 2; }
  .artwork-catalog-history { grid-column: 1 / 3; grid-row: 3; }
  .artwork-catalog-actions { grid-column: 1 / 3; grid-row: 4; justify-content: flex-end; }
  .artwork-open-btn { flex: 1; }
  .artwork-catalog-pagination { align-items: flex-start; flex-direction: column; gap: 8px; }
}
.dataset-mode-indicator {
  width: fit-content;
  margin: 8px auto 0;
  padding: 4px 8px;
  border: 1px solid rgba(247, 242, 224, 0.28);
  border-radius: 4px;
  background: #7D2826;
  color: #FFFFFF;
  font-family: "Outfit", sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}
/* ========================================================================== */
/* CASTING OPERATIONS WORKSPACE                                               */
/* ========================================================================== */
.casting-workspace {
  --casting-line: rgba(52, 55, 35, 0.16);
  color: var(--color-juniper);
  padding-bottom: 28px;
}

.casting-command-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(500px, 1.45fr);
  align-items: stretch;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid var(--casting-line);
  border-left: 5px solid var(--color-coral);
  box-shadow: 0 4px 14px rgba(35, 37, 23, 0.07);
}

.casting-command-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 18px 22px;
}

.casting-eyebrow {
  color: var(--color-coral);
  font-family: var(--font-family);
  font-size: 0.66rem;
  font-weight: 800;
}

.casting-command-copy strong,
.casting-form-intro strong {
  font-size: 1.05rem;
  line-height: 1.35;
}

.casting-command-copy small,
.casting-form-intro small {
  color: #6c6b5c;
  font-size: 0.78rem;
}

.casting-command-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  background: #f5f2e8;
}

.casting-command-stats > div {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--casting-line);
}

.casting-command-stats strong {
  font-family: var(--font-family-heading);
  font-size: 1.65rem;
  line-height: 1;
}

.casting-command-stats span {
  margin-top: 5px;
  color: #6c6b5c;
  font-size: 0.72rem;
  font-weight: 700;
}

.casting-command-stats .needs-attention strong,
.casting-command-stats .needs-attention span {
  color: var(--color-coral);
}

.casting-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--color-juniper);
  font-weight: 800;
}

.casting-section-heading > span {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  line-height: 1.2;
}

.casting-section-heading small {
  color: var(--color-coral);
  font-size: 0.62rem;
}

.casting-furnace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.casting-furnace-grid .furnace-card {
  min-width: 0;
  min-height: 292px !important;
  padding: 18px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(35, 37, 23, 0.07) !important;
}

.casting-furnace-grid .furnace-card button {
  min-height: 46px;
  border-radius: 5px !important;
}

.casting-weekly-panel,
.casting-archive-table-wrap {
  overflow: hidden;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid var(--casting-line);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(35, 37, 23, 0.06);
}

.casting-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 18px;
  background: var(--color-juniper);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
}

.casting-panel-count {
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}

.casting-archive-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--color-leaf);
  border: 1px solid rgba(52, 55, 35, 0.18);
}

.casting-archive-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.casting-archive-table th {
  text-align: center !important;
}

.casting-archive-row td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.09);
  color: var(--color-juniper);
  font-size: 0.82rem;
  font-weight: 650;
  vertical-align: middle;
}

.casting-archive-work {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casting-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.casting-archive-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.casting-icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 5px;
  color: var(--color-juniper);
  cursor: pointer;
}

.casting-icon-button:hover,
.casting-icon-button:focus-visible {
  border-color: var(--color-coral);
  color: var(--color-coral);
  outline: none;
}

.casting-icon-button.delete {
  color: var(--color-coral);
  background: rgba(125, 40, 38, 0.04);
}

.casting-record-form {
  container-type: inline-size;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 22px;
  box-sizing: border-box;
  background: rgba(247, 242, 224, 0.96);
  border: 1px solid rgba(52, 55, 35, 0.22);
  box-shadow: 0 6px 18px rgba(35, 37, 23, 0.08);
  color: var(--color-juniper);
}

.casting-form-intro {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(520px, 1.5fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 15px 16px;
  background: #fff;
  border-left: 4px solid var(--color-coral);
}

.casting-form-intro > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.casting-form-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.casting-form-steps button {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  background: #f5f2e8;
  border-left: 1px solid rgba(52, 55, 35, 0.12);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  color: #6c6b5c;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-family);
  text-align: center;
  cursor: pointer;
}

.casting-form-steps button:hover,
.casting-form-steps button:focus-visible {
  color: var(--color-coral);
  outline: 2px solid rgba(125, 40, 38, 0.24);
  outline-offset: -2px;
}

.casting-form-steps b {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 50%;
}

.casting-form-steps .active {
  background: var(--color-juniper);
  color: #fff;
}

.casting-form-steps .is-complete b {
  border-color: var(--color-leaf);
  background: rgba(86, 100, 64, 0.12);
}

.casting-document-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.18);
}

.casting-document-tab {
  display: flex !important;
  min-height: 58px;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  padding: 9px 14px !important;
  border: 1px solid rgba(52, 55, 35, 0.14) !important;
  border-radius: 5px !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  text-align: left;
}

.casting-document-tab small {
  margin-top: 2px;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.75;
}

.casting-document-ids {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.casting-items-table-wrap {
  max-width: 100%;
  overflow: visible;
  margin-bottom: 16px;
  border: 1px solid rgba(52, 55, 35, 0.14);
}

.casting-order-result {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 12px !important;
  border: 0;
  border-bottom: 1px solid rgba(52, 55, 35, 0.09);
  background: #fffdf8;
  color: var(--color-juniper);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

.casting-order-result:hover,
.casting-order-result:focus-visible {
  background: rgba(137, 136, 97, 0.12);
  outline: none;
}

.casting-order-result strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.casting-order-result span,
.casting-order-result small {
  min-width: 0;
  color: #696758;
  font-size: 0.68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.casting-order-empty {
  padding: 12px;
  color: #777565;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}

.casting-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px -22px -22px;
  padding: 14px 22px;
  background: rgba(247, 242, 224, 0.98);
  border-top: 1px solid rgba(52, 55, 35, 0.2);
  box-shadow: 0 -5px 14px rgba(35, 37, 23, 0.06);
}

.casting-form-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

@media (max-width: 1180px) {
  .casting-command-strip,
  .casting-form-intro {
    grid-template-columns: 1fr;
  }

  .casting-furnace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casting-items-table {
    min-width: 0 !important;
  }

  .casting-items-table thead {
    display: none;
  }

  .casting-items-table tbody {
    display: block;
    padding: 8px;
  }

  .casting-items-table .casting-item-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    background: #fff;
  }

  .casting-items-table .casting-item-primary {
    border: 1px solid rgba(52, 55, 35, 0.14) !important;
    border-bottom: 0 !important;
  }

  .casting-items-table .casting-item-secondary {
    margin-bottom: 12px;
    border: 1px solid rgba(52, 55, 35, 0.14) !important;
    border-top: 0 !important;
    background: #f8f6ef;
  }

  .casting-items-table .casting-item-row td {
    display: block;
    width: auto !important;
    padding: 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .casting-items-table .casting-item-secondary td:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@container (max-width: 1120px) {
  .casting-form-intro {
    grid-template-columns: 1fr;
  }

  .casting-items-table {
    min-width: 0 !important;
  }

  .casting-items-table thead {
    display: none;
  }

  .casting-items-table tbody {
    display: block;
    padding: 8px;
  }

  .casting-items-table .casting-item-row {
    display: grid;
    grid-template-columns: 44px minmax(220px, 1.15fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) 44px;
    gap: 10px 12px;
    padding: 12px;
    background: #fff;
  }

  .casting-items-table .casting-item-primary {
    border: 1px solid rgba(52, 55, 35, 0.14) !important;
    border-bottom: 0 !important;
  }

  .casting-items-table .casting-item-secondary {
    margin-bottom: 12px;
    border: 1px solid rgba(52, 55, 35, 0.14) !important;
    border-top: 0 !important;
    background: #f8f6ef;
  }

  .casting-items-table .casting-item-row td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .casting-items-table .casting-item-primary td:first-child {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 8px !important;
  }

  .casting-items-table .casting-item-primary td:nth-child(2) {
    grid-column: 2 / 4;
  }

  .casting-items-table .casting-item-primary td:nth-child(3) {
    grid-column: 4 / 7;
  }

  .casting-items-table .casting-item-primary td:nth-child(4) {
    grid-column: 2 / 4;
  }

  .casting-items-table .casting-item-primary td:nth-child(5) {
    grid-column: 4;
  }

  .casting-items-table .casting-item-primary td:nth-child(6) {
    grid-column: 5;
  }

  .casting-items-table .casting-item-primary td:nth-child(7) {
    grid-column: 6;
    grid-row: 2;
    justify-self: stretch;
  }

  .casting-items-table .casting-item-secondary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 1fr) minmax(130px, 0.55fr) minmax(130px, 0.55fr);
  }

  .casting-items-table .casting-item-secondary td:nth-child(3) {
    grid-column: auto;
  }

  .casting-items-table .casting-item-primary td:nth-child(2) .searchable-select-results {
    min-width: min(540px, calc(100vw - 150px));
  }

  .casting-items-table .casting-item-row input,
  .casting-items-table .casting-item-row select {
    min-height: 38px;
  }
}

@container (max-width: 760px) {
  .casting-items-table .casting-item-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .casting-items-table .casting-item-primary td:first-child {
    grid-row: 1 / 7;
  }

  .casting-items-table .casting-item-primary td:nth-child(n+2),
  .casting-items-table .casting-item-secondary td {
    grid-column: 1 / -1;
  }

  .casting-items-table .searchable-select-results {
    min-width: min(520px, calc(100vw - 120px));
  }
}

@media (max-width: 1320px) {
  .casting-archive-table thead {
    display: none;
  }

  .casting-archive-table,
  .casting-archive-table tbody,
  .casting-archive-row {
    display: block;
  }

  .casting-archive-row {
    margin: 10px;
    padding: 10px;
    border: 1px solid rgba(52, 55, 35, 0.14);
    border-left: 4px solid var(--color-leaf);
    background: #fff;
  }

  .casting-archive-row td {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px dashed rgba(52, 55, 35, 0.1);
    text-align: left !important;
    white-space: normal;
  }

  .casting-archive-row td::before {
    content: attr(data-label);
    color: #777565;
    font-size: 0.7rem;
    font-weight: 700;
  }

  .casting-archive-row td:last-child {
    border-bottom: 0;
  }

  .casting-archive-actions {
    justify-content: flex-start;
    width: min(100%, 360px);
  }
}

@media (max-width: 900px) {
  .casting-command-stats,
  .casting-form-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .casting-furnace-grid,
  .casting-document-tabs {
    grid-template-columns: 1fr;
  }

  .casting-archive-table thead {
    display: none;
  }

  .casting-archive-table,
  .casting-archive-table tbody,
  .casting-archive-row {
    display: block;
  }

  .casting-archive-row {
    margin: 10px;
    padding: 10px;
    border: 1px solid rgba(52, 55, 35, 0.14);
  }

  .casting-archive-row td {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px dashed rgba(52, 55, 35, 0.1);
    text-align: left !important;
    white-space: normal;
  }

  .casting-archive-row td::before {
    content: attr(data-label);
    color: #777565;
    font-size: 0.7rem;
    font-weight: 700;
  }

  .casting-archive-actions {
    justify-content: flex-start;
    width: min(100%, 360px);
  }
}

@media (max-width: 620px) {
  .casting-record-form {
    padding: 14px;
  }

  .casting-items-table .casting-item-row,
  .casting-command-stats,
  .casting-form-steps {
    grid-template-columns: 1fr;
  }

  .casting-form-actions {
    margin: 16px -14px -14px;
    padding: 12px 14px;
  }
}

/* Casting Operations visual refresh */
.casting-workspace {
  --casting-panel: rgba(255, 253, 248, 0.88);
  --casting-ink-soft: rgba(52, 55, 35, 0.64);
}

.casting-command-strip {
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffdf8 0%, #f2eddd 100%);
  box-shadow: 0 14px 30px rgba(35, 37, 23, 0.11);
}

.casting-command-copy {
  position: relative;
}

.casting-command-copy::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 18px;
  bottom: 16px;
  width: 1px;
  background: rgba(52, 55, 35, 0.1);
}

.casting-command-stats {
  background: rgba(52, 55, 35, 0.045);
}

.casting-command-stats > div {
  position: relative;
  background: rgba(255, 253, 248, 0.42);
}

.casting-command-stats > div::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  height: 3px;
  background: rgba(137, 136, 97, 0.2);
}

.casting-command-stats .needs-attention::after {
  background: rgba(125, 40, 38, 0.42);
}

.casting-furnace-grid {
  gap: 18px;
  align-items: stretch;
}

.casting-furnace-grid .furnace-card {
  position: relative;
  min-height: 318px !important;
  padding: 0 !important;
  overflow: hidden;
  border-width: 1px !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  box-shadow: 0 16px 34px rgba(35, 37, 23, 0.14) !important;
  transform: translateZ(0);
}

.casting-furnace-grid .furnace-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #6f7750 0%, #96966d 100%);
}

.casting-furnace-grid .furnace-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.45), rgba(255,255,255,0.04) 62%);
  opacity: 0.8;
  pointer-events: none;
}

.casting-furnace-grid .furnace-card:nth-child(1)::before {
  background: linear-gradient(135deg, #485238 0%, #8b9665 100%);
}

.casting-furnace-grid .furnace-card:nth-child(2)::before {
  background: linear-gradient(135deg, #7b5832 0%, #c0a66f 100%);
}

.casting-furnace-grid .furnace-card:nth-child(3)::before {
  background: linear-gradient(135deg, #415052 0%, #9aa9a5 100%);
}

.casting-furnace-grid .furnace-card > div {
  position: relative;
  z-index: 1;
}

.casting-furnace-grid .furnace-card > div:first-child {
  min-height: 82px;
  margin: 0 !important;
  padding: 18px 18px 14px !important;
  align-items: flex-start !important;
}

.casting-furnace-grid .furnace-card > div:first-child > div:first-child > div:first-child {
  color: #fffdf8 !important;
  font-size: 1.32rem !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 8px rgba(35, 37, 23, 0.28);
}

.casting-furnace-grid .furnace-card > div:first-child > div:first-child > div:nth-child(2) {
  color: rgba(255, 253, 248, 0.72) !important;
  letter-spacing: 0 !important;
}

.casting-furnace-grid .furnace-card > div:first-child > div:nth-child(2) {
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 253, 248, 0.94) !important;
  box-shadow: 0 8px 18px rgba(35, 37, 23, 0.16);
}

.casting-furnace-grid .furnace-card > div:nth-child(2) {
  grid-template-columns: minmax(0, 0.82fr) minmax(118px, 1.18fr) !important;
  margin: 14px 18px 12px !important;
  border: 1px solid rgba(52, 55, 35, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 248, 0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.casting-furnace-grid .furnace-card > div:nth-child(2) > div {
  min-width: 0;
  padding: 2px 0;
}

.casting-furnace-grid .furnace-card > div:nth-child(2) > div + div {
  padding-left: 12px;
  border-left: 1px solid rgba(52, 55, 35, 0.1);
}

.casting-furnace-grid .furnace-card > div:nth-child(2) div div:first-child {
  color: var(--casting-ink-soft) !important;
}

.casting-furnace-grid .furnace-card > div:nth-child(2) div div:nth-child(2) {
  font-size: 1rem !important;
  line-height: 1.2 !important;
  overflow-wrap: normal;
}

.casting-furnace-grid .furnace-card > div:nth-child(3) {
  margin: 0 18px 14px !important;
}

.casting-furnace-grid .furnace-card > div:nth-child(3) > div:first-child {
  color: var(--color-juniper) !important;
  border-bottom-color: rgba(52, 55, 35, 0.13) !important;
}

.casting-furnace-grid .furnace-card > div:nth-child(3) > div:last-child {
  max-height: 130px !important;
}

.casting-furnace-grid .furnace-card > div:last-child {
  margin-top: auto;
  padding: 0 18px 18px;
}

.casting-furnace-grid .furnace-card button {
  min-height: 48px;
  border-radius: 6px !important;
  box-shadow: 0 8px 18px rgba(35, 37, 23, 0.12);
}

.casting-furnace-grid .furnace-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(35, 37, 23, 0.17) !important;
}

.casting-weekly-panel,
.casting-archive-table-wrap {
  border-radius: 8px;
  background: var(--casting-panel);
  box-shadow: 0 12px 28px rgba(35, 37, 23, 0.1);
}

.casting-panel-header {
  min-height: 54px;
  background: linear-gradient(90deg, var(--color-juniper) 0%, #4f5534 100%);
}

.casting-panel-count {
  border-radius: 4px;
  background: rgba(255, 253, 248, 0.08);
}

.casting-weekly-panel > div:last-child > div {
  background: rgba(255, 253, 248, 0.78) !important;
}

.casting-weekly-panel > div:last-child > div:hover {
  background: #fffdf8 !important;
}

.casting-archive-controls {
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #8d8f63 0%, #a9a873 100%);
}

.casting-archive-controls .search-box {
  min-height: 52px;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  box-shadow: 0 8px 18px rgba(35, 37, 23, 0.11);
}

.casting-archive-table thead tr {
  background: linear-gradient(90deg, var(--color-juniper) 0%, #3f462b 100%) !important;
}

.casting-archive-row {
  background: rgba(255, 253, 248, 0.82);
}

.casting-archive-row:hover td {
  background: #fffdf8;
}

@media (max-width: 1180px) {
  .casting-furnace-grid .furnace-card {
    min-height: 306px !important;
  }
}

@media (max-width: 900px) {
  .casting-command-copy::after {
    display: none;
  }

  .casting-furnace-grid .furnace-card {
    min-height: 286px !important;
  }
}

/* Casting report archive: Planning Center visual language */
.casting-workspace .casting-archive-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(52, 55, 35, 0.16);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #dfd9c7;
}

.casting-archive-search {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 14px;
  border: 1px solid rgba(52, 55, 35, 0.17);
  border-left: 4px solid var(--color-coral);
  border-radius: 5px;
  background: #fffdf8;
  color: var(--color-juniper);
  box-shadow: 0 3px 9px rgba(35, 37, 23, 0.06);
}

.casting-archive-search > svg {
  color: var(--color-juniper-dark);
}

.casting-archive-search > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.casting-archive-search strong {
  color: var(--color-coral);
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.casting-archive-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #232517 !important;
  caret-color: var(--color-coral);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 650;
}

.casting-archive-search input::placeholder {
  color: #747467 !important;
  opacity: 1 !important;
}

.casting-archive-result {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  column-gap: 8px;
  min-width: 148px;
  padding: 8px 14px;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 5px;
  background: #f7f2e0;
  color: var(--color-juniper);
}

.casting-archive-result span,
.casting-archive-result small {
  color: #6c6b5c;
  font-size: 0.7rem;
  font-weight: 700;
}

.casting-archive-result strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--color-coral);
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.casting-workspace .casting-archive-table-wrap {
  max-height: none;
  margin-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 6px 16px rgba(35, 37, 23, 0.07);
}

.casting-workspace .casting-archive-table th {
  padding: 12px 10px !important;
  background: var(--color-juniper) !important;
  color: #f7f2e0 !important;
  font-size: 0.76rem !important;
}

.casting-workspace .casting-archive-row td {
  padding: 13px 12px !important;
  background: rgba(247, 242, 224, 0.72) !important;
  color: #343723 !important;
  vertical-align: top !important;
}

.casting-workspace .casting-archive-row:nth-child(even) td {
  background: rgba(239, 233, 215, 0.72) !important;
}

.casting-workspace .casting-archive-row:hover td {
  background: #fffdf5 !important;
}

.casting-archive-timeline strong {
  display: block;
  color: #232517;
  font-size: 0.84rem;
}

.casting-furnace-chip {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 8px;
  border: 1px solid rgba(137, 136, 97, 0.35);
  border-radius: 4px;
  background: rgba(137, 136, 97, 0.12);
  color: #4a4e33;
  font-size: 0.68rem;
  font-weight: 800;
}

.casting-archive-work {
  overflow: visible;
  white-space: normal;
}

.casting-work-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(52, 55, 35, 0.12);
}

.casting-work-item > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-leaf);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.casting-work-item strong,
.casting-work-item small {
  display: block;
  overflow-wrap: anywhere;
}

.casting-work-item strong {
  color: #232517;
  font-size: 0.8rem;
  line-height: 1.35;
}

.casting-work-item small {
  margin-top: 2px;
  color: #707b6d;
  font-size: 0.68rem;
}

.casting-work-item.is-empty > span {
  background: #c5beac;
}

.casting-requester {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #707b6d;
  font-size: 0.68rem;
}

.casting-requester strong {
  color: #343723;
}

.casting-metal-summary {
  display: grid;
  gap: 7px;
}

.casting-metal-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(52, 55, 35, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.56);
}

.casting-metal-summary span {
  color: #707b6d;
  font-size: 0.67rem;
  font-weight: 700;
}

.casting-metal-summary strong {
  color: #343723;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.casting-metal-summary .is-over {
  border-color: rgba(125, 40, 38, 0.2);
  background: rgba(125, 40, 38, 0.06);
}

.casting-metal-summary .is-over span,
.casting-metal-summary .is-over strong {
  color: var(--color-coral);
}

.casting-metal-summary .is-balance strong {
  color: #6c6b4b;
}

.casting-archive-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 42px;
  gap: 7px;
}

.casting-action-button,
.casting-icon-button {
  min-height: 42px;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 5px;
  background: #fffdf8;
  color: var(--color-juniper);
  cursor: pointer;
}

.casting-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  font-family: var(--font-family);
  font-size: 0.7rem;
  font-weight: 800;
}

.casting-action-button span {
  white-space: nowrap;
}

.casting-action-button.edit {
  border-color: rgba(125, 40, 38, 0.3);
  color: var(--color-coral);
  background: rgba(125, 40, 38, 0.04);
}

.casting-action-button:hover,
.casting-action-button:focus-visible,
.casting-icon-button:hover,
.casting-icon-button:focus-visible {
  border-color: var(--color-coral);
  outline: 2px solid rgba(125, 40, 38, 0.12);
  outline-offset: 1px;
}

.casting-archive-empty {
  padding: 44px 20px !important;
  text-align: center;
}

.casting-archive-empty strong,
.casting-archive-empty span {
  display: block;
}

.casting-archive-empty strong {
  color: #343723;
  font-size: 0.95rem;
}

.casting-archive-empty span {
  margin-top: 5px;
  color: #707b6d;
  font-size: 0.76rem;
}

@media (max-width: 1320px) {
  .casting-workspace .casting-archive-table-wrap {
    padding: 10px;
    background: #f7f2e0 !important;
  }

  .casting-workspace .casting-archive-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.82fr) minmax(300px, 1.28fr) minmax(190px, 0.82fr);
    gap: 0;
    margin: 0 0 10px;
    padding: 0;
    border: 1px solid rgba(52, 55, 35, 0.15);
    border-left: 4px solid var(--color-leaf);
    border-radius: 5px;
    background: #fffdf8;
    box-shadow: 0 3px 9px rgba(35, 37, 23, 0.05);
  }

  .casting-workspace .casting-archive-row td {
    display: block;
    padding: 12px !important;
    border-right: 1px solid rgba(52, 55, 35, 0.08);
    border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  }

  .casting-workspace .casting-archive-row td::before {
    display: block;
    margin-bottom: 8px;
    color: var(--color-coral);
    font-family: "Outfit", sans-serif;
    font-size: 0.64rem;
    font-weight: 800;
  }

  .casting-workspace .casting-archive-actions-cell {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .casting-workspace .casting-archive-actions-cell::before {
    margin-bottom: 10px;
  }

  .casting-archive-actions {
    grid-template-columns: minmax(128px, 1.05fr) minmax(104px, 0.8fr) 42px;
    width: min(100%, 360px);
    max-width: none;
    justify-content: start;
  }

  .casting-action-button {
    min-width: 0;
    padding: 7px 10px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .casting-action-button span {
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .casting-workspace .casting-archive-controls,
  .casting-workspace .casting-archive-row {
    grid-template-columns: 1fr;
  }

  .casting-archive-result {
    grid-template-columns: 1fr auto;
  }

  .casting-metal-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .casting-metal-summary > div {
    display: grid;
    justify-items: start;
  }
}

/* Casting zone overrides live last so legacy panel rules cannot flatten them. */
.casting-workspace .casting-zone {
  margin-bottom: 34px !important;
  border: 1px solid rgba(52, 55, 35, 0.2) !important;
  border-top-width: 5px !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(35, 37, 23, 0.1) !important;
}

.casting-workspace .casting-zone-furnaces {
  background: #f7f4eb !important;
  border-top-color: #4a4e33 !important;
}

.casting-workspace .casting-zone-plan {
  background: #eef0e8 !important;
  border-top-color: #898861 !important;
}

.casting-workspace .casting-zone-archive {
  background: #f4efe2 !important;
  border-top-color: #7d2826 !important;
}

.casting-workspace .casting-zone-archive .casting-archive-table-wrap {
  margin-bottom: 0 !important;
}

/* Casting Operations console and seven-day furnace timeline. */
.casting-console-zone,
.casting-timeline-zone,
.casting-archive-zone {
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, 0.22);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(35, 37, 23, 0.08);
}

.casting-console-zone {
  container-type: inline-size;
  margin: 28px 0 34px;
}
.casting-console-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 18px;
  color: #fff;
  background: #2f341f;
  font: 800 0.84rem "Outfit", sans-serif;
}
.casting-console-title small { color: rgba(255,255,255,.72); font: 600 .72rem "Sarabun", sans-serif; }
.casting-console-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); }
.furnace-console {
  --furnace-color: #566440;
  display: grid;
  grid-template-columns: minmax(118px,.82fr) minmax(128px,1.18fr);
  grid-template-rows: 1fr auto;
  min-width: 0;
  padding: 18px 12px 12px;
  border-right: 1px solid rgba(52,55,35,.22);
  border-bottom: 1px solid rgba(52,55,35,.18);
  background: #fcfbf7;
}
.furnace-console:last-child { border-right: 0; border-bottom: 0; }
.furnace-console-2 { --furnace-color: #9b2424; }
.furnace-console-3 { --furnace-color: #3e6172; }
.furnace-console-primary { position: relative; min-width: 0; padding: 0 12px 8px 62px; border-right: 1px solid rgba(52,55,35,.14); }
.furnace-console-number {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid var(--furnace-color);
  border-radius: 50%;
  color: #fff;
  background: var(--furnace-color);
  box-shadow: inset 0 0 0 3px #fff, 0 2px 5px rgba(35,37,23,.18);
  font: 800 1.55rem "Outfit", sans-serif;
}
.furnace-console-identity { display: flex; flex-direction: column; min-height: 102px; }
.furnace-console-identity > strong { color: #232517; font-size: .95rem; line-height: 1.2; }
.furnace-console-temperature { margin-top: 3px; color: var(--furnace-color); font: 800 1.82rem/1 "Outfit", sans-serif; }
.furnace-console-status { margin-top: 8px; color: var(--furnace-color); font-size: .64rem; font-weight: 800; line-height: 1.25; }
.furnace-temperature-track { height: 9px; overflow: hidden; border: 1px solid #bbb6a8; background: #e7e3d8; }
.furnace-temperature-track span { display: block; height: 100%; background: var(--furnace-color); }
.furnace-temperature-scale { display: flex; justify-content: space-between; margin-top: 3px; color: #777467; font-size: .55rem; }
.furnace-console-primary .furnace-temperature-track,
.furnace-console-primary .furnace-temperature-scale {
  width: calc(100% + 62px);
  margin-left: -62px;
  box-sizing: border-box;
}
.furnace-console-details { display: grid; min-width: 0; padding-left: 12px; }
.furnace-console-details > div {
  display: grid;
  grid-template-columns: minmax(62px,.78fr) minmax(0,1.22fr);
  align-items: center;
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px solid rgba(52,55,35,.11);
}
.furnace-console-details span { min-width: 0; color: #777467; font-size: .58rem; line-height: 1.2; }
.furnace-console-details strong {
  min-width: 0;
  overflow: hidden;
  color: #343723;
  font-size: .62rem;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: normal;
}
.furnace-console-action {
  grid-column: 1/-1;
  min-height: 40px;
  margin-top: 14px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--furnace-color);
  font: 800 .76rem "Sarabun", sans-serif;
  cursor: pointer;
}

.casting-timeline-zone {
  overflow: visible;
  margin: 0 0 42px;
  padding: 18px;
  border-top: 5px solid #898861;
  background: #fbfaf6;
}
.casting-timeline-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.casting-timeline-toolbar > div { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 16px; }
.casting-timeline-toolbar small { color: #343723; font-size: 1rem; font-weight: 800; }
.casting-timeline-toolbar strong { font-size: .86rem; }
.casting-timeline-toolbar button {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(52,55,35,.22);
  border-radius: 4px;
  color: #343723;
  background: #fff;
  font-size: 1.35rem;
  cursor: pointer;
}
.casting-timeline-toolbar .casting-today-button { width: auto; padding: 0 14px; font-size: .72rem; font-weight: 800; }
.casting-timeline-grid { position: relative; min-width: 820px; overflow: visible; border: 1px solid rgba(52,55,35,.2); background: #fff; }
.casting-timeline-days,.casting-timeline-row { display: grid; grid-template-columns: 120px minmax(0,1fr); }
.casting-timeline-days { grid-template-columns: 120px repeat(7,minmax(0,1fr)); min-height: 48px; border-bottom: 1px solid rgba(52,55,35,.18); background: #f2efe6; }
.casting-timeline-days strong { position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; border-left: 1px solid rgba(52,55,35,.14); font-size: .65rem; }
.casting-timeline-days strong small { display: grid; width: 100%; grid-template-columns: repeat(4,1fr); padding: 2px 3px 3px; color: #7b796f; font-size: .48rem; font-weight: 600; }
.casting-timeline-days strong i { font-style: normal; text-align: center; }
.casting-timeline-row { min-height: 78px; border-bottom: 1px solid rgba(52,55,35,.14); }
.casting-timeline-row:last-child { border-bottom: 0; }
.casting-timeline-furnace { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-right: 1px solid rgba(52,55,35,.18); background: #f7f5ee; }
.casting-timeline-furnace span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: #fff; background: #566440; font-weight: 800; }
.casting-timeline-furnace.furnace-2 span { background: #9b2424; }
.casting-timeline-furnace.furnace-3 span { background: #3e6172; }
.casting-timeline-furnace strong { font-size: .7rem; }
.casting-timeline-lane {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  align-items: center;
  min-width: 0;
  background-image: repeating-linear-gradient(to right,transparent 0,transparent calc(14.2857% - 1px),rgba(52,55,35,.12) calc(14.2857% - 1px),rgba(52,55,35,.12) 14.2857%);
}
.casting-current-time-overlay {
  position: absolute;
  top: -18px;
  bottom: 0;
  z-index: 6;
  width: 2px;
  background: #c5171d;
  color: #c5171d;
  transform: translateX(-50%);
  pointer-events: none;
}
.casting-current-time-overlay b {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  color: #c5171d;
  font: 800 .58rem "Sarabun", sans-serif;
  transform: translate(-50%, -100%);
}
.casting-current-time-overlay::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c5171d;
  box-shadow: 0 0 0 3px rgba(197,23,29,.12);
  transform: translate(-50%, -50%);
}
.casting-phase {
  z-index: 1;
  align-self: center;
  min-width: 0;
  min-height: 50px;
  margin: 4px;
  padding: 5px;
  border: 1px solid #9cb8ce;
  border-radius: 4px;
  color: #304b5a;
  background: #e4eff7;
  cursor: pointer;
}
.casting-phase strong,.casting-phase span { display: block; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.casting-phase strong { font-size: .65rem; }
.casting-phase span { margin-top: 2px; font-size: .57rem; }
.casting-phase.phase-fire { border-color: #d8b66b; color: #7a5a17; background: #fff2ce; }
.casting-phase.phase-pour { border-color: #adbea0; color: #4e6042; background: #e7f0df; }
.casting-phase.phase-report { border-color: #b7b7b7; color: #555; background: #efefef; }
.casting-timeline-empty { grid-column: 1/-1; place-self: center; color: #9a978d; font-size: .7rem; }
.casting-timeline-summary { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 10px; border: 1px solid rgba(52,55,35,.17); background: #fff; }
.casting-timeline-summary div { display: flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 52px; padding: 9px; border-right: 1px solid rgba(52,55,35,.14); }
.casting-timeline-summary div:last-child { border-right: 0; }
.casting-timeline-summary strong { color: #4f6744; font: 800 1.1rem "Outfit",sans-serif; }
.casting-timeline-summary span { color: #777467; font-size: .67rem; }
.casting-timeline-summary .is-alert strong { color: #9b2424; }

.casting-archive-zone { margin: 0 0 32px; border-top: 5px solid #7d2826; background: #f8f4eb; }
.casting-archive-heading { min-height: 64px; padding: 12px 18px; border-bottom: 1px solid rgba(125,40,38,.18); background: #f0e4dc; }
.casting-archive-zone .casting-archive-controls,.casting-archive-zone .casting-archive-table-wrap { margin: 16px; }
.casting-archive-zone { container-type: inline-size; }

.casting-archive-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid rgba(52,55,35,.12);
  background: #fffdf8;
}

.casting-archive-pagination strong,
.casting-archive-pagination span {
  display: block;
}

.casting-archive-pagination strong {
  color: #343723;
  font-size: .82rem;
  font-weight: 850;
}

.casting-archive-pagination span {
  margin-top: 2px;
  color: #777467;
  font-size: .7rem;
  font-weight: 700;
}

.casting-archive-page-actions {
  display: flex;
  gap: 8px;
}

.casting-archive-page-actions button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(52,55,35,.18);
  border-radius: 5px;
  background: #fff;
  color: var(--color-juniper);
  font-family: var(--font-family);
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.casting-archive-page-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@container (max-width: 1120px) {
  .casting-archive-zone .casting-archive-table thead {
    display: none;
  }

  .casting-archive-zone .casting-archive-table,
  .casting-archive-zone .casting-archive-table tbody {
    display: block;
    width: 100%;
  }

  .casting-workspace .casting-archive-zone .casting-archive-table-wrap {
    padding: 10px;
    background: #f7f2e0 !important;
  }

  .casting-workspace .casting-archive-zone .casting-archive-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.82fr) minmax(300px, 1.28fr) minmax(190px, 0.82fr);
    gap: 0;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(52,55,35,.15);
    border-left: 4px solid var(--color-leaf);
    border-radius: 5px;
    background: #fffdf8;
    box-shadow: 0 3px 9px rgba(35,37,23,.05);
  }

  .casting-workspace .casting-archive-zone .casting-archive-row td {
    display: block;
    min-width: 0;
    padding: 12px !important;
    border-right: 1px solid rgba(52,55,35,.08);
    border-bottom: 1px solid rgba(52,55,35,.08);
    text-align: left !important;
    white-space: normal;
  }

  .casting-workspace .casting-archive-zone .casting-archive-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8px;
    color: var(--color-coral);
    font-family: "Outfit", sans-serif;
    font-size: .64rem;
    font-weight: 800;
  }

  .casting-workspace .casting-archive-zone .casting-archive-actions-cell {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .casting-workspace .casting-archive-zone .casting-archive-actions {
    display: grid;
    grid-template-columns: minmax(128px, 1.05fr) minmax(104px, .8fr) 42px;
    justify-content: start;
    width: min(100%, 360px);
    max-width: none;
  }

  .casting-workspace .casting-archive-zone .casting-action-button,
  .casting-workspace .casting-archive-zone .casting-action-button span {
    white-space: nowrap;
  }
}

@media (max-width:1040px) {
  .furnace-console { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); border-right: 0; border-bottom: 1px solid rgba(52,55,35,.22); }
  .furnace-console:last-child { border-bottom: 0; }
  .casting-timeline-zone { overflow-x: auto; overflow-y: visible; }
}

@container (max-width: 760px) {
  .furnace-console {
    grid-template-columns: 1fr;
    border-right: 0;
  }
  .furnace-console-primary { border-right: 0; }
  .furnace-console-details { margin-top: 10px; padding-left: 0; }
}

@media (max-width:760px) {
  .furnace-console { grid-template-columns: 1fr; }
  .furnace-console-primary { border-right: 0; }
  .furnace-console-details { margin-top: 10px; padding-left: 0; }
  .casting-timeline-toolbar > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .casting-timeline-summary { grid-template-columns: repeat(2,1fr); min-width: 620px; }
  .casting-archive-zone .casting-archive-controls,.casting-archive-zone .casting-archive-table-wrap { margin: 10px; }
  .casting-archive-pagination { align-items: stretch; flex-direction: column; }
  .casting-archive-page-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
/* User access control center */
.user-security-center {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  container-type: inline-size;
}

.user-security-banner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  color: #f7f2e6;
  background: #343723;
  border-left: 5px solid #8d2a27;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(52, 55, 35, 0.14);
}

.user-security-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #f7f2e6;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}

.user-security-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-security-banner > div:nth-child(2) > span,
.user-section-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: #a86a62;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.user-security-banner h2,
.user-section-heading h2 {
  margin: 0;
  letter-spacing: 0;
}

.user-security-banner h2 {
  color: #ffffff;
  font-size: 1.08rem;
}

.user-security-banner p {
  margin: 5px 0 0;
  color: rgba(247, 242, 230, 0.72);
  font-size: 0.8rem;
  line-height: 1.45;
}

.user-security-stats {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  overflow: hidden;
}

.user-security-stats div {
  min-width: 76px;
  padding: 9px 13px;
  text-align: center;
}

.user-security-stats div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.user-security-stats strong,
.user-security-stats span {
  display: block;
}

.user-security-stats strong {
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
}

.user-security-stats span {
  color: rgba(247, 242, 230, 0.7);
  font-size: 0.68rem;
}

.user-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.user-role-card {
  position: relative;
  min-width: 0;
  padding: 15px 16px 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-top: 4px solid var(--role-accent, #6e734e);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(52, 55, 35, 0.07);
}

.user-role-card.tone-owner { --role-accent: #862b28; }
.user-role-card.tone-manager { --role-accent: #65704a; }
.user-role-card.tone-sales { --role-accent: #9a8151; }
.user-role-card.tone-workshop { --role-accent: #3f6977; }

.user-role-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-role-card-top span {
  color: var(--role-accent);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.user-role-card-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-role-card-top strong {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--role-accent);
  border-radius: 50%;
  font-size: 0.76rem;
}

.user-role-card h3 {
  margin: 7px 0 5px;
  color: #343723;
  font-size: 0.94rem;
}

.user-role-card p {
  min-height: 48px;
  margin: 0;
  color: #656657;
  font-size: 0.72rem;
  line-height: 1.45;
}

.user-role-card > small {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  color: var(--role-accent);
  border-top: 1px solid rgba(52, 55, 35, 0.09);
  font-size: 0.68rem;
  font-weight: 800;
}

.user-role-preview-icon,
.user-role-current-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--role-accent);
  background: rgba(52, 55, 35, 0.035);
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 4px;
}

.user-role-preview-icon {
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.user-role-current-icon {
  color: #862b28;
  background: rgba(134, 43, 40, 0.055);
  border: 1px solid rgba(134, 43, 40, 0.18);
}

.user-role-preview-icon:hover,
.user-role-preview-icon:focus-visible {
  color: #ffffff;
  background: var(--role-accent);
  border-color: var(--role-accent);
  outline: none;
}

.user-role-preview-icon svg,
.user-role-current-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.role-preview-banner {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 58px;
  padding: 9px 18px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: #fffaf0;
  background: #7d2826;
  border-bottom: 3px solid #343723;
  box-shadow: 0 4px 12px rgba(52, 55, 35, 0.18);
}

.role-preview-banner[hidden] { display: none !important; }

.role-preview-banner-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
}

.role-preview-banner-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.role-preview-banner-copy { min-width: 0; }

.role-preview-banner-copy strong,
.role-preview-banner-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-preview-banner-copy strong { font-size: 0.8rem; }
.role-preview-banner-copy span { margin-top: 1px; color: rgba(255, 250, 240, 0.8); font-size: 0.67rem; }

.role-preview-banner button {
  min-height: 34px;
  padding: 0 13px;
  color: #343723;
  background: #fffaf0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

body.role-preview-mode .content-header { top: 58px; }

.user-accounts-panel,
.user-access-panel {
  padding: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 6px;
  box-shadow: 0 5px 14px rgba(52, 55, 35, 0.08);
}

.user-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.1);
}

.user-section-heading h2 {
  color: #343723;
  font-size: 1rem;
}

.user-section-heading p {
  max-width: 470px;
  margin: 0;
  color: #747567;
  font-size: 0.73rem;
  text-align: right;
}

.user-account-list {
  display: grid;
  gap: 7px;
}

.user-account-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(160px, 1fr) minmax(155px, 0.95fr) 105px auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  background: #fbfaf6;
  border: 1px solid rgba(52, 55, 35, 0.1);
  border-left: 4px solid #66704b;
  border-radius: 5px;
}

.user-account-row.is-suspended {
  background: #f4f1eb;
  border-left-color: #99978d;
  opacity: 0.78;
}

.user-account-identity,
.user-account-role,
.user-account-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.user-account-identity { gap: 10px; }
.user-account-role { gap: 8px; }
.user-account-actions { justify-content: flex-end; gap: 6px; }
.user-account-delete { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(143,45,40,.28); border-radius: 5px; background: #fff; color: #8f2d28; cursor: pointer; }
.user-account-delete:hover { border-color: #8f2d28; background: #fbefed; }
.user-account-delete svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.user-delete-overlay { position: fixed; inset: 0; z-index: 15000; display: grid; place-items: center; padding: 20px; background: rgba(31,34,24,.68); backdrop-filter: blur(3px); }
.user-delete-dialog { width: min(520px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: #fbfaf6; box-shadow: 0 20px 55px rgba(20,21,15,.28); }
.user-delete-dialog>header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 4px solid #8f2d28; background: #30341f; color: #fff; }
.user-delete-dialog>header span { display: block; color: #d99a91; font-size: .62rem; font-weight: 900; }
.user-delete-dialog>header h3 { margin: 2px 0 0; font-size: 1rem; }
.user-delete-dialog>header button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 5px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.user-delete-dialog>header svg,.user-delete-dialog .danger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.user-delete-body { display: grid; gap: 15px; padding: 20px; }
.user-delete-warning { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px; border-left: 4px solid #8f2d28; background: #fbefed; }
.user-delete-warning>svg { width: 26px; height: 26px; fill: none; stroke: #8f2d28; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.user-delete-warning strong { color: #672420; font-size: .82rem; }
.user-delete-warning p { margin: 3px 0 0; color: #765f5c; font-size: .7rem; line-height: 1.45; }
.user-delete-body dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border: 1px solid rgba(52,55,35,.12); }
.user-delete-body dl>div { min-width: 0; padding: 10px; border-right: 1px solid rgba(52,55,35,.1); }
.user-delete-body dl>div:last-child { border-right: 0; }
.user-delete-body dt { color: #858679; font-size: .62rem; }
.user-delete-body dd { overflow: hidden; margin: 3px 0 0; color: #343723; font-size: .75rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-delete-body label { display: grid; gap: 6px; color: #343723; font-size: .72rem; font-weight: 700; }
.user-delete-body label b { color: #8f2d28; }
.user-delete-status { margin: 0; padding: 9px 10px; border: 1px solid rgba(143,45,40,.22); background: #fbefed; color: #8f2d28; font-size: .72rem; }
.user-delete-dialog>footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid rgba(52,55,35,.12); background: #f3f0e7; }
.user-delete-dialog>footer button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: 5px; font: 800 .75rem "Sarabun",sans-serif; cursor: pointer; }
.user-delete-dialog>footer .secondary { border: 1px solid rgba(52,55,35,.2); background: #fff; color: #343723; }
.user-delete-dialog>footer .danger { min-width: 150px; border: 1px solid #8f2d28; background: #8f2d28; color: #fff; }
.user-delete-dialog>footer .danger:disabled { border-color: #c7c4bc; background: #c7c4bc; cursor: not-allowed; }

.user-account-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #343723;
  border-radius: 50%;
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
}

.user-account-identity div,
.user-account-role div,
.user-account-scope {
  min-width: 0;
}

.user-account-identity strong,
.user-account-identity small,
.user-account-role strong,
.user-account-role small,
.user-account-scope strong,
.user-account-scope small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-account-identity strong,
.user-account-role strong,
.user-account-scope strong {
  color: #343723;
  font-size: 0.8rem;
}

.user-account-identity small,
.user-account-role small,
.user-account-scope small {
  color: #818174;
  font-size: 0.66rem;
}

.user-account-role > span {
  flex: 0 0 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #6e734e;
  border-radius: 50%;
  font-family: "Outfit", sans-serif;
  font-size: 0.67rem;
  font-weight: 800;
}

.user-account-role > span.tone-owner { background: #862b28; }
.user-account-role > span.tone-manager { background: #65704a; }
.user-account-role > span.tone-sales { background: #9a8151; }
.user-account-role > span.tone-workshop { background: #3f6977; }

.user-account-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5e6550;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.user-account-status i {
  width: 8px;
  height: 8px;
  background: #6d7b52;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(109, 123, 82, 0.12);
}

.user-account-status.is-off i {
  background: #99978d;
  box-shadow: none;
}

.user-account-edit,
.user-account-toggle {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.user-account-edit {
  color: #343723;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.22);
}

.user-account-edit svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-edit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.user-account-toggle {
  color: #862b28;
  background: rgba(134, 43, 40, 0.04);
  border: 1px solid rgba(134, 43, 40, 0.24);
}

.user-account-toggle.is-activate {
  color: #53633e;
  background: rgba(83, 99, 62, 0.05);
  border-color: rgba(83, 99, 62, 0.25);
}

.user-account-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.user-access-matrix {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(52, 55, 35, 0.12);
  border-radius: 5px;
}

.user-access-head,
.user-access-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(105px, 1fr));
  align-items: stretch;
}

.user-access-head {
  color: #ffffff;
  background: #343723;
}

.user-access-head > span,
.user-access-head > strong,
.user-access-row > strong,
.user-access-row > span {
  min-width: 0;
  padding: 10px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(52, 55, 35, 0.1);
  font-size: 0.7rem;
}

.user-access-head > span,
.user-access-row > strong {
  justify-content: flex-start;
  text-align: left;
}

.user-access-head strong {
  flex-direction: column;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
}

.user-access-head strong small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.64);
  font-family: "Sarabun", sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
}

.user-access-row:nth-child(odd) { background: #f8f7f2; }
.user-access-row + .user-access-row { border-top: 1px solid rgba(52, 55, 35, 0.09); }
.user-access-row > strong { color: #343723; font-size: 0.73rem; }
.user-access-row > span { color: #66704b; font-weight: 700; }
.user-access-row > span.is-owner { color: #862b28; }
.user-access-row > span.is-denied { color: #98988e; font-weight: 500; }

.user-security-note {
  margin-top: 12px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  color: #665e4e;
  background: #f4efe3;
  border-left: 3px solid #9a8151;
  font-size: 0.7rem;
  line-height: 1.5;
}

.cloud-sync-status {
  width: 100%;
  min-height: 30px;
  margin: 0 0 10px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Sarabun', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid rgba(247, 246, 241, 0.12);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cloud-sync-status:hover,
.cloud-sync-status:focus-visible {
  background: rgba(247, 246, 241, 0.1);
  border-color: rgba(247, 246, 241, 0.28);
  outline: none;
}

.cloud-sync-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #a0a59b;
}

.cloud-sync-status.is-syncing .cloud-sync-status-dot {
  background: #d3c9ad;
  animation: cloud-sync-pulse 1.1s ease-in-out infinite;
}

.cloud-sync-status.is-synced .cloud-sync-status-dot { background: #8fb49a; }
.cloud-sync-status.is-pending .cloud-sync-status-dot { background: #d6a85f; }
.cloud-sync-status.is-error .cloud-sync-status-dot { background: #d47a76; }

@keyframes cloud-sync-pulse {
  50% { opacity: 0.35; transform: scale(0.82); }
}

.cloud-health-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: hidden;
  border-radius: 8px;
}

.cloud-health-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(52, 55, 35, 0.14);
}

.cloud-health-header p {
  margin: 4px 0 0;
  color: var(--color-text-muted-dark);
  font-size: 0.82rem;
}

.cloud-health-eyebrow {
  display: block;
  color: #7d2926;
  font: 700 0.68rem/1.2 'Outfit', sans-serif;
  letter-spacing: 0;
}

.cloud-health-body {
  padding: 22px 24px;
  overflow-y: auto;
}

.cloud-health-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #f4f5f0;
  border: 1px solid #d8ddd2;
  border-left: 4px solid #66757a;
}

.cloud-health-summary-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #66757a;
}

.cloud-health-summary strong,
.cloud-health-summary span {
  display: block;
}

.cloud-health-summary span {
  margin-top: 2px;
  color: #6a6d66;
  font-size: 0.78rem;
}

.cloud-health-summary.is-good { border-left-color: #55745d; }
.cloud-health-summary.is-good .cloud-health-summary-dot { background: #55745d; }
.cloud-health-summary.is-warning { border-left-color: #b47b2c; background: #fbf6eb; }
.cloud-health-summary.is-warning .cloud-health-summary-dot { background: #b47b2c; }
.cloud-health-summary.is-critical { border-left-color: #8f2525; background: #fbefed; }
.cloud-health-summary.is-critical .cloud-health-summary-dot { background: #8f2525; }
.cloud-health-summary.is-loading .cloud-health-summary-dot { animation: cloud-sync-pulse 1.1s ease-in-out infinite; }

.cloud-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cloud-health-card {
  padding: 15px;
  background: #fff;
  border: 1px solid #dedbd0;
  border-radius: 6px;
}

.cloud-health-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}

.cloud-health-card-heading strong { color: #49535c; }
.cloud-health-card p { margin: 8px 0 0; color: #70726b; font-size: 0.78rem; }
.cloud-health-card p strong { color: #2f3130; }

.cloud-health-meter {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  background: #e8e7df;
  border-radius: 4px;
}

.cloud-health-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #66757a;
  transition: width 240ms ease;
}

.cloud-health-card.is-warning .cloud-health-meter span { background: #b47b2c; }
.cloud-health-card.is-critical .cloud-health-meter span { background: #8f2525; }

.cloud-health-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 0;
  border: 1px solid #dedbd0;
}

.cloud-health-facts div {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid #dedbd0;
}

.cloud-health-facts div:last-child { border-right: 0; }
.cloud-health-facts dt { color: #74766f; font-size: 0.7rem; }
.cloud-health-facts dd { margin: 4px 0 0; color: #2f3130; font-weight: 700; overflow-wrap: anywhere; }

.cloud-backup-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 15px;
  background: #f5f1e3;
  border: 1px solid #ddd5bd;
  border-radius: 6px;
}
.cloud-backup-panel[hidden] { display: none; }

.cloud-backup-panel p,
.cloud-health-note {
  margin: 4px 0 0;
  color: #72736d;
  font-size: 0.75rem;
  line-height: 1.5;
}

.cloud-health-note { padding: 0 2px; }

.cloud-health-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid rgba(52, 55, 35, 0.14);
}

.cloud-health-footer .btn-primary {
  min-width: 120px;
  background: #343723 !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  .cloud-health-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .cloud-health-body { padding: 16px; }
  .cloud-health-grid { grid-template-columns: 1fr; }
  .cloud-health-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-health-facts div:nth-child(2) { border-right: 0; }
  .cloud-health-facts div:nth-child(-n + 2) { border-bottom: 1px solid #dedbd0; }
  .cloud-backup-panel { align-items: stretch; flex-direction: column; }
  .cloud-backup-panel .btn { width: 100%; justify-content: center; }
}

/* Profile photo editor */
.profile-avatar-editor-modal {
  width: min(620px, calc(100vw - 28px));
  max-height: min(880px, calc(100vh - 28px));
  overflow: hidden;
  border-radius: 8px;
}

.profile-avatar-editor-header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(52, 55, 35, 0.14);
}

.profile-avatar-editor-header p {
  margin: 4px 0 0;
  color: var(--color-text-muted-dark);
  font-size: 0.82rem;
  line-height: 1.45;
}

.profile-avatar-editor-eyebrow {
  display: block;
  color: #7d2926;
  font: 700 0.68rem/1.2 'Outfit', sans-serif;
  letter-spacing: 0;
}

.profile-avatar-editor-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.profile-avatar-canvas-shell {
  position: relative;
  width: min(360px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: #d9d8d2;
  box-shadow: 0 0 0 10px #f1f0eb, 0 0 0 11px #c9c8c1;
  overflow: hidden;
}

#profile-avatar-editor-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#profile-avatar-editor-canvas.is-dragging { cursor: grabbing; }

.profile-avatar-canvas-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid rgba(247, 246, 241, 0.86);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(47, 49, 48, 0.22);
}

.profile-avatar-editor-hint {
  margin: 17px 0 0;
  color: #72736d;
  font-size: 0.76rem;
  text-align: center;
}

.profile-avatar-zoom-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 15px;
  background: #f5f3ec;
  border: 1px solid #dedbd0;
  border-radius: 6px;
}

.profile-avatar-zoom-row label,
.profile-avatar-zoom-row output {
  color: #3f423c;
  font-size: 0.8rem;
  font-weight: 700;
}

.profile-avatar-zoom-row output { text-align: right; }

.profile-avatar-zoom-row input[type="range"] {
  width: 100%;
  accent-color: #49535c;
  cursor: pointer;
}

.profile-avatar-tool-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.profile-avatar-tool-row .btn {
  min-width: 0;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  white-space: nowrap;
}

.profile-avatar-tool-row svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.profile-avatar-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid rgba(52, 55, 35, 0.14);
}

.profile-avatar-editor-footer .btn-primary {
  min-width: 178px;
  background: #343723 !important;
  color: #fff !important;
}

.profile-avatar-editor-footer .btn[aria-busy="true"] {
  cursor: wait;
  opacity: 0.64;
}

@media (max-width: 620px) {
  .profile-avatar-editor-modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .profile-avatar-editor-body { padding: 18px 16px; }
  .profile-avatar-canvas-shell { width: min(310px, 72vw); }
  .profile-avatar-tool-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-avatar-editor-footer { padding: 12px 16px; }
  .profile-avatar-editor-footer .btn { flex: 1; min-width: 0; }
}

@media (max-height: 720px) {
  .profile-avatar-editor-body { padding-top: 14px; padding-bottom: 14px; }
  .profile-avatar-canvas-shell { width: min(260px, 52vh); }
  .profile-avatar-tool-row { margin-top: 9px; }
}

.user-modal-help {
  display: block;
  margin-top: 5px;
  color: #77786b;
  font-size: 0.7rem;
  line-height: 1.4;
}

.user-account-modal {
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow: hidden;
  border-radius: 7px;
}

.user-account-modal #user-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.user-account-modal .modal-header {
  align-items: center;
  padding: 20px 22px;
  color: #f7f2e6;
  background-color: #343723 !important;
  border-bottom: 4px solid #8d2a27 !important;
}

.user-account-modal .modal-header .drawer-close {
  color: #f7f2e6;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.user-account-modal .modal-title {
  color: #ffffff;
  font-size: 1.08rem;
}

.user-modal-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #d58c82;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.user-account-modal-body {
  min-height: 0;
  padding: 22px;
  flex: 1;
  overflow-y: auto;
  background: #fbfaf6;
}

.user-account-modal #user-form > .modal-footer {
  flex: 0 0 auto;
}

.user-account-modal .form-group label {
  color: #343723;
  font-size: 0.79rem;
  font-weight: 800;
}

.user-account-modal .form-input,
.user-account-modal .form-select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 5px;
  border: 1px solid rgba(52, 55, 35, 0.2);
  background: #ffffff;
}

.user-field-prefix {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: stretch;
}

.user-field-prefix > span {
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #65704a;
  border-radius: 5px 0 0 5px;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
}

.user-field-prefix .form-input {
  border-left: 0;
  border-radius: 0 5px 5px 0;
}

.user-field-prefix.is-readonly > span { background: #8a897e; }
.user-field-prefix.is-readonly .form-input { color: #77786b; background: #efeee8; }

.user-employee-picker {
  position: relative;
}

.user-employee-picker-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  transform: translateY(-50%);
  color: #777b70;
  pointer-events: none;
}

.user-employee-picker .form-input {
  padding-right: 39px;
  padding-left: 34px;
}

.user-employee-picker.has-selection .form-input {
  border-color: rgba(101, 112, 74, 0.42);
  background: #f6f8f1;
  font-weight: 700;
}

.user-employee-picker > button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #7d2926;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.user-employee-picker > button.active {
  display: grid;
  place-items: center;
}

.user-employee-picker-results {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 60;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(40, 42, 34, 0.16);
}

.user-employee-picker-summary {
  padding: 8px 11px;
  border-bottom: 1px solid rgba(52, 55, 35, 0.09);
  background: #f7f6f1;
  color: #777a70;
  font-size: 0.7rem;
}

.user-employee-picker-option,
.user-employee-picker-unlinked {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid rgba(52, 55, 35, 0.08);
  background: #fff;
  color: #30332c;
  text-align: left;
  cursor: pointer;
}

.user-employee-picker-option:hover,
.user-employee-picker-option:focus-visible,
.user-employee-picker-unlinked:hover,
.user-employee-picker-unlinked:focus-visible {
  background: #eef2e9;
  outline: 0;
}

.user-employee-picker-option span,
.user-employee-picker-option small {
  display: block;
}

.user-employee-picker-option span {
  font-size: 0.82rem;
  font-weight: 800;
}

.user-employee-picker-option small {
  margin-top: 2px;
  color: #777a70;
  font-size: 0.68rem;
}

.user-employee-picker-unlinked {
  color: #7d2926;
  background: #fbf6f4;
  font-size: 0.74rem;
  font-weight: 800;
}

.user-employee-picker-empty {
  padding: 18px 12px;
  color: #858779;
  font-size: 0.78rem;
  text-align: center;
}

.user-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  align-items: stretch;
}

.user-password-control .form-input {
  border-radius: 5px 0 0 5px;
}

.user-password-control button {
  display: grid;
  place-items: center;
  color: #4d5139;
  background: #f1efe6;
  border: 1px solid rgba(52, 55, 35, 0.2);
  border-left: 0;
  cursor: pointer;
}

.user-password-control button:last-child { border-radius: 0 5px 5px 0; }
.user-password-control button:hover { color: #ffffff; background: #65704a; }

.user-password-control svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-form-status-message {
  margin-top: 14px;
  padding: 10px 12px;
  color: #7d2826;
  background: rgba(125, 40, 38, 0.06);
  border-left: 3px solid #7d2826;
  border-radius: 3px;
  font-size: 0.74rem;
  font-weight: 700;
}

.user-form-status-message[hidden],
#user-status-field[hidden] {
  display: none !important;
}

@container (max-width: 920px) {
  .user-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-role-card p { min-height: 0; }
  .user-account-row {
    grid-template-columns: minmax(190px, 1.2fr) minmax(160px, 1fr) 105px auto;
  }
  .user-account-scope { display: none; }
}

@container (max-width: 700px) {
  .user-security-banner { grid-template-columns: 44px minmax(0, 1fr); }
  .user-security-icon { width: 44px; height: 44px; }
  .user-security-stats { grid-column: 1 / -1; width: 100%; }
  .user-security-stats div { flex: 1; }
  .user-section-heading { align-items: start; flex-direction: column; gap: 5px; }
  .user-section-heading p { text-align: left; }
  .user-account-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .user-account-role { grid-column: 1; }
  .user-account-status { grid-column: 2; grid-row: 1; }
  .user-account-actions { grid-column: 2; grid-row: 2; }
  .user-access-matrix { overflow-x: auto; }
  .user-access-head,
  .user-access-row { min-width: 690px; }
}

@media (max-width: 760px) {
  .user-security-center { padding: 14px 12px; }
  .user-role-grid { grid-template-columns: 1fr; }
  .user-accounts-panel,
  .user-access-panel { padding: 14px; }
  .user-account-modal { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .user-account-modal-body { padding: 18px; }
  .role-preview-banner { min-height: 64px; padding: 8px 10px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
  .role-preview-banner-icon { width: 30px; height: 30px; }
  .role-preview-banner-copy span { white-space: normal; line-height: 1.3; }
  .role-preview-banner button { min-height: 32px; padding: 0 9px; }
  body.role-preview-mode .content-header { top: 64px; }
}

/* Quotation project picker */
.quotation-project-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 30, 20, 0.58);
  backdrop-filter: blur(4px);
}

.quotation-project-picker {
  width: min(720px, calc(100vw - 40px));
  max-height: min(760px, calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #343723;
  background: #fbfaf6;
  border: 1px solid rgba(239, 233, 215, 0.86);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(27, 29, 19, 0.34);
}

.quotation-project-picker-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 18px;
  color: #ffffff;
  background: #343723;
  border-bottom: 4px solid #8d2a27;
}

.quotation-project-picker-header span {
  display: block;
  margin-bottom: 2px;
  color: #d58c82;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.quotation-project-picker-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.12rem;
  line-height: 1.35;
}

.quotation-project-picker-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  cursor: pointer;
}

.quotation-project-picker-close:hover { background: rgba(255, 255, 255, 0.16); }
.quotation-project-picker-close svg,
.quotation-project-picker-search svg,
.quotation-project-option-check svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-project-picker-body {
  min-height: 0;
  padding: 20px 22px;
  overflow-y: auto;
}

.quotation-project-picker-search {
  height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.22);
  border-radius: 6px;
}

.quotation-project-picker-search:focus-within {
  border-color: #74794f;
  box-shadow: 0 0 0 3px rgba(116, 121, 79, 0.14);
}

.quotation-project-picker-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: #343723;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.quotation-project-picker-count {
  margin: 12px 2px 8px;
  color: #77786b;
  font-size: 0.76rem;
  font-weight: 700;
}

.quotation-project-picker-list {
  display: grid;
  gap: 8px;
}

.quotation-project-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(130px, 0.75fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: #343723;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(52, 55, 35, 0.14);
  border-radius: 6px;
  cursor: pointer;
}

.quotation-project-option:hover { border-color: rgba(116, 121, 79, 0.58); }
.quotation-project-option.is-selected {
  background: #f3f2e9;
  border-color: #74794f;
  box-shadow: inset 4px 0 0 #74794f;
}

.quotation-project-option-code {
  color: #8d2a27;
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
}

.quotation-project-option strong,
.quotation-project-option-customer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-project-option strong { font-size: 0.86rem; }
.quotation-project-option-customer { color: #6f7063; font-size: 0.78rem; }
.quotation-project-option-check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: transparent;
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-radius: 50%;
}
.quotation-project-option.is-selected .quotation-project-option-check {
  color: #ffffff;
  background: #74794f;
  border-color: #74794f;
}

.quotation-project-picker-empty {
  padding: 38px 16px;
  display: grid;
  gap: 5px;
  color: #77786b;
  text-align: center;
  border: 1px dashed rgba(52, 55, 35, 0.2);
  border-radius: 6px;
}
.quotation-project-picker-empty strong { color: #343723; }
.quotation-project-picker-empty span { font-size: 0.78rem; }

.quotation-project-picker-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: #f3f0e7;
  border-top: 1px solid rgba(52, 55, 35, 0.12);
}
.quotation-project-picker-footer > span {
  min-width: 0;
  overflow: hidden;
  color: #68695e;
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-project-picker-footer > div { display: flex; gap: 8px; }
.quotation-project-picker-footer .btn { min-height: 40px; }
.quotation-project-picker-footer .btn-secondary {
  color: #343723 !important;
  background: #ffffff !important;
  border-color: rgba(52, 55, 35, 0.22) !important;
}
.quotation-project-picker-footer .btn-secondary:hover { background: #ebe8de !important; }
.quotation-project-picker-footer .btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 760px) {
  .quotation-project-picker-backdrop { padding: 10px; }
  .quotation-project-picker { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .quotation-project-picker-header,
  .quotation-project-picker-body { padding-left: 16px; padding-right: 16px; }
  .quotation-project-option { grid-template-columns: 78px minmax(0, 1fr) 26px; gap: 9px; }
  .quotation-project-option-customer { grid-column: 2; }
  .quotation-project-option-check { grid-column: 3; grid-row: 1 / span 2; }
  .quotation-project-picker-footer { align-items: stretch; flex-direction: column; padding: 12px 16px; }
  .quotation-project-picker-footer > div { width: 100%; }
  .quotation-project-picker-footer .btn { flex: 1; }
}

/* ================================================================
   PTK ONE Archive Design System
   Shared by Document Center and Database list views.
   ================================================================ */
.archive-catalog-header {
  background: rgba(247, 243, 229, 0.96);
  border-bottom-color: rgba(var(--color-juniper-rgb), 0.14);
}

.archive-catalog-header .page-title-main {
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  line-height: 0.96;
}

.archive-catalog-view {
  max-width: 1280px;
  gap: 18px;
  padding-top: 28px;
  color: var(--color-juniper);
  font-family: 'Sarabun', sans-serif;
}

.archive-catalog-view::before {
  content: attr(data-archive-label);
  min-height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 18px;
  color: var(--color-palette-pearl);
  background: var(--color-juniper);
  border-left: 5px solid var(--color-coral);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(var(--color-juniper-rgb), 0.08);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.archive-catalog-view > div[style*="max-width: 1050px"],
.archive-catalog-view > div[style*="max-width: 1100px"],
.archive-catalog-view > div[style*="max-width: 1200px"] {
  max-width: none !important;
}

.archive-catalog-view > div:first-child {
  max-width: none !important;
}

.archive-catalog-view .table-controls {
  min-height: 68px;
  padding: 12px 16px !important;
  gap: 12px !important;
  background: var(--color-candle-darker) !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16) !important;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: none !important;
}

.archive-catalog-view .search-box {
  width: min(430px, 100%);
  max-width: none;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 13px;
  gap: 8px;
  background: var(--color-palette-pearl) !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.2) !important;
  border-radius: 6px !important;
}

.archive-catalog-view .search-box:focus-within {
  border-color: var(--color-leaf-dark) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-leaf-rgb), 0.14) !important;
}

.archive-catalog-view .search-box input {
  min-width: 0;
  padding: 10px 2px;
  color: var(--color-juniper) !important;
  font: 500 0.84rem 'Sarabun', sans-serif;
}

.archive-catalog-view .search-box input::placeholder {
  color: var(--color-juniper-light) !important;
  opacity: 0.72 !important;
}

.archive-catalog-view .search-box svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-leaf-dark) !important;
  opacity: 1 !important;
}

.archive-catalog-view .filter-group {
  gap: 8px;
}

.archive-catalog-view .filter-select,
.archive-catalog-view .table-controls select {
  min-height: 44px;
  padding: 0 36px 0 12px !important;
  color: var(--color-juniper) !important;
  background: var(--color-palette-pearl) !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.2) !important;
  border-radius: 6px !important;
  font: 700 0.82rem 'Sarabun', sans-serif;
}

.archive-catalog-view .table-outer,
.archive-catalog-view .table-container {
  width: 100%;
  max-width: 100%;
  margin-top: 0 !important;
  background: var(--color-palette-pearl) !important;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.16) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 22px rgba(var(--color-juniper-rgb), 0.07) !important;
  overflow-x: auto;
}

.archive-catalog-view .custom-table {
  min-width: 820px;
  background: var(--color-palette-pearl);
}

.archive-catalog-view .custom-table th,
.archive-catalog-view .table-container table th {
  position: static;
  padding: 13px 11px;
  color: var(--color-palette-pearl);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  background: var(--color-juniper);
  border-right: 1px solid rgba(var(--color-candle-rgb), 0.1);
  border-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.archive-catalog-view .custom-table th:last-child,
.archive-catalog-view .table-container table th:last-child {
  border-right: 0;
}

.archive-catalog-view .custom-table td,
.archive-catalog-view .table-container table td {
  padding: 14px 11px;
  color: var(--color-juniper);
  background: transparent;
  border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1);
  font-size: 0.86rem;
}

.archive-catalog-view .custom-table tbody tr:last-child td,
.archive-catalog-view .table-container table tbody tr:last-child td {
  border-bottom: 0;
}

.archive-catalog-view .custom-table tbody tr:hover,
.archive-catalog-view .table-container table tbody tr:hover {
  background: rgba(var(--color-leaf-rgb), 0.08);
}

.archive-catalog-view .action-btn,
.archive-catalog-view .custom-table .btn {
  min-width: 36px;
  min-height: 36px;
  border-radius: 6px !important;
}

.archive-catalog-view .invoice-card-list {
  gap: 10px !important;
}

.archive-catalog-view .invoice-card {
  border-color: rgba(var(--color-juniper-rgb), 0.15) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(var(--color-juniper-rgb), 0.06) !important;
}

.archive-catalog-view .employee-directory,
.archive-catalog-view .artwork-catalog {
  max-width: none;
}

.archive-catalog-view .employee-overview-band,
.archive-catalog-view .artwork-catalog-tabs {
  border-radius: 6px 6px 0 0;
}

.archive-catalog-view .employee-directory-panel,
.archive-catalog-view .artwork-catalog-list,
.archive-catalog-view .artwork-catalog-pagination {
  border-radius: 0;
}

.archive-catalog-view .employee-directory-toolbar,
.archive-catalog-view .artwork-catalog-toolbar {
  background: var(--color-candle-darker);
  border-color: rgba(var(--color-juniper-rgb), 0.16);
}

.archive-catalog-view .employee-search-control,
.archive-catalog-view .artwork-catalog-search,
.archive-catalog-view .employee-filter-controls label,
.archive-catalog-view .artwork-catalog-filter {
  border-radius: 6px;
}

@media (max-width: 1200px) {
  .archive-catalog-view {
    padding: 20px 18px !important;
  }

  .archive-catalog-view .custom-table {
    min-width: 760px;
  }

  .archive-catalog-view .custom-table th,
  .archive-catalog-view .custom-table td,
  .archive-catalog-view .table-container table th,
  .archive-catalog-view .table-container table td {
    padding: 11px 8px !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 768px) {
  .archive-catalog-header .page-title-main {
    font-size: 2rem;
  }

  .archive-catalog-view {
    gap: 12px;
    padding: 14px 10px 24px !important;
  }

  .archive-catalog-view::before {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .archive-catalog-view .table-controls {
    min-height: 0;
    align-items: stretch !important;
    flex-direction: column;
    padding: 10px !important;
  }

  .archive-catalog-view .search-box,
  .archive-catalog-view .filter-group,
  .archive-catalog-view .filter-select,
  .archive-catalog-view .table-controls select {
    width: 100%;
    max-width: none;
  }

  .archive-catalog-view .filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-catalog-view .invoice-card {
    border-radius: 6px !important;
  }

  .archive-catalog-view .table-outer,
  .archive-catalog-view .table-container {
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .archive-catalog-view .custom-table {
    min-width: 0;
    display: block !important;
    background: transparent;
  }

  .archive-catalog-view .custom-table tbody {
    display: grid !important;
    gap: 10px;
  }

  .archive-catalog-view .custom-table tr,
  .archive-catalog-view .custom-table tr.order-main-row {
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--color-palette-pearl) !important;
    border: 1px solid rgba(var(--color-juniper-rgb), 0.16) !important;
    border-left: 4px solid var(--color-leaf-dark) !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 15px rgba(var(--color-juniper-rgb), 0.06);
  }

  .archive-catalog-view .custom-table td {
    width: auto !important;
    max-width: none !important;
    min-height: 42px;
    display: grid !important;
    grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 9px 11px !important;
    color: var(--color-juniper) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.09) !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .archive-catalog-view .custom-table td:last-child {
    border-bottom: 0 !important;
  }

  .archive-catalog-view .custom-table td::before {
    content: attr(data-label);
    color: var(--color-juniper-light);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .archive-catalog-view .custom-table td[colspan] {
    display: block !important;
    text-align: center !important;
  }

  .archive-catalog-view .custom-table td[colspan]::before {
    content: none;
  }
}

@media (max-width: 520px) {
  .archive-catalog-view .filter-group {
    grid-template-columns: 1fr;
  }

  .archive-catalog-view .custom-table td {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

/* Tax invoice archive: compact planning-center information hierarchy. */
.tax-invoice-archive {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.tax-invoice-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid rgba(var(--color-juniper-rgb), 0.14);
  border-top: 0;
}

.tax-invoice-summary > div {
  min-width: 0;
  padding: 12px 16px;
  border-right: 1px solid rgba(var(--color-juniper-rgb), 0.1);
  text-align: center;
}

.tax-invoice-summary > div:last-child {
  border-right: 0;
}

.tax-invoice-summary strong,
.tax-invoice-summary span {
  display: block;
}

.tax-invoice-summary strong {
  overflow: hidden;
  color: var(--color-juniper);
  font-size: 1rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tax-invoice-summary span {
  margin-top: 2px;
  color: var(--color-juniper-light);
  font-size: 0.72rem;
  font-weight: 700;
}

.tax-invoice-table-wrap {
  margin-top: 12px !important;
}

.tax-invoice-table th,
.tax-invoice-index,
.tax-invoice-table td:nth-last-child(-n + 4) {
  text-align: center !important;
}

.tax-invoice-id,
.tax-invoice-order {
  font-family: "IBM Plex Mono", monospace;
}

.tax-invoice-id,
.tax-invoice-work,
.tax-invoice-amount {
  color: var(--color-juniper);
}

.tax-invoice-work {
  font-weight: 800;
}

.tax-invoice-order,
.tax-invoice-date {
  margin-top: 3px;
  color: var(--color-juniper-light);
  font-size: 0.76rem;
  font-weight: 650;
}

.tax-invoice-customer {
  font-weight: 700;
}

.tax-invoice-manage {
  display: inline-flex !important;
  width: auto !important;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  white-space: nowrap;
}

.tax-invoice-empty {
  padding: 40px !important;
  color: var(--color-juniper-light) !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .tax-invoice-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tax-invoice-summary > div:nth-child(2) {
    border-right: 0;
  }

  .tax-invoice-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(var(--color-juniper-rgb), 0.1);
  }

  .tax-invoice-table td:nth-last-child(-n + 4) {
    text-align: right !important;
  }

  .tax-invoice-manage {
    width: 100% !important;
  }
}
/* Scale Sheet Builder usability pass: large controls, free-angle measurements, optional side view */
.scale-builder-panel-title strong { font-size: 1.18rem; }
.scale-builder-panel-title span { margin-top: 5px; color: #686a5f; font-size: .95rem; line-height: 1.5; }
.scale-builder-field span,.scale-builder-entry-grid label span { margin-bottom: 7px; color: #4b4d43; font-size: .95rem; font-weight: 800; }
.scale-builder-field input,.scale-builder-entry-grid input,.scale-builder-entry-grid select { height: 48px; padding: 9px 12px; border-color: #c9c7bb; font: inherit; font-size: 1.05rem; }
.scale-builder-view-tabs button,.scale-builder-mode-tabs button { min-height: 48px; padding: 9px 10px; font: inherit; font-size: 1.02rem; font-weight: 800; }
.scale-builder-view-tabs button small { display: block; margin-top: 1px; font-size: .72rem; font-weight: 600; }
.scale-builder-image-actions button,.scale-builder-tool-row button,.scale-builder-undo-row button { min-height: 46px; padding: 9px 13px; border-color: #bbb9ad; font: inherit; font-size: .98rem; font-weight: 750; }
.scale-builder-image-actions .background-tool { border-color: #465839; background: #465839; color: #fff; }
.scale-builder-next,.scale-builder-add { min-height: 48px; font: inherit; font-size: .96rem; }
.scale-builder-add { min-height: 46px; margin-top: 10px; }
.scale-builder-entry-grid.measurement-entry { grid-template-columns: minmax(0,1.4fr) minmax(74px,.6fr) minmax(88px,.7fr); }
.scale-builder-entry-grid.measurement-entry.area-entry { grid-template-columns: minmax(0,1.35fr) minmax(70px,.55fr) minmax(70px,.55fr) minmax(88px,.7fr); }
.scale-builder-measure-type { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 0 12px; }
.scale-builder-measure-type button { min-height: 44px; border: 1px solid #c9c7bb; background: #fff; color: #4b4d43; font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; }
.scale-builder-measure-type button:first-child { border-radius: 5px 0 0 5px; }
.scale-builder-measure-type button:last-child { border-left: 0; border-radius: 0 5px 5px 0; }
.scale-builder-measure-type button.active { border-color: #465839; background: #465839; color: #fff; }
.scale-builder-measure-row.area input[readonly] { background: #f3f1e8; color: #343723; font-weight: 800; }

@media (max-width: 1100px) {
  .scale-builder-entry-grid.measurement-entry.area-entry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scale-builder-entry-grid.measurement-entry.area-entry label:first-child { grid-column: 1 / -1; }
}
.scale-builder-draw-help { margin: 12px 0; padding: 12px 14px; border-left: 4px solid #7d2826; background: #f2eee8; color: #4f5048; }
.scale-builder-draw-help b,.scale-builder-draw-help span { display: block; }
.scale-builder-draw-help b { margin-bottom: 4px; color: #343723; font-size: 1.02rem; }
.scale-builder-draw-help span { font-size: .95rem; line-height: 1.55; }
.scale-builder-measure-row { grid-template-columns: 40px minmax(0,1fr) 76px 48px 42px; min-height: 52px; gap: 6px; padding: 6px; font-size: .95rem; }
.scale-builder-empty-list { font-size: .95rem; }
.scale-paper-views.single { grid-template-columns: 1fr; }
.scale-paper-view>strong { margin-bottom: 5px; font-size: 11px; }
.scale-paper-measure { position: absolute; inset: 0; z-index: 3; transform: none; pointer-events: none; touch-action: none; }
.scale-measure-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scale-measure-visible { stroke: #c51f24; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.scale-measure-leader { stroke: #b4232a; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.scale-measure-hit { stroke: transparent; stroke-width: 16; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: move; }
.scale-measure-endpoint { display: none; }
.scale-measure-handle { position: absolute; z-index: 4; width: 34px; height: 34px; padding: 0; transform: translate(-50%,-50%); border: 4px solid #fff; border-radius: 50%; background: #c51f24; box-shadow: 0 0 0 2px #c51f24,0 2px 6px rgba(0,0,0,.32); pointer-events: auto; cursor: grab; touch-action: none; }
.scale-measure-caption { position: absolute; z-index: 5; padding: 0; transform: translate(-50%,-50%); border: 0; background: none; color: #fff; font: inherit; font-size: 12px; cursor: grab; pointer-events: auto; touch-action: none; }
.scale-measure-caption b,.scale-paper-label b { position: relative; display: inline-grid; width: 20px; height: 20px; place-items: center; background: #3d4930; color: #fff; }
.scale-measure-caption span,.scale-paper-label span { position: relative; display: block; margin-top: 2px; padding: 4px 6px; border: 1px solid #999; background: rgba(255,255,255,.96); white-space: nowrap; }
.scale-measure-caption small { display: block; font-size: 11px; font-weight: 800; }
.scale-paper-measure.dragging .scale-measure-handle { cursor: grabbing; transform: translate(-50%,-50%) scale(1.18); }
.scale-paper-measure.caption-dragging .scale-measure-caption { cursor: grabbing; }
.scale-paper-label { z-index: 4; font-size: 11px; }

@media (max-width: 760px) {
  .scale-builder-entry-grid.measurement-entry { grid-template-columns: 1fr 1fr; }
  .scale-builder-entry-grid.measurement-entry.area-entry { grid-template-columns: 1fr 1fr; }
  .scale-builder-entry-grid.measurement-entry label:first-child { grid-column: 1 / -1; }
  .scale-measure-handle { width: 34px; height: 34px; }
  .scale-builder-panel-title strong { font-size: 1.2rem; }
}

/* Scale Sheet Builder: compact production-grade image tools. */
.scale-builder-app { position: relative; }
.scale-builder-image-picker { position: relative; height: 228px; border-style: solid; background: #f2f2ee; }
.scale-builder-image-picker.has-image { border-color: #c8c8bf; background: #e9e9e5; }
.scale-builder-image-picker.is-background-preview {
  background-color: #ecece8;
  background-image: linear-gradient(45deg, #d8d8d2 25%, transparent 25%), linear-gradient(-45deg, #d8d8d2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8d8d2 75%), linear-gradient(-45deg, transparent 75%, #d8d8d2 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.scale-builder-preview-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0 !important;
  padding: 4px 7px;
  border: 1px solid rgba(52,55,35,.2);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: #343723 !important;
  font-size: .68rem !important;
  font-weight: 800;
}
.scale-builder-media-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.scale-builder-media-toolbar button,
.scale-builder-transform-bar button,
.scale-builder-background-review button {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid #c5c5bc;
  border-radius: 5px;
  background: #fff;
  color: #343723;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.scale-builder-media-toolbar button:hover,
.scale-builder-transform-bar button:hover,
.scale-builder-background-review button:hover { border-color: #6f7869; background: #f5f5f1; }
.scale-builder-media-toolbar button:focus-visible,
.scale-builder-transform-bar button:focus-visible,
.scale-builder-background-review button:focus-visible { outline: 2px solid rgba(125,41,38,.35); outline-offset: 2px; }
.scale-builder-media-toolbar svg,
.scale-builder-transform-bar svg,
.scale-builder-background-review svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scale-builder-media-toolbar .primary { border-color: #3f4c39; background: #3f4c39; color: #fff; }
.scale-builder-media-toolbar .primary:hover,
.scale-builder-media-toolbar .primary:focus-visible { border-color: #303b2b; background: #303b2b; color: #fff; }
.scale-builder-media-toolbar .background-tool { border-color: #88998f; background: #eef2ef; color: #31443b; }
.scale-builder-media-toolbar .icon,
.scale-builder-transform-bar .icon { width: 42px; flex: 0 0 42px; padding: 0; }
.scale-builder-media-toolbar .danger { margin-left: auto; border-color: rgba(125,41,38,.28); background: #fbf5f4; color: #7d2926; }
.scale-builder-transform-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px;
  border: 1px solid #d1d1c8;
  border-radius: 6px;
  background: #efefeb;
}
.scale-builder-transform-bar .fit-control { flex: 1 1 auto; justify-content: flex-start; background: #fff; }
.scale-builder-tool-divider { width: 1px; height: 26px; margin: 0 2px; background: #c9c9c0; }
.scale-builder-background-review {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #a8b2aa;
  border-left: 4px solid #52675a;
  border-radius: 5px;
  background: #f4f6f4;
}
.scale-builder-background-review strong,
.scale-builder-background-review span { display: block; }
.scale-builder-background-review strong { color: #2f3b34; font-size: .82rem; }
.scale-builder-background-review span { margin-top: 3px; color: #666c68; font-size: .72rem; line-height: 1.45; }
.scale-builder-background-review > div:last-child { display: flex; gap: 7px; }
.scale-builder-background-review button { flex: 1; }
.scale-builder-background-review .confirm { border-color: #405544; background: #405544; color: #fff; }
.scale-paper-views { min-height: 0; height: auto; flex: 1 1 auto; }
.scale-paper-bottom { flex: 0 0 auto; margin-top: 7px; }
.scale-paper-bottom .scale-paper-table { margin-top: 0; }
.scale-paper-view { height: 100%; min-height: 0; overflow: hidden; }
.scale-paper-view > strong { flex: 0 0 auto; }
.scale-paper-image > img { object-position: center; }
.scale-measure-handle {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.scale-measure-handle::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%,-50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b4232a;
  box-shadow: 0 0 0 1px #b4232a, 0 1px 3px rgba(0,0,0,.28);
}
.scale-measure-handle:hover::after,
.scale-measure-handle:focus-visible::after { width: 14px; height: 14px; }
.scale-paper-measure.dragging .scale-measure-handle { transform: translate(-50%,-50%); }
.scale-paper-measure.dragging .scale-measure-handle::after { width: 14px; height: 14px; }
.scale-measure-visible { stroke: #b4232a; stroke-width: 1.35; }
.scale-measure-caption span {
  display: block;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 4px;
  background: #3d4930;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.scale-measure-caption:hover span,
.scale-measure-caption:focus-visible span { background: #29331f; }
.scale-measure-caption:focus-visible { outline: 2px solid rgba(125,41,38,.5); outline-offset: 3px; }
.scale-builder-app > .mini-notification {
  position: fixed;
  top: 78px;
  right: 18px;
  z-index: 10070;
  max-width: min(380px, calc(100vw - 36px));
  padding: 11px 14px;
  border: 1px solid rgba(52,55,35,.16);
  border-left: 4px solid #52675a;
  border-radius: 5px;
  background: #fff;
  color: #343723;
  box-shadow: 0 8px 24px rgba(35,37,23,.16);
  font-size: .8rem;
  font-weight: 750;
}
.scale-builder-app > .mini-notification.warning { border-left-color: #a96f22; }

@media (max-width: 900px) {
  .scale-builder-media-toolbar { flex-wrap: wrap; }
  .scale-builder-media-toolbar .primary { flex: 1 1 130px; }
  .scale-builder-transform-bar { gap: 3px; padding: 4px; overflow: hidden; }
  .scale-builder-transform-bar .fit-control { min-width: 104px; }
  .scale-builder-transform-bar .icon { width: 38px; flex-basis: 38px; }
  .scale-builder-tool-divider { margin: 0; }
  .scale-paper-views { min-height: 0; height: auto; }
}

/* Scale Sheet Studio: compact canvas-first image editing. */
.scale-builder-context-grid { display: grid; gap: 8px; margin-top: 12px; }
.scale-builder-context-grid .scale-builder-field { margin: 0; }
.scale-builder-context-grid .scale-builder-field span { margin-bottom: 4px; color: #575b56; font-size: .76rem; }
.scale-builder-context-grid .scale-builder-field input { height: 40px; padding: 7px 10px; border-color: #d1d3cd; background: #f7f7f4; color: #30332f; font-size: .9rem; }
.scale-builder-view-tabs { margin-top: 10px; }
.scale-builder-view-tabs button { min-height: 42px; font-size: .9rem; }
.scale-builder-editor-shell {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #d1d4ce;
  border-radius: 7px;
  background: #e6e8e5;
  box-shadow: 0 8px 20px rgba(39,43,39,.08);
}
.scale-builder-editor-shell .scale-builder-media-toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  border-bottom: 1px solid #d9dbd6;
  background: #fff;
  scrollbar-width: none;
}
.scale-builder-editor-shell .scale-builder-media-toolbar::-webkit-scrollbar { display: none; }
.scale-builder-toolbar-group { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.scale-builder-toolbar-group + .scale-builder-toolbar-group { padding-left: 5px; border-left: 1px solid #dedfdb; }
.scale-builder-toolbar-group.effects { margin-left: auto; }
.scale-builder-toolbar-group.arrange {
  width: 100%;
  padding: 5px 0 0 !important;
  border-top: 1px solid #dedfdb;
  border-left: 0 !important;
}
.scale-builder-toolbar-group.arrange .fit-control { flex: 1 1 auto; }
.scale-builder-editor-shell .scale-builder-media-toolbar button {
  min-height: 38px;
  padding: 7px 9px;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  color: #343936;
  font-size: .74rem;
  font-weight: 750;
}
.scale-builder-editor-shell .scale-builder-media-toolbar button:hover { border-color: #d7d9d4; background: #f1f3f0; }
.scale-builder-editor-shell .scale-builder-media-toolbar .primary { border-color: #344a3b; background: #344a3b; color: #fff; }
.scale-builder-editor-shell .scale-builder-media-toolbar .primary:hover { border-color: #273b2f; background: #273b2f; }
.scale-builder-editor-shell .scale-builder-media-toolbar .background-tool { border-color: #c5d8d0; background: #eaf4f0; color: #23463a; }
.scale-builder-editor-shell .scale-builder-media-toolbar .fit-control { min-width: 72px; }
.scale-builder-editor-shell .scale-builder-media-toolbar .icon { width: 36px; min-width: 36px; flex-basis: 36px; padding: 0; }
.scale-builder-editor-shell .scale-builder-media-toolbar .danger { margin: 0; border-color: transparent; background: transparent; color: #8b302e; }
.scale-builder-editor-shell .scale-builder-media-toolbar svg { width: 16px; height: 16px; }
.scale-builder-editor-shell .scale-builder-image-picker {
  height: 320px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #eef0ed;
}
.scale-builder-editor-shell .scale-builder-image-picker.has-image { background: #dfe2df; }
.scale-builder-editor-shell .scale-builder-image-picker.is-empty-upload {
  width: 100%;
  padding: 0;
  color: #343936;
  font: inherit;
  cursor: pointer;
}
.scale-builder-editor-shell .scale-builder-image-picker.is-empty-upload:hover { border-color: #6f7869; background: #e8ece7; }
.scale-builder-editor-shell .scale-builder-image-picker.is-empty-upload:focus-visible { outline: 3px solid rgba(61,105,85,.28); outline-offset: -3px; }
.scale-builder-editor-shell .scale-builder-image-picker.is-empty-upload b { font-size: .9rem; }
.scale-builder-editor-shell .scale-builder-image-picker.is-empty-upload span { margin-top: 6px; font-size: .72rem; }
.scale-builder-editor-shell .scale-builder-image-picker img { object-position: center; }
.scale-builder-editor-shell .scale-builder-image-picker.is-background-preview { background-size: 14px 14px; }
.scale-builder-editor-shell .scale-builder-preview-badge {
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(39,55,47,.18);
  border-radius: 5px;
  background: rgba(255,255,255,.94);
  color: #2e4338 !important;
  box-shadow: 0 3px 10px rgba(35,42,38,.1);
}
.scale-builder-editor-shell .scale-builder-background-review {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(46,67,56,.2);
  border-left: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(30,39,34,.16);
  backdrop-filter: blur(8px);
}
.scale-builder-editor-shell .scale-builder-background-review > div { padding: 0; text-align: left; }
.scale-builder-review-copy { min-width: 0; }
.scale-builder-editor-shell .scale-builder-review-copy strong { color: #293b32; font-size: .78rem; }
.scale-builder-editor-shell .scale-builder-review-copy span { margin-top: 2px; overflow: hidden; color: #687069; font-size: .66rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.scale-builder-sensitivity { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; color: #4b544f; font-size: .68rem; font-weight: 750; }
.scale-builder-sensitivity input { width: 100%; accent-color: #3d6955; cursor: pointer; }
.scale-builder-review-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 5px; }
.scale-builder-editor-shell .scale-builder-background-review button { min-height: 34px; flex: 0 0 auto; padding: 6px 9px; border-radius: 5px; font-size: .7rem; }
.scale-builder-editor-shell .scale-builder-background-review button:not(.compare):not(.confirm) { width: 34px; padding: 0; }
.scale-builder-editor-shell .scale-builder-background-review .compare { margin-right: auto; border-color: #d2d5d0; background: #f4f5f3; color: #414844; }
.scale-builder-editor-shell .scale-builder-background-review .confirm { border-color: #355543; background: #355543; color: #fff; }
.scale-builder-next { margin-top: 12px; }

@media (max-width: 900px) {
  .scale-builder-editor-shell .scale-builder-media-toolbar { flex-wrap: wrap; }
  .scale-builder-editor-shell .scale-builder-media-toolbar .primary { flex: 0 0 auto; }
  .scale-builder-editor-shell .scale-builder-image-picker { height: 300px; }
}

@media (max-width: 480px) {
  .scale-builder-editor-shell .scale-builder-image-picker { height: 282px; }
  .scale-builder-editor-shell .scale-builder-background-review { grid-template-columns: 1fr; }
  .scale-builder-editor-shell .scale-builder-review-copy span { white-space: normal; }
}

/* Project work process: keep the finished dashboard as the default and add one quiet data view. */
.project-work-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid #c9c7ba;
  border-radius: 6px;
  overflow: hidden;
  background: #f6f5ef;
}
.project-work-mode-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 16px;
  border: 0;
  border-right: 1px solid #c9c7ba;
  border-radius: 0;
  background: transparent;
  color: #3b4035;
  text-align: left;
  cursor: pointer;
}
.project-work-mode-button:last-child { border-right: 0; }
.project-work-mode-button:hover { background: #ecece4; }
.project-work-mode-button.active { background: #343b27; color: #fff; }
.project-work-mode-button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(125, 41, 38, .28); outline-offset: -3px; }
.project-work-mode-button > span:last-child { min-width: 0; }
.project-work-mode-button strong,
.project-work-mode-button small { display: block; letter-spacing: 0; }
.project-work-mode-button strong { font-size: .95rem; line-height: 1.25; }
.project-work-mode-button small { margin-top: 2px; color: #74776f; font-size: .72rem; line-height: 1.35; }
.project-work-mode-button.active small { color: rgba(255, 255, 255, .72); }
.project-work-mode-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #a7aa9e;
  border-radius: 50%;
  font-size: .66rem;
  font-weight: 800;
}
.project-work-mode-button.active .project-work-mode-icon { border-color: rgba(255, 255, 255, .7); }

.project-materials-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid #c9c7ba;
  border-left: 4px solid #7d2926;
  background: #fff;
}
.project-materials-toolbar > div { min-width: 0; }
.project-materials-toolbar span { color: #7d2926; font-size: .66rem; font-weight: 850; }
.project-materials-toolbar h3 { margin: 2px 0 0; color: #30352c; font-size: 1.15rem; letter-spacing: 0; }
.project-materials-toolbar p { margin: 3px 0 0; color: #6e716a; font-size: .76rem; line-height: 1.45; }
.project-materials-toolbar button,
.project-material-round header button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid #9fa496;
  border-radius: 5px;
  background: #fff;
  color: #343b2b;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}
.project-materials-toolbar button:hover,
.project-material-round header button:hover { border-color: #626b56; background: #f2f3ed; }
.project-materials-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #d4d2c7;
  border-top: 0;
  background: #f5f5f1;
}
.project-materials-kpis > div { min-width: 0; padding: 12px 16px; border-right: 1px solid #d4d2c7; }
.project-materials-kpis > div:last-child { border-right: 0; }
.project-materials-kpis small,
.project-materials-kpis span { display: block; color: #74776f; font-size: .68rem; letter-spacing: 0; }
.project-materials-kpis strong { display: inline-block; margin: 2px 6px 0 0; color: #30352c; font-size: 1.25rem; }
.project-materials-kpis span { display: inline; }
.project-materials-unassigned {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid #d7c8a6;
  border-left: 4px solid #8d7f55;
  background: #faf7ec;
  color: #4c4e45;
}
.project-materials-unassigned strong { font-size: .78rem; }
.project-materials-unassigned span { color: #6f633f; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.project-materials-unassigned small { grid-column: 1 / -1; color: #7a7b73; font-size: .68rem; }
.project-material-rounds { display: grid; gap: 14px; margin-top: 14px; }
.project-material-round { border: 1px solid #cbc9bd; border-radius: 7px; overflow: hidden; background: #fff; }
.project-material-round > header {
  display: grid;
  grid-template-columns: 52px minmax(180px, 1fr) 90px 110px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #d9d7cd;
  background: #f0f0ea;
}
.project-material-round-no { display: grid; place-items: center; min-height: 42px; border-right: 1px solid #cbc9bd; }
.project-material-round-no small,
.project-material-round-meta small { color: #777a72; font-size: .64rem; }
.project-material-round-no strong { color: #7d2926; font-size: 1.05rem; }
.project-material-round-title,
.project-material-round-meta { min-width: 0; }
.project-material-round-title strong,
.project-material-round-title span,
.project-material-round-meta small,
.project-material-round-meta strong { display: block; letter-spacing: 0; }
.project-material-round-title strong { color: #30352c; font-size: .9rem; }
.project-material-round-title span { margin-top: 2px; overflow-wrap: anywhere; color: #6f726a; font-size: .7rem; }
.project-material-round-meta strong { margin-top: 2px; color: #343a2e; font-size: .82rem; }
.project-material-section { padding: 14px; }
.project-material-section.actual { border-top: 1px solid #e1dfd7; background: #fafaf7; }
.project-material-section-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.project-material-section-heading strong { color: #34382f; font-size: .8rem; }
.project-material-section-heading span { color: #7b7e76; font-size: .68rem; }
.project-material-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #dad8ce; }
.project-material-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; table-layout: auto; }
.project-material-table-wrap th,
.project-material-table-wrap td { padding: 8px 10px; border-bottom: 1px solid #e3e1d9; color: #3e4339; font-size: .72rem; text-align: left; vertical-align: middle; }
.project-material-table-wrap th { background: #eaeae4; color: #55594f; font-size: .66rem; font-weight: 800; }
.project-material-table-wrap th:first-child,
.project-material-table-wrap td:first-child { width: 42px; text-align: center; }
.project-material-table-wrap th:nth-last-child(-n+2),
.project-material-table-wrap td:nth-last-child(-n+2) { white-space: nowrap; }
.project-material-table-wrap tbody tr:last-child td { border-bottom: 0; }
.project-material-table-wrap td small { display: block; margin-top: 2px; color: #81847c; font-size: .62rem; }
.project-material-number { font-variant-numeric: tabular-nums; font-weight: 750; text-align: right !important; }
.project-material-type { display: inline-block; padding: 2px 7px; border: 1px solid #c4c9bd; border-radius: 999px; background: #eff2ec; white-space: nowrap; }
.project-material-table-empty { padding: 18px !important; color: #888b83 !important; text-align: center !important; }
.project-materials-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; padding: 24px; border: 1px dashed #bbbcb4; background: #fafaf7; color: #777a72; text-align: center; }
.project-materials-empty strong { color: #3d4238; }
.project-materials-empty span { max-width: 620px; margin-top: 4px; font-size: .76rem; line-height: 1.5; }

@media (max-width: 1100px) {
  .project-material-round > header { grid-template-columns: 46px minmax(160px, 1fr) 80px 100px; }
  .project-material-round > header button { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 760px) {
  .project-work-mode-button { min-height: 58px; padding: 9px 10px; gap: 8px; }
  .project-work-mode-button small { display: none; }
  .project-work-mode-icon { flex-basis: 26px; width: 26px; height: 26px; }
  .project-materials-toolbar { align-items: stretch; flex-direction: column; }
  .project-materials-toolbar button { align-self: flex-start; }
  .project-materials-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-materials-kpis > div:nth-child(2) { border-right: 0; }
  .project-materials-kpis > div:nth-child(-n+2) { border-bottom: 1px solid #d4d2c7; }
  .project-materials-unassigned { grid-template-columns: 1fr; }
  .project-materials-unassigned span { white-space: normal; }
  .project-materials-unassigned small { grid-column: auto; }
  .project-material-round > header { grid-template-columns: 42px minmax(0, 1fr); gap: 8px 10px; }
  .project-material-round-no { grid-row: 1 / 3; }
  .project-material-round-meta { display: inline-flex; align-items: baseline; gap: 5px; }
  .project-material-round > header button { grid-column: 2; justify-self: start; }
  .project-material-section-heading { align-items: flex-start; flex-direction: column; gap: 1px; }
}
/* Internal work order planning and QR workflow */
#internal-work-modal {
  box-sizing: border-box;
  padding: 24px;
}

#internal-work-modal .modal-content {
  max-height: calc(100dvh - 48px);
}

#internal-work-form {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

#internal-work-form > .modal-body {
  min-height: 0;
  overflow-y: auto;
}

#internal-work-form > .modal-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  box-shadow: 0 -5px 14px rgba(52, 55, 35, 0.06);
}

.iw-order-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.iw-order-summary-item {
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid rgba(52, 55, 35, 0.15);
  background: #f8f7f2;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.iw-order-summary-item span {
  color: rgba(52, 55, 35, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
}

.iw-order-summary-item strong {
  color: var(--color-juniper);
  font-size: 1.08rem;
  white-space: nowrap;
}

.iw-order-summary-item.total {
  border-color: rgba(125, 40, 38, 0.35);
  background: rgba(125, 40, 38, 0.05);
}

.iw-order-summary-item.total strong {
  color: #7d2826;
}

.iw-modal-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  align-items: stretch;
}

.iw-qr-card {
  border: 1px solid rgba(52, 55, 35, 0.18);
  border-left: 3px solid var(--color-juniper);
  border-radius: 6px;
  background: #f8f7f2;
  padding: 10px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.iw-qr-card strong,
.iw-qr-card span {
  display: block;
}

.iw-qr-card strong {
  color: var(--color-juniper);
  font-size: 0.84rem;
  margin-bottom: 3px;
}

.iw-qr-card span {
  color: rgba(52, 55, 35, 0.68);
  font-size: 0.72rem;
  line-height: 1.35;
}

.iw-qr-preview {
  width: 84px;
  height: 84px;
  padding: 4px;
  background: #fff;
  border: 1px solid #dedbd2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iw-qr-preview svg,
.iw-qr-preview img {
  display: block;
  width: 100%;
  height: 100%;
}

.iw-total-field {
  background: rgba(125, 40, 38, 0.06) !important;
  border-color: rgba(125, 40, 38, 0.28) !important;
  color: #7d2826 !important;
  font-weight: 800 !important;
}

.daily-work-order-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(210px, .8fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(125, 40, 38, 0.3);
  border-left: 4px solid #7d2826;
  background: rgba(125, 40, 38, 0.045);
  border-radius: 6px;
}
.daily-work-lot-picker { min-width: 0; display: grid; gap: 4px; }
.daily-work-lot-picker span { color: #7d2826; font-size: .68rem; font-weight: 800; }
.daily-work-lot-picker select { width: 100%; min-height: 38px; border: 1px solid rgba(125,40,38,.3); background: #fff; color: #343723; padding: 6px 9px; font: inherit; }

.daily-work-order-source .source-code {
  color: #7d2826;
  font-size: 0.82rem;
  font-weight: 800;
}

.daily-work-order-source strong,
.daily-work-order-source span {
  display: block;
}

.daily-work-order-source strong {
  font-size: 0.9rem;
  color: var(--color-juniper);
}

.daily-work-order-source span {
  font-size: 0.76rem;
  color: rgba(52, 55, 35, 0.68);
}

.daily-work-order-source .source-total {
  text-align: right;
  font-weight: 800;
  color: var(--color-juniper);
  white-space: nowrap;
}

@media (max-width: 820px) {
  #internal-work-modal {
    padding: 12px;
  }

  #internal-work-modal .modal-content {
    max-height: calc(100dvh - 24px);
  }

  .iw-modal-lower-grid {
    grid-template-columns: 1fr;
  }

  .iw-top-fields { grid-template-columns: 1fr; }
  .iw-handover-method { grid-template-columns: 1fr; }
  .iw-handover-method__note { grid-column: auto; }

  #iw-linked-identity { grid-template-columns: 1fr; }

  .iw-order-summary {
    grid-template-columns: 1fr;
  }

  .daily-work-order-source {
    grid-template-columns: 1fr;
  }

  .daily-work-order-source .source-total {
    text-align: left;
  }
}
.casting-action-button.rework{color:#7d2826;border-color:rgba(125,40,38,.35);background:#fff7f5}
.casting-outcome-inline{display:flex;flex-wrap:wrap;gap:5px 10px;margin:9px 0 3px;padding:7px 8px;border-left:3px solid #7d2826;background:#f7f3ea;font-size:.72rem;color:#69675e}.casting-outcome-inline strong{color:#343723}
.casting-outcome-overlay{position:fixed;inset:0;z-index:10050;background:rgba(30,30,25,.62);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.casting-outcome-dialog{width:min(1120px,96vw);max-height:92vh;overflow:auto;background:#fbfaf6;border-radius:8px;box-shadow:0 22px 70px rgba(0,0,0,.28);font-family:"Sarabun",sans-serif;color:#343723}
.casting-outcome-dialog>header{position:sticky;top:0;z-index:2;background:#fbfaf6;display:flex;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid #ddd8ca}
.casting-outcome-dialog>header span{font:800 .68rem "Outfit";color:#7d2826}.casting-outcome-dialog>header h2{margin:2px 0;font-size:1.35rem}.casting-outcome-dialog>header p{margin:0;color:#777;font-size:.82rem}
.casting-outcome-dialog>header button{width:38px;height:38px;border:1px solid #d8d3c5;background:#fff;border-radius:6px;font-size:1.4rem;cursor:pointer}
.casting-outcome-guidance{margin:18px 26px 12px;padding:12px 14px;border-left:4px solid #7d2826;background:#f4f0e7;display:flex;flex-direction:column;gap:3px}.casting-outcome-guidance span{font-size:.82rem;color:#68675f}
.casting-outcome-table-wrap{margin:0 26px;overflow:auto;border:1px solid #ddd8ca}.casting-outcome-table{width:100%;min-width:780px;border-collapse:collapse;background:#fff}.casting-outcome-table th{padding:10px 7px;background:#ece7d8;text-align:center!important;font-size:.78rem}.casting-outcome-table td{padding:8px 7px;border-top:1px solid #eee;text-align:center}.casting-outcome-table td:first-child{text-align:left;min-width:220px}.casting-outcome-table td strong,.casting-outcome-table td small{display:block}.casting-outcome-table td small{color:#888;font-size:.7rem}
.casting-outcome-table input{width:68px;height:36px;border:1px solid #cec8b8;border-radius:5px;text-align:center;font-weight:700;background:#fff}.casting-outcome-table input[readonly]{background:#f2efe7;color:#777}
.outcome-balance{display:inline-flex;min-width:46px;justify-content:center;padding:4px 7px;border-radius:4px;font-size:.72rem;font-weight:800}.outcome-balance.is-valid{background:#e8f0e5;color:#3f6339}.outcome-balance.is-invalid{background:#f8e5e2;color:#9b201d}
.casting-outcome-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px 26px}.casting-outcome-fields label{display:flex;flex-direction:column;gap:6px}.casting-outcome-fields label.wide{grid-column:1/-1}.casting-outcome-fields label>span{font-weight:700;font-size:.82rem}.casting-outcome-fields select,.casting-outcome-fields input,.casting-outcome-fields textarea{width:100%;border:1px solid #cec8b8;background:#fff;border-radius:5px;padding:9px 10px;font:inherit}.casting-outcome-fields textarea{min-height:76px;resize:vertical}
.casting-outcome-summary{display:grid;grid-template-columns:repeat(4,1fr);margin:0 26px;border:1px solid #ddd8ca;background:#fff}.casting-outcome-summary div{padding:11px 14px;border-right:1px solid #eee}.casting-outcome-summary div:last-child{border:0}.casting-outcome-summary span,.casting-outcome-summary strong{display:block}.casting-outcome-summary span{font-size:.72rem;color:#777}.casting-outcome-summary strong{font-size:1.2rem}
.casting-outcome-dialog>footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:16px 26px;background:#fbfaf6;border-top:1px solid #ddd8ca}.casting-outcome-dialog>footer button{min-height:42px;padding:8px 20px;border-radius:6px;font-weight:800;cursor:pointer}.casting-outcome-dialog>footer .secondary{border:1px solid #cfc9b9;background:#fff}.casting-outcome-dialog>footer .primary{border:1px solid #7d2826;background:#7d2826;color:#fff}
.project-rework-strip{border:1px solid rgba(125,40,38,.28);border-left:5px solid #7d2826;background:#fffaf7;margin-bottom:18px}.project-rework-strip>header{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #eee}.project-rework-strip>header span,.project-rework-documents>header span{display:block;font:800 .64rem "Outfit";color:#7d2826}.project-rework-strip>header strong{font-size:.92rem}.project-rework-strip>header small{color:#7d2826;font-weight:700}
.project-rework-list article{display:grid;grid-template-columns:130px minmax(0,1fr) 100px minmax(250px,auto);gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid #eee}.project-rework-list article:last-child{border:0}.project-rework-list article.is-complete{opacity:.68}.project-rework-code{font:800 .78rem "Outfit";color:#7d2826}.project-rework-list article div strong,.project-rework-list article div small{display:block}.project-rework-list article div small{color:#777;font-size:.72rem}.project-rework-status{font-size:.72rem;font-weight:800}.project-rework-list button,.project-rework-documents button{border:1px solid rgba(125,40,38,.35);color:#7d2826;background:rgba(125,40,38,.04);border-radius:5px;padding:7px 9px;font-weight:700;cursor:pointer}.project-rework-actions{display:flex!important;justify-content:flex-end;gap:5px;flex-wrap:wrap}.project-rework-actions button{font-size:.7rem}.project-rework-actions button:disabled{opacity:.55;cursor:default}
.project-rework-documents{border:1px solid rgba(125,40,38,.28);background:#fff;margin-bottom:2px}.project-rework-documents>header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#f7f3ea}.project-rework-documents>header h4{margin:2px 0;font-size:1rem}.project-rework-documents>header p{margin:0;font-size:.72rem;color:#777}.project-rework-documents>header>strong{color:#7d2826}.project-rework-documents article{display:grid;grid-template-columns:125px minmax(0,1fr) 110px;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid #eee}.project-rework-documents article>span{font:800 .76rem "Outfit";color:#7d2826}.project-rework-documents article div strong,.project-rework-documents article div small{display:block}.project-rework-documents article div small{font-size:.72rem;color:#777}
@media(max-width:760px){.casting-outcome-overlay{padding:0}.casting-outcome-dialog{width:100%;height:100%;max-height:none;border-radius:0}.casting-outcome-fields{grid-template-columns:1fr}.casting-outcome-fields label.wide{grid-column:auto}.casting-outcome-summary{grid-template-columns:1fr 1fr}.casting-outcome-summary div:nth-child(2){border-right:0}.project-rework-list article{grid-template-columns:1fr}.project-rework-documents article{grid-template-columns:1fr}.casting-outcome-dialog>header{padding:16px}.casting-outcome-guidance,.casting-outcome-table-wrap,.casting-outcome-summary{margin-left:16px;margin-right:16px}.casting-outcome-fields{padding:16px}}
.ptk-keyboard-open {
  --ptk-field-safe-bottom: calc(var(--ptk-keyboard-inset, 0px) + 28px);
}

html,
body,
.modal-content,
.drawer-content,
.drawer-body,
.project-detail-main,
.scale-builder-sidebar {
  scroll-padding-bottom: var(--ptk-field-safe-bottom, 28px);
}

input:not([type="hidden"]),
textarea,
select,
[contenteditable="true"] {
  scroll-margin-top: 16px;
  scroll-margin-bottom: var(--ptk-field-safe-bottom, 28px);
}

/* Master mold lifecycle */
.mold-lifecycle-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(52,55,35,.15);border-left:4px solid #7d2826;background:#f8f6ef}
.mold-lifecycle-summary{display:flex;flex-direction:column;gap:2px;min-width:180px;color:#343723}.mold-lifecycle-summary span{font-size:.86rem}.mold-lifecycle-summary small{font-size:.72rem;color:rgba(52,55,35,.64)}
.mold-lifecycle-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.mold-lifecycle-actions button{min-height:36px;padding:7px 12px;border:1px solid #cbc6b7;background:#fff;color:#343723;border-radius:5px;font:700 .76rem "Sarabun",sans-serif;cursor:pointer}.mold-lifecycle-actions button.active{background:#343723;color:#fff;border-color:#343723}.mold-lifecycle-actions button.create{border-color:#7d2826;color:#7d2826;background:#fff9f7}
.mold-revision-tabs{display:flex;max-width:min(48vw,620px);align-items:center;gap:5px;padding:2px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}.mold-revision-tabs button{flex:0 0 auto}.mold-lifecycle-actions .mold-round-print{border-color:#70805c;background:#f4f7f1;color:#3f5835}
.mold-round-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;padding-top:10px;border-top:1px solid #ded9cc}.mold-round-links button{min-height:32px;padding:5px 10px;border:1px solid #a9a392;background:#fff;color:#343723;border-radius:4px;font:700 .72rem "Sarabun",sans-serif;cursor:pointer}
.mold-code-cell{text-align:left!important;font-family:monospace}.mold-code-cell b,.mold-code-cell small{display:block}.mold-code-cell b{color:#343723}.mold-code-cell small{margin-top:2px;color:#777;font-size:.68rem}
.mold-work-order-empty{display:block;margin-top:6px;color:#8b877c;font:700 .63rem "Sarabun",sans-serif}.mold-work-order-usage{display:grid;gap:1px;margin-top:6px;padding:5px 6px;border-left:3px solid #607b4f;background:#edf4e9;font-family:"Sarabun",sans-serif}.mold-work-order-usage b{color:#385d34;font-size:.66rem}.mold-work-order-usage small{display:block;overflow:hidden;color:#53644c;font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}
.mold-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:84px;padding:4px 7px;border-radius:4px;font-size:.69rem;font-weight:800;white-space:nowrap}.mold-status-badge.status-ready{background:#e7efe2;color:#385d34}.mold-status-badge.status-degraded,.mold-status-badge.status-damaged{background:#f7e5df;color:#8f2823}.mold-status-badge.status-missing{background:#eee9df;color:#635d52}.mold-status-badge.status-retired{background:#e6e5e1;color:#555}.mold-status-badge.status-reserve{background:#e4ebee;color:#3d6370}
.mold-life-manage-btn{padding:5px 9px!important;border:1px solid rgba(125,40,38,.38)!important;background:rgba(125,40,38,.05)!important;color:#7d2826!important;border-radius:4px!important;font-size:.72rem!important;font-weight:800!important;white-space:nowrap}
.mold-inline-commit{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:1px}
.mold-inline-save-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 10px;border:1px solid #56683e;background:#56683e;color:#fff;border-radius:4px;font:800 .7rem "Sarabun",sans-serif;white-space:nowrap;cursor:pointer}.mold-inline-save-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.mold-inline-save-btn span{display:inline!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;font:inherit!important}
.mold-inline-save-btn.is-dirty{background:#7d2826;border-color:#7d2826}.mold-inline-save-btn.is-saved{background:#edf4e9;border-color:#78936a;color:#385d34}.mold-inline-save-state{min-height:1em;color:#777;font-size:.65rem;font-weight:800}.mold-inline-save-state.is-dirty{color:#8f2823}.mold-inline-save-state.is-saved{color:#385d34}
.mold-registry-table-wrap{max-width:100%;margin-bottom:16px;overflow:visible}
.mold-code-guide{margin:0 0 12px;border:1px solid rgba(52,55,35,.14);border-left:3px solid #7d2826;background:#faf9f4;color:#343723}.mold-code-guide>summary{display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:center;gap:9px;min-height:48px;padding:7px 12px;cursor:pointer;list-style:none}.mold-code-guide>summary::-webkit-details-marker{display:none}.mold-code-guide>summary:hover{background:#f5f2e9}.mold-code-guide>summary>span:nth-child(2){display:grid;gap:1px}.mold-code-guide>summary strong{font-size:.78rem}.mold-code-guide>summary small{color:#777;font-size:.66rem;font-weight:700}.mold-code-guide>summary>svg{width:17px;height:17px;fill:none;stroke:#6c6c61;stroke-width:2;transition:transform .18s}.mold-code-guide[open]>summary>svg{transform:rotate(180deg)}.mold-code-guide-icon{display:flex;width:26px;height:26px;align-items:center;justify-content:center;border:1px solid rgba(125,40,38,.3);border-radius:50%;background:#fff;color:#7d2826;font:900 .78rem Georgia,serif}.mold-code-guide-body{display:grid;gap:12px;padding:13px 14px 14px;border-top:1px solid rgba(52,55,35,.11);background:#fff}.mold-code-example{display:flex;align-items:flex-start;gap:6px;padding:12px;background:#f2efe6}.mold-code-example>span{display:grid;min-width:0;gap:2px;text-align:center}.mold-code-example b{padding:4px 7px;border:1px solid rgba(52,55,35,.14);background:#fff;color:#7d2826;font:900 .8rem monospace;white-space:nowrap}.mold-code-example small{color:#65645c;font-size:.62rem;font-weight:700;line-height:1.3}.mold-code-example i{padding-top:5px;color:#999;font:800 .8rem monospace;font-style:normal}.mold-code-guide-notes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mold-code-guide-notes p{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;margin:0;padding:8px 9px;border:1px solid rgba(52,55,35,.1);font-size:.68rem}.mold-code-guide-notes p>b{font-size:.67rem}.mold-code-guide-notes code{padding:3px 5px;background:#f2efe6;color:#7d2826;font-size:.68rem;font-weight:800}.mold-code-guide-notes span{color:#68675f;line-height:1.4}.mold-code-reading-tip{margin:0;padding:8px 10px;border-left:2px solid #7f8d59;background:#f2f4ea;color:#4e533e;font-size:.68rem;line-height:1.5}.mold-code-reading-tip strong{color:#7d2826}
.mold-registry-table{table-layout:fixed;margin-top:0}
.mold-registry-table th:nth-child(1){width:42px}.mold-registry-table th:nth-child(2){width:24%}.mold-registry-table th:nth-child(3){width:18%}.mold-registry-table th:nth-child(4){width:15%}.mold-registry-table th:nth-child(5){width:auto}.mold-registry-table th:nth-child(6){width:58px}
.mold-registry-table td{padding:10px 8px;vertical-align:top;overflow-wrap:anywhere}
.mold-registry-index{text-align:center;font-weight:800;color:rgba(52,55,35,.58)!important}
.mold-registry-identity-main{display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;align-items:start}.mold-registry-photo{display:flex;box-sizing:border-box;width:48px;height:48px;align-items:center;justify-content:center;padding:0;overflow:hidden;border:1px solid rgba(52,55,35,.14);border-radius:4px;background:#fff;color:rgba(52,55,35,.48);font:800 .58rem "Sarabun",sans-serif;cursor:pointer}.mold-registry-photo img{width:100%;height:100%;object-fit:cover}.mold-registry-photo:hover{border-color:#7d2826}.mold-registry-photo.is-empty{background:#f2efe6;cursor:default}.mold-registry-type{display:inline-block;max-width:100%;margin-top:5px;padding:3px 6px;border-left:2px solid #8b936b;background:#f2f4ea;color:#4e5735;font-size:.65rem;font-weight:800;line-height:1.35}
.mold-registry-title{margin-bottom:5px;color:#343723;font-size:.84rem;font-weight:800;line-height:1.35}
.mold-registry-metrics,.mold-registry-tracking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.mold-registry-metrics span,.mold-registry-tracking-grid span{display:grid;gap:1px;min-width:0;padding:5px 6px;border:1px solid rgba(52,55,35,.09);background:#faf9f4}
.mold-registry-tracking-grid label{display:grid;gap:3px;min-width:0;margin:0;padding:5px 6px;border:1px solid rgba(52,55,35,.09);background:#faf9f4}
.mold-registry-tracking-grid input{box-sizing:border-box;width:100%;min-width:0;height:29px;padding:4px 6px;border:1px solid rgba(52,55,35,.16);border-radius:3px;background:#fff;color:#343723;font:inherit;font-size:.7rem}
.mold-registry-tracking-grid input:focus{border-color:#7d2826;outline:2px solid rgba(125,40,38,.12);outline-offset:0}
.mold-registry-metrics small,.mold-registry-tracking-grid small{color:rgba(52,55,35,.6);font-size:.62rem;font-weight:700;line-height:1.3}
.mold-registry-metrics b,.mold-registry-tracking-grid b{color:#343723;font-size:.73rem;line-height:1.35}
.mold-registry-metrics .wide{grid-column:1/-1}
.mold-registry-tracking-grid .wide{grid-column:1/-1}
.mold-registry-state{text-align:center}.mold-version-label{display:block;margin-bottom:7px;color:#343723;font-size:.8rem}
.mold-registry-actions{text-align:center;overflow:visible!important}.mold-registry-action-group{display:flex;align-items:center;justify-content:center;gap:6px}.mold-row-more{position:relative}.mold-row-more>summary{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(52,55,35,.18);border-radius:5px;background:#fff;color:#343723;cursor:pointer;list-style:none}.mold-row-more>summary::-webkit-details-marker{display:none}.mold-row-more>summary:hover,.mold-row-more[open]>summary{border-color:#7d2826;background:rgba(125,40,38,.06);color:#7d2826}.mold-row-more>summary svg{width:18px;height:18px;fill:currentColor}.mold-row-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:grid;min-width:205px;padding:5px;border:1px solid rgba(52,55,35,.16);border-radius:6px;background:#fff;box-shadow:0 10px 28px rgba(36,37,26,.17)}.mold-row-menu button{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 9px;border:0;border-radius:4px;background:transparent;color:#343723;font:700 .74rem "Sarabun",sans-serif;text-align:left;cursor:pointer}.mold-row-menu button:hover{background:#f2efe6}.mold-row-menu button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mold-row-menu button b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#eee9df;color:#635d52;font-size:.64rem}
.mold-ready-warning{display:block!important;padding:10px 12px!important;text-align:center!important;background:#fff4ef!important;color:#8f2823!important;font-size:.78rem!important;font-weight:800!important}
.mold-replacement-modal{position:fixed;inset:0;z-index:10080;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(30,30,25,.6);backdrop-filter:blur(4px)}.mold-replacement-modal.active{display:flex}.mold-replacement-dialog{width:min(860px,96vw);max-height:92dvh;overflow:auto;background:#fbfaf6;border-radius:7px;box-shadow:0 22px 70px rgba(0,0,0,.28);color:#343723}.mold-replacement-dialog>header{display:flex;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid #ddd8ca}.mold-replacement-dialog>header small{font:800 .65rem "Outfit";color:#7d2826}.mold-replacement-dialog>header h3{margin:2px 0;font-size:1.18rem}.mold-replacement-dialog>header p{margin:2px 0 0;color:#777;font-size:.78rem}.mold-replacement-dialog>header button{width:36px;height:36px;border:1px solid #d1ccbe;background:#fff;border-radius:5px;font-size:1.3rem;cursor:pointer}
.mold-replacement-mode{display:flex;gap:20px;padding:16px 22px 8px}.mold-replacement-mode label{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem}.mold-replacement-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 22px 14px;padding:10px;border:1px solid #ddd8ca;background:#fff}.mold-replacement-choices.is-all{opacity:.75}.mold-replacement-choice{display:flex;align-items:center;gap:8px;padding:7px}.mold-replacement-choice span,.mold-replacement-choice b,.mold-replacement-choice small{display:block}.mold-replacement-choice small{font-size:.68rem;color:#777}
.mold-replacement-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 22px 20px}.mold-replacement-fields label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:800}.mold-replacement-fields label.wide{grid-column:1/-1}.mold-replacement-fields input,.mold-replacement-fields select{width:100%;min-height:40px;padding:8px 10px;border:1px solid #cbc6b7;border-radius:5px;background:#fff;font:inherit;color:#343723}.mold-replacement-dialog>footer{display:flex;justify-content:flex-end;gap:8px;padding:15px 22px;border-top:1px solid #ddd8ca}.mold-replacement-dialog>footer button{min-height:40px;padding:8px 18px;border-radius:5px;font-weight:800;cursor:pointer}.mold-replacement-dialog>footer .secondary{border:1px solid #cbc6b7;background:#fff}.mold-replacement-dialog>footer .primary{border:1px solid #7d2826;background:#7d2826;color:#fff}
.mold-lifecycle-detail-body{display:grid;grid-template-columns:190px 1fr;gap:8px;padding-top:12px}.mold-lifecycle-detail-body .mold-replacement-fields{padding-top:0}.mold-lifecycle-qr{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:10px 14px 18px;border-right:1px solid #e2ded2}.mold-lifecycle-qr svg{width:132px;height:132px;background:#fff}.mold-lifecycle-qr b{font:800 .76rem monospace}.mold-lifecycle-qr small{font-size:.68rem;color:#777;text-align:center}
.mold-history-guide{display:flex;align-items:center;gap:10px;margin:14px 22px 0;padding:10px 12px;border-left:3px solid #7d2826;background:#f2efe6}.mold-history-guide b{font-size:.8rem;white-space:nowrap}.mold-history-guide span{color:#68675f;font-size:.72rem}.mold-history-fields textarea{width:100%;resize:vertical;min-height:76px;padding:9px 10px;border:1px solid #cbc6b7;border-radius:5px;background:#fff;font:inherit;color:#343723}.mold-history-log{margin:0 22px 18px;border:1px solid #ddd8ca;background:#fff}.mold-history-log h4{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 12px;border-bottom:1px solid #e5e1d6;font-size:.82rem}.mold-history-log h4 span{color:#777;font-size:.7rem}.mold-history-log ol{display:grid;gap:0;max-height:190px;margin:0;padding:0;overflow:auto;list-style:none}.mold-history-log li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 12px;border-bottom:1px solid #eeeae0}.mold-history-log li:last-child{border-bottom:0}.mold-history-log time{color:#7d2826;font-size:.72rem;font-weight:800}.mold-history-log li div{display:grid;gap:2px}.mold-history-log li b{font-size:.76rem}.mold-history-log li p{margin:0;color:#343723;font-size:.73rem}.mold-history-log li small{color:#777;font-size:.67rem}.mold-history-log li.empty{grid-template-columns:1fr;text-align:center;color:#777}
@media(max-width:1400px){.mold-registry-table thead{display:none}.mold-registry-table,.mold-registry-table tbody,.mold-registry-table tr,.mold-registry-table td{display:block;width:100%!important;box-sizing:border-box}.mold-registry-table tr{display:grid;grid-template-columns:42px minmax(0,1.25fr) minmax(190px,.75fr);border:1px solid rgba(52,55,35,.14);margin-bottom:10px;background:#fff}.mold-registry-table td{border:0;border-bottom:1px solid rgba(52,55,35,.08)}.mold-registry-index{grid-row:1/3}.mold-registry-identity{grid-column:2}.mold-registry-state{grid-column:3;grid-row:1;text-align:right}.mold-registry-output{grid-column:2}.mold-registry-tracking{grid-column:2/4;grid-row:3}.mold-registry-actions{grid-column:2/4;grid-row:4}.mold-registry-table td[data-label]::before{display:block;margin-bottom:5px;color:rgba(52,55,35,.55);font-size:.61rem;font-weight:800}.mold-registry-table td[data-label]::before{content:attr(data-label)}.mold-registry-index::before{display:none!important}.mold-registry-action-group{justify-content:flex-end}}
@media(max-width:820px){.mold-lifecycle-toolbar{align-items:stretch;flex-direction:column}.mold-lifecycle-actions{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}.mold-revision-tabs{grid-column:1/-1;max-width:100%}.mold-lifecycle-actions button.create{grid-column:1/-1}.mold-replacement-modal{padding:0}.mold-replacement-dialog{width:100%;max-width:none;height:100%;max-height:none;border-radius:0}.mold-replacement-choices{grid-template-columns:1fr}.mold-lifecycle-detail-body{grid-template-columns:1fr}.mold-lifecycle-qr{border-right:0;border-bottom:1px solid #e2ded2}.mold-replacement-fields{grid-template-columns:1fr}.mold-replacement-fields label.wide{grid-column:auto}.mold-history-guide{align-items:flex-start;flex-direction:column;margin-inline:14px}.mold-history-log{margin-inline:14px}.mold-history-log li{grid-template-columns:1fr;gap:4px}.mold-registry-table tr{grid-template-columns:36px minmax(0,1fr)}.mold-registry-index{grid-row:1/4}.mold-registry-identity,.mold-registry-state,.mold-registry-output,.mold-registry-tracking,.mold-registry-actions{grid-column:2;grid-row:auto}.mold-registry-state{text-align:left}.mold-registry-actions{grid-column:1/-1;padding-left:44px!important}}
@media(max-width:700px){.mold-code-example{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mold-code-example i{display:none}.mold-code-guide-notes{grid-template-columns:1fr}.mold-code-guide-notes p{grid-template-columns:1fr}.mold-code-guide-notes code{justify-self:start}.mold-code-guide>summary small{white-space:normal}}

.mold-registry-row.is-editing{background:#fbf7ed;box-shadow:inset 4px 0 #7d2826}
.mold-registry-inline-row>td{padding:0 8px 12px!important;border-top:0!important;background:#fbf7ed}
.mold-inline-editor{display:grid;grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) repeat(3,minmax(120px,.72fr));gap:12px;align-items:end;padding:14px;border:1px solid rgba(125,40,38,.24);border-left:4px solid #7d2826;background:#fff}
.mold-inline-editor-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(52,55,35,.1)}
.mold-inline-editor-heading span{display:grid;gap:1px}.mold-inline-editor-heading small{color:#7d2826;font-size:.64rem;font-weight:900}.mold-inline-editor-heading strong{color:#343723;font-size:.87rem}.mold-inline-editor-heading>b{color:#6d6b62;font:800 .72rem monospace}
.mold-inline-editor>label{display:grid;min-width:0;gap:5px;margin:0;color:#343723;font-size:.71rem;font-weight:800}.mold-inline-editor>label>.form-input,.mold-inline-editor>label>.form-select{box-sizing:border-box;width:100%;height:38px!important;padding:7px 9px!important;border-radius:5px;font-size:.78rem!important}
.mold-inline-photo-field>input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mold-inline-photo-control{display:flex;box-sizing:border-box;height:52px;align-items:center;gap:7px;padding:5px 7px;border:1px dashed rgba(52,55,35,.24);border-radius:5px;background:#faf9f4}.mold-inline-photo-control img{width:40px;height:40px;flex:0 0 40px;border-radius:4px;object-fit:cover}.mold-inline-photo-control i{flex:1;color:#777;font-size:.68rem;font-style:normal}.mold-inline-photo-control button{min-height:30px;padding:5px 8px;border:1px solid rgba(52,55,35,.16);border-radius:4px;background:#fff;color:#343723;font:800 .68rem "Sarabun",sans-serif;cursor:pointer}.mold-inline-photo-control button.remove{width:30px;padding:0;border-color:rgba(140,29,26,.22);color:#8c1d1a;font-size:1rem}
.mold-inline-editor-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.mold-inline-editor-actions button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:6px;padding:7px 15px;border-radius:5px;font:800 .76rem "Sarabun",sans-serif;cursor:pointer}.mold-inline-editor-actions .secondary{border:1px solid #cbc6b7;background:#fff;color:#343723}.mold-inline-editor-actions .primary{min-width:190px;border:1px solid #56683e;background:#56683e;color:#fff}.mold-inline-editor-actions svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1401px){.mold-registry-inline-row{display:table-row!important}.mold-registry-inline-row>td{display:table-cell!important;width:auto!important}}
@media(max-width:1400px){.mold-registry-inline-row{display:block!important;margin-top:-10px!important;border:0!important;background:transparent!important}.mold-registry-inline-row>td{display:block!important;width:100%!important}.mold-inline-editor{grid-template-columns:minmax(210px,1.2fr) repeat(2,minmax(140px,1fr))}.mold-inline-photo-field{grid-row:2/4}.mold-inline-editor-actions{grid-column:2/4}}
@media(max-width:820px){.mold-inline-editor{grid-template-columns:1fr 1fr}.mold-inline-photo-field{grid-row:auto;grid-column:1/-1}.mold-inline-editor-actions{grid-column:1/-1}.mold-inline-editor-actions button{flex:1}.mold-inline-editor-actions .primary{min-width:0}}
@media(max-width:520px){.mold-inline-editor{grid-template-columns:1fr}.mold-inline-editor>label,.mold-inline-editor-actions{grid-column:1}.mold-inline-editor-actions{flex-direction:column-reverse}.mold-inline-editor-heading{align-items:flex-start;flex-direction:column}.mold-inline-editor-actions button{width:100%}}

.wax-mold-usage-control{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(260px,1.3fr) auto;align-items:end;gap:10px;padding-top:12px;border-top:1px solid rgba(52,55,35,.12)}.wax-mold-set-field{display:grid;gap:6px;color:var(--color-juniper);font-size:.78rem;font-weight:800}.wax-mold-set-field>span{color:#8b2725}.wax-mold-lock-state{display:grid;min-height:42px;align-content:center;gap:2px;padding:7px 10px;border:1px solid rgba(125,41,38,.2);border-left:3px solid #9b7b3d;background:#fff8ea;color:#6d5424}.wax-mold-lock-state.is-locked{border-color:#bed0b6;border-left-color:#4f713f;background:#edf4e9;color:#385d34}.wax-mold-lock-state b{font-size:.75rem}.wax-mold-lock-state small{font-size:.66rem;line-height:1.35}.wax-mold-lock-button{min-height:42px;padding:8px 14px;border:1px solid #3f5835;border-radius:5px;background:#3f5835;color:#fff;font:800 .78rem "Sarabun",sans-serif;cursor:pointer;white-space:nowrap}.wax-mold-lock-button:hover{filter:brightness(.95)}#artw-wax-production-table :disabled{cursor:not-allowed;opacity:.58}
.wax-mold-lock-button:disabled{border-color:#8ca081;background:#edf4e9;color:#385d34;cursor:default;filter:none}
@media(max-width:820px){.wax-mold-usage-control{grid-template-columns:1fr}.wax-mold-lock-button{width:100%}}

/* Mold output ratios and derived wax production */
.mold-registry-entry-card{margin-top:14px;padding:16px;border:1px solid rgba(52,55,35,.11);border-radius:7px;background:rgba(255,255,255,.42)}
.mold-registry-entry-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(52,55,35,.1)}
.mold-registry-entry-heading>div{display:grid;gap:2px}.mold-registry-entry-heading strong{color:#343723;font-size:.84rem}.mold-registry-entry-heading small{color:rgba(52,55,35,.62);font-size:.69rem;line-height:1.4}.mold-registry-entry-heading>span{color:rgba(52,55,35,.58);font-size:.66rem;white-space:nowrap}.mold-registry-entry-heading>span b{color:#7d2826}
.mold-entry-context{display:grid;grid-template-columns:32px minmax(190px,1fr) auto;align-items:center;gap:10px;margin:12px 0;padding:9px 11px;border:1px solid rgba(52,55,35,.12);border-left:3px solid #c9c6b9;border-radius:6px;background:rgba(247,246,241,.78);color:var(--color-text-muted-light)}.mold-entry-context.has-selection{border-left-color:#7d2926;background:rgba(125,41,38,.035);color:var(--color-text-light)}.mold-entry-context-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:rgba(52,55,35,.08)}.mold-entry-context span:nth-child(2){display:flex;min-width:0;flex-direction:column}.mold-entry-context small{font-size:.68rem;color:var(--color-text-muted-light)}.mold-entry-context strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.mold-entry-context>b{font-size:.72rem;font-weight:600;color:var(--color-text-muted-light);white-space:nowrap}
.mold-registry-input-grid{display:grid;grid-template-columns:minmax(230px,1.55fr) minmax(165px,1fr) minmax(118px,.7fr) minmax(118px,.7fr);gap:12px;align-items:end}
.mold-registry-input-grid label,.mold-registry-support-grid label{display:block;min-height:18px;line-height:1.25}
.mold-registry-input-grid .form-input,.mold-registry-input-grid .form-select,.mold-registry-support-grid .form-input{box-sizing:border-box;width:100%;height:38px!important;padding:7px 10px!important;border-radius:6px;font-size:.82rem!important}
.mold-photo-field{min-width:0}.mold-photo-control{position:relative;min-width:0}.mold-photo-upload{display:flex!important;width:100%;height:52px!important;align-items:center;justify-content:flex-start!important;gap:10px!important;padding:7px 10px!important;border:1px dashed rgba(52,55,35,.24)!important;border-radius:6px!important;background:#fff!important;color:var(--color-text-light)!important;text-align:left!important}.mold-photo-upload-icon{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;border-radius:5px;background:rgba(52,55,35,.07)}.mold-photo-upload span:last-child{display:flex;min-width:0;flex-direction:column}.mold-photo-upload strong{font-size:.78rem}.mold-photo-upload small{font-size:.66rem;color:var(--color-text-muted-light)}.mold-photo-preview{position:absolute;inset:0;align-items:center!important;gap:8px!important;padding:5px 7px;border:1px solid rgba(52,55,35,.16);border-radius:6px;background:#fff}.mold-photo-preview img{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border:1px solid rgba(52,55,35,.12);border-radius:5px}.mold-photo-change{border:0;background:transparent;color:var(--color-text-light);font-size:.72rem;font-weight:700;cursor:pointer}.mold-photo-remove{display:grid;width:24px;height:24px;margin-left:auto;place-items:center;border:1px solid rgba(140,29,26,.22);border-radius:5px;background:rgba(140,29,26,.06);color:#8c1d1a;font-size:1rem;cursor:pointer}
.mold-photo-control{display:flex;min-height:52px;align-items:center;gap:8px}.mold-photo-upload:hover{border-color:#7d2826!important;background:rgba(125,40,38,.04)!important;color:#7d2826!important}
.mold-registry-support-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(230px,1.35fr) minmax(174px,auto);gap:12px;margin-top:12px;align-items:end}
.mold-entry-action{display:flex;align-items:flex-end}.mold-entry-submit{display:inline-flex!important;width:100%;min-width:174px;height:38px!important;align-items:center;justify-content:center;gap:7px!important;padding:7px 14px!important;border:1px solid var(--color-leaf)!important;border-radius:6px!important;background:var(--color-leaf)!important;color:#fff!important;font-size:.8rem!important;font-weight:800!important;white-space:nowrap;cursor:pointer}.mold-entry-submit:hover{filter:brightness(.94)}
.mold-entry-action:has(.mold-entry-cancel){display:grid;grid-template-columns:minmax(174px,1fr) auto;gap:7px}.mold-entry-cancel{height:38px!important;padding:7px 12px!important;border-radius:6px!important;font-size:.78rem!important;font-weight:700!important}
.mold-entry-submit:disabled{border-color:rgba(52,55,35,.12)!important;background:rgba(52,55,35,.07)!important;color:var(--color-text-muted-light)!important;cursor:not-allowed;filter:none!important}
#artw-wax-project-qty-span,#artw-wax-total-piece-span{color:var(--color-leaf);font-size:.95rem;font-weight:800}
.wax-summary-divider{display:inline-block;width:1px;height:18px;margin:0 12px;vertical-align:middle;background:rgba(52,55,35,.18)}
.wax-spare-input{width:72px!important;height:32px!important;margin:auto;padding:4px 7px!important;text-align:center!important;font-size:.84rem!important;background:#fff!important}
.wax-calculated-total{text-align:center;padding:7px 8px;background:rgba(125,41,38,.045)}
.wax-calculated-total b,.wax-calculated-total small{display:block}.wax-calculated-total b{color:#7d2926;font-size:.92rem}.wax-calculated-total small{margin-top:2px;color:#777;font-size:.65rem;white-space:nowrap}
@media(max-width:1180px){.mold-registry-input-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.mold-registry-support-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(174px,auto)}}
@media(max-width:820px){.mold-registry-entry-card{padding:13px}.mold-registry-entry-heading{align-items:flex-start;flex-direction:column;gap:5px}.mold-entry-context{grid-template-columns:32px minmax(0,1fr)}.mold-entry-context>b{grid-column:2;white-space:normal}.mold-registry-input-grid{grid-template-columns:1fr 1fr}.mold-registry-input-grid>.form-group:first-child,.mold-registry-input-grid>.form-group:nth-child(2){grid-column:1/-1}.mold-registry-support-grid{grid-template-columns:1fr 1fr}.mold-registry-support-grid>.form-group:nth-child(2),.mold-entry-action{grid-column:1/-1}.mold-entry-submit{width:100%}.wax-summary-divider{display:block;width:100%;height:1px;margin:7px 0}}
@media(max-width:520px){.mold-registry-input-grid,.mold-registry-support-grid{grid-template-columns:1fr}.mold-registry-input-grid>.form-group,.mold-registry-support-grid>.form-group,.mold-entry-action{grid-column:1/-1}}

/* Operational cost workspace: quote data is reference-only, actual costs are entered once. */
.project-operational-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 16px;padding:12px 14px;border-left:3px solid #7d2926;background:#f3f1e9;color:#343723}
.project-operational-intro strong{font-size:.84rem;white-space:nowrap}.project-operational-intro span{color:#6e6d65;font-size:.73rem;line-height:1.45;text-align:right}
.project-linked-history-primary{margin-top:18px;border:1px solid rgba(52,55,35,.14);border-radius:6px;background:rgba(255,255,255,.58)}
.project-linked-history-primary>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-size:.8rem;font-weight:800;list-style:none}
.project-linked-history-primary>summary::-webkit-details-marker{display:none}.project-linked-history-primary>summary::after{content:"+";font-size:1rem}.project-linked-history-primary[open]>summary::after{content:"−"}
.project-linked-history-primary>div{padding:0 12px 12px}.project-operational-section{min-width:0}
.quotation-owned-field{display:none!important}
.inventory-cost-field{display:grid;grid-template-columns:minmax(95px,1fr) auto;gap:5px;align-items:center;min-width:0;flex:1}
.inventory-cost-field input{grid-column:1/-1;width:100%!important;box-sizing:border-box;text-align:right!important}
.inventory-cost-source-badge{justify-self:start;padding:2px 6px;border-radius:4px;background:#e7eee3;color:#47613b;font-size:.61rem;font-weight:800;white-space:nowrap}
.inventory-cost-source-detail{min-width:0;overflow:hidden;color:#777;font-size:.6rem;text-overflow:ellipsis;white-space:nowrap;text-align:right}
#artw-metals-container .metal-row-item-dynamic{align-items:start!important;gap:8px!important;padding:10px 0;border-bottom:1px solid rgba(52,55,35,.09)}
#artw-metals-container .metal-row-item-dynamic:last-child{border-bottom:0}
.special-cost-workspace{gap:0!important;border:1px solid rgba(52,55,35,.12);border-radius:6px;background:rgba(255,255,255,.42)}
.special-cost-row{padding:12px 14px;border-bottom:1px solid rgba(52,55,35,.09)}.special-cost-row:last-child{border-bottom:0}
.special-cost-row .form-input{box-sizing:border-box;width:100%;min-height:38px}.special-cost-row .form-group:first-child{max-width:310px}
.operational-cost-reference-card{margin:10px 0 14px;padding:12px 14px;border:1px solid rgba(125,41,38,.18);border-left:3px solid #7d2926;border-radius:6px;background:rgba(255,255,255,.58)}
.operational-cost-reference-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.operational-cost-reference-heading strong{display:block;color:#343723;font-size:.84rem}.operational-cost-reference-heading small{display:block;margin-top:2px;color:#74736b;font-size:.68rem;line-height:1.4}
.operational-cost-reference-fields{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);gap:10px;margin-top:10px}
.operational-cost-reference-fields .form-select{box-sizing:border-box;width:100%;height:44px;padding:0 40px 0 14px;color:#343723;font-size:.88rem;font-weight:700;line-height:1.35}
.operational-cost-reference-fields .form-select:disabled{color:#68675f;opacity:1}
.artw-operational-cost-reference-detail{display:flex;min-height:44px;box-sizing:border-box;align-items:center;padding:9px 12px;border:1px solid rgba(52,55,35,.12);border-radius:5px;background:#f5f3ec;color:#5d5d56;font-size:.82rem;font-weight:500;line-height:1.45}
.operational-cost-history{position:relative;flex:0 0 auto}.operational-cost-history>summary{padding:5px 8px;border:1px solid rgba(125,41,38,.2);border-radius:5px;color:#7d2926;font-size:.68rem;font-weight:800;cursor:pointer;list-style:none}.operational-cost-history>summary::-webkit-details-marker{display:none}.operational-cost-history ul{position:absolute;right:0;z-index:30;width:min(360px,75vw);max-height:210px;margin:6px 0 0;padding:5px;overflow:auto;border:1px solid rgba(52,55,35,.16);border-radius:6px;background:#fff;box-shadow:0 10px 28px rgba(36,37,26,.17);list-style:none}.operational-cost-history li{display:grid;gap:2px;padding:7px 8px;border-bottom:1px solid rgba(52,55,35,.08)}.operational-cost-history li:last-child{border-bottom:0}.operational-cost-history li strong{font-size:.72rem}.operational-cost-history li span{color:#777;font-size:.64rem}
.responsibility-reference-card{margin:10px 0 14px;padding:12px 14px;border:1px solid rgba(125,41,38,.18);border-left:3px solid #7d2926;border-radius:6px;background:rgba(255,255,255,.58)}
.responsibility-reference-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.responsibility-reference-heading strong{display:block;color:#343723;font-size:.84rem}.responsibility-reference-heading small{display:block;margin-top:2px;color:#74736b;font-size:.68rem;line-height:1.4}
.responsibility-reference-fields{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);gap:10px;margin-top:10px}.responsibility-reference-fields .form-select{box-sizing:border-box;width:100%;height:44px;padding:0 40px 0 14px;color:#343723;font-size:.88rem;font-weight:700}.artw-responsibility-reference-detail{display:flex;align-items:center;min-height:44px;padding:8px 12px;box-sizing:border-box;border:1px solid rgba(52,55,35,.12);border-radius:6px;background:#f8f6ef;color:#74736b;font-size:.72rem;line-height:1.4}
.responsibility-open-order{min-height:32px;padding:5px 10px;border:1px solid rgba(125,41,38,.28);border-radius:5px;background:#fff;color:#7d2926;font:800 .7rem 'Sarabun',sans-serif;cursor:pointer;white-space:nowrap}.responsibility-open-order:disabled{cursor:not-allowed;opacity:.45}
.responsibility-order-list{display:grid;gap:6px;padding-top:4px}.responsibility-order-list>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border:1px solid rgba(52,55,35,.12);border-radius:5px;background:#fff;color:#343723;text-align:left;cursor:pointer}.responsibility-order-list>button:hover{border-color:rgba(125,41,38,.35);background:#faf7ef}.responsibility-order-list>button>span:first-child{display:grid;gap:2px;min-width:0}.responsibility-order-list strong{font-size:.76rem}.responsibility-order-list small{overflow:hidden;color:#777;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.responsibility-order-list>button>span:last-child{flex:0 0 auto;color:#7d2926;font-size:.68rem;font-weight:800}
.responsibility-order-empty,.responsibility-summary-empty{display:grid;gap:4px;padding:18px 14px;border:1px dashed rgba(52,55,35,.18);border-radius:6px;background:rgba(255,255,255,.42);color:#74736b;text-align:center}.responsibility-order-empty strong,.responsibility-summary-empty strong{color:#4d4f3c;font-size:.8rem}.responsibility-order-empty span,.responsibility-summary-empty span{font-size:.7rem;line-height:1.45}

@media(max-width:1100px){
  .project-operational-intro{align-items:flex-start;flex-direction:column}.project-operational-intro span{text-align:left}
  .responsibility-reference-fields{grid-template-columns:1fr}
  #artw-metals-container .metal-row-item-dynamic{display:grid!important;grid-template-columns:minmax(150px,1.2fr) minmax(105px,.75fr) minmax(105px,.75fr) 36px}
  #artw-metals-container .inventory-cost-field{grid-column:1/3}
  #artw-metals-container .metal-total-cost{grid-column:3/4;width:100%!important}
  #artw-metals-container .metal-remove{grid-column:4;grid-row:1/3;align-self:stretch!important}
}
@media(max-width:700px){
  #artw-metals-container .metal-row-item-dynamic{grid-template-columns:1fr 1fr}
  #artw-metals-container .metal-row-item-dynamic>*{min-width:0;width:100%!important;box-sizing:border-box}
  #artw-metals-container .inventory-cost-field,#artw-metals-container .metal-total-cost{grid-column:auto}
  #artw-metals-container .metal-remove{grid-column:1/-1;grid-row:auto;min-height:36px}
  .special-cost-row{align-items:stretch!important;flex-direction:column;gap:9px!important}.special-cost-row .form-group{width:100%;max-width:none!important}
  .operational-cost-reference-heading{flex-direction:column}.operational-cost-reference-fields{grid-template-columns:1fr}.operational-cost-history ul{right:auto;left:0}
  .responsibility-reference-heading{flex-direction:column}.responsibility-open-order{width:100%}
  .responsibility-order-list>button{align-items:flex-start;flex-direction:column}.responsibility-order-list small{white-space:normal}
  #artw-responsibles-container .responsible-row-item-dynamic{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  #artw-responsibles-container .responsible-row-item-dynamic>*{box-sizing:border-box;width:100%!important;min-width:0!important}
  #artw-responsibles-container .responsible-row-item-dynamic>div:nth-child(2){grid-column:1/-1;grid-row:1}
}

/* Keep the operational UI light enough to run beside video and other GPU-heavy apps. */
.modal-backdrop,
.project-image-cover-btn,
.team-template-editor-overlay,
.employee-photo-card-media .employee-status,
.employee-card-command,
.employee-photo-card-actions .employee-icon-btn.is-danger,
.document-signature-modal,
.project-master-footer,
.quotation-project-picker-overlay,
.scale-builder-background-review,
.casting-outcome-overlay,
.mold-replacement-modal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.badge-status.overdue,
.wp-stepper-step.in-progress .wp-stepper-circle,
.wp-stepper-step.waiting .wp-stepper-circle,
.pulsing-dot-white,
.cloud-sync-status.is-syncing .cloud-sync-status-dot,
.cloud-health-summary.is-loading .cloud-health-summary-dot {
  animation: none !important;
  will-change: auto !important;
}

@media (max-width: 768px) {
  .custom-table.iw-order-master-table {
    display: table !important;
    width: 100% !important;
    min-width: 900px;
  }

  .iw-order-master-table thead { display: table-header-group !important; }
  .iw-order-master-table tbody { display: table-row-group !important; width: auto !important; }
  .iw-order-master-table tr { display: table-row !important; width: auto !important; }
  .iw-order-master-table td { display: table-cell !important; width: auto !important; }
}
/* Production workflow board: approved Harbor Sky C1 phase treatment */
#production-status-detail-panel .production-work-board{--board-charcoal:#3c3c3c;--board-slate:#6b7b84;--board-pine:#2d4530;--board-sand:#e1dbc9;--board-earth:#5e4b3b;margin:0 24px 24px;border:1px solid rgba(60,60,60,.24);border-top:6px solid var(--board-pine);background:#f8f5ec;box-shadow:0 16px 34px rgba(60,60,60,.12)}
.production-board-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:11px 11px 0;background:linear-gradient(180deg,#ccc9c6 0%,#dedbd8 100%);border-bottom:1px solid #b9b5b2}
.production-board-phase{--phase-accent:#6c7b8f;position:relative;min-height:112px;padding:18px 16px 21px;overflow:visible;border:1px solid #b9b6b3;border-bottom:0;border-radius:12px 12px 0 0;background:rgba(255,255,255,.56);color:#566572;text-align:left;cursor:pointer;box-shadow:0 2px 6px rgba(64,78,91,.07);transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.production-board-phase::before{position:absolute;top:-1px;right:13px;left:13px;height:4px;border-radius:0 0 4px 4px;background:var(--phase-accent);content:"";opacity:.42;transition:right .18s ease,left .18s ease,opacity .18s ease}.production-board-phase::after{position:absolute;right:-1px;bottom:-2px;left:-1px;display:none;height:5px;background:#404e5b;content:""}.production-board-phase.phase-palette-1{--phase-accent:#404e5b}.production-board-phase.phase-palette-2{--phase-accent:#6c7b8f}.production-board-phase.phase-palette-3{--phase-accent:#948f8c}.production-board-phase.phase-palette-4{--phase-accent:#ccc9c6}.production-board-phase:hover{z-index:1;border-color:#949da6;background:rgba(255,255,255,.82);color:#404e5b;box-shadow:0 7px 16px rgba(64,78,91,.14);transform:translateY(-2px)}.production-board-phase.selected{z-index:2;border-color:#5f7083;background:#6c7b8f;color:#fff;box-shadow:0 10px 24px rgba(64,78,91,.24),0 4px 0 #404e5b;transform:translateY(1px)}.production-board-phase.selected::before{right:0;left:0;height:5px;border-radius:11px 11px 0 0;background:#404e5b;opacity:1}.production-board-phase.selected::after{display:block}.production-board-phase:focus-visible{z-index:3;outline:3px solid rgba(108,123,143,.48);outline-offset:2px}
.production-board-phase>span{display:block;overflow:hidden;color:inherit;font-size:.66rem;font-weight:900;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}.production-board-phase.selected>span{display:inline-block;max-width:calc(100% - 92px)}.production-board-phase>strong{display:-webkit-box;min-height:2.5em;margin-top:6px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:inherit;font-size:.94rem;line-height:1.25}.production-board-phase>small{display:block;margin-top:2px;color:#68737b;font-size:.71rem;font-weight:600}.production-board-phase.selected>strong{color:#fff}.production-board-phase.selected>small{color:rgba(255,255,255,.84)}
.production-board-phase>i{position:absolute;right:16px;bottom:11px;left:16px;height:5px;overflow:hidden;border-radius:999px;background:#d5d4d2}.production-board-phase>i b{display:block;height:100%;border-radius:inherit;background:var(--phase-accent);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}.production-board-phase.selected>i{background:rgba(255,255,255,.28)}.production-board-phase.selected>i b{background:#f2f3f4}
.production-board-phase-active{position:absolute;top:12px;right:12px;display:none;align-items:center;gap:5px;padding:4px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#404e5b;color:#fff;font-size:.65rem;font-style:normal;font-weight:900;line-height:1.2;box-shadow:0 4px 10px rgba(64,78,91,.26)}.production-board-phase.selected .production-board-phase-active{display:inline-flex}.production-board-phase-active>b{display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:#f2f3f4;color:#404e5b;font-size:.6rem}
.production-board-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:20px}.production-board-list,.production-board-side{border:1px solid #cec5b1;background:#fffdf8}.production-board-side{position:relative;border-top:5px solid var(--board-slate)}.production-board-list>header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 16px;border-bottom:1px solid #d9d1bf}.production-board-list>header div:first-child>span{display:block;color:var(--board-charcoal);font-size:1.08rem;font-weight:800}.production-board-list>header div:first-child>small{display:block;margin-top:2px;color:#777267;font-size:.72rem}.production-board-list>header div:first-child>small b{color:var(--board-earth)}
.production-board-legend{display:flex;gap:10px;color:#68645b;font-size:.68rem;white-space:nowrap}.production-board-legend span::before{display:inline-block;width:8px;height:8px;margin-right:4px;content:""}.production-board-legend .live::before{background:var(--board-slate)}.production-board-legend .wait::before{background:var(--board-sand)}.production-board-legend .attention::before{background:var(--board-earth)}
.production-board-columns,.production-board-row{display:grid;grid-template-columns:48px minmax(150px,1fr) minmax(145px,1.1fr) 120px 108px 82px;gap:10px;align-items:center}.production-board-columns{padding:9px 13px;background:var(--board-charcoal);color:#fff;font-size:.68rem;font-weight:700}.production-board-row{position:relative;width:100%;min-height:68px;padding:10px 26px 10px 13px;border:0;border-bottom:1px solid #e2dbc9;border-radius:0;background:transparent;color:var(--board-charcoal);text-align:left;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.production-board-row:hover{background:#f1eee5;box-shadow:inset 4px 0 var(--board-slate)}.production-board-row:focus-visible{z-index:1;outline:3px solid rgba(107,123,132,.45);outline-offset:-3px}.production-board-row.selected{padding-left:9px;border-left:4px solid var(--board-slate);background:#e7edef;box-shadow:inset -3px 0 var(--board-slate)}.production-board-row.alert{padding-left:9px;border-left:4px solid var(--board-earth);background:#f4eee8}.production-board-row.alert.selected{background:#ebe4de;box-shadow:inset -3px 0 var(--board-earth)}.production-board-row[hidden]{display:none}
.production-board-section{display:flex;width:100%;min-height:48px;padding:9px 13px;align-items:center;justify-content:space-between;border:0;border-top:1px solid #c7beaa;border-bottom:1px solid #d8d0be;border-left:4px solid var(--board-pine);border-radius:0;background:#e8e3d7;color:var(--board-charcoal);font-family:"Sarabun",sans-serif;text-align:left;cursor:pointer}.production-board-section:hover{background:#dfd9ca}.production-board-section[hidden]{display:none}.production-board-section>span{display:flex;align-items:baseline;gap:10px}.production-board-section b{font-size:.8rem}.production-board-section small{color:#746f65;font-size:.68rem}.production-board-section i{position:relative;width:24px;height:24px;border:1px solid #aaa18e;background:#fffdf8}.production-board-section i::before,.production-board-section i::after{position:absolute;top:11px;left:6px;width:10px;height:2px;background:var(--board-pine);content:""}.production-board-section[aria-expanded="false"] i::after{transform:rotate(90deg)}
.production-board-code{display:flex;align-items:center;gap:7px;color:var(--board-earth);font-weight:900}.production-board-code>i{box-sizing:border-box;width:14px;height:14px;flex:0 0 14px;border:2px solid #aaa18e;border-radius:50%;background:#fffdf8;box-shadow:inset 0 0 0 3px #fffdf8}.production-board-row.selected .production-board-code>i{border-color:var(--board-slate);background:var(--board-slate)}.production-board-task-name{min-width:0}.production-board-task-name>strong{display:block;font-size:.88rem}.production-board-task-name>small{display:block;margin-top:3px;color:#777267;font-size:.65rem}.production-board-task-name .active-label{display:none;color:#40535c;font-weight:800}.production-board-row.selected .production-board-task-name .idle-label{display:none}.production-board-row.selected .production-board-task-name .active-label{display:inline}.production-board-row-arrow{position:absolute;top:50%;right:9px;color:#928b7c;font-size:1.45rem;line-height:1;transform:translateY(-50%)}.production-board-row.selected .production-board-row-arrow{color:var(--board-slate);font-weight:900}.production-board-owner{color:#706c62;font-size:.75rem}.production-board-meter{height:8px;background:#e8e2d3}.production-board-meter i{display:block;height:100%;background:var(--board-slate)}.production-board-number{text-align:right;font-size:.76rem;font-weight:900}.production-board-number small{color:#7b766a;font-weight:400}.production-board-status{display:inline-flex;box-sizing:border-box;width:100%;min-height:36px;padding:7px 4px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:2px;background:var(--board-sand);color:var(--board-earth);font-family:"Sarabun",sans-serif;font-size:.75rem;font-weight:800;line-height:1.2;text-align:center;white-space:nowrap}.production-board-status.in_progress,.production-board-status.waiting{background:#dce5e8;color:#40535c}.production-board-status.completed{background:#dfe8dc;color:var(--board-pine)}.production-board-status.needs-team{background:var(--board-earth);color:#fff}.production-board-status.is-action{border-color:var(--board-earth);cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.production-board-status.is-action:hover{background:#4b362c;box-shadow:0 2px 6px rgba(60,45,35,.2);transform:translateY(-1px)}.production-board-status.is-action:focus-visible{outline:2px solid #9d7560;outline-offset:2px}
.production-board-row.is-not-applicable{background:#f1efe9;color:#77736a;opacity:.82}.production-board-row.is-not-applicable:hover,.production-board-row.is-not-applicable.selected{background:#e9e7e1}.production-board-row.is-not-applicable .production-board-task-name>strong,.production-board-row.is-not-applicable .production-board-code{text-decoration:line-through;text-decoration-thickness:1px}.production-board-row.is-not-applicable .production-board-meter i{width:100%!important;background:#aaa69c;opacity:.35}.production-board-status.not-applicable{border-color:#c9c5bb;background:#e8e6df;color:#61645c;white-space:normal}
.production-board-detail[hidden]{display:none}.production-board-detail>header{position:relative;padding:14px 16px;background:var(--board-charcoal);color:#fff}.production-board-detail>header::before{position:absolute;top:25px;left:-11px;border-top:10px solid transparent;border-right:11px solid var(--board-charcoal);border-bottom:10px solid transparent;content:""}.production-board-detail>header small{display:block;color:#c9d3d7;font-size:.68rem;font-weight:800}.production-board-detail>header strong{display:block;margin-top:3px;font-size:1rem}.production-board-detail>header span{display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:.68rem;line-height:1.35}.production-board-detail-body{padding:15px 16px}.production-board-detail-body>label{display:block;color:#777267;font-size:.68rem}.production-board-detail-body>strong{display:block;margin-top:3px;font-size:.86rem}.production-board-detail-pairs{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;background:#d5cdbb}.production-board-detail-pairs div{padding:10px;background:#f8f5ec}.production-board-detail-pairs span{display:block;color:#777267;font-size:.64rem}.production-board-detail-pairs b{font-size:.75rem}.production-board-detail>p{margin:0 16px 14px;padding:10px 11px;border-left:3px solid var(--board-earth);background:#e8e2d5;color:var(--board-earth);font-size:.68rem}.production-board-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 16px}.production-board-detail-actions button{min-height:36px;border:1px solid #bdb39f;border-radius:2px;background:#fffdf8;color:var(--board-charcoal);font-weight:800}.production-board-detail-actions .primary{background:var(--board-pine);color:#fff;border-color:var(--board-pine)}
.production-board-detail-actions .skip-task{border-color:#c99790;background:#fff8f6;color:#8e2b28}.production-board-detail-actions .restore-task{border-color:#91aa96;background:#f3f8f3;color:#2d5235}
.production-work-board>footer{display:flex;justify-content:space-between;gap:16px;padding:13px 20px;border-top:1px solid #cbc2ae;background:#e9e3d5;color:#69655d;font-size:.7rem}.production-work-board>footer strong{color:var(--board-pine)}.production-board-empty{padding:42px 18px;color:#777267;text-align:center}
.production-legacy-editor{margin:0 24px 24px;border:1px solid #cec5b1;border-top:6px solid #2d4530;background:#f8f5ec;box-shadow:0 16px 34px rgba(60,60,60,.12)}.production-legacy-editor[hidden]{display:none}.production-legacy-editor>header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;border-bottom:1px solid #cec5b1;background:#3c3c3c;color:#fff}.production-legacy-editor>header span{display:block;margin-top:2px;font-size:1.08rem;font-weight:800}.production-legacy-editor>header small{color:#c9d3d7;font-size:.66rem;font-weight:800}.production-legacy-editor>header p{margin:3px 0 0;color:rgba(255,255,255,.72);font-size:.72rem}.production-legacy-editor>header button{min-height:38px;padding:8px 14px;border:1px solid #e1dbc9;border-radius:2px;background:#fffdf8;color:#3c3c3c;font-weight:800}.production-legacy-editor .wp-process-grid{padding:18px}
#production-status-detail-panel.production-step-edit-mode> :not(.production-legacy-editor){display:none!important}
#production-status-detail-panel.production-step-edit-mode{gap:0!important}
.production-legacy-editor .wp-process-card:not(.is-edit-target),.production-legacy-editor .wp-sub-step-card:not(.is-edit-target){display:none!important}
.production-legacy-editor .wp-process-card.is-edit-target{display:block!important;margin:0;border:0;background:transparent;box-shadow:none}
.production-legacy-editor .wp-process-card.is-edit-target .wp-process-header{border-left:5px solid #6b7b84;background:#e1dbc9;color:#3c3c3c}
.production-legacy-editor .wp-process-card.is-edit-target .wp-process-body{grid-template-columns:minmax(0,920px)!important;justify-content:center;padding:20px 0 4px}
.production-legacy-editor .wp-sub-step-card.is-edit-target{display:block!important;width:100%;border-top:5px solid #6b7b84;background:#fffdf8;box-shadow:0 8px 22px rgba(60,60,60,.08)}
@media(max-width:760px){.production-legacy-editor{margin:0 8px 16px}.production-legacy-editor>header{align-items:flex-start;flex-direction:column}.production-legacy-editor>header button{width:100%}.production-legacy-editor .wp-process-grid{padding:8px}}
@media(max-width:1040px){.production-board-main{grid-template-columns:1fr}.production-board-columns,.production-board-row{grid-template-columns:46px minmax(150px,1.2fr) minmax(130px,1fr) 100px 90px 78px}.production-board-detail>header::before{display:none}}
@media(max-width:760px){#production-status-detail-panel .production-work-board{margin:0 8px 16px}.production-board-phases{grid-template-columns:1fr 1fr;gap:8px;padding:8px}.production-board-phase{min-height:98px;border-bottom:1px solid #c8c9c5;border-radius:10px}.production-board-phase::after{display:none!important}.production-board-phase.selected{box-shadow:0 8px 18px rgba(45,45,38,.14);transform:none}.production-board-main{padding:8px}.production-board-columns{display:none}.production-board-row{grid-template-columns:42px 1fr;gap:5px 10px}.production-board-row>:nth-child(n+3){grid-column:2}.production-board-list>header,.production-work-board>footer{align-items:flex-start;flex-direction:column}}

/* Keep zero-progress tracks visible against selected and attention-row backgrounds. */
.production-board-meter {
  overflow: hidden;
  border-radius: 999px;
  background: #d5cec0;
  box-shadow: inset 0 0 0 1px rgba(94, 75, 59, 0.12);
}

.production-board-meter i {
  border-radius: inherit;
}

.production-board-row.alert .production-board-meter {
  background: #cdbdaf;
  box-shadow: inset 0 0 0 1px rgba(94, 75, 59, 0.2);
}

.production-board-row.alert .production-board-meter i {
  background: #7d5947;
}

.production-board-row.alert.selected .production-board-meter {
  background: #c4b09f;
  box-shadow: inset 0 0 0 1px rgba(76, 55, 43, 0.28);
}

/* Unified assignment workspace — warm PTK green / cream / muted red */
.planning-team-board{--assignment-pine:#2f492d;--assignment-pine-deep:#233821;--assignment-cream:#f4eedc;--assignment-paper:#fffdf7;--assignment-soft:#eee8d9;--assignment-line:#d6cdb8;--assignment-red:#972622;--assignment-red-soft:#f6e7e3;--assignment-ink:#30352d;background:var(--assignment-cream);color:var(--assignment-ink)}
.planning-team-board .planning-team-header,.planning-team-board .planning-team-header-actions,.planning-team-board .planning-team-orders,.planning-team-board .planning-team-picker,.planning-team-board .planning-individual-list article,.planning-team-board .planning-team-footer{background:var(--assignment-paper)}
.planning-team-board .planning-team-header{border-top:5px solid var(--assignment-pine);border-bottom:1px solid var(--assignment-line)}
.planning-team-board .planning-tool-eyebrow{color:var(--assignment-red)}
.planning-team-board .planning-team-back-button{border-color:var(--assignment-line);border-radius:3px;background:var(--assignment-paper);box-shadow:none}
.planning-team-board .planning-team-back-button:hover{border-color:var(--assignment-red);background:var(--assignment-red-soft);color:var(--assignment-red);box-shadow:none}
.planning-team-board .planning-team-steps .active,.planning-team-board .planning-individual-list article.active>button,.planning-team-board .planning-team-template-list article.active>button{border-color:var(--assignment-pine);background:var(--assignment-pine);color:#fff}
.planning-team-board .planning-team-steps .active{box-shadow:inset 0 -3px 0 var(--assignment-red)}
.planning-team-board .planning-team-step-select,.planning-team-board .planning-team-orders,.planning-team-board .planning-team-picker,.planning-team-board .planning-individual-discovery,.planning-team-board .planning-individual-list article,.planning-team-board .planning-team-selection{border-color:var(--assignment-line)}
.planning-team-board .planning-team-step-select{border-left-color:var(--assignment-red)}
.planning-team-board .planning-team-order-list>button.active,.planning-team-board .planning-individual-list article.active{border-left-color:var(--assignment-pine);background:#f0f3e9}
.planning-team-board .planning-individual-list article.active{border-color:#829479}
.planning-team-board .planning-individual-list article>button{border-color:var(--assignment-red);color:var(--assignment-red)}
.planning-team-board .planning-team-recommended{background:#e3ecd9;color:#345f31}
.planning-team-board .planning-team-footer{border-top-color:var(--assignment-line);box-shadow:0 -8px 20px rgba(47,73,45,.08)}
.planning-team-board .planning-team-footer button{border-radius:3px;background:var(--assignment-pine)}
.planning-team-board .planning-team-footer button:not(:disabled):hover{background:var(--assignment-pine-deep)}
.planning-task-context{display:grid;grid-template-columns:minmax(230px,1.45fr) minmax(180px,1fr) minmax(110px,.55fr) minmax(130px,.65fr);margin:14px 20px 0;border:1px solid var(--assignment-line);background:var(--assignment-paper)}
.planning-task-context>div{min-width:0;padding:11px 13px;border-right:1px solid var(--assignment-line)}
.planning-task-context>div:last-child{border-right:0}.planning-task-context span,.planning-task-context strong{display:block}.planning-task-context span{color:#777267;font-size:.66rem}.planning-task-context strong{margin-top:3px;overflow:hidden;font-size:.77rem;text-overflow:ellipsis;white-space:nowrap}
.planning-assignment-scope{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 20px 12px;padding:10px 13px;border:1px solid #cfd7c8;border-top:0;background:#eef1e9}
.planning-assignment-scope strong,.planning-assignment-scope span{display:block}.planning-assignment-scope strong{font-size:.78rem}.planning-assignment-scope span{margin-top:2px;color:#66705f;font-size:.68rem}.planning-assignment-scope>b{flex:0 0 auto;padding:6px 9px;background:var(--assignment-pine);color:#fff;font-size:.68rem}
.planning-team-board.is-task-assignment .planning-team-header-actions{padding-top:12px}.planning-team-board.is-task-assignment .planning-team-main{grid-template-columns:minmax(0,1fr)}.planning-team-board.is-task-assignment .planning-team-orders{display:none}.planning-team-board.is-task-assignment .planning-team-picker>header{border-top:4px solid var(--assignment-pine)}.planning-team-board.is-task-assignment .planning-team-selection.is-task-allocation{margin-top:10px}
.planning-assignment-zone{margin:12px;border:1px solid var(--assignment-line);background:var(--assignment-paper);box-shadow:0 2px 8px rgba(47,73,45,.05)}
.planning-assignment-zone-people{overflow:hidden;background:#f8f6ef}
.planning-assignment-zone-head{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;align-items:center!important;gap:10px!important;min-height:58px!important;padding:10px 12px!important;background:#ece9df!important;border-bottom:1px solid var(--assignment-line)!important}
.planning-assignment-zone-head>b{width:30px;height:30px;display:grid;place-items:center;color:#fff;background:var(--assignment-pine);border-radius:50%;font:900 .78rem var(--font-family)}
.planning-assignment-zone-head>div>strong,.planning-assignment-zone-head>div>h4{display:block;margin:0;color:var(--assignment-ink);font-size:.9rem;font-weight:900}
.planning-assignment-zone-head>div>span{display:block;margin-top:2px;color:#726f65;font-size:.67rem}
.planning-assignment-zone-head>em{padding:5px 8px;color:#777267;background:#f8f6f0;border:1px solid #d8d2c4;border-radius:999px;font-size:.64rem;font-style:normal;font-weight:800;white-space:nowrap}
.planning-assignment-zone-head>em.is-complete{color:#365632;background:#edf3e8;border-color:#aec1a7}
.planning-assignment-zone .planning-assignment-mode{margin-top:10px}.planning-assignment-zone .planning-individual-discovery{margin-bottom:12px}
.planning-assignment-flow-cue{width:calc(100% - 24px);min-height:60px;display:grid;grid-template-columns:auto minmax(0,1fr) 38px;align-items:center;gap:10px;margin:4px 12px;padding:9px 12px;color:#777267;background:#f3f0e8;border:1px dashed #c8c1b2;border-radius:5px;font:inherit;text-align:left}
.planning-assignment-flow-cue span{font-size:.67rem;font-weight:700}.planning-assignment-flow-cue strong{font-size:.78rem}.planning-assignment-flow-cue i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#d9d5ca;font-size:1rem;font-style:normal}
.planning-assignment-flow-cue.is-ready{color:#fff;background:var(--assignment-pine);border-color:var(--assignment-pine);box-shadow:0 5px 14px rgba(47,73,45,.18);cursor:pointer}.planning-assignment-flow-cue.is-ready span{color:#dfe8d9}.planning-assignment-flow-cue.is-ready i{color:var(--assignment-pine);background:#fff}.planning-assignment-flow-cue:disabled{cursor:not-allowed;opacity:.75}
.planning-team-selection.planning-assignment-zone-allocation{margin:4px 12px 14px;border:2px solid #bdc9b6;border-top:5px solid var(--assignment-pine);background:#fff;box-shadow:0 7px 18px rgba(47,73,45,.11)}
.planning-assignment-zone-allocation.is-locked{border-color:#d8d3c7;border-top-color:#aaa698;box-shadow:none}.planning-assignment-zone-allocation.is-locked .planning-assignment-zone-head>b{background:#aaa698}
.planning-task-allocation-list label{display:grid;grid-template-columns:42px minmax(0,1fr) 88px 34px;align-items:center;gap:9px;padding:9px 11px;border-top:1px solid #e7e0d1}.planning-task-allocation-list label>span:nth-child(2) strong,.planning-task-allocation-list label>span:nth-child(2) small{display:block}.planning-task-allocation-list label>span:nth-child(2) small{color:#777267;font-size:.66rem}
.planning-task-allocation-list input{width:100%;min-height:36px;border:1px solid var(--assignment-line);background:var(--assignment-paper);color:var(--assignment-ink);font:inherit;font-weight:800;text-align:right}.planning-task-allocation-list em{color:#777267;font-size:.68rem;font-style:normal}
.planning-task-allocation-total{display:flex;justify-content:space-between;gap:12px;padding:10px 11px;border-top:1px solid var(--assignment-line);font-size:.76rem}.planning-task-allocation-total.is-valid strong{color:var(--assignment-pine)}.planning-task-allocation-total.is-invalid strong{color:var(--assignment-red)}
.planning-task-workload-warning{margin:0;padding:9px 11px;border-top:1px solid #e4c9c3;background:var(--assignment-red-soft);color:var(--assignment-red);font-size:.68rem}
.prod-step-assignment-source{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:11px 12px;border:1px solid #d7cfbc;border-left:4px solid #2f492d;background:#f4f1e7}.prod-step-assignment-source strong,.prod-step-assignment-source span{display:block}.prod-step-assignment-source strong{color:#2f492d;font-size:.76rem}.prod-step-assignment-source span{margin-top:2px;color:#777267;font-size:.68rem}.prod-step-assignment-source button{flex:0 0 auto;min-height:36px;padding:7px 11px;border:1px solid #2f492d;border-radius:3px;background:#2f492d;color:#fff;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
.production-work-board{--board-pine:#2f492d;--board-slate:#607987;--board-earth:#684a3a;--board-sand:#e6dfcd;--board-charcoal:#30342f}.production-board-phases{background:linear-gradient(180deg,#ccc9c6 0%,#dedbd8 100%)}.production-board-phase.selected{border-color:#5f7083;background:#6c7b8f;color:#fff}.production-board-phase.selected>strong{color:#fff}.production-board-row.selected{background:#e5ece5}.production-board-row.alert.selected{background:#eee5dc}.production-board-detail-actions .primary{border-color:#2f492d;background:#2f492d}.production-board-detail-actions .primary:hover{background:#233821}
@media(max-width:820px){.planning-task-context{grid-template-columns:1fr 1fr;margin:10px}.planning-task-context>div{border-bottom:1px solid var(--assignment-line)}.planning-assignment-scope{align-items:flex-start;flex-direction:column;margin:0 10px 10px}.planning-team-board.is-task-assignment .planning-team-main{margin:0 10px}}
@media(max-width:520px){.planning-task-context{grid-template-columns:1fr}.planning-task-context>div{border-right:0}.planning-task-allocation-list label{grid-template-columns:38px minmax(0,1fr) 76px 30px}.planning-assignment-zone-head{grid-template-columns:30px minmax(0,1fr)}.planning-assignment-zone-head>em{grid-column:2;justify-self:start}.planning-assignment-flow-cue{grid-template-columns:minmax(0,1fr) 34px}.planning-assignment-flow-cue span,.planning-assignment-flow-cue strong{grid-column:1}.planning-assignment-flow-cue i{grid-column:2;grid-row:1/3}.prod-step-assignment-source{align-items:stretch;flex-direction:column}.prod-step-assignment-source button{width:100%}}

/* Production board: one state-driven next action, supporting tools stay secondary */
.production-board-next-action{margin:0 16px 12px;padding:11px 12px;border:1px solid #d6cdb8;border-left:4px solid #2f492d;background:#f1f3ea;color:#30352d}.production-board-next-action span,.production-board-next-action strong,.production-board-next-action small{display:block}.production-board-next-action span{color:#972622;font-size:.62rem;font-weight:900;letter-spacing:.035em}.production-board-next-action strong{margin-top:3px;font-size:.82rem}.production-board-next-action small{margin-top:3px;color:#65705f;font-size:.67rem;line-height:1.45}.production-board-next-action.needs-order{border-left-color:#972622;background:#f6e7e3}.production-board-next-action.needs-order strong,.production-board-next-action.needs-order small{color:#7d2d29}.production-board-next-action.assigned{border-left-color:#607987;background:#edf1f1}.production-board-next-action.completed{border-left-color:#2f492d;background:#e8efe5}.production-board-next-action.inactive{border-left-color:#8e8777;background:#f1eee7}
.production-board-primary-action{padding:0 16px 12px}.production-board-primary-action button{width:100%;min-height:42px;padding:9px 12px;border:1px solid #2f492d;border-radius:3px;background:#2f492d;color:#fff;font:inherit;font-size:.76rem;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(47,73,45,.14);transition:background .16s ease,box-shadow .16s ease,transform .16s ease}.production-board-primary-action button:hover{background:#233821;box-shadow:0 6px 13px rgba(47,73,45,.2);transform:translateY(-1px)}.production-board-primary-action button:focus-visible{outline:3px solid rgba(151,38,34,.28);outline-offset:2px}.production-board-primary-action button.restore-task{border-color:#48684a;background:#48684a}
.production-board-more-actions{margin:0 16px 16px;border-top:1px solid #d9d1bf}.production-board-more-actions summary{padding:10px 2px 4px;color:#6f695e;font-size:.68rem;font-weight:800;cursor:pointer;list-style:none}.production-board-more-actions summary::-webkit-details-marker{display:none}.production-board-more-actions summary::after{float:right;color:#972622;content:"＋"}.production-board-more-actions[open] summary::after{content:"−"}.production-board-more-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:7px}.production-board-more-actions button{min-height:34px;padding:7px 8px;border:1px solid #c9bfaa;border-radius:2px;background:#fffdf7;color:#3c3c36;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}.production-board-more-actions button:hover{border-color:#807663;background:#f4eedc}.production-board-more-actions .view-evidence,.production-board-more-actions .skip-task{grid-column:1/-1}.production-board-more-actions .skip-task{border-color:#d3a29b;background:#fff8f6;color:#8e2b28}
.production-board-row.assignment-next{border-left-color:#972622;background:#f6ece7;box-shadow:inset 0 0 0 2px rgba(151,38,34,.22)}
@media(max-width:520px){.production-board-more-actions>div{grid-template-columns:1fr}.production-board-more-actions .skip-task{grid-column:auto}}

/* Assembly calculator: show inputs, outcome, remaining stock, and next action at a glance. */
.merge-component-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}.merge-component-row label>span{display:block;margin-bottom:4px;color:var(--color-text-light);font-size:.78rem;font-weight:800}.merge-component-ratio{text-align:center}.merge-progress-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #d6cdb8;background:#f7f4ea}.merge-progress-summary>div{padding:9px 10px;border-right:1px solid #d6cdb8}.merge-progress-summary>div:last-child{border-right:0}.merge-progress-summary span,.merge-progress-summary strong{display:block}.merge-progress-summary span{color:#777267;font-size:.64rem}.merge-progress-summary strong{margin-top:3px;color:#2f492d;font-size:.75rem}.merge-progress-summary>strong,.merge-progress-summary>span{grid-column:1/-1;padding:4px 10px}.merge-progress-summary>strong{padding-top:9px;color:#972622;font-size:.72rem}.merge-progress-summary>span{padding-bottom:9px;color:#777267;font-size:.68rem}
@media(max-width:560px){.merge-component-row{grid-template-columns:1fr}.merge-progress-summary{grid-template-columns:1fr 1fr}.merge-progress-summary>div:nth-child(2){border-right:0}.merge-progress-summary>div{border-bottom:1px solid #d6cdb8}.merge-progress-summary>div:nth-last-child(-n+2){border-bottom:0}}

.planning-task-progress-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 20px 12px;border:1px solid var(--assignment-line);background:var(--assignment-paper)}.planning-task-progress-summary>div{padding:10px 12px;border-right:1px solid var(--assignment-line)}.planning-task-progress-summary>div:last-child{border-right:0;border-left:4px solid var(--assignment-pine);background:#eef1e9}.planning-task-progress-summary span,.planning-task-progress-summary strong{display:block}.planning-task-progress-summary span{color:#777267;font-size:.64rem}.planning-task-progress-summary strong{margin-top:3px;font-size:.76rem}.planning-task-progress-summary>div:nth-child(3) strong{color:var(--assignment-red)}.planning-task-team-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}.planning-task-team-summary strong,.planning-task-team-summary span{display:block}.planning-task-team-summary span{margin-top:3px;color:#777267;font-size:.68rem}.planning-task-team-summary>b{color:var(--assignment-pine);font-size:.76rem;white-space:nowrap}.production-board-number b,.production-board-number small{display:block}.production-board-number small{margin-top:2px;font-size:.62rem}
@media(max-width:700px){.planning-task-progress-summary{grid-template-columns:1fr 1fr;margin:0 10px 10px}.planning-task-progress-summary>div:nth-child(2){border-right:0}.planning-task-progress-summary>div:nth-child(-n+2){border-bottom:1px solid var(--assignment-line)}.planning-task-team-summary{align-items:flex-start;flex-direction:column}}

/* Daily Work: one report batch, many linked work items, review before sync. */
.daily-log-flow-nav{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 20px 0;border:1px solid #d5cebf;background:#fffdf7}.daily-log-flow-step{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 10px;border:0;border-right:1px solid #d5cebf;background:#fffdf7;color:#6f716a;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.daily-log-flow-step:last-child{border-right:0}.daily-log-flow-step b{width:25px;height:25px;display:grid;place-items:center;border:1px solid #9a9e8c;border-radius:50%;font-size:.72rem}.daily-log-flow-step.is-active{background:#46505b;color:#fff}.daily-log-flow-step.is-active b{border-color:#fff}
.daily-log-flow-panel{margin:0 20px 18px;border:1px solid #d5cebf;border-top:0;background:#fffdf7}.daily-log-flow-panel[hidden]{display:none!important}.daily-log-section-head{padding:15px 16px 12px;border-bottom:1px solid #d5cebf;background:#f8f5ec}.daily-log-section-head span{display:block;color:#972622;font-size:.65rem;font-weight:900}.daily-log-section-head h4{margin:2px 0 0;color:#30342f;font-size:1rem}.daily-log-section-head p{margin:3px 0 0;color:#6f716a;font-size:.72rem}
.daily-log-flow-panel .daily-work-meta-grid{margin:0;padding:14px 14px 10px}.daily-work-meta-grid.is-own-report select:disabled,.daily-work-meta-grid.is-own-report input:disabled{color:#3e473b;background:#edf0e8;opacity:1;cursor:not-allowed}.daily-reporter-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px 12px;padding:9px 11px;border-left:4px solid #607987;background:#edf1f1;color:#4b5354;font-size:.7rem}.daily-reporter-mode button{padding:7px 9px;border:1px solid #607987;background:#fff;color:#46505b;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}
.daily-assigned-zone{margin:0 14px 14px;border:1px solid #d5cebf;background:#f7f5ee}.daily-assigned-zone>header{padding:11px 12px;border-bottom:1px solid #d5cebf;background:#ece9df}.daily-assigned-zone>header strong,.daily-assigned-zone>header span{display:block}.daily-assigned-zone>header strong{font-size:.8rem}.daily-assigned-zone>header span{margin-top:2px;color:#6f716a;font-size:.66rem}.daily-assigned-work{display:grid;grid-template-columns:28px minmax(0,1fr) 100px 116px;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #dfd8c9;background:#fff}.daily-assigned-work:last-child{border-bottom:0}.daily-assigned-work.is-selected{background:#edf3e9}.daily-assigned-check{width:23px;height:23px;display:grid;place-items:center;border:1px solid #aaa596;color:#fff}.daily-assigned-work.is-selected .daily-assigned-check{border-color:#365632;background:#365632}.daily-assigned-work div:nth-child(2) small,.daily-assigned-work div:nth-child(2) strong,.daily-assigned-work div:nth-child(2) span,.daily-assigned-qty small,.daily-assigned-qty b,.daily-assigned-qty span{display:block}.daily-assigned-work div:nth-child(2) small{color:#777267;font-size:.63rem}.daily-assigned-work div:nth-child(2) strong{margin-top:2px;font-size:.78rem}.daily-assigned-work div:nth-child(2) span{margin-top:2px;color:#6f716a;font-size:.64rem}.daily-assigned-qty b{font-size:.72rem}.daily-assigned-qty span{margin-top:2px;color:#6a765f;font-size:.61rem}.daily-assigned-work>button{min-height:34px;padding:7px 8px;border:1px solid #972622;background:#fff;color:#8d2825;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}.daily-assigned-work>button:disabled{border-color:#365632;background:#365632;color:#fff;opacity:1}.daily-assigned-empty{padding:22px;text-align:center}.daily-assigned-empty strong,.daily-assigned-empty span{display:block}.daily-assigned-empty span{margin-top:4px;color:#777267;font-size:.68rem}.daily-work-other-task{margin:8px;padding:8px 10px;border:1px dashed #8b866d;background:#fffdf7;color:#4c593d;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}
.daily-log-flow-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid #d5cebf;background:#f3efe4}.daily-log-flow-actions>span{color:#6f716a;font-size:.67rem}.daily-log-flow-actions .btn{width:auto;margin:0}.daily-log-back{min-height:38px;padding:8px 11px;border:1px solid #aaa391;background:#fffdf7;color:#42483e;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.daily-log-flow-panel .daily-log-blocks-container{padding:12px}.daily-log-flow-panel .daily-work-add-row,.daily-log-flow-panel>.prod-step-field-group,.daily-log-flow-panel>.daily-work-photo-field{margin-right:12px;margin-left:12px}.daily-work-item-evidence{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border-top:1px solid #ded7c8;background:#f8f5ed}.daily-work-item-evidence>div:first-child{min-width:150px}.daily-work-item-evidence strong,.daily-work-item-evidence span{display:block}.daily-work-item-evidence strong{font-size:.7rem}.daily-work-item-evidence>div:first-child span{margin-top:2px;color:#777267;font-size:.61rem}.daily-work-item-evidence>button{margin-left:auto;padding:7px 9px;border:1px solid #8b866d;background:#fff;color:#4d5940;font:inherit;font-size:.66rem;font-weight:800}.daily-log-item-thumbs{display:flex;gap:5px;flex-wrap:wrap}.daily-log-item-thumbs>span{position:relative;width:42px;height:42px}.daily-log-item-thumbs img{width:100%;height:100%;display:block;object-fit:cover}.daily-log-item-thumbs button{position:absolute;top:-5px;right:-5px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#972622;color:#fff;font:inherit;line-height:18px}
.daily-work-part-row label>span{display:flex;flex-direction:column;gap:1px}.daily-work-part-row label>span small{color:#7b7d72;font-size:.58rem;font-weight:600}.daily-log-validation-ok{margin:12px;padding:10px 12px;border-left:4px solid #496949;background:#e8f0e4;color:#315233;font-size:.7rem;font-weight:800}.daily-log-review-list{margin:12px;border:1px solid #d5cebf}.daily-log-review-list article{display:grid;grid-template-columns:minmax(0,1fr) 100px 60px;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #ded7c8}.daily-log-review-list article:last-child{border-bottom:0}.daily-log-review-list small,.daily-log-review-list strong,.daily-log-review-list span{display:block}.daily-log-review-list small{color:#777267;font-size:.63rem}.daily-log-review-list strong{margin-top:2px;font-size:.76rem}.daily-log-review-list span{margin-top:2px;color:#5f665d;font-size:.66rem}.daily-log-review-list>b{font-size:.73rem}.daily-log-review-list button{border:0;background:transparent;color:#972622;font:inherit;font-size:.67rem;font-weight:800}.daily-log-review-summary{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:12px;padding:12px;background:#46505b;color:#fff}.daily-log-review-summary span{font-size:.68rem}.daily-log-review-summary strong{font-size:.78rem}.daily-log-review-summary small{grid-column:1/-1;color:#dce1e3;font-size:.63rem}
.daily-report-submitted{display:grid;place-items:center;min-height:610px;padding:42px 24px;border-top:4px solid #2f492d;background:#fffdf7;text-align:center}.daily-report-submitted-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#456443;color:#fff;font-size:1.7rem}.daily-report-submitted>span{margin-top:13px;color:#972622;font-size:.66rem;font-weight:900}.daily-report-submitted h3{margin:4px 0 0;font-size:1.25rem}.daily-report-submitted>p{max-width:650px;margin:6px 0 0;color:#686f67;font-size:.74rem}.daily-report-submitted-stats{width:min(720px,100%);display:grid;grid-template-columns:1.2fr .7fr 1fr;margin:22px 0;border:1px solid #d5cebf;background:#f2eee3}.daily-report-submitted-stats>div{padding:13px;border-right:1px solid #d5cebf}.daily-report-submitted-stats>div:last-child{border-right:0}.daily-report-submitted-stats small,.daily-report-submitted-stats strong{display:block}.daily-report-submitted-stats small{color:#777267;font-size:.64rem}.daily-report-submitted-stats strong{margin-top:3px;font-size:.75rem}.daily-report-next{max-width:720px;padding:11px 13px;border-left:4px solid #607987;background:#edf1f1;text-align:left}.daily-report-next b,.daily-report-next span{display:block}.daily-report-next b{color:#972622;font-size:.66rem}.daily-report-next span{margin-top:3px;color:#535b5b;font-size:.7rem}.daily-report-submitted footer{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}.daily-report-submitted footer .btn{width:auto;margin:0}
@media(max-width:760px){.daily-log-flow-nav,.daily-log-flow-panel{margin-right:10px;margin-left:10px}.daily-assigned-work{grid-template-columns:26px minmax(0,1fr)}.daily-assigned-qty,.daily-assigned-work>button{grid-column:2}.daily-assigned-work>button{width:100%}.daily-work-item-evidence{align-items:flex-start;flex-direction:column}.daily-work-item-evidence>button{width:100%;margin-left:0}.daily-log-review-list article{grid-template-columns:minmax(0,1fr) auto}.daily-log-review-list article button{grid-column:1/-1;text-align:left}.daily-report-submitted-stats{grid-template-columns:1fr}.daily-report-submitted-stats>div{border-right:0;border-bottom:1px solid #d5cebf}.daily-report-submitted-stats>div:last-child{border-bottom:0}}
@media(max-width:760px){.daily-log-assignment-context{align-items:stretch;flex-direction:column;gap:8px}.daily-log-assignment-context>div{min-width:0}.daily-log-assignment-context select{width:100%;min-width:0;margin-left:0}}
@media(max-width:480px){.daily-work-stage-option{grid-template-columns:22px minmax(0,1fr);gap:7px}.daily-work-stage-option .daily-work-stage-tag{grid-column:2;justify-self:start}.daily-work-stage-button{align-items:flex-start;flex-wrap:wrap}.daily-work-stage-button .daily-work-stage-tag{order:3;margin-left:0}.daily-work-stage-chevron{margin-top:2px}}
@media(max-width:480px){.daily-log-flow-step{gap:4px;padding:7px 4px;font-size:.66rem}.daily-log-flow-step b{width:22px;height:22px}.daily-log-flow-actions{align-items:stretch;flex-direction:column}.daily-log-flow-actions .btn,.daily-log-back{width:100%}.daily-reporter-mode{align-items:flex-start;flex-direction:column}.daily-reporter-mode button{width:100%}}
.daily-log-assignment-context.is-extra{align-items:flex-start}.daily-log-extra-reason{min-width:min(440px,100%);display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.8fr);gap:8px;margin-left:auto}.daily-log-extra-reason label,.daily-log-extra-reason span{display:block}.daily-log-extra-reason label{min-width:0}.daily-log-extra-reason label[hidden]{display:none}.daily-log-extra-reason span{margin-bottom:4px;color:#76514d;font-size:.6rem;font-weight:800}.daily-log-extra-reason select,.daily-log-extra-reason input{width:100%;min-width:0;min-height:38px;margin-left:0;padding:7px 9px;border:1px solid #c7aaa3;border-radius:4px;background:#fff;color:#343723;font:700 .69rem var(--font-family);box-sizing:border-box}.daily-log-extra-reason select:focus,.daily-log-extra-reason input:focus{border-color:#8d2a27;box-shadow:0 0 0 3px rgba(141,42,39,.1);outline:0}.daily-log-review-extra{display:block;width:max-content;max-width:100%;margin-top:5px;padding:4px 7px;border-radius:4px;background:#fff1ed;color:#8d2a27;font-size:.59rem;font-style:normal;font-weight:800}.daily-review-exception{display:block!important;margin-top:4px!important;padding:5px 7px!important;background:#fff1ed!important;color:#8d2a27!important;border-left:3px solid #9b332f}.daily-log-detail-exception{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid #d9b9b1;border-left:4px solid #9b332f;border-radius:5px;background:#fff7f4}.daily-log-detail-exception span{color:#8d2a27;font-size:.63rem;font-weight:800}.daily-log-detail-exception strong{color:#533c38;font-size:.8rem}.daily-log-detail-exception small{color:#765f5a;font-size:.67rem}
@media(max-width:760px){.daily-log-extra-reason{width:100%;min-width:0;grid-template-columns:1fr;margin-left:0}}