:root {
  color-scheme: light;
  --bg: #cfeee6;
  --shell: #f8f8f8;
  --surface: #ffffff;
  --surface-2: #f2f5f3;
  --text: #18352d;
  --muted: #6e7f79;
  --line: #edf1ef;
  --brand: #2f8a70;
  --brand-dark: #2b8068;
  --brand-2: #dff3eb;
  --danger: #b42318;
  --success: #167348;
  --shadow: 0 14px 36px rgba(31, 76, 63, 0.12);
  --deep-shadow: 0 22px 50px rgba(24, 61, 48, 0.18);
}

* {
  box-sizing: border-box;
}

/* Safety net only: prevents a 1-2px phantom horizontal scrollbar caused by the off-canvas
   drawer sidebar (position:fixed + transform, translated off the left edge) from ever showing.
   Nothing visible relies on this space - real horizontal scrolling (tables, wide reports) uses
   its own .table-scroll container with overflow-x:auto and is unaffected. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  margin: 0;
  background-attachment: fixed;
  background-color: var(--bg);
  background-image: var(--reference-bg, none);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  padding: 26px;
}

body.is-locked {
  overflow: hidden;
}

body.is-locked #app-shell {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 52px);
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 24px;
  background: var(--shell);
  box-shadow: var(--deep-shadow);
  overflow: hidden;
}

.sidebar {
  background: linear-gradient(180deg, #2f8a70, #28765f);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.brand {
  display: grid;
  gap: 10px;
  align-items: start;
  margin-bottom: 28px;
}

.brand-logo {
  width: 100%;
  height: 68px;
  border-radius: 16px;
  background: #ffffff;
  object-fit: contain;
  padding: 7px;
  box-shadow: 0 8px 20px rgba(15, 65, 49, 0.18);
}

.brand-subtitle {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar .eyebrow {
  color: #bed2c2;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 1.14rem;
  margin-bottom: 0;
}

.version-label {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 4px 0 0;
}

.sidebar-clock {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  display: grid;
  gap: 3px;
  margin: -12px 0 18px;
  padding: 12px 14px;
}

.sidebar-clock strong {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.sidebar-clock span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.45rem);
  line-height: 1.08;
  margin-bottom: 0;
}

h3 {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 0;
}

.nav-tabs {
  display: grid;
  gap: 9px;
}

.nav-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 10px 0 6px;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: auto;
  padding-top: 16px;
}

.sidebar-footer strong {
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.35;
}

.sidebar-footer span {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.sidebar-footer a {
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

@media (max-height: 1000px) and (min-width: 681px) {
  body {
    padding-bottom: 12px;
    padding-top: 12px;
  }

  .app-shell {
    min-height: calc(100vh - 24px);
  }

  .sidebar {
    padding: 12px 16px;
  }

  .brand {
    gap: 4px;
    margin-bottom: 12px;
  }

  .brand-logo {
    height: 50px;
    padding: 4px;
  }

  .brand-subtitle,
  .version-label {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .sidebar-clock {
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 8px 10px;
  }

  .sidebar-clock strong {
    font-size: 0.95rem;
  }

  .sidebar-clock span {
    font-size: 0.66rem;
  }

  .nav-tabs {
    gap: 4px;
  }

  .new-batch-action,
  .nav-tab {
    min-height: 36px;
    padding: 8px 12px;
  }

  .menu-icon {
    border-radius: 7px;
    height: 24px;
    width: 24px;
  }

  .draft-section {
    padding: 8px 0;
  }

  .draft-title {
    margin-bottom: 5px;
  }

  .draft-list {
    gap: 4px;
    max-height: 145px;
    overflow: hidden;
  }

  .draft-item {
    padding: 8px;
  }

  .draft-meta {
    gap: 2px 6px;
    margin: 5px 0;
  }

  .draft-meta dt {
    font-size: 0.54rem;
  }

  .draft-meta dd,
  .draft-open-action,
  .draft-continue-action {
    font-size: 0.6rem;
  }

  .draft-open-action,
  .draft-continue-action {
    padding: 5px 3px;
  }

  .nav-divider {
    margin: 5px 0 3px;
  }

  .sidebar-footer {
    font-size: 0.62rem;
    gap: 2px;
    line-height: 1.2;
    padding-top: 7px;
  }

  .sidebar-footer strong {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .sidebar-footer span {
    margin-top: 1px;
  }
}

/* Processing Batch cards always show their full detail (Stage/Status/Input Tea/Current Output/
   Staff) - a previous short-viewport-height rule here used to hide .draft-meta and crush the
   list to 82px to save space, leaving only the batch number/date/button visible. Removed so the
   full card always renders; the list still scrolls independently if there isn't room. */

.new-batch-action {
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 13px 16px;
  background: #ffffff;
  color: var(--brand-dark);
  cursor: pointer;
  display: flex;
  gap: 10px;
  font-weight: 800;
  justify-content: center;
  text-align: left;
  box-shadow: 0 10px 22px rgba(18, 68, 52, 0.14);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-batch-action:hover {
  background: #f3faef;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(18, 68, 52, 0.2);
}

.new-batch-action:active {
  transform: translateY(1px);
}

.new-batch-action.secondary {
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-dark);
}

.draft-section {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin: 8px 0;
  padding: 14px 0;
}

.draft-title {
  color: #bed2c2;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.draft-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: hidden;
}

.draft-item {
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: block;
  padding: 12px;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.draft-item-heading {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.draft-item.active,
.draft-item:hover {
  background: rgba(255, 255, 255, 0.22);
}

.draft-item-text {
  display: grid;
  min-width: 0;
}

.draft-item-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-delete {
  align-items: center;
  background: #f32020;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 30px;
}

.draft-delete:hover {
  background: #c81414;
}

.draft-meta {
  display: grid;
  gap: 4px 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0;
}

.draft-meta div {
  min-width: 0;
}

.draft-meta dt {
  color: inherit;
  font-size: 0.62rem;
  opacity: 0.68;
  text-transform: uppercase;
}

.draft-meta dd {
  font-size: 0.7rem;
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-actions {
  display: flex;
  gap: 5px;
}

.draft-open-action,
.draft-continue-action,
.draft-start-action {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  flex: 1;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 7px 4px;
}

.draft-open-action {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
}

.draft-continue-action {
  background: #fff;
  color: var(--primary);
}

.draft-actions {
  flex-wrap: wrap;
}

.draft-start-action {
  background: #f5c84c;
  color: #3e2b00;
  flex-basis: 100%;
}

.draft-permission-panel {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding: 18px;
}

.draft-permission-panel h3 {
  margin: 0 0 12px;
}

.draft-item small,
.draft-empty {
  color: #bed2c2;
  font-size: 0.78rem;
}

.draft-empty {
  margin: 0;
}

.nav-tab {
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: transparent;
  color: #dbe8dc;
  display: flex;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.94rem;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}

.menu-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  stroke: currentColor;
}

.new-batch-action .menu-icon {
  background: rgba(47, 138, 112, 0.12);
}

.nav-tab.active,
.nav-tab:hover {
  background: #ffffff;
  color: #fff;
}

.nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.nav-tab.active {
  color: var(--brand-dark);
  font-weight: 900;
  box-shadow: inset 4px 0 0 #ffffff, 0 12px 24px rgba(13, 62, 48, 0.18);
}

.nav-tab.active .menu-icon,
.nav-tab:hover .menu-icon {
  background: var(--brand-dark);
  color: #ffffff;
}

.workspace {
  padding: 24px;
  min-width: 0;
  background: #f7f7f7;
}

.session-bar {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.top-program-identity {
  align-items: baseline;
  color: var(--text);
  display: flex;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}

.top-program-identity strong {
  font-size: 0.92rem;
  font-weight: 900;
}

.top-program-identity span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.session-bar span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

#batch-view .page-header {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
}

#batch-view .page-header > div:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#batch-view .page-header .batch-number-display {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#batch-view .header-actions {
  grid-column: 1 / -1;
  justify-self: start;
}

#batch-view .batch-status-display {
  grid-column: 1 / -1;
  justify-self: stretch;
}

#summary-view .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.month-filter {
  min-width: 220px;
}

.summary-header-actions {
  align-items: end;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible;
}

.primary-action,
.ghost-action {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.primary-action {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 138, 112, 0.22);
}

.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(47, 138, 112, 0.3);
}

.ghost-action {
  background: var(--brand-2);
  color: var(--brand-dark);
}

.draft-action {
  background: #fff7d6;
  color: #8a5b00;
}

.ghost-action:hover {
  background: #ccebdf;
  transform: translateY(-1px);
}

.primary-action:active,
.ghost-action:active {
  transform: translateY(1px);
}

.danger-button {
  background: #fff2f0;
  color: var(--danger);
}

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.danger-action:hover {
  border-color: #f2c4c0;
  background: #fff2f0;
  color: var(--danger);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

#stock-view .kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kpi {
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.kpi span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.payable-detail-item {
  display: grid;
  gap: 6px;
}

.payable-detail-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.payable-detail-item strong {
  font-size: 1rem;
  color: var(--text);
}

.kpi strong {
  font-size: 1.28rem;
  color: var(--brand-dark);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.view > .panel,
.view > .kpi-grid {
  margin-bottom: 22px;
}

.view > .panel:last-child,
.view > .kpi-grid:last-child {
  margin-bottom: 0;
}

.panel {
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--deep-shadow);
}

.panel.wide {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-header h3 {
  color: #14233d;
  font-size: 1.3rem;
  font-weight: 900;
}

.batch-section-heading {
  color: #14233d;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0;
}

.panel-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.danger-panel {
  border: 1px solid #f2c4c0;
}

.field-grid {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.field-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wide-field {
  grid-column: 1 / -1;
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.inline-field-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-field-actions select,
.inline-field-actions input {
  flex: 1;
  min-width: 0;
}

.inline-field-actions .ghost-action {
  flex-shrink: 0;
  white-space: nowrap;
}

#salary-lines .inline-field-actions {
  min-width: 220px;
}

#salary-lines .inline-field-actions select {
  min-width: 90px;
}

#salary-lines .inline-field-actions .ghost-action {
  padding: 6px 10px;
  font-size: 0.72rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text);
  background: #f9fbfa;
  transition: all 0.2s ease;
}

input[readonly] {
  background: var(--surface-2);
  color: var(--brand-dark);
  cursor: not-allowed;
  font-weight: 900;
}

input:disabled,
button:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.75;
}

textarea {
  min-height: 92px;
  border-radius: 16px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  outline: 3px solid rgba(31, 107, 67, 0.14);
}

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.factory-line {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

#batch-factory-details {
  display: none;
}

.batch-company-name {
  color: var(--brand-dark);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 6px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.batch-number-display {
  display: inline-block;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-dark);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  box-shadow: var(--shadow);
  justify-self: end;
  white-space: nowrap;
}

.batch-status-display,
.status-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 900;
  justify-content: center;
  padding: 7px 12px;
  text-transform: uppercase;
}

.batch-status-display.draft {
  background: #e3e5e8;
  color: #555b65;
}

.batch-status-display.processing,
.status-badge.processing {
  background: #fff1c7;
  color: #8a5b00;
}

.batch-status-display.completed,
.status-badge.completed {
  background: #d8f7e7;
  color: #087443;
}

.status-badge.payable-paid { background: #d8f7e7; color: #087443; }
.status-badge.payable-partially-paid { background: #dce8ff; color: #244fa1; }
.status-badge.payable-pending-cheque { background: #ece3ff; color: #6336a2; }
.status-badge.payable-unpaid { background: #eceef2; color: #626975; }
.status-badge.payable-not-saved { background: #f1f2f5; color: #8a90a0; font-style: italic; }
.status-badge.payable-requires-review { background: #fff1c7; color: #8a5b00; }

.complete-batch-action {
  background: #087443;
}

.table-scroll {
  overflow-x: auto;
  padding: 0 2px 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

.row-action-cell {
  width: 46px;
  text-align: center;
}

.table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.table-actions .ghost-action {
  padding: 10px 14px;
}

.inactive-row {
  opacity: 0.58;
}

.inactive-row td {
  background: rgba(148, 163, 184, 0.08);
}

th {
  background: var(--surface-2);
  color: #4b5d56;
  font-size: 0.8rem;
}

td input {
  min-width: 96px;
}

.numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.success {
  color: var(--success);
  font-weight: 700;
}

.danger {
  color: var(--danger);
  font-weight: 700;
}

.summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: transparent;
  padding: 16px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fbfa;
  border-radius: 12px;
}

.summary-row span {
  color: var(--muted);
}

.empty-state {
  padding: 28px;
}

.empty-state p {
  color: var(--muted);
  max-width: 620px;
}

.empty-table {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.cost-total-row td {
  background: var(--surface-2);
  border-top: 2px solid var(--line);
}

.modal-backdrop {
  align-items: center;
  background: rgba(12, 25, 16, 0.48);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 20;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(12, 25, 16, 0.24);
  max-width: 460px;
  padding: 22px;
  width: 100%;
}

.modal p {
  color: var(--muted);
}

.password-action-dialog,
.program-message-dialog {
  display: grid;
  gap: 16px;
  max-width: 500px;
  padding: 26px;
}

.dialog-heading {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.dialog-heading h3 {
  color: #16263f;
  font-size: 1.18rem;
  margin-bottom: 4px;
}

.dialog-heading p {
  line-height: 1.45;
  margin: 0;
}

.dialog-icon {
  align-items: center;
  background: #fff1ee;
  border: 1px solid #ffd6cf;
  border-radius: 14px;
  color: var(--danger);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.info-icon {
  background: #eef7ff;
  border-color: #cae3ff;
  color: #4534b5;
}

.dialog-field {
  display: grid;
  gap: 8px;
}

.dialog-field span {
  color: #526078;
  font-size: 0.82rem;
  font-weight: 800;
}

.restore-confirm-field {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  gap: 10px;
}

.restore-confirm-field input {
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

.password-action-dialog input {
  border-color: #dfe6ef;
  font-size: 1rem;
  height: 46px;
  text-align: left;
}

.password-action-dialog input:focus {
  border-color: #4534b5;
  box-shadow: 0 0 0 4px rgba(69, 52, 181, 0.12);
  outline: 0;
}

.danger-action {
  background: #e53935;
  box-shadow: 0 12px 24px rgba(229, 57, 53, 0.2);
  color: #fff;
}

.danger-action:hover {
  background: #c62828;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.startup-overlay {
  align-items: center;
  background: rgba(9, 14, 24, 0.42);
  backdrop-filter: blur(8px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 50;
}

.startup-overlay[hidden],
.startup-card[hidden] {
  display: none;
}

.startup-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(10, 20, 36, 0.28);
  display: grid;
  gap: 16px;
  max-width: 420px;
  padding: 30px;
  text-align: center;
  width: 100%;
}

.startup-logo {
  justify-self: center;
  max-height: 88px;
  max-width: 240px;
  object-fit: contain;
  width: 80%;
}

.startup-card h3 {
  font-size: 1.3rem;
}

.startup-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.loading-track {
  background: #eef1f7;
  border-radius: 999px;
  box-shadow: inset 0 1px 4px rgba(24, 34, 55, 0.14);
  height: 28px;
  overflow: hidden;
}

.loading-fill {
  animation: loading-gradient 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, #2a1b78, #4534b5, #13d5df, #6cf2d4);
  background-size: 220% 100%;
  border-radius: inherit;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: width 0.18s ease;
  width: 0%;
}

.loading-fill::after {
  animation: loading-shine 1.6s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}

@keyframes loading-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes loading-shine {
  to {
    transform: translateX(100%);
  }
}

.password-card input {
  text-align: center;
}

.password-error {
  color: var(--danger) !important;
  font-weight: 800;
  margin: -4px 0 0;
}

.theme-options {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
}

.background-settings {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.background-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.file-action {
  align-items: center;
  background: var(--brand-dark);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
}

.file-action input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.background-preview {
  align-items: center;
  background: #f8fbfa;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  display: flex;
  min-height: 120px;
  overflow: hidden;
  padding: 14px;
}

.background-preview.has-image {
  background-image: var(--reference-bg, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background-preview.has-image span {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  padding: 8px 12px;
}

.bill-search-panel {
  border-top: 1px solid var(--line);
  padding: 18px;
}

.bill-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px;
}

.bill-summary-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.bill-summary-card::after {
  content: "";
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
}

.bill-summary-card.total::after {
  background: #4d8df7;
}

.bill-summary-card.unpaid::after {
  background: #f0a72f;
}

.bill-summary-card.overdue::after {
  background: #e95d66;
}

.bill-summary-icon {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 48px;
  font-size: 0.76rem;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.bill-summary-card.total .bill-summary-icon {
  background: #e5efff;
  color: #2468cf;
}

.bill-summary-card.unpaid .bill-summary-icon {
  background: #fff0d4;
  color: #c77700;
}

.bill-summary-card.overdue .bill-summary-icon {
  background: #ffe5e8;
  color: #c73540;
}

.bill-summary-card small,
.bill-summary-card span {
  color: var(--muted);
  display: block;
  font-weight: 800;
}

.bill-summary-card strong {
  color: var(--brand-dark);
  display: block;
  font-size: 1.55rem;
  margin: 4px 0;
}

.bill-entry-card,
.bill-list-card {
  border-top: 1px solid var(--line);
}

.field-span-two {
  grid-column: span 2;
}

.invoice-customer-details {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 18px 18px;
}

.invoice-customer-details[hidden] {
  display: none;
}

.invoice-customer-details > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.invoice-customer-details span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.invoice-customer-details strong {
  overflow-wrap: anywhere;
}

.invoice-totals-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
}

.invoice-notes-column {
  display: grid;
  gap: 14px;
  align-content: start;
}

.invoice-totals-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 16px;
  align-content: start;
}

.invoice-total-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.invoice-total-row span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.invoice-total-row strong {
  font-size: 1.05rem;
  white-space: nowrap;
}

.invoice-discount-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.invoice-discount-controls input {
  width: 90px;
}

.discount-type-toggle {
  display: flex;
  gap: 4px;
}

.discount-type-button {
  padding: 6px 10px;
}

.discount-type-button.active {
  background: var(--brand);
  color: #fff;
}

.invoice-adjustment-row {
  flex-wrap: wrap;
}

.invoice-adjustment-row input {
  flex: 1;
  min-width: 110px;
}

.invoice-grand-total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.invoice-grand-total strong {
  color: var(--brand-dark);
  font-size: 1.3rem;
}

.invoice-entry-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0 18px 18px;
}

.input-error {
  border-color: var(--danger) !important;
}

.invoice-item-warning-row td {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px 10px;
}

@media (max-width: 900px) {
  .invoice-customer-details,
  .invoice-totals-grid {
    grid-template-columns: 1fr;
  }
}

.search-actions {
  align-items: end;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.invoice-list-overdue-toggle {
  align-items: center;
  align-self: end;
  display: flex !important;
  flex-direction: row;
  gap: 8px;
  padding-bottom: 10px;
}

.invoice-list-overdue-toggle input {
  height: 18px;
  width: 18px;
}

.permission-grid {
  border-top: 1px solid var(--line);
  display: block;
  overflow-x: auto;
  padding: 18px;
}

.permission-matrix {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  width: 100%;
}

.permission-matrix th,
.permission-matrix td {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 14px 12px;
  text-align: center;
}

.permission-matrix thead th {
  background: var(--surface-2);
  color: #526078;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.permission-matrix th:first-child {
  text-align: left;
}

.permission-matrix tbody th {
  font-size: 0.92rem;
  font-weight: 900;
}

.permission-matrix tbody tr:first-child th:first-child,
.permission-matrix tbody tr:first-child td:first-of-type {
  border-top-left-radius: 12px;
}

.permission-matrix input {
  accent-color: var(--primary);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.permission-grid label {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
}

.permission-grid span {
  color: var(--text);
  font-weight: 800;
  line-height: 1.25;
}

.permission-grid input {
  flex: 0 0 auto;
  margin-left: 12px;
}

.permission-matrix input {
  margin-left: 0;
}

.grade-group-row th {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
}

.grade-total-pill {
  display: inline-flex;
  gap: 6px;
  margin-right: 22px;
}

.process-loss-grid {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px;
}

.process-loss-grid > div {
  background: var(--surface-2);
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 14px;
}

.process-loss-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
}

.process-loss-grid strong {
  display: block;
  margin-top: 4px;
}

.stock-section {
  display: none;
}

.stock-section.active {
  display: block;
}

.printing-section {
  display: none;
}

.printing-section.active {
  display: block;
}

.letter-content-field {
  display: block;
  padding: 18px;
}

.letter-content-field textarea {
  min-height: 260px;
  width: 100%;
}

.brand-upload-preview {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
}

#company-logo-preview,
#company-signature-preview {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  min-height: 90px;
  padding: 10px;
  width: 180px;
}

#company-logo-preview img,
#company-signature-preview img {
  max-height: 80px;
  max-width: 160px;
  object-fit: contain;
}

.inactive-row {
  opacity: 0.55;
}

.stock-filters {
  padding: 16px 18px;
}

.field-hint {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: 6px;
}

.field-hint[hidden] {
  display: none;
}

.lock-notice {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 8px;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 14px;
  padding: 10px 14px;
}

.lock-notice[hidden] {
  display: none;
}

.subsection-title {
  padding: 18px 18px 0;
}

.settings-tabs,
.salary-tabs,
.accounting-tabs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 22px;
}

.salary-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.accounting-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-tab,
.salary-tab,
.accounting-tab {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  padding: 13px 14px;
}

.settings-tab.active,
.settings-tab:hover,
.salary-tab.active,
.salary-tab:hover,
.accounting-tab.active,
.accounting-tab:hover {
  background: var(--brand-2);
  color: var(--brand-dark);
}

.settings-tab.active,
.salary-tab.active,
.accounting-tab.active {
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(47, 138, 112, 0.18);
  transform: translateY(-1px);
}

.settings-section,
.salary-section,
.accounting-section {
  display: none;
}

.settings-section.active,
.salary-section.active,
.accounting-section.active {
  display: block;
}

.theme-option {
  align-items: center;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.theme-option input {
  width: auto;
}

.theme-option span {
  display: grid;
  gap: 4px;
}

.theme-option small {
  color: var(--muted);
}

.theme-option.current-theme {
  border-color: rgba(69, 32, 166, 0.3);
  background: #f1edff;
}

.report-action-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
}

.report-group-title {
  font-size: 1.12rem;
  margin: 24px 18px 0;
}

.report-group-title:first-child {
  margin-top: 18px;
}

.report-batch-picker {
  border-top: 1px solid var(--line);
}

.month-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
}

.month-chip {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  padding: 11px 16px;
}

.month-chip.active,
.month-chip:hover {
  background: var(--brand-2);
  color: var(--brand-dark);
}

.panel-header.compact {
  padding-bottom: 10px;
}

.link-action {
  background: transparent;
  border: 0;
  color: var(--brand-dark);
  cursor: pointer;
  font-weight: 900;
  padding: 0;
  text-decoration: underline;
}

.link-action:hover {
  color: var(--brand);
}

.report-action {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: 18px;
  text-align: left;
}

.report-action:hover {
  background: var(--brand-2);
  border-color: transparent;
}

.report-action strong {
  color: var(--brand-dark);
  font-size: 1rem;
}

.report-action span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

body[data-theme="estate"] {
  --bg: #e6eaf2;
  --shell: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --text: #1b233d;
  --muted: #737b92;
  --line: #e7ebf3;
  --brand: #0fb7bf;
  --brand-dark: #18203e;
  --brand-2: #e9fbfb;
  --shadow: 0 16px 36px rgba(25, 34, 63, 0.1);
  --deep-shadow: 0 24px 60px rgba(25, 34, 63, 0.2);
}

body[data-theme="estate"] .app-shell {
  background: #f4f6fb;
}

body[data-theme="estate"] .sidebar {
  background: #ffffff;
  color: #1b233d;
}

body[data-theme="estate"] .sidebar .eyebrow,
body[data-theme="estate"] .draft-title,
body[data-theme="estate"] .draft-item small,
body[data-theme="estate"] .draft-empty {
  color: #8a92a8;
}

body[data-theme="estate"] .brand-logo {
  background: #f0f4ff;
  box-shadow: 0 8px 22px rgba(25, 34, 63, 0.1);
}

body[data-theme="estate"] .new-batch-action {
  background: #18203e;
  color: #ffffff;
}

body[data-theme="estate"] .nav-tab {
  color: #737b92;
}

body[data-theme="estate"] .nav-tab.active,
body[data-theme="estate"] .nav-tab:hover {
  background: #eef3ff;
  color: #18203e;
}

body[data-theme="estate"] .nav-tab.active {
  box-shadow: inset 4px 0 0 #18203e, 0 12px 24px rgba(25, 34, 63, 0.12);
}

body[data-theme="estate"] .draft-section {
  border-color: #eef1f7;
}

body[data-theme="estate"] .draft-item {
  background: #f4f6fb;
  color: #1b233d;
}

body[data-theme="estate"] .draft-item.active,
body[data-theme="estate"] .draft-item:hover {
  background: #eef3ff;
}

body[data-theme="estate"] .workspace {
  background: #f4f6fb;
}

body[data-theme="estate"] .view.active::before {
  background:
    linear-gradient(90deg, rgba(24, 32, 62, 0.96), rgba(24, 32, 62, 0.78)),
    linear-gradient(135deg, rgba(15, 183, 191, 0.35), transparent 42%),
    repeating-linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0 12px, transparent 12px 24px);
  border-radius: 20px;
  box-shadow: var(--shadow);
  content: "";
  display: block;
  height: 136px;
  margin-bottom: -112px;
}

body[data-theme="estate"] .page-header {
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  min-height: 112px;
  padding: 22px 24px;
  position: relative;
  z-index: 1;
}

body[data-theme="estate"] .page-header .eyebrow,
body[data-theme="estate"] .page-header .factory-line {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="estate"] .batch-number-display {
  background: rgba(255, 255, 255, 0.96);
  color: #18203e;
}

body[data-theme="estate"] .primary-action {
  background: #18203e;
}

body[data-theme="estate"] .page-header .primary-action {
  background: #ffffff;
  color: #18203e;
}

body[data-theme="estate"] .page-header .ghost-action {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body[data-theme="estate"] #batch-view .page-header .ghost-action {
  background: #ffffff;
  color: #18203e;
  box-shadow: 0 10px 22px rgba(24, 32, 62, 0.16);
}

body[data-theme="estate"] #batch-view .page-header .draft-action {
  background: #fff3c4;
  color: #725000;
}

body[data-theme="estate"] .kpi,
body[data-theme="estate"] .panel {
  border: 1px solid rgba(231, 235, 243, 0.7);
  box-shadow: var(--shadow);
}

body[data-theme="estate"] .kpi strong {
  color: #18203e;
}

body[data-theme="estate"] input,
body[data-theme="estate"] select,
body[data-theme="estate"] textarea {
  background: #ffffff;
}

body[data-theme="estate"] .settings-tab,
body[data-theme="estate"] .salary-tab,
body[data-theme="estate"] .accounting-tab {
  background: #ffffff;
  color: #737b92;
}

body[data-theme="estate"] .settings-tab.active,
body[data-theme="estate"] .settings-tab:hover,
body[data-theme="estate"] .salary-tab.active,
body[data-theme="estate"] .salary-tab:hover,
body[data-theme="estate"] .accounting-tab.active,
body[data-theme="estate"] .accounting-tab:hover {
  background: #eef3ff;
  color: #18203e;
}

body[data-theme="purple"] {
  --bg: #dde2ea;
  --shell: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5fb;
  --text: #26384d;
  --muted: #8f95a5;
  --line: #edf0f6;
  --brand: #6a4fc4;
  --brand-dark: #4534b5;
  --brand-2: #eeeafd;
  --shadow: 0 18px 42px rgba(61, 57, 108, 0.1);
  --deep-shadow: 0 24px 70px rgba(49, 58, 79, 0.18);
}

body[data-theme="purple"] .app-shell {
  background: #ffffff;
}

body[data-theme="purple"] .sidebar {
  background: #f7f6ff;
  color: #26384d;
  border-right: 1px solid #eaedf5;
}

body[data-theme="purple"] .sidebar .eyebrow,
body[data-theme="purple"] .brand-subtitle,
body[data-theme="purple"] .version-label,
body[data-theme="purple"] .draft-title,
body[data-theme="purple"] .draft-item small,
body[data-theme="purple"] .draft-empty {
  color: #8f95a5;
}

body[data-theme="purple"] .sidebar-footer {
  border-color: #e8e9f3;
  color: #8f95a5;
}

body[data-theme="purple"] .sidebar-footer strong,
body[data-theme="purple"] .sidebar-footer a {
  color: #26384d;
}

body[data-theme="purple"] .sidebar-footer span {
  color: #8f95a5;
}

body[data-theme="purple"] .sidebar-clock {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(61, 57, 108, 0.08);
}

body[data-theme="purple"] .sidebar-clock strong {
  color: #4534b5;
}

body[data-theme="purple"] .sidebar-clock span {
  color: #8f95a5;
}

body[data-theme="purple"] .brand-logo {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(69, 52, 181, 0.14);
}

body[data-theme="purple"] .new-batch-action {
  background: linear-gradient(135deg, #ffbd68, #ffda9a);
  color: #26384d;
}

body[data-theme="purple"] .new-batch-action .menu-icon {
  background: rgba(69, 52, 181, 0.12);
  color: #4534b5;
}

body[data-theme="purple"] .new-batch-action.secondary {
  background: #ffffff;
  color: #4534b5;
}

body[data-theme="purple"] .nav-tab {
  color: #8f95a5;
}

body[data-theme="purple"] .nav-tab.active,
body[data-theme="purple"] .nav-tab:hover {
  background: #eeeafd;
  color: #4534b5;
}

body[data-theme="purple"] .nav-tab .menu-icon {
  background: rgba(69, 52, 181, 0.08);
  color: #8f95a5;
}

body[data-theme="purple"] .nav-tab.active .menu-icon,
body[data-theme="purple"] .nav-tab:hover .menu-icon {
  background: #4534b5;
  color: #ffffff;
}

body[data-theme="purple"] .nav-tab.active {
  box-shadow: inset 4px 0 0 #4534b5, 0 12px 24px rgba(69, 52, 181, 0.14);
}

body[data-theme="purple"] .draft-section {
  border-color: #e8e9f3;
}

body[data-theme="purple"] .nav-divider {
  border-color: #e8e9f3;
}

body[data-theme="purple"] .draft-item {
  background: #ffffff;
  color: #26384d;
  box-shadow: 0 8px 20px rgba(61, 57, 108, 0.08);
}

body[data-theme="purple"] .draft-item.active,
body[data-theme="purple"] .draft-item:hover {
  background: #eeeafd;
}

body[data-theme="purple"] .workspace {
  background: #ffffff;
}

body[data-theme="purple"] .view.active::before {
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.16) 0 86px, transparent 87px),
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.11) 0 180px, transparent 181px),
    linear-gradient(135deg, #4534b5, #9a62d8);
  border-radius: 0;
  box-shadow: none;
  content: "";
  display: block;
  height: 190px;
  margin: -24px -24px -158px;
}

body[data-theme="purple"] .page-header {
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  min-height: 150px;
  padding: 20px 22px;
  position: relative;
  z-index: 1;
}

body[data-theme="purple"] #summary-view .page-header {
  min-height: 150px;
  padding: 22px 28px;
}

body[data-theme="purple"] #summary-view .month-filter {
  color: rgba(255, 255, 255, 0.72);
  justify-self: end;
}

body[data-theme="purple"] #summary-view .primary-action {
  justify-self: end;
  min-width: 192px;
}

body[data-theme="purple"] #batch-view .page-header h2 {
  white-space: nowrap;
}

body[data-theme="purple"] .page-header .eyebrow,
body[data-theme="purple"] .page-header .factory-line {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="purple"] .batch-company-name {
  color: #ffffff;
}

body[data-theme="purple"] .batch-number-display {
  background: rgba(255, 255, 255, 0.96);
  color: #4534b5;
}

body[data-theme="purple"] .page-header .primary-action {
  background: #ffffff;
  color: #4534b5;
}

body[data-theme="purple"] .file-action {
  background: #4534b5;
}

body[data-theme="purple"] .page-header .ghost-action {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="purple"] #batch-view .page-header .ghost-action {
  background: #ffffff;
  color: #4534b5;
  box-shadow: 0 10px 22px rgba(69, 52, 181, 0.16);
}

body[data-theme="purple"] .page-header .draft-action {
  background: #ffd66b;
  color: #2e2350;
}

body[data-theme="purple"] #batch-view .page-header .draft-action {
  background: #ffd66b;
  color: #2e2350;
}

body[data-theme="purple"] .kpi {
  border: 0;
  overflow: hidden;
  position: relative;
}

body[data-theme="purple"] .kpi:nth-child(1) {
  background: linear-gradient(135deg, #e4ffd0, #c9f5de);
}

body[data-theme="purple"] .kpi:nth-child(2) {
  background: linear-gradient(135deg, #ff805c, #ff6f87);
  color: #ffffff;
}

body[data-theme="purple"] .kpi:nth-child(3) {
  background: linear-gradient(135deg, #13d5df, #09c1d0);
  color: #071d2b;
}

body[data-theme="purple"] .kpi:nth-child(4) {
  background: linear-gradient(135deg, #ffffff, #f8f7ff);
}

body[data-theme="purple"] .kpi:nth-child(2) span,
body[data-theme="purple"] .kpi:nth-child(2) strong {
  color: #ffffff;
}

body[data-theme="purple"] .kpi strong {
  color: #0d1c2d;
}

body[data-theme="purple"] .panel {
  border: 0;
  box-shadow: var(--shadow);
}

body[data-theme="purple"] .primary-action {
  background: #4534b5;
}

body[data-theme="purple"] .ghost-action {
  background: #eeeafd;
  color: #4534b5;
}

body[data-theme="purple"] input,
body[data-theme="purple"] select,
body[data-theme="purple"] textarea {
  background: #ffffff;
}

body[data-theme="purple"] .settings-tab,
body[data-theme="purple"] .salary-tab,
body[data-theme="purple"] .accounting-tab {
  background: #ffffff;
  color: #8f95a5;
}

body[data-theme="purple"] .settings-tab.active,
body[data-theme="purple"] .settings-tab:hover,
body[data-theme="purple"] .salary-tab.active,
body[data-theme="purple"] .salary-tab:hover,
body[data-theme="purple"] .accounting-tab.active,
body[data-theme="purple"] .accounting-tab:hover {
  background: #eeeafd;
  color: #4534b5;
}

body[data-theme="venus"] {
  --bg: #075d56;
  --shell: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef9fb;
  --text: #073c38;
  --muted: #8a98ad;
  --line: #e6f0f3;
  --brand: #087066;
  --brand-dark: #075d56;
  --brand-2: #e6f7f5;
  --shadow: 0 18px 42px rgba(4, 63, 58, 0.1);
  --deep-shadow: 0 26px 80px rgba(0, 46, 42, 0.24);
}

body[data-theme="venus"] .app-shell {
  background: #ffffff;
}

body[data-theme="venus"] .sidebar {
  background: #ffffff;
  border-right: 1px solid #e6f0f3;
  color: #073c38;
}

body[data-theme="venus"] .sidebar .eyebrow,
body[data-theme="venus"] .brand-subtitle,
body[data-theme="venus"] .version-label,
body[data-theme="venus"] .draft-title,
body[data-theme="venus"] .draft-item small,
body[data-theme="venus"] .draft-empty {
  color: #8a98ad;
}

body[data-theme="venus"] .sidebar-clock,
body[data-theme="venus"] .draft-item {
  background: #f4fbfd;
  box-shadow: 0 8px 22px rgba(4, 63, 58, 0.06);
}

body[data-theme="venus"] .sidebar-clock strong {
  color: #075d56;
}

body[data-theme="venus"] .sidebar-clock span,
body[data-theme="venus"] .sidebar-footer,
body[data-theme="venus"] .sidebar-footer span {
  color: #8a98ad;
}

body[data-theme="venus"] .sidebar-footer,
body[data-theme="venus"] .draft-section,
body[data-theme="venus"] .nav-divider {
  border-color: #e6f0f3;
}

body[data-theme="venus"] .sidebar-footer strong,
body[data-theme="venus"] .sidebar-footer a {
  color: #073c38;
}

body[data-theme="venus"] .brand-logo {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(4, 63, 58, 0.12);
}

body[data-theme="venus"] .new-batch-action {
  background: #075d56;
  color: #ffffff;
}

body[data-theme="venus"] .new-batch-action.secondary {
  background: #f4fbfd;
  color: #075d56;
}

body[data-theme="venus"] .new-batch-action .menu-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="venus"] .new-batch-action.secondary .menu-icon {
  background: #e6f7f5;
  color: #075d56;
}

body[data-theme="venus"] .nav-tab {
  color: #8a98ad;
}

body[data-theme="venus"] .nav-tab.active,
body[data-theme="venus"] .nav-tab:hover {
  background: #075d56;
  color: #ffffff;
}

body[data-theme="venus"] .nav-tab .menu-icon {
  background: #eef4f6;
  color: #8a98ad;
}

body[data-theme="venus"] .nav-tab.active .menu-icon,
body[data-theme="venus"] .nav-tab:hover .menu-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-theme="venus"] .nav-tab.active {
  box-shadow: 0 12px 26px rgba(7, 93, 86, 0.18);
}

body[data-theme="venus"] .workspace {
  background: #eef9fb;
}

body[data-theme="venus"] .page-header {
  background: #ffffff;
  color: #073c38;
  box-shadow: 0 14px 34px rgba(4, 63, 58, 0.08);
}

body[data-theme="venus"] .page-header .eyebrow,
body[data-theme="venus"] .page-header .factory-line {
  color: #8a98ad;
}

body[data-theme="venus"] .batch-company-name {
  color: #075d56;
}

body[data-theme="venus"] .batch-number-display {
  background: #e6f7f5;
  color: #075d56;
}

body[data-theme="venus"] .primary-action,
body[data-theme="venus"] .file-action {
  background: #075d56;
  color: #ffffff;
}

body[data-theme="venus"] .ghost-action {
  background: #e6f7f5;
  color: #075d56;
}

body[data-theme="venus"] .draft-action {
  background: #fff4bf;
  color: #6c4a00;
}

body[data-theme="venus"] .kpi,
body[data-theme="venus"] .panel {
  border: 1px solid rgba(230, 240, 243, 0.86);
  box-shadow: 0 16px 34px rgba(4, 63, 58, 0.08);
}

body[data-theme="venus"] .kpi strong,
body[data-theme="venus"] .panel-header h3,
body[data-theme="venus"] .batch-section-heading {
  color: #073c38;
}

body[data-theme="venus"] input,
body[data-theme="venus"] select,
body[data-theme="venus"] textarea {
  background: #ffffff;
}

body[data-theme="venus"] .settings-tab,
body[data-theme="venus"] .salary-tab,
body[data-theme="venus"] .accounting-tab {
  background: #ffffff;
  color: #8a98ad;
}

body[data-theme="venus"] .settings-tab.active,
body[data-theme="venus"] .settings-tab:hover,
body[data-theme="venus"] .salary-tab.active,
body[data-theme="venus"] .salary-tab:hover,
body[data-theme="venus"] .accounting-tab.active,
body[data-theme="venus"] .accounting-tab:hover {
  background: #e6f7f5;
  color: #075d56;
}

body[data-theme="sunset"] {
  --bg: #fbc1a0;
  --shell: rgba(255, 255, 255, 0.78);
  --surface: rgba(255, 255, 255, 0.84);
  --surface-2: rgba(255, 247, 232, 0.72);
  --text: #101124;
  --muted: #6f7182;
  --line: rgba(33, 29, 65, 0.12);
  --brand: #22186b;
  --brand-dark: #20145d;
  --brand-2: rgba(255, 255, 255, 0.64);
  --shadow: 0 18px 42px rgba(74, 45, 91, 0.12);
  --deep-shadow: 0 30px 90px rgba(108, 64, 86, 0.22);
  background:
    radial-gradient(circle at 12% 84%, rgba(255, 245, 185, 0.72) 0 120px, transparent 121px),
    radial-gradient(circle at 90% 72%, rgba(255, 127, 104, 0.48) 0 170px, transparent 171px),
    linear-gradient(180deg, #9ec8d6 0%, #f8dac0 45%, #fff3be 72%, #fa8a68 100%);
}

body[data-theme="sunset"] .app-shell {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
}

body[data-theme="sunset"] .sidebar {
  background: rgba(255, 255, 255, 0.72);
  border-right: 1px solid rgba(33, 29, 65, 0.1);
  color: #101124;
  backdrop-filter: blur(16px);
}

body[data-theme="sunset"] .sidebar .eyebrow,
body[data-theme="sunset"] .brand-subtitle,
body[data-theme="sunset"] .version-label,
body[data-theme="sunset"] .draft-title,
body[data-theme="sunset"] .draft-item small,
body[data-theme="sunset"] .draft-empty,
body[data-theme="sunset"] .sidebar-footer,
body[data-theme="sunset"] .sidebar-footer span,
body[data-theme="sunset"] .sidebar-clock span {
  color: #6f7182;
}

body[data-theme="sunset"] .sidebar-footer,
body[data-theme="sunset"] .draft-section,
body[data-theme="sunset"] .nav-divider {
  border-color: rgba(33, 29, 65, 0.1);
}

body[data-theme="sunset"] .sidebar-footer strong,
body[data-theme="sunset"] .sidebar-footer a,
body[data-theme="sunset"] .sidebar-clock strong {
  color: #101124;
}

body[data-theme="sunset"] .brand-logo,
body[data-theme="sunset"] .sidebar-clock,
body[data-theme="sunset"] .draft-item {
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(74, 45, 91, 0.1);
}

body[data-theme="sunset"] .new-batch-action {
  background: #f53d2f;
  color: #ffffff;
}

body[data-theme="sunset"] .new-batch-action.secondary {
  background: rgba(255, 255, 255, 0.82);
  color: #20145d;
}

body[data-theme="sunset"] .new-batch-action .menu-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-theme="sunset"] .new-batch-action.secondary .menu-icon {
  background: rgba(32, 20, 93, 0.1);
  color: #20145d;
}

body[data-theme="sunset"] .nav-tab {
  color: #6f7182;
}

body[data-theme="sunset"] .nav-tab.active,
body[data-theme="sunset"] .nav-tab:hover {
  background: #20145d;
  color: #ffffff;
}

body[data-theme="sunset"] .nav-tab .menu-icon {
  background: rgba(32, 20, 93, 0.08);
  color: #6f7182;
}

body[data-theme="sunset"] .nav-tab.active .menu-icon,
body[data-theme="sunset"] .nav-tab:hover .menu-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-theme="sunset"] .workspace {
  background: rgba(255, 255, 255, 0.38);
}

body[data-theme="sunset"] .page-header,
body[data-theme="sunset"] .panel,
body[data-theme="sunset"] .kpi {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(33, 29, 65, 0.1);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(74, 45, 91, 0.1);
}

body[data-theme="sunset"] .batch-number-display {
  background: rgba(255, 255, 255, 0.86);
  color: #20145d;
}

body[data-theme="sunset"] .primary-action,
body[data-theme="sunset"] .file-action {
  background: #20145d;
  color: #ffffff;
}

body[data-theme="sunset"] .ghost-action {
  background: rgba(32, 20, 93, 0.09);
  color: #20145d;
}

body[data-theme="sunset"] .draft-action {
  background: #fff2bf;
  color: #704700;
}

body[data-theme="sunset"] .kpi strong,
body[data-theme="sunset"] .panel-header h3,
body[data-theme="sunset"] .batch-section-heading {
  color: #101124;
}

body[data-theme="sunset"] .batch-company-name {
  color: #20145d;
}

body[data-theme="sunset"] input,
body[data-theme="sunset"] select,
body[data-theme="sunset"] textarea {
  background: rgba(255, 255, 255, 0.84);
}

body[data-theme="sunset"] .settings-tab,
body[data-theme="sunset"] .salary-tab,
body[data-theme="sunset"] .accounting-tab {
  background: rgba(255, 255, 255, 0.7);
  color: #6f7182;
}

body[data-theme="sunset"] .settings-tab.active,
body[data-theme="sunset"] .settings-tab:hover,
body[data-theme="sunset"] .salary-tab.active,
body[data-theme="sunset"] .salary-tab:hover,
body[data-theme="sunset"] .accounting-tab.active,
body[data-theme="sunset"] .accounting-tab:hover {
  background: rgba(32, 20, 93, 0.1);
  color: #20145d;
}

body[data-theme="dark"] {
  --bg: #101815;
  --shell: #17221e;
  --surface: #1d2a25;
  --surface-2: #25342f;
  --text: #edf7f2;
  --muted: #9fb0a8;
  --line: #2e4039;
  --brand: #44c08e;
  --brand-dark: #5ce0a8;
  --brand-2: #223b31;
  --danger: #ff8076;
  --success: #64e0a6;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  --deep-shadow: 0 26px 72px rgba(0, 0, 0, 0.38);
}

body[data-theme="dark"] .app-shell {
  background: #17221e;
}

body[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0f2a21, #10211c);
  color: #edf7f2;
}

body[data-theme="dark"] .workspace {
  background: #121b18;
}

body[data-theme="dark"] .brand-logo {
  background: #edf7f2;
}

body[data-theme="dark"] .new-batch-action {
  background: #5ce0a8;
  color: #0c1713;
}

body[data-theme="dark"] .new-batch-action .menu-icon {
  background: rgba(12, 23, 19, 0.14);
  color: #0c1713;
}

body[data-theme="dark"] .new-batch-action.secondary,
body[data-theme="dark"] .month-chip {
  background: #14201c;
  border-color: #2e4039;
  color: #7df0b8;
}

body[data-theme="dark"] .nav-tab,
body[data-theme="dark"] .draft-title,
body[data-theme="dark"] .draft-empty,
body[data-theme="dark"] .draft-item small,
body[data-theme="dark"] .sidebar .eyebrow,
body[data-theme="dark"] .brand-subtitle,
body[data-theme="dark"] .version-label {
  color: #a9bab2;
}

body[data-theme="dark"] .sidebar-footer {
  border-color: #223b31;
  color: #a9bab2;
}

body[data-theme="dark"] .sidebar-footer strong,
body[data-theme="dark"] .sidebar-footer a {
  color: #edf7f2;
}

body[data-theme="dark"] .sidebar-footer span {
  color: #a9bab2;
}

body[data-theme="dark"] .sidebar-clock {
  background: rgba(92, 224, 168, 0.1);
}

body[data-theme="dark"] .sidebar-clock strong {
  color: #5ce0a8;
}

body[data-theme="dark"] .sidebar-clock span {
  color: #a9bab2;
}

body[data-theme="dark"] .nav-tab.active,
body[data-theme="dark"] .nav-tab:hover,
body[data-theme="dark"] .draft-item.active,
body[data-theme="dark"] .draft-item:hover {
  background: rgba(92, 224, 168, 0.14);
  color: #edf7f2;
}

body[data-theme="dark"] .nav-tab .menu-icon {
  background: rgba(92, 224, 168, 0.1);
  color: #a9bab2;
}

body[data-theme="dark"] .nav-tab.active .menu-icon,
body[data-theme="dark"] .nav-tab:hover .menu-icon {
  background: #5ce0a8;
  color: #0c1713;
}

body[data-theme="dark"] .nav-tab.active {
  box-shadow: inset 4px 0 0 #5ce0a8, 0 12px 24px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .draft-item {
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .nav-divider {
  border-color: #223b31;
}

body[data-theme="dark"] .page-header,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .startup-card {
  background: #1d2a25;
  color: #edf7f2;
}

body[data-theme="dark"] .kpi strong {
  color: #5ce0a8;
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: #14201c;
  border-color: #31463d;
  color: #edf7f2;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #7f9289;
}

body[data-theme="dark"] th {
  background: #25342f;
  color: #c7d8d0;
}

body[data-theme="dark"] td,
body[data-theme="dark"] th {
  border-color: #2e4039;
}

body[data-theme="dark"] .summary-row,
body[data-theme="dark"] .theme-option,
body[data-theme="dark"] .report-action,
body[data-theme="dark"] .settings-tab,
body[data-theme="dark"] .salary-tab,
body[data-theme="dark"] .accounting-tab {
  background: #14201c;
  border-color: #2e4039;
}

body[data-theme="dark"] .settings-tab.active,
body[data-theme="dark"] .settings-tab:hover,
body[data-theme="dark"] .salary-tab.active,
body[data-theme="dark"] .salary-tab:hover,
body[data-theme="dark"] .accounting-tab.active,
body[data-theme="dark"] .accounting-tab:hover {
  background: #223b31;
  color: #7df0b8;
}

body[data-theme="dark"] .primary-action {
  background: #5ce0a8;
  color: #0c1713;
}

body[data-theme="dark"] .file-action {
  background: #5ce0a8;
  color: #0c1713;
}

body[data-theme="dark"] .background-preview {
  background-color: #14201c;
}

body[data-theme="dark"] .background-preview.has-image span {
  background: rgba(20, 32, 28, 0.88);
  color: #edf7f2;
}

body[data-theme="dark"] .batch-number-display {
  background: #14201c;
  color: #5ce0a8;
}

body[data-theme="dark"] .ghost-action {
  background: #223b31;
  color: #7df0b8;
}

body[data-theme="dark"] .draft-action {
  background: #4a3b17;
  color: #ffe083;
}

body[data-theme="dark"] .danger-button {
  background: #3d211f;
  color: #ff9b94;
}

body[data-theme] .danger-action {
  background: #e53935;
  color: #ffffff;
}

body[data-theme] .danger-action:hover {
  background: #c62828;
}

body[data-theme="dark"] .link-action {
  color: #7df0b8;
}

@media (max-width: 900px) {
  #stock-view .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-loss-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body {
    padding: 14px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 28px);
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .new-batch-action,
  .draft-section {
    grid-column: 1 / -1;
  }

  .form-grid,
  .field-grid.four,
  .field-grid.three,
  .kpi-grid,
  .summary-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body {
    padding: 0;
  }

  .app-shell {
    border-radius: 0;
    min-height: 100vh;
  }

  .workspace,
  .sidebar {
    padding: 16px;
  }

  .session-bar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .top-program-identity {
    align-items: flex-start;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 2px;
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
    border-radius: 14px;
  }

  #batch-view .page-header {
    grid-template-columns: 1fr;
  }

  /* Without this, the badge's explicit grid-column:2/grid-row:1 (set for the desktop 2-column
     layout) forces grid to create an implicit second column anyway, squeezing the company
     name/heading column down to a sliver and truncating "Company not registered" to "Com...".
     Moving it to its own row (2) stacks it below the heading instead of overlapping it; stretch
     matches the general .batch-number-display mobile rule below. */
  #batch-view .page-header .batch-number-display {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }

  #summary-view .page-header {
    grid-template-columns: 1fr;
  }

  .summary-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-theme="purple"] #batch-view .page-header h2 {
    white-space: normal;
  }

  body[data-theme="purple"] #summary-view .month-filter,
  body[data-theme="purple"] #summary-view .primary-action {
    justify-self: stretch;
  }

  .batch-number-display {
    justify-self: stretch;
    text-align: center;
  }

  .month-filter {
    min-width: 0;
  }

  .nav-tabs,
  .settings-tabs,
  .salary-tabs,
  .accounting-tabs,
  .form-grid,
  .field-grid.four,
  .field-grid.three,
  .field-grid.two,
  .permission-grid,
  .kpi-grid,
  .summary-list,
  .theme-options {
    grid-template-columns: 1fr;
  }

  .report-action-grid {
    grid-template-columns: 1fr;
  }

  body[data-theme="estate"] .view.active::before {
    border-radius: 14px;
    height: 150px;
    margin-bottom: -126px;
  }

  body[data-theme="purple"] .view.active::before {
    height: 164px;
    margin: -16px -16px -136px;
  }

  table {
    min-width: 760px;
  }
}

/* Keep the selected Lavender Plum palette above the shared full-screen shell rules. */
body[data-theme="lavender"] .app-shell,
body[data-theme="lavender"] .workspace {
  background: #f8f3fc;
}

body[data-theme="lavender"] .sidebar {
  background: #f2e9f8;
  border-right-color: #ddcce7;
  color: #351441;
}

body[data-theme="lavender"] .brand-logo,
body[data-theme="lavender"] .sidebar-clock,
body[data-theme="lavender"] .session-bar,
body[data-theme="lavender"] .dashboard-welcome,
body[data-theme="lavender"] .dashboard-card,
body[data-theme="lavender"] .view > .panel,
body[data-theme="lavender"] .view > .kpi-grid,
body[data-theme="lavender"] .page-header {
  background: #fffaff;
  border-color: #e5d8eb;
}

body[data-theme="lavender"] .sidebar-company-name,
body[data-theme="lavender"] .draft-title,
body[data-theme="lavender"] .sidebar-footer,
body[data-theme="lavender"] .sidebar-footer span {
  color: #796582;
}

body[data-theme="lavender"] .sidebar-clock strong,
body[data-theme="lavender"] .sidebar-footer strong,
body[data-theme="lavender"] .sidebar-footer a {
  color: #4a1c5e;
}

body[data-theme="lavender"] .nav-tab,
body[data-theme="lavender"] .nav-tab:not(.active) {
  color: #594461;
}

body[data-theme="lavender"] .nav-tab.active {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .nav-tab:not(.active):hover {
  background: #eadcf2;
  color: #351441;
}

body[data-theme="lavender"] .menu-icon {
  background: #e4d3ed;
  color: #55266a;
}

body[data-theme="lavender"] .nav-tab.active .menu-icon,
body[data-theme="lavender"] .new-batch-action .menu-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="lavender"] .new-batch-action,
body[data-theme="lavender"] .primary-action {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .new-batch-action.secondary {
  background: #fffaff;
  border: 1px solid #d9c6e4;
  color: #4a1c5e;
}

body[data-theme="lavender"] .draft-item,
body[data-theme="lavender"] .processing-widget-card {
  background: #fffaff;
  color: #351441;
}

body[data-theme="lavender"] .dashboard-metric,
body[data-theme="lavender"] .dashboard-metric.purple,
body[data-theme="lavender"] .dashboard-metric.blue,
body[data-theme="lavender"] .dashboard-metric.green,
body[data-theme="lavender"] .dashboard-metric.orange {
  background: #f0e6f7;
  border: 1px solid #ddcce7;
  color: #30123d;
  box-shadow: none;
}

body[data-theme="lavender"] .dashboard-metric.green {
  background: #f5eaf5;
}

body[data-theme="lavender"] .dashboard-metric.orange {
  background: #f2e8f8;
}

body[data-theme="lavender"] .dashboard-metric small {
  color: #765e80;
}

body[data-theme="lavender"] .financial-stat-grid > div,
body[data-theme="lavender"] .quick-action-grid button {
  background: #f5eef9;
}

body[data-theme="lavender"] .financial-stat-grid .profit-stat {
  background: #eee2f5;
}

body[data-theme="lavender"] .ghost-action,
body[data-theme="lavender"] .file-action {
  background: #eee4f5;
  color: #4a1c5e;
}

body[data-theme="lavender"] input,
body[data-theme="lavender"] select,
body[data-theme="lavender"] textarea {
  background: #fffaff;
  border-color: #ddcfe5;
  color: #2b1733;
}

body[data-theme="lavender"] thead,
body[data-theme="lavender"] table thead {
  background: #f0e7f6;
}

/* Raw material purchasing and traceable load stock */
.raw-material-dashboard {
  margin-bottom: 18px;
}

.raw-material-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.raw-material-kpi-grid > div,
.raw-allocation-summary > div,
.raw-load-detail-grid > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.raw-material-kpi-grid small,
.raw-allocation-summary span,
.raw-load-detail-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.raw-material-kpi-grid strong {
  font-size: 1.08rem;
}

.raw-material-dashboard-tables {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

.raw-material-dashboard-tables h4 {
  margin: 0 0 10px;
}

.raw-allocation-panel {
  border-top: 4px solid var(--brand);
}

.raw-allocation-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 18px 18px;
}

.raw-allocation-summary strong {
  font-size: 1.12rem;
}

.field-span-four {
  grid-column: 1 / -1;
}

.raw-load-detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 20px;
}

.raw-load-detail-grid strong {
  overflow-wrap: anywhere;
}

.low-stock-note {
  color: var(--danger);
  display: block;
  font-weight: 800;
  margin-top: 5px;
}

.raw-report-filters {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 18px;
  padding: 16px;
}

.raw-report-export-actions {
  justify-content: flex-end;
  margin: 14px 0 26px;
}

@media (max-width: 1100px) {
  .raw-material-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .raw-material-dashboard-tables,
  .raw-load-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .raw-material-kpi-grid,
  .raw-allocation-summary {
    grid-template-columns: 1fr;
  }

  .raw-allocation-summary {
    margin-inline: 12px;
  }
}

/* Azure Aqua Dashboard: reference palette applied to the existing app structure. */
body[data-theme="azure"] {
  --bg: #d9ecfb;
  --shell: #eaf3ff;
  --surface: #ffffff;
  --surface-2: #e7f1fd;
  --text: #17233f;
  --muted: #71819a;
  --line: #d7e4f2;
  --brand: #1886bd;
  --brand-dark: #0d669e;
  --brand-2: #d9f3f7;
  --shadow: 0 10px 28px rgba(16, 91, 139, 0.1);
  --deep-shadow: 0 20px 55px rgba(10, 74, 119, 0.16);
  --chart-input: #167eb7;
  --chart-output: #55ced1;
  --chart-profit: #ff9869;
  --chart-grid: #dce8f4;
  --chart-text: #73849a;
  --chart-track: #e4eef9;
  background-color: #d9ecfb;
  color: #17233f;
}

body[data-theme="azure"] .app-shell,
body[data-theme="azure"] .workspace {
  background: #eaf3ff;
}

body[data-theme="azure"] .sidebar {
  background: #116fa8;
  border-right-color: #0d6094;
  color: #ffffff;
}

body[data-theme="azure"] .brand-logo {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(8, 68, 108, 0.16);
}

body[data-theme="azure"] .sidebar-company-name,
body[data-theme="azure"] .draft-title,
body[data-theme="azure"] .sidebar .eyebrow,
body[data-theme="azure"] .sidebar-footer,
body[data-theme="azure"] .sidebar-footer span,
body[data-theme="azure"] .draft-item small,
body[data-theme="azure"] .draft-meta dt,
body[data-theme="azure"] .draft-empty {
  color: rgba(255, 255, 255, 0.76);
}

body[data-theme="azure"] .sidebar-clock {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-theme="azure"][data-theme] .sidebar-clock strong,
body[data-theme="azure"][data-theme] .sidebar-clock span,
body[data-theme="azure"] .sidebar-footer strong,
body[data-theme="azure"] .sidebar-footer a {
  color: #ffffff;
}

body[data-theme="azure"] .nav-tab,
body[data-theme="azure"] .nav-tab:not(.active) {
  color: rgba(255, 255, 255, 0.82);
}

body[data-theme="azure"] .nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

body[data-theme="azure"] .nav-tab.active {
  background: #ffffff;
  color: #0d669e;
}

body[data-theme="azure"] .menu-icon {
  background: rgba(255, 255, 255, 0.14);
  color: currentColor;
}

body[data-theme="azure"] .nav-tab.active .menu-icon {
  background: #dff0fb;
  color: #0d669e;
}

body[data-theme="azure"] .new-batch-action {
  background: #ff9b6b;
  color: #17233f;
}

body[data-theme="azure"] .new-batch-action .menu-icon {
  background: rgba(255, 255, 255, 0.3);
  color: #17233f;
}

body[data-theme="azure"] .new-batch-action.secondary {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body[data-theme="azure"] .new-batch-action.secondary .menu-icon {
  color: #ffffff;
}

body[data-theme="azure"] .draft-section,
body[data-theme="azure"] .nav-divider,
body[data-theme="azure"] .sidebar-footer {
  border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="azure"] .draft-item,
body[data-theme="azure"] .processing-widget-card {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="azure"] .processing-widget-card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: #ffffff;
}

body[data-theme="azure"] .draft-open-action {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="azure"] .session-bar,
body[data-theme="azure"] .dashboard-welcome,
body[data-theme="azure"] .dashboard-card,
body[data-theme="azure"] .view > .panel,
body[data-theme="azure"] .view > .kpi-grid,
body[data-theme="azure"] .page-header,
body[data-theme="azure"] .settings-section,
body[data-theme="azure"] .salary-section {
  background: #ffffff;
  border-color: #d9e6f2;
  box-shadow: 0 8px 24px rgba(15, 87, 134, 0.08);
}

body[data-theme="azure"] .top-program-identity strong,
body[data-theme="azure"] .user-profile-copy strong,
body[data-theme="azure"] h2,
body[data-theme="azure"] h3,
body[data-theme="azure"] .dashboard-welcome h2,
body[data-theme="azure"] .dashboard-card-header h3 {
  color: #17233f;
}

body[data-theme="azure"] .global-search {
  background: #eef5fd;
  border-color: #dbe7f3;
}

body[data-theme="azure"] .header-icon-button,
body[data-theme="azure"] .user-avatar {
  background: #dff0fb;
  color: #0d669e !important;
}

body[data-theme="azure"] .dashboard-metric,
body[data-theme="azure"] .dashboard-metric.purple,
body[data-theme="azure"] .dashboard-metric.blue,
body[data-theme="azure"] .dashboard-metric.green,
body[data-theme="azure"] .dashboard-metric.orange {
  background: #ffffff;
  border: 1px solid #d2e2f1;
  color: #17233f;
  box-shadow: 0 7px 20px rgba(15, 87, 134, 0.07);
}

body[data-theme="azure"] .dashboard-metric.blue {
  background: #e7f3ff;
}

body[data-theme="azure"] .dashboard-metric.green {
  background: #e4f8f8;
}

body[data-theme="azure"] .dashboard-metric.orange {
  background: #fff0e9;
}

body[data-theme="azure"] .dashboard-metric small {
  color: #637691;
}

body[data-theme="azure"] .dashboard-metric .metric-icon {
  border-color: #a9c7dc;
  color: #0d669e;
}

body[data-theme="azure"] .analytics-summary-card {
  background: #ffffff;
  border: 1px solid #d9e6f2;
  box-shadow: 0 7px 20px rgba(15, 87, 134, 0.06);
}

body[data-theme="azure"] .analytics-summary-card::before {
  background: #167eb7;
}

body[data-theme="azure"] .analytics-summary-card.output::before {
  background: #55ced1;
}

body[data-theme="azure"] .analytics-summary-card.profit::before {
  background: #ff9869;
}

body[data-theme="azure"] .financial-stat-grid > div,
body[data-theme="azure"] .financial-stat-grid > button,
body[data-theme="azure"] .quick-action-grid button {
  background: #eef5fd;
}

body[data-theme="azure"] .financial-stat-grid > button:hover {
  background: #dff0fb;
  box-shadow: inset 0 0 0 1px rgba(13, 102, 158, 0.18);
}

body[data-theme="azure"] .financial-stat-grid .profit-stat {
  background: #e2f4f6;
}

body[data-theme="azure"] .stock-total,
body[data-theme="azure"] .analytics-activity-row b,
body[data-theme="azure"] .smart-result-main > strong {
  color: #0d70a9;
}

body[data-theme="azure"] .primary-action {
  background: #147bb4;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(13, 102, 158, 0.18);
}

body[data-theme="azure"] .primary-action:hover {
  background: #0d669e;
}

body[data-theme="azure"] .ghost-action,
body[data-theme="azure"] .file-action {
  background: #dfeefa;
  color: #0d669e;
}

body[data-theme="azure"] input,
body[data-theme="azure"] select,
body[data-theme="azure"] textarea {
  background: #ffffff;
  border-color: #cdddea;
  color: #17233f;
}

body[data-theme="azure"] input:focus,
body[data-theme="azure"] select:focus,
body[data-theme="azure"] textarea:focus {
  border-color: #268fc0;
  box-shadow: 0 0 0 3px rgba(38, 143, 192, 0.13);
}

body[data-theme="azure"] thead,
body[data-theme="azure"] table thead {
  background: #e5f0fa;
}

body[data-theme="azure"] th {
  color: #38536e;
}

body[data-theme="azure"] td {
  border-color: #e2ebf4;
}

body[data-theme="azure"] .settings-tab.active,
body[data-theme="azure"] .salary-tab.active,
body[data-theme="azure"] .accounting-tab.active,
body[data-theme="azure"] .chart-mode-tabs button.active {
  background: #d7edf8;
  color: #0d669e;
}

body[data-theme="azure"] .theme-option:has(input:checked) {
  background: #e3f1fb;
  border-color: #4b9dc4;
  box-shadow: inset 3px 0 0 #147bb4;
}

body[data-theme="lavender"][data-theme] .sidebar-clock strong {
  color: #4a1c5e;
}

body[data-theme="lavender"][data-theme] .sidebar-clock span {
  color: #7d6986;
}

body[data-theme="lavender"][data-theme] .draft-title {
  color: #5b3d68;
}

body[data-theme="lavender"] .sidebar-company-name,
body[data-theme="lavender"] .draft-title,
body[data-theme="lavender"] .sidebar .eyebrow,
body[data-theme="lavender"] .draft-item small,
body[data-theme="lavender"] .draft-meta dt,
body[data-theme="lavender"] .draft-empty {
  color: #735e7d;
}

body[data-theme="lavender"] .sidebar-footer,
body[data-theme="lavender"] .sidebar-footer span {
  color: #796582;
}

body[data-theme="lavender"] .sidebar-footer strong,
body[data-theme="lavender"] .sidebar-footer a {
  color: #4a1c5e;
}

/* Theme-aware analytics colors */
body {
  --chart-input: #5a35d1;
  --chart-output: #22a978;
  --chart-profit: #f28a2e;
  --chart-grid: #e8eaf0;
  --chart-text: #8a91a1;
  --chart-track: #ece8fb;
}

.chart-legend i {
  background: var(--chart-input);
}

.chart-legend i.output {
  background: var(--chart-output);
}

.chart-legend i.profit {
  background: var(--chart-profit);
}

.theme-option:has(input:checked) {
  background: #f1edff;
  border-color: rgba(69, 32, 166, 0.35);
  box-shadow: inset 3px 0 0 #4520a6;
}

/* Lavender Plum Dashboard: palette and styling only; layout remains unchanged. */
body[data-theme="lavender"] {
  --bg: #f7f1fc;
  --shell: #fbf8ff;
  --surface: #fffaff;
  --surface-2: #f3ebf9;
  --text: #2b1733;
  --muted: #8d7d96;
  --line: #e4d8eb;
  --brand: #6f3b87;
  --brand-dark: #3d174e;
  --brand-2: #eee1f6;
  --shadow: 0 10px 28px rgba(61, 23, 78, 0.08);
  --deep-shadow: 0 18px 52px rgba(61, 23, 78, 0.12);
  --chart-input: #55216f;
  --chart-output: #a487d8;
  --chart-profit: #d28bb7;
  --chart-grid: #eadff0;
  --chart-text: #88788f;
  --chart-track: #f0e7f6;
  background-color: #f7f1fc;
  color: #2b1733;
}

body[data-theme="lavender"] .app-shell,
body[data-theme="lavender"] .workspace {
  background: #f8f3fc;
}

body[data-theme="lavender"] .sidebar {
  background: #f2e9f8;
  border-right: 1px solid #ddcce7;
  color: #351441;
}

body[data-theme="lavender"] .brand-logo {
  background: #fffaff;
  box-shadow: 0 6px 18px rgba(61, 23, 78, 0.08);
}

body[data-theme="lavender"] .sidebar-company-name,
body[data-theme="lavender"] .draft-title,
body[data-theme="lavender"] .sidebar-footer,
body[data-theme="lavender"] .sidebar-footer span {
  color: #796582;
}

body[data-theme="lavender"] .sidebar-clock {
  background: #fffaff;
  border: 1px solid #e1d3e9;
}

body[data-theme="lavender"] .sidebar-clock strong {
  color: #48205a;
}

body[data-theme="lavender"] .sidebar-clock span {
  color: #8d7d96;
}

body[data-theme="lavender"] .nav-tab,
body[data-theme="lavender"] .nav-tab:not(.active) {
  color: #594461;
}

body[data-theme="lavender"] .nav-tab:not(.active):hover {
  background: #eadcf2;
  color: #351441;
}

body[data-theme="lavender"] .nav-tab.active {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .nav-tab.active .menu-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="lavender"] .menu-icon {
  background: #e4d3ed;
  color: #55266a;
}

body[data-theme="lavender"] .new-batch-action {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .new-batch-action .menu-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body[data-theme="lavender"] .new-batch-action.secondary {
  background: #fffaff;
  border: 1px solid #d9c6e4;
  color: #4a1c5e;
}

body[data-theme="lavender"] .new-batch-action.secondary .menu-icon {
  background: #eee3f5;
  color: #4a1c5e;
}

body[data-theme="lavender"] .draft-section,
body[data-theme="lavender"] .nav-divider,
body[data-theme="lavender"] .sidebar-footer {
  border-color: #ddcce7;
}

body[data-theme="lavender"] .draft-item,
body[data-theme="lavender"] .processing-widget-card {
  background: #fffaff;
  color: #351441;
  box-shadow: 0 5px 14px rgba(61, 23, 78, 0.07);
}

body[data-theme="lavender"] .draft-item small,
body[data-theme="lavender"] .draft-meta dt {
  color: #95849c;
}

body[data-theme="lavender"] .processing-widget-card:hover {
  background: #fffaff;
  border-color: #ffffff;
}

body[data-theme="lavender"] .draft-open-action {
  background: #f0e5f6;
  color: #4a1c5e;
}

body[data-theme="lavender"] .sidebar-footer strong,
body[data-theme="lavender"] .sidebar-footer a {
  color: #4a1c5e;
}

body[data-theme="lavender"] .session-bar {
  background: #fffaff;
  border-color: #e6daec;
}

body[data-theme="lavender"] .top-program-identity strong,
body[data-theme="lavender"] .user-profile-copy strong {
  color: #2b1733;
}

body[data-theme="lavender"] .global-search {
  background: #f5eef9;
  border-color: #eadff0;
}

body[data-theme="lavender"] .header-icon-button,
body[data-theme="lavender"] .user-avatar {
  background: #eadcf2;
  color: #4a1c5e !important;
}

body[data-theme="lavender"] .dashboard-welcome,
body[data-theme="lavender"] .dashboard-card,
body[data-theme="lavender"] .view > .panel,
body[data-theme="lavender"] .view > .kpi-grid,
body[data-theme="lavender"] .page-header,
body[data-theme="lavender"] .settings-section,
body[data-theme="lavender"] .salary-section {
  background: #fffaff;
  border-color: #e8ddec;
  box-shadow: 0 8px 24px rgba(61, 23, 78, 0.07);
}

body[data-theme="lavender"] .dashboard-welcome h2,
body[data-theme="lavender"] .dashboard-card-header h3,
body[data-theme="lavender"] h2,
body[data-theme="lavender"] h3 {
  color: #2b1733;
}

body[data-theme="lavender"] .dashboard-metric {
  background: #f0e6f7;
  border: 1px solid #ddcce7;
  color: #30123d;
  box-shadow: none;
}

body[data-theme="lavender"] .dashboard-metric.blue {
  background: #eee4f6;
}

body[data-theme="lavender"] .dashboard-metric.green {
  background: #f5eaf5;
}

body[data-theme="lavender"] .dashboard-metric.orange {
  background: #f2e8f8;
}

body[data-theme="lavender"] .dashboard-metric small {
  color: #765e80;
}

body[data-theme="lavender"] .dashboard-metric .metric-icon {
  border-color: #bea7cc;
  color: #55216f;
}

body[data-theme="lavender"] .analytics-summary-card {
  background: #fffaff;
  border: 1px solid #e7dbea;
  box-shadow: 0 7px 20px rgba(61, 23, 78, 0.06);
}

body[data-theme="lavender"] .analytics-summary-card::before {
  background: #55216f;
}

body[data-theme="lavender"] .analytics-summary-card.output::before {
  background: #a487d8;
}

body[data-theme="lavender"] .analytics-summary-card.profit::before {
  background: #d28bb7;
}

body[data-theme="lavender"] .financial-stat-grid > div,
body[data-theme="lavender"] .quick-action-grid button {
  background: #f5eef9;
}

body[data-theme="lavender"] .financial-stat-grid .profit-stat {
  background: #eee2f5;
}

body[data-theme="lavender"] .stock-total,
body[data-theme="lavender"] .analytics-activity-row b,
body[data-theme="lavender"] .smart-result-main > strong {
  color: #55216f;
}

body[data-theme="lavender"] .primary-action {
  background: #4a1c5e;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(61, 23, 78, 0.16);
}

body[data-theme="lavender"] .primary-action:hover {
  background: #351441;
}

body[data-theme="lavender"] .ghost-action,
body[data-theme="lavender"] .file-action {
  background: #eee4f5;
  color: #4a1c5e;
}

body[data-theme="lavender"] input,
body[data-theme="lavender"] select,
body[data-theme="lavender"] textarea {
  background: #fffaff;
  border-color: #ddcfe5;
  color: #2b1733;
}

body[data-theme="lavender"] input:focus,
body[data-theme="lavender"] select:focus,
body[data-theme="lavender"] textarea:focus {
  border-color: #76508a;
  box-shadow: 0 0 0 3px rgba(111, 59, 135, 0.12);
}

body[data-theme="lavender"] thead,
body[data-theme="lavender"] table thead {
  background: #f0e7f6;
}

body[data-theme="lavender"] th {
  color: #4c3656;
}

body[data-theme="lavender"] td {
  border-color: #eee4f2;
}

body[data-theme="lavender"] .settings-tab.active,
body[data-theme="lavender"] .salary-tab.active,
body[data-theme="lavender"] .accounting-tab.active,
body[data-theme="lavender"] .chart-mode-tabs button.active {
  background: #e8d9f1;
  color: #4a1c5e;
}

body[data-theme="lavender"] .theme-option:has(input:checked) {
  background: #f0e4f6;
  border-color: #8b65a0;
  box-shadow: inset 3px 0 0 #55216f;
}

/* Keep the complete desktop menu visible on shorter windows, across every theme. */
@media (max-height: 1200px) and (min-width: 681px) {
  body {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .app-shell {
    min-height: calc(100vh - 20px);
  }

  .sidebar {
    padding: 12px 16px;
  }

  .brand {
    gap: 3px;
    margin-bottom: 10px;
  }

  .brand-logo {
    height: 62px;
    padding: 5px;
  }

  .brand-subtitle,
  .version-label {
    font-size: 0.8rem;
    line-height: 1.18;
  }

  .sidebar-clock {
    border-radius: 10px;
    margin: 0 0 9px;
    padding: 10px 13px;
  }

  .sidebar-clock strong {
    font-size: 1.2rem;
  }

  .sidebar-clock span {
    font-size: 0.8rem;
  }

  .nav-tabs {
    gap: 5px;
  }

  .new-batch-action,
  .nav-tab {
    font-size: 1.08rem;
    min-height: 44px;
    padding: 10px 14px;
  }

  .menu-icon {
    border-radius: 8px;
    font-size: 1rem;
    height: 30px;
    width: 30px;
  }

  .draft-section {
    padding: 7px 0;
  }

  .draft-title {
    font-size: 0.88rem;
    margin-bottom: 4px;
  }

  .draft-list {
    gap: 3px;
    max-height: 360px;
    overflow: hidden;
  }

  .draft-item {
    padding: 10px;
  }

  .draft-meta {
    gap: 2px 5px;
    margin: 4px 0;
  }

  .draft-meta dt {
    font-size: 0.52rem;
  }

  .draft-meta dd,
  .draft-open-action,
  .draft-continue-action {
    font-size: 0.76rem;
  }

  .draft-open-action,
  .draft-continue-action {
    padding: 6px 4px;
  }

  .nav-divider {
    margin: 4px 0 2px;
  }

  .sidebar-footer {
    font-size: 0.76rem;
    gap: 2px;
    line-height: 1.2;
    padding-top: 8px;
  }

  .sidebar-footer strong {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .sidebar-footer span {
    margin-top: 1px;
  }
}

@media (max-height: 1050px) and (min-width: 681px) {
  .draft-list {
    max-height: 360px;
  }

  .sidebar-footer span,
  .sidebar-footer a[href^="tel:"] {
    display: none;
  }
}

.draft-status-row {
  grid-column: 1 / -1;
}

.draft-status-row .status-badge {
  font-size: 0.58rem;
  padding: 3px 7px;
}

/* Show two draft cards, then scroll only inside the draft card area. */
.draft-list {
  max-height: 360px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 4px;
  scroll-behavior: smooth;
  scrollbar-color: rgba(92, 70, 200, 0.55) transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.draft-list::-webkit-scrollbar {
  width: 6px;
}

.draft-list::-webkit-scrollbar-thumb {
  background: rgba(92, 70, 200, 0.55);
  border-radius: 999px;
}

.draft-list::-webkit-scrollbar-track {
  background: transparent;
}

.status-badge.draft {
  background: #fff0b8;
  color: #755100;
}

.draft-item.draft-focus {
  animation: draft-focus-pulse 0.7s ease-in-out 2;
  outline: 3px solid rgba(92, 70, 200, 0.45);
  outline-offset: -3px;
}

@keyframes draft-focus-pulse {
  50% {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(92, 70, 200, 0.28);
  }
}

.transient-message {
  position: fixed;
  z-index: 10000;
  top: 22px;
  left: 50%;
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  border: 1px solid rgba(92, 70, 200, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #21175f;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(25, 20, 60, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -14px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.transient-message.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.draft-title {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Keep every desktop navigation item visible on laptop-height screens. */
@media (max-height: 1050px) and (min-width: 901px) {
  .sidebar {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .brand {
    margin-bottom: 8px;
  }

  .brand-logo {
    height: 50px;
  }

  .sidebar-clock {
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  .new-batch-action,
  .nav-tab {
    font-size: 0.9rem;
    min-height: 36px;
    padding: 7px 10px;
  }

  .menu-icon {
    height: 25px;
    width: 25px;
  }

  .nav-tabs {
    gap: 3px;
  }

  .draft-section {
    margin: 4px 0;
    min-height: 0;
    padding: 6px 0;
  }

  .draft-list {
    max-height: 290px !important;
  }

  .draft-item {
    padding: 8px;
  }

  .draft-meta {
    margin: 3px 0;
  }

  .draft-open-action,
  .draft-continue-action {
    padding: 4px 3px;
  }

  .nav-divider {
    margin: 3px 0 1px;
  }

  .sidebar-footer {
    display: none;
  }
}

/* Same as above: this used to crush the sidebar's Processing Batches list to 145px and hide the
   card details on short screens. Removed - the full card (see .draft-meta above) always shows now. */

/* Full-screen dashboard shell */
body {
  background: #f2f3f7;
  min-height: 100vh;
  padding: 0;
}

.app-shell,
body[data-theme] .app-shell {
  background: #f2f3f7;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns: 250px minmax(0, 1fr);
  margin: 0;
  max-width: none;
  min-height: 100vh;
  overflow: visible;
  width: 100%;
}

.sidebar,
body[data-theme] .sidebar {
  /* align-self left at its default (stretch, not "start") so the sidebar's background
     stretches to match the workspace's full scrollable height, not just one viewport tall -
     "start" left a pale gap below it whenever dashboard content was taller than the screen. */
  background: #4520a6;
  border: 0;
  color: #ffffff;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 18px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  gap: 6px;
  margin-bottom: 12px;
}

.brand-logo,
body[data-theme] .brand-logo {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: none;
  height: 58px;
  padding: 5px;
}

.sidebar-company-name {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
  font-weight: 800;
  margin: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-clock,
body[data-theme] .sidebar-clock {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.sidebar-clock strong,
.sidebar-clock span,
body[data-theme] .sidebar-clock strong,
body[data-theme] .sidebar-clock span {
  color: #ffffff;
}

.nav-tab,
body[data-theme] .nav-tab {
  color: rgba(255, 255, 255, 0.78);
  min-height: 40px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-tab.active,
body[data-theme] .nav-tab.active {
  background: #ffffff;
  box-shadow: none;
  color: #4520a6;
}

.nav-tab.active .menu-icon,
body[data-theme] .nav-tab.active .menu-icon {
  background: #eee9ff;
  color: #4520a6;
}

.nav-tab:not(.active):hover,
body[data-theme] .nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-tabs {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.nav-tabs .nav-tab,
.nav-tabs .new-batch-action {
  gap: 20px;
  justify-content: flex-start;
  padding-left: 14px;
  text-align: left;
  width: 100%;
}

.nav-tab[data-view="dashboard"],
#new-batch {
  margin-bottom: 10px;
}

.nav-tabs .draft-section {
  /* Stay in normal document flow directly below Settings - no margin-top:auto (that was what
     pushed it to the bottom of the sidebar regardless of its HTML position). */
  margin-bottom: 0;
  margin-top: 12px;
  min-height: 0;
}

.nav-tabs .draft-list {
  /* No inner scrollbar - show every Processing Batch card in full; the sidebar itself scrolls
     naturally (sticky on desktop, or its own overflow-y:auto in drawer mode) instead of nesting
     a separate scroll area just for this list. */
  max-height: none !important;
  overflow: visible !important;
}

.processing-widget-card,
body[data-theme] .processing-widget-card {
  border: 1px solid transparent;
  transition: border-color 160ms ease;
}

.processing-widget-card:hover,
body[data-theme] .processing-widget-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  box-shadow: none;
  transform: none;
}

.menu-icon,
body[data-theme] .menu-icon {
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
}

.new-batch-action,
body[data-theme] .new-batch-action {
  background: #ffffff;
  color: #4520a6;
}

.new-batch-action.secondary,
body[data-theme] .new-batch-action.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.draft-section,
.nav-divider,
.sidebar-footer,
body[data-theme] .sidebar-footer {
  border-color: rgba(255, 255, 255, 0.15);
}

.draft-title,
body[data-theme] .draft-title {
  color: rgba(255, 255, 255, 0.68);
}

.draft-item,
body[data-theme] .draft-item {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: none;
}

.draft-item small,
.draft-meta dt,
body[data-theme] .draft-item small {
  color: rgba(255, 255, 255, 0.64);
}

.sidebar-footer,
.sidebar-footer strong,
.sidebar-footer a,
.sidebar-footer span,
body[data-theme] .sidebar-footer,
body[data-theme] .sidebar-footer strong,
body[data-theme] .sidebar-footer a,
body[data-theme] .sidebar-footer span {
  color: rgba(255, 255, 255, 0.78);
}

.workspace,
body[data-theme] .workspace {
  background: #f2f3f7;
  min-height: 100vh;
  padding: 0;
}

.session-bar {
  background: #ffffff;
  border-bottom: 1px solid #e9eaf0;
  gap: 14px;
  margin: 0;
  min-height: 72px;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 80;
}

.header-leading {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-right: auto;
  min-width: 190px;
}

.top-program-identity {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.top-program-identity strong {
  color: #172033;
  font-size: 1.02rem;
}

.top-program-identity span {
  color: #8b91a1;
  font-size: 0.68rem;
}

.global-search {
  align-items: center;
  background: #f3f4f8;
  border: 1px solid #eceef3;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  max-width: 390px;
  padding: 0 12px;
  width: 32vw;
}

.global-search-wrapper {
  max-width: 390px;
  position: relative;
  width: 32vw;
}

.global-search-wrapper .global-search {
  max-width: none;
  width: 100%;
}

.global-search-results {
  background: #ffffff;
  border: 1px solid #e5e7ee;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(24, 29, 45, 0.2);
  left: 50%;
  max-height: min(72vh, 680px);
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 290px));
  z-index: 1200;
}

.smart-search-group + .smart-search-group {
  border-top: 1px solid #eceef3;
  margin-top: 10px;
  padding-top: 10px;
}

.smart-search-group-title {
  align-items: center;
  color: #242c3d;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px 8px;
}

.smart-search-group-title span {
  align-items: center;
  background: #eee9ff;
  border-radius: 999px;
  color: #4520a6;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0 7px;
}

.smart-search-result {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #283144;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(90px, 0.75fr));
  padding: 10px;
  text-align: left;
  width: 100%;
}

.smart-search-result:hover,
.smart-search-result:focus-visible {
  background: #f5f2ff;
  outline: 0;
}

.smart-search-result > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.smart-search-result strong {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-search-result small {
  color: #8a91a1;
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-result-main > strong {
  color: #4520a6;
  font-size: 0.86rem;
}

.smart-status {
  text-transform: capitalize;
}

.smart-status.paid,
.smart-status.completed {
  color: #118052;
}

.smart-status.overdue,
.smart-status.cancelled {
  color: #cf2635;
}

.smart-status.processing,
.smart-status.partially-paid,
.smart-status.unpaid,
.smart-status.issued {
  color: #9a6500;
}

.smart-search-empty {
  display: grid;
  gap: 5px;
  padding: 24px;
  text-align: center;
}

.smart-search-empty strong {
  color: #252d3e;
}

.smart-search-empty span {
  color: #7f8798;
  font-size: 0.8rem;
}

.global-search span {
  color: #777f91;
  font-size: 0.72rem;
  font-weight: 900;
}

.global-search input {
  background: transparent;
  border: 0;
  color: #172033;
  min-height: 38px;
  outline: 0;
  width: 100%;
}

.header-icon-button {
  align-items: center;
  background: #f3f1ff;
  border: 0;
  border-radius: 8px;
  color: #4520a6;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 38px;
}

.header-icon-button i {
  background: #ef3b48;
  border: 2px solid #ffffff;
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
}

.user-profile {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.user-avatar {
  align-items: center;
  background: #4520a6;
  border-radius: 50%;
  color: #ffffff !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem !important;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.user-profile-copy {
  display: grid;
  min-width: 0;
}

.user-profile-copy strong {
  color: #172033;
  font-size: 0.78rem;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-copy small {
  color: #8b91a1;
  font-size: 0.68rem;
}

.mobile-menu-toggle,
.sidebar-overlay {
  display: none;
}

.view {
  padding: 24px;
}

.dashboard-welcome {
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 20px 22px;
}

.dashboard-welcome h2 {
  color: #172033;
  font-size: 1.65rem;
}

.dashboard-welcome p:last-child {
  color: #7a8293;
  margin: 6px 0 0;
}

.dashboard-view.active {
  display: flex;
  flex-direction: column;
}

.dashboard-view.active > * {
  min-width: 0;
}

.dashboard-view .dashboard-welcome {
  order: 1;
}

.dashboard-view .dashboard-metrics {
  order: 2;
}

.dashboard-view .dashboard-financial-snapshot {
  order: 3;
}

.dashboard-view .stock-overview {
  order: 4;
}

.dashboard-view .dashboard-balance-grid {
  order: 5;
}

.dashboard-view .analytics-summary-grid {
  order: 6;
}

.dashboard-view .analytics-chart-card {
  order: 7;
}

.dashboard-view .dashboard-analytics-lower {
  order: 8;
}

.dashboard-view .dashboard-financial-snapshot,
.dashboard-view .stock-overview,
.dashboard-view .dashboard-balance-grid {
  margin-bottom: 18px;
}

/* Mobile-only duplicate of the sidebar's Processing Batches widget (see #dashboard-processing-mobile-list
   in app.js). The sidebar now stays fully open at every width above phone size (see the drawer
   media query below), so this inline copy is only needed on true phone screens. */
.dashboard-processing-mobile {
  display: none;
}

/* Phone screens only: stack dashboard sections in a different, more task-relevant order -
   Processing Batches (mobile-only duplicate of the sidebar widget) first, then Current Stock,
   Financial Snapshot, Receivables/Payables, and everything else after. Overrides the desktop
   order above; the .dashboard-view.active flex/order mechanism itself is unchanged. */
@media (max-width: 600px) {
  .dashboard-processing-mobile {
    display: block;
  }

  .dashboard-view .dashboard-welcome {
    order: 1;
  }

  .dashboard-view .dashboard-processing-mobile {
    order: 2;
  }

  .dashboard-view .stock-overview {
    order: 3;
  }

  .dashboard-view .dashboard-financial-snapshot {
    order: 4;
  }

  .dashboard-view .dashboard-balance-grid {
    order: 5;
  }

  .dashboard-view .dashboard-metrics {
    order: 6;
  }

  .dashboard-view .analytics-summary-grid {
    order: 7;
  }

  .dashboard-view .analytics-chart-card {
    order: 8;
  }

  .dashboard-view .dashboard-analytics-lower {
    order: 9;
  }
}

.dashboard-welcome-actions {
  align-items: end;
  display: flex;
  gap: 12px;
}

.dashboard-year-filter {
  color: #737b8d;
  display: grid;
  font-size: 0.7rem;
  font-weight: 800;
  gap: 5px;
  min-width: 135px;
}

.dashboard-year-filter select,
.dashboard-year-filter input {
  background: #f5f4fa;
  border: 1px solid #e5e3ed;
  border-radius: 8px;
  color: #242d3e;
  min-height: 40px;
  padding: 7px 34px 7px 12px;
}

.analytics-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.analytics-summary-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 37, 54, 0.07);
  display: grid;
  gap: 6px;
  min-height: 154px;
  min-width: 0;
  padding: 20px;
  position: relative;
}

.analytics-summary-card::before {
  background: #5a35d1;
  border-radius: 8px 8px 0 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.analytics-summary-card.output::before {
  background: #22a978;
}

.analytics-summary-card.profit::before {
  background: #f28a2e;
}

.analytics-summary-card > span {
  color: #747c8d;
  font-size: 0.78rem;
  font-weight: 800;
}

.analytics-summary-card > strong {
  color: #1c2537;
  font-size: 1.65rem;
  margin-top: 5px;
}

.analytics-summary-card > small {
  color: #8a91a1;
  font-weight: 700;
}

.analytics-summary-card > em {
  align-self: end;
  color: #168153;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.analytics-summary-card > em.negative {
  color: #cf2635;
}

.analytics-chart-card {
  margin-bottom: 18px;
}

.analytics-chart-header {
  gap: 16px;
}

.analytics-chart-controls {
  align-items: end;
  display: flex;
  gap: 12px;
}

.chart-mode-tabs {
  background: #f3f2f7;
  border-radius: 8px;
  display: flex;
  gap: 3px;
  padding: 4px;
}

.chart-mode-tabs button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #737b8d;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px 11px;
}

.chart-mode-tabs button.active {
  background: #ffffff;
  color: #4520a6;
  box-shadow: 0 4px 12px rgba(38, 32, 73, 0.1);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: -4px 0 12px;
}

.chart-legend span {
  align-items: center;
  color: #777f91;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 6px;
}

.chart-legend i {
  background: #5a35d1;
  border-radius: 3px;
  height: 9px;
  width: 9px;
}

.chart-legend i.output {
  background: #22a978;
}

.chart-legend i.profit {
  background: #f28a2e;
  border-radius: 50%;
}

.analytics-chart-wrap,
.grade-chart-wrap {
  min-height: 260px;
  position: relative;
  width: 100%;
}

.grade-chart-groups {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grade-chart-groups > section {
  min-width: 0;
}

.grade-chart-groups h4 {
  color: var(--text);
  font-size: 0.88rem;
  margin: 4px 0 10px;
}

.grade-chart-groups .grade-chart-wrap {
  min-height: 220px;
}

.analytics-chart-wrap {
  min-height: 310px;
}

.analytics-chart-wrap canvas,
.grade-chart-wrap canvas {
  display: block;
  max-width: 100%;
}

.chart-empty-state {
  align-items: center;
  bottom: 0;
  color: #8a91a1;
  display: flex;
  justify-content: center;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.chart-empty-state[hidden] {
  display: none;
}

.dashboard-analytics-lower {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.35fr);
  margin-bottom: 18px;
}

.analytics-recent-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-recent-grid h4 {
  color: #586173;
  font-size: 0.72rem;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.analytics-activity-row {
  align-items: center;
  border-bottom: 1px solid #eceef3;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 48px;
  padding: 7px 0;
}

.analytics-activity-row:last-child {
  border-bottom: 0;
}

.analytics-activity-row > span {
  display: grid;
  min-width: 0;
}

.analytics-activity-row strong,
.analytics-activity-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-activity-row strong {
  color: #2b3446;
  font-size: 0.75rem;
}

.analytics-activity-row small {
  color: #9097a6;
  font-size: 0.64rem;
}

.analytics-activity-row b {
  color: #4520a6;
  flex: 0 0 auto;
  font-size: 0.7rem;
}

.analytics-empty {
  color: #9298a7;
  font-size: 0.74rem;
}

.dashboard-metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.dashboard-metric {
  align-items: center;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  gap: 15px;
  min-height: 112px;
  min-width: 0;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(31, 37, 54, 0.09);
}

.dashboard-metric > div {
  min-width: 0;
}

button.dashboard-metric {
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

button.dashboard-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(31, 37, 54, 0.15);
}

.dashboard-metric.purple { background: #5a35d1; }
.dashboard-metric.blue { background: #268bea; }
.dashboard-metric.green { background: #17a56b; }
.dashboard-metric.orange { background: #f28a2e; }

.metric-icon {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 900;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.dashboard-metric div {
  display: grid;
  gap: 4px;
}

.dashboard-metric small {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.dashboard-metric strong {
  font-size: 1.75rem;
}

.dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
}

.dashboard-card,
.view > .panel,
.view > .kpi-grid,
.page-header {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 37, 54, 0.07);
}

.dashboard-card {
  background: #ffffff;
  padding: 20px;
}

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

.dashboard-card-header h3 {
  color: #172033;
}

.dashboard-card-header > span {
  color: #848b9a;
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-processing-mobile .draft-list {
  background: linear-gradient(180deg, #2f8a70, #28765f);
  border-radius: 14px;
  padding: 14px;
  /* Full-size dashboard cards, not the sidebar's compact widget sizing (that .draft-item/.draft-meta
     styling is tuned for a ~230-280px sidebar and gets shrunk further by several height-based
     media queries elsewhere - none of that is appropriate for a full-width dashboard section, so
     everything below is restated at comfortable, readable sizes with !important where needed to
     win over those compact rules). One card per row, full width, no inner scroll. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-height: none !important;
  overflow: visible !important;
}

.dashboard-processing-mobile .draft-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px !important;
  border-radius: 14px !important;
}

.dashboard-processing-mobile .draft-item-text strong {
  font-size: 1.05rem !important;
}

.dashboard-processing-mobile .draft-item small {
  font-size: 0.85rem !important;
}

.dashboard-processing-mobile .draft-meta {
  /* Some height-based media queries hide .draft-meta entirely to save vertical space in the
     narrow sidebar on short screens - not appropriate here, so force it back on. */
  display: grid !important;
  gap: 10px 16px !important;
  margin: 14px 0 !important;
}

.dashboard-processing-mobile .draft-meta dt {
  font-size: 0.75rem !important;
}

.dashboard-processing-mobile .draft-meta dd {
  font-size: 0.92rem !important;
}

.dashboard-processing-mobile .draft-open-action {
  width: 100%;
  font-size: 1rem !important;
  padding: 14px !important;
}

.dashboard-financial-snapshot {
  padding: 16px 20px;
}

.dashboard-financial-snapshot .dashboard-card-header {
  margin-bottom: 12px;
}

.financial-stat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.financial-stat-grid > div,
.financial-stat-grid > button {
  background: #f7f7fa;
  border: 0;
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
}

.financial-stat-grid > button {
  cursor: pointer;
}

.financial-stat-grid > button:hover {
  background: #eeeaff;
  box-shadow: inset 0 0 0 1px rgba(69, 32, 166, 0.18);
}

.financial-stat-grid small {
  color: #7b8292;
}

.financial-stat-grid strong {
  color: #172033;
  font-size: 1.08rem;
}

.financial-stat-grid .profit-stat {
  background: #eeeaff;
  box-shadow: inset 0 0 0 1px rgba(69, 32, 166, 0.25);
}

.stock-overview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-balance-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.balance-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.balance-card p {
  color: #7b8292;
  line-height: 1.5;
}

.stock-total {
  color: #4520a6;
  font-size: 2.2rem;
  margin: 12px 0;
}

.dashboard-grade-stock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-grade-stock > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.dashboard-grade-stock span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.dashboard-grade-stock strong {
  color: var(--text);
  font-size: 1.05rem;
}

.stock-overview p {
  color: #7b8292;
  line-height: 1.5;
}

.dashboard-link {
  align-self: flex-start;
  margin-top: auto;
}

.stock-overview .dashboard-link:first-of-type {
  margin-top: 8px;
}

.dashboard-raw-stock-summary {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

.dashboard-processing-stock {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.dashboard-processing-stock span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.dashboard-processing-stock strong {
  color: var(--text);
  font-size: 1.05rem;
}

.dashboard-processing-hint {
  margin: 0 0 10px;
}

.dashboard-raw-stock-summary h4 {
  font-size: 0.95rem;
  margin: 0 0 10px;
}

.status-dot {
  background: #23b277;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.dashboard-batch-list {
  display: grid;
}

.dashboard-batch-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eceef3;
  color: #172033;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
  padding: 11px 0;
  text-align: left;
  width: 100%;
}

.dashboard-batch-row:last-child {
  border-bottom: 0;
}

.dashboard-batch-row strong,
.dashboard-batch-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-batch-row span {
  color: #7d8494;
  font-size: 0.82rem;
}

.dashboard-batch-row small {
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 5px 8px;
  text-transform: uppercase;
}

.dashboard-batch-row small.completed {
  background: #dff7ec;
  color: #10734a;
}

.dashboard-batch-row small.processing {
  background: #fff0c7;
  color: #8c6200;
}

.text-action {
  background: transparent;
  border: 0;
  color: #4520a6;
  cursor: pointer;
  font-weight: 800;
}

.quick-action-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.quick-action-grid button {
  align-items: center;
  background: #f7f7fa;
  border: 0;
  border-radius: 8px;
  color: #252d3e;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  gap: 9px;
  padding: 12px;
  text-align: left;
}

.quick-action-grid button:hover {
  background: #eeeaff;
  color: #4520a6;
}

.quick-action-grid span {
  align-items: center;
  background: #e9e4ff;
  border-radius: 7px;
  color: #4520a6;
  display: inline-flex;
  font-size: 0.68rem;
  height: 28px;
  justify-content: center;
  width: 28px;`r`n}`r`n`r`n.menu-icon svg {`r`n  width: 16px;`r`n  height: 16px;`r`n  display: block;`r`n  flex: 0 0 auto;`r`n  stroke: currentColor;`r`n}`r`n

.panel,
.kpi,
.settings-section,
.salary-section {
  border-color: #eceef3;
}

table thead,
thead {
  background: #f3f1fa;
}

.primary-action {
  background: #4520a6;
}

.primary-action:hover {
  background: #351680;
}

/* Widened from the old 1100px cutoff to 1400px so normal/small laptop widths (1366x768,
   1280x720) also get the roomier 2/3-column dashboard layout instead of staying at the full
   4/5-column desktop density. */
@media (max-width: 1400px) {
  .financial-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-summary-card.profit {
    grid-column: 1 / -1;
  }

  .dashboard-analytics-lower {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .dashboard-balance-grid {
    grid-template-columns: 1fr;
  }

  .global-search-wrapper {
    width: 26vw;
  }
}

@media (max-width: 900px) {
  .financial-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade-chart-groups {
    grid-template-columns: 1fr;
  }

  .global-search {
    margin-left: auto;
    width: min(42vw, 320px);
  }
}

/* Phone screens only: the sidebar becomes a slide-out drawer (hamburger + overlay) instead of a
   fixed in-page column. Above this width (tablet, laptop, desktop) the sidebar always stays fully
   open in normal flow - no auto icon-collapse anymore. */
@media (max-width: 600px) {
  .app-shell,
  body[data-theme] .app-shell {
    display: block;
  }

  .sidebar,
  body[data-theme] .sidebar {
    bottom: 0;
    height: 100vh;
    left: 0;
    max-width: 280px;
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    width: 84vw;
    z-index: 1000;
    /* The drawer is fixed/off-canvas, so it can't rely on the page scrolling past it - it needs
       its own scroll for when its total content (nav + Processing Batches) is taller than the
       screen. This replaces the separate inner scrollbar the Processing Batches list used to have. */
    overflow-y: auto;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* nav-tabs must size to its actual content (all nav buttons + the now-unbounded Processing
     Batches list) instead of being forced to fill exactly one screen's height via flex:1 - that
     forced box was shorter than the real content, so the overflow invisibly spilled past its own
     bottom edge and rendered on top of the footer below it. Sizing naturally lets .sidebar's own
     scroll (above) contain everything correctly, with no overlap. */
  .nav-tabs {
    flex: none;
  }

  .draft-list,
  .draft-item,
  .processing-widget-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .draft-item {
    display: block;
  }

  .sidebar-overlay {
    background: rgba(18, 23, 35, 0.52);
    border: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 990;
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }

  .mobile-menu-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    gap: 4px;
    padding: 5px;
  }

  .mobile-menu-toggle span {
    background: #252d3e;
    border-radius: 999px;
    height: 2px;
    width: 22px;
  }
}

@media (max-width: 680px) {
  .session-bar {
    align-items: center;
    padding: 10px 14px;
  }

  .header-leading {
    flex: 1;
    min-width: 0;
  }

  .top-program-identity {
    flex: initial;
  }

  .top-program-identity span,
  .header-icon-button,
  .user-profile-copy {
    display: none;
  }

  .global-search-wrapper {
    flex: 1 0 100%;
    max-width: none;
    order: 3;
    width: 100%;
  }

  .global-search-results {
    left: 0;
    transform: none;
    width: 100%;
  }

  .smart-search-result {
    grid-template-columns: minmax(130px, 1.4fr) minmax(80px, 0.7fr) minmax(80px, 0.7fr);
  }

  .smart-search-result > span:nth-child(4),
  .smart-search-result > span:nth-child(5) {
    display: none;
  }

  #logout-app {
    padding: 8px 11px;
  }

  .view {
    padding: 14px;
  }

  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .dashboard-welcome-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .analytics-summary-grid,
  .analytics-recent-grid {
    grid-template-columns: 1fr;
  }

  .analytics-summary-card.profit {
    grid-column: auto;
  }

  .analytics-chart-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-chart-controls {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .chart-mode-tabs {
    display: grid;
    width: 100%;
  }

  .chart-mode-tabs button {
    text-align: left;
  }

  .dashboard-metrics,
  .financial-stat-grid,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .financial-stat-grid .profit-stat {
    grid-column: auto;
  }

  .dashboard-batch-row {
    grid-template-columns: 1fr auto;
  }

  .dashboard-batch-row span {
    display: none;
  }
}

.cheque-section {
  display: none;
}

.cheque-tabs {
  margin-bottom: 30px;
}

#stock-view .module-tabs {
  margin-bottom: 30px;
}

.cheque-section[data-cheque-group="calendar"] .header-actions {
  align-items: center;
}

.cheque-section[data-cheque-group="calendar"] .header-actions strong {
  align-items: center;
  display: inline-flex;
  min-height: 42px;
  line-height: 1;
}

.cheque-section.active {
  display: block;
}

.cheque-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cheque-form-dialog {
  max-height: 92vh;
  max-width: 980px;
  overflow-y: auto;
  width: min(980px, calc(100vw - 32px));
}

.cheque-form-dialog > label:has(#cheque-remarks) {
  margin-bottom: 24px;
}

.cheque-reminder-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-cheque-list {
  display: grid;
  gap: 7px;
}

.dashboard-cheque-list button {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
  text-align: left;
}

.dashboard-cheque-list button > span {
  display: grid;
  gap: 3px;
}

.dashboard-cheque-list button > span:last-child {
  text-align: right;
}

.dashboard-cheque-list small {
  color: var(--muted);
}

.dashboard-overdue-cheques {
  color: #c43d3d;
}

.cheque-calendar-modes {
  margin-bottom: 14px;
}

.cheque-calendar-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 880px;
}

.cheque-calendar {
  overflow-x: auto;
}

.cheque-calendar-grid.mode-day {
  grid-template-columns: minmax(280px, 1fr);
  min-width: 0;
}

.cheque-calendar-day {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 130px;
  padding: 7px;
}

.cheque-calendar-weekday {
  color: var(--muted);
  font-size: 0.76rem;
  padding: 4px 8px;
  text-align: center;
  text-transform: uppercase;
}

.cheque-calendar-day.outside-month {
  opacity: 0.48;
}

.cheque-calendar-day > button {
  background: transparent;
  border: 0;
  color: var(--text);
  font-weight: 800;
  padding: 3px;
}

.cheque-calendar-day > div {
  display: grid;
  gap: 5px;
  margin-top: 5px;
}

.cheque-calendar-event {
  background: #dce8ff;
  border: 1px solid #9bb8f5;
  border-radius: 6px;
  color: #183d77;
  display: grid;
  gap: 2px;
  padding: 6px;
  text-align: left;
}

.cheque-calendar-event span,
.cheque-calendar-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Issued: amber/orange, shared with the direction-based "outgoing" tile colour. */
.cheque-calendar-event.cheque-issued { background: #fff1c2; border-color: #e8b923; color: #7a5a00; }
/* Cleared: dark green with light/white text for strong readability. */
.cheque-calendar-event.cheque-cleared { background: #0f5132; border-color: #0a3d25; color: #ffffff; }
.cheque-calendar-event.cheque-received { background: #c9f7de; border-color: #5ecb93; color: #0b6b3a; }
.cheque-calendar-event.cheque-overdue { background: #ffe7d1; border-color: #f0a76a; color: #a64b12; }
/* Replaced keeps the original neutral grey treatment (not part of the Cancelled/Bounced red family). */
.cheque-calendar-event.cheque-replaced { background: #e3e5e8; border-color: #b4b8bf; color: #555b65; }
/* Bounced: dark red, fully readable white text - signals a real payment failure. */
.cheque-calendar-event.cheque-bounced { background: #7a1f1f; border-color: #4a0f0f; color: #ffffff; }
/* Cancelled: same dark-red family as Bounced but muted/italicised to read as inactive rather than a failure. */
.cheque-calendar-event.cheque-cancelled { background: #5c3030; border-color: #3d1f1f; color: #e8caca; font-style: italic; opacity: 0.85; }
/* Draft cheques are shown in a lighter red - distinct from the dark-red Cancelled/Bounced family. */
.cheque-calendar-event.cheque-draft { background: #ffe1e1; border-color: #ef9b9b; color: #a12222; }
.cheque-calendar-event.direction-received { background: #c9f7de; border-color: #5ecb93; color: #0b6b3a; }
.cheque-calendar-event.direction-issued { background: #fff1c2; border-color: #e8b923; color: #7a5a00; }

.status-badge.cheque-scheduled { background: #dce8ff; color: #244fa1; }
/* Issued: amber/orange. */
.status-badge.cheque-issued { background: #fff1c2; color: #7a5a00; }
/* Cleared: dark green, white text for high contrast. */
.status-badge.cheque-cleared { background: #0f5132; color: #ffffff; }
.status-badge.cheque-received { background: #c9f7de; color: #0b6b3a; }
.status-badge.cheque-overdue { background: #ffe7d1; color: #a64b12; }
/* Replaced keeps the original neutral grey treatment. */
.status-badge.cheque-replaced { background: #e3e5e8; color: #555b65; }
/* Bounced: dark red, white text - a real payment failure. */
.status-badge.cheque-bounced { background: #7a1f1f; color: #ffffff; }
/* Cancelled: same dark-red family as Bounced, muted/italicised to read as inactive without losing readability. */
.status-badge.cheque-cancelled { background: #5c3030; color: #e8caca; font-style: italic; opacity: 0.85; }
/* Draft: red, but a lighter shade so it stays clearly distinct from the dark-red Cancelled/Bounced badges. */
.status-badge.cheque-draft { background: #ffe0e0; color: #b42121; }

/* Mirrors the "Issued" amber above - this payable status is driven directly by an issued cheque reservation. */
.status-badge.payable-cheque-issued { background: #fff1c2; color: #7a5a00; }
.status-badge.payable-partially-reserved-by-cheque { background: #fff1c2; color: #7a5a00; }
.status-badge.payable-paid-cleared { background: #d8f7e7; color: #087443; }

.cheque-issued-indicator {
  margin-top: 4px;
  font-size: 0.74rem;
  color: #6336a2;
}

.cheque-reopened-note {
  margin-top: 4px;
  font-size: 0.74rem;
  color: #7b8292;
  font-style: italic;
}

.cheque-direction-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  text-transform: uppercase;
}

.cheque-direction-badge.incoming { background: #c9f7de; color: #0b6b3a; }
.cheque-direction-badge.outgoing { background: #ffe3d6; color: #a1481a; }

.cheque-agenda {
  display: grid;
  gap: 8px;
}

.cheque-agenda > div {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 130px minmax(0, 1fr);
}

@media (max-width: 900px) {
  .cheque-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bill-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Final theme precedence after all shared and responsive component rules. */
body[data-theme="frosted"] {
  --bg: #dce9f6;
  --shell: #edf4fb;
  --surface: #ffffff;
  --surface-2: #e8f0f9;
  --text: #17223b;
  --muted: #697892;
  --line: #cbd9e8;
  --brand: #5065d8;
  --brand-dark: #374bb7;
  --brand-2: #e2e7ff;
  --chart-input: #5065d8;
  --chart-output: #4da9b5;
  --chart-profit: #b87eb4;
  --chart-grid: #cfdae7;
  --chart-text: #63728c;
  --chart-track: #e2ebf4;
  --shadow: none;
  background: #dce9f6;
  color: var(--text);
}

body[data-theme="frosted"] .app-shell,
body[data-theme="frosted"] .workspace {
  background: #edf4fb;
}

body[data-theme="frosted"] .sidebar {
  background: #d4e3f2;
  border-right-color: #bdcfe1;
  color: #17213a;
  backdrop-filter: none;
}

body[data-theme="frosted"] .brand-logo,
body[data-theme="frosted"] .sidebar-clock,
body[data-theme="frosted"] .session-bar,
body[data-theme="frosted"] .dashboard-welcome,
body[data-theme="frosted"] .dashboard-card,
body[data-theme="frosted"] .view > .panel,
body[data-theme="frosted"] .view > .kpi-grid,
body[data-theme="frosted"] .page-header {
  background: #ffffff;
  border-color: #cbd9e8;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-theme="frosted"][data-theme] .sidebar-clock strong,
body[data-theme="frosted"][data-theme] .sidebar-clock span,
body[data-theme="frosted"] .sidebar-company-name,
body[data-theme="frosted"] .draft-title,
body[data-theme="frosted"] .sidebar-footer,
body[data-theme="frosted"] .sidebar-footer strong,
body[data-theme="frosted"] .sidebar-footer a {
  color: #17213a;
}

body[data-theme="frosted"] .nav-tab,
body[data-theme="frosted"] .nav-tab:not(.active) {
  color: #53617b;
}

body[data-theme="frosted"] .nav-tab.active {
  background: #ffffff;
  color: #374bb7;
  box-shadow: none;
}

body[data-theme="frosted"] .nav-tab:not(.active):hover {
  background: #e5eef8;
  color: #263555;
}

body[data-theme="frosted"] .new-batch-action,
body[data-theme="frosted"] .primary-action {
  background: #5065d8;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="frosted"] .new-batch-action.secondary,
body[data-theme="frosted"] .ghost-action {
  background: #e5eafa;
  color: #374bb7;
  border-color: #cad3ee;
}

body[data-theme="frosted"] .draft-item,
body[data-theme="frosted"] .processing-widget-card {
  background: #ffffff;
  border: 1px solid #cbd9e8;
  color: #17213a;
}

body[data-theme="frosted"] .draft-item:hover,
body[data-theme="frosted"] .processing-widget-card:hover {
  background: #ffffff;
  border-color: #5065d8;
}

body[data-theme="frosted"] .processing-widget-card *,
body[data-theme="frosted"] .draft-item * {
  color: inherit;
}

body[data-theme="frosted"] input,
body[data-theme="frosted"] select,
body[data-theme="frosted"] textarea,
body[data-theme="frosted"] .global-search {
  background: #ffffff;
  border-color: #c6d5e5;
  color: #17213a;
}

body[data-theme="frosted"] .settings-tab.active,
body[data-theme="frosted"] .salary-tab.active,
body[data-theme="frosted"] .accounting-tab.active,
body[data-theme="frosted"] .theme-option:has(input:checked) {
  background: #e2e7ff;
  border-color: #aebbea;
  color: #374bb7;
}

body[data-theme="frosted"] table thead,
body[data-theme="frosted"] .table-head {
  background: #dfeaf5;
  color: #263555;
}

body[data-theme="frosted"] .dashboard-metric,
body[data-theme="frosted"] .dashboard-metric.purple {
  background: #6578dc;
  border-color: #6578dc;
  box-shadow: none;
  color: #ffffff;
}

body[data-theme="frosted"] .dashboard-metric.blue {
  background: #4e9ed3;
  border-color: #4e9ed3;
}

body[data-theme="frosted"] .dashboard-metric.green {
  background: #4da99c;
  border-color: #4da99c;
}

body[data-theme="frosted"] .dashboard-metric.orange {
  background: #b986bd;
  border-color: #b986bd;
}

body[data-theme="frosted"] .analytics-summary-card,
body[data-theme="frosted"] .financial-stat-grid > div,
body[data-theme="frosted"] .financial-stat-grid > button,
body[data-theme="frosted"] .quick-action-grid button,
body[data-theme="frosted"] .dashboard-grade-stock > div,
body[data-theme="frosted"] .cheque-calendar-day {
  background: #e8f0f9;
  border-color: #cbd9e8;
  box-shadow: none;
}

body[data-theme="frosted"] .analytics-summary-card.input {
  border-top-color: #5065d8;
}

body[data-theme="frosted"] .analytics-summary-card.output {
  border-top-color: #4da99c;
}

body[data-theme="frosted"] .analytics-summary-card.profit {
  border-top-color: #b986bd;
}

body[data-theme="frosted"] .modal,
body[data-theme="frosted"] .confirmation-dialog,
body[data-theme="frosted"] .global-search-results {
  background: #ffffff;
  border: 1px solid #cbd9e8;
  box-shadow: none;
}

body[data-theme="frosted"] .status-badge {
  box-shadow: none;
}

body[data-theme="frosted"] .panel,
body[data-theme="frosted"] .kpi,
body[data-theme="frosted"] .theme-option,
body[data-theme="frosted"] .report-action {
  border: 1px solid #cbd9e8;
  box-shadow: none;
}

body[data-theme="frosted"] .primary-action:hover,
body[data-theme="frosted"] .ghost-action:hover,
body[data-theme="frosted"] .new-batch-action:hover,
body[data-theme="frosted"] .dashboard-metric:hover,
body[data-theme="frosted"] .report-action:hover {
  box-shadow: none;
  transform: none;
}

body[data-theme="frosted"] .primary-action:hover,
body[data-theme="frosted"] .new-batch-action:hover {
  background: #4357c5;
}

body[data-theme="frosted"] .ghost-action:hover {
  background: #d8e0f6;
  border-color: #aebbea;
}

body[data-theme="frosted"] tbody tr:hover {
  background: #f0f5fb;
}

body[data-theme="dark-green"] {
  --bg: #071914;
  --shell: #0d211b;
  --surface: #123127;
  --surface-2: #173b30;
  --text: #f1fff7;
  --muted: #b4d3c5;
  --line: rgba(185, 226, 207, 0.18);
  --brand: #24b879;
  --brand-dark: #14895b;
  --brand-2: #1f4b3d;
  --danger: #ff7b7b;
  --success: #56e0a0;
  --chart-input: #56e0a0;
  --chart-output: #8ccf7e;
  --chart-profit: #f2c86b;
  --chart-grid: rgba(210, 246, 226, 0.16);
  --chart-text: #b4d3c5;
  --chart-track: #1c4436;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --deep-shadow: 0 28px 64px rgba(0, 0, 0, 0.36);
  background:
    radial-gradient(circle at top right, rgba(59, 179, 116, 0.24), transparent 34%),
    linear-gradient(135deg, #061410 0%, #0a1e18 46%, #102d22 100%);
  color: var(--text);
}

body[data-theme="dark-green"] .app-shell,
body[data-theme="dark-green"] .workspace {
  background: #0b1c17;
}

body[data-theme="dark-green"] .sidebar {
  background: linear-gradient(180deg, #092119 0%, #0b3024 52%, #071914 100%);
  border-right-color: rgba(132, 226, 181, 0.18);
  color: #f1fff7;
}

body[data-theme="dark-green"] .brand-logo,
body[data-theme="dark-green"] .sidebar-clock,
body[data-theme="dark-green"] .session-bar,
body[data-theme="dark-green"] .dashboard-welcome,
body[data-theme="dark-green"] .dashboard-card,
body[data-theme="dark-green"] .view > .panel,
body[data-theme="dark-green"] .view > .kpi-grid,
body[data-theme="dark-green"] .page-header,
body[data-theme="dark-green"] .settings-section,
body[data-theme="dark-green"] .salary-section,
body[data-theme="dark-green"] .modal,
body[data-theme="dark-green"] .confirmation-dialog,
body[data-theme="dark-green"] .global-search-results {
  background: linear-gradient(145deg, rgba(18, 49, 39, 0.96), rgba(11, 31, 25, 0.96));
  border-color: rgba(145, 221, 184, 0.18);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  color: #f1fff7;
}

body[data-theme="dark-green"] .brand-logo {
  background: #f7fff9;
}

body[data-theme="dark-green"] .sidebar-clock {
  background: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark-green"][data-theme] .sidebar-clock strong,
body[data-theme="dark-green"][data-theme] .sidebar-clock span,
body[data-theme="dark-green"] .sidebar-company-name,
body[data-theme="dark-green"] .draft-title,
body[data-theme="dark-green"] .sidebar-footer,
body[data-theme="dark-green"] .sidebar-footer strong,
body[data-theme="dark-green"] .sidebar-footer a,
body[data-theme="dark-green"] .top-program-identity strong,
body[data-theme="dark-green"] .user-profile-copy strong,
body[data-theme="dark-green"] h2,
body[data-theme="dark-green"] h3,
body[data-theme="dark-green"] .dashboard-welcome h2,
body[data-theme="dark-green"] .dashboard-card-header h3,
body[data-theme="dark-green"] .stock-total,
body[data-theme="dark-green"] .analytics-activity-row b,
body[data-theme="dark-green"] .smart-result-main > strong {
  color: #f1fff7;
}

body[data-theme="dark-green"] .eyebrow,
body[data-theme="dark-green"] .panel-note,
body[data-theme="dark-green"] .field-hint,
body[data-theme="dark-green"] .sidebar-footer span,
body[data-theme="dark-green"] small,
body[data-theme="dark-green"] p {
  color: #b4d3c5;
}

body[data-theme="dark-green"] .nav-tab,
body[data-theme="dark-green"] .nav-tab:not(.active) {
  color: #c5e8d8;
}

body[data-theme="dark-green"] .nav-tab.active {
  background: #f1fff7;
  color: #0d3527;
  box-shadow: 0 12px 26px rgba(36, 184, 121, 0.18);
}

body[data-theme="dark-green"] .nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-theme="dark-green"] .menu-icon {
  background: rgba(86, 224, 160, 0.16);
  color: #86f0bd;
}

body[data-theme="dark-green"] .nav-tab.active .menu-icon {
  background: #d9fbe8;
  color: #0c6a45;
}

body[data-theme="dark-green"] .new-batch-action,
body[data-theme="dark-green"] .primary-action {
  background: linear-gradient(135deg, #31c985, #159c66);
  color: #052017;
  box-shadow: 0 14px 28px rgba(36, 184, 121, 0.24);
}

body[data-theme="dark-green"] .new-batch-action.secondary,
body[data-theme="dark-green"] .ghost-action,
body[data-theme="dark-green"] .file-action {
  background: rgba(241, 255, 247, 0.09);
  border-color: rgba(145, 221, 184, 0.22);
  color: #d9fbe8;
}

body[data-theme="dark-green"] .new-batch-action.secondary:hover,
body[data-theme="dark-green"] .ghost-action:hover,
body[data-theme="dark-green"] .file-action:hover {
  background: rgba(241, 255, 247, 0.14);
  border-color: rgba(217, 251, 232, 0.55);
}

body[data-theme="dark-green"] .draft-section,
body[data-theme="dark-green"] .nav-divider,
body[data-theme="dark-green"] .sidebar-footer {
  border-color: rgba(217, 251, 232, 0.18);
}

body[data-theme="dark-green"] .draft-item,
body[data-theme="dark-green"] .processing-widget-card {
  background: rgba(19, 62, 48, 0.9);
  border: 1px solid rgba(145, 221, 184, 0.2);
  color: #f1fff7;
}

body[data-theme="dark-green"] .draft-item:hover,
body[data-theme="dark-green"] .processing-widget-card:hover {
  background: rgba(19, 62, 48, 0.9);
  border-color: #ffffff;
}

body[data-theme="dark-green"] .processing-widget-card *,
body[data-theme="dark-green"] .draft-item * {
  color: inherit;
}

body[data-theme="dark-green"] .dashboard-metric,
body[data-theme="dark-green"] .dashboard-metric.purple {
  background: linear-gradient(135deg, #175d43, #0f3e2f);
  border-color: rgba(86, 224, 160, 0.35);
  color: #f1fff7;
}

body[data-theme="dark-green"] .dashboard-metric.blue {
  background: linear-gradient(135deg, #17636d, #0e4048);
}

body[data-theme="dark-green"] .dashboard-metric.green {
  background: linear-gradient(135deg, #1f7b4f, #155538);
}

body[data-theme="dark-green"] .dashboard-metric.orange {
  background: linear-gradient(135deg, #8f7130, #65491b);
}

body[data-theme="dark-green"] .dashboard-metric .metric-icon,
body[data-theme="dark-green"] .dashboard-metric small,
body[data-theme="dark-green"] .dashboard-metric strong {
  color: #ffffff;
}

body[data-theme="dark-green"] .analytics-summary-card,
body[data-theme="dark-green"] .financial-stat-grid > div,
body[data-theme="dark-green"] .financial-stat-grid > button,
body[data-theme="dark-green"] .quick-action-grid button,
body[data-theme="dark-green"] .dashboard-grade-stock > div,
body[data-theme="dark-green"] .cheque-calendar-day,
body[data-theme="dark-green"] .kpi,
body[data-theme="dark-green"] .theme-option,
body[data-theme="dark-green"] .report-action {
  background: rgba(241, 255, 247, 0.06);
  border: 1px solid rgba(145, 221, 184, 0.18);
  box-shadow: none;
  color: #f1fff7;
}

body[data-theme="dark-green"] .analytics-summary-card.input {
  border-top-color: #56e0a0;
}

body[data-theme="dark-green"] .analytics-summary-card.output {
  border-top-color: #8ccf7e;
}

body[data-theme="dark-green"] .analytics-summary-card.profit {
  border-top-color: #f2c86b;
}

body[data-theme="dark-green"] input,
body[data-theme="dark-green"] select,
body[data-theme="dark-green"] textarea,
body[data-theme="dark-green"] .global-search {
  background: #f7fff9;
  border-color: rgba(145, 221, 184, 0.36);
  color: #08241a;
}

body[data-theme="dark-green"] input::placeholder,
body[data-theme="dark-green"] textarea::placeholder {
  color: #6b8579;
}

body[data-theme="dark-green"] input:focus,
body[data-theme="dark-green"] select:focus,
body[data-theme="dark-green"] textarea:focus {
  border-color: #56e0a0;
  box-shadow: 0 0 0 4px rgba(86, 224, 160, 0.16);
}

body[data-theme="dark-green"] table thead,
body[data-theme="dark-green"] .table-head {
  background: #1b3f33;
  color: #e7fff1;
}

body[data-theme="dark-green"] th {
  color: #e7fff1;
}

body[data-theme="dark-green"] td {
  color: #f1fff7;
}

body[data-theme="dark-green"] tbody tr {
  border-color: rgba(145, 221, 184, 0.14);
}

body[data-theme="dark-green"] tbody tr:hover {
  background: rgba(86, 224, 160, 0.08);
}

body[data-theme="dark-green"] .settings-tab,
body[data-theme="dark-green"] .salary-tab,
body[data-theme="dark-green"] .accounting-tab,
body[data-theme="dark-green"] .chart-mode-tabs button {
  background: rgba(241, 255, 247, 0.06);
  border-color: rgba(145, 221, 184, 0.2);
  color: #cceedd;
}

body[data-theme="dark-green"] .settings-tab.active,
body[data-theme="dark-green"] .salary-tab.active,
body[data-theme="dark-green"] .accounting-tab.active,
body[data-theme="dark-green"] .chart-mode-tabs button.active,
body[data-theme="dark-green"] .theme-option:has(input:checked) {
  background: rgba(86, 224, 160, 0.18);
  border-color: rgba(86, 224, 160, 0.6);
  color: #ffffff;
}

body[data-theme="dark-green"] .status-badge {
  box-shadow: none;
}

body[data-theme="dark-green"] .danger-button,
body[data-theme="dark-green"] .danger-action,
body[data-theme="dark-green"] .remove-line {
  background: #8d2727;
  color: #fff4f4;
}

body[data-theme="azure"] .app-shell,
body[data-theme="azure"] .workspace {
  background: #eaf3ff;
}

body[data-theme="azure"] .sidebar {
  background: #116fa8;
  border-right-color: #0d6094;
  color: #ffffff;
}

body[data-theme="azure"] .brand-logo,
body[data-theme="azure"] .session-bar,
body[data-theme="azure"] .dashboard-welcome,
body[data-theme="azure"] .dashboard-card,
body[data-theme="azure"] .view > .panel,
body[data-theme="azure"] .view > .kpi-grid,
body[data-theme="azure"] .page-header {
  background: #ffffff;
  border-color: #d9e6f2;
}

body[data-theme="azure"] .sidebar-clock {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-theme="azure"][data-theme] .sidebar-clock strong,
body[data-theme="azure"][data-theme] .sidebar-clock span,
body[data-theme="azure"] .sidebar-company-name,
body[data-theme="azure"] .draft-title,
body[data-theme="azure"] .sidebar-footer,
body[data-theme="azure"] .sidebar-footer strong,
body[data-theme="azure"] .sidebar-footer a {
  color: #ffffff;
}

body[data-theme="azure"] .nav-tab,
body[data-theme="azure"] .nav-tab:not(.active) {
  color: rgba(255, 255, 255, 0.82);
}

body[data-theme="azure"] .nav-tab.active {
  background: #ffffff;
  color: #0d669e;
}

body[data-theme="azure"] .nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

body[data-theme="azure"] .new-batch-action {
  background: #ff9b6b;
  color: #17233f;
}

body[data-theme="azure"] .new-batch-action.secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body[data-theme="azure"] .draft-item,
body[data-theme="azure"] .processing-widget-card {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

body[data-theme="azure"] .processing-widget-card:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: #ffffff;
}

body[data-theme="azure"] .dashboard-metric,
body[data-theme="azure"] .dashboard-metric.purple,
body[data-theme="azure"] .dashboard-metric.blue,
body[data-theme="azure"] .dashboard-metric.green,
body[data-theme="azure"] .dashboard-metric.orange {
  background: #ffffff;
  border: 1px solid #d2e2f1;
  color: #17233f;
  box-shadow: 0 7px 20px rgba(15, 87, 134, 0.07);
}

body[data-theme="azure"] .dashboard-metric.blue {
  background: #e7f3ff;
}

body[data-theme="azure"] .dashboard-metric.green {
  background: #e4f8f8;
}

body[data-theme="azure"] .dashboard-metric.orange {
  background: #fff0e9;
}

body[data-theme="azure"] .financial-stat-grid > div,
body[data-theme="azure"] .financial-stat-grid > button,
body[data-theme="azure"] .quick-action-grid button {
  background: #eef5fd;
}

body[data-theme="azure"] .financial-stat-grid .profit-stat {
  background: #e2f4f6;
}

body[data-theme="azure"] .analytics-summary-card {
  background: #ffffff;
  border-color: #d9e6f2;
}

body[data-theme="azure"] .analytics-summary-card::before {
  background: #167eb7;
}

body[data-theme="azure"] .analytics-summary-card.output::before {
  background: #55ced1;
}

body[data-theme="azure"] .analytics-summary-card.profit::before {
  background: #ff9869;
}

body[data-theme="azure"] .primary-action {
  background: #147bb4;
  color: #ffffff;
}

body[data-theme="azure"] .ghost-action,
body[data-theme="azure"] .file-action {
  background: #dfeefa;
  color: #0d669e;
}

body[data-theme="azure"] input,
body[data-theme="azure"] select,
body[data-theme="azure"] textarea {
  background: #ffffff;
  border-color: #cdddea;
  color: #17233f;
}

body[data-theme="azure"] thead,
body[data-theme="azure"] table thead {
  background: #e5f0fa;
}

body[data-theme="lavender"] .app-shell,
body[data-theme="lavender"] .workspace {
  background: #f8f3fc;
}

body[data-theme="lavender"] .sidebar {
  background: #f2e9f8;
  border-right-color: #ddcce7;
  color: #351441;
}

body[data-theme="lavender"] .brand-logo,
body[data-theme="lavender"] .sidebar-clock,
body[data-theme="lavender"] .session-bar,
body[data-theme="lavender"] .dashboard-welcome,
body[data-theme="lavender"] .dashboard-card,
body[data-theme="lavender"] .view > .panel,
body[data-theme="lavender"] .view > .kpi-grid,
body[data-theme="lavender"] .page-header {
  background: #fffaff;
  border-color: #e5d8eb;
}

body[data-theme="lavender"] .nav-tab,
body[data-theme="lavender"] .nav-tab:not(.active) {
  color: #594461;
}

body[data-theme="lavender"] .nav-tab.active {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .nav-tab:not(.active):hover {
  background: #eadcf2;
  color: #351441;
}

body[data-theme="lavender"] .new-batch-action,
body[data-theme="lavender"] .primary-action {
  background: #4a1c5e;
  color: #ffffff;
}

body[data-theme="lavender"] .new-batch-action.secondary,
body[data-theme="lavender"] .draft-item,
body[data-theme="lavender"] .processing-widget-card {
  background: #fffaff;
  color: #4a1c5e;
}

body[data-theme="lavender"] .dashboard-metric,
body[data-theme="lavender"] .dashboard-metric.purple,
body[data-theme="lavender"] .dashboard-metric.blue,
body[data-theme="lavender"] .dashboard-metric.green,
body[data-theme="lavender"] .dashboard-metric.orange {
  background: #f0e6f7;
  border: 1px solid #ddcce7;
  color: #30123d;
  box-shadow: none;
}

body[data-theme="lavender"] .dashboard-metric.green {
  background: #f5eaf5;
}

body[data-theme="lavender"] .dashboard-metric.orange {
  background: #f2e8f8;
}

body[data-theme="lavender"] .financial-stat-grid > div,
body[data-theme="lavender"] .financial-stat-grid > button,
body[data-theme="lavender"] .quick-action-grid button {
  background: #f5eef9;
}

body[data-theme="lavender"] .ghost-action,
body[data-theme="lavender"] .file-action {
  background: #eee4f5;
  color: #4a1c5e;
}

body[data-theme="lavender"] input,
body[data-theme="lavender"] select,
body[data-theme="lavender"] textarea {
  background: #fffaff;
  border-color: #ddcfe5;
  color: #2b1733;
}

body[data-theme="lavender"] thead,
body[data-theme="lavender"] table thead {
  background: #f0e7f6;
}




body[data-theme="midnight-bloom"] {
  --bg: #efeaf6;
  --shell: #f7f2fb;
  --surface: #fffdfa;
  --surface-2: #f7eff8;
  --text: #211634;
  --muted: #756884;
  --line: rgba(92, 61, 120, 0.16);
  --brand: #6f4ce6;
  --brand-dark: #4f34bd;
  --brand-2: #efe8ff;
  --danger: #df5f6c;
  --success: #22a57b;
  --chart-input: #6f4ce6;
  --chart-output: #29b49f;
  --chart-profit: #ff9c72;
  --chart-grid: rgba(114, 88, 150, 0.14);
  --chart-text: #67587a;
  --chart-track: #ece3f7;
  --shadow: 0 16px 34px rgba(89, 57, 130, 0.12);
  --deep-shadow: 0 28px 58px rgba(71, 42, 110, 0.16);
  background:
    radial-gradient(circle at top left, rgba(255, 197, 214, 0.28), transparent 26%),
    radial-gradient(circle at top right, rgba(142, 192, 255, 0.2), transparent 28%),
    linear-gradient(135deg, #f3eef9 0%, #efe8f8 44%, #f8f4fb 100%);
  color: var(--text);
}

body[data-theme="midnight-bloom"] .app-shell,
body[data-theme="midnight-bloom"] .workspace {
  background: #f8f4fb;
}

body[data-theme="midnight-bloom"] .sidebar {
  background: linear-gradient(180deg, #22153d 0%, #2f1e57 52%, #3b2370 100%);
  border-right-color: rgba(255, 255, 255, 0.1);
  color: #f8f3ff;
}

body[data-theme="midnight-bloom"] .brand-logo,
body[data-theme="midnight-bloom"] .sidebar-clock,
body[data-theme="midnight-bloom"] .session-bar,
body[data-theme="midnight-bloom"] .dashboard-welcome,
body[data-theme="midnight-bloom"] .dashboard-card,
body[data-theme="midnight-bloom"] .view > .panel,
body[data-theme="midnight-bloom"] .view > .kpi-grid,
body[data-theme="midnight-bloom"] .page-header,
body[data-theme="midnight-bloom"] .settings-section,
body[data-theme="midnight-bloom"] .salary-section,
body[data-theme="midnight-bloom"] .modal,
body[data-theme="midnight-bloom"] .confirmation-dialog,
body[data-theme="midnight-bloom"] .global-search-results {
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.96), rgba(249, 242, 251, 0.97));
  border-color: rgba(122, 90, 156, 0.14);
  box-shadow: 0 18px 36px rgba(103, 77, 133, 0.12);
  color: #211634;
}

body[data-theme="midnight-bloom"] .brand-logo {
  background: linear-gradient(180deg, #ffffff, #fff8fd);
}

body[data-theme="midnight-bloom"] .sidebar-clock {
  background: rgba(255, 255, 255, 0.12);
}

body[data-theme="midnight-bloom"][data-theme] .sidebar-clock strong,
body[data-theme="midnight-bloom"][data-theme] .sidebar-clock span,
body[data-theme="midnight-bloom"] .sidebar-company-name,
body[data-theme="midnight-bloom"] .draft-title,
body[data-theme="midnight-bloom"] .sidebar-footer,
body[data-theme="midnight-bloom"] .sidebar-footer strong,
body[data-theme="midnight-bloom"] .sidebar-footer a {
  color: #f8f3ff;
}

body[data-theme="midnight-bloom"] .sidebar-footer span,
body[data-theme="midnight-bloom"] .sidebar .eyebrow,
body[data-theme="midnight-bloom"] .version-label,
body[data-theme="midnight-bloom"] .brand-subtitle,
body[data-theme="midnight-bloom"] .draft-empty,
body[data-theme="midnight-bloom"] .draft-item small {
  color: rgba(248, 243, 255, 0.72);
}

body[data-theme="midnight-bloom"] .top-program-identity strong,
body[data-theme="midnight-bloom"] .user-profile-copy strong,
body[data-theme="midnight-bloom"] h2,
body[data-theme="midnight-bloom"] h3,
body[data-theme="midnight-bloom"] .dashboard-welcome h2,
body[data-theme="midnight-bloom"] .dashboard-card-header h3,
body[data-theme="midnight-bloom"] .stock-total,
body[data-theme="midnight-bloom"] .analytics-activity-row b,
body[data-theme="midnight-bloom"] .smart-result-main > strong,
body[data-theme="midnight-bloom"] .batch-number-display {
  color: #211634;
}

body[data-theme="midnight-bloom"] .eyebrow,
body[data-theme="midnight-bloom"] .panel-note,
body[data-theme="midnight-bloom"] .field-hint,
body[data-theme="midnight-bloom"] small,
body[data-theme="midnight-bloom"] p,
body[data-theme="midnight-bloom"] .top-program-identity span,
body[data-theme="midnight-bloom"] .user-profile-copy small {
  color: #756884;
}

body[data-theme="midnight-bloom"] .nav-tab,
body[data-theme="midnight-bloom"] .nav-tab:not(.active) {
  color: rgba(248, 243, 255, 0.88);
}

body[data-theme="midnight-bloom"] .nav-tab.active {
  background: linear-gradient(135deg, #fff7fb, #f4ecff);
  color: #3c246d;
  box-shadow: 0 14px 28px rgba(25, 15, 46, 0.18);
}

body[data-theme="midnight-bloom"] .nav-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-theme="midnight-bloom"] .menu-icon {
  background: rgba(255, 207, 224, 0.14);
  color: #ffd7e6;
}

body[data-theme="midnight-bloom"] .nav-tab.active .menu-icon {
  background: #efe3ff;
  color: #6f4ce6;
}

body[data-theme="midnight-bloom"] .new-batch-action,
body[data-theme="midnight-bloom"] .primary-action {
  background: linear-gradient(135deg, #7550ec, #4f34bd);
  color: #ffffff;
  box-shadow: 0 16px 30px rgba(97, 67, 173, 0.24);
}

body[data-theme="midnight-bloom"] .new-batch-action.secondary,
body[data-theme="midnight-bloom"] .ghost-action,
body[data-theme="midnight-bloom"] .file-action {
  background: #f6ecfb;
  border-color: rgba(111, 76, 230, 0.18);
  color: #4f34bd;
}

body[data-theme="midnight-bloom"] .new-batch-action.secondary:hover,
body[data-theme="midnight-bloom"] .ghost-action:hover,
body[data-theme="midnight-bloom"] .file-action:hover {
  background: #efe3fb;
  border-color: rgba(111, 76, 230, 0.34);
}

body[data-theme="midnight-bloom"] .draft-section,
body[data-theme="midnight-bloom"] .nav-divider,
body[data-theme="midnight-bloom"] .sidebar-footer {
  border-color: rgba(255, 255, 255, 0.14);
}

body[data-theme="midnight-bloom"] .draft-item,
body[data-theme="midnight-bloom"] .processing-widget-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8f3ff;
}

body[data-theme="midnight-bloom"] .draft-item:hover,
body[data-theme="midnight-bloom"] .processing-widget-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.1));
  border-color: #ffffff;
}

body[data-theme="midnight-bloom"] .processing-widget-card *,
body[data-theme="midnight-bloom"] .draft-item * {
  color: inherit;
}

body[data-theme="midnight-bloom"] .dashboard-metric,
body[data-theme="midnight-bloom"] .dashboard-metric.purple {
  background: linear-gradient(135deg, #7250e6, #5335c5);
  border-color: rgba(111, 76, 230, 0.28);
  color: #ffffff;
}

body[data-theme="midnight-bloom"] .dashboard-metric.blue {
  background: linear-gradient(135deg, #47a6c7, #2d7fa8);
}

body[data-theme="midnight-bloom"] .dashboard-metric.green {
  background: linear-gradient(135deg, #32b78f, #23916f);
}

body[data-theme="midnight-bloom"] .dashboard-metric.orange {
  background: linear-gradient(135deg, #ff9f76, #f47d56);
}

body[data-theme="midnight-bloom"] .dashboard-metric .metric-icon,
body[data-theme="midnight-bloom"] .dashboard-metric small,
body[data-theme="midnight-bloom"] .dashboard-metric strong {
  color: #ffffff;
}

body[data-theme="midnight-bloom"] .analytics-summary-card,
body[data-theme="midnight-bloom"] .financial-stat-grid > div,
body[data-theme="midnight-bloom"] .financial-stat-grid > button,
body[data-theme="midnight-bloom"] .quick-action-grid button,
body[data-theme="midnight-bloom"] .dashboard-grade-stock > div,
body[data-theme="midnight-bloom"] .cheque-calendar-day,
body[data-theme="midnight-bloom"] .kpi,
body[data-theme="midnight-bloom"] .theme-option,
body[data-theme="midnight-bloom"] .report-action {
  background: linear-gradient(180deg, #fffdfa, #f8f0fb);
  border: 1px solid rgba(122, 90, 156, 0.14);
  box-shadow: none;
  color: #211634;
}

body[data-theme="midnight-bloom"] .analytics-summary-card.input {
  border-top-color: #6f4ce6;
}

body[data-theme="midnight-bloom"] .analytics-summary-card.output {
  border-top-color: #29b49f;
}

body[data-theme="midnight-bloom"] .analytics-summary-card.profit {
  border-top-color: #ff9c72;
}

body[data-theme="midnight-bloom"] input,
body[data-theme="midnight-bloom"] select,
body[data-theme="midnight-bloom"] textarea,
body[data-theme="midnight-bloom"] .global-search {
  background: #fffdfa;
  border-color: rgba(122, 90, 156, 0.18);
  color: #26193a;
}

body[data-theme="midnight-bloom"] input::placeholder,
body[data-theme="midnight-bloom"] textarea::placeholder {
  color: #8a7b98;
}

body[data-theme="midnight-bloom"] input:focus,
body[data-theme="midnight-bloom"] select:focus,
body[data-theme="midnight-bloom"] textarea:focus {
  border-color: #6f4ce6;
  box-shadow: 0 0 0 4px rgba(111, 76, 230, 0.12);
}

body[data-theme="midnight-bloom"] table thead,
body[data-theme="midnight-bloom"] .table-head {
  background: #f0e8fa;
  color: #4b3961;
}

body[data-theme="midnight-bloom"] th {
  color: #4b3961;
}

body[data-theme="midnight-bloom"] td {
  color: #2f2143;
}

body[data-theme="midnight-bloom"] tbody tr {
  border-color: rgba(122, 90, 156, 0.12);
}

body[data-theme="midnight-bloom"] tbody tr:hover {
  background: #faf3ff;
}

body[data-theme="midnight-bloom"] .settings-tab,
body[data-theme="midnight-bloom"] .salary-tab,
body[data-theme="midnight-bloom"] .accounting-tab,
body[data-theme="midnight-bloom"] .chart-mode-tabs button {
  background: #fff8fd;
  border-color: rgba(122, 90, 156, 0.15);
  color: #6a5a7f;
}

body[data-theme="midnight-bloom"] .settings-tab.active,
body[data-theme="midnight-bloom"] .salary-tab.active,
body[data-theme="midnight-bloom"] .accounting-tab.active,
body[data-theme="midnight-bloom"] .chart-mode-tabs button.active,
body[data-theme="midnight-bloom"] .theme-option:has(input:checked) {
  background: linear-gradient(135deg, #f3e7ff, #ffeef5);
  border-color: rgba(111, 76, 230, 0.28);
  color: #3f2b5f;
  box-shadow: 0 10px 24px rgba(126, 94, 167, 0.12);
}

body[data-theme="midnight-bloom"] .status-badge {
  box-shadow: none;
}

body[data-theme="midnight-bloom"] .danger-button,
body[data-theme="midnight-bloom"] .danger-action,
body[data-theme="midnight-bloom"] .remove-line {
  background: #d95f6d;
  color: #fff8f9;
}

body[data-theme="midnight-bloom"] .draft-title {
  color: rgba(248, 243, 255, 0.92);
}

body[data-theme="midnight-bloom"] .draft-item small,
body[data-theme="midnight-bloom"] .draft-meta dt,
body[data-theme="midnight-bloom"] .processing-widget-card small {
  color: rgba(248, 243, 255, 0.82);
}

body[data-theme="midnight-bloom"] .draft-item strong,
body[data-theme="midnight-bloom"] .draft-meta dd,
body[data-theme="midnight-bloom"] .processing-widget-card strong,
body[data-theme="midnight-bloom"] .processing-widget-card dd,
body[data-theme="midnight-bloom"] .processing-widget-card .draft-open-action {
  color: #ffffff;
}

body[data-theme="midnight-bloom"] .processing-widget-card .status-badge.processing,
body[data-theme="midnight-bloom"] .draft-item .status-badge.processing {
  background: #fff1c7;
  color: #8a5b00;
}

body[data-theme="midnight-bloom"] .processing-widget-card .draft-open-action {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="midnight-bloom"] .processing-widget-card .draft-open-action:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
}


.install-app-button {
  gap: 8px;
  padding: 0 12px;
  width: auto;
  min-width: 132px;
}

.install-app-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.install-app-button span {
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .install-app-button span {
    display: none;
  }

  .install-app-button {
    min-width: 38px;
    padding: 0;
    width: 38px;
  }
}