/* ==========================================================================
   Base layout and shared components
   ========================================================================== */

:root {
  --app-bg: #f3f6fb;
  --surface: #ffffff;
  --surface-soft: #f8fafd;
  --surface-tint: #edf3ff;
  --navy-900: #17243a;
  --navy-800: #1d2d4a;
  --navy-700: #243650;
  --blue-700: #2451b8;
  --blue-600: #2c61d6;
  --blue-100: #eaf1ff;
  --border: #d8e1ef;
  --border-strong: #c3d2e7;
  --text-muted: #66758c;
  --shadow-soft: 0 10px 28px rgba(23, 36, 58, 0.08);
  --shadow-card: 0 8px 20px rgba(23, 36, 58, 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

[v-cloak] {
  display: none;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(36, 81, 184, 0.08), transparent 34rem),
    linear-gradient(180deg, #f6f8fc 0%, var(--app-bg) 100%);
  color: var(--navy-800);
}

.title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.title-icon {
  height: 3vh;
  object-fit: contain;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  padding: 1.2rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#app.container {
  max-width: 98%;
  padding: 0.6rem;
  padding-right: calc(0.6rem + 64px);
}

#twoWeekApp.container {
  padding-right: calc(1.2rem + 64px);
}

.container.small {
  max-width: 480px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(216, 225, 239, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

.app-header-brand {
  min-width: 0;
}

.app-header-meta {
  align-self: center;
  text-align: center;
  color: var(--navy-700);
}

.app-header-meta p {
  margin: 0;
}

.header-project-title {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.header-right-tools {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.45rem;
}

.header-username {
  color: var(--navy-700);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.header-erne-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.hamburger-button {
  list-style: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-700);
  background: var(--surface-tint);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(36, 81, 184, 0.1);
}

.hamburger-button:hover {
  background: var(--blue-100);
  border-color: #9fb8ee;
}

.actions-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 34, 0.34);
  z-index: 1200;
  right: 64px;
}

.actions-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 58px;
  height: 100vh;
  background: #17243a;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -16px 0 36px rgba(8, 18, 44, 0.2);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease, width 0.22s ease;
}

.actions-drawer.is-open {
  transform: translateX(0);
}

.actions-drawer.is-expanded {
  width: min(300px, 92vw);
  box-shadow: -16px 0 36px rgba(8, 18, 44, 0.28);
}

.actions-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 0.55rem 0.9rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.12);
}

.actions-drawer:not(.is-expanded) .actions-drawer-header {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
}

.actions-drawer.is-expanded .actions-drawer-header {
  padding: 1rem 0.75rem 0.95rem;
}

.actions-drawer-header h2 {
  margin: 0;
  font-size: 0.98rem;
  color: #f8fafc;
  line-height: 1.15;
}

.actions-drawer-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.65rem;
}

.actions-drawer:not(.is-expanded) .actions-drawer-brand {
  display: none;
}

.actions-drawer-brand p {
  margin: 0.14rem 0 0;
  color: #aebbd0;
  font-size: 0.74rem;
  line-height: 1.25;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-drawer-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #27446d;
  object-fit: cover;
}

.actions-drawer-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #d9e4f5;
  font-size: 1.45rem;
  line-height: 1;
  padding: 0;
  flex: 0 0 auto;
}

.actions-drawer-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.actions-drawer-content {
  padding: 0.85rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
  overflow-y: auto;
  flex: 1;
}

.actions-drawer.is-expanded .actions-drawer-content {
  padding: 0.95rem 0.65rem;
}

.actions-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.actions-drawer-section-title {
  padding: 0 0.45rem 0.3rem;
  color: #7f8fa8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.actions-drawer:not(.is-expanded) .actions-drawer-section-title {
  display: none;
}

.drawer-nav-item {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #d8e2f1;
  padding: 0.5rem 0.55rem;
  text-align: left;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 650;
}

.actions-drawer:not(.is-expanded) .drawer-nav-item {
  min-height: 42px;
  justify-content: center;
  gap: 0;
  padding: 0.55rem 0;
  border-radius: 10px;
}

.actions-drawer:not(.is-expanded) .drawer-nav-item span {
  display: none;
}

.drawer-nav-item i {
  width: 18px;
  color: #93a4bd;
  text-align: center;
  font-size: 0.86rem;
}

.actions-drawer:not(.is-expanded) .drawer-nav-item i {
  width: auto;
  font-size: 0.92rem;
}

.drawer-nav-item:hover,
.drawer-nav-item:focus {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  outline: none;
}

.drawer-nav-item:disabled,
.drawer-nav-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.drawer-nav-item:disabled:hover,
.drawer-nav-item:disabled:focus,
.drawer-nav-item.is-disabled:hover,
.drawer-nav-item.is-disabled:focus {
  background: transparent;
  color: #d8e2f1;
}

.drawer-nav-item.is-active {
  background: #2451b8;
  border-color: rgba(136, 166, 255, 0.28);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(5, 12, 28, 0.16);
}

.drawer-nav-item.is-active i {
  color: #dbe7ff;
}

.drawer-nav-danger {
  color: #ffd6d6;
}

.drawer-nav-danger i {
  color: #ffb6b6;
}

.actions-drawer-footer {
  margin-top: auto;
  width: 100%;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.actions.actions-drawer-content {
  align-items: stretch;
  flex-wrap: nowrap;
}

.button,
button {
  border: 1px solid var(--blue-700);
  background: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%);
  color: #fff;
  border-radius: 9px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(36, 81, 184, 0.12);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.button.ghost {
  background: var(--surface);
  color: var(--blue-700);
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(23, 36, 58, 0.05);
}

.button:hover:not(:disabled),
button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(36, 81, 184, 0.16);
}

.button.ghost:hover:not(:disabled) {
  background: var(--blue-100);
  border-color: #9fb8ee;
}

.view-toggle-button {
  border-radius: 999px;
  border-color: #b8caef;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  color: #1849b8;
  font-weight: 700;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  box-shadow: 0 2px 8px rgba(20, 62, 156, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.view-toggle-button i {
  font-size: 1.12rem;
  line-height: 1;
  color: #8093bd;
}

.view-toggle-button i.fa-toggle-on {
  color: #1d74d8;
}

.view-toggle-button.is-active {
  border-color: #6f96e8;
  background: linear-gradient(180deg, #ecf3ff 0%, #dfeaff 100%);
  color: #123b8e;
  box-shadow: 0 0 0 2px rgba(56, 108, 219, 0.14) inset;
}

.view-toggle-button:hover {
  border-color: #90ace7;
}

.button.danger {
  background: linear-gradient(180deg, #e24040 0%, #c82424 100%);
  border-color: #d92020;
}

.button:disabled,
button:disabled,
.button.is-disabled,
button.is-disabled {
  background: #e2e6ee;
  border-color: #c7cfdd;
  color: #6a7487;
  cursor: not-allowed;
  box-shadow: none;
}

.button.ghost:disabled,
.button.ghost.is-disabled {
  background: #e2e6ee;
  border-color: #c7cfdd;
  color: #6a7487;
}

.card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  margin: 0;
  align-items: center;
}

.stats-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.4rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.stats-card .stats > div {
  color: var(--navy-700);
  font-weight: 650;
}

/* Shared history and modal surfaces */

.history-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 34, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-modal {
  position: relative;
  width: 70vw;
  height: 70vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(8, 18, 44, 0.25);
  padding: 2.6rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.history-modal h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--navy-700);
}

.history-filters {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 0.6rem;
}

.history-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.history-filters span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f2f52;
}

.history-filters select {
  min-width: 120px;
}

.history-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  border: 1px solid #d3def4;
  background: #fff;
  color: #1d3f8f;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 1rem;
}

.history-table-wrap {
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
}

.history-table-wrap table {
  width: 100%;
  min-width: 760px;
}

.history-table-wrap th,
.history-table-wrap td {
  position: static;
}

.history-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #edf3ff;
}

.history-actions {
  display: flex;
  justify-content: center;
  padding-top: 0.2rem;
}

.history-unassigned-row {
  background: #fff8f1;
}

.history-unassigned-marker {
  display: inline-flex;
  margin-left: 0.4rem;
  padding: 0.08rem 0.4rem;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff1e8;
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}

.history-unassigned-marker.is-manual-assigned {
  border-color: #bfe3c9;
  background: #ecf9ef;
  color: #1c6f35;
}

.history-assign-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 0.3rem;
  padding: 0;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff;
  color: #9a3412;
  cursor: pointer;
  vertical-align: middle;
}

.history-assign-button:hover {
  background: #fff1e8;
}

.history-file-name {
  display: block;
  margin-top: 0.15rem;
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 600;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 34, 0.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-modal {
  position: relative;
  width: fit-content;
  max-width: 70vw;
  max-height: 70vh;
  background: #fff;
  border: 1px solid #d9e0ee;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(8, 18, 44, 0.25);
  padding: 2.2rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.version-modal h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1f2f52;
}

.version-modal-subtitle {
  margin: 0;
  color: #4f5f80;
  font-size: 0.88rem;
}

.version-list-wrap {
  border: 1px solid #e3e9f7;
  border-radius: 10px;
  overflow: auto;
  min-height: 0;
}

.version-table {
  width: 100%;
  min-width: 420px;
}

.unmatched-assignment-modal {
  width: min(620px, 92vw);
}

.unmatched-assignment-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.unmatched-assignment-field span {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1f2f52;
}

.unmatched-assignment-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #e3e9f7;
  border-radius: 10px;
  padding: 0.35rem;
  background: #f8fbff;
}

.unmatched-assignment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.48rem 0.6rem;
  border: 1px solid #dbe5f6;
  border-radius: 8px;
  background: #fff;
  color: #1f2f52;
  cursor: pointer;
  text-align: left;
}

.unmatched-assignment-option:hover,
.unmatched-assignment-option.selected {
  border-color: #1d57d8;
  background: #edf3ff;
}

.unmatched-assignment-option span {
  color: #5b6b88;
  font-size: 0.82rem;
}

.unmatched-assignment-empty {
  padding: 0.8rem;
  color: #6b7280;
  text-align: center;
}

.unmatched-assignment-actions {
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.4rem;
}

.version-link {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

.version-link:hover {
  opacity: 0.85;
}

.warn {
  color: #9a5a00;
}

.controls {
  margin-bottom: 0.45rem;
}

/* Polier order controls and table details */

.polier-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.polier-controls-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  gap: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
}

.polier-controls-dropdown > .polier-controls-panel {
  margin-top: 0.75rem;
  width: 100%;
}

.polier-controls-panel {
  margin-bottom: 0.45rem;
}

.polier-sort-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  font-weight: 400;
  color: inherit;
  margin-left: 0;
}

.stats .polier-sort-control {
  margin-left: 0;
}

.polier-sort-control select {
  width: 100%;
  min-width: 0;
}

.polier-config-inline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.polier-controls-panel>.button.ghost,
.polier-controls-panel>.pill {
  align-self: end;
}

.polier-button-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}

.polier-button-stack .polier-action-button,
.polier-button-stack .polier-filter-pill {
  width: 100%;
}

.polier-action-button {
  min-height: 36px;
  border-radius: 9px;
  border-color: #c5d6f5;
  background: #ffffff;
  color: #1849b8;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(20, 62, 156, 0.06);
}

.polier-action-button:hover:not(:disabled) {
  background: #edf4ff;
  border-color: #9eb9ee;
}

.polier-filter-field {
  min-width: 0;
}

.polier-filter-field-wide {
  grid-column: span 2;
}

.polier-filter-pill {
  justify-self: stretch;
  align-self: stretch;
}

.polier-controls-panel .filter-field {
  height: 100%;
  padding: 0.55rem 0.6rem;
}

.polier-controls-panel .date-range-controls input[type='date'] {
  min-width: 132px;
}

.polier-controls-panel .date-range-controls .polier-action-button {
  min-height: 34px;
  padding: 0.36rem 0.62rem;
}

.polier-controls-panel .status-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.polier-controls-panel .status-options .status-option.status-option-not-required {
  background: #eceff4;
  border-color: #cfd5df;
}

.polier-controls-panel .status-options .status-option.status-option-not-required:has(input:checked) {
  background: #e2e6ee;
  border-color: #b8c0ce;
  box-shadow: 0 0 0 2px rgba(98, 109, 129, 0.1) inset;
}

.polier-controls-panel .model-options {
  margin-top: 0.35rem;
  gap: 0.45rem;
}

.polier-controls-panel .model-option {
  font-size: 0.84rem;
  padding: 0.38rem 0.58rem;
}

.polier-config-inline label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 180px;
  font-weight: 700;
  color: #1f2f52;
  font-size: 0.84rem;
}

.polier-config-inline input[type='number'] {
  min-width: 110px;
  border: 1px solid #cdd8ee;
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  background: #ffffff;
  color: #1d2d4a;
}

.polier-config-success {
  color: #1c6f35;
  font-weight: 700;
}

.controls-dropdown>summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy-700);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.controls-dropdown>summary::-webkit-details-marker {
  display: none;
}

.controls-dropdown>summary::before {
  content: '▸';
  color: var(--blue-700);
  font-size: 0.9rem;
}

.controls-dropdown[open]>summary::before {
  content: '▾';
}

.controls-dropdown>.model-filter:first-of-type {
  margin-top: 0.8rem;
}

.model-filter summary {
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.model-filter {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 0.6rem 0.75rem 0.75rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
  box-shadow: 0 4px 12px rgba(23, 36, 58, 0.04);
}

.model-filter+.model-filter {
  margin-top: 0.7rem;
}

.filter-panel {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
}

.filter-panel-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding-right: 250px;
}

.filter-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-preset-actions {
  position: absolute;
  top: 0.45rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.filter-preset-save {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
}

.filter-preset-select {
  min-width: 180px;
  height: 36px;
  border-radius: 8px;
}

.model-options {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.filter-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem;
}

.filter-field>span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-700);
}

.filter-field input[type='text'] {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.etappencode-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem;
}

.etappencode-group-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.etappencode-group-option {
  width: 100%;
  justify-content: flex-start;
  border-radius: 10px;
  border-color: var(--group-color-border, #c9d8f8);
  background: var(--group-color-bg, #edf3ff);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.etappencode-group-option:has(input:checked) {
  background: var(--group-color-bg-active, #dfe9ff);
  border-color: var(--group-color-border-active, #9fb8ee);
  box-shadow: 0 0 0 2px var(--group-color-shadow, rgba(56, 108, 219, 0.1)) inset;
}

.etappencode-group-name {
  font-weight: 600;
  color: #1f2f52;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etappencode-group-meta {
  color: #38578f;
  font-size: 0.82rem;
  font-weight: 600;
}

.etappencode-group-option input {
  accent-color: var(--group-color, #1d57d8);
}

.etappencode-group-delete {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-color: var(--group-color-border, #c9d8f8);
  color: var(--group-color, #1d57d8);
  background: var(--group-color-bg, #edf3ff);
}

.etappencode-color-input {
  width: 60px;
  height: 36px;
  border: 1px solid #d3def4;
  border-radius: 8px;
  background: #fff;
  padding: 0.15rem;
}

.date-range-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.date-range-controls>span {
  color: #4f5f80;
  font-weight: 600;
}

.date-range-controls input[type='date'] {
  min-width: 148px;
  background: #f8fbff;
}

.date-range-clear {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
}

.status-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.status-option {
  width: 100%;
  border-radius: 10px;
  justify-content: flex-start;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.status-options .status-option.status-option-open {
  background: #edf3ff;
  border-color: #c9d8f8;
}

.status-options .status-option.status-option-open:has(input:checked) {
  background: #dfe9ff;
  border-color: #9fb8ee;
  box-shadow: 0 0 0 2px rgba(56, 108, 219, 0.1) inset;
}

.status-options .status-option.status-option-overdue {
  background: #ffebeb;
  border-color: #f4c2c2;
}

.status-options .status-option.status-option-overdue:has(input:checked) {
  background: #ffdede;
  border-color: #eea4a4;
  box-shadow: 0 0 0 2px rgba(177, 23, 23, 0.1) inset;
}

.status-options .status-option.status-option-delivered {
  background: #ecf9ef;
  border-color: #bfe3c9;
}

.status-options .status-option.status-option-delivered:has(input:checked) {
  background: #ddf3e3;
  border-color: #98d0aa;
  box-shadow: 0 0 0 2px rgba(28, 111, 53, 0.1) inset;
}

.status-options .status-option.status-option-not-required {
  background: #ecf9ef;
  border-color: #bfe3c9;
}

.status-options .status-option.status-option-not-required:has(input:checked) {
  background: #ddf3e3;
  border-color: #98d0aa;
  box-shadow: 0 0 0 2px rgba(28, 111, 53, 0.1) inset;
}

.status-options .status-option.status-option-manufacturer {
  background: #e4f5ea;
  border-color: #b5dcc1;
}

.status-options .status-option.status-option-manufacturer:has(input:checked) {
  background: #d2eddc;
  border-color: #86c09a;
  box-shadow: 0 0 0 2px rgba(36, 120, 64, 0.12) inset;
}

.status-options .status-option.status-option-late {
  background: #fff7e8;
  border-color: #f0ddaf;
}

.status-options .status-option.status-option-late:has(input:checked) {
  background: #ffefcf;
  border-color: #e8c87e;
  box-shadow: 0 0 0 2px rgba(138, 90, 0, 0.1) inset;
}

.status-options .status-option.status-option-on-adjusted {
  background: #d9f2df;
  border-color: #9ad0ab;
}

.status-options .status-option.status-option-on-adjusted:has(input:checked) {
  background: #c9ebd3;
  border-color: #74b78a;
  box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.1) inset;
}

.status-options .status-option.status-option-rescheduled {
  background: #edf3ff;
  border-color: #c9d8f8;
}

.status-options .status-option.status-option-rescheduled:has(input:checked) {
  background: #dfe9ff;
  border-color: #9fb8ee;
  box-shadow: 0 0 0 2px rgba(56, 108, 219, 0.1) inset;
}

.status-option input {
  accent-color: #1d57d8;
}

.model-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--navy-700);
}

.visible-kind-filter summary {
  flex-wrap: wrap;
}

.visible-kinds-options {
  align-items: stretch;
}

.visible-kinds-options.is-loading {
  opacity: 0.96;
}

.visible-kind-option {
  min-height: 44px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.visible-kind-option:hover:not(.is-loading) {
  transform: translateY(-1px);
  border-color: #b8caef;
}

.visible-kind-option.is-active {
  background: linear-gradient(180deg, #eef4ff 0%, #dfe9ff 100%);
  border-color: #93b3ef;
  box-shadow: 0 0 0 2px rgba(56, 108, 219, 0.1) inset;
}

.visible-kind-option input {
  accent-color: #1d57d8;
}

.pill-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-color: #9ab8ef;
  background: #e7f0ff;
  color: #123b8e;
}

.pill {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-tint);
  color: var(--blue-700);
  font-size: 0.8rem;
}

.filter-preset-modal {
  position: relative;
  width: min(460px, 92vw);
  background: #fff;
  border: 1px solid #d9e0ee;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(8, 18, 44, 0.25);
  padding: 2.4rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.filter-preset-modal h3 {
  margin: 0;
  font-size: 1.02rem;
  color: #1f2f52;
}

.filter-preset-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.filter-preset-modal-field span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2f52;
}

.filter-preset-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@keyframes visible-kind-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .filter-panel-summary {
    padding-right: 0;
  }

  .filter-preset-actions {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
  }

  .filter-preset-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .filter-preset-modal-actions {
    justify-content: stretch;
  }

  .filter-preset-modal-actions .button {
    flex: 1 1 0;
  }

  .polier-controls-panel {
    grid-template-columns: 1fr;
  }

  .polier-controls-panel .polier-action-button {
    width: 100%;
  }

  .polier-filter-field-wide {
    grid-column: auto;
  }

  .polier-config-inline {
    justify-content: flex-start;
  }

  .polier-button-stack {
    width: 100%;
  }
}

.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #d9e0ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(18, 35, 68, 0.06);
  flex: 1 1 auto;
  min-height: 0;
}

.normal-table-notes {
  display: grid;
  gap: 0.6rem;
  padding: 0.7rem;
  border-bottom: 1px solid #d9e0ee;
  position: sticky;
  left: 0;
}

.normal-table-note {
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
}

.normal-table-note h3 {
  margin: 0 0 0.35rem;
  font-size: 0.96rem;
}

.normal-table-note p {
  margin: 0.22rem 0;
  line-height: 1.38;
}

.normal-table-note-yellow {
  background: #fff3a8;
  border-color: #ebd465;
  color: #463700;
}

.normal-table-note-khaki {
  background: #FDEADA;
  border-color: #b5af7e;
  color: #2f2a10;
}

.normal-table-note-alert {
  margin: 0;
  color: #b31313;
  font-weight: 700;
}

.render-limit-panel {
  position: sticky;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border-top: 1px solid #d9e0ee;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fd 100%);
  color: #42526e;
  font-size: 0.92rem;
}

.render-limit-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #5c6b82;
  font-size: 0.86rem;
}

.render-limit-control select {
  min-width: 72px;
  padding: 0.35rem 0.55rem;
  border: 1px solid #c7d3e6;
  border-radius: 8px;
  background: #fff;
  color: #1f2f52;
  font: inherit;
}

/* Main dashboard calendar view */

.calendar-wrap {
  border: 1px solid #d9e0ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(18, 35, 68, 0.06);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem;
  border-bottom: 1px solid #dfe7f7;
  background: #f7faff;
}

.calendar-toolbar-left,
.calendar-toolbar-center,
.calendar-toolbar-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.calendar-toolbar-left {
  display: inline-flex;
  gap: 0.35rem;
  flex: 1 1 0;
}

.calendar-toolbar-center {
  flex: 0 1 auto;
  justify-content: center;
}

.calendar-toolbar-right {
  flex: 1 1 0;
  justify-content: flex-end;
}

.calendar-toolbar-left .button.is-active {
  background: #1454e6;
  color: #fff;
  border-color: #1454e6;
}

.calendar-toolbar .button.is-active {
  background: #1454e6;
  color: #fff;
  border-color: #1454e6;
}

.calendar-toolbar strong {
  margin: 0;
  color: #1f2f52;
  text-transform: capitalize;
}

.calendar-period-label {
  white-space: nowrap;
}

.calendar-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #e3e9f7;
  overflow: hidden;
}

.calendar-grid.is-hide-weekends {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.calendar-grid.is-month {
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
}

.calendar-grid.is-week {
  grid-template-rows: auto minmax(0, 1fr);
}

.calendar-weekday {
  background: #f3f6fe;
  padding: 0.45rem;
  font-weight: 700;
  color: #1f2f52;
  text-align: center;
}

.calendar-day {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.4rem;
  gap: 0.35rem;
  overflow: hidden;
}

.calendar-day.is-outside-month {
  background: #f8faff;
}

.calendar-day.is-today {
  box-shadow: inset 0 0 0 2px #2f61d6;
}

.calendar-day.is-today .calendar-day-head {
  color: #123b8e;
}

.calendar-day-head {
  font-weight: 700;
  color: #2d416f;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.calendar-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.calendar-entry {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #d8e0ee;
  background: #f3f6fe;
  color: #1f2f52;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2vh;
}

.calendar-entry-code {
  font-weight: 700;
  line-height: 1.15;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-entry.status-open {
  background: #edf3ff;
  color: #1b4dba;
  border-color: #c9d8f8;
}

.calendar-entry.status-overdue {
  background: #ffebeb;
  color: #b11717;
  border-color: #f4c2c2;
}

.calendar-entry.status-ok {
  background: #ecf9ef;
  color: #1c6f35;
  border-color: #bfe3c9;
}

.calendar-entry.status-late {
  background: #fff7e8;
  color: #8a5a00;
  border-color: #f0ddaf;
}

.calendar-entry.status-ok-dark {
  background: #d9f2df;
  color: #14532d;
  border-color: #9ad0ab;
}

.calendar-entry.status-manufacturer {
  background: #dcefe3;
  color: #164f2a;
  border-color: #95c3a7;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  --header-row-height: 42px;
  color: var(--navy-800);
}

thead {
  position: relative;
  z-index: 30;
}

th,
td {
  border: 1px solid #e3e9f4;
  padding: 0.55rem;
  text-align: left;
  vertical-align: middle;
}

.table-head-etappencode {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.table-head-toggle {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--blue-700);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}

.table-head-toggle:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.tree-expand-all {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--blue-700);
  border-radius: 6px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.tree-group:hover .tree-expand-all,
.tree-group.is-expanded .tree-expand-all {
  opacity: 1;
}

.tree-expand-all:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
  opacity: 1;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
}

td {
  background-clip: padding-box;
}

th {
  background: linear-gradient(180deg, #f3f7ff 0%, #e7eefb 100%);
  position: sticky;
  z-index: 10;
  padding-top: 0;
  padding-bottom: 0;
  height: var(--header-row-height);
}

thead tr:first-child th {
  top: 0;
  z-index: 12;
}

thead tr:first-child th:first-child {
  z-index: 14;
  background: linear-gradient(180deg, #f3f7ff 0%, #e7eefb 100%);
  opacity: 1;
}

thead th:first-child {
  z-index: 13;
  box-shadow: 2px 0 0 #dfe7f3;
}

thead tr:first-child th[rowspan='2'] {
  height: calc(var(--header-row-height) * 2 - 1px);
}

thead tr:nth-child(2) th {
  top: calc(var(--header-row-height) - 1px);
  z-index: 11;
}

tbody tr:nth-child(odd) {
  background: #fbfdff;
}

tbody td:first-child {
  z-index: 1;
  background: #fbfdff;
  box-shadow: 2px 0 0 #dfe7f3;
}

tbody tr:nth-child(even) td:first-child {
  background: #fff;
}

tbody tr:hover {
  background: #f3f7ff;
}

.tree-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: calc(var(--tree-depth, 0) * 16px);
  min-height: 30px;
}

.tree-toggle {
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--blue-700);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  min-width: 24px;
}

.tree-toggle:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.tree-spacer {
  display: inline-block;
  width: 24px;
}

.tree-group td {
  background: #edf4ff;
  border-top-color: #cfdcf1;
  border-bottom-color: #cfdcf1;
  padding-top: 0;
  padding-bottom: 0;
  height: var(--group-sticky-row-height);
}

tbody tr.tree-group,
tbody tr.tree-group:nth-child(odd),
tbody tr.tree-group:nth-child(even),
tbody tr.tree-group:hover {
  background: #edf4ff;
}

tbody tr.tree-group td,
tbody tr.tree-group td:first-child,
tbody tr.tree-group:nth-child(odd) td,
tbody tr.tree-group:nth-child(even) td,
tbody tr.tree-group:hover td {
  background: #edf4ff;
}

.tree-group td:first-child {
  background: #edf4ff;
}

.tree-group.is-expanded td {
  position: sticky;
  top: calc(var(--group-sticky-top, calc(var(--header-row-height) * 2 - 1px)) - 1px);
  z-index: 2;
  background: #edf4ff;
  box-shadow: 0 1px 0 #cfdcf1, 0 -1px 0 #edf4ff;
}

.tree-group.is-expanded td:first-child {
  z-index: 3;
}

.tree-group.is-expanded.is-stuck td {
  z-index: 8;
}

.tree-group.is-expanded.is-stuck td:first-child {
  z-index: 9;
}

.table-wrap {
  --group-sticky-row-height: 32px;
}

.tree-group .tree-cell {
  position: relative;
  font-weight: 700;
  color: var(--blue-700);
  min-height: calc(var(--group-sticky-row-height) - 2px);
}

.tree-group .tree-cell::before {
  content: '';
  position: absolute;
  left: calc(var(--tree-depth, 0) * 16px - 8px);
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #d1def9;
}

.tree-leaf .tree-label {
  font-family: Consolas, monospace;
  color: var(--navy-700);
  font-size: 0.92rem;
}

.manual-assignment-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.35rem;
  border: 1px solid #bfe3c9;
  border-radius: 999px;
  background: #ecf9ef;
  color: #1c6f35;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.tree-label-button {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  width: auto;
  min-height: auto;
  cursor: pointer;
}

.cell-value.tree-label-button {
  justify-content: flex-start;
}

.tree-label-button:hover {
  color: #0f4fc5;
  text-decoration: underline;
}

.process-find {
  margin-left: 0.35rem;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #bfd0f5;
  background: #ffffff;
  color: #1849b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
}

.process-find:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.polier-process-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.polier-process-cell .tree-label {
  display: inline-block;
  min-width: 0;
}

.polier-process-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.polier-process-actions .process-find {
  margin-left: 0;
}

td.polier-order-process-code-cell {
  min-width: max-content;
}

.polier-order-process-code-cell .polier-process-cell {
  justify-content: flex-start;
}

.polier-order-process-code-cell .cell-value.tree-label {
  width: auto;
  white-space: nowrap;
}

.tree-leaf td:first-child {
  background: #fbfdff;
}

tbody tr.tree-leaf.is-group-highlight td:first-child {
  background-color: var(--group-highlight-bg, #dfe9ff) !important;
  background-image: none;
  box-shadow: inset 4px 0 0 var(--group-highlight-color, #1d57d8);
}

tbody tr.tree-leaf.is-group-highlight.is-group-highlight-dual td:first-child {
  background-image: linear-gradient(135deg,
      var(--group-highlight-bg, #eef4ff) 0%,
      var(--group-highlight-bg, #eef4ff) 50%,
      var(--group-highlight-bg-secondary, #f6edff) 50%,
      var(--group-highlight-bg-secondary, #f6edff) 100%) !important;
  background-color: transparent !important;
  box-shadow: inset 4px 0 0 var(--group-highlight-color, #1d57d8);
}

.cell-value {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0.38rem 0.52rem;
  border: 1px solid #e1e8f6;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2f52;
}

.cell-date {
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  background: #f7faff;
}

.cell-date .version-link {
  width: 100%;
  text-align: center;
}

.cell-comment {
  background: #f8fbff;
}

.cell-empty {
  color: #8b95ab;
}

.cell-not-delivered {
  background: #f2f5fb;
  border-color: #d8e0ee;
}

.cell-delivered-ok {
  background: #ecf9ef;
  border-color: #bfe3c9;
  color: #1c6f35;
}

.cell-delivered-late {
  background: #fff7e8;
  border-color: #f0ddaf;
  color: #8a5a00;
}

.remain-positive {
  background: #eef9f0;
  color: #1f6b2f;
  border-color: #c7e8cf;
}

.remain-warning {
  background: #fff7e8;
  color: #8a5a00;
  border-color: #f0ddaf;
}

.remain-negative {
  background: #ffeded;
  color: #a91b1b;
  border-color: #f3c3c3;
}

.remaining-pair {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.remaining-pair .cell-value {
  width: auto;
  min-width: 54px;
  justify-content: center;
}

.remaining-separator {
  color: #6f7f9f;
  font-weight: 700;
}

.adjust-date-row {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.comment-edit-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.comment-edit-row input[type='text'] {
  min-width: 110px;
  flex: 1 1 140px;
}

.comment-shortcut-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.comment-input-combobox {
  position: relative;
  flex: 1 1 180px;
  min-width: 110px;
}

.comment-display-button {
  width: 190px;
  min-width: 120px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--navy-700);
  cursor: text;
  font: inherit;
  line-height: normal;
  padding: 0.42rem 0.5rem;
  text-align: left;
  white-space: normal;
}

.comment-display-button:hover,
.comment-display-button:focus {
  border-color: #b8caef;
  background: #edf3ff;
  outline: none;
}

.comment-display-button.cell-empty {
  color: #8a96aa;
  font-style: italic;
}

@media print {
  .comment-display-button.cell-empty {
    color: transparent;
  }
}

.comment-shortcut-row input[type='text'] {
  width: 100%;
}

.comment-shortcut-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(18, 35, 68, 0.12);
}

.comment-shortcut-action {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--blue-700);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
}

.comment-shortcut-action:hover {
  background: #dfe9ff;
  border-color: #9fb8ee;
}

.comment-edit-row .adjust-date-row {
  margin-top: 0;
  flex: 0 0 auto;
}

.comment-edit-row .adjust-date-row input[type='date'] {
  min-width: 116px;
  max-width: 124px;
}

.adjust-date-row input[type='date'].input-locked,
.version-table input[type='date'].input-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Floor plan file list (matched files from folder scan) */
.floor-file-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.floor-file-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #4a5568;
  overflow: hidden;
}

.floor-file-item::before {
  content: '📄';
  flex-shrink: 0;
  font-size: 0.72rem;
}

.floor-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
  min-width: 0;
}

.floor-file-date {
  white-space: nowrap;
  color: #718096;
  flex-shrink: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d8e0ee;
  font-size: 0.82rem;
  font-weight: 700;
}

.status-ok {
  background: #ecf9ef;
  color: #1c6f35;
  border-color: #bfe3c9;
}

.status-manufacturer {
  background: #cfead9;
  color: #125126;
  border-color: #7db596;
}

.status-open {
  background: #edf3ff;
  color: #1b4dba;
  border-color: #c9d8f8;
}

.status-late {
  background: #fff7e8;
  color: #8a5a00;
  border-color: #f0ddaf;
}

.status-overdue {
  background: #ffebeb;
  color: #b11717;
  border-color: #f4c2c2;
}

.status-unassigned {
  background: #fff1e8;
  color: #9a3412;
  border-color: #fed7aa;
}

.status-manual-assigned {
  background: #ecf9ef;
  color: #1c6f35;
  border-color: #bfe3c9;
}

.status-rescheduled {
  background: #f0edff;
  color: #5b21b6;
  border-color: #d4c5f9;
}

.status-ok-dark {
  background: #d9f2df;
  color: #14532d;
  border-color: #9ad0ab;
}

input[type='date'],
input[type='text'] {
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  background: var(--surface);
  color: var(--navy-800);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.46rem 2rem 0.46rem 0.65rem;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, #2a4f9c 50%),
    linear-gradient(135deg, #2a4f9c 50%, transparent 50%),
    linear-gradient(to right, #e9effb, #e9effb);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px),
    calc(100% - 2.2rem) 0.25rem;
  background-size: 6px 6px, 6px 6px, 1px calc(100% - 0.5rem);
  background-repeat: no-repeat;
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

select:hover:not(:disabled) {
  border-color: #aac0ef;
  background-color: #fbfdff;
}

input[type='date'] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

input[data-field^='comment_'] {
  min-width: 180px;
  background: #f8fbff;
}

input[type='date']:focus,
input[type='text']:focus,
select:focus {
  outline: none;
  border-color: #8dadf0;
  box-shadow: 0 0 0 3px rgba(76, 123, 224, 0.16);
}

input:disabled {
  background: #f3f6fb;
  color: #58627a;
  border-color: #d8e0ee;
}

select:disabled {
  background-color: #f3f6fb;
  color: #58627a;
  border-color: #d8e0ee;
  background-image:
    linear-gradient(45deg, transparent 50%, #90a0c2 50%),
    linear-gradient(135deg, #90a0c2 50%, transparent 50%),
    linear-gradient(to right, #e5ebf6, #e5ebf6);
}

.tree-group td[data-group-filler] {
  background: linear-gradient(90deg, #f3f7ff 0%, #f8fbff 100%);
}

.polier-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.polier-check-label input[type='checkbox'] {
  accent-color: #1d57d8;
}

.polier-check-label.is-disabled {
  color: #8b95ab;
}

.polier-order-config-modal {
  width: min(1200px, 96vw);
  max-width: 96vw;
}

.polier-order-bauteil-picker {
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.polier-order-bauteil-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.polier-order-override-note {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  color: #1849b8;
}

td.polier-order-kind-cell.polier-order-red {
  background: #ffebeb;
}

td.polier-order-kind-cell.polier-order-yellow {
  background: #fff7e8;
}

td.polier-order-kind-cell.polier-order-green {
  background: #ecf9ef;
}

td.polier-order-kind-cell.polier-order-not-required {
  background: #eceff4;
}

td.polier-order-kind-cell.polier-order-today-first {
  box-shadow: inset 0 3px 0 #1849b8;
}
/* 
.polier-order-edit-modal {
  max-width: 760px;
} */

.polier-order-edit-modal td input[type='date'] {
  margin-right: 0.45rem;
}

.polier-order-clear-button {
  margin-top: 0.3rem;
}

.calendar-order-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  border: 1px solid #d8e0ee;
  border-radius: 8px;
  padding: 0.28rem 0.42rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f2f52;
  background: #f3f6fe;
}

.calendar-order-entry input[type='checkbox'] {
  accent-color: #1d57d8;
}

.calendar-order-entry.polier-order-red {
  background: #ffebeb;
}

.calendar-order-entry.polier-order-yellow {
  background: #fff7e8;
}

.calendar-order-entry.polier-order-green {
  background: #ecf9ef;
}

.error {
  background: #ffe4e4;
  color: #9d0a0a;
  border: 1px solid #ffc9c9;
  border-radius: 6px;
  padding: 0.7rem;
  margin: 0.8rem 0;
}

/* ── 2D Pläne ───────────────────────────────────────── */

/* 2D floor-plan dashboard */

.floor-plan-controls-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
}

.floor-plan-search-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.floor-plan-search-input {
  border: 1px solid #c8d3e8;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  min-width: 200px;
}

.floor-plan-table-wrap {
  overflow-x: auto;
}

.floor-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.floor-plan-table th,
.floor-plan-table td {
  border: 1px solid #d4dced;
  padding: 0.35rem 0.55rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.floor-plan-table thead th {
  background: #eef1f8;
  font-weight: 700;
  color: #1f2f52;
  position: sticky;
  top: 0;
  z-index: 1;
}

.floor-plan-th-group {
  background: #e4eaf7 !important;
  border-bottom: 2px solid #b5c3e0;
}

.floor-plan-th-geschoss,
.floor-plan-th-date {
  background: #f5f7fc !important;
}

.floor-plan-th-soll {
  background: #eef3ff !important;
  color: #1a467a;
}

.floor-plan-th-ist {
  background: #f0fbf2 !important;
  color: #1a5c2e;
}

.floor-plan-td-geschoss {
  text-align: left;
  font-weight: 600;
  color: #1f2f52;
  background: #f9fafd;
}

.floor-plan-td-date {
  color: #444;
  font-variant-numeric: tabular-nums;
}

.floor-plan-td-soll {
  background: #f5f8ff;
  font-variant-numeric: tabular-nums;
  color: #1a467a;
}

.floor-plan-td-ist {
  background: #f5fff7;
}

.floor-plan-date-input {
  border: 1px solid #b5c3e0;
  border-radius: 5px;
  padding: 0.2rem 0.35rem;
  font-size: 0.8rem;
  width: 130px;
  background: #fff;
  color: #333;
}

.floor-plan-date-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.floor-plan-text-input {
  border: 1px solid #b5c3e0;
  border-radius: 5px;
  padding: 0.2rem 0.35rem;
  font-size: 0.8rem;
  width: 110px;
  background: #fff;
  color: #333;
}

.floor-plan-text-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.floor-plan-row:nth-child(even) .floor-plan-td-geschoss,
.floor-plan-row:nth-child(even) .floor-plan-td-date {
  background: #f1f3f9;
}

/* Login and project selection pages */

.login-page {
  overflow: auto;
}

.login-container {
  max-width: 980px;
  justify-content: center;
}

.login-shell {
  display: flex;
  justify-content: center;
}

/* CSV-Änderungen: Bold-Hervorhebung und Filter */
.csv-changed-label {
  font-weight: 700;
  color: #1a3a7a;
}

.csv-changed-row .tree-label {
  font-weight: 700;
}

.csv-changes-date-badge {
  font-size: 0.78em;
  color: #1d57d8;
  background: #e8effe;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  margin-left: 0.25em;
  font-weight: 600;
}

.csv-changes-new-badge {
  font-size: 0.72em;
  font-weight: 700;
  color: #fff;
  background: #16a34a;
  border-radius: 4px;
  padding: 0.05em 0.45em;
  margin-left: 0.2em;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.etappe-change-badge {
  display: inline-block;
  font-size: 0.67em;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  margin-left: 0.3em;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.etappe-change-badge--added {
  background: #d1fae5;
  color: #065f35;
}

.etappe-change-badge--changed {
  background: #fef3c7;
  color: #78350f;
}

.filter-field--compact {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.csv-changes-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.87rem;
  color: #334;
  cursor: pointer;
  user-select: none;
}

/* ── History modal: tab switcher ────────────────────────────── */
.history-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #dde3ee;
}

.history-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.45rem 1.1rem;
  margin-bottom: -2px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.history-tab-btn:hover {
  color: #1a3a7a;
}

.history-tab-btn.active {
  color: #1d57d8;
  border-bottom-color: #1d57d8;
  font-weight: 700;
}

/* ── Neues Bauprogramm view ─────────────────────────────────── */
.bauprogramm-scroll {
  overflow: auto;
  max-height: none;
}

.bauprogramm-group {
  margin-bottom: 1.4rem;
}

.bauprogramm-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: #f0f4ff;
  border-left: 4px solid #1d57d8;
  border-radius: 0 6px 6px 0;
  margin-bottom: 0.3rem;
}

.bauprogramm-group-date {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a3a7a;
}

.bauprogramm-group-file {
  font-size: 0.82rem;
  color: #444;
  background: #dde9ff;
  padding: 0.05em 0.5em;
  border-radius: 4px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.bauprogramm-group-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: #777;
}

.bauprogramm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.bauprogramm-table th {
  text-align: left;
  padding: 0.3rem 0.6rem;
  background: #f7f9fc;
  border-bottom: 1px solid #dde3ee;
  font-weight: 600;
  color: #444;
}

.bauprogramm-table td {
  padding: 0.28rem 0.6rem;
  border-bottom: 1px solid #f0f2f7;
  vertical-align: middle;
}

.bauprogramm-table tr:last-child td {
  border-bottom: none;
}

/* Row background by change type */
.bp-change-added {
  background: #f0fff4;
}

.bp-change-removed {
  background: #fff5f5;
}

.bp-change-date_changed {
  background: #fffbea;
}

/* Type pill */
.bp-type-pill {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bp-type-added {
  background: #d1fae5;
  color: #065f35;
}

.bp-type-removed {
  background: #fee2e2;
  color: #7f1d1d;
}

.bp-type-date_changed {
  background: #fef3c7;
  color: #78350f;
}

.bp-code {
  font-family: monospace;
  font-size: 0.87em;
}

.bp-date {
  color: #555;
  font-variant-numeric: tabular-nums;
}

.login-form-wrap {
  padding: 1.2rem;
}

.login-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: min(520px, 100%);
}

.login-lead {
  margin: 0;
  color: #1d2d4a;
  font-weight: 700;
}

.login-muted {
  margin: 0;
  color: #4f5f80;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.login-form label {
  font-weight: 700;
  color: #1f2f52;
  margin-top: 0.15rem;
}

.login-form button {
  margin-top: 0.65rem;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: #1f2f52;
}

.login-remember input[type='checkbox'] {
  accent-color: #1d57d8;
}

.project-shell {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-list {
  display: grid;
  gap: 0.65rem;
}

.project-card {
  border: 1px solid #d9e0ee;
  border-radius: 10px;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f9fbff;
}

.project-card h2 {
  margin: 0;
  font-size: 1rem;
  color: #1f2f52;
}

.project-card p {
  margin: 0.2rem 0 0;
  color: #4f5f80;
}

.project-card .actions select {
  min-width: 170px;
}

.project-card.is-selected {
  border-color: #2f61d6;
  box-shadow: 0 0 0 2px rgba(47, 97, 214, 0.16);
}

.project-footer-actions {
  display: flex;
  justify-content: flex-end;
}

/* Administration forms and dialogs */

.admin-panel {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #d9e0ee;
  display: grid;
  gap: 0.7rem;
}

.admin-panel-lead {
  margin: 0;
  color: #3e5077;
  font-weight: 600;
}

.admin-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-manage-card {
  background: linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
  border-color: #dbe4f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.admin-panel h2,
.admin-panel h3 {
  margin: 0;
  color: #1f2f52;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid #e2e8f6;
  border-radius: 10px;
  padding: 0.75rem;
  background: #fcfdff;
}

.admin-manage-card label {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 320px);
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.admin-manage-card label>span {
  justify-self: start;
  text-align: left;
}

.admin-manage-card label>input,
.admin-manage-card label>select,
.admin-manage-card label>.password-field {
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: 320px;
}

.admin-manage-card {
  min-width: 0;
}

.admin-form-note {
  margin: 0;
  color: #607196;
  font-size: 0.86rem;
}

.legend-color-chip {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.28);
  margin-right: 0.45rem;
  vertical-align: -0.1rem;
}

.two-week-legend-card {
  padding: 0.75rem 0.85rem;
}

.two-week-legend-title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #1f2f52;
}

.two-week-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0.45rem 0.65rem;
}

.two-week-legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  border: 1px solid rgba(16, 33, 63, 0.2);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.two-week-legend-text {
  width: 100%;
  text-align: center;
  line-height: 1.2;
  font-size: clamp(0.78rem, 1.7vw, 0.92rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.password-field {
  display: block;
}

.password-field input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  background: #f8fbff;
}

.admin-list-head {
  display: flex;
  align-items: end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

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

.admin-popup {
  /* width: min(760px, 92vw); */
  height: auto;
  max-height: 82vh;
}

#twoWeekApp .admin-popup {
  width: min(900px, 94vw);
  overflow:auto
}

#twoWeekApp .process-override-modal {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#twoWeekApp .process-override-modal .component-categories-section {
  min-height: 0;
}

#twoWeekApp .process-override-modal .component-sliders-grid {
  max-height: min(44vh, 520px);
  overflow: auto;
  padding-right: 0.2rem;
}

#twoWeekApp .process-override-modal .component-slider-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0;
  padding: 0.42rem 0.5rem;
}

#twoWeekApp .process-override-modal .slider-header {
  margin-bottom: 0;
  min-width: 0;
}

#twoWeekApp .process-override-modal .slider-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

#twoWeekApp .process-override-modal .process-override-hours-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

#twoWeekApp .process-override-modal .process-override-hours-input {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

#twoWeekApp .process-override-modal .process-override-hours-input span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #4f5f80;
}

#twoWeekApp .process-override-modal .process-override-hours-input input {
  width: 4.8ch;
  min-width: 4.8ch;
  max-width: 4.8ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0.22rem 0.24rem;
  font-size: 0.82rem;
}

#twoWeekApp .process-override-modal .process-override-hours-input input::-webkit-outer-spin-button,
#twoWeekApp .process-override-modal .process-override-hours-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#twoWeekApp .process-override-modal .process-override-hours-input input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#twoWeekApp .process-override-modal .process-override-hours-meta {
  min-width: 34px;
  font-size: 0.8rem;
}

#twoWeekApp .process-override-modal .process-override-hours-row .slider-remove-btn {
  margin-left: 0.15rem;
  padding: 0.2rem 0.35rem !important;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  #app.container {
    max-width: 100%;
    padding: 0.45rem;
  }

  .app-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand menu'
      'meta meta';
    align-items: center;
  }

  .app-header-brand {
    grid-area: brand;
  }

  .app-header-meta {
    grid-area: meta;
  }

  .header-right-tools {
    grid-area: menu;
  }

  .header-erne-logo {
    height: 28px;
  }

  .header-project-title {
    font-size: 1rem;
  }

  .header-username {
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .actions-drawer {
    width: 56px;
  }

  .actions-drawer.is-expanded {
    width: min(300px, calc(100vw - 0.4rem));
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .comment-edit-row {
    flex-wrap: wrap;
  }

  .login-container {
    max-width: 620px;
  }

  .admin-manage-grid {
    grid-template-columns: 1fr;
  }

  .admin-manage-card label {
    grid-template-columns: 1fr;
  }

  .admin-manage-card label>input,
  .admin-manage-card label>select,
  .admin-manage-card label>.password-field {
    justify-self: stretch;
    width: 100%;
  }

  .project-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-card .button {
    width: 100%;
  }

  .calendar-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: none;
    overflow: auto;
  }

  .calendar-grid.is-hide-weekends {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .calendar-toolbar {
    flex-wrap: wrap;
  }

  .calendar-toolbar-left,
  .calendar-toolbar-right,
  .calendar-toolbar-center {
    width: 100%;
  }

  .calendar-toolbar-left {
    flex-wrap: wrap;
  }

  .calendar-toolbar-left .button {
    flex: 1 1 0;
  }

  .calendar-toolbar-center {
    order: 2;
  }

  .calendar-toolbar-right {
    order: 3;
    justify-content: stretch;
  }

  .calendar-toolbar-right .button {
    width: 100%;
  }

  .calendar-weekday {
    display: none;
  }

  .calendar-day {
    min-height: 88px;
    overflow: visible;
  }

  .calendar-day-list {
    overflow: visible;
  }

  .calendar-day.is-outside-month {
    display: none;
  }
}

/* Two-week and day-program planning views */

.two-week-wrap {
  --header-row-height: 38px;
}

.two-week-table {
  width: max-content;
  min-width: 100%;
}

.two-week-table thead tr:first-child th {
  top: 0;
  z-index: 4;
}

.two-week-table thead tr:nth-child(2) th {
  top: calc(var(--header-row-height) - 1px);
  z-index: 3;
}

.two-week-table thead tr:first-child th[rowspan='2'] {
  height: calc(var(--header-row-height) * 2 - 1px);
  z-index: 7;
}

.two-week-table thead tr:first-child th:first-child,
.two-week-table td:first-child {
  min-width: 0;
  width: 1%;
  white-space: nowrap;
  border-right: 3px solid #8ea9df;
}

.two-week-table thead th:first-child,
.two-week-table tbody td:first-child {
  box-shadow: none;
}

.two-week-week-head {
  text-align: center;
  font-weight: 700;
}

.two-week-week-break {
  border-left: 3px solid #93afe5 !important;
}

.two-week-volume-head {
  min-width: 78px;
  width: 78px;
  text-align: center;
}

.two-week-volume-cell {
  min-width: 78px;
  width: 78px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.76rem;
  white-space: nowrap;
  color: #1f2f52;
  background: #f9fbff;
}

.two-week-table tbody td:nth-child(48) {
  border-left: 3px solid #93afe5;
}

.two-week-day-block {
  border-right: 2px solid #bccfee;
}

.two-week-day-block.two-week-day-today {
  background: #fff2bf !important;
  box-shadow: inset 0 0 0 2px #d4b03a;
}

.two-week-day-holiday {
  background: #ffd6d6 !important;
}

.two-week-day-preholiday {
  background: #ffecec !important;
}

.two-week-day-head-content {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.two-week-day-focus {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #bfd0f5;
  background: #ffffff;
  color: #1849b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.two-week-day-focus:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.two-week-tree-cell {
  --tw-level-safe: max(var(--tw-level, 0), 0);
  display: flex;
  align-items: center;
  min-height: 20px;
  padding-left: calc(var(--tw-level-safe) * 0.8rem);
}

.two-week-group-row td {
  background: #f3f7ff;
}

.two-week-group-row.has-override td {
  background: var(--two-week-group-row-bg, #f3f7ff) !important;
  color: var(--two-week-group-row-fg, #10213f);
}

.two-week-group-toggle {
  border: 1px solid #bfd0f5;
  background: #ffffff;
  color: #1849b8;
  font-weight: 700;
  padding: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
}

.two-week-group-toggle:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.two-week-group-toggle-all {
  border: 1px solid #b7c9ea;
  background: #fff;
  color: #1849b8;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  margin-left: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.7;
}

.two-week-group-toggle-all:hover {
  background: #eaf1ff;
  border-color: #8facdf;
  opacity: 1;
}

.two-week-group-fill {
  border-right: 2px solid #bccfee;
  background:
    linear-gradient(to right, transparent calc(50% - 1.5px), #93afe5 calc(50% - 1.5px), #93afe5 calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    #f3f7ff;
}

.two-week-group-row.has-override .two-week-group-fill {
  background: var(--two-week-group-row-bg, #f3f7ff) !important;
  border-right-color: color-mix(in srgb, var(--two-week-group-row-bg, #f3f7ff) 65%, #1f2f52 35%);
}

.two-week-process-row .tree-label {
  font-weight: 600;
}

.two-week-process-code {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 0.45rem;
}

.two-week-group-label {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 0.45rem;
}

.two-week-group-label.has-override {
  color: #0f4c9b;
}

.two-week-process-row .tree-label.has-override {
  color: #0f4c9b;
}

.process-override-badge {
  margin-left: 0.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: #e3efff;
  border: 1px solid #9bb8ec;
  color: #1849b8;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.two-week-process-edit {
  margin-left: 0.4rem;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #bfd0f5;
  background: #ffffff;
  color: #1849b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.two-week-process-find {
  margin-left: 0.4rem;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #bfd0f5;
  background: #ffffff;
  color: #1849b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.two-week-process-find:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.two-week-process-find.has-override {
  background: #e3efff;
  border-color: #7ea6e8;
  color: #123f8f;
}

.two-week-process-edit:hover {
  background: #edf3ff;
  border-color: #9eb8ef;
}

.two-week-process-edit.has-override {
  background: #e3efff;
  border-color: #7ea6e8;
  color: #123f8f;
}

.two-week-hour-head {
  text-align: center;
  font-size: 0;
  min-width: 14px;
  width: 14px;
  padding: 0;
  height: 20px;
}

.two-week-slot {
  min-width: 14px;
  width: 14px;
  text-align: center;
  padding: 0;
  height: 18px;
}

.two-week-slot.two-week-day-today-start,
.two-week-slot.two-week-day-today-end {
  background: transparent;
}

.two-week-slot.two-week-day-today-start {
  border-left: 2px solid #d4b03a;
}

.two-week-slot.two-week-day-today-end {
  border-right: 2px solid #d4b03a;
}

.two-week-mid-break {
  border-left: 1px solid #cfd9ef;
}

.two-week-day-end {
  border-right: 2px solid #bccfee;
}

.two-week-slot.two-week-day-has-entry {
  background: #c7e1ff;
}

.two-week-slot.two-week-day-has-entry.two-week-day-holiday {
  background: #ffd6d6 !important;
}

.two-week-slot.two-week-day-has-entry.two-week-day-preholiday {
  background: #ffecec !important;
}

.two-week-slot.two-week-day-holiday {
  background: #ffd6d6 !important;
}

.two-week-slot.two-week-day-preholiday {
  background: #ffecec !important;
}

.two-week-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  padding: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #d2dcf1;
  background: #f2f5fb;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.two-week-chip.is-plan {
  background: #e5f1ff;
  border-color: #b5d3f6;
  color: #16478a;
}

.two-week-chip.is-schalung {
  background: #fef1de;
  border-color: #f2d4a2;
  color: #7e4b00;
}

.two-week-chip.is-spezial {
  background: #fde8ee;
  border-color: #f0bfd0;
  color: #8f1f4a;
}

.two-week-chip.is-bewehrungsmodell {
  background: #e7f8ee;
  border-color: #bae2ca;
  color: #1e6a3a;
}

.two-week-chip.is-bewehrungsliste {
  background: #f6f0ff;
  border-color: #d8c8f6;
  color: #58349f;
}

.two-week-chip.is-bewehrungskoerbe {
  background: #fcefe7;
  border-color: #efcfba;
  color: #8a4a22;
}

.day-program-toolbar {
  margin-bottom: 0.9rem;
}

.day-program-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.day-program-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.day-program-current {
  min-width: 220px;
  text-align: center;
  color: #163a7b;
}

.day-program-current-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.day-program-date-find {
  min-width: 30px;
  min-height: 30px;
  padding: 0.2rem 0.45rem;
  line-height: 1;
}

.day-program-legend-card {
  margin-bottom: 0.35rem;
}

.day-program-wrap {
  --header-row-height: 38px;
}

#dayProgramApp.container {
  max-width: 100%;
  padding: 0.2rem;
}

.day-program-table {
  width: max-content;
  min-width: 100%;
}

#dayProgramApp .day-program-wrap {
  width: 100%;
}

#dayProgramApp .app-header {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'meta tools'
    'title title';
  align-items: center;
  gap: 0.2rem 0.6rem;
}

#dayProgramApp .app-header-meta {
  grid-area: meta;
  align-self: center;
  text-align: left;
}

#dayProgramApp .header-right-tools {
  grid-area: tools;
  align-self: start;
}

#dayProgramApp .app-header-title {
  grid-area: title;
  min-width: 0;
}

#dayProgramApp .app-header-title .title-with-icon {
  margin: 0;
}

#dayProgramApp .day-program-table {
  width: 100%;
  table-layout: fixed;
}

#dayProgramApp .day-program-toolbar {
  margin-bottom: 0.35rem;
  gap: 0.35rem;
  padding: 0.25rem;
}

#dayProgramApp .day-program-table th,
#dayProgramApp .day-program-table td {
  padding: 0.06rem;
}

#dayProgramApp .two-week-tree-cell {
  padding-left: calc(max(var(--tw-level, 0), 0) * 0.35rem);
}

#dayProgramApp .day-program-table thead tr:first-child th:first-child,
#dayProgramApp .day-program-table tbody td:first-child {
  width: calc(16ch + 0.5rem);
  min-width: calc(16ch + 0.5rem);
  max-width: calc(16ch + 0.5rem);
}

#dayProgramApp .day-program-table .tree-label {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

.day-program-head {
  text-align: center;
}

.day-program-head-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.day-program-head-content .day-program-date-find {
  min-width: 24px;
  min-height: 24px;
  padding: 0.08rem 0.28rem;
  font-size: 0.74rem;
}

.day-program-empty {
  text-align: center;
  color: #5d6a83;
}

/* Component Config Modal - Slider UI */
.component-categories-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #d0d8e8;
}

.component-section-title {
  font-size: 1rem;
  margin: 1rem 0 0.8rem;
  color: #222;
  font-weight: 600;
}

.component-add-category {
  margin-bottom: 1.2rem;
}

.component-add-category-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.component-add-category-row .button {
  white-space: nowrap;
}

.component-add-category select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #d0d8e8;
  border-radius: 4px;
  /* font-size: 0.95rem; */
  background-color: #fff;
  cursor: pointer;
}

.component-add-category select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  color: #888;
}

.admin-form input[type='color'] {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cdd8ee;
  border-radius: 8px;
  padding: 0.2rem;
  background: #fff;
}

.process-override-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
}

.process-override-code-picker {
  grid-column: 1 / -1;
}

.process-override-selected-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.35rem;
  border: 1px solid #d6e2f8;
  border-radius: 9px;
  background: #f8fbff;
}

.process-override-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #e6efff;
  color: #173d88;
  font-weight: 700;
  font-size: 0.78rem;
}

.process-override-code-chip button {
  min-width: 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1;
}

.process-override-code-options {
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid #d6e2f8;
  border-radius: 9px;
  background: #fff;
}

.process-override-code-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.35rem;
  border-radius: 7px;
}

.process-override-code-option:hover {
  background: #f2f6ff;
}

.process-override-code-option small {
  margin-left: auto;
  color: #1d57d8;
  font-size: 0.72rem;
}

.process-override-favorites-dropdown {
  border: 1px solid #d6deef;
  border-radius: 8px;
  background: #f8fbff;
  margin-bottom: 0.7rem;
}

.process-override-favorites-dropdown>summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #1f2f52;
  padding: 0.55rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.process-override-favorites-dropdown>summary::-webkit-details-marker {
  display: none;
}

.process-override-favorites-dropdown>summary::before {
  content: '▸';
  color: #1849b8;
  font-size: 0.9rem;
}

.process-override-favorites-dropdown[open]>summary::before {
  content: '▾';
}

.process-override-favorites-content {
  padding: 0 0.65rem 0.65rem 0.65rem;
}

.process-override-favorites-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
  margin-bottom: 0.7rem;
}

.process-override-favorite-name,
.process-override-favorite-select {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.process-override-favorite-name input,
.process-override-favorite-select select {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid #d0d8e8;
  border-radius: 4px;
  font-size: 0.95rem;
}

.process-override-hours-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.8rem;
}

.process-override-hours-input {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.process-override-hours-input input {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid #d0d8e8;
  border-radius: 4px;
  font-size: 0.95rem;
}

.process-override-hours-meta {
  min-width: 46px;
  text-align: right;
  font-weight: 700;
  color: #33538f;
}

.component-sliders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.component-slider-item {
  background: #f8f9fc;
  border: 1px solid #e0e6f0;
  border-radius: 6px;
  padding: 0.8rem;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}

.slider-order-controls {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.slider-order-btn {
  padding: 0.3rem 0.4rem !important;
  font-size: 0.8rem;
  min-height: auto !important;
  height: auto;
  line-height: 1;
}

.slider-label {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}

.slider-label::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: currentColor;
  flex-shrink: 0;
}

.slider-remove-btn {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.9rem;
  min-height: auto !important;
  height: auto;
  flex-shrink: 0;
}

.slider-control {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.component-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #b5d3f6, #1f6a3c);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.component-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4a90e2;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s;
}

.component-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.4);
}

.component-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4a90e2;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s;
}

.component-slider::-moz-range-thumb:hover {
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.4);
}

.component-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider-value-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 84px;
  justify-content: flex-end;
  color: #1f2f52;
  font-weight: 700;
}

.slider-value-input {
  width: 64px;
  min-width: 64px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.component-percent-sum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.6rem;
  background: #f0f6ff;
  border-left: 3px solid #4a90e2;
  border-radius: 4px;
  font-size: 0.95rem;
}

.component-percent-sum.is-invalid {
  background: #fff5f5;
  border-left-color: #d9534f;
}

.warn-text {
  color: #d9534f;
  font-weight: 600;
  font-size: 0.85rem;
}

.config-categories-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.config-category-tag {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Compact layout for selected categories in component config modal */
#twoWeekApp .component-config-modal .component-add-category {
  margin-bottom: 0.75rem;
}

#twoWeekApp .component-config-modal {
  width: min(1040px, 96vw);
  max-height: 92vh;
  padding: 2.4rem 1rem 1rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
#twoWeekApp .admin-form.component-select {
  flex-direction: row;
  justify-content: space-around;
}
#twoWeekApp .component-config-modal h2 {
  font-size: 1.16rem;
  color: #163b83;
}

#twoWeekApp .component-config-modal .login-muted {
  margin-top: -0.15rem;
  color: #4d628d;
}

#twoWeekApp .component-config-modal .admin-form.component-config-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 0.65rem;
  border: 1px solid #d5e1f8;
  background: #f4f8ff;
}

#twoWeekApp .component-config-modal .admin-form.component-config-targets label {
  display: grid;
  gap: 0.24rem;
}

#twoWeekApp .component-config-modal .admin-form.component-config-targets label > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2f52;
}

#twoWeekApp .component-config-modal .admin-form.component-config-targets select {
  min-height: 38px;
  border-radius: 9px;
  border-color: #bcd0f4;
  background: #ffffff;
}

#twoWeekApp .component-config-modal .component-categories-section {
  margin-top: 0.95rem;
  padding: 0.9rem;
  border-radius: 12px;
  border: 1px solid #d8e3f8;
  background: #fbfdff;
}

#twoWeekApp .component-config-modal .component-section-title {
  margin-top: 0;
  color: #173d88;
  font-size: 1.02rem;
}

#twoWeekApp .component-config-modal .component-add-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: stretch;
}

#twoWeekApp .component-config-modal .component-action-card {
  border: 1px solid #d6e2f8;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-radius: 10px;
  padding: 0.52rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: end;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#twoWeekApp .component-config-modal .component-action-card:hover {
  border-color: #a9c3ef;
  box-shadow: 0 3px 10px rgba(20, 73, 184, 0.08);
}

#twoWeekApp .component-config-modal .component-action-card label {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

#twoWeekApp .component-config-modal .component-action-card label > span,
#twoWeekApp .component-config-modal .component-action-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1f2f52;
  line-height: 1.1;
}

#twoWeekApp .component-config-modal .component-action-card .button {
  min-height: 34px;
  padding: 0.32rem 0.56rem;
  font-size: 0.8rem;
}

#twoWeekApp .component-config-modal .component-action-card-create {
  grid-template-columns: 1fr;
  align-content: space-between;
}

#twoWeekApp .component-config-modal .component-action-card-create .button {
  width: 100%;
}

#twoWeekApp .component-config-modal .component-action-card select {
  min-width: 0;
  width: 100%;
}

#twoWeekApp .component-config-modal .component-sliders-grid {
  gap: 0.62rem;
  margin-bottom: 0.8rem;
  max-height: min(34vh, 360px);
  overflow: auto;
  padding-right: 0.2rem;
}

#twoWeekApp .component-config-modal .component-slider-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.15fr);
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.58rem 0.62rem;
  border-radius: 9px;
  border: 1px solid #d8e4fa;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

#twoWeekApp .component-config-modal .slider-header {
  margin-bottom: 0;
  gap: 0.35rem;
}

#twoWeekApp .component-config-modal .slider-order-controls {
  gap: 0.2rem;
}

#twoWeekApp .component-config-modal .slider-order-btn {
  padding: 0.2rem 0.3rem !important;
  font-size: 0.72rem;
}

#twoWeekApp .component-config-modal .slider-remove-btn {
  padding: 0.2rem 0.35rem !important;
  font-size: 0.8rem;
}

#twoWeekApp .component-config-modal .slider-label {
  font-size: 0.88rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#twoWeekApp .component-config-modal .slider-control {
  gap: 0.5rem;
}

#twoWeekApp .component-config-modal .component-slider {
  min-width: 0;
}

#twoWeekApp .component-config-modal .slider-value-input-wrap {
  min-width: 72px;
  gap: 0.25rem;
}

#twoWeekApp .component-config-modal .slider-value-input {
  width: 56px;
  min-width: 56px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

#twoWeekApp .component-config-modal .component-percent-sum {
  margin: 0.72rem 0;
  padding: 0.5rem 0.62rem;
  font-size: 0.9rem;
  border-radius: 8px;
  border-left-width: 4px;
}

#twoWeekApp .component-config-modal .config-categories-preview {
  gap: 0.35rem;
}

#twoWeekApp .component-config-modal .config-category-tag {
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  font-size: 0.76rem;
  line-height: 1.2;
  border: 1px solid rgba(16, 33, 63, 0.2);
}

#twoWeekApp .component-config-modal .history-table-wrap th,
#twoWeekApp .component-config-modal .history-table-wrap td {
  padding: 0.45rem 0.5rem;
}

#twoWeekApp .component-config-modal .component-delete-select {
  width: min(260px, 100%);
  min-width: 0;
  font-size: 0.84rem;
  padding-top: 0.36rem;
  padding-bottom: 0.36rem;
}

@media (max-width: 980px) {
  #twoWeekApp .component-config-modal .admin-form.component-config-targets {
    grid-template-columns: 1fr;
  }

  #twoWeekApp .process-override-modal .component-slider-item {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }

  #twoWeekApp .process-override-modal .process-override-hours-row {
    justify-content: flex-start;
  }

  #twoWeekApp .component-config-modal .component-add-actions {
    grid-template-columns: 1fr;
  }

  #twoWeekApp .component-config-modal .component-action-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #twoWeekApp .component-config-modal .component-slider-item {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }

  #twoWeekApp .component-config-modal .slider-header {
    margin-bottom: 0.25rem;
  }
}

@media (max-width: 768px) {
  #twoWeekApp .component-config-modal {
    width: min(98vw, 1040px);
    max-height: 95vh;
    padding: 2.3rem 0.72rem 0.72rem 0.72rem;
  }

  #twoWeekApp .process-override-modal {
    width: min(98vw, 980px);
    max-height: 95vh;
    padding: 2.4rem 0.75rem 0.75rem 0.75rem;
  }

  #twoWeekApp .process-override-modal .component-sliders-grid {
    max-height: min(46vh, 460px);
  }

  .process-override-favorites-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .component-add-category-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #twoWeekApp .component-config-modal .component-action-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .component-sliders-grid {
    grid-template-columns: 1fr;
  }

  .component-slider {
    width: 100%;
  }

  .slider-control {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .slider-value-input-wrap {
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  #dayProgramApp .app-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'meta menu'
      'title title';
    gap: 0.3rem;
  }

  #dayProgramApp .app-header-meta {
    grid-area: meta;
    text-align: left;
  }

  #dayProgramApp .header-right-tools {
    grid-area: menu;
    justify-self: end;
    gap: 0.25rem;
  }

  #dayProgramApp .app-header-title {
    grid-area: title;
  }

  #dayProgramApp.container {
    padding: 0.1rem;
  }

  #dayProgramApp .header {
    margin-bottom: 0.45rem;
  }

  #dayProgramApp .title-with-icon {
    gap: 0.35rem;
  }

  #dayProgramApp .title-icon {
    height: 20px;
  }

  #dayProgramApp .header-project-title {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  #dayProgramApp .header-erne-logo {
    height: 22px;
  }

  #dayProgramApp .day-program-toolbar {
    margin-bottom: 0.25rem;
    gap: 0.25rem;
    padding: 0.15rem;
  }

  #dayProgramApp .day-program-nav,
  #dayProgramApp .view-toggle-button {
    width: 100%;
    justify-content: center;
    gap: 0.35rem;
  }

  #dayProgramApp .day-program-current {
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.2;
  }

  #dayProgramApp .day-program-current-label {
    gap: 0.28rem;
  }

  #dayProgramApp .day-program-date-find {
    min-width: 26px;
    min-height: 26px;
    padding: 0.16rem 0.32rem;
    font-size: 0.75rem;
  }

  #dayProgramApp .day-program-head-content .day-program-date-find {
    min-width: 22px;
    min-height: 22px;
    padding: 0.05rem 0.22rem;
    font-size: 0.7rem;
  }

  #dayProgramApp .day-program-nav .button,
  #dayProgramApp .view-toggle-button {
    min-height: 32px;
    padding: 0.2rem 0.35rem;
    font-size: 0.78rem;
  }

  #dayProgramApp .view-toggle-button {
    width: 100%;
  }

  #dayProgramApp .two-week-legend-card {
    padding: 0.35rem 0.4rem;
  }

  #dayProgramApp .two-week-legend-title {
    margin-bottom: 0.3rem;
    font-size: 0.86rem;
  }

  #dayProgramApp .two-week-legend-grid {
    gap: 0.3rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  }

  #dayProgramApp .two-week-legend-item {
    min-height: 1.6rem;
    padding: 0.18rem 0.32rem;
    border-radius: 6px;
  }

  #dayProgramApp .two-week-legend-text {
    font-size: 0.72rem;
  }

  #dayProgramApp .day-program-table {
    min-width: 100%;
  }

  #dayProgramApp .day-program-table thead tr:first-child th:first-child,
  #dayProgramApp .day-program-table tbody td:first-child {
    width: calc(16ch + 0.5rem);
    min-width: calc(16ch + 0.5rem);
    max-width: calc(16ch + 0.5rem);
  }

  #dayProgramApp .day-program-table th,
  #dayProgramApp .day-program-table td {
    padding: 0.04rem;
  }

  .two-week-volume-head,
  .two-week-volume-cell {
    min-width: 68px;
    width: 68px;
    font-size: 0.72rem;
  }

  #dayProgramApp .day-program-table .tree-label {
    font-size: 0.72rem;
  }

  #dayProgramApp .two-week-hour-head {
    min-width: 10px;
    width: 10px;
    height: 18px;
  }

  #dayProgramApp .two-week-slot {
    min-width: 10px;
    width: 10px;
    height: 16px;
  }

  #dayProgramApp .two-week-chip {
    min-width: 8px;
    width: 8px;
    height: 8px;
  }
}