:root {
  --brand: #0f6b5b;
  --brand-dark: #0a4f43;
  --surface: #f4efe8;
  --panel: #fffdf9;
  --text: #17211d;
  --muted: #61706a;
  --border: rgba(23, 33, 29, 0.12);
  --shadow: 0 24px 60px rgba(15, 34, 28, 0.12);
  --font-sans: "Lato", system-ui, sans-serif;
  --font-mono: "DM Mono", monospace;
  --bg: #f0fdfc;
  --surface2: #ccfbf4;
  --surface3: #99f6e4;
  --border-md: rgba(15, 118, 110, 0.15);
  --text-2: #115e59;
  --text-3: #5eadA8;
  --accent: #0f766e;
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --transition: 150ms ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  height: 36px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: #2a2a2a;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-md);
}

.btn-secondary:hover {
  background: var(--surface2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(135deg, #efe6db 0%, #f8f5ef 45%, #ede4d7 100%);
}

a {
  color: inherit;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 48px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 46%),
    linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.brand-panel::before,
.brand-panel::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.brand-panel::before {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -90px;
}

.brand-panel::after {
  width: 220px;
  height: 220px;
  bottom: 40px;
  left: -60px;
}

.brand-panel__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-image {
  width: min(100%, 400px);
  height: auto;
  display: block;
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(255, 255, 255, 0.28));
}

.form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.form-card {
  width: min(100%, 460px);
  padding: 44px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.form-card__eyebrow {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.form-card h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.login-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.form-input {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font: inherit;
  color: var(--text);
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: rgba(15, 107, 91, 0.8);
  box-shadow: 0 0 0 4px rgba(15, 107, 91, 0.12);
  transform: translateY(-1px);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.checkbox-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.checkbox-group input {
  accent-color: var(--brand);
}

.text-link {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.login-button {
  margin-top: 6px;
  padding: 17px 22px;
  border: none;
  border-radius: 18px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(135deg, #0f6b5b 0%, #15937b 100%);
  box-shadow: 0 18px 30px rgba(15, 107, 91, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-button:disabled {
  cursor: wait;
  opacity: 0.8;
  transform: none;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 32px rgba(15, 107, 91, 0.28);
}

.form-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: var(--brand-dark);
  font-weight: 600;
}

.form-status.is-error {
  color: #b42318;
}

.form-status.is-success {
  color: var(--brand-dark);
}

.table-page,
.main-page,
.clients-page,
.temp-page,
.notes-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", "Manrope", sans-serif;
  color: var(--text);
  background: #fbf9f7;
}

.main-page .table-header,
.clients-page .table-header,
.table-page .table-header,
.settings-page .table-header,
.installations-page .table-header,
.quotation-page .table-header,
.temp-page .table-header,
.notes-page .table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 24px;
  background: #0f6b5b;
  border-bottom: 1px solid #0d5e4f;
  box-shadow: 0 8px 22px rgba(15, 107, 91, 0.18);
}

.main-page .table-header__logo,
.clients-page .table-header__logo,
.table-page .table-header__logo,
.settings-page .table-header__logo,
.installations-page .table-header__logo,
.quotation-page .table-header__logo,
.temp-page .table-header__logo,
.notes-page .table-header__logo {
  width: 110px;
  max-width: 42vw;
  display: block;
  filter: brightness(0) invert(1);
}

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

.header-notification-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #eaf4ef;
  cursor: pointer;
}

.header-notification-button__icon {
  font-size: 1.18rem;
  line-height: 1;
  filter: grayscale(1);
}

.header-notification-button__badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d7282f;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

.header-user-email {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 600;
}

.header-text-button {
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.75rem;
}

.header-text-button:hover {
  color: #ffffff;
}

.header-text-button--icon {
  font-size: 1.35rem;
  line-height: 1;
}

.table-content {
  padding: 96px 24px 40px;
}

.table-page--v2 .table-content {
  height: calc(100vh - var(--new-topbar-height));
  padding-bottom: 12px;
  overflow: hidden;
}

.table-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.table-page--v2 .table-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.hero-copy h1 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.hero-copy h1 span {
  color: #0f6b5b;
}

.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.table-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

#tableUserStatus {
  display: none;
}

.overview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 18px;
  margin-bottom: 0;
  padding: 10px;
}

@media (min-width: 1201px) {
  .table-page--v2 .overview-shell {
    grid-template-columns: minmax(0, 1fr) 600px;
  }
}

.overview-shell__left {
  display: grid;
  gap: 14px;
}

.overview-grid {
  display: grid;
  gap: 14px;
}

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

.table-page--v2 .overview-grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  min-width: 0;
}


.overview-card--hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.overview-grid--metrics {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.table-page--v2 .overview-grid--metrics {
  display: contents;
}

.table-page--v2 .overview-shell__left,
.table-page--v2 .overview-grid--stats,
.table-page--v2 .overview-grid--metrics,
.table-page--v2 .overview-card {
  min-width: 0;
}

.overview-card--hero h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.homepage-page {
  --new-sidebar-width: 180px;
  --new-topbar-height: 52px;
}

.homepage-page .homepage-topbar {
  position: fixed;
  inset: 0 0 auto var(--new-sidebar-width);
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  min-height: var(--new-topbar-height);
  padding: 0;
  background: #fffdfb;
  border-bottom: 1px solid #ece6df;
  box-shadow: none;
}

/* Brand lives in the sidebar (it's full-height and carries its own logo
   at the top). Hide the duplicate brand block that used to occupy the
   topbar's leftmost 180px column. */
.homepage-page .homepage-topbar__brand {
  display: none;
}

.homepage-page .homepage-topbar__brand-logo {
  width: auto;
  max-width: 160px;
  max-height: 24px;
  display: block;
}

.homepage-page .homepage-topbar__title-wrap {
  min-width: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  min-height: var(--new-topbar-height);
}

.homepage-page .homepage-topbar__title {
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: #526176;
}

.homepage-page .homepage-topbar__actions {
  min-height: var(--new-topbar-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.homepage-page .homepage-topbar .new-topbar__icon-button {
  width: 28px;
  height: 28px;
  color: #5f6e84;
}

.homepage-page .homepage-topbar .header-notification-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  filter: none;
}

.homepage-page .homepage-topbar .header-notification-button__icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.homepage-page .homepage-sidebar-slot {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--new-sidebar-width);
  z-index: 90;
}

.homepage-page .homepage-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--new-sidebar-width);
  height: 100vh;
  padding: 10px 8px 12px;
  background: #fffdfb;
  border-right: 1px solid #ece6df;
  box-shadow: none;
}

.homepage-page .homepage-sidebar .new-sidebar__section-title,
.homepage-page .homepage-sidebar .new-sidebar__link,
.homepage-page .homepage-sidebar .new-sidebar__todo,
.homepage-page .homepage-sidebar .new-sidebar__switch,
.homepage-page .homepage-sidebar .new-sidebar__logout {
  font-size: 12px;
}

.homepage-page .homepage-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 18px) 18px 20px;
  min-height: 100vh;
}

.homepage-page .homepage-hero {
  margin-bottom: 18px;
}

.homepage-page .homepage-hero h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.1vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.homepage-page .homepage-hero h1 span {
  color: #0f766e;
}

.homepage-page .homepage-grid {
  margin-bottom: 18px;
}

.homepage-page .homepage-quote-card,
.homepage-page .homepage-notifications {
  margin-top: 0;
}

@media (max-width: 900px) {
  .homepage-page .homepage-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.overview-card--hero h1 span {
  color: #0f6b5b;
}

.overview-card {
  min-height: 68px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(48, 51, 50, 0.04);
}

.overview-card--button {
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
}

.overview-card--button.is-active {
  border-color: rgba(15, 107, 91, 0.28);
  box-shadow: 0 10px 24px rgba(15, 107, 91, 0.1);
}

.overview-card__label {
  margin: 0 0 8px;
  color: #7b7a7d;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.overview-card__value-row {
  display: flex;
  align-items: end;
  gap: 6px;
}

.overview-card__value-row strong {
  font-family: "Manrope", sans-serif;
  font-size: 1.9rem;
  line-height: 1;
}

.overview-card__value-row span {
  color: #0f6b5b;
  font-size: 0.72rem;
  font-weight: 700;
}

.overview-card--schedule {
  background: #f6f3f4;
  min-height: 150px;
  width: min(100%, 600px);
  max-width: 600px;
  justify-self: end;
  padding: 6px 10px;
}

.overview-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.overview-card--schedule .overview-card__label {
  margin-bottom: 0;
}

.overview-card--schedule .overview-card__label span {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.overview-card__link {
  color: #0f6b5b;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.schedule-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 6px;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-left: 0;
  border-radius: 0;
  background: #ffffff;
  font-size: 12px;
}

.schedule-empty {
  margin: 0;
  color: #7b7a7d;
  font-size: 0.72rem;
}

.schedule-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item__badge {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  padding: 4px;
  border-radius: 8px;
  background: #eef7f1;
  color: #0f766e;
  text-align: center;
}

.schedule-item__badge-month {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.schedule-item__badge-day {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.schedule-item__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.schedule-item__headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.schedule-item__job {
  color: #0f766e;
  font-weight: 700;
  flex-shrink: 0;
}

.schedule-item__brand {
  color: #101828;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}

.schedule-item__location {
  color: #667085;
  font-size: 12px;
}

.schedule-item__time {
  color: #667085;
  font-size: 12px;
  letter-spacing: 0.04em;
  justify-self: end;
}

@media (max-width: 1200px) {
  .schedule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar-row .page-topbar__actions {
  justify-content: flex-start;
}

.toolbar-search {
  position: relative;
  flex: 1;
  max-width: none;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.table-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #ebe9ec;
  cursor: pointer;
}

.table-icon-button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.toolbar-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7b7a7d;
}

.table-search,
.table-action-button,
.inline-filter,
.modal-field input,
.modal-field select,
.modal-field textarea,
.settings-add-input,
.role-select {
  min-height: 34px;
  border-radius: 8px;
  font: inherit;
}

.table-search {
  width: 100%;
  padding: 0;
  border: none;
  background: #f6f3f4;
  color: var(--text);
}

.table-search {
  min-width: 220px;
}

.table-action-button {
  padding: 0 16px;
  border: none;
  background: linear-gradient(135deg, #15937b 0%, #0f6b5b 100%);
  color: #ffffff;
  font-weight: 700;
font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}

.table-action-button--secondary {
  background: linear-gradient(135deg, #15937b 0%, #0f6b5b 100%);
  color: #ffffff;
  box-shadow: none;
}

.table-action-button--ghost {
  background: transparent;
  color: #5f5f61;
  box-shadow: none;
}

.table-action-button--danger {
  background: #b42318;
}

.table-action-button--small {
  min-height: 38px;
  padding: 0 14px;
}

.jobs-table-wrap {
  overflow: auto;
  min-height: 320px;
  max-height: calc(100vh - 260px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(50, 50, 53, 0.05);
}

.table-page--v2 .jobs-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.jobs-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  table-layout: fixed;
}

.jobs-table th,
.jobs-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}

.jobs-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6f3f4;
  color: #38373a;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.jobs-table tbody td {
  background: #ffffff;
  color: var(--text);
  border-top: 2px solid #ffffff;
  line-height: 1.05;
}

.jobs-table tbody tr:nth-child(even) td {
  background: #f2f2f2;
}

.jobs-table tbody tr.jobs-table__row--cancelled td {
  background: #fde8e8;
}

.jobs-table tbody tr:hover td {
  background: #faf8f8;
}

.jobs-table tbody tr.jobs-table__row--cancelled:hover td {
  background: #f9d4d4;
}

.jobs-table__sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.jobs-table__sort-button.is-active {
  color: #0f6b5b;
}

.jobs-sort-arrow {
  display: inline-flex;
  width: 12px;
  justify-content: center;
  color: #7d8a94;
  font-size: 0.8rem;
  line-height: 1;
}

.jobs-sort-arrow.is-active {
  color: #0f6b5b;
}

.column-heading {
  margin-bottom: 8px;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown__summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 92px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  list-style: none;
}

.filter-dropdown__summary::-webkit-details-marker {
  display: none;
}

.filter-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  display: none;
  min-width: 210px;
  max-height: 400px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(8, 12, 34, 0.16);
}

.filter-dropdown[open] .filter-dropdown__menu {
  display: grid;
  gap: 8px;
}

.filter-dropdown__search {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 10px;
  font: inherit;
}

.filter-dropdown__options {
  display: grid;
  gap: 8px;
}

.filter-dropdown__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-dropdown__action-button {
  border: 1px solid rgba(15, 107, 91, 0.12);
  background: #fff;
  color: #0f6b5b;
  border-radius: 10px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.filter-dropdown__action-button--apply {
  min-width: 30px;
  padding-inline: 8px;
}

.filter-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.job-link-button {
  padding: 0;
  border: none;
  background: transparent;
  color: #0f6b5b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
}

.job-link-button:hover {
  color: #15937b;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-pill--active {
  background: rgba(0, 107, 98, 0.12);
  color: #006259;
}

.status-pill--pending {
  background: rgba(15, 107, 91, 0.12);
  color: #0f6b5b;
}

.status-pill--on\ hold,
.status-pill--on-hold {
  background: rgba(214, 158, 46, 0.18);
  color: #b7791f;
}

.status-pill--closed {
  background: rgba(159, 64, 61, 0.14);
  color: #9f403d;
}

.status-pill--mock-up {
  background: rgba(252, 231, 204, 0.92);
  color: #9d5a14;
}

.status-pill--in-production {
  background: rgba(224, 121, 121, 0.22);
  color: #9d2020;
}

.status-pill--production-completed,
.status-pill--production-complete {
  background: rgba(255, 212, 212, 0.96);
  color: #a24141;
}

.status-pill--not-yet-started {
  background: rgba(253, 255, 222, 0.96);
  color: #8e7f16;
}

.status-pill--delivered--no-lpo,
.status-pill--pending-invoice,
.status-pill--completed {
  background: rgba(217, 255, 223, 0.96);
  color: #0f6b5b;
}

.status-pill--open {
  background: rgba(219, 244, 239, 0.96);
  color: #0f766e;
}

.status-pill--won {
  background: rgba(220, 252, 231, 0.96);
  color: #15803d;
}

.status-pill--lost {
  background: rgba(254, 226, 226, 0.96);
  color: #b91c1c;
}

.status-pill--revised {
  background: rgba(241, 245, 249, 0.96);
  color: #475569;
}

.table-progress {
  display: grid;
  gap: 6px;
  min-width: 120px;
}

.table-progress__track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 107, 91, 0.12);
}

.table-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5fe0c8 0%, #0f6b5b 100%);
}

.table-progress__value {
  color: #0f6b5b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-progress--mock-up .table-progress__bar {
  background: linear-gradient(90deg, #ffd8ad 0%, #f2a34c 100%);
}

.table-progress--in-production .table-progress__bar {
  background: linear-gradient(90deg, #f2a2a2 0%, #d24848 100%);
}

.table-progress--production-completed .table-progress__bar {
  background: linear-gradient(90deg, #ffdede 0%, #ef8e8e 100%);
}

.table-progress--delivered---no-lpo .table-progress__bar,
.table-progress--pending-invoice .table-progress__bar,
.table-progress--completed .table-progress__bar {
  background: linear-gradient(90deg, #7ee7a7 0%, #16945f 100%);
}

.progress-rings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 10px;
}

.progress-ring-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.progress-ring-card strong {
  color: #17312b;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.progress-ring {
  --ring-progress: 0;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #ffffff 58%, transparent 59%),
    conic-gradient(#0f6b5b calc(var(--ring-progress) * 1%), #8fe9d9 0);
  box-shadow: inset 0 0 0 1px rgba(15, 107, 91, 0.05);
}

.progress-ring span {
  color: #17312b;
  font-size: 0.72rem;
  font-weight: 800;
}

.production-slider-group {
  display: grid;
  gap: 12px;
}

.production-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(248, 251, 249, 0.9);
}

.production-slider-row span {
  color: #18322d;
  font-size: 0.86rem;
  font-weight: 700;
}

.production-slider-row strong {
  color: #0f6b5b;
  font-size: 0.82rem;
  font-weight: 800;
}

.production-slider-row__input {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--department-color, var(--accent)) 42%, white) 0%, color-mix(in srgb, var(--department-color, var(--accent)) 16%, white) 100%);
  outline: none;
}

.production-slider-row__input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--department-color, var(--accent)) 42%, white) 0%, color-mix(in srgb, var(--department-color, var(--accent)) 16%, white) 100%);
}

.production-slider-row__input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid var(--department-color, var(--accent));
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--department-color, var(--accent)) 18%, white);
  cursor: pointer;
}

.production-slider-row__input::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--department-color, var(--accent)) 42%, white) 0%, color-mix(in srgb, var(--department-color, var(--accent)) 16%, white) 100%);
}

.production-slider-row__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--department-color, var(--accent));
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--department-color, var(--accent)) 18%, white);
  cursor: pointer;
}

.production-departments-dialog {
  width: min(520px, calc(100vw - 32px));
  border: none;
  padding: 0;
  border-radius: 28px;
  background: transparent;
}

.production-departments-dialog::backdrop {
  background: rgba(16, 24, 21, 0.42);
  backdrop-filter: blur(4px);
}

.production-departments-dialog__card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background: #fffdf9;
  box-shadow: 0 26px 70px rgba(17, 30, 26, 0.18);
}

.production-departments-dialog__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.production-departments-dialog__eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5b7771;
}

.production-departments-dialog__header h3 {
  margin: 0;
  color: #14201d;
  font-size: 1.34rem;
}

.production-departments-dialog__close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 107, 91, 0.08);
  color: #18322d;
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

.production-departments-dialog__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.production-departments-dialog__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fbf9;
  color: #18322d;
  font-weight: 700;
}

.production-departments-dialog__option input {
  width: 18px;
  height: 18px;
  accent-color: #0f6b5b;
}

.production-departments-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.job-production-progress {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: #f8fbf9;
  border: 1px solid rgba(15, 107, 91, 0.08);
}

.job-production-progress[hidden] {
  display: none !important;
}

.job-production-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.job-production-progress__eyebrow {
  color: #0d7461;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.job-production-progress__edit {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.job-production-progress__edit:hover {
  background: var(--surface2);
}

.job-production-progress__rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 10px;
}

.job-production-progress__sliders {
  display: grid;
  gap: 10px;
  display: none;
}

.empty-state-cell {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.table-pagination__summary {
  margin: 0;
  color: #61706a;
  font-size: 0.88rem;
  font-weight: 600;
}

.table-pagination__pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.table-page-button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #323235;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.table-page-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.table-page-button:hover:not(:disabled) {
  color: #0f6b5b;
}

.table-pagination__picker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px dashed rgba(0, 4, 53, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #5f6d82;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.table-pagination__picker:hover {
  background: #f7fbfa;
  border-color: rgba(18, 119, 108, 0.26);
  color: #20463f;
}

.table-pagination__select {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  padding: 0 12px 0 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 8px) calc(50% - 1px), calc(100% - 4px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.table-pagination__select:focus {
  outline: none;
}

.job-modal {
  border: none;
  padding: 0;
  background: transparent;
}

.job-modal::backdrop {
  background: rgba(8, 12, 34, 0.48);
}

.job-modal__card {
  width: min(100vw - 32px, 980px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(8, 12, 34, 0.22);
}

.job-modal__card--redesign {
  width: min(100vw - 28px, 920px);
  padding: 28px 32px;
  border-radius: 12px;
  background: #eaf4f2;
}

.job-modal__header,
.job-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.job-modal__top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.job-options-menu {
  position: relative;
}

.job-options-menu__summary {
  list-style: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: #17211d;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  transition: background 0.16s ease, color 0.16s ease;
}

.job-options-menu__summary::-webkit-details-marker {
  display: none;
}

.job-options-menu[open] .job-options-menu__summary,
.job-options-menu__summary:hover {
  background: #eef7f5;
  color: #0f6b5b;
}

.job-options-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(8, 12, 34, 0.16);
}

.job-options-menu__list button {
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #17211d;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.job-options-menu__list button:hover {
  background: #eef7f5;
}

.job-modal__close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #000435;
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.job-modal__close:hover {
  background: #f0eeee;
  color: #0f6b5b;
}

.modal-eyebrow {
  margin: 0 0 8px;
  color: #000435;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.job-modal__card h2 {
  margin: 0;
  font-size: 2rem;
}

.job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 18px;
}

.job-form-grid--redesign {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

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

.modal-field--toggle {
  align-content: start;
}

.modal-field--toggle input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  accent-color: #0b6f5d;
}

.modal-field--compact,
.modal-field--half {
  min-width: 0;
}

.modal-field--half {
  grid-column: span 2;
}

.typeahead {
  position: relative;
}

.modal-field span {
  font-size: 0.9rem;
  font-weight: 700;
}

.job-form-grid--redesign .modal-field span,
.job-production-status legend {
  color: #57716b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.required-mark {
  color: #b42318;
}

.modal-field input,
.modal-field select,
.modal-field textarea,
.settings-add-input,
.role-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  background: #ffffff;
  color: var(--text);
}

.job-form-grid--redesign .modal-field input,
.job-form-grid--redesign .modal-field select,
.job-form-grid--redesign .modal-field textarea {
  border: none;
  border-radius: 3px;
  background: #ffffff;
}

.modal-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.2;
}

.typeahead__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(8, 12, 34, 0.14);
}

.typeahead__menu[hidden] {
  display: none !important;
}

.typeahead__option {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #323235;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.typeahead__option:hover {
  background: #f4f1f1;
}

/* `:not([hidden])` so the v2 job editor can hide the legacy installation
   list via the HTML `hidden` attribute — the bare `.installation-dates`
   selector was overriding the UA's `[hidden]` reset. */
.installation-dates:not([hidden]) {
  display: grid;
  gap: 10px;
}

.installation-dates__row {
  display: flex;
  gap: 10px;
}

.installation-dates__input {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.installation-dates__remove {
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: #fce5e3;
  color: #b42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

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

.job-production-status {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.job-production-status legend {
  grid-column: 1 / -1;
  padding: 0;
}

.job-production-status label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #57716b;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-production-status input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0f6b5b;
}

.modal-custom-fields {
  display: contents;
}

.modal-status {
  min-height: 24px;
  margin: 0 0 18px;
  color: #000435;
  font-weight: 700;
}

.modal-status.is-error {
  color: #b42318;
}

.settings-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: #fbf9f7;
}

.installations-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", "Manrope", sans-serif;
  color: var(--text);
  background: #fcf8f9;
}

.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 96px 24px 24px;
}

.settings-main {
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(48, 51, 50, 0.05);
}

.settings-sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  align-content: start;
  gap: 22px;
  min-height: calc(100vh - 108px);
}

.settings-sidebar__group {
  display: grid;
  gap: 10px;
  padding: 0 0 0 15px;
}

.settings-sidebar__label {
  margin: 0;
  padding: 0 8px;
  color: #7c8a84;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.settings-sidebar__buttons {
  display: grid;
  gap: 10px;
}

.settings-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #20302c;
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.settings-nav-link::before {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(32, 48, 44, 0.68);
  font-size: 0.92rem;
  line-height: 1;
  opacity: 0.82;
}

.settings-nav-link.is-active {
  color: #6656d8;
  font-weight: 800;
  font-size: 1.01rem;
}

.settings-nav-link.is-active::before {
  color: rgba(102, 86, 216, 0.96);
}

.settings-nav-link:hover {
  color: #1a2a26;
}

.settings-nav-link[data-icon="columns"]::before {
  content: "\2263";
}

.settings-nav-link[data-icon="design"]::before {
  content: "\270E";
}

.settings-nav-link[data-icon="staff"]::before {
  content: "\1F464";
}

.settings-nav-link[data-icon="status"]::before {
  content: "\25CE";
}

.settings-nav-link[data-icon="progress"]::before {
  content: "\2197";
}

.settings-nav-link[data-icon="department"]::before {
  content: "\25A6";
}

.settings-nav-link[data-icon="brand"]::before {
  content: "\25A3";
}

.settings-nav-link[data-icon="user"]::before {
  content: "\1F464";
}

.settings-nav-link[data-icon="category"]::before {
  content: "\2630";
}

.settings-nav-link[data-icon="upload"]::before {
  content: "\2B06";
}

.settings-nav-link[data-icon="jobs"]::before {
  content: "\25A4";
}

.settings-nav-link[data-icon="company"]::before {
  content: "\25A7";
}

.settings-nav-link[data-icon="notification"]::before {
  content: "\1F514";
}

.settings-nav-link[data-icon="email"]::before {
  content: "\2709";
}

.settings-nav-link[data-icon="dashboard"]::before {
  content: "\2302";
}

.settings-nav-link[hidden] {
  display: none !important;
}

.settings-group-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.settings-group-shell__nav {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 18px;
  border-radius: 24px;
  background: #f6fbfa;
  box-shadow: 0 18px 40px rgba(12, 21, 19, 0.06);
}

.settings-group-shell__content {
  display: grid;
  align-content: start;
  gap: 18px;
}

.settings-group-panel[hidden] {
  display: none !important;
}

.settings-entities-card,
.settings-company-editor {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  background: #eef7f5;
}

.settings-entity-add-form {
  display: grid;
  gap: 10px;
}

.settings-entities-list {
  display: grid;
  gap: 8px;
}

.settings-company-entity-button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15, 107, 91, 0.1);
  border-radius: 14px;
  background: #ffffff;
  color: #20302c;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.settings-company-entity-button.is-active {
  border-color: rgba(15, 107, 91, 0.28);
  color: #0f6b5b;
}

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

.settings-company-grid label,
.settings-company-extra__row {
  display: grid;
  gap: 8px;
}

.settings-company-bank {
  display: grid;
  gap: 14px;
}

.settings-company-bank label {
  display: grid;
  gap: 8px;
}

.settings-company-bank__input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.settings-company-bank label span,
.settings-company-grid label span,
.settings-company-extra__header h3 {
  margin: 0;
  color: #000435;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-company-extra {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  background: #f8fbfb;
}

.settings-company-extra__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.settings-company-extra__header p,
.settings-company-empty {
  margin: 0;
  color: #66706d;
}

.settings-company-extra__list {
  display: grid;
  gap: 10px;
}

.settings-company-extra__row {
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
}

.settings-email-card--compact textarea {
  min-height: 120px;
}

@media (max-width: 980px) {
  .settings-group-shell {
    grid-template-columns: 1fr;
  }

  .settings-company-grid,
  .settings-company-extra__row {
    grid-template-columns: 1fr;
  }
}

.settings-main {
  padding: 36px;
}

#columnsSection {
  max-width: 1120px;
}

#columnsSection .settings-section__header {
  align-items: flex-end;
  margin-bottom: 28px;
}

#columnsSection .settings-section__header h2 {
  margin-bottom: 4px;
  color: #0e1513;
  font-size: 1.4rem;
}

#columnsSection .settings-section__header p {
  color: #53647a;
  font-size: 0.92rem;
  font-weight: 500;
}

.settings-columns-save-button {
  min-width: 160px;
  border-radius: 9px;
}

#columnsSaveStatus {
  min-height: 18px;
  margin: 0 0 28px;
  color: #506a8a;
  font-size: 0.84rem;
  font-weight: 600;
}

.installations-page__main {
  width: 100%;
}

.installation-shell {
  display: grid;
  gap: 28px;
}

.installation-page__topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.installation-page__topbar h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1;
  color: #0f6b5b;
}

.installation-page__actions {
  display: flex;
  gap: 12px;
}

.installations-page #toggleCompletedButton.is-active {
  background: #0f6b5b;
  color: #f4efe6;
  border-color: #0f6b5b;
}

.installation-block {
  display: grid;
  gap: 14px;
}

.installation-block[hidden] {
  display: none !important;
}

.installation-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.installation-block__header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #61706a;
}

.installation-block__header p {
  margin: 0;
  color: #777776;
  font-size: 0.9rem;
}

.installation-list-card {
  padding: 8px;
  border-radius: 18px;
  background: #f6f3f4;
  overflow-x: auto;
}

.installation-group-list {
  display: grid;
  gap: 14px;
}

.installation-group-card {
  display: grid;
  gap: 8px;
}

.installation-group-card__header {
  color: #61706a;
  font-size: 1rem;
  font-weight: 800;
}

.installation-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
}

.installation-table th {
  padding: 0 10px 4px;
  color: #8d8c8e;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: left;
}

.installation-table td {
  padding: 6px 10px;
  background: #ffffff;
  color: #323235;
  font-size: 0.82rem;
  vertical-align: middle;
}

.installation-table td:first-child {
  border-radius: 14px 0 0 14px;
}

.installation-table td:last-child {
  border-radius: 0 14px 14px 0;
}

.installation-job-link {
  padding: 0;
  border: none;
  background: transparent;
  color: #0d9488;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.installation-edit-button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: #eae7ea;
  color: #323235;
  font-size: 1rem;
  cursor: pointer;
}

.installation-complete-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #0f6b5b;
}

.installation-edit-button:hover,
.installation-job-link:hover,
.overview-card__link:hover {
  opacity: 0.8;
}

.installation-modal__card {
  width: min(100vw - 32px, 760px);
}

.installation-job-details {
  width: min(100vw - 32px, 880px);
}

.installation-job-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.installation-job-details__item {
  padding: 16px;
  border-radius: 16px;
  background: #f6f3f4;
}

.installation-job-details__item p {
  margin: 0 0 8px;
  color: #777776;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.installation-job-details__item strong {
  display: block;
  color: #323235;
  line-height: 1.5;
}

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

.settings-header p {
  margin: 0;
  color: #7b7a7d;
}

.settings-header h1,
.settings-section__header h2 {
  margin: 0 0 8px;
}

.settings-section__header,
.settings-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-section__header {
  margin-bottom: 18px;
}

.settings-section__header p {
  margin: 0;
  color: #7b7a7d;
}

.settings-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-add-form--user {
  align-items: center;
}

.settings-list {
  display: grid;
  gap: 12px;
}

/* ── Files admin (Settings → Files) ─────────────────────────────── */
.settings-section__header--stack {
  align-items: flex-start;
}

.files-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 8px 0 14px;
}

.files-admin-search-wrap {
  position: relative;
  flex: 0 1 320px;
  min-width: 220px;
}

.files-admin-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6b7c78;
  pointer-events: none;
  display: inline-flex;
}

.files-admin-search-icon svg {
  width: 100%;
  height: 100%;
}

.files-admin-search {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 91, 0.18);
  background: #fff;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.files-admin-search:focus {
  border-color: #0f6b5b;
  box-shadow: 0 0 0 3px rgba(15, 107, 91, 0.15);
}

.files-admin-filter-bar {
  flex: 1 1 auto;
  min-width: 0;
}

.files-admin-usage {
  margin: 18px 0 14px;
  padding: 14px 18px;
  border-radius: 18px;
  background: #eef7f5;
  display: grid;
  gap: 10px;
}

.files-admin-usage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.files-admin-usage__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000435;
}

.files-admin-usage__value {
  font-weight: 700;
  color: #0f6b5b;
}

.files-admin-usage__bar {
  width: 100%;
  height: 10px;
  background: rgba(15, 107, 91, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.files-admin-usage__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16a085, #0f6b5b);
  border-radius: 999px;
  transition: width 240ms ease;
}

.files-admin-usage__fill.is-warning {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.files-admin-usage__fill.is-over {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.files-admin-usage__hint {
  margin: 0;
  font-size: 0.85rem;
  color: #355a52;
}

.files-admin-usage__hint.is-over {
  color: #b91c1c;
  font-weight: 700;
}

.files-admin-table-wrap {
  margin-top: 6px;
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(15, 107, 91, 0.12);
  background: #fff;
}

.files-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.files-admin-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000435;
  padding: 12px 14px;
  background: #f3fbf9;
  border-bottom: 1px solid rgba(15, 107, 91, 0.12);
  white-space: nowrap;
}

.files-admin-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 107, 91, 0.06);
  vertical-align: top;
}

.files-admin-table tbody tr:last-child td {
  border-bottom: none;
}

.files-admin-table tbody tr:hover {
  background: rgba(15, 107, 91, 0.04);
}

.files-admin-table__actions {
  text-align: right;
  white-space: nowrap;
}

.files-admin-empty {
  padding: 28px;
  text-align: center;
  color: #355a52;
}

.files-admin-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 107, 91, 0.1);
  color: #0f6b5b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.files-admin-tag--quotation { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.files-admin-tag--invoice { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
.files-admin-tag--staff { background: rgba(168, 85, 247, 0.12); color: #7c3aed; }
.files-admin-tag--inventory { background: rgba(16, 185, 129, 0.14); color: #047857; }
.files-admin-tag--company-logo,
.files-admin-tag--branch-logo { background: rgba(244, 63, 94, 0.12); color: #be123c; }

.files-admin-ref {
  display: grid;
  gap: 2px;
  line-height: 1.2;
}

.files-admin-ref small {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7c78;
}

.files-admin-muted {
  color: #b6c4c0;
}

.files-admin-sub {
  font-size: 0.78rem;
  color: #6b7c78;
  margin-top: 2px;
}

.files-admin-link {
  color: #0f6b5b;
  text-decoration: none;
  font-weight: 600;
}

.files-admin-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .files-admin-toolbar {
    width: 100%;
  }
  .files-admin-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }
  .files-admin-filter-bar {
    flex: 1 1 100%;
  }
}


.settings-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
  gap: 22px;
}

.settings-section[hidden] {
  display: none !important;
}

.settings-list-item {
  padding: 16px 18px;
  border: 1px solid rgba(179, 177, 180, 0.2);
  border-radius: 18px;
  background: #f6f3f4;
}

.settings-list-item--staff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.settings-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: #ffffff;
  font-weight: 700;
}

.settings-inline-check input {
  accent-color: #0f6b5b;
}

.staff-directory {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: calc(100vh - 150px);
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
}

.staff-directory__sidebar {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px 24px;
  background: #e8f2f1;
}

.staff-directory__sidebar h2 {
  margin: 0;
  color: #0f5a4d;
  font-size: 1.25rem;
  font-weight: 900;
}

.staff-directory__search {
  display: grid;
  gap: 8px;
}

.staff-directory__search span {
  display: none;
}

.staff-directory__search input,
.staff-directory__add input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  color: #18211f;
  font: inherit;
}

.staff-directory__add {
  display: grid;
  gap: 10px;
}

.staff-directory__add .table-action-button {
  min-height: 54px;
  justify-content: center;
}

.staff-directory__list {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.staff-member-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #17211d;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.staff-member-card.is-active {
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 35, 31, 0.16);
}

.staff-member-card.is-inactive {
  opacity: 0.68;
}

.staff-member-card__inactive-mark {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #c02b2b;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.staff-member-card__avatar {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #0f6b5b;
  color: #ffffff;
  font-weight: 900;
}

.staff-member-card__avatar img,
.staff-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-member-card strong,
.staff-member-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-member-card small {
  margin-top: 4px;
  color: #71807b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.staff-profile {
  display: grid;
  align-content: start;
  gap: 34px;
  padding: 36px 48px;
}

.staff-profile__hero {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 34px;
}

.staff-profile__photo {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 22px;
  background: #dbe9e6;
  color: #0f6b5b;
  font-size: 4rem;
  font-weight: 900;
  box-shadow: 0 18px 32px rgba(15, 35, 31, 0.14);
}

.staff-profile__photo img {
  border-radius: inherit;
}

.staff-profile__photo-button {
  min-width: 54px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 14px;
  background: #006b5a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 35, 31, 0.22);
}

.staff-profile__photo-actions {
  position: absolute;
  right: -12px;
  bottom: -12px;
  display: grid;
  gap: 8px;
}

.staff-profile__photo-button--delete {
  background: #f6dfdd;
  color: #b42318;
  box-shadow: 0 10px 18px rgba(180, 35, 24, 0.16);
}

.staff-profile__title p,
.staff-profile__grid span,
.staff-profile__departments h3,
.staff-profile__salary h3 {
  margin: 0;
  color: #49605b;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.staff-profile__name {
  width: 100%;
  margin: 10px 0 18px;
  border: none;
  background: transparent;
  color: #17211d;
  font-size: 2.2rem;
  font-weight: 900;
}

.staff-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.staff-profile__chips input,
.staff-profile__chips select {
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 7px;
  background: #dfecea;
  color: #40544f;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.staff-profile__chips select:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.staff-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 48px;
}

.staff-profile__grid label {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #e6ece9;
  padding-bottom: 12px;
}

.staff-profile__grid input {
  border: none;
  background: transparent;
  color: #282927;
  font: inherit;
  font-size: 1.05rem;
}

.staff-profile__grid input[readonly] {
  color: #6f7774;
}

.staff-profile__grid small {
  color: #8a9692;
  font-size: 0.75rem;
}

.staff-profile__check {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  border-bottom: none !important;
}

.staff-profile__departments {
  display: grid;
  gap: 18px;
  padding: 28px 32px;
  border-radius: 18px;
  background: #e8f2f1;
}

.staff-profile__salary {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding: 28px 32px;
  border-radius: 18px;
  background: #eef1ec;
}

.staff-salary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 48px;
  align-items: start;
}

.staff-salary-col {
  display: grid;
  gap: 16px;
  align-content: start;
}

.staff-salary-subfields {
  display: grid;
  gap: 16px;
}

.staff-salary-subfields[hidden] {
  display: none;
}

.staff-salary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e0e6e1;
  padding-bottom: 8px;
}

.staff-salary-row span {
  margin: 0;
  color: #49605b;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.staff-salary-row input {
  flex: 0 0 auto;
  width: 150px;
  border: none;
  background: transparent;
  color: #282927;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
}

.staff-salary-row input[readonly] {
  color: #6f7774;
}

/* No up/down stepper on the salary amount inputs. */
.staff-salary-row input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.staff-salary-row input[type="number"]::-webkit-outer-spin-button,
.staff-salary-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Bank details sit full-width below the salary grid. */
.staff-salary-bank {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

.staff-salary-row--wide input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: left;
}

.staff-salary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.staff-salary-toggle > span:first-child {
  color: #17211d;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-salary-toggle input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.staff-salary-switch {
  position: relative;
  width: 38px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #d6e2df;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.74);
  transition: background 0.16s ease;
}

.staff-salary-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(15, 35, 31, 0.2);
  transition: transform 0.16s ease;
}

.staff-salary-toggle input:checked + .staff-salary-switch {
  background: #0f6b5b;
}

.staff-salary-toggle input:checked + .staff-salary-switch::after {
  transform: translateX(18px);
}

.staff-profile__department-toggles {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(130px, max-content);
  align-items: center;
  gap: 14px 34px;
  padding-top: 8px;
}

.staff-department-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #17211d;
  font-weight: 900;
  cursor: pointer;
}

.staff-department-toggle input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.staff-department-toggle__switch {
  position: relative;
  width: 34px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #d6e2df;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.74);
  transition: background 0.16s ease;
}

.staff-department-toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(15, 35, 31, 0.2);
  transition: transform 0.16s ease;
}

.staff-department-toggle input:checked + .staff-department-toggle__switch {
  background: #0f6b5b;
}

.staff-department-toggle input:checked + .staff-department-toggle__switch::after {
  transform: translateX(16px);
}

.staff-department-toggle input:disabled + .staff-department-toggle__switch,
.staff-department-toggle input:disabled ~ strong {
  opacity: 0.5;
  cursor: not-allowed;
}

.staff-profile__actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 28px;
}

.staff-profile__actions [data-staff-action="deactivate"],
.staff-profile__actions [data-staff-action="reactivate"] {
  margin-right: auto;
}

.staff-photo-crop-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: none;
  border-radius: 24px;
  background: transparent;
}

.staff-photo-crop-dialog::backdrop {
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(4px);
}

.staff-photo-crop-dialog__card {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 28px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 24px 60px rgba(15, 35, 31, 0.2);
}

.staff-photo-crop-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.staff-photo-crop-dialog__header h2 {
  margin: 0 0 6px;
}

.staff-photo-crop-dialog__header p {
  margin: 0;
  color: #61706a;
}

.staff-photo-crop-dialog__close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: #f2ece6;
  color: #17211d;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.staff-photo-crop-dialog__body {
  display: grid;
  gap: 18px;
}

.staff-photo-crop-dialog__preview-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 20px;
  background: #e8f2f1;
}

.staff-photo-crop-dialog__canvas {
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #dbe9e6;
  cursor: grab;
  touch-action: none;
}

.staff-photo-crop-dialog__canvas:active {
  cursor: grabbing;
}

.staff-photo-crop-dialog__field {
  display: grid;
  gap: 8px;
  color: #49605b;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.staff-photo-crop-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.staff-directory__empty {
  margin: 0;
  color: #71807b;
}

.settings-user-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 18px;
  border-radius: 12px;
  background: #e9f2f1;
  box-shadow: 0 16px 34px rgba(28, 28, 23, 0.08);
}

.settings-user-card__email {
  margin: 0;
  color: #1c1c17;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.settings-user-card__input {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid rgba(0, 4, 53, 0.08);
  font-size: 0.94rem;
}

.settings-user-card__save {
  min-height: 32px;
  justify-content: center;
  border-radius: 9px;
  background: #ffffff;
  color: #111111;
  box-shadow: none;
}

.settings-user-card__save:hover {
  transform: none;
  box-shadow: none;
}

.settings-categories-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  min-height: calc(100vh - 140px);
}

.settings-categories-directory,
.settings-categories-detail {
  padding: 30px;
  border-radius: 24px;
  background: #e9f2f1;
}

.settings-categories-directory {
  display: grid;
  align-content: start;
  gap: 18px;
}

.settings-categories-directory__header {
  display: grid;
  gap: 14px;
}

.settings-categories-directory__header .settings-add-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.settings-categories-directory__header .settings-add-input {
  min-height: 54px;
  border-radius: 12px;
}

.settings-categories-directory__list {
  display: grid;
  gap: 12px;
}

.settings-panel-eyebrow {
  margin: 0;
  color: #6a6791;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.settings-category-directory-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  color: #1c1c17;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(28, 28, 23, 0.2);
}

.settings-category-directory-card.is-active {
  border-color: rgba(104, 91, 255, 0.2);
  background: #cae3e0;
}

.settings-category-directory-card__avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f6b5b 0%, #0f6b5b 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-category-directory-card__content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-category-directory-card__content strong,
.settings-category-directory-card__content small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-category-directory-card__content small {
  color: #726f82;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-category-directory-card__status {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #18b36b;
  justify-self: end;
}

.settings-category-directory-card__status.is-locked {
  background: #0f6b5b;
}

.settings-users2-empty {
  margin: 0;
  padding: 18px 0;
  color: #6b7572;
  font-size: 0.85rem;
}

/* Users2 (Settings → User) — pin the two-column shell to the viewport
   so the user list and the detail/permissions panel each scroll on
   their own, instead of moving together with the page. The selector
   targets only this shell so other settings tabs that reuse the
   `.settings-categories-shell` class (e.g. User Categories) keep their
   current single-scroll behaviour. */
.settings-page .settings-users2-shell {
  height: calc(100vh - 180px);
  min-height: 380px;
  align-items: stretch;
}

.settings-page .settings-users2-directory,
.settings-page .settings-users2-detail {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Slim scrollbars so the two columns don't visually shout. */
.settings-page .settings-users2-directory::-webkit-scrollbar,
.settings-page .settings-users2-detail::-webkit-scrollbar {
  width: 10px;
}

.settings-page .settings-users2-directory::-webkit-scrollbar-thumb,
.settings-page .settings-users2-detail::-webkit-scrollbar-thumb {
  background: rgba(15, 107, 91, 0.22);
  border-radius: 999px;
}

.settings-page .settings-users2-directory::-webkit-scrollbar-thumb:hover,
.settings-page .settings-users2-detail::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 107, 91, 0.4);
}

/* On narrow screens the shell collapses to a single column. Drop the
   forced viewport height there so the page scrolls naturally again. */
@media (max-width: 1100px) {
  .settings-page .settings-users2-shell {
    height: auto;
    min-height: 0;
  }
  .settings-page .settings-users2-directory,
  .settings-page .settings-users2-detail {
    max-height: none;
    overflow-y: visible;
  }
}

.settings-users2-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.settings-users2-detail__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.settings-users2-save-status {
  margin: 0;
  font-size: 0.8rem;
  color: #0f6b5b;
}

.settings-users2-save-status.is-error {
  color: #c0392b;
}

.settings-users2-detail__header h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.settings-users2-detail__header p {
  margin: 0;
  color: #5f6b68;
  font-size: 0.82rem;
}

.settings-users2-detail__settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.settings-users2-field {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: #3b4441;
}

.settings-users2-field span {
  font-weight: 600;
}

.settings-users2-detail__permissions h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.settings-users2-permission-group {
  margin-bottom: 18px;
}

.settings-users2-permission-group:last-child {
  margin-bottom: 0;
}

.settings-users2-permission-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  cursor: pointer;
  width: fit-content;
}

.settings-users2-permission-group__header input {
  width: 15px;
  height: 15px;
  accent-color: #0f6b5b;
}

.settings-users2-permission-group h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5f6b68;
}

.settings-users2-field__hint {
  font-size: 0.74rem;
  color: #6b7572;
}

.settings-users2-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.settings-users2-permission-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.settings-users2-permission-grid--compact .settings-users2-permission {
  padding: 7px 10px;
  font-size: 0.8rem;
}

.settings-users2-permission {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d6e2df;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  color: #1c1c17;
}

.settings-users2-permission.is-active {
  border-color: rgba(15, 107, 91, 0.35);
  background: #d8ece8;
}

.settings-users2-permission input {
  width: 16px;
  height: 16px;
  accent-color: #0f6b5b;
}

.settings-categories-detail {
  display: grid;
  align-content: start;
  gap: 26px;
}

.settings-category-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-category-detail__header h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.06em;
}

.settings-category-detail__header p {
  display: none;
}

.settings-category-card__locked {
  color: #6b6b66;
  font-size: 0.86rem;
  font-weight: 600;
}

.settings-category-detail__panel {
  padding: 20px;
  border-radius: 24px;
  background: #cae3e0;
}

.settings-category-detail__permissions {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.settings-category-permission-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.settings-category-permission-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #cae3e0;
  color: #0f6b5b;
  font-size: 0.84rem;
  font-weight: 800;
}

.settings-category-permission-card__copy {
  display: grid;
  min-width: 0;
}

.settings-category-permission-card__copy strong {
  font-size: 0.9rem;
}

.settings-category-permission-card__copy small {
  display: none;
}

.settings-category-permission-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0f6b5b;
  justify-self: end;
}

.settings-category-save-status {
  min-height: 18px;
  margin: -16px 0 0;
  color: #0f6b5b;
}

@media (max-width: 1100px) {
  .settings-categories-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .settings-category-detail__header,
  .settings-category-permission-card {
    grid-template-columns: 1fr;
  }

  .settings-category-detail__header {
    display: grid;
  }

  .settings-category-permission-card {
    justify-items: start;
  }

  .settings-category-permission-card input[type="checkbox"] {
    justify-self: start;
  }

  .settings-notification-row {
    grid-template-columns: 1fr;
  }

  .settings-category-dropdown__menu {
    position: static;
    width: 100%;
    margin-top: 8px;
  }
}

.settings-list-item p {
  margin: 6px 0 0;
}

.settings-delete-button {
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: #fce5e3;
  color: #b42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.settings-list--columns {
  display: grid;
  gap: 12px;
}

.settings-list-item--column {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 4, 53, 0.05);
  border-radius: 14px;
  background: #fbfcfb;
  box-shadow: 0 8px 18px rgba(15, 35, 31, 0.03);
}

.settings-column-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  cursor: pointer;
}

.settings-column-toggle input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-column-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #dce6e2;
  transition: background 0.16s ease;
}

.settings-column-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 35, 31, 0.18);
  transition: transform 0.16s ease;
}

.settings-column-toggle input:checked + .settings-column-switch {
  background: #0f6b5b;
}

.settings-column-toggle input:checked + .settings-column-switch::after {
  transform: translateX(18px);
}

.settings-column-main {
  min-width: 0;
}

.settings-column-label {
  min-height: 38px;
  margin: 0;
  border-color: rgba(0, 4, 53, 0.08);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.settings-column-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-column-order-button {
  min-height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #eef2f4;
  color: #263238;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.settings-column-order-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.settings-column-grip {
  color: #aab2b8;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.12em;
  transform: rotate(90deg);
}

.settings-columns-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.settings-notification-matrix {
  display: grid;
  gap: 10px;
}

.settings-notification-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 90px 90px 90px 90px 90px minmax(220px, 0.9fr);
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(0, 4, 53, 0.06);
  border-radius: 16px;
  background: #fbfcfb;
}

.settings-notification-row--head {
  background: transparent;
  border: none;
  color: #53647a;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-notification-row strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.settings-category-dropdown {
  position: relative;
}

.settings-category-dropdown summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #263238;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.settings-category-dropdown summary::-webkit-details-marker {
  display: none;
}

.settings-category-dropdown__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  width: min(280px, 80vw);
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(0, 4, 53, 0.1);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 35, 31, 0.12);
}

.settings-category-dropdown__menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
}

.settings-category-dropdown__menu label:hover {
  background: #f0f7f5;
}

@media (max-width: 720px) {
  .design-content-with-sidebar {
    padding-right: 12px;
  }

  .design-notifications {
    position: static;
    width: auto;
    margin: 0 12px 18px;
  }

  .settings-notification-row {
    grid-template-columns: 1fr;
  }

  .settings-category-dropdown__menu {
    position: static;
    width: 100%;
    margin-top: 8px;
  }
}

.quotation-page {
  background: #f4f1eb;
}

.quotation-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  padding: 110px 24px 32px;
}

.quotation-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.08);
}

.quotation-sidebar__top {
  display: grid;
  gap: 14px;
}

.quotation-sidebar__top h1 {
  margin: 0;
  font-size: 2rem;
}

.quotation-list {
  display: grid;
  gap: 10px;
}

.quotation-list-item {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 4, 53, 0.1);
  border-radius: 16px;
  background: #ffffff;
  color: #000435;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.quotation-list-item.is-active {
  border-color: rgba(15, 107, 91, 0.35);
  background: #eef6f2;
}

.quotation-main {
  min-width: 0;
}

.quotation-sheet {
  display: grid;
  gap: 18px;
  padding: 36px 42px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(8, 12, 34, 0.08);
}

.quotation-sheet__header,
.quotation-sheet__top,
.quotation-footer,
.quotation-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.quotation-sheet__header {
  align-items: flex-start;
}

.quotation-sheet__header h2 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
}

.quotation-sheet__logo {
  width: 210px;
  filter: brightness(0) saturate(0.2);
}

.quotation-block,
.quotation-meta,
.quotation-items,
.quotation-terms,
.quotation-totals {
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 18px;
  background: #fffdf9;
}

.quotation-block {
  flex: 1;
  padding: 18px;
}

.quotation-block__title {
  margin: 0 0 12px;
  font-weight: 700;
}

.quotation-input-stack {
  display: grid;
  gap: 12px;
}

.quotation-inline-field,
.quotation-meta label {
  display: grid;
  gap: 6px;
}

.quotation-inline-field span,
.quotation-meta span {
  font-size: 0.82rem;
  font-weight: 700;
}

.quotation-inline-field input,
.quotation-inline-field select,
.quotation-meta input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.quotation-meta {
  width: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
}

.quotation-band {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1px;
  background: #cfe2bf;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.quotation-band > div {
  padding: 12px 14px;
  background: #d8ebcb;
  font-weight: 700;
  color: #2b6b4f;
}

.quotation-band--values {
  border-radius: 0 0 14px 14px;
  background: #e4e2de;
}

.quotation-band--values > div {
  background: #f1efec;
  color: #121212;
  font-weight: 600;
}

.quotation-note {
  margin: 0;
}

.quotation-items {
  padding: 16px;
}

.quotation-items__head,
.quotation-item-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 130px 130px 170px;
  gap: 12px;
  align-items: center;
}

.quotation-items__head {
  padding: 0 0 10px;
  border-bottom: 3px solid #000435;
  font-weight: 700;
}

.quotation-items__body {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.quotation-item-row__serial {
  font-weight: 700;
}

.quotation-item-row input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.quotation-item-row__description {
  width: 100%;
}

.quotation-item-row__total-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.quotation-item-row__remove {
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  background: #fce5e3;
  color: #b42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.quotation-footer {
  align-items: flex-start;
}

.quotation-terms {
  flex: 1;
  padding: 18px;
}

.quotation-terms p {
  margin: 0 0 10px;
  font-weight: 700;
}

.quotation-terms ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.quotation-totals {
  width: 370px;
  padding: 0;
  overflow: hidden;
}

.quotation-totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.quotation-totals input {
  width: 120px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
  font: inherit;
  font-weight: 700;
  text-align: right;
}

.quotation-item-row__serial-wrap {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-items: start;
}

.quotation-item-row__insert-header {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #ef3a3a;
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.quotation-item-row--header {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.quotation-item-row--header .quotation-item-row__description {
  font-weight: 800;
  min-height: 44px;
}

.delivery-order-item-row--header {
  grid-template-columns: 44px minmax(0, 1fr) !important;
}

.delivery-order-item-row--header .delivery-order-item-row__description {
  font-weight: 800;
}

.quotation-totals__grand {
  background: #000000;
  color: #ffffff;
  font-size: 1.2rem;
}

.quotation-actions {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .brand-panel,
  .form-panel {
    min-height: auto;
  }

  .brand-panel {
    min-height: 280px;
    padding: 40px 28px 24px;
  }

  .form-panel {
    padding: 24px 20px 36px;
  }

  .form-card {
    padding: 32px 24px;
    border-radius: 26px;
  }

  .page-topbar,
  .toolbar-row,
  .settings-layout,
  .settings-section__header,
  .settings-list-item {
    grid-template-columns: 1fr;
  }

  .page-topbar,
  .toolbar-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

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

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .job-form-grid {
    grid-template-columns: 1fr;
  }

  .quotation-layout {
    grid-template-columns: 1fr;
  }

  .quotation-sidebar {
    position: static;
  }

  .quotation-sheet__top,
  .quotation-footer {
    flex-direction: column;
  }

  .quotation-meta,
  .quotation-totals {
    width: 100%;
  }

  .quotation-items__head,
  .quotation-item-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .quotation-items__head span:nth-child(n + 3),
  .quotation-item-row__rate,
  .quotation-item-row__tax,
  .quotation-item-row__total-wrap {
    grid-column: 2;
  }

  .schedule-item {
    grid-template-columns: 1fr 1fr;
  }

  .installation-page__topbar,
  .installation-block__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .installation-job-details__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .brand-logo-image {
    width: min(100%, 280px);
  }

  .table-header {
    padding: 14px 18px;
  }

  .table-content {
    padding: 88px 12px 24px;
  }

  .settings-layout {
    padding: 84px 12px 24px;
  }

  .quotation-layout {
    padding: 88px 12px 24px;
  }

  .job-modal__card,
  .quotation-sheet,
  .settings-main,
  .settings-sidebar {
    padding: 18px;
  }

  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
.quotation-page--list {
  background: #f4f1eb;
}

.quotation-index {
  display: grid;
  gap: 20px;
  padding: 108px 24px 32px;
}

.quotation-index__hero,
.quotation-index__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.quotation-index__hero h1 {
  margin: 0;
  font-size: 2.2rem;
}

.quotation-index__toolbar {
  padding: 18px 20px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.08);
}

.quotation-index__search {
  flex: 1;
}

.quotation-index__select {
  width: 220px;
}

#quotationUserFilter[hidden] {
  display: none;
}

.quotation-list-shell {
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.08);
  overflow: hidden;
}

.quotation-list-head,
.quotation-list-row__main {
  display: grid;
  grid-template-columns: 130px 1.2fr 1.4fr 140px 120px;
  gap: 12px;
  align-items: center;
}

.quotation-list-head {
  padding: 16px 20px;
  background: #f6f3f4;
  color: #38373a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.quotation-list--table {
  gap: 0;
}

.quotation-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid rgba(0, 4, 53, 0.06);
}

.quotation-list-row:nth-child(even) {
  background: #faf8f8;
}

.quotation-list-row.is-active {
  background: #eef6f2;
}

.quotation-list-row__main {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.quotation-list-row__main strong {
  color: #0f6b5b;
}

.quotation-list-row__download {
  min-width: 112px;
}

.quotation-modal {
  width: min(96vw, 1180px);
  max-width: none;
  max-height: calc(100vh - 36px);
  padding: 0;
  border: none;
  border-radius: 28px;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(8, 12, 34, 0.22);
  overflow: auto;
}

.quotation-modal::backdrop {
  background: rgba(8, 12, 34, 0.38);
}

.quotation-modal__card {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.quotation-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.quotation-sheet--editor {
  box-shadow: none;
  padding: 24px 28px;
  background: #ffffff;
}

.quotation-inline-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #f6f3f4;
}

.quotation-editable-field,
.quotation-meta--editable label {
  display: grid;
  gap: 6px;
}

.quotation-editable-field span,
.quotation-meta--editable span {
  font-size: 0.82rem;
  font-weight: 700;
}

.quotation-editable-field input,
.quotation-editable-field select,
.quotation-meta--editable input,
.quotation-band--editable input {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.quotation-band--editable > div {
  padding: 8px;
  background: #f1efec;
}

.quotation-band--editable input {
  border: none;
  border-radius: 8px;
  background: #ffffff;
}

.quotation-band--editable select {
  min-height: 42px;
  width: 100%;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: #000435;
  cursor: pointer;
  appearance: auto;
}

@media (max-width: 900px) {
  .quotation-index {
    padding: 88px 12px 24px;
  }

  .quotation-index__hero,
  .quotation-index__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .quotation-index__select {
    width: 100%;
  }

  .quotation-list-head,
  .quotation-list-row__main {
    grid-template-columns: 1fr 1fr;
  }

  .quotation-list-head span:nth-child(n + 3),
  .quotation-list-row__main span:nth-child(n + 3) {
    display: none;
  }

  .quotation-list-row {
    grid-template-columns: 1fr;
  }

  .quotation-list-row__download {
    width: 100%;
  }

  .quotation-modal {
    width: min(100vw - 16px, 1180px);
  }
}
.quotation-modal {
  width: min(92vw, 1080px);
}

.quotation-sheet--editor {
  width: 100%;
  max-width: 100%;
  padding: 18px 20px;
}

.quotation-sheet__top {
  align-items: stretch;
}

.quotation-block {
  min-width: 0;
}

.quotation-meta--editable {
  width: 280px;
  grid-template-columns: 1fr 1fr;
}

.quotation-meta--editable label:nth-child(4) {
  grid-column: 1 / -1;
}

.quotation-inline-card {
  display: grid;
  gap: 14px;
}

.quotation-client-display {
  display: grid;
  gap: 0;
  min-height: 170px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}

.quotation-client-display div {
  display: flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.12);
}

.quotation-client-display div:last-child {
  border-bottom: none;
}

.quotation-band {
  grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr;
}

.quotation-band--editable > div {
  padding: 12px;
}

.quotation-band--editable input {
  min-height: 48px;
  border: 1px solid rgba(15, 107, 91, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quotation-items__head,
.quotation-item-row {
  grid-template-columns: 56px minmax(0, 1fr) 120px 110px 110px;
}

.quotation-item-row__total-wrap {
  grid-template-columns: 1fr 36px;
}

.quotation-item-row__remove {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 1.2rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .quotation-meta--editable {
    width: 100%;
  }

  .quotation-band {
    grid-template-columns: 1fr;
  }
}
.settings-list-item--customer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr 1fr 1fr 1fr 1fr auto auto;
  align-items: center;
}

.settings-add-input--readonly {
  background: #f3f2ee;
  color: #68615b;
  cursor: not-allowed;
}

.quotation-page .table-header {
  background: #f4f1eb;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.quotation-page .table-header__logo {
  width: 110px;
  max-width: 22vw;
  filter: none;
}

.quotation-page .header-actions {
  margin-left: auto;
  align-items: flex-start;
}

.quotation-page .header-text-button,
.quotation-page .header-user-email {
  color: #121212;
}

.quotation-page .header-user-email {
  font-weight: 600;
}

.quotation-meta--editable {
  width: 220px;
  grid-template-columns: 1fr;
  gap: 8px;
}

.quotation-meta--editable label {
  gap: 4px;
}

.quotation-band--editable > div {
  padding: 10px;
}

.quotation-band--editable input {
  min-height: 44px;
  font-weight: 600;
}

.quotation-item-row__remove {
  background: #fde8e8;
  color: #c43232;
}

@media (max-width: 900px) {
  .settings-list-item--customer {
    grid-template-columns: 1fr;
  }

  .settings-users-grid {
    grid-template-columns: 1fr;
  }

  .quotation-page .header-actions {
    align-items: center;
  }
}

.quotation-modal {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  border-radius: 24px;
}

.quotation-modal__card {
  width: 100%;
  padding: 22px;
  box-sizing: border-box;
}

.quotation-sheet--editor {
  width: 100%;
  max-width: none;
  padding: 20px 22px;
  box-sizing: border-box;
}

.quotation-sheet__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.quotation-items {
  overflow: hidden;
}

.quotation-items__head,
.quotation-item-row {
  grid-template-columns: 48px minmax(0, 1fr) 140px 120px 160px;
}

.quotation-items__body {
  overflow-x: hidden;
}

.quotation-item-row {
  align-items: start;
}

.quotation-item-row__description,
.quotation-item-row__rate,
.quotation-item-row__tax,
.quotation-item-row__total {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.quotation-item-row__description {
  display: block;
  min-height: 52px;
  padding: 12px 14px;
  resize: none;
  overflow: hidden;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.quotation-item-row__total-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.quotation-item-row__remove {
  width: 34px;
  min-width: 34px;
  height: 34px;
  align-self: start;
}

@media (max-width: 1100px) {
  .quotation-items__head,
  .quotation-item-row {
    grid-template-columns: 42px minmax(0, 1fr) 110px 96px 132px;
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .quotation-modal {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    margin: 6px auto;
  }

  .quotation-modal__card,
  .quotation-sheet--editor {
    padding: 14px;
  }

  .quotation-sheet__top {
    grid-template-columns: 1fr;
  }
}

.quotation-page .table-header {
  background: #167663;
  border-bottom: none;
  justify-content: space-between;
}

.quotation-page .table-header__logo {
  width: 110px;
  max-width: 42vw;
  filter: brightness(0) invert(1);
}

.quotation-page .header-actions {
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.quotation-page .header-text-button,
.quotation-page .header-user-email {
  color: #ffffff;
}

.header-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-icon-link__image {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.quotation-modal {
  width: min(210mm, calc(100vw - 24px));
  max-width: min(210mm, calc(100vw - 24px));
  max-height: calc(100vh - 20px);
  margin: 10px auto;
  border-radius: 18px;
}

.quotation-modal__card {
  padding: 18px;
}

.quotation-sheet--editor {
  width: 100%;
  max-width: none;
  padding: 18px;
}

.quotation-client-display {
  gap: 6px;
  min-height: 0;
  padding: 12px;
}

.quotation-client-display input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  box-sizing: border-box;
}

.quotation-items {
  overflow: hidden;
}

.quotation-items__body {
  overflow-x: hidden;
}

.quotation-items__head,
.quotation-item-row {
  grid-template-columns: 44px minmax(0, 1fr) 112px 92px 128px;
}

.quotation-item-row {
  align-items: start;
}

.quotation-item-row__description,
.quotation-item-row__rate,
.quotation-item-row__tax,
.quotation-item-row__total {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.quotation-item-row__description {
  display: block;
  min-height: 52px;
  padding: 12px 14px;
  resize: none;
  overflow: hidden;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.quotation-item-row__total-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.quotation-item-row__remove {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  align-self: start;
}

.quotation-index {
  gap: 14px;
  padding: 74px 24px 20px;
}

.quotation-index__hero {
  margin: 0;
}

.quotation-index__hero h1 {
  font-size: 2rem;
}

.quotation-index__toolbar {
  padding: 14px 18px;
}

.quotation-list-row__download {
  min-width: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  justify-self: end;
}

.quotation-list-row__download-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.quotation-close-button {
  color: #111111;
}

.quotation-close-button:hover {
  color: #000000;
}

.quotation-inline-card {
  padding: 12px;
  gap: 10px;
}

.quotation-meta--editable {
  padding: 14px 16px;
}

@media (max-width: 900px) {
  .quotation-page .header-actions {
    gap: 12px;
  }

  .quotation-index {
    padding: 72px 12px 18px;
  }

  .quotation-items__head,
  .quotation-item-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .quotation-item-row__rate,
  .quotation-item-row__tax,
  .quotation-item-row__total-wrap {
    grid-column: 2;
  }
}

.quotation-modal__header {
  gap: 6px;
  margin-bottom: 0;
  min-height: 0;
}

.quotation-modal__header h2 {
  margin: 0;
  font-size: 1.55rem;
}

.quotation-sheet__header {
  margin-bottom: 4px;
}

.quotation-sheet__header h2 {
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.quotation-sheet__logo {
  width: 130px;
  max-height: 56px;
  object-fit: contain;
  filter: none;
}

.quotation-sheet__top {
  gap: 10px;
}

.quotation-block,
.quotation-meta--editable {
  border-radius: 14px;
}

.quotation-block {
  padding: 10px;
}

.quotation-inline-card {
  padding: 4px 0 0;
  gap: 4px;
  border-radius: 12px;
  background: transparent;
}

.quotation-editable-field,
.quotation-meta--editable label {
  gap: 3px;
}

.quotation-editable-field span,
.quotation-meta--editable span {
  font-size: 0.72rem;
}

.quotation-editable-field input,
.quotation-editable-field select,
.quotation-meta--editable input {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 0.9rem;
}

.quotation-client-display--textarea {
  width: 100%;
  min-height: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.quotation-meta--editable {
  padding: 8px 10px;
  gap: 2px;
}

.quotation-meta-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.quotation-meta-row span {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quotation-band > div {
  padding: 5px 10px;
  font-size: 0.78rem;
}

.quotation-band {
  gap: 0;
}

.quotation-band--editable > div {
  padding: 0;
  display: flex;
  align-items: stretch;
}

.quotation-band--values {
  margin-top: -1px;
  margin-bottom: -12px !important;
  position: relative;
  top: -10px;
}

.quotation-band--editable input {
  display: block;
  width: 100%;
  margin: 0;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 0.88rem;
}

.quotation-note {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem;
  line-height: 1.05;
  transform: none !important;
}

.quotation-notes-field {
  display: grid;
  gap: 6px;
}

.quotation-notes-field textarea {
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
  resize: vertical;
}

.quotation-items {
  padding-top: 12px;
}

.quotation-items__head,
.quotation-item-row {
  grid-template-columns: 34px minmax(0, 1fr) 58px 82px 82px;
  column-gap: 8px;
}

.quotation-item-row__qty {
  width: 100%;
  font-size: 0.62rem;
  padding: 0 6px;
}

.quotation-item-row__rate,
.quotation-item-row__tax,
.quotation-item-row__total {
  font-size: 0.62rem;
  padding: 0 6px;
}

.quotation-item-row__total {
  width: 100%;
}

.quotation-items__head {
  font-size: 0.88rem;
}

.quotation-actions {
  margin-top: 6px;
}

.quotation-page input[type="number"]::-webkit-outer-spin-button,
.quotation-page input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quotation-page input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.quotation-sheet__header {
  align-items: center;
}

.quotation-sheet__header h2 {
  flex: 1;
}

.quotation-company-switch {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 120px;
}

.quotation-company-switch span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000435;
}

.quotation-company-switch select {
  min-width: 110px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 4, 53, 0);
  border-radius: 999px;
  background: #ffffff;
  color: #000435;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.quotation-list-head,
.quotation-list-row__main {
  grid-template-columns: 96px 120px 1.1fr 1.3fr 120px 110px;
}

.quotation-company-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quotation-company-pill--enl {
  background: rgba(21, 128, 104, 0.1);
  color: #0f6b5b;
}

.quotation-company-pill--cga {
  background: rgba(196, 30, 58, 0.1);
  color: #a11d33;
}

@media (max-width: 900px) {
  .quotation-sheet__header {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .quotation-sheet__header h2 {
    flex: 0 0 auto;
  }

  .quotation-company-switch {
    order: 3;
    width: 100%;
    justify-items: start;
  }

  .quotation-list-head,
  .quotation-list-row__main {
    grid-template-columns: 80px 1fr 1fr;
  }

  .quotation-list-head span:nth-child(n + 4),
  .quotation-list-row__main span:nth-child(n + 4),
  .quotation-list-row__main strong:nth-child(n + 4) {
    display: none;
  }
}

/* Quotation editor refresh: aligned with the job editor action pattern. */
.quotation-page .quotation-modal {
  width: min(920px, calc(100vw - 24px));
  max-width: min(920px, calc(100vw - 24px));
  border-radius: 12px;
}

.quotation-page .quotation-modal__card {
  gap: 12px;
  padding: 20px 22px;
  background: #fbfbf8;
}

.quotation-page .quotation-modal__header {
  align-items: center;
}

.quotation-page .quotation-modal__top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.quotation-page .quotation-header-save-button {
  min-height: 32px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quotation-page .quotation-options-menu {
  position: relative;
}

.quotation-page .quotation-options-menu__summary {
  list-style: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #1f2a27;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 800;
}

.quotation-page .quotation-options-menu__summary::-webkit-details-marker {
  display: none;
}

.quotation-page .quotation-options-menu[open] .quotation-options-menu__summary,
.quotation-page .quotation-options-menu__summary:hover {
  background: #eaf4f1;
  color: #0f6b5b;
}

.quotation-page .quotation-options-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(0, 4, 53, 0.1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 4, 53, 0.16);
}

.quotation-page .quotation-options-menu__list button {
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #17231f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.quotation-page .quotation-options-menu__list button:hover {
  background: #edf5f2;
}

.quotation-page .quotation-options-menu__list button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  background: transparent;
}

.quotation-page .quotation-sheet--editor {
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #ffffff;
}

.quotation-page .quotation-sheet__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 14px;
}

.quotation-page .quotation-sheet__header h2 {
  flex: none;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quotation-page .quotation-company-switch {
  justify-items: start;
  min-width: 150px;
}

.quotation-page .quotation-sheet__logo {
  justify-self: end;
  width: 150px;
  max-height: 56px;
}

.quotation-page .quotation-sheet__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 14px;
}

.quotation-page .quotation-block,
.quotation-page .quotation-meta--editable,
.quotation-page .quotation-attn-row,
.quotation-page .quotation-band,
.quotation-page .quotation-band--values {
  background: #f1f8f7;
}

.quotation-page .quotation-block,
.quotation-page .quotation-meta--editable {
  border: none;
  border-radius: 4px;
  padding: 14px;
}

.quotation-page .quotation-meta--editable {
  gap: 12px;
}

.quotation-page .quotation-meta-row {
  grid-template-columns: 72px minmax(0, 1fr);
}

.quotation-page .quotation-meta-row input,
.quotation-page .quotation-version-control {
  border: none;
  border-radius: 3px;
  background: #ffffff;
}

.quotation-page .quotation-attn-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  padding: 8px 12px;
  border-radius: 4px;
}

.quotation-page .quotation-attn-row span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quotation-page .quotation-attn-row input {
  min-height: 30px;
  border: none;
  border-radius: 3px;
  padding: 0 10px;
  font: inherit;
  background: #ffffff;
}

.quotation-page .quotation-band {
  border-radius: 5px 5px 0 0;
}

.quotation-page .quotation-band--values {
  top: 0;
  margin: -14px 0 0 !important;
  border-radius: 0 0 5px 5px;
}

.quotation-page .quotation-band--values input {
  border: none;
  border-radius: 0;
  background: #ffffff;
}

.quotation-page .quotation-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 800;
}

.quotation-page .quotation-status-pill--open {
  background: #edf4f1;
  color: #0f6b5b;
}

.quotation-page .quotation-status-pill--won {
  background: #e8f6e8;
  color: #217a31;
}

.quotation-page .quotation-status-pill--lost {
  background: #fde8e5;
  color: #b42318;
}

.quotation-page .quotation-actions {
  justify-content: flex-start;
  min-height: 0;
  margin-top: 0;
}

.quotation-won-dialog {
  width: min(420px, calc(100vw - 28px));
  border: none;
  border-radius: 18px;
  padding: 0;
  background: transparent;
}

.quotation-won-dialog::backdrop {
  background: rgba(8, 12, 34, 0.42);
}

.quotation-won-dialog__card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(0, 4, 53, 0.18);
}

.quotation-won-dialog__card h2,
.quotation-won-dialog__card p {
  margin: 0;
}

.quotation-won-dialog__card h2 {
  font-size: 1.25rem;
}

.quotation-won-dialog__card p {
  color: #6c7370;
}

.quotation-won-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quotation-won-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #111111;
  font-weight: 800;
  cursor: pointer;
}

.settings-email-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
  background: #eef7f5;
}

.settings-email-card label {
  display: grid;
  gap: 8px;
}

.settings-email-card label span {
  color: #000435;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-email-card textarea {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 4, 53, 0.1);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.settings-email-card__help {
  margin: 0;
  color: #66706d;
  font-size: 0.86rem;
  line-height: 1.5;
}

.settings-section__header--compact {
  margin-bottom: 18px;
}

.settings-section__header--compact h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

.main-settings-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  min-height: calc(100vh - 180px);
}

.main-settings-shell__nav,
.main-settings-shell__directory {
  padding: 22px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(8, 12, 34, 0.06);
}

.main-settings-shell__nav {
  display: grid;
  align-content: start;
  gap: 14px;
}

.main-settings-shell__directory {
  display: grid;
  align-content: start;
}

.main-settings-directory-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.main-settings-directory-panel[hidden] {
  display: none !important;
}

.main-settings-tiles-toolbar {
  display: flex;
  justify-content: flex-end;
}

.main-settings-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.main-settings-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.main-settings-tile-card {
  width: 100%;
  min-height: 220px;
  max-width: none;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(8, 12, 34, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.main-settings-tile-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(8, 12, 34, 0.1);
}

.main-settings-tile-card__icon-wrap {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.main-settings-tile-card__icon {
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
}

.main-settings-tile-card__fallback {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #eef7f5;
  color: #0f6b5b;
  font-size: 1.6rem;
  font-weight: 800;
}

.main-settings-tile-card__title {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #0e1513;
}

.main-settings-tile-card__meta {
  margin-top: 6px;
  color: #66706d;
  font-size: 0.78rem;
  word-break: break-word;
}

.main-settings-tile-card label {
  display: grid;
  gap: 6px;
}

.main-settings-tile-card label span {
  color: #001a33;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-settings-tile-card input[type="text"] {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.main-settings-tile-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.main-settings-tile-card__actions .table-action-button {
  min-height: 36px;
  padding: 0 12px;
}

.main-settings-tile-card__actions .settings-save-status {
  min-height: 0;
  margin: 0;
  font-size: 0.72rem;
}

.main-settings-tile-card--add {
  place-items: center;
  justify-items: center;
  cursor: pointer;
  min-height: 220px;
  border: 1px dashed rgba(15, 107, 91, 0.28);
  background: rgba(238, 247, 245, 0.6);
}

.main-settings-tile-card--add span {
  color: #0f6b5b;
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
}

.main-settings-tile-card--add strong {
  color: #0f6b5b;
  font-size: 0.96rem;
  font-weight: 800;
}

.main-settings-icon-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: start;
  min-height: 180px;
  padding: 18px;
  border: none;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(8, 12, 34, 0.08);
  text-align: center;
  cursor: pointer;
}

.main-settings-icon-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.main-settings-icon-card strong {
  color: #10201d;
  font-size: 0.88rem;
  font-weight: 800;
  word-break: break-word;
}

.main-settings-icon-card p {
  margin: 0;
  color: #66706d;
  font-size: 0.74rem;
}

.main-settings-client-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.main-settings-client-link-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(8, 12, 34, 0.08);
}

.main-settings-client-link-card label {
  display: grid;
  gap: 6px;
}

.main-settings-client-link-card label span {
  color: #001a33;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-settings-client-link-card input[type="text"] {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

@media (max-width: 720px) {
  .quotation-page .quotation-sheet__header,
  .quotation-page .quotation-sheet__top,
  .quotation-won-dialog__actions {
    grid-template-columns: 1fr;
  }

  .quotation-page .quotation-sheet__logo {
    justify-self: start;
  }
}

.main-page,
.clients-page,
.temp-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(13, 116, 97, 0.08), transparent 28%),
    linear-gradient(180deg, #fcf9f0 0%, #f7f3ea 100%);
}

.main-page .table-header,
.clients-page .table-header,
.main-page .table-header,
.table-page .table-header,
.settings-page .table-header,
.installations-page .table-header,
.quotation-page .table-header,
.temp-page .table-header {
  background: #167663;
  border-bottom: none;
}

.main-page .table-header__logo,
.clients-page .table-header__logo,
.table-page .table-header__logo,
.settings-page .table-header__logo,
.installations-page .table-header__logo,
.quotation-page .table-header__logo,
.temp-page .table-header__logo {
  width: 110px;
  max-width: 42vw;
  filter: brightness(0) invert(1);
}

.main-page .header-actions,
.clients-page .header-actions,
.table-page .header-actions,
.settings-page .header-actions,
.installations-page .header-actions,
.quotation-page .header-actions,
.temp-page .header-actions,
.notes-page .header-actions {
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.report-page .table-header,
.report-page .table-header__logo,
.report-page .header-actions {
  color: inherit;
}

.report-page .table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 12px 24px;
  background: #167663;
  border-bottom: none;
}

.report-page .table-header__logo {
  width: 110px;
  max-width: 42vw;
  display: block;
  filter: brightness(0) invert(1);
}

.report-page .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
  flex: 1;
}

.report-page .header-text-button {
  color: #ffffff;
}

.report-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 18px;
  padding: 74px 18px 18px;
  background: linear-gradient(180deg, #f4fbf9 0%, #f7f2e8 100%);
}

.report-sidebar {
  display: grid;
  align-content: start;
  gap: 40px;
  padding: 24px 20px;
  border-radius: 28px;
  background: #eaf6f3;
  box-shadow: 0 18px 44px rgba(8, 12, 34, 0.06);
}

.report-sidebar__intro {
  display: grid;
  gap: 1px;
}

.report-sidebar__eyebrow {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3f6d66;
}

.report-sidebar__intro h1 {
  margin: 0;
  font-size: 2.4rem;
  color: #10201d;
}

.report-sidebar__copy {
  margin: 0;
  color: #58706b;
  line-height: 1.6;
  font-size: 0.8rem
}

.report-filter-card {
  
}

.report-filter-card__grid {
  display: grid;
  gap: 0px;
}

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

.report-field span {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #53726c;
}

.report-field select,
.report-field__value {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 107, 91, 0);
  background: #ffffff00;
  color: #10201d;
  font: inherit;
  display: flex;
  align-items: center;
  font-size: .8rem;
}

.report-apply-button {
  width: 100%;
  justify-content: center;
}

.report-content {
  display: grid;
  align-content: start;
  gap: 18px;
}

.report-page__status {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fffdf900;
  color: #5b6866;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.0);
}

.report-page__status[hidden] {
  display: none;
}

.report-target-label {
  margin: -2px 0 4px;
  color: #6d7e7b;
  font-size: 0.9rem;
}

.report-target-label[hidden] {
  display: none;
}

.report-section {
  display: grid;
  gap: 16px;
}

.report-quotation-board {
  display: grid;
  grid-template-columns: minmax(340px, 1.45fr) minmax(320px, 0.95fr) minmax(250px, 0.85fr);
  gap: 16px;
  align-items: stretch;
}

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

.report-section__header h2 {
  margin: 0;
  color: #10201d;
  font-size: 1.9rem;
}

.report-section__header h2 span {
  color: #95a7a3;
  font-size: 1rem;
}

.report-section__header p {
  margin: 6px 0 0;
  color: #667877;
}

.report-overview-grid {
  display: grid;
  gap: 16px;
}

.report-overview-grid--summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.report-overview-grid--summary .report-card {
  min-height: 200px;
}

.report-card {
  min-height: 150px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 22px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.08);
}

.report-card--danger-soft {
  background: #fff7f6;
}

.report-card--highlight {
  background: linear-gradient(135deg, #0f6b5b 0%, #1a8c77 100%);
}

.report-card--highlight .report-card__label,
.report-card--highlight .report-card__value {
  color: #ffffff;
}

.report-card__label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6d7e7b;
}

.report-card__value {
  font-size: clamp(3rem, 4vw, 4.7rem);
  line-height: 1;
  color: #10201d;
}

.report-card__value--success {
  color: #0f6b5b;
}

.report-card__value--danger {
  color: #b42318;
}

.report-donut-card {
  grid-column: span 1;
  place-items: center;
  min-height: 100%;
}

.report-donut-card__chart {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#d2ebe4 0deg 360deg);
}

.report-donut-card__chart::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: #fffdf9;
}

.report-donut-card__center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.report-donut-card__center strong {
  font-size: clamp(3rem, 4vw, 4.6rem);
  color: #0f6b5b;
}

.report-donut-card__center span {
  color: #728684;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
}

.report-donut-card__legend {
  width: 100%;
  display: grid;
  gap: 10px;
}

.report-donut-card__legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #274642;
  font-weight: 700;
}

.report-donut-card__legend i,
.report-chart__legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.report-chart-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.08);
}

.report-chart-card--primary {
  min-height: 100%;
}

.report-chart-card__header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #10201d;
}

.report-chart-card__header p {
  margin: 4px 0 0;
  color: #788a87;
}

.report-chart {
  min-height: 220px;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: hidden;
}

.report-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #5f716e;
  font-weight: 700;
}

.report-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.report-chart__scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.report-chart__bars {
  display: grid;
  align-items: end;
  min-height: 170px;
}

.report-chart__bars--single {
  grid-template-columns: repeat(var(--report-chart-columns, 3), minmax(48px, 1fr));
  gap: 14px;
  min-width: max(100%, calc(var(--report-chart-columns, 3) * var(--report-chart-column-width, 84px)));
}

.report-chart__month {
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 10px;
}

.report-chart__columns {
  width: 100%;
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.report-chart__bar-wrap,
.report-chart__single-wrap {
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 8px;
}

.report-chart__bar {
  width: 100%;
  border-radius: 12px 12px 4px 4px;
  background: #0f6b5b;
  min-height: 0;
}

.report-chart__bar--single {
  width: 100%;
  max-width: 72px;
  background: linear-gradient(180deg, #5ecdb5 0%, #0f6b5b 100%);
}

.report-chart__value {
  color: #254642;
  font-size: 0.82rem;
  font-weight: 700;
}

.report-chart__month-label {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a7370;
}

.report-chart--line {
  gap: 14px;
}

.report-chart__line-shell {
  display: grid;
  gap: 10px;
}

.report-chart__line-svg {
  width: 100%;
  height: 220px;
}

.report-chart__axis {
  stroke: rgba(16, 32, 29, 0.18);
  stroke-width: 2;
}

.report-chart__guide {
  stroke: rgba(16, 32, 29, 0.08);
  stroke-width: 1;
}

.report-chart__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-chart__point {
  stroke: #ffffff;
  stroke-width: 2;
}

.report-chart__grid-line {
  stroke: rgba(16, 32, 29, 0.06);
  stroke-width: 1;
}

.report-chart__svg-value {
  fill: #24423d;
  font-size: 11px;
  font-weight: 700;
}

.report-chart__line-labels {
  display: grid;
  grid-template-columns: repeat(var(--report-chart-columns, 3), minmax(0, 1fr));
  gap: 10px;
}

.report-chart__line-labels span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6f827e;
}

.report-chart__bar-card {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 10px;
}

.report-chart__bar-value {
  font-size: 12px;
  font-weight: 700;
  color: #173632;
}

.report-chart__bar-track {
  width: 100%;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
}

.report-chart__bar-fill {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, #63cdb9 0%, #3fb89f 100%);
}

.report-chart__bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6f827e;
}

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

.report-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 16px;
}

.report-chart__empty {
  margin: auto;
  color: #7a8b88;
}

@media (max-width: 1200px) {
  .report-quotation-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .report-page .table-header {
    padding: 10px 14px;
    gap: 12px;
  }

  .report-layout {
    grid-template-columns: 1fr;
    padding: 64px 12px 14px;
  }

  .report-sidebar {
    padding: 18px 16px;
  }

  .report-sidebar__intro h1 {
    font-size: 2rem;
  }

  .report-quotation-board,
  .report-chart-grid,
  .report-sales-grid {
    grid-template-columns: 1fr;
  }

  .report-overview-grid--summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-donut-card {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .report-layout {
    padding: 66px 10px 12px;
    gap: 12px;
  }

  .report-section__header h2 {
    font-size: 1.35rem;
  }

  .report-overview-grid--summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-overview-grid--summary .report-card {
    min-height: 160px;
  }

  .report-donut-card {
    min-height: 200px;
  }

  .report-chart__line-svg {
    height: 180px;
  }

  .report-chart {
    min-height: 200px;
  }
}

@media (max-width: 720px) {
  .productions-header {
    padding: 12px;
  }

  .productions-header__main {
    flex-wrap: wrap;
  }

  .productions-header__tab,
  .productions-header__home,
  .productions-header__logout {
    padding: 9px 14px;
    font-size: 0.92rem;
  }

  .productions-layout {
    padding: 12px;
  }

  .productions-jobs-grid,
  .productions-notes-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .productions-job-tile,
  .productions-notes-grid .note-tile {
    max-width: none;
  }
}

.main-page .header-text-button,
.main-page .header-user-email,
.clients-page .header-text-button,
.clients-page .header-user-email,
.temp-page .header-text-button,
.temp-page .header-user-email,
.notes-page .header-text-button,
.notes-page .header-user-email {
  color: #ffffff;
}

.main-page .header-icon-link__image,
.clients-page .header-icon-link__image {
  filter: brightness(0) invert(1);
}

.table-header__home {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.header-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.header-menu__toggle {
  display: none;
  list-style: none;
  cursor: pointer;
}

.header-menu__toggle::-webkit-details-marker {
  display: none;
}

.header-menu__panel {
  display: flex;
  align-items: center;
  gap: 18px;
}

@media (max-width: 900px) {
  .main-page .table-header,
  .clients-page .table-header,
  .table-page .table-header,
  .settings-page .table-header,
  .installations-page .table-header,
  .quotation-page .table-header,
  .temp-page .table-header,
  .notes-page .table-header {
    padding: 10px 14px;
    gap: 12px;
  }

  .header-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
  }

  .header-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    min-width: 190px;
    padding: 10px;
    border: 1px solid rgba(11, 32, 27, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(9, 35, 31, 0.18);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

.header-menu.is-open .header-menu__panel {
    display: flex;
  }

  .header-menu .header-text-button,
  .header-menu .header-user-email {
    width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    padding: 0 10px;
    border-radius: 10px;
    color: #10201d !important;
    text-align: left;
  }

  .header-menu .header-text-button:hover {
    background: #eef7f5;
    color: #0f6b5b !important;
  }
}

.main-layout {
  min-height: 100vh;
  padding: 70px 344px 24px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-content: space-between;
}

.main-hero {
  max-width: inherit;
  display: grid;
  gap: 0;
  align-content: start;
  padding: 0;
}

.main-hero__eyebrow {
  margin: 0;
  color: #0d7461;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.main-hero h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 2.13rem);
  line-height: 0.95;
  color: #1c1c17;
}

.main-hero h1 strong {
  color: #0d7461;
}

.main-hero__copy {
  margin: 0;
  max-width: 680px;
  color: #61605b;
  font-size: 1.08rem;
  line-height: 1.6;
}

.main-grid {
  display: grid;
  grid-template-columns: repeat(var(--main-grid-columns, 4), 80px);
  gap: 25px 45px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  visibility: hidden;
}

.main-grid.is-ready {
  visibility: visible;
}

@media (min-width: 1120px) {
  .main-grid {
    grid-template-columns: repeat(var(--main-grid-columns, 6), 80px);
  }
}

.main-hero,
.main-grid,
.main-quote-card {
  grid-column: 1;
}

.main-card {
  display: grid;
  width: 80px;
  max-width: 80px;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1c1c17;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.main-card:hover {
  transform: translateY(-2px);
}

.main-card__icon {
  width: 60px;
  max-width: 60px;
  max-height: 60px;
  height: auto;
  display: block;
  object-fit: contain;
}

.main-card__icon--placeholder {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #eef7f5;
  color: #0f6b5b;
  font-size: 1.6rem;
  font-weight: 800;
}

.main-card h2 {
  margin: 0;
  max-width: 80px;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  line-height: 1.08;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.main-card p {
  margin: 0;
  color: #64635f;
  font-size: 0.68rem;
  line-height: 1.45;
}

.main-card__link {
  margin-top: 0;
  max-width: 80px;
  color: #0d7461;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.main-quote-card {
  position: relative;
  overflow: hidden;
  max-height: max-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
  
  color: #ffffff;
  box-shadow: 0 22px 48px rgba(8, 66, 55, 0.26);
}

.main-quote-card.main-quote-card--single {
  grid-template-columns: minmax(0, 1fr);
}

.main-quote-card.main-quote-card--loading > * {
  visibility: hidden;
}

.main-quote-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(121, 227, 197, 0.08);
}

.main-quote-card > * {
  position: relative;
  z-index: 1;
}

.main-quote-card__eyebrow {
  margin: 0 0 10px;
  color: rgba(225, 255, 245, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.main-quote-card h2 {
  margin: 0;
  max-width: 100%;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1.2;
}

.main-quote-card__author {
  margin: 10px 0 0;
  color: rgba(240, 255, 250, 0.86);
  font-size: 0.78rem;
}

.main-quote-card__button {
  border: none;
  min-height: 38px;
  width: max-content;
  margin-top: 14px;
  padding: 0 16px;
  border-radius: 999px;
  background: #9debd0;
  color: #12473d;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.main-notice-card,
.main-daily-quote {
  min-width: 0;
padding: 24px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #0d7461 0%, #0a5f50 100%);
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.settings-toggle-row > span:first-child {
  color: #001a33;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-toggle-control {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
}

.settings-toggle-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #dce6e2;
  transition: background 0.16s ease;
}

.settings-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.16s ease;
}

.settings-toggle-control input:checked + .settings-toggle-switch {
  background: #0f6b5b;
}

.settings-toggle-control input:checked + .settings-toggle-switch::after {
  transform: translateX(18px);
}

.notes-layout {
  min-height: 100vh;
  padding: 24px 24px 32px;
  background:
    radial-gradient(circle at top left, rgba(13, 116, 97, 0.08), transparent 28%),
    linear-gradient(180deg, #fcf9f0 0%, #f7f3ea 100%);
}

.productions-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", "Manrope", sans-serif;
  color: #14201d;
  background:
    radial-gradient(circle at top left, rgba(13, 116, 97, 0.06), transparent 26%),
    linear-gradient(180deg, #fcf9f0 0%, #f7f3ea 100%);
}

.productions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(23, 33, 29, 0.08);
  background: rgba(255, 253, 249, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}

.productions-header__main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.productions-header__tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.productions-header__tab,
.productions-header__home,
.productions-header__logout {
  border: 1px solid rgba(15, 107, 91, 0.12);
  background: #ffffff;
  color: #18322d;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.productions-header__tab.is-active {
  background: #0f6b5b;
  border-color: #0f6b5b;
  color: #ffffff;
}

.productions-header__home[hidden] {
  display: none;
}

.productions-search {
  flex: 1 1 280px;
  max-width: 420px;
}

.productions-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 91, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #18322d;
  font: inherit;
}

.productions-search input:focus {
  outline: none;
  border-color: rgba(15, 107, 91, 0.35);
  box-shadow: 0 0 0 3px rgba(15, 107, 91, 0.08);
}

.productions-layout {
  display: grid;
  gap: 18px;
  padding: 18px 18px 86px;
}

.productions-deptbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  width: 100%;
  border-top: 1px solid rgba(15, 107, 91, 0.14);
  background: rgba(255, 253, 249, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px rgba(8, 12, 34, 0.06);
}

.productions-deptbar__tab {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  border-right: 1px solid rgba(15, 107, 91, 0.1);
  background: transparent;
  color: #18322d;
  padding: 14px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}

.productions-deptbar__tab:last-child {
  border-right: none;
}

.productions-deptbar__tab:hover {
  background: rgba(15, 107, 91, 0.08);
}

.productions-deptbar__tab.is-active {
  background: #0f6b5b;
  color: #ffffff;
}

.productions-panel {
  display: grid;
  gap: 16px;
}

.productions-panel[hidden] {
  display: none !important;
}

.productions-status {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fffdf9;
  color: #5b6866;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.06);
}

.productions-status[hidden] {
  display: none;
}

.productions-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  gap: 18px;
  align-items: start;
}

.productions-job-tile {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  min-height: 210px;
  padding: 16px 18px;
  /* Border + background driven by --card-accent (set inline on the
     card from productions2.js → getConfiguredProgressColor, which
     reads Settings → Customize → Production cards). Falls back to the
     original neutral border when the variable isn't set. */
  border: 2px solid var(--card-accent, rgba(23, 33, 29, 0.12));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-accent, #ffffff) 8%, #ffffff);
  box-shadow: 0 12px 28px rgba(28, 28, 23, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.productions-job-tile:hover,
.productions-job-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(28, 28, 23, 0.1);
  outline: none;
}

.productions-job-tile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.productions-job-tile__eyebrow {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

.productions-job-tile__subcopy {
  color: #7b0303;
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.2;
}

.productions-job-tile__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(23, 33, 29, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #807d73;
  font-size: 0.82rem;
  font-weight: 500;
}

.productions-job-tile__body {
  color: #2a2a2a;
  font-size: 0.98rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.productions-job-tile__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 33, 29, 0.12);
}

.productions-job-tile__progress {
  min-height: 28px;
}

.productions-job-tile__progress-rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  align-items: start;
}

.productions-job-tile .status-pill,
.productions-job-tile .table-progress__value {
  font-size: 0.8rem;
}

.productions-job-tile .table-progress {
  gap: 8px;
}

.productions-notes-grid {
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  gap: 18px;
  align-items: start;
}

.productions-modal {
  width: min(560px, calc(100vw - 32px));
  border: none;
  padding: 0;
  border-radius: 28px;
  background: transparent;
}

.productions-modal::backdrop {
  background: rgba(16, 24, 21, 0.42);
  backdrop-filter: blur(4px);
}

.productions-modal__card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background: #fffdf9;
  box-shadow: 0 26px 70px rgba(17, 30, 26, 0.18);
}

.productions-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.productions-modal__eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5b7771;
}

.productions-modal__header h2 {
  margin: 0;
  color: #14201d;
  font-size: 1.6rem;
}

.productions-modal__close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 107, 91, 0.08);
  color: #18322d;
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

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

.productions-modal__item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fbf9;
}

.productions-modal__item--full {
  grid-column: 1 / -1;
}

.productions-modal__item span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5b7771;
}

.productions-modal__item strong {
  color: #14201d;
  font-size: 1rem;
  line-height: 1.45;
}

.productions-modal__checks {
  display: grid;
  gap: 12px;
}

.productions-modal__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fbf9;
  color: #18322d;
  font-weight: 700;
  flex-wrap: wrap;
}

.productions-modal__check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex: 1 1 auto;
}

.productions-modal__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0f6b5b;
}

.productions-modal__check-date {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 10px;
  border: 1px solid #cfd8d4;
  border-radius: 10px;
  background: #ffffff;
  color: #18322d;
  margin-left: auto;
  min-width: 0;
}

.productions-modal__check-date:focus-visible {
  outline: 2px solid #0f6b5b;
  outline-offset: 2px;
}

.productions-modal__check-date[hidden] {
  display: none;
}

.productions-modal__progress {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f8fbf9;
}

.productions-modal__progress[hidden] {
  display: none !important;
}

.productions-modal__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.productions-modal__progress-header span {
  color: #0d7461;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.productions-modal__progress-edit {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.productions-modal__progress-edit:hover {
  background: var(--surface2);
}

.productions-modal__rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 10px;
}

.productions-modal__rings[hidden] {
  display: none !important;
}

.productions-modal__sliders {
  display: grid;
  gap: 10px;
}

.productions-modal__status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(15, 107, 91, 0.08);
  color: #0f6b5b;
  font-weight: 700;
}

.productions-modal__status.is-error {
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
}

.productions-modal__status[hidden] {
  display: none;
}

.productions-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.productions-modal__button {
  min-width: 110px;
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}

.productions-modal__button:active {
  transform: scale(0.98);
}

.productions-modal__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.productions-modal__button:hover {
  background: #2a2a2a;
}

.productions-modal__button--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-md);
}

.productions-modal__button--secondary:hover {
  background: var(--surface2);
}

.notes-hero {
  max-width: 1140px;
  margin: 0 auto 24px 50px;
}

.notes-hero__eyebrow {
  margin: 0 0 10px;
  color: #0d7461;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.notes-hero h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.notes-grid {
    margin: 0 auto 0 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  gap: 18px;
  align-items: start;
}

.note-tile {
  position: relative;
  width: 100%;
  max-width: 300px;
  min-height: 200px;
  max-height: 200px;
  overflow: hidden;
  padding: 18px;
  border: none;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 50px rgba(28, 28, 23, 0.08);
  color: #14201d;
  text-align: left;
  cursor: pointer;
}

.note-tile.is-completed {
  opacity: 0.64;
}

.note-tile.is-completed .note-tile__title,
.note-tile.is-completed .note-tile__body {
  text-decoration: line-through;
}

.note-tile--add {
  display: grid;
  place-items: center;
  min-height: 200px;
  max-height: 200px;
  border: 1px dashed rgba(13, 116, 97, 0.35);
  background: rgba(231, 242, 239, 0.7);
  color: #0d7461;
  font-size: 4rem;
  font-weight: 300;
  text-align: center;
}

.note-tile__actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  gap: 6px;
  z-index: 2;
}

.note-tile__delete,
.note-tile__complete {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.note-tile__delete {
  background: rgba(180, 35, 24, 0.1);
  color: #b42318;
}

.note-tile__complete {
  background: rgba(13, 116, 97, 0.1);
  color: #0d7461;
}

.note-tile.is-completed .note-tile__complete {
  background: #0d7461;
  color: #ffffff;
}

.note-tile__title,
.note-tile__body {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.note-tile__title {
  padding: 0 62px 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.note-tile__body {
  height: 104px;
  margin-top: 8px;
  color: #5a6562;
  caret-color: #10201d;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-tile__body:empty::before {
  content: attr(data-placeholder);
  color: #7d8582;
}

.note-mention {
  color: #0f6b5b;
  font-weight: 800;
}

.note-tag-popover {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 96px;
  z-index: 20;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
   
}

.note-tag-popover[hidden] {
  display: none !important;
}

.note-tag-popover button {
  width: 100%;
  min-height: 28px;
  border: none;
  border-radius: 8px;
  background: #f4f7f5;
  color: #10201d;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.note-tile__time {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  color: #8a918f;
  font-size: 0.68rem;
  font-weight: 700;
}


.main-notifications {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 320px;
  z-index: 20;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px 26px;
  border-left: 1px solid rgba(13, 116, 97, 0.08);
  background: #e9f3f1;
  box-shadow: -18px 0 42px rgba(28, 28, 23, 0.06);
}

.main-notifications__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.main-notifications__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.main-notifications__header h2 {
  margin: 0;
  color: #005c4d;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.main-notifications__header span {
  min-width: 10px;
  min-height: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  display: inline-flex;
  border-radius: 999px;
  background: #006b5a;
  color: transparent;
}

.main-notifications__clear {
  border: none;
  background: transparent;
  color: #006b5a;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.main-notifications__clear:hover {
  color: #b42318;
}

.main-notifications__list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.main-notification-item {
  position: relative;
  display: grid;
  padding-left: 20px;
  background: transparent;
  color: #1c1c17;
}

.main-notification-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #006b5a;
}

.main-notification-item__link {
  display: grid;
  gap: 5px;
  padding-right: 24px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.main-notification-item__link:hover {
  transform: translateX(2px);
}

.main-notification-item__link span {
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.1;
}

.main-notification-item--danger .main-notification-item__link span {
  color: #b42318;
}

.main-notification-item--success .main-notification-item__link span {
  color: #0f6b5b;
}

.main-notification-item--default .main-notification-item__link span {
  color: #1c1c17;
}

.main-notification-item__link small,
.main-notifications__empty {
  color: #4d625c;
  font-size: 0.78rem;
  font-weight: 700;
}

.main-notification-item__link em {
  margin-top: 6px;
  padding: 12px;
  border-radius: 7px;
  background: #ffffff;
  color: #1c1c17;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}

.main-notification-item__delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 4, 53, 0.06);
  color: #33413d;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.main-notification-item__delete:hover {
  background: #fce5e3;
  color: #b42318;
}

.main-notifications__empty {
  margin: 0;
}

.main-notifications__empty.is-error {
  color: #b42318;
}

.design-content-with-sidebar {
  padding-right: min(340px, 24vw);
}

.design-notifications {
  width: min(320px, 24vw);
}

.header-notification-popover {
  position: fixed;
  z-index: 260;
  width: min(340px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 76px));
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(13, 116, 97, 0.1);
  border-radius: 22px;
  background: #e9f3f1;
  box-shadow: 0 22px 48px rgba(28, 28, 23, 0.18);
}

/* On phone-width viewports, anchor the notification popover to both
   viewport edges so it can never extend off-screen — header.js's
   getBoundingClientRect-based right-align falls apart when the bell
   isn't near the right edge of the viewport. !important required to
   beat the inline `right` style that header.js writes. */
@media (max-width: 480px) {
  .header-notification-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
  }
}

.header-notification-popover[hidden] {
  display: none;
}

.design-activity-panel,
.job-activity-panel {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #eef7f5;
}

.design-form-grid .design-activity-panel {
  margin-top: 0;
}

.design-activity-panel h3,
.job-activity-panel h3 {
  margin: 0 0 12px;
  color: #001a33;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.design-activity-list,
.job-activity-list {
  display: grid;
  gap: 0;
  max-height: 220px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: #ffffff;
}

.design-activity-item,
.job-activity-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px solid #edf2f0;
}

.design-activity-item:last-child,
.job-activity-item:last-child {
  border-bottom: none;
}

.design-activity-item span,
.job-activity-item span {
  color: #10201d;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.design-activity-item small,
.job-activity-item small,
.design-activity-list p,
.job-activity-list p {
  margin: 0;
  color: #5a6b66;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.modal-field--compact-activity textarea {
  min-height: 60px;
}

.temp-layout {
  min-height: 100vh;
  padding: 108px 24px 32px;
  display: grid;
  place-items: center;
}

.temp-layout--altayer {
  place-items: initial;
  align-content: start;
  gap: 18px;
  padding: 60px 10px 0 0;
}

.temp-coming-soon {
  width: min(100%, 760px);
  min-height: 320px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(28, 28, 23, 0.07);
}

.temp-coming-soon p {
  margin: 0;
  color: #0d7461;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}

.temp-hero {
  width: 100%;
  margin-bottom: 0;
}

.temp-dashboard {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  align-items: stretch;
  min-height: calc(100vh - 112px);
}

.temp-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  background: #eef7f5;
  box-shadow: 0 18px 44px rgba(8, 12, 34, 0.06);
  min-height: auto;
  height: auto;
}

.temp-layout--altayer .temp-sidebar {
  position: sticky;
  top: 60px;
  align-self: stretch;
  max-height: calc(100vh - 60px);
  overflow: auto;
}

.temp-sidebar__title {
  margin: 0 0 2px;
  color: #10201d;
  font-family: "Manrope", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.temp-sidebar__section {
  display: grid;
  gap: 10px;
}

.temp-sidebar__label {
  margin: 0;
  color: #173057;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.temp-sidebar__select {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.temp-sidebar__select:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.temp-layout--altayer .temp-sidebar__select,
.temp-layout--altayer .temp-sidebar__select.design-filter {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.temp-layout--altayer .temp-sidebar__select:focus,
.temp-layout--altayer .temp-sidebar__select.design-filter:focus {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.temp-filter-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(0, 4, 53, 0.0);
  border-radius: 14px;
  background: #ffffff00;
  color: #17201d;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.temp-filter-button:hover,
.temp-filter-button.is-active {
  border-color: #0f6b5b;
  background: #0f6b5b;
  color: #ffffff;
}

.temp-content {
  min-width: 0;
}

.temp-list-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 24px;
  max-height: calc(100vh - 140px);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(50, 50, 53, 0.05);
}

.temp-list-head,
.temp-list-row {
  display: grid;
  grid-template-columns: 86px 110px 110px minmax(170px, 1.2fr) 140px 110px 100px 100px 110px;
  gap: 14px;
  align-items: center;
}

.temp-list-head {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 16px 18px;
  background: #f6f3f4;
  color: #38373a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.temp-list-body {
  display: grid;
  overflow: auto;
}

.temp-list-row {
  padding: 16px 18px;
  border-top: 1px solid rgba(0, 4, 53, 0.06);
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
}

.temp-list-row--button {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.temp-list-row:nth-child(even) {
  background: #fbf8f4;
}

.temp-list-row:hover {
  background: #eef7f5;
}

.temp-list-row strong {
  color: #0f6b5b;
}

.temp-list-row--empty {
  grid-template-columns: 1fr;
  cursor: default;
}

.temp-list-row--empty:hover {
  background: rgba(255, 255, 255, 0.9);
}

.embedded-job-shell {
  width: min(100vw - 28px, 1180px);
  max-width: 1180px;
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
}

.embedded-job-shell::backdrop {
  background: rgba(8, 12, 34, 0.42);
}

.embedded-job-shell__card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(8, 12, 34, 0.22);
}

.embedded-job-shell__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #000435;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.embedded-job-shell__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

body.table-page--embedded {
  background: transparent;
}

body.table-page--embedded .table-header,
body.table-page--embedded .table-content > .table-card > section:not(.job-modal),
body.table-page--embedded .table-content > .table-card > .jobs-table-wrap,
body.table-page--embedded .table-content > .table-card > .table-pagination {
  display: none;
}

body.table-page--embedded .table-content {
  padding: 0;
}

body.table-page--embedded .table-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.table-page--embedded .job-modal[open] {
  position: static;
  display: block;
}

body.table-page--embedded .job-modal::backdrop {
  display: none;
}

body.table-page--embedded .job-modal__card--redesign {
  width: 100%;
  max-height: 100vh;
  min-height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

.clients-layout {
  padding: 108px 24px 32px;
  display: grid;
  gap: 20px;
}

.clients-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.clients-hero__eyebrow {
  margin: 0 0 6px;
  color: #0d7461;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clients-hero h1 {
  margin: 0 0 8px;
  font-family: "Manrope", sans-serif;
  font-size: 2.3rem;
}

.clients-hero__copy {
  margin: 0;
  color: #61605b;
}

.clients-search {
  min-width: min(100%, 420px);
}

.clients-list-shell {
  border-radius: 28px;
  overflow: hidden;
  background: #fffdf9;
  box-shadow: 0 18px 44px rgba(8, 12, 34, 0.08);
}

.clients-list-head,
.clients-list-row {
  display: grid;
  grid-template-columns: 0.75fr 1.3fr 1fr 1fr 0.7fr;
  gap: 16px;
  align-items: center;
}

.clients-list-head {
  padding: 18px 22px;
  background: #f6f3f4;
  color: #38373a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.clients-list-row {
  padding: 18px 22px;
  border-top: 1px solid rgba(0, 4, 53, 0.06);
  background: rgba(255, 255, 255, 0.82);
}

.clients-list-row span:first-child {
  font-weight: 800;
  color: #0f6b5b;
}

.clients-list-row--button {
  width: 100%;
  border: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.clients-list-row:nth-child(even) {
  background: #fbf8f4;
}

.clients-list-row strong {
  color: #0f6b5b;
  font-size: 1rem;
}

@media (max-width: 980px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .main-hero,
  .main-grid,
  .main-quote-card,
  .main-notifications {
    grid-column: 1;
  }

  .main-notifications {
    position: static;
    grid-row: auto;
    min-height: 0;
  }

  .main-quote-card,
  .clients-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .main-quote-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .job-form-grid--redesign,
  .job-production-status {
    grid-template-columns: 1fr;
  }

  .modal-field--half {
    grid-column: 1 / -1;
  }

  .main-layout,
  .clients-layout,
  .temp-layout {
    padding: 92px 12px 24px;
  }

  .main-grid {
    grid-template-columns: repeat(2, 80px);
  }

  .temp-dashboard {
    grid-template-columns: 1fr;
  }

  .temp-list-head,
  .temp-list-row {
    grid-template-columns: 1fr;
  }

  .temp-list-head span:nth-child(n + 2) {
    display: none;
  }

  .clients-list-head,
  .clients-list-row {
    grid-template-columns: 1fr;
  }

  .clients-list-head span:nth-child(n + 2) {
    display: none;
  }
}

.quotation-list-head,
.quotation-list-row {
  display: grid;
  grid-template-columns: 96px 120px minmax(0, 1fr) minmax(0, 1.25fr) 110px 110px 120px;
  gap: 10px;
  align-items: center;
}

.quotation-list-head {
  padding: 14px 20px;
}

.quotation-list-row {
  padding: 9px 20px;
}

.quotation-list-row__cell {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-width: 0;
}

.quotation-list-row__cell span,
.quotation-list-row__cell strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quotation-list-row__cell--quote strong {
  color: #0f6b5b;
}

.quotation-list-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quotation-company-pill {
  min-height: 28px;
  padding: 0 11px;
  font-size: 0.74rem;
}

.quotation-list-row__do {
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.quotation-list-row__download {
  min-width: 40px;
  width: 40px;
  height: 36px;
}

.quotation-list-row__download-icon {
  width: 16px;
  height: 16px;
}

.delivery-order-modal__card {
  width: min(92vw, 900px);
}

.delivery-order-sheet__top {
  display: grid;
  grid-template-columns: 1.35fr 0.7fr;
  gap: 16px;
  margin-bottom: 10px;
}

.delivery-order-band {
  grid-template-columns: 1fr;
}

.delivery-order-items {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 24px;
  background: #fffdf9;
}

.delivery-order-items__head,
.delivery-order-item-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: start;
}

.delivery-order-items__head {
  padding-bottom: 10px;
  border-bottom: 3px solid #000435;
  font-size: 0.9rem;
  font-weight: 700;
}

.delivery-order-item-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.delivery-order-item-row:last-child {
  border-bottom: none;
}

.delivery-order-item-row__serial {
  padding-top: 10px;
  font-weight: 700;
}

.delivery-order-item-row__description,
.delivery-order-item-row__qty,
.delivery-order-signature input {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.delivery-order-item-row__description {
  line-height: 1.45;
  resize: vertical;
}

.delivery-order-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 28px;
}

.delivery-order-signature {
  display: grid;
  gap: 8px;
}

.delivery-order-signature span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000435;
}

.job-delivery-order-dialog {
  border: none;
  padding: 0;
  background: transparent;
}

.job-delivery-order-dialog::backdrop {
  background: rgba(8, 12, 34, 0.48);
}

.job-delivery-order-dialog__card {
  width: min(100vw - 32px, 900px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border-radius: 20px;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(8, 12, 34, 0.22);
  display: grid;
  gap: 18px;
}

.job-delivery-order-dialog__header,
.job-delivery-order-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.job-delivery-order-dialog__eyebrow {
  margin: 0 0 6px;
  color: #0f6b5b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.job-delivery-order-dialog__header h3 {
  margin: 0;
  font-size: 1.5rem;
}

.job-delivery-order-dialog__close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #000435;
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.job-delivery-order-dialog__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.job-delivery-order-dialog__items {
  padding: 18px 20px;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 20px;
  background: #ffffff;
}

.job-delivery-order-dialog__items-head,
.job-delivery-order-dialog__item-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 100px;
  gap: 12px;
  align-items: start;
}

.job-delivery-order-dialog__items-head {
  padding-bottom: 10px;
  border-bottom: 3px solid #000435;
  font-size: 0.88rem;
  font-weight: 700;
}

.job-delivery-order-dialog__item-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.job-delivery-order-dialog__item-row:last-child {
  border-bottom: none;
}

.job-delivery-order-dialog__item-row--header .job-delivery-order-dialog__item-description {
  font-weight: 700;
}

.job-delivery-order-dialog__item-serial {
  padding-top: 10px;
  font-weight: 700;
}

.job-delivery-order-dialog__item-description,
.job-delivery-order-dialog__item-qty {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
  box-sizing: border-box;
}

.job-delivery-order-dialog__item-description {
  resize: vertical;
  line-height: 1.4;
}

.job-delivery-order-dialog__empty {
  margin: 0;
  color: #63716c;
}

@media (max-width: 900px) {
  .quotation-list-head,
  .quotation-list-row {
    grid-template-columns: 80px 1fr 1fr;
  }

  .quotation-list-head span:nth-child(n + 4),
  .quotation-list-row > *:nth-child(n + 4):not(.quotation-list-row__actions) {
    display: none;
  }

  .quotation-list-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .delivery-order-sheet__top,
  .delivery-order-signatures {
    grid-template-columns: 1fr;
  }

  .job-delivery-order-dialog__card {
    width: calc(100vw - 16px);
    padding: 18px;
  }

  .job-delivery-order-dialog__meta {
    grid-template-columns: 1fr;
  }

  .job-delivery-order-dialog__items-head,
  .job-delivery-order-dialog__item-row {
    grid-template-columns: 34px minmax(0, 1fr) 82px;
    gap: 10px;
  }
}

.filter-dropdown__summary.is-active {
  border-color: #0f6b5b !important;
  background: rgba(15, 107, 91, 0.14) !important;
  color: #0f6b5b !important;
  font-weight: 800;
}

.table2-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0px 0 5px;
}

.table2-filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.table2-filter-dropdown {
  position: relative;
}

.table2-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 96px;
  padding: 4px 10px;
  border: 1px dashed rgba(0, 4, 53, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #5d6673;
  font-size: 12px;
  font-weight: 500;
  transition: all 160ms ease;
}

.table2-filter-chip.is-active {
  border-style: solid;
}

.table2-filter-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #71808d;
  font-size: 12px;
  line-height: 1;
}

.table2-filter-chip__icon svg,
.table2-filter-chip svg {
  width: 12px !important;
  height: 12px !important;
  display: block;
  flex: 0 0 12px;
}

.table2-filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8794;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.table-page--v2 .table2-columns-options {
  display: grid;
  gap: 8px;
}

.table-page--v2 .table2-columns-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.table-page--v2 .table2-columns-option__label {
  min-width: 0;
}

.table-page--v2 .table2-columns-option__label span {
  font-size: 12px;
}

.table-page--v2 .table2-columns-option__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.table-page--v2 .table2-columns-option__move {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px dashed rgba(84, 96, 116, 0.32);
  border-radius: 999px;
  background: #ffffff;
  color: #5f6b78;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.table-page--v2 .table2-columns-option__move:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.table-page--v2 .table2-filter-dropdown--columns {
  margin-left: auto;
}

.table-page--v2 .table2-filter-dropdown--columns .filter-dropdown__menu {
  left: auto;
  right: 0;
}

.table-page--v2 .table2-filter-chip {
  justify-content: flex-start;
}

.table-page--v2 .table2-filter-chip:hover,
.table-page--v2 .table2-filter-chip:focus-visible {
  background: #f7fbfa;
  border-color: rgba(18, 119, 108, 0.26);
  color: #20463f;
}

.table-page--v2 {
  --new-sidebar-width: 180px;
  --new-topbar-height: 52px;
}

.table-page--v2 .new-shell {
  min-height: 100vh;
}

.table-page--v2 .new-sidebar {
  width: var(--new-sidebar-width);
  max-width: 180px;
}

.table-page--v2 .new-sidebar__brand-logo {
  width: auto;
  max-width: 150px;
  max-height: 24px;
}

.table-page--v2 .new-sidebar__group {
  padding: 8px 8px 0;
}

.table-page--v2 .new-sidebar__group-title {
  margin: 0 0 8px 8px;
}

.table-page--v2 .new-sidebar__link {
  min-height: 25px;
  padding: 0 10px;
  font-size: 12px;
}
.table-page--v2 .new-sidebar__logout {
  min-height: 28px;
  padding: 0px 10px;
  font-size: 12px;
}

.table-page--v2 .new-sidebar__icon,
.table-page--v2 .new-sidebar__icon svg,
.table-page--v2 .new-sidebar__logout-icon,
.table-page--v2 .new-sidebar__logout-icon svg {
  width: 14px;
  height: 14px;
}

.table-page--v2 .new-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 14px) 18px 20px;
}

.table-page--v2 .new-topbar {
  left: 0;
  min-height: var(--new-topbar-height);
}

.table-page--v2 .new-topbar__search {
  justify-self: end;
  width: min(100%, 300px);
  max-width: 300px;
  min-height: 0;
  height: 32px;
  max-height: 32px;
}

.table-page--v2 .new-topbar__crumbs {
  font-size: 12px;
}

.table-page--v2 .new-topbar__search input {
  font-size: 12px;
}

.table-page--v2 .new-topbar__button {
  min-height: 0;
  height: 32px;
  max-height: 32px;
  font-size: 12px;
}

.table-page--v2 .new-topbar__icon-button,
.table-page--v2 .new-topbar__badge {
  font-size: 12px;
}

.table-page--v2 .table2-mobile-only,
.table-page--v2 .table2-mobile-overlay {
  display: none;
}

.table-page--v2 .table-content {
  padding: 0;
}

.table-page--v2 .table-card {
  margin: 0;
}

.table-page--v2 .overview-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.table-page--v2 .overview-card__value-row {
  display: grid;
  justify-items: start;
  align-items: start;
  gap: 4px;
}

.table-page--v2 .overview-card__value-row strong {
  line-height: 1;
}

.table-page--v2 .overview-card__value-row span {
  display: block;
  font-size: 12px;
}

.table-page--v2 .overview-card--button {
  min-height: 0;
}

.table-page--v2 .toolbar-row--compact {
  justify-content: flex-end;
}

.table-page--v2 .toolbar-actions--end {
  margin-left: auto;
}

@media (max-width: 1024px) and (min-width: 721px) {
  .table-page--v2 .overview-grid--stats {
    grid-template-columns: 1fr;
  }

  .table-page--v2 .overview-grid--metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .table-page--v2 .overview-card--schedule {
    width: 100%;
    min-width: 600px;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 720px) {
  .table-page--v2 .overview-grid--stats {
    grid-template-columns: 1fr;
  }

  .table-page--v2 .table-content {
    height: auto;
    overflow: visible;
  }

  .table-page--v2 .table-card {
    height: auto;
    overflow: visible;
  }

  .table-page--v2 .jobs-table-wrap {
    flex: none;
  }

  .table-page--v2 {
    --new-topbar-height: 52px;
  }

  .table-page--v2 .new-sidebar {
    position: fixed;
    inset: var(--new-topbar-height) auto 0 0;
    width: min(88vw, 180px);
    max-width: 180px;
    height: calc(100vh - var(--new-topbar-height));
    transform: translateX(-100%);
    transition: transform 180ms ease;
    z-index: 40;
    border-right: 1px solid #e7e5df;
    border-bottom: 0;
  }

  .table-page--v2.table2-sidebar-open .new-sidebar {
    transform: translateX(0);
  }

  .table-page--v2 .table2-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    border: 0;
    background: rgba(15, 23, 40, 0.22);
    cursor: pointer;
  }

  .table-page--v2.table2-sidebar-open .table2-mobile-overlay {
    display: block;
  }

  .table-page--v2 .new-main {
    margin-left: 0;
    padding: calc(var(--new-topbar-height) + 10px) 10px 16px;
  }

  .table-page--v2 .new-topbar {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    z-index: 30;
  }

  .table-page--v2 .new-topbar__brand {
    display: none;
  }

  .table-page--v2 .new-topbar__crumbs {
    display: none;
  }

  .table-page--v2 .new-topbar__left {
    display: flex;
    grid-template-columns: none;
    order: 0;
    flex: 0 0 0;
    min-width: 0;
  }

  .table-page--v2 .new-topbar__brand-logo {
    max-width: 150px;
    max-height: 24px;
  }

  .table-page--v2 .new-topbar__search {
    order: 2;
    flex: 1 1 auto;
    position: static;
    justify-self: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 10px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: #ffffff;
  }

  .table-page--v2 .new-topbar__search input {
    min-width: 0;
    font-size: 11px;
  }

  .table-page--v2 .new-topbar__actions {
    display: contents;
  }

  .table-page--v2 .new-topbar__button {
    display: none;
  }

  .table-page--v2 .table2-mobile-only {
    display: inline-flex;
  }

  .table-page--v2 #table2MobileMenuButton {
    order: 1;
  }

  .table-page--v2 #headerNotificationButton {
    order: 3;
  }

  .table-page--v2 #table2MobileNewJobButton {
    order: 4;
  }

  .table-page--v2 #table2MobileMenuButton,
  .table-page--v2 #headerNotificationButton,
  .table-page--v2 #table2MobileNewJobButton {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .table-page--v2 .new-topbar__icon-button svg {
    width: 13px;
    height: 13px;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .table-page--v2 .new-sidebar {
    position: fixed;
    inset: var(--new-topbar-height) auto 0 0;
    width: var(--new-sidebar-width);
    max-width: 180px;
    height: calc(100vh - var(--new-topbar-height));
    border-right: 1px solid #e7e5df;
    border-bottom: 0;
    transform: none;
    z-index: 30;
  }

  .table-page--v2 .new-main {
    margin-left: var(--new-sidebar-width);
    padding: calc(var(--new-topbar-height) + 14px) 14px 18px;
  }

  .table-page--v2 .new-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--new-topbar-height);
    grid-template-columns: var(--new-sidebar-width) auto 1fr auto;
    padding: 0 14px 0 0;
  }

  .table-page--v2 .new-topbar__crumbs {
    display: flex;
  }

  .table-page--v2 .new-topbar__brand-logo {
    max-width: 150px;
    max-height: 24px;
  }

  .table-page--v2 .new-topbar__search {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    width: min(100%, 300px);
    max-width: 300px;
  }

  .table-page--v2 .table2-mobile-only,
  .table-page--v2 .table2-mobile-overlay {
    display: none !important;
  }

  .table-page--v2 .new-topbar__button {
    display: inline-flex;
  }
}

.table-page--v2 .jobs-table-wrap {
  max-height: calc(100vh - 320px);
  overflow: auto;
}

.table-page--v2 .jobs-table {
  width: 100%;
  min-width: 1200px;
  table-layout: auto;
}

.table-page--v2 .jobs-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7b8a;
}

.table-page--v2 .jobs-table tbody td {
  background: #ffffff;
  font-size: 12px;
  color: #10212d;
  border-bottom-color: #edf2f1;
  border-top: 1px solid #edf2f1;
  vertical-align: middle;
}

.table-page--v2 .jobs-table tbody tr:nth-child(even) td {
  background: #ffffff;
}

.table-page--v2 .jobs-table__row {
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.table-page--v2 .jobs-table__row--interactive {
  cursor: pointer;
}

.table-page--v2 .jobs-table__row--interactive:hover td,
.table-page--v2 .jobs-table__row--interactive:focus-within td {
  background: #f7fbfa;
}

.table-page--v2 .jobs-table__row--interactive:hover td:first-child,
.table-page--v2 .jobs-table__row--interactive:focus-within td:first-child {
  box-shadow: inset 3px 0 0 #18a999;
}

.table-page--v2 .jobs-table__job-no {
  font-size: 12px;
  font-weight: 700;
  color: #118274;
  letter-spacing: 0.01em;
}

.table-page--v2 .jobs-table th[data-col-key="jobNo"],
.table-page--v2 .jobs-table td[data-col-key="jobNo"] {
  width: 7ch;
  min-width: 7ch;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.table-page--v2 .jobs-table th[data-col-key="startDate"],
.table-page--v2 .jobs-table td[data-col-key="startDate"] {
  width: 96px;
  min-width: 96px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.table-page--v2 .jobs-table th[data-col-key="status"],
.table-page--v2 .jobs-table td[data-col-key="status"] {
  width: 100px;
  min-width: 100px;
  white-space: nowrap;
}

.table-page--v2 .jobs-table th[data-col-key="progress"],
.table-page--v2 .jobs-table td[data-col-key="progress"] {
  width: 150px;
  min-width: 150px;
  white-space: nowrap;
}

.table-page--v2 .jobs-table th[data-col-key="quotationNo"],
.table-page--v2 .jobs-table td[data-col-key="quotationNo"],
.table-page--v2 .jobs-table th[data-col-key="invoiceNo"],
.table-page--v2 .jobs-table td[data-col-key="invoiceNo"],
.table-page--v2 .jobs-table th[data-col-key="lpoNo"],
.table-page--v2 .jobs-table td[data-col-key="lpoNo"] {
  width: 100px;
  min-width: 100px;
  white-space: nowrap;
}

.table-page--v2 .jobs-table th[data-col-key="lpoNo"],
.table-page--v2 .jobs-table td[data-col-key="lpoNo"] {
  width: 150px;
  min-width: 150px;
}

.table-page--v2 .jobs-table th[data-col-key="client"],
.table-page--v2 .jobs-table td[data-col-key="client"] {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.table-page--v2 .jobs-table th[data-col-key="brand"],
.table-page--v2 .jobs-table td[data-col-key="brand"] {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.table-page--v2 .jobs-table th[data-col-key="staff"],
.table-page--v2 .jobs-table td[data-col-key="staff"] {
  width: 100px;
  min-width: 100px;
}

.table-page--v2 .jobs-table th[data-col-key="detail"],
.table-page--v2 .jobs-table td[data-col-key="detail"] {
  min-width: 150px;
  width: auto;
}

.table-page--v2 .jobs-table td[data-col-key="detail"] {
  white-space: normal;
  min-width: 150px;
}

.table-page--v2 .jobs-table th[data-col-key]:not([data-col-key="jobNo"]):not([data-col-key="startDate"]):not([data-col-key="status"]):not([data-col-key="progress"]):not([data-col-key="quotationNo"]):not([data-col-key="invoiceNo"]):not([data-col-key="lpoNo"]):not([data-col-key="client"]):not([data-col-key="brand"]):not([data-col-key="staff"]):not([data-col-key="detail"]),
.table-page--v2 .jobs-table td[data-col-key]:not([data-col-key="jobNo"]):not([data-col-key="startDate"]):not([data-col-key="status"]):not([data-col-key="progress"]):not([data-col-key="quotationNo"]):not([data-col-key="invoiceNo"]):not([data-col-key="lpoNo"]):not([data-col-key="client"]):not([data-col-key="brand"]):not([data-col-key="staff"]):not([data-col-key="detail"]) {
  width: 100px;
  min-width: 100px;
}

.table-page--v2 .jobs-table td[data-col-key="client"],
.table-page--v2 .jobs-table td[data-col-key="brand"],
.table-page--v2 .jobs-table td[data-col-key="staff"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-page--v2 .jobs-table td[data-col-key="jobNo"] .job-link-button,
.table-page--v2 .jobs-table td[data-col-key="quotationNo"],
.table-page--v2 .jobs-table td[data-col-key="invoiceNo"],
.table-page--v2 .jobs-table td[data-col-key="lpoNo"],
.table-page--v2 .jobs-table td[data-col-key="startDate"] {
  white-space: nowrap;
}

.table-page--v2 .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  font-family: "Akkurat", "Akkurat Pro", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.table-page--v2 .status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.92;
}

.table-page--v2 .job-modal[open] {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.table-page--v2 .job-modal {
  border: none;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
}

.table-page--v2:has(.job-modal[open]) {
  overflow: hidden;
}

.table-page--v2 .job-modal::backdrop {
  background: rgba(8, 12, 34, 0.34);
  backdrop-filter: blur(2px);
}

.table-page--v2 .job-modal__card--redesign {
  width: min(820px, 100vw);
  max-height: 100vh;
  height: 100vh;
  min-height: 100vh;
  margin: 0 0 0 auto;
  padding: 24px 28px;
  border-radius: 0;
  background: #f7fbfa;
  box-shadow: -20px 0 44px rgba(15, 23, 42, 0.14);
  overflow: auto;
  box-sizing: border-box;
}

.table-page--v2 .table-progress {
  position: relative;
  display: block;
  min-width: 150px;
}

.table-page--v2 .table-progress__track {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.table-page--v2 .table-progress__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  font-family: "Akkurat", "Akkurat Pro", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
  pointer-events: none;
}

.table-page--v2 .jobs-table__mobile-status,
.table-page--v2 .jobs-table__mobile-brand {
  display: none;
}

@media (max-width: 1280px) {
  .table-page--v2 .jobs-table th[data-col-key="status"],
  .table-page--v2 .jobs-table td[data-col-key="status"] {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .table-page--v2 .jobs-table td[data-col-key="status"] .status-pill {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    padding: 0;
    gap: 0;
    background: transparent !important;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  .table-page--v2 .jobs-table td[data-col-key="status"] .status-pill::before {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
}

@media (max-width: 1240px) {
  .table-page--v2 .jobs-table {
    min-width: 1080px;
  }

  .table-page--v2 .jobs-table th[data-col-key]:not([data-col-key="jobNo"]):not([data-col-key="startDate"]):not([data-col-key="status"]):not([data-col-key="progress"]):not([data-col-key="quotationNo"]):not([data-col-key="invoiceNo"]):not([data-col-key="lpoNo"]):not([data-col-key="client"]):not([data-col-key="brand"]):not([data-col-key="staff"]):not([data-col-key="detail"]),
  .table-page--v2 .jobs-table td[data-col-key]:not([data-col-key="jobNo"]):not([data-col-key="startDate"]):not([data-col-key="status"]):not([data-col-key="progress"]):not([data-col-key="quotationNo"]):not([data-col-key="invoiceNo"]):not([data-col-key="lpoNo"]):not([data-col-key="client"]):not([data-col-key="brand"]):not([data-col-key="staff"]):not([data-col-key="detail"]) {
    display: none;
  }
}

@media (max-width: 1160px) {
  .table-page--v2 .jobs-table {
    min-width: 980px;
  }

  .table-page--v2 .jobs-table th[data-col-key="lpoNo"],
  .table-page--v2 .jobs-table td[data-col-key="lpoNo"] {
    display: none;
  }
}

@media (max-width: 1080px) {
  .table-page--v2 .jobs-table {
    min-width: 880px;
  }

  .table-page--v2 .jobs-table th[data-col-key="invoiceNo"],
  .table-page--v2 .jobs-table td[data-col-key="invoiceNo"] {
    display: none;
  }
}

@media (max-width: 1000px) {
  .table-page--v2 .jobs-table {
    min-width: 780px;
  }

  .table-page--v2 .jobs-table th[data-col-key="quotationNo"],
  .table-page--v2 .jobs-table td[data-col-key="quotationNo"] {
    display: none;
  }
}

@media (max-width: 920px) {
  .table-page--v2 .jobs-table {
    min-width: 680px;
  }

  .table-page--v2 .jobs-table th[data-col-key="startDate"],
  .table-page--v2 .jobs-table td[data-col-key="startDate"] {
    display: none;
  }
}

@media (max-width: 840px) {
  .table-page--v2 .jobs-table {
    min-width: 580px;
  }

  .table-page--v2 .jobs-table th[data-col-key="staff"],
  .table-page--v2 .jobs-table td[data-col-key="staff"] {
    display: none;
  }
}

@media (max-width: 720px) {
  .overview-grid--metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .table-page--v2 .overview-grid--metrics {
    display: grid;
  }

  .overview-card--schedule {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .schedule-list {
    grid-template-columns: 1fr;
  }

  .schedule-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .schedule-item__headline {
    gap: 6px;
  }

  .schedule-item__brand {
    font-size: 13px;
  }

  .table-page--v2 .jobs-table-wrap {
    overflow-x: hidden;
  }

  .table-page--v2 .jobs-table {
    min-width: 100%;
    width: 100%;
    table-layout: fixed;
  }

  .table-page--v2:not(.inventory-page) .jobs-table thead {
    display: none;
  }

  .table-page--v2:not(.inventory-page) .jobs-table,
  .table-page--v2:not(.inventory-page) .jobs-table tbody {
    display: block;
  }

  /* Job-tracker mobile card grid (jobno/progress/client/detail areas).
     Scoped away from pages that have their own mobile card layout:
     .quotations2-page, .invoices-page, .installations-page,
     .clients-new-page, .inventory-page — see the page-specific blocks
     further down. */
  .table-page--v2:not(.quotations2-page):not(.invoices-page):not(.installations-page):not(.clients-new-page):not(.inventory-page) .jobs-table tbody tr {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "jobno progress"
      "client detail";
    gap: 4px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf2f1;
  }

  .table-page--v2:not(.inventory-page) .jobs-table tbody td {
    display: block;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0;
  }

  .table-page--v2 .jobs-table td[data-col-key="jobNo"] {
    grid-area: jobno;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    min-width: 80px !important;
  }
  .table-page--v2 .jobs-table td[data-col-key="progress"] {
    grid-area: progress;
    display: block;
    min-width: 0 !important;
  }
  .table-page--v2 .jobs-table td[data-col-key="status"] { display: none !important; }
  .table-page--v2 .jobs-table td[data-col-key="client"] {
    grid-area: client;
    font-size: 11px;
    color: #5f6b78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table-page--v2 .jobs-table td[data-col-key="detail"] {
    grid-area: detail;
    font-size: 12px;
    color: #1f3342;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0 !important;
  }
  .table-page--v2 .jobs-table td[data-col-key="brand"] { display: none !important; }

  /* Job-tracker mobile hides cells without a known data-col-key. Scoped
     away from the four pages whose renderers don't emit data-col-key
     (.quotations2-page, .invoices-page, .installations-page,
     .clients-new-page) — each handles its own cells via nth-child below. */
  .table-page--v2:not(.quotations2-page):not(.invoices-page):not(.installations-page):not(.clients-new-page) .jobs-table td:not([data-col-key="jobNo"]):not([data-col-key="progress"]):not([data-col-key="client"]):not([data-col-key="detail"]) {
    display: none !important;
  }

  .table-page--v2 .jobs-table td[data-col-key="jobNo"] .status-pill {
    display: inline-flex;
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    padding: 0;
    gap: 0;
    background: transparent !important;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  .table-page--v2 .jobs-table td[data-col-key="jobNo"] .status-pill::before {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  .table-page--v2 .jobs-table__mobile-status,
  .table-page--v2 .jobs-table__mobile-brand {
    display: inline-flex;
  }

  .table-page--v2 .table-progress {
    min-width: 0;
    width: 100%;
  }

  .table-page--v2 .table-progress__track {
    min-width: 0;
  }

  .table-page--v2 .jobs-table__mobile-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .table-page--v2 .jobs-table__mobile-progress-wrap > .status-pill,
  .table-page--v2 .jobs-table__mobile-progress-wrap > .table-progress {
    flex: 0 1 120px;
    max-width: 120px;
    min-width: 0;
  }

  .table-page--v2 .jobs-table__mobile-brand {
    flex: 0 0 auto;
    max-width: 72px;
    font-size: 11px;
    font-weight: 600;
    color: #73808c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  .table-page--v2 .jobs-table__mobile-status {
    flex: 0 0 auto;
  }
}

.status-pill--close,
.status-pill--closed,
.status-pill--cancelled {
  background: rgba(159, 64, 61, 0.14) !important;
  color: #9f403d !important;
}

/* Final quotation status/admin grid overrides */
.quotation-page .quotation-list-head,
.quotation-page .quotation-list-row {
  grid-template-columns: 92px 116px 54px minmax(0, 1.15fr) minmax(0, 1.25fr) 96px 112px 104px 96px;
}

.quotation-page .quotation-list-row__cell--status,
.quotation-page .quotation-list-row__cell--status .quotation-status-select {
  width: 100%;
}

.quotation-page .quotation-list-row__cell--date span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quotation-page .quotation-status-select {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 12px;
  background: #ffffff;
  color: #1a2120;
  font: inherit;
}

.quotation-page .quotation-list-row {
  min-height: 64px;
}

.quotation-workflow {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0 14px;
}

.quotation-workflow__field {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.quotation-workflow__field span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000435;
}

.quotation-workflow__field select,
.quotation-workflow__field input {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 14px;
  background: #ffffff;
  font: inherit;
}

.quotation-meta-row--version {
  align-items: center;
}

.quotation-version-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.quotation-version-control input {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 14px;
  background: #ffffff;
  font: inherit;
}

.quotation-version-control__button {
  min-height: 30px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 14px;
  background: #ffffff;
  color: #000435;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.quotation-version-control__button:hover {
  border-color: rgba(25, 145, 125, 0.45);
  color: #19917d;
}

.settings-upload-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
}

.settings-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Staff import dry-run preview */
.staff-import-preview {
  display: grid;
  gap: 12px;
}

.staff-import-preview__summary {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef4f2;
  color: #233;
  font-size: 0.9rem;
  line-height: 1.5;
}

.staff-import-preview__list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.staff-import-preview__row {
  display: grid;
  grid-template-columns: 72px minmax(120px, 1.4fr) 92px minmax(160px, 2fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e6ece9;
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.86rem;
}

.staff-import-preview__row--skip {
  background: #fdf1f0;
  border-color: #f3d3cf;
}

.staff-import-preview__line {
  color: #8a9692;
  font-weight: 700;
  font-size: 0.78rem;
}

.staff-import-preview__name {
  font-weight: 800;
  color: #17211d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-import-preview__detail {
  color: #5b6a66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-import-preview__badge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.staff-import-preview__badge--update {
  background: #d8efe6;
  color: #0c6b53;
}

.staff-import-preview__badge--add {
  background: #dbe8fb;
  color: #1b4f9c;
}

.staff-import-preview__badge--skip {
  background: #f6dada;
  color: #b42318;
}

@media (max-width: 720px) {
  .staff-import-preview__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name badge"
      "detail detail"
      "line line";
    gap: 4px 12px;
  }
  .staff-import-preview__name { grid-area: name; }
  .staff-import-preview__badge { grid-area: badge; justify-self: end; }
  .staff-import-preview__detail { grid-area: detail; white-space: normal; }
  .staff-import-preview__line { grid-area: line; }
}

.quotation-company-dialog {
  border: none;
  padding: 0;
  background: transparent;
}

.quotation-company-dialog::backdrop {
  background: rgba(8, 12, 34, 0.48);
}

.quotation-company-dialog__card {
  width: min(100vw - 32px, 420px);
  padding: 28px;
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(8, 12, 34, 0.22);
}

.quotation-company-dialog__card h2 {
  margin: 0 0 20px;
  font-family: "Manrope", sans-serif;
  font-size: 1.8rem;
}

.quotation-company-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Mobile: stack the Enlitco / Colors Gate buttons vertically and tighten
   the card so it doesn't feel cramped on a phone. */
@media (max-width: 480px) {
  .quotation-company-dialog__card {
    width: min(100vw - 24px, 360px);
    padding: 20px 18px;
    border-radius: 18px;
  }

  .quotation-company-dialog__card h2 {
    margin: 0 0 14px;
    font-size: 1.25rem;
  }

  .quotation-company-dialog__actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Final quotation list alignment fix */
.quotation-list-head,
.quotation-list-row {
  display: grid !important;
  grid-template-columns: 96px 132px 46px minmax(180px, 1fr) minmax(220px, 1.15fr) 96px 110px 132px !important;
  gap: 10px;
  align-items: center;
}

.quotation-list-head span:nth-child(8) {
  text-align: right;
}

.quotation-list-row__cell--version {
  justify-content: center;
}

.quotation-list-row__cell--version span {
  text-align: center;
  font-weight: 700;
}

.quotation-list-row__actions {
  grid-column: 8;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quotation-close-button {
  color: #111111 !important;
  opacity: 1;
}

.quotation-close-button:hover,
.quotation-close-button:focus-visible {
  color: #000000 !important;
}

@media (max-width: 900px) {
  .quotation-list-head,
  .quotation-list-row {
    grid-template-columns: 80px 1fr 56px 1fr;
  }

  .quotation-list-head span:nth-child(n + 5),
  .quotation-list-row > *:nth-child(n + 5):not(.quotation-list-row__actions) {
    display: none;
  }

  .quotation-list-row__actions {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
  }
}

/* Final quotation list/version + close button overrides */
.quotation-list-head,
.quotation-list-row {
  grid-template-columns: 96px 132px 44px minmax(0, 1fr) minmax(0, 1.28fr) 104px 110px 132px;
}

.quotation-list-row__cell--version {
  justify-content: center;
}

.quotation-list-row__cell--version span {
  text-align: center;
  font-weight: 700;
}

.quotation-close-button {
  color: #111111 !important;
  opacity: 1;
}

.quotation-close-button:hover,
.quotation-close-button:focus-visible {
  color: #000000 !important;
}

@media (max-width: 900px) {
  .quotation-list-head,
  .quotation-list-row {
    grid-template-columns: 80px 1fr 64px 1fr;
  }

  .quotation-list-head span:nth-child(n + 5),
  .quotation-list-row > *:nth-child(n + 5):not(.quotation-list-row__actions) {
    display: none;
  }

  .quotation-list-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Final quotation totals and item-order overrides */
.quotation-items__head,
.quotation-item-row {
  grid-template-columns: 34px minmax(0, 1fr) 58px 90px 90px;
  column-gap: 8px;
}

.quotation-item-row__qty {
  width: 100%;
  font-size: 0.62rem;
  padding: 0 6px;
}

.quotation-item-row__rate,
.quotation-item-row__total {
  width: 100%;
  font-size: 0.62rem;
  padding: 0 6px;
}

.quotation-items__head {
  font-size: 0.88rem;
}

.quotation-totals {
  width: 370px;
  padding: 0;
  overflow: hidden;
}

.quotation-totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.quotation-totals__subtotal {
  background: #000000;
  color: #ffffff;
  font-size: 1.08rem;
}

.quotation-totals__grand {
  background: #ffffff;
  color: #111111;
  font-size: 1.08rem;
}

.quotation-totals div:last-child {
  border-bottom: none;
}

@media (max-width: 900px) {
  .quotation-items__head,
  .quotation-item-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .quotation-item-row__qty,
  .quotation-item-row__rate,
  .quotation-item-row__total {
    grid-column: 2;
  }
}

/* Final quotation list and delivery order overrides */
.quotation-index__hero {
  align-items: center;
}

.quotation-list-shell {
  overflow: hidden;
}

.quotation-list-head,
.quotation-list-row {
  display: grid;
  grid-template-columns: 96px 120px minmax(0, 1fr) minmax(0, 1.35fr) 112px 112px 132px;
  gap: 10px;
  align-items: center;
}

.quotation-list-head {
  padding: 12px 20px;
  background: #f6f3f4;
  color: #38373a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quotation-list {
  display: grid;
}

.quotation-list-row {
  min-height: 72px;
  padding: 8px 20px;
  border-top: 1px solid rgba(0, 4, 53, 0.06);
  background: rgba(255, 255, 255, 0.84);
}

.quotation-list-row:nth-child(even) {
  background: #fbf8f4;
}

.quotation-list-row.is-active {
  background: rgba(15, 107, 91, 0.08);
}

.quotation-list-row__cell {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.quotation-list-row__cell span,
.quotation-list-row__cell strong {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quotation-list-row__cell--quote strong {
  color: #0f6b5b;
}

.quotation-list-row__cell--total {
  justify-content: flex-end;
}

.quotation-list-row__cell--total span {
  text-align: right;
}

.quotation-company-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quotation-list-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quotation-list-row__do {
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.77rem;
  font-weight: 800;
}

.quotation-list-row__download {
  min-width: 40px;
  width: 40px;
  height: 34px;
  padding: 0;
}

.quotation-list-row__download-icon {
  width: 16px;
  height: 16px;
}

.delivery-order-modal__card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.delivery-order-sheet__top {
  display: grid;
  grid-template-columns: 1.35fr 0.7fr;
  gap: 16px;
  margin-bottom: 10px;
}

.delivery-order-band,
.delivery-order-band.delivery-order-band--values {
  grid-template-columns: 1fr;
}

.delivery-order-items {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 24px;
  background: #fffdf9;
}

.delivery-order-items__body {
  display: grid;
}

.delivery-order-items__head,
.delivery-order-item-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: start;
}

.delivery-order-items__head {
  padding-bottom: 10px;
  border-bottom: 3px solid #000435;
  font-size: 0.9rem;
  font-weight: 700;
}

.delivery-order-item-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

.delivery-order-item-row:last-child {
  border-bottom: none;
}

.delivery-order-item-row__serial {
  padding-top: 10px;
  font-weight: 700;
}

.delivery-order-item-row__description,
.delivery-order-item-row__qty,
.delivery-order-signature input {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #ffffff;
  font: inherit;
}

.delivery-order-item-row__description {
  line-height: 1.45;
  resize: vertical;
}

.delivery-order-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 28px;
}

.delivery-order-signature {
  display: grid;
  gap: 8px;
}

.delivery-order-signature span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000435;
}

.delivery-order-sheet,
.delivery-order-sheet * {
  box-sizing: border-box;
}

.delivery-order-sheet {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.delivery-order-items,
.delivery-order-items__body,
.delivery-order-item-row,
.delivery-order-item-row__description,
.delivery-order-item-row__qty,
.delivery-order-signatures,
.delivery-order-signature input {
  min-width: 0;
}

@media (max-width: 900px) {
  .quotation-list-head,
  .quotation-list-row {
    grid-template-columns: 80px 1fr 1fr;
  }

  .quotation-list-head span:nth-child(n + 4),
  .quotation-list-row > *:nth-child(n + 4):not(.quotation-list-row__actions) {
    display: none;
  }

  .quotation-list-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .delivery-order-sheet__top,
  .delivery-order-signatures {
    grid-template-columns: 1fr;
  }
}

/* Compact quotation workspace */
.quotation-page .quotation-index {
  gap: 11px;
  padding: 62px 19px 16px;
  font-size: 0.88rem;
}

.quotation-page .quotation-index__hero h1 {
  font-size: 1.6rem;
}

.quotation-page .quotation-index__hero .table-action-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.quotation-page .quotation-index__toolbar {
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
}

.quotation-page .quotation-index__search,
.quotation-page .quotation-index__select,
.quotation-page .table-search {
  min-height: 38px;
  font-size: 0.84rem;
}

.quotation-page .quotation-list-shell {
  border-radius: 16px;
}

.quotation-page .quotation-list-head,
.quotation-page .quotation-list-row {
  grid-template-columns: 77px 96px 42px minmax(92px, 0.95fr) minmax(160px, 1.35fr) 78px 108px 82px 52px;
  gap: 8px;
}

.quotation-page .quotation-list-head {
  padding: 10px 16px;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

.quotation-page .quotation-list-row {
  min-height: 54px;
  padding: 6px 16px;
  font-size: 0.8rem;
}

.quotation-page .quotation-company-pill {
  min-height: 22px;
  padding: 0 9px;
  font-size: 0.62rem;
}

.quotation-page .quotation-status-select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  border-radius: 9px;
  font-size: 0.78rem;
}

.quotation-page .quotation-list-row__actions {
  gap: 6px;
}

.quotation-page .quotation-list-row__do {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 0.68rem;
}

.quotation-page .quotation-list-row__download {
  min-width: 32px;
  width: 32px;
  height: 28px;
  border-radius: 9px;
}

.quotation-page .quotation-list-row__download-icon {
  width: 14px;
  height: 14px;
}

.quotation-page .quotation-modal {
  width: min(168mm, calc(100vw - 20px));
  max-width: min(168mm, calc(100vw - 20px));
  max-height: calc(100vh - 16px);
  margin: 8px auto;
  border-radius: 14px;
}

.quotation-page .quotation-modal__card {
  padding: 14px;
}

.quotation-page .quotation-modal__header {
  gap: 50px;
}

.quotation-page .quotation-modal__header h2 {
  font-size: 1.25rem;
}

.quotation-page .quotation-sheet--editor {
  padding: 14px;
  font-size: 0.84rem;
}

.quotation-page .quotation-sheet__header {
  margin-bottom: 3px;
}

.quotation-page .quotation-sheet__header h2 {
  font-size: 1.08rem;
}

.quotation-page .quotation-sheet__logo {
  width: 104px;
  max-height: 45px;
}

.quotation-page .quotation-sheet__top,
.quotation-page .delivery-order-sheet__top {
  gap: 8px;
}

.quotation-page .quotation-block,
.quotation-page .quotation-meta--editable {
  border-radius: 11px;
}

.quotation-page .quotation-block {
  padding: 8px;
}

.quotation-page .quotation-inline-card {
  gap: 3px;
  padding: 3px 0 0;
}

.quotation-page .quotation-meta--editable {
  width: 280px;
  gap: 2px;
  padding: 6px 8px;
}

.quotation-page .quotation-meta-row {
  grid-template-columns: 53px minmax(0, 1fr);
  gap: 5px;
}

.quotation-page .quotation-editable-field span,
.quotation-page .quotation-meta--editable span,
.quotation-page .quotation-meta-row span {
  font-size: 0.58rem;
}

.quotation-page .quotation-editable-field input,
.quotation-page .quotation-editable-field select,
.quotation-page .quotation-meta--editable input {
  min-height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 0.72rem;
}

.quotation-page .quotation-client-display--textarea {
  min-height: 59px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
}

.quotation-page .quotation-band > div {
  padding: 4px 8px;
  font-size: 0.62rem;
}

.quotation-page .quotation-band--editable input {
  min-height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 0.7rem;
}

.quotation-page .quotation-band--values {
  margin-bottom: -10px !important;
  top: -8px;
}

.quotation-page .quotation-note,
.quotation-page .quotation-notes-field textarea {
  font-size: 0.7rem;
}

.quotation-page .quotation-notes-field textarea {
  min-height: 59px;
  padding: 8px 10px;
  border-radius: 10px;
}

.quotation-page .quotation-items {
  padding: 10px 16px;
  border-radius: 14px;
}

.quotation-page .quotation-items__head,
.quotation-page .quotation-item-row {
  grid-template-columns: 27px minmax(0, 1fr) 46px 66px 66px;
  column-gap: 6px;
}

.quotation-page .quotation-items__head {
  padding-bottom: 6px;
  font-size: 0.7rem;
  border-bottom-width: 2px;
}

.quotation-page .quotation-item-row {
  padding: 7px 0;
  font-size: 0.75rem;
}

.quotation-page .quotation-item-row__serial-wrap {
  gap: 4px;
}

.quotation-page .quotation-item-row__insert-header {
  width: 16px;
  height: 16px;
  font-size: 0.76rem;
}

.quotation-page .quotation-item-row__serial {
  font-size: 0.75rem;
}

.quotation-page .quotation-item-row__description {
  min-height: 42px;
  padding: 9px 11px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.quotation-page .quotation-item-row__qty,
.quotation-page .quotation-item-row__rate,
.quotation-page .quotation-item-row__tax,
.quotation-page .quotation-item-row__total {
  min-height: 34px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.58rem;
}

.quotation-page .quotation-actions {
  gap: 8px;
  margin-top: 5px;
}

.quotation-page .quotation-actions .table-action-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.84rem;
}

.quotation-page .delivery-order-items {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 18px;
}

.quotation-page .delivery-order-items__head,
.quotation-page .delivery-order-item-row {
  grid-template-columns: 35px minmax(0, 1fr) 88px;
  gap: 10px;
}

.quotation-page .delivery-order-items__head {
  padding-bottom: 8px;
  font-size: 0.72rem;
}

.quotation-page .delivery-order-item-row {
  padding: 8px 0;
}

.quotation-page .delivery-order-item-row__description,
.quotation-page .delivery-order-item-row__qty,
.quotation-page .delivery-order-signature input {
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.quotation-page .delivery-order-signatures {
  gap: 22px;
  margin-top: 22px;
}

.quotation-page .delivery-order-signature span {
  font-size: 0.66rem;
}

@media (max-width: 900px) {
  .quotation-page .quotation-index {
    padding: 58px 10px 14px;
  }

  .quotation-page .quotation-list-head,
  .quotation-page .quotation-list-row {
    grid-template-columns: 64px 1fr 1fr;
  }

  .quotation-page .quotation-modal {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
  }

  .quotation-page .quotation-sheet__top,
  .quotation-page .delivery-order-sheet__top {
    grid-template-columns: 1fr;
  }

  .quotation-page .quotation-meta--editable {
    width: 100%;
  }

  .quotation-page .quotation-items__head,
  .quotation-page .quotation-item-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }
}

/* Compact settings scale */
.settings-page .settings-layout {
  grid-template-columns: 208px 1fr;
  gap: 19px;
  padding: 77px 19px 19px;
  font-size: 0.9rem;
}

.settings-page .settings-sidebar,
.settings-page .settings-main {
  border-radius: 18px;
}

.settings-page .settings-sidebar {
  padding: 16px;
  gap: 25px;
}

.settings-page .settings-nav-button {
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 0.88rem;
  box-shadow: 0 8px 19px rgba(28, 28, 23, 0.08);
}

.settings-page .settings-main {
  padding: 29px;
}

.settings-page .settings-section__header,
.settings-page .settings-list-item {
  gap: 13px;
}

.settings-page .settings-section__header {
  margin-bottom: 14px;
}

.settings-page .settings-section__header h2 {
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.settings-page .settings-section__header p,
.settings-page .settings-list-item p {
  font-size: 0.78rem;
}

.settings-page .settings-add-form,
.settings-page .settings-list {
  gap: 8px;
}

.settings-page .settings-list-item {
  padding: 13px 14px;
  border-radius: 14px;
}

.settings-page .settings-users-grid {
  grid-template-columns: repeat(auto-fit, minmax(176px, 176px));
  gap: 18px;
}

.settings-page .settings-user-card {
  gap: 10px;
  padding: 13px 14px;
}

.settings-page .settings-user-card__input,
.settings-page .settings-user-card__save {
  min-height: 28px;
  font-size: 0.82rem;
}

.settings-page .settings-add-input,
.settings-page .settings-add-form input,
.settings-page .settings-add-form select,
.settings-page .settings-add-form button,
.settings-page .table-action-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.settings-page .settings-inline-check {
  min-height: 35px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.settings-page #columnsSection .settings-section__header {
  margin-bottom: 22px;
}

.settings-page .settings-columns-save-button {
  min-width: 128px;
}

.settings-page #columnsSaveStatus {
  min-height: 14px;
  margin-bottom: 22px;
  font-size: 0.74rem;
}

.settings-page .settings-list--columns {
  gap: 10px;
}

.settings-page .settings-list-item--column {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
}

.settings-page .settings-column-toggle,
.settings-page .settings-column-switch {
  width: 32px;
}

.settings-page .settings-column-switch {
  height: 18px;
}

.settings-page .settings-column-switch::after {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
}

.settings-page .settings-column-toggle input:checked + .settings-column-switch::after {
  transform: translateX(14px);
}

.settings-page .settings-column-label {
  min-height: 30px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.settings-page .settings-column-actions {
  gap: 6px;
}

.settings-page .settings-column-order-button {
  min-height: 24px;
  padding: 0 10px;
  font-size: 0.64rem;
}

.settings-page .settings-notification-row {
  grid-template-columns: minmax(170px, 1fr) 72px 72px 72px 72px 72px minmax(180px, 0.9fr);
  gap: 11px;
  padding: 11px 14px;
  border-radius: 13px;
}

.settings-page .settings-notification-row--head {
  font-size: 0.66rem;
}

.settings-page .settings-notification-row strong {
  font-size: 0.82rem;
}

.settings-page .settings-category-dropdown summary {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.settings-page .settings-categories-shell {
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 26px;
  min-height: calc(100vh - 112px);
}

.settings-page .settings-categories-directory,
.settings-page .settings-categories-detail {
  padding: 24px;
  border-radius: 19px;
}

.settings-page .settings-categories-directory,
.settings-page .settings-category-detail__permissions {
  gap: 8px;
}

.settings-page .settings-categories-directory__header {
  gap: 11px;
}

.settings-page .settings-categories-directory__header .settings-add-input {
  min-height: 43px;
}

.settings-page .settings-category-directory-card {
  grid-template-columns: 29px minmax(0, 1fr) 7px;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 14px;
}

.settings-page .settings-category-directory-card__avatar {
  width: 29px;
  height: 29px;
  border-radius: 10px;
  font-size: 0.72rem;
}

.settings-page .settings-category-directory-card__content strong {
  font-size: 0.86rem;
}

.settings-page .settings-category-directory-card__content small {
  font-size: 0.66rem;
}

.settings-page .settings-category-detail__header h2 {
  font-size: 1.6rem;
}

.settings-page .settings-category-detail__panel {
  padding: 16px;
  border-radius: 19px;
}

.settings-page .settings-category-permission-card {
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  gap: 11px;
  padding: 8px 11px;
  border-radius: 13px;
}

.settings-page .settings-category-permission-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  font-size: 0.74rem;
}

.settings-page .settings-category-permission-card__copy strong {
  font-size: 0.8rem;
}

.settings-page .settings-category-permission-card input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.settings-page .staff-directory {
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
  border-radius: 22px;
}

.settings-page .staff-directory__sidebar {
  gap: 14px;
  padding: 22px 19px;
}

.settings-page .staff-directory__sidebar h2 {
  font-size: 1rem;
}

.settings-page .staff-directory__search input,
.settings-page .staff-directory__add input,
.settings-page .staff-directory__add .table-action-button {
  min-height: 39px;
  padding: 0 13px;
  font-size: 0.82rem;
}

.settings-page .staff-directory__add,
.settings-page .staff-directory__search,
.settings-page .staff-directory__list {
  gap: 8px;
}

.settings-page .staff-member-card {
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 10px;
}

.settings-page .staff-member-card__avatar {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  font-size: 0.76rem;
}

.settings-page .staff-member-card strong {
  font-size: 0.78rem;
}

.settings-page .staff-member-card small {
  margin-top: 2px;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.settings-page .staff-member-card__inactive-mark {
  top: 5px;
  right: 6px;
  width: 14px;
  height: 14px;
  font-size: 0.58rem;
}

.settings-page .staff-profile {
  gap: 22px;
  padding: 24px 32px;
}

.settings-page .staff-profile__hero {
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 22px;
}

.settings-page .staff-profile__photo {
  width: 136px;
  height: 136px;
  border-radius: 16px;
  font-size: 2.7rem;
}

.settings-page .staff-profile__photo-button {
  min-width: 43px;
  min-height: 35px;
  border-radius: 11px;
  font-size: 0.62rem;
}

.settings-page .staff-profile__photo-actions {
  right: -8px;
  bottom: -8px;
  gap: 6px;
}

.settings-page .staff-profile__title p,
.settings-page .staff-profile__grid span,
.settings-page .staff-profile__departments h3,
.settings-page .staff-profile__salary h3 {
  font-size: 0.66rem;
}

.settings-page .staff-profile__name {
  margin: 6px 0 11px;
  font-size: 1.4rem;
}

.settings-page .staff-profile__chips {
  gap: 8px;
}

.settings-page .staff-profile__chips input,
.settings-page .staff-profile__chips select {
  min-height: 28px;
  padding: 0 11px;
  font-size: 0.68rem;
}

.settings-page .staff-profile__grid {
  gap: 19px 30px;
}

.settings-page .staff-profile__grid label {
  gap: 6px;
  padding-bottom: 10px;
}

.settings-page .staff-profile__grid input {
  font-size: 0.92rem;
}

.settings-page .staff-profile__departments {
  gap: 11px;
  padding: 18px 21px;
  border-radius: 14px;
}

.settings-page .staff-profile__salary {
  gap: 11px;
  margin-top: 16px;
  padding: 18px 21px;
  border-radius: 14px;
}

.settings-page .staff-salary-grid {
  gap: 14px 30px;
}

.settings-page .staff-salary-col,
.settings-page .staff-salary-subfields {
  gap: 12px;
}

.settings-page .staff-salary-row span {
  font-size: 0.66rem;
}

.settings-page .staff-salary-row input {
  font-size: 0.92rem;
}

.settings-page .staff-salary-toggle > span:first-child {
  font-size: 0.72rem;
}

.settings-page .staff-profile__department-toggles {
  grid-auto-columns: minmax(104px, max-content);
  gap: 11px 27px;
  padding-top: 6px;
}

.settings-page .staff-department-toggle {
  gap: 8px;
  font-size: 0.78rem;
}

.settings-page .staff-department-toggle__switch {
  width: 27px;
  height: 14px;
}

.settings-page .staff-department-toggle__switch::after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
}

.settings-page .staff-department-toggle input:checked + .staff-department-toggle__switch::after {
  transform: translateX(13px);
}

.settings-page .staff-profile__actions {
  gap: 13px;
  margin-top: 22px;
}

@media (max-width: 1100px) {
  .settings-page .settings-layout,
  .settings-page .settings-categories-shell,
  .settings-page .staff-directory,
  .main-settings-shell {
    grid-template-columns: 1fr;
  }

  /* Mobile/tablet: the Team Directory card list collapses into a dropdown,
     and the staff details below become single-column + fully responsive. */
  .settings-page .staff-directory__mobile-select {
    display: block;
  }
  .settings-page .staff-directory__list {
    display: none;
  }
  .settings-page .staff-directory {
    min-height: 0;
  }
  .settings-page .staff-directory__sidebar {
    gap: 12px;
  }
  .settings-page .staff-profile {
    padding: 20px 18px;
  }
  .settings-page .staff-profile__hero,
  .settings-page .staff-profile__grid,
  .settings-page .staff-salary-grid {
    grid-template-columns: 1fr !important;
  }
  .settings-page .staff-profile__actions {
    flex-wrap: wrap;
  }
  /* Safety net: clip any stray overflow so the whole card never forces a
     horizontal scroll on narrow viewports. */
  .settings-page .staff-profile {
    overflow-x: hidden;
  }
  /* Stack the assigned-department toggles two-up rather than the wide
     "minmax(130px, max-content)" desktop tracks that pushed off-screen. */
  .settings-page .staff-profile__department-toggles {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 10px 18px;
  }
  /* Tighten the salary amount inputs so the row fits even when the label
     ("Off Day Overtime") is long. */
  .settings-page .staff-salary-row input {
    width: 130px;
  }
}

/* Phone: stack each salary/info row's label above its input/toggle, and let
   the action buttons wrap to two-per-row so nothing slides off-screen. */
@media (max-width: 720px) {
  .settings-page .staff-profile {
    padding: 16px 14px;
  }
  .settings-page .staff-profile__photo {
    width: 100px;
    height: 100px;
    font-size: 1.9rem;
  }
  .settings-page .staff-profile__name {
    font-size: 1.2rem;
    margin: 4px 0 8px;
  }
  .settings-page .staff-profile__salary {
    padding: 14px 14px;
  }
  .settings-page .staff-salary-row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .settings-page .staff-salary-row input {
    width: 100%;
    text-align: left;
    min-width: 0;
  }
  .settings-page .staff-salary-row--wide input {
    text-align: left;
  }
  .settings-page .staff-profile__actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .settings-page .staff-profile__actions > button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .settings-page .staff-profile__department-toggles {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .settings-page .staff-profile__hero {
    gap: 14px;
  }
}

/* The directory dropdown is desktop-hidden; it only shows under 1100px. */
.staff-directory__mobile-select {
  display: none;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  color: #18211f;
  font: inherit;
  font-weight: 700;
}

/* Final quotation editor design pass */
.quotation-page .quotation-modal {
  width: min(870px, calc(100vw - 24px));
  max-width: min(870px, calc(100vw - 24px));
  border-radius: 8px;
}

.quotation-page .quotation-modal__card {
  padding: 22px 26px;
  background: #f7fbfa;
}

.quotation-page .quotation-sheet--editor {
  gap: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.quotation-page .quotation-sheet__header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 3px;
}

.quotation-page .quotation-sheet__header h2 {
  font-size: 1.38rem;
  letter-spacing: 0.03em;
}

.quotation-page .quotation-sheet__logo {
  justify-self: center;
  width: 150:px;
  max-height: 70px;
}

.quotation-page .quotation-company-switch {
  justify-self: start;
  align-self: end;
  grid-column: 1;
  grid-row: 2;
  min-width: 180px;
  grid-template-columns: auto minmax(96px, 1fr);
  align-items: center;
  gap: 8px;
}

.quotation-page .quotation-company-switch span {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quotation-page .quotation-company-switch select {
  min-height: 24px;
  border-radius: 3px;
  background: #eaf4f2;
  font-size: 0.66rem;
}

.quotation-page .quotation-sheet__top {
  grid-template-columns: minmax(0, 1.18fr) minmax(230px, 0.82fr);
  gap: 30px;
}

.quotation-page .quotation-block,
.quotation-page .quotation-meta--editable {
  border-radius: 4px;
  background: #f0f7f6;
  padding: 8px;
}

.quotation-page .quotation-inline-card {
  gap: 3px;
  padding: 0;
}

.quotation-page .quotation-editable-field span,
.quotation-page .quotation-meta-row span,
.quotation-page .quotation-attn-row span {
  color: #344944;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quotation-page .quotation-editable-field select,
.quotation-page .quotation-editable-field input,
.quotation-page .quotation-client-display--textarea,
.quotation-page .quotation-meta-row input,
.quotation-page .quotation-version-control,
.quotation-page .quotation-attn-row input {
  min-height: 31px;
  border: none;
  border-radius: 2px;
  background: #eef7f5;
  font-size: 0.72rem;
  font-weight: 700;
}

.quotation-page .quotation-client-display--textarea {
  min-height: 82px;
  padding: 8px 10px;
  background: transparent;
  font-size: 0.72rem;
  line-height: 1.55;
}

.quotation-page .quotation-attn-row {
  width: 100%;
  padding: 0;
  background: transparent;
  grid-template-columns: 48px minmax(0, 1fr);
}

.quotation-page .quotation-attn-row input {
  background: transparent;
}

.quotation-page .quotation-meta--editable {
  align-content: start;
  gap: 3px;
}

.quotation-page .quotation-meta-row {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 20px;
  padding: 0 5px;
  background: #f0f7f6;
}

.quotation-page .quotation-meta-row input,
.quotation-page .quotation-version-control {
  background: transparent;
  font-size: 0.74rem;
}

.quotation-page .quotation-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.86fr 0.72fr;
  gap: 12px;
  background: transparent;
  border-radius: 0;
}

.quotation-page .quotation-band > div {
  padding: 8px 8px 15px;
  border-radius: 3px 3px 0 0;
  background: #e9f4f2;
  color: #2d5f56;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quotation-page .quotation-band--values {
  margin: -18px 0 0 !important;
  background: transparent;
}

.quotation-page .quotation-band--values > div {
  padding: 0;
  background: #e9f4f2;
  border-radius: 0 0 3px 3px;
}

.quotation-page .quotation-band--values input {
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
}

.quotation-page .quotation-note {
  font-size: 0.82rem;
  margin-top: -3px !important;
}

.quotation-page .quotation-items {
  padding: 6px 0 0;
  border: none;
  background: transparent;
}

.quotation-page .quotation-items__head,
.quotation-page .quotation-item-row {
  grid-template-columns: 36px minmax(0, 1fr) 62px 104px 112px;
}

.quotation-page .quotation-items__head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
  color: #60716d;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quotation-page .quotation-item-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.05);
}

.quotation-page .quotation-item-row__description,
.quotation-page .quotation-item-row__qty,
.quotation-page .quotation-item-row__rate,
.quotation-page .quotation-item-row__total {
  min-height: 31px;
  border: none;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

.quotation-page .quotation-footer {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.9fr);
  align-items: start;
  gap: 44px;
}

.quotation-page .quotation-terms {
  min-height: 150px;
  padding: 20px;
  border-radius: 4px;
  background: #e9f4f2;
  font-size: 0.68rem;
}

.quotation-page .quotation-totals {
  width: 100%;
  background: transparent;
}

.quotation-page .quotation-totals div {
  min-height: 42px;
  padding: 0 0 0 10px;
  border: none;
  font-size: 0.72rem;
}

.quotation-page .quotation-totals__subtotal {
  background: #e9f4f2;
  color: #0f6b5b;
}

.quotation-page .quotation-totals__vat {
  display: grid !important;
  grid-template-columns: 44px 54px 18px minmax(0, 1fr);
  gap: 8px;
}

.quotation-page .quotation-totals__vat strong {
  justify-self: end;
  text-align: right;
}

.quotation-page .quotation-totals__vat input {
  width: 54px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: #e9f4f2;
  text-align: center;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.quotation-page .quotation-totals__vat small {
  color: #6b7471;
  font-size: 0.7rem;
}

.quotation-page .quotation-totals strong {
  color: #0f6b5b;
}

.quotation-page .quotation-totals__grand strong {
  color: #111;
}

.quotation-page .quotation-notes-field textarea {
  min-height: 58px;
  border: none;
  border-radius: 4px;
  background: #e9f4f2;
  font-size: 0.74rem;
}

@media (max-width: 760px) {
  .quotation-page .quotation-sheet__header,
  .quotation-page .quotation-sheet__top,
  .quotation-page .quotation-band,
  .quotation-page .quotation-footer {
    grid-template-columns: 1fr;
  }

  .quotation-page .quotation-company-switch {
    grid-column: auto;
    grid-row: auto;
  }
}

/* The design page now uses the shared table2 topbar; the standard
   .table-page--v2 .table-content padding already accounts for it.
   (The old 82px top padding was for the removed custom header and
   left a large empty band.) */

.design-tracker-card {
  gap: 18px;
}

.design-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fbf8 0%, #eaf3f0 100%);
}

.design-hero h1 {
  margin: 0;
  color: #102a43;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.04em;
}

.design-hero__eyebrow,
.design-modal__eyebrow {
  margin: 0 0 6px;
  color: #0f6b5b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.design-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px)) auto;
  gap: 12px;
  align-items: center;
}

.design-filter {
  min-height: 44px;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #17201d;
  font: inherit;
  font-size: 0.92rem;
  padding: 0 14px;
}

.design-table-wrap {
  max-height: calc(100vh - 270px);
  overflow: auto;
}

/* DESKTOP (>720px): fill the viewport like the Jobs table — content
   is a flex column, the card grows, the table-wrap takes the rest and
   scrolls internally, with exactly 6px between header and cards.
   On mobile this is intentionally NOT applied (see the ≤720 block
   below) so the page scrolls normally and the table is visible. */
@media (min-width: 721px) {
  .design-page.table-page--v2 .new-main {
    padding-top: calc(var(--new-topbar-height, 56px) + 6px);
  }

  .design-page .table-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: calc(100vh - var(--new-topbar-height, 56px) - 6px);
  }

  .design-page .design-tracker-card {
    flex: 1 1 auto;
    min-height: 0;
  }

  .design-page .design-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* MOBILE (≤720px): mirror the table2/installations mobile pattern —
   the whole page scrolls, the content/card are auto height, and the
   table keeps its own height so it's actually visible (the desktop
   fixed-height + flex was collapsing the table to zero on phones). */
@media (max-width: 720px) {
  .design-page.table-page--v2 .table-content {
    height: auto;
    overflow: visible;
    display: block;
    padding-bottom: 28px;
  }

  .design-page.table-page--v2 .design-tracker-card {
    height: auto;
    overflow: visible;
  }

  .design-page.table-page--v2 .new-main {
    overflow-y: auto;
  }

  .design-page .design-table-wrap {
    flex: none;
    max-height: none;
    overflow-x: auto;
  }
}

/* The design table no longer uses the .jobs-table class (so it's
   immune to table2's jobs-specific responsive transforms). It carries
   its own complete base styling here. */
.design-table {
  /* Fit the available width — no forced min-width, so the whole
     table is visible without horizontal scroll. Client / Project
     Name absorb the slack (they wrap; min 150px). */
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  table-layout: auto;
}

.design-table th,
.design-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* The two flexible columns: keep a 150px floor but allow them to
   shrink/wrap so the table fits the viewport instead of scrolling. */
.design-table th[data-col-key="client"],
.design-table td[data-col-key="client"],
.design-table th[data-col-key="projectName"],
.design-table td[data-col-key="projectName"] {
  min-width: 150px;
  white-space: normal;
  word-break: break-word;
}

.design-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6f3f4;
  color: #173057;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.design-table tbody tr {
  cursor: pointer;
}

.design-table tbody td {
  height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
  background: #ffffff;
  color: var(--text);
  border-top: 2px solid #ffffff;
  line-height: 1.05;
}

.design-table tbody tr:nth-child(even) td {
  background: #f2f2f2;
}

.design-table tbody tr:hover td {
  background: #faf8f8;
}

/* The View chip is a plain <button>, not a <details> summary, so the
   generic .filter-dropdown__summary.is-active green style doesn't
   reach it. Give the always-active View chip the same active look as
   a selected filter chip. */
.design-page .table2-filter-chip--view.is-active {
  border-color: #0f6b5b !important;
  border-style: solid !important;
  background: rgba(15, 107, 91, 0.14) !important;
  color: #0f6b5b !important;
  font-weight: 800;
}

.design-page .table2-filter-chip--view.is-active:hover,
.design-page .table2-filter-chip--view.is-active:focus-visible {
  border-color: #0f6b5b !important;
  background: rgba(15, 107, 91, 0.2) !important;
  color: #0f6b5b !important;
}

.design-id-button {
  border: 0;
  background: transparent;
  color: #0f6b5b;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.design-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.design-status-pill.is-progress {
  background: #d69a18;
}

.design-status-pill.is-revision {
  background: #c64f37;
}

.design-status-pill.is-completed {
  background: #1469b8;
}

.design-status-pill.is-pending,
.design-status-pill.is-not-started {
  background: #65717f;
}

.design-table__description {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-modal::backdrop {
  background: rgba(0, 4, 53, 0.34);
}

.design-modal__card {
  width: min(1040px, calc(100vw - 28px));
}

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

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

.design-form-grid textarea {
  resize: vertical;
}

.design-workflow-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 107, 91, 0.12);
  border-radius: 14px;
  background: #eef7f5;
}

.design-workflow-section legend {
  padding: 0 6px;
  color: #0f6b5b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.design-workflow-section label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}

.design-workflow-section input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0f6b5b;
}

.design-workflow-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 900;
}

.design-workflow-mark--x {
  color: #b42318;
  background: #fde8e6;
}

.design-workflow-mark--empty {
  border: 2px solid #7b8794;
  background: #ffffff;
}

.design-workflow-mark--checked {
  color: #ffffff;
  background: #0f6b5b;
}

.design-closed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #f5eeee;
  color: #8a1f16;
  font-weight: 800;
}

.design-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.design-modal__footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

.design-closed-toggle--footer {
  padding: 10px 12px;
  background: #fff7f6;
  font-size: 0.82rem;
}

@media (max-width: 980px) {
  .design-toolbar,
  .design-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .design-hero,
  .design-toolbar,
  .design-form-grid {
    grid-template-columns: 1fr;
  }

  .design-hero {
    align-items: stretch;
  }
}

/* Unified teal settings shell */
.settings-page .settings-layout {
  grid-template-columns: 210px 240px minmax(0, 1fr);
  gap: 18px;
  padding: 84px 18px 18px;
  align-items: start;
}

.settings-page .settings-sidebar,
.settings-page .settings-subsidebar,
.settings-page .settings-workarea {
  min-height: calc(100vh - 102px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 55px rgba(15, 48, 42, 0.08);
  backdrop-filter: blur(18px);
}

.settings-page .settings-sidebar,
.settings-page .settings-subsidebar {
  position: sticky;
  top: 74px;
  padding: 26px 18px;
  align-content: start;
}

.settings-page .settings-sidebar {
  display: grid;
  gap: 40px;
}

.settings-page .settings-subsidebar {
  display: grid;
  gap: 18px;
}

.settings-page .settings-workarea {
  padding: 26px;
}

.settings-page .settings-sidebar__group,
.settings-page .settings-subsidebar__group {
  display: grid;
  gap: 0px;
  padding: 0;
}

.settings-page .settings-sidebar__label {
  padding: 0;
  color: #6f7f79;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

.settings-page .settings-sidebar__buttons,
.settings-page .settings-subsidebar__buttons,
.settings-page .settings-subnav-collapsible {
  display: grid;
  gap: 0px;
}

.settings-page .settings-nav-link,
.settings-page .settings-subnav-link,
.settings-page .settings-subnav-sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #233530;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.settings-page .settings-nav-link::before,
.settings-page .settings-subnav-link::before {
  width: 18px;
  height: 18px;
  color: rgba(35, 53, 48, 0.7);
  font-size: 0.98rem;
  opacity: 1;
}

.settings-page .settings-subnav-link::before {
  content: none;
  display: none;
}

.settings-page .settings-nav-link.is-active,
.settings-page .settings-subnav-link.is-active,
.settings-page .settings-subnav-sublink.is-active {
  color: var(--brand);
  font-weight: 800;
  font-size: 1.01rem;
}

.settings-page .settings-nav-link.is-active::before,
.settings-page .settings-subnav-link.is-active::before {
  color: var(--brand);
}

.settings-page .settings-nav-link:hover,
.settings-page .settings-subnav-link:hover,
.settings-page .settings-subnav-sublink:hover {
  color: #17211d;
}

.settings-page .settings-subnav-link--toggle {
  justify-content: space-between;
}

.settings-page .settings-subnav-link--toggle::after {
  content: "+";
  color: #71817b;
  font-size: 1rem;
  font-weight: 700;
}

.settings-page .settings-subnav-link--toggle.is-active::after {
  content: "−";
  color: var(--brand);
}

.settings-page .settings-subnav-collapsible {
  padding: 0 0 0 14px;
}

.settings-page .settings-subnav-sublink {
  min-height: 28px;
  padding: 2px 0;
  color: #66756f;
  font-size: 0.9rem;
}

.settings-page .settings-main,
.settings-page .settings-group-shell__nav,
.settings-page .main-settings-shell__nav {
  display: none !important;
}

.settings-page .settings-section {
  width: 100%;
}

.settings-page .settings-group-shell,
.settings-page .main-settings-shell {
  display: block;
}

.settings-page .settings-group-shell__content,
.settings-page .main-settings-shell__directory {
  display: grid;
  gap: 18px;
}

.settings-page .settings-section__header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 107, 91, 0.1);
}

.settings-page .settings-section__header h2 {
  margin-bottom: 6px;
  font-size: 1.42rem;
}

.settings-page .settings-section__header p,
.settings-page .settings-list-item p {
  color: #6b7c76;
}

.settings-page .settings-group-panel,
.settings-page .main-settings-directory-panel,
.settings-page .settings-categories-directory,
.settings-page .settings-categories-detail,
.settings-page .settings-upload-card,
.settings-page .settings-email-card,
.settings-page .settings-entities-card,
.settings-page .settings-company-editor,
.settings-page .settings-list-item,
.settings-page .settings-user-card {
  border: 1px solid rgba(15, 107, 91, 0.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(243, 251, 249, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 18px 40px rgba(15, 48, 42, 0.06);
}

.settings-page .settings-company-workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-page .settings-categories-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.settings-page .settings-add-input,
.settings-page textarea,
.settings-page select.role-select {
  border: 1px solid rgba(15, 107, 91, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.settings-page .settings-add-input:focus,
.settings-page textarea:focus,
.settings-page select.role-select:focus {
  outline: none;
  border-color: rgba(15, 107, 91, 0.5);
  box-shadow: 0 0 0 4px rgba(15, 107, 91, 0.08);
}

.settings-page .table-action-button {
  background: linear-gradient(135deg, var(--brand) 0%, #1e9d87 100%);
  box-shadow: 0 14px 24px rgba(15, 107, 91, 0.16);
}

.settings-page .table-action-button--secondary,
.settings-page .settings-delete-button {
  background: rgba(15, 107, 91, 0.08);
  color: var(--brand-dark);
  box-shadow: none;
}

.settings-page .settings-list--columns {
  gap: 12px;
}

.settings-page .settings-list-item--column {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding: 12px 15px;
  border-radius: 18px;
}

.settings-page .main-settings-tiles-grid,
.settings-page .main-settings-icons-grid,
.settings-page .main-settings-client-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.settings-page .main-settings-tile-card,
.settings-page .main-settings-icon-card,
.settings-page .main-settings-client-link-card {
  padding: 18px;
  border: 1px solid rgba(15, 107, 91, 0.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(243, 251, 249, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 18px 40px rgba(15, 48, 42, 0.06);
}

.settings-page .main-settings-tile-card--add {
  justify-content: center;
  align-content: center;
  min-height: 220px;
  border-style: dashed;
}

@media (max-width: 1180px) {
  .settings-page .settings-layout {
    grid-template-columns: 190px 220px minmax(0, 1fr);
  }

  .settings-page .settings-company-workbench,
  .settings-page .settings-categories-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .settings-page .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-page .settings-sidebar,
  .settings-page .settings-subsidebar {
    position: static;
    min-height: 0;
  }
}

/* Settings sidebar + tabs refresh */
.settings-page .settings-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 84px 24px 24px;
}

.settings-page .settings-sidebar {
  position: sticky;
  top: 82px;
  min-height: calc(100vh - 96px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.settings-page .settings-workarea {
  min-height: calc(100vh - 96px);
  padding: 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 55px rgba(15, 48, 42, 0.08);
  overflow: hidden;
}

.settings-page .settings-subsidebar {
  display: none !important;
}

.settings-page .settings-sidebar__group {
  padding: 0;
}

.settings-page .settings-sidebar__label {
  padding: 0;
  margin-bottom: 8px;
}

.settings-page .settings-nav-link {
  gap: 10px;
  min-height: 32px;
  padding: 2px 0 2px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 400;
}

.settings-page .settings-nav-link::before {
  content: none !important;
  display: none !important;
}

.settings-page .settings-nav-link i {
  width: 13px;
  height: 13px;
  color: #1f2d29;
  stroke-width: 1.9;
}

.settings-page .settings-nav-link i svg,
.settings-page .settings-nav-link svg {
  width: 13px !important;
  height: 13px !important;
  display: block;
}

.settings-page .settings-nav-link.is-active {
  font-size: 14px;
  font-weight: 800;
}

.settings-page .settings-nav-link.is-active i {
  color: var(--brand);
}

.settings-page .settings-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid rgba(15, 107, 91, 0.12);
  background: rgba(255, 255, 255, 0.82);
}

.settings-page .settings-tab-button {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #677670;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.settings-page .settings-tab-button.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.settings-mobile-nav {
  display: none;
  padding: 18px 28px 0;
}

.settings-mobile-nav__label {
  display: block;
  margin: 0 0 8px;
  color: rgba(43, 67, 61, 0.72);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-mobile-nav__select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(18, 52, 45, 0.12);
  border-radius: 14px;
  background: #ffffff;
  color: #17211d;
  font: inherit;
}

.settings-page .settings-section {
  padding: 24px 28px 28px;
}

.settings-page .settings-group-panel,
.settings-page .main-settings-directory-panel,
.settings-page .settings-categories-directory,
.settings-page .settings-categories-detail,
.settings-page .settings-upload-card,
.settings-page .settings-email-card,
.settings-page .settings-entities-card,
.settings-page .settings-company-editor,
.settings-page .settings-list-item,
.settings-page .settings-user-card {
  padding: 18px;
  border-radius: 20px;
}

.settings-page .settings-company-workbench {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
}

.settings-page .settings-categories-shell {
  display: grid;
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: auto;
}

.settings-page .settings-categories-directory,
.settings-page .settings-categories-detail {
  min-width: 0;
}

@media (max-width: 700px) {
  .settings-page .settings-categories-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .settings-page .settings-company-workbench {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .settings-page #jobStatusPanel,
  .settings-page #jobProgressPanel,
  .settings-page #companyDepartmentsPanel {
    padding: 12px 10px;
    border-radius: 12px;
    box-shadow: none;
  }

  .settings-page #jobStatusPanel .settings-section__header,
  .settings-page #jobProgressPanel .settings-section__header,
  .settings-page #companyDepartmentsPanel .settings-section__header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .settings-page #jobStatusPanel .settings-list-item,
  .settings-page #jobProgressPanel .settings-list-item,
  .settings-page #companyDepartmentsPanel .settings-list-item {
    padding: 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(15, 107, 91, 0.08);
    box-shadow: none;
  }

  .settings-page #jobStatusPanel .settings-list,
  .settings-page #jobProgressPanel .settings-list,
  .settings-page #companyDepartmentsPanel .settings-list {
    gap: 6px;
  }

  .settings-page #jobStatusPanel .settings-list-item > div,
  .settings-page #jobProgressPanel .settings-list-item > div,
  .settings-page #companyDepartmentsPanel .settings-list-item > div {
    gap: 6px;
    align-items: center;
  }

  .settings-page #jobStatusPanel .settings-add-form,
  .settings-page #jobProgressPanel .settings-add-form,
  .settings-page #companyDepartmentsPanel .settings-add-form {
    gap: 6px;
  }

  .settings-page #jobStatusPanel .settings-add-input,
  .settings-page #jobProgressPanel .settings-add-input,
  .settings-page #companyDepartmentsPanel .settings-add-input,
  .settings-page #jobStatusPanel .settings-list-item .settings-add-input,
  .settings-page #jobProgressPanel .settings-list-item .settings-add-input,
  .settings-page #companyDepartmentsPanel .settings-list-item .settings-add-input {
    min-width: 0;
    padding-inline: 12px;
  }

  .settings-page #jobStatusPanel .table-action-button--small,
  .settings-page #jobProgressPanel .table-action-button--small,
  .settings-page #companyDepartmentsPanel .table-action-button--small,
  .settings-page #jobStatusPanel .settings-delete-button,
  .settings-page #jobProgressPanel .settings-delete-button,
  .settings-page #companyDepartmentsPanel .settings-delete-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 0;
    border-radius: 10px;
    justify-content: center;
  }

  .settings-page #jobStatusPanel .table-action-button--small::before,
  .settings-page #jobProgressPanel .table-action-button--small::before,
  .settings-page #companyDepartmentsPanel .table-action-button--small::before {
    content: "✓";
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
  }

  .settings-page #jobStatusPanel .settings-delete-button::before,
  .settings-page #jobProgressPanel .settings-delete-button::before,
  .settings-page #companyDepartmentsPanel .settings-delete-button::before {
    content: "✕";
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }

  .settings-page #notificationSettingsPanel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .settings-page #notificationSettingsPanel .settings-notification-matrix {
    min-width: 760px;
  }

  .settings-page #notificationSettingsPanel .settings-group-panel,
  .settings-page #notificationSettingsPanel .settings-section__header {
    min-width: 760px;
  }

  .settings-page .settings-company-workbench .settings-entities-card,
  .settings-page .settings-company-workbench .settings-company-editor {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .settings-page .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 84px 16px 16px;
  }

  .settings-page .settings-sidebar {
    display: none;
  }

  .settings-mobile-nav {
    display: block;
  }

  .settings-page .settings-workarea {
    min-height: auto;
  }

  .settings-page .settings-tabs {
    padding: 0 16px;
  }

  .settings-page .settings-section {
    padding: 18px 16px 20px;
  }
}

.settings-page .settings-section__header {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.settings-page .settings-section__header h2 {
  font-size: 1.24rem;
}

.settings-page .settings-email-card {
  gap: 12px;
}

.settings-page .settings-notification-matrix,
.settings-page .settings-list,
.settings-page .settings-list--columns,
.settings-page .main-settings-tiles-grid,
.settings-page .main-settings-icons-grid,
.settings-page .main-settings-client-links {
  margin-top: 0;
}

.settings-page .main-settings-directory-panel > .settings-email-card,
.settings-page .main-settings-directory-panel > .main-settings-tiles-toolbar,
.settings-page .main-settings-directory-panel > .main-settings-client-links {
  margin-top: 0;
}

.settings-page .settings-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.settings-page .settings-color-grid label {
  display: grid;
  gap: 8px;
}

.settings-page .settings-color-grid label span {
  color: #001a33;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Swatch + hex text pair for Customize → Production cards. The swatch
   is a button that opens the custom .color-popover (defined below) —
   we render our own picker because the native <input type="color">
   popup can't be styled. */
.settings-page .settings-color-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-page .settings-color-picker {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(15, 107, 91, 0.22);
  border-radius: 999px;
  background: #000;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(15, 48, 42, 0.08);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.settings-page .settings-color-picker:hover {
  box-shadow: 0 3px 8px rgba(15, 48, 42, 0.18);
  transform: translateY(-1px);
}

.settings-page .settings-color-picker:focus-visible {
  outline: 2px solid #0f6b5b;
  outline-offset: 2px;
}

.settings-page .settings-color-hex {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
}

/* ── Custom color picker popover (Settings → Customize) ──────────── */
.color-popover {
  position: absolute;
  z-index: 9999;
  width: 280px;
  padding: 16px;
  display: grid;
  gap: 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 48, 42, 0.18), 0 2px 8px rgba(15, 48, 42, 0.08);
  user-select: none;
  font-family: inherit;
}

.color-popover[hidden] { display: none; }

.color-popover__sv {
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, red);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}

.color-popover__sv-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #000;
}

.color-popover__hue {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(to right,
    hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
    hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
  cursor: pointer;
  touch-action: none;
}

.color-popover__hue-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-popover__readout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 91, 0.18);
  background: #fff;
}

.color-popover__preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.color-popover__hash {
  color: #6b7c78;
  font-weight: 600;
}

.color-popover__hex {
  flex: 1 1 auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: #001a33;
  letter-spacing: 0.04em;
}

.color-popover__copy {
  border: none;
  background: transparent;
  color: #6b7c78;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.color-popover__copy:hover {
  background: rgba(15, 107, 91, 0.08);
  color: #0f6b5b;
}

.color-popover__format {
  font-size: 0.85rem;
  font-weight: 600;
  color: #001a33;
  padding-left: 10px;
  border-left: 1px solid rgba(15, 107, 91, 0.18);
}

.settings-page .settings-letterhead-shell {
  display: grid;
  gap: 18px;
}

.settings-page .settings-letterhead-card {
  gap: 16px;
}

.settings-page .settings-letterhead-upload {
  display: grid;
  gap: 14px;
}

.settings-page .settings-letterhead-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px;
  border: 1px dashed rgba(15, 107, 91, 0.2);
  border-radius: 18px;
  background: #f8fffd;
  color: #6b7c76;
  text-align: center;
}

.settings-page .settings-letterhead-preview img {
  display: block;
  max-width: 100%;
  max-height: 84px;
  width: auto;
}

.settings-page .settings-letterhead-preview--small {
  min-height: 78px;
}

.settings-page .settings-letterhead-preview--small img {
  max-height: 68px;
}

.settings-page .settings-letterhead-footer-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.settings-page .settings-letterhead-footer-controls label,
.settings-page .settings-letterhead-text-grid label {
  display: grid;
  gap: 8px;
}

.settings-page .settings-letterhead-footer-controls span,
.settings-page .settings-letterhead-text-grid span {
  color: #001a33;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-page .settings-letterhead-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.settings-page .settings-letterhead-column-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 107, 91, 0.1);
  border-radius: 18px;
  background: #fbfffe;
}

.settings-page .settings-letterhead-image-block,
.settings-page .settings-letterhead-text-grid {
  display: grid;
  gap: 12px;
}

@media (max-width: 960px) {
  .settings-page .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-page .settings-sidebar {
    position: static;
    min-height: 0;
  }

.settings-page .settings-workarea {
  min-height: 0;
}

}

/* Shared teal sidebar + filter language */
.report-page .report-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 84px 18px 18px;
  align-items: start;
}

.report-page .report-sidebar,
.temp-page .temp-sidebar {
  position: sticky;
  top: 74px;
  min-height: calc(100vh - 102px);
  padding: 24px 18px;
  border-radius: 28px;
  background: rgba(228, 245, 241, 0.72);
  box-shadow: 0 24px 55px rgba(15, 48, 42, 0.08);
  backdrop-filter: blur(18px);
}

.report-page .report-filter-card,
.quotation-page .quotation-index__toolbar,
.clients-page .clients-hero,
.temp-page .temp-sidebar__panel {
  border: 1px solid rgba(15, 107, 91, 0.08);
  background: linear-gradient(180deg, rgba(243, 251, 249, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
  box-shadow: 0 18px 40px rgba(15, 48, 42, 0.06);
}

.report-page .report-filter-card select,
.quotation-page .quotation-index__select,
.quotation-page .quotation-index__search .table-search,
.clients-page .clients-search .table-search,
.temp-page .temp-sidebar__select,
.temp-page .temp-sidebar__search {
  min-height: 44px;
  border: 1px solid rgba(15, 107, 91, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.report-page .report-filter-card select:focus,
.quotation-page .quotation-index__select:focus,
.quotation-page .quotation-index__search .table-search:focus,
.clients-page .clients-search .table-search:focus,
.temp-page .temp-sidebar__select:focus,
.temp-page .temp-sidebar__search:focus {
  outline: none;
  border-color: rgba(15, 107, 91, 0.5);
  box-shadow: 0 0 0 4px rgba(15, 107, 91, 0.08);
}

.new-quotation-dashboard {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(15, 118, 110, 0.08), transparent 42%),
    #fbf9f3;
  color: #10213a;
}

.new-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}

.new-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 18px 16px 20px;
  border-right: 1px solid rgba(16, 33, 58, 0.08);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
}

.new-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #10213a;
}

.new-sidebar__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.new-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.new-sidebar__link,
.new-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #45556f;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.new-sidebar__link:hover,
.new-sidebar__logout:hover {
  background: rgba(15, 118, 110, 0.08);
  color: #10213a;
}

.new-sidebar__link.is-active {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.new-sidebar__icon,
.new-sidebar__logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.new-sidebar__icon svg,
.new-sidebar__logout-icon svg {
  width: 18px;
  height: 18px;
}

.new-sidebar__logout {
  margin-top: auto;
}

.new-main {
  min-width: 0;
  padding: 12px 18px 28px;
}

.new-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(16, 33, 58, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.new-topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7890;
}

.new-topbar__crumbs strong {
  color: #10213a;
  font-weight: 700;
}

.new-topbar__search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 540px);
  justify-self: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(16, 33, 58, 0.08);
  border-radius: 12px;
  background: #f8f8f6;
  color: #7a859a;
}

.new-topbar__search span {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.new-topbar__search svg {
  width: 16px;
  height: 16px;
}

.new-topbar__search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #10213a;
}

.new-topbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #0f766e;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* The `display` rules above defeat the browser's default
   `[hidden] { display: none }`, so a topbar button rendered with the
   `hidden` attribute (e.g. master-only "Delete All", per-page Add
   buttons) would still show. Re-assert hiding when the attribute is
   present. */
.new-topbar__button[hidden] {
  display: none !important;
}

.new-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 8px;
}

.new-page-head h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #10213a;
}

.new-page-head p {
  margin: 10px 0 0;
  font-size: 15px;
  color: #6d7790;
}

.new-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.new-stat-card {
  min-width: 0;
  min-height: 154px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(16, 33, 58, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(22, 29, 37, 0.05);
}

.new-stat-card--tint {
  background: linear-gradient(180deg, rgba(255, 239, 239, 0.88), rgba(255, 255, 255, 0.98));
}

.new-stat-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #65738b;
}

.new-stat-card__value {
  margin-top: 10px;
  font-size: 54px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #10213a;
}

.new-stat-card--tint .new-stat-card__value {
  color: #c02b1e;
}

.new-stat-card__meta {
  margin-top: 10px;
  font-size: 14px;
  color: #6b7790;
}

.new-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(16, 33, 58, 0.08);
}

.new-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.new-toolbar__tab {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: #6c7890;
}

.new-toolbar__tab.is-active {
  color: #10213a;
}

.new-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.new-toolbar__select {
  min-width: 142px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(16, 33, 58, 0.08);
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  color: #33425d;
}

.new-table-shell {
  margin-top: 14px;
  border: 1px solid rgba(16, 33, 58, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px rgba(22, 29, 37, 0.05);
  overflow: hidden;
}

.quotation-list-head--workspace {
  min-height: 52px;
  padding: 0 18px;
  background: #ffffff;
  border-bottom: 1px solid rgba(16, 33, 58, 0.08);
}

.quotation-list--workspace {
  padding: 0 8px 10px;
}

.quotation-list--workspace .quotation-list-row {
  border-bottom: 1px solid rgba(16, 33, 58, 0.06);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0 10px;
}

.quotation-list--workspace .quotation-list-row:last-child {
  border-bottom: 0;
}

.quotation-list--workspace .quotation-list-row:hover {
  background: rgba(15, 118, 110, 0.04);
}

.quotation-list--workspace .quotation-list-row__download {
  border-radius: 10px;
}

@media (max-width: 1180px) {
  .new-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .new-shell {
    grid-template-columns: 1fr;
  }

  .new-sidebar {
    position: static;
    height: auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 33, 58, 0.08);
  }

  .new-sidebar__logout {
    margin-top: 0;
  }

  .new-topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 14px 16px;
  }

  .new-topbar__search {
    width: 100%;
    justify-self: stretch;
  }

  .new-topbar__button {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .new-main {
    padding: 12px 12px 24px;
  }

  .new-page-head h1 {
    font-size: 34px;
  }

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

  .new-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .new-toolbar__filters {
    justify-content: stretch;
  }

  .new-toolbar__select {
    width: 100%;
  }
}

/* New quotation workspace overrides */
.new-quotation-dashboard {
  min-height: 100vh;
  background: #fafaf9;
  color: #0f1728;
  font-family: "Manrope", system-ui, sans-serif;
}

.new-shell {
  display: block;
  min-height: 100vh;
}

.new-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 230px;
  height: 100vh;
  padding: 12px 8px 16px 14px;
  border-right: 1px solid #e7e5df;
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: none;
  z-index: 20;
}

.new-sidebar__brand {
  min-height: 34px;
  padding: 0 2px;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  gap: 10px;
}

.new-sidebar__brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #167a65;
  font-size: 17px;
}

.new-sidebar__nav {
  gap: 3px;
  margin-top: 18px;
  padding-right: 2px;
  overflow: auto;
}

.new-sidebar__link,
.new-sidebar__logout {
  min-height: 32px;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  color: #5f6d82;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
}

.new-sidebar__link:hover,
.new-sidebar__logout:hover {
  background: #f2f7f3;
  color: #1b2638;
}

.new-sidebar__link.is-active {
  background: #e9f5ef;
  color: #0f766e;
}

.new-sidebar__icon,
.new-sidebar__logout-icon,
.new-sidebar__icon svg,
.new-sidebar__logout-icon svg {
  width: 16px;
  height: 16px;
}

.new-sidebar__logout {
  margin-top: auto;
  border-top: 1px solid #ece9e2;
  padding-top: 12px;
  border-radius: 0;
}

.new-main {
  margin-left: 230px;
  min-width: 0;
  padding: 70px 14px 16px;
}

.new-topbar {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #ece9e2;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  z-index: 15;
}

.new-topbar__crumbs {
  gap: 8px;
  font-size: 13px;
  color: #6b7282;
}

.new-topbar__crumbs strong {
  color: #0f1728;
  font-weight: 600;
}

.new-topbar__panel-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #7f8796;
}

.new-topbar__panel-icon svg {
  width: 16px;
  height: 16px;
}

.new-topbar__search {
  width: min(100%, 490px);
  min-height: 36px;
  gap: 10px;
  padding: 0 12px;
  justify-self: end;
  border: 1px solid #ece9e2;
  border-radius: 10px;
  background: #f8f8f6;
  color: #9098a5;
}

.new-topbar__search span,
.new-topbar__search svg {
  width: 15px;
  height: 15px;
}

.new-topbar__search input {
  font-size: 14px;
  color: #334155;
}

.new-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
justify-content: flex-end;
}

.new-topbar__icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5f6d82;
  cursor: pointer;
}

.new-topbar__icon-button:hover {
  background: #f5f5f1;
  color: #0f1728;
}

.new-topbar__icon-button svg {
  width: 16px;
  height: 16px;
}

.new-topbar__badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.new-topbar__button,
.new-page-head__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.new-topbar__button {
  border: 1px solid #0f766e;
  background: #0f766e;
  color: #ffffff;
}

.new-page-head {
  align-items: flex-start;
  gap: 20px;
  padding: 12px 0 10px;
}

.new-page-head__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.new-page-head h1 {
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.new-page-head p {
  margin-top: 6px;
  font-size: 14px;
  color: #6b7282;
}

.new-page-head__ghost {
  border: 1px solid #e7e5df;
  background: #ffffff;
  color: #0f1728;
}

.new-page-head__ghost svg {
  width: 14px;
  height: 14px;
}

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

.new-stat-card {
  position: relative;
  min-height: 154px;
  padding: 16px 16px 18px;
  border: 1px solid #ece9e2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}

.new-stat-card--tint {
  background: #fff8f6;
}

.new-stat-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f8796;
}

.new-stat-card__value {
  margin-top: 12px;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0f1728;
}

.new-stat-card--tint .new-stat-card__value {
  color: #d93025;
}

.new-stat-card__meta {
  margin-top: 10px;
  font-size: 13px;
  color: #9b6c10;
}

.new-stat-card:first-child .new-stat-card__meta,
.new-stat-card:last-child .new-stat-card__meta {
  color: #6b7282;
}

.new-stat-card__sparkline {
  position: absolute;
  inset: auto 14px 16px 14px;
  height: 26px;
}

.new-stat-card__sparkline::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  border-bottom: 2px solid currentColor;
  clip-path: polygon(0 72%, 12% 71%, 20% 74%, 36% 66%, 52% 62%, 67% 54%, 82% 47%, 100% 37%, 100% 100%, 0 100%);
}

.new-stat-card__sparkline::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.new-stat-card__sparkline--teal {
  color: #0f766e;
}

.new-stat-card__sparkline--amber {
  color: #f59e0b;
}

.new-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #ece9e2;
}

.new-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.new-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6b7282;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.new-tab span {
  color: #8a93a4;
}

.new-tab.is-active {
  border-bottom-color: #0f766e;
  color: #0f1728;
  font-weight: 700;
}

.new-tab.is-active span {
  color: #0f766e;
}

.new-tab--ghost {
  color: #9ca3af;
}

.new-row-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.new-row-tools__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.new-row-tools__button svg {
  width: 15px;
  height: 15px;
}

.new-row-tools__button.is-active,
.new-row-tools__button:hover {
  background: #f3f4f6;
  color: #334155;
}

.new-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece9e2;
}

.new-filter-chips,
.new-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.new-filter-chip,
.new-filter-menu__summary,
.new-toolbar__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e7e5df;
  border-radius: 999px;
  background: #ffffff;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.new-filter-chip.is-active {
  border-color: #b9d8ce;
  background: #eef8f4;
  color: #0f766e;
}

.new-filter-chip--select {
  padding-right: 10px;
}

.new-filter-chip--select span {
  color: #4b5563;
}

.new-filter-chip--select select,
.new-toolbar__select {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.new-filter-chip--ghost {
  background: #ffffff;
  color: #6b7282;
}

.new-filter-menu {
  position: relative;
}

.new-filter-menu[open] .new-filter-menu__summary {
  border-color: #b9d8ce;
  background: #eef8f4;
  color: #0f766e;
}

.new-filter-menu__summary {
  list-style: none;
}

.new-filter-menu__summary::-webkit-details-marker {
  display: none;
}

.new-filter-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 10px;
  border: 1px solid #e7e5df;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 40, 0.08);
}

.new-filter-menu__panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 13px;
  color: #4b5563;
}

.new-table-shell {
  margin-top: 12px;
  border: 1px solid #ece9e2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}

.quotation-list-head--workspace {
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #ece9e2;
  background: #ffffff;
  color: #7f8796;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quotation-list--workspace {
  padding: 0 8px 10px;
}

.quotation-list--workspace .quotation-list-row {
  min-height: 54px;
  margin: 0;
  padding: 0 8px;
  border-bottom: 1px solid #f0eee8;
  border-radius: 0;
  box-shadow: none;
}

.quotation-list--workspace .quotation-list-row:last-child {
  border-bottom: 0;
}

.quotation-list--workspace .quotation-list-row:hover {
  background: #fafcfb;
}

.quotation-list--workspace .quotation-list-row__cell {
  font-size: 14px;
}

.quotation-list--workspace .quotation-list-row__download {
  min-height: 34px;
  border-radius: 10px;
  background: #f3f1f4;
}

.quotation-list--workspace[data-density="compact"] .quotation-list-row,
body[data-new-quote-density="compact"] .quotation-list--workspace .quotation-list-row {
  min-height: 46px;
}

body[data-new-quote-density="compact"] .quotation-list--workspace .quotation-list-row__cell {
  font-size: 13px;
}

@media (max-width: 1240px) {
  .new-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .new-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #e7e5df;
  }

  .new-main {
    margin-left: 0;
    padding-top: 12px;
  }

  .new-topbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 14px;
  }

  .new-topbar__search {
    width: 100%;
    justify-self: stretch;
  }

  .new-page-head {
    flex-direction: column;
  }

  .new-page-head__actions {
    margin-left: 0;
  }

  .new-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .new-filter-actions {
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .new-main {
    padding: 10px 10px 20px;
  }

  .new-page-head h1 {
    font-size: 28px;
  }

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

  .new-tabs-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .new-tabs {
    gap: 14px;
  }

  .new-filter-actions {
    justify-content: flex-start;
  }
}

/* New quotation workspace precision pass */
.new-quotation-dashboard {
  --new-sidebar-width: 230px;
  --new-topbar-height: 52px;
  background: #fafaf9;
  color: #0f1728;
}

.new-shell {
  min-height: 100vh;
}

.universal-sidebar-mount {
  display: contents;
}

.new-sidebar {
  position: fixed;
  inset: var(--new-topbar-height) auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  padding: 0;
  border-right: 1px solid #e7e5df;
  background: #ffffff;
}

.new-sidebar__group {
  padding: 14px 10px 0 10px;
}

.new-sidebar__group--configure {
  margin-top: 6px;
}

.new-sidebar__group-title {
  display: none;
}

.settings-page .settings-sidebar-customize-list {
  display: grid;
  gap: 5px;
}

.settings-page .settings-sidebar-customize-group {
  display: grid;
  gap: 5px;
}

.settings-page .settings-sidebar-customize-group__items {
  display: grid;
  gap: 5px;
}

.settings-page .settings-sidebar-customize-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-page .settings-sidebar-customize-item.is-locked {
  background: transparent;
}

.settings-page .settings-sidebar-customize-item > small {
  color: #6b7c76;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-page .settings-sidebar-customize-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0f6b5b;
}

.settings-page .settings-sidebar-customize-edit {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(15, 107, 91, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #0f1728;
  font: inherit;
}

/* Group-name input: bolder + slightly darker tint so it reads as a
   section heading without needing a duplicate static label. */
.settings-page .settings-sidebar-customize-group-input {
  background: #eef7f4;
  border-color: rgba(15, 107, 91, 0.18);
  color: #0f1728;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-top: 4px;
}

.new-sidebar__section {
  display: grid;
  gap: 1px;
}

.new-sidebar__section + .new-sidebar__section {
  margin-top: 1px;
}

.new-sidebar__section-title {
  margin: 0;
  padding: 0 10px;
  color: #8b98b0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.new-sidebar__section-links {
  display: grid;
  gap: 0;
  padding-left: 10px;
}

.new-sidebar__nav {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  align-content: start;
}

.new-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #475467;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.new-sidebar__link:hover {
  background: #f8faf9;
  color: #0f1728;
}

.new-sidebar__link.is-active {
  background: #e7f7f2;
  color: #0f766e;
  font-weight: 600;
}

.new-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.new-sidebar__icon svg {
  width: 16px;
  height: 16px;
}

.new-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 10px 12px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475467;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.new-sidebar__logout:hover {
  background: #f8faf9;
  color: #0f1728;
}

.new-sidebar__logout-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.new-sidebar__logout-icon svg {
  width: 16px;
  height: 16px;
}

.new-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 14px) 22px 24px;
}

.new-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: var(--new-sidebar-width) auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: var(--new-topbar-height);
  padding: 0 18px 0 0;
  border-bottom: 1px solid #e7e5df;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

.new-topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.new-topbar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--new-topbar-height);
  flex-shrink: 0;
  text-decoration: none;
}

.new-topbar__brand-logo {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 24px;
}

.new-topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 14px;
  min-width: 0;
}

.new-topbar__crumbs strong {
  color: #101828;
  font-weight: 600;
}

.new-topbar__panel-icon {
  width: 16px;
  height: 16px;
}

.new-topbar__panel-icon svg {
  width: 16px;
  height: 16px;
}

.new-topbar__search {
  justify-self: center;
  width: min(100%, 438px);
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ece9e2;
  border-radius: 10px;
  background: #ffffff;
  color: #667085;
}

.new-topbar__search input {
  font-size: 14px;
}

.new-topbar__actions {
  gap: 12px;
}

.new-topbar__icon-button {
  width: 32px;
  height: 32px;
}

.new-topbar__button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.new-page-head {
  gap: 18px;
  padding: 8px 0 12px;
}

.new-page-head h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.new-page-head p {
  margin-top: 4px;
  font-size: 14px;
  color: #667085;
}

.new-page-head__ghost {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
}

.new-stats {
  gap: 14px;
}

.new-stat-card {
  min-height: 152px;
  padding: 18px 16px 16px;
  border: 1px solid #ece9e2;
  border-radius: 16px;
  background: #ffffff;
}

.new-stat-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
}

.new-stat-card__value {
  margin-top: 14px;
  font-size: 28px;
}

.new-stat-card__meta {
  margin-top: 10px;
  font-size: 14px;
}

.new-tabs-bar {
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
}

.new-tabs {
  gap: 18px;
}

.new-tab {
  min-height: 29px;
  font-size: 14px;
  font-weight: 500;
}

.new-tab.is-active {
  font-weight: 700;
}

.new-filter-row {
  gap: 14px;
  margin-top: 12px;
  padding-bottom: 12px;
}

.new-filter-chips,
.new-filter-actions {
  gap: 10px;
}

.new-filter-chip,
.new-filter-menu__summary {
  min-height: 32px;
  padding: 0 12px;
  border: 1px dashed #d4d4d8;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  font-size: 13px;
  font-weight: 500;
}

.new-filter-chip--dotted {
  border-style: dashed;
}

.new-filter-chip.is-active,
.new-filter-chip--solid,
.new-filter-menu[open] > .new-filter-chip,
.new-filter-menu[open] > .new-filter-menu__summary,
.new-filter-menu__summary.is-active {
  border-style: solid;
  border-color: #cfd4dc;
  background: #ffffff;
  color: #101828;
}

.new-filter-chip--ghost {
  border-style: dashed;
  color: #667085;
}

.new-filter-menu__panel {
  top: calc(100% + 8px);
  min-width: 216px;
  padding: 10px;
  border: 1px solid #ece9e2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 40, 0.08);
}

.new-filter-menu__search-wrap {
  margin-bottom: 8px;
}

.new-filter-menu__search {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  color: #101828;
}

.new-filter-menu__options {
  display: grid;
  gap: 4px;
  max-height: 210px;
  overflow: auto;
}

.new-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.new-filter-option:hover {
  background: #f8faf9;
}

.new-filter-option.is-selected {
  background: #eef8f4;
  color: #0f766e;
}

.new-filter-option__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
}

.new-filter-option.is-selected .new-filter-option__check {
  border-color: #0f766e;
  background: #0f766e;
  color: #ffffff;
}

.new-filter-option__empty {
  margin: 0;
  padding: 8px 10px;
  color: #98a2b3;
  font-size: 13px;
}

.new-table-shell {
  margin-top: 14px;
  border-radius: 16px;
}

.quotation-list-head--workspace {
  min-height: 44px;
  padding: 0 16px;
  position: sticky;
  top: var(--new-topbar-height);
  z-index: 5;
}

.new-table-head__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.new-table-head__arrow {
  display: inline-flex;
  width: 10px;
  height: 10px;
  position: relative;
}

.new-table-head__arrow::before {
  content: "";
  position: absolute;
  inset: 1px 2px 1px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
}

.new-table-head__button.is-active .new-table-head__arrow::before {
  opacity: 0.9;
}

.new-table-head__button[data-direction="asc"] .new-table-head__arrow::before {
  transform: rotate(-135deg);
  top: 3px;
}

.new-table-head__button[data-direction="desc"] .new-table-head__arrow::before {
  transform: rotate(45deg);
  top: 0;
}

.quotation-list--workspace {
  padding: 0 8px 10px;
}

.quotation-list--workspace .quotation-list-row {
  min-height: 52px;
}

.quotation-list--workspace .quotation-list-row__cell {
  font-size: 14px;
}

.quotation-list--workspace .quotation-list-row__download {
  min-height: 32px;
}

@media (max-width: 1024px) {
  .new-sidebar {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e7e5df;
  }

  .new-main {
    margin-left: 0;
    padding: 12px 14px 20px;
  }

  .new-topbar {
    position: static;
    left: auto;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px 14px;
  }

  .new-topbar__left {
    display: flex;
    grid-template-columns: none;
  }

  .new-topbar__brand {
    width: auto;
  }

  .quotation-list-head--workspace {
    top: 0;
  }
}

.productions2-page {
  min-height: 100vh;
  margin: 0;
  background: #F9F8F6;
  color: #111110;
  font-family: "Gotu", "Akkurat", "Akkurat Pro", system-ui, sans-serif;
  --productions2-surface: #FFFFFF;
  --productions2-surface-2: #F3F2EF;
  --productions2-surface-3: #ECEAE5;
  --productions2-border: rgba(0, 0, 0, 0.08);
  --productions2-border-md: rgba(0, 0, 0, 0.13);
  --productions2-text: #111110;
  --productions2-text-2: #5A5954;
  --productions2-text-3: #9C9A95;
  --productions2-accent: #0D9488;
  --productions2-green-bg: #F0FDF4;
  --productions2-green-fg: #15803D;
  --productions2-red-bg: #FEF2F2;
  --productions2-red-fg: #B91C1C;
  --productions2-radius-sm: 6px;
  --productions2-radius: 9px;
  --productions2-radius-lg: 14px;
  --productions2-radius-xl: 20px;
}

.productions2-page .btn svg {
  flex-shrink: 0;
}

.productions2-shell {
  display: block;
  min-height: 100vh;
}

.productions2-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 230px;
  height: 100vh;
  border-right: 1px solid #d4d7cf;
  background: #ffffff;
}

.productions2-sidebar__group {
  display: grid;
    align-content: start;
}

.productions2-sidebar__group--departments {
  flex: 1;
  overflow: visible;
}

.productions2-sidebar__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px 7px 25px;
  border: 1px solid #d4d7cf;
  border-top-width: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: #ffffff;
  color: #20262c;
  font-family: "Akkurat", "Akkurat Pro", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.productions2-sidebar__button svg {
  flex-shrink: 0;
}

.productions2-sidebar__button:hover,
.productions2-sidebar__button.is-active {
  background: #e7f2ef;
  color: #0f6b5b;
}

.productions2-sidebar__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #d4d7cf;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.productions2-sidebar__footer-button {
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 7px 10px 7px 25px;
  border-radius: 0;
  border: 0;
  font-family: "Akkurat", "Akkurat Pro", system-ui, sans-serif;
  font-size: 14px;
  color: #20262c;
  background: transparent !important;
  box-shadow: none;
}

.productions2-sidebar__footer-button:hover {
  background: transparent !important;
}

/* Quotation item type menu and photo upload */
.quotation-item-row__insert-menu {
  position: relative;
}

.quotation-item-row__insert-menu > summary {
  list-style: none;
}

.quotation-item-row__insert-menu > summary::-webkit-details-marker {
  display: none;
}

.quotation-item-row__insert-popover {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 0;
  min-width: 128px;
  padding: 8px 0;
  border: 1px solid rgba(0, 4, 53, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(16, 32, 29, 0.12);
}

.quotation-item-row__insert-popover button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #10201d;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
  padding: 9px 14px;
  cursor: pointer;
}

.quotation-item-row__insert-popover button:hover {
  background: #f6f7f6;
  color: #0f6b5b;
}

.quotation-item-row__insert-popover button i,
.quotation-item-row__insert-header i,
.quotation-item-row__delete i {
  width: 14px;
  height: 14px;
}

.quotation-item-row--photo {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start;
}

.quotation-item-row__photo-wrap {
  display: grid;
  gap: 8px;
}

.quotation-item-row__photo-preview {
  display: block;
  max-height: 100px;
  width: auto;
  border-radius: 8px;
  object-fit: contain;
}

.quotation-photo-dialog {
  width: min(520px, calc(100vw - 24px));
  border: none;
  border-radius: 20px;
  padding: 0;
  background: #ffffff20;
}

.quotation-photo-dialog::backdrop {
  background: rgba(4, 14, 17, 0.38);
}

.quotation-photo-dialog__card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(16, 32, 29, 0.18);
}

.quotation-photo-dialog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quotation-photo-dialog__add-button {
  align-self: start;
}

.quotation-items,
.quotation-items__body,
.quotation-item-row,
.quotation-item-row__serial-wrap {
  overflow: visible;
}

.file-drop {
  border: 1.5px dashed rgba(15, 118, 110, 0.2);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease;
  background: #ffffff;
}

.file-drop:hover,
.file-drop.drag-over {
  border-color: #0f766e;
  background: #f0fdfa;
}

.file-drop-icon {
  display: block;
  margin: 0 auto 12px;
  color: #7f908c;
}

.file-drop-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.file-drop-sub {
  font-size: 12.5px;
  color: #7f908c;
}

.quotation-photo-preview {
  display: grid;
  gap: 8px;
}

.quotation-photo-preview__card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 12px;
  background: #f8fbfa;
}

.quotation-photo-preview__card img {
  display: block;
  max-height: 100px;
  width: auto;
  border-radius: 8px;
}

.quotation-status-banner {
  margin: 0 0 12px;
}

.quotation-page .quotation-modal__card {
  overflow: visible;
}

.quotation-page .quotation-item-row__serial-wrap {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
}

.quotation-page .quotation-item-row__insert-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #b42318;
}

.quotation-page .quotation-item-row__insert-header:hover {
  background: rgba(180, 35, 24, 0.08);
}

.quotation-page .quotation-item-row__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #6f7875;
  cursor: pointer;
}

.quotation-page .quotation-item-row__delete:hover {
  color: #b42318;
}

.quotation-page .quotation-item-row__delete--tail {
  align-self: center;
  justify-self: center;
  margin-top: 0;
}

.quotation-page .quotation-items__head,
.quotation-page .quotation-item-row {
  grid-template-columns: 36px minmax(0, 1fr) 62px 104px 112px 28px;
}

.quotation-page .quotation-item-row--header,
.quotation-page .quotation-item-row--photo {
  grid-template-columns: 36px minmax(0, 1fr) 28px !important;
}

.quotation-page .quotation-status-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  z-index: 1200;
  min-width: 280px;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(180, 35, 24, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #b42318;
  box-shadow: 0 20px 45px rgba(16, 32, 29, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.quotation-page .quotation-status-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.quotation-page .lucide,
.quotation-page i svg,
.quotation-page button svg,
.quotation-page summary svg {
  width: 14px !important;
  height: 14px !important;
}

.quotation-page--editor-only .modal-status {
  color: #b42318;
}

.productions2-content {
  margin-left: 230px;
  padding: 24px;
}

.productions2-content__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.productions2-content__header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.productions2-content__header p {
  margin: 6px 0 0;
  color: var(--productions2-text-2);
  font-size: 14px;
}

.productions2-mobile-nav {
  display: none;
  margin-bottom: 12px;
}

.productions2-mobile-nav span {
  display: block;
  margin-bottom: 6px;
  color: var(--productions2-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.productions2-mobile-nav select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--productions2-border-md);
  border-radius: var(--productions2-radius);
  background: var(--productions2-surface);
  color: var(--productions2-text);
  font: inherit;
}

.productions2-view-toggle {
  align-self: center;
}

.productions2-status {
  margin-bottom: 16px;
  color: var(--productions2-text-2);
  font-size: 14px;
}

.productions2-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.productions2-page .card {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 0;
  border: 1px solid var(--productions2-border);
  border-left: 4px solid var(--productions2-accent);
  border-radius: var(--productions2-radius-xl);
  background: var(--productions2-surface);
  box-shadow: none;
}

.productions2-page .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.productions2-page .text-h4 {
  margin: 0;
  color: #6B6A6A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.productions2-page .text-xs {
  font-size: 12px;
  line-height: 1.35;
}

.productions2-page .mt-4 {
  margin-top: 4px;
}

.productions2-page .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--productions2-border-md);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--productions2-text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.productions2-page .card-body {
  flex: 1;
  padding: 16px 18px 18px;
  color: var(--productions2-text);
  font-size: 14px;
  line-height: 1.6;
}

.productions2-page .card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--productions2-border);
}

.productions2-card {
  cursor: pointer;
}

.productions2-card__progress {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.productions2-card__progress-text {
  color: var(--productions2-text);
  font-size: 12px;
  font-weight: 600;
}

.productions2-card__rings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.productions2-card .progress-ring-card--compact {
  width: auto;
  min-width: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 3px;
}

.productions2-card .progress-ring--compact {
  width: 34px;
  height: 34px;
}

.productions2-card .progress-ring--compact span {
  font-size: 9px;
}

.productions2-card .progress-ring-card--compact strong {
  max-width: 44px;
  color: var(--productions2-text-2);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
}

.productions2-note-add {
  align-items: center;
  justify-content: center;
  min-height: 196px;
  border-style: dashed;
  color: var(--productions2-accent);
  cursor: pointer;
}

.productions2-note-add span {
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
}

.productions2-note-card .card-header {
  align-items: flex-start;
}

.productions2-note-card__title {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--productions2-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.productions2-note-card__body {
  min-height: 88px;
  outline: none;
  white-space: pre-wrap;
}

.productions2-note-card__body:empty::before {
  content: attr(data-placeholder);
  color: #98a2b3;
}

.productions2-note-card__actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.productions2-note-card__actions .btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
}

.productions2-note-card__actions .btn svg,
.productions2-note-card__actions .btn i svg {
  width: 16px;
  height: 16px;
}

.productions2-note-card.is-completed {
  opacity: 0.74;
}

.productions2-note-card.is-completed .productions2-note-card__title,
.productions2-note-card.is-completed .productions2-note-card__body {
  text-decoration: line-through;
}

.productions2-modal__card {
  max-width: 760px;
}

.productions2-modal__sliders {
  display: grid;
  gap: 12px;
}

.productions2-page .note-tag-popover {
  position: absolute;
  top: calc(100% - 56px);
  left: 18px;
  z-index: 10;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--productions2-border);
  border-radius: 12px;
  background: var(--productions2-surface);
  box-shadow: none;
}

.productions2-page .note-tag-popover button {
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--productions2-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.productions2-page .note-tag-popover button:hover {
  background: #eef6f4;
}

.productions2-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.productions2-kanban__column {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 12px;
  border: 1px solid var(--productions2-border);
  border-radius: var(--productions2-radius-xl);
  background: var(--productions2-surface-2);
}

.productions2-kanban__column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--productions2-text);
  font-size: 14px;
  font-weight: 700;
}

.productions2-kanban__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 17, 16, 0.06);
  color: var(--productions2-text-2);
  font-size: 12px;
  font-weight: 600;
}

.productions2-kanban__cards {
  display: grid;
  gap: 12px;
}

.productions2-kanban__empty {
  margin: 0;
  color: var(--productions2-text-3);
  font-size: 13px;
}

@media (max-width: 980px) {
  .productions2-shell {
    display: block;
  }

  .productions2-sidebar {
    position: static;
    width: auto;
    height: auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #d4d7cf;
  }

  .productions2-sidebar__group--departments {
    flex: none;
    max-height: none;
  }

  .productions2-sidebar__group {
    display: none;
  }

  .productions2-sidebar__footer {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .productions2-sidebar__footer-button {
    flex: 1;
    justify-content: center;
    padding-left: 10px;
  }

  .productions2-content {
    margin-left: 0;
    padding: 18px 14px 24px;
  }

  .productions2-content__header {
    flex-direction: column;
    align-items: stretch;
  }

  .productions2-mobile-nav[hidden] {
    display: none !important;
  }

.productions2-mobile-nav:not([hidden]) {
    display: block;
  }

  .productions2-kanban {
    grid-auto-columns: minmax(240px, 85vw);
  }
}

.master-settings-page {
  --new-sidebar-width: 210px;
  --new-topbar-height: 52px;
  background: #f7f8f7;
  color: #213547;
}

.master-settings-shell {
  min-height: 100vh;
  background: #f7f8f7;
}

.master-settings-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}

.master-settings-sidebar {
  position: fixed;
  inset: var(--new-topbar-height) auto 0 0;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  overflow-y: auto;
  gap: 10px;
}

.master-settings-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 18px) 20px 20px;
}

.master-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.master-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.master-settings-head h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.master-settings-head p {
  margin: 6px 0 0;
  color: #667085;
}

.master-settings-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.master-settings-two-pane {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - var(--new-topbar-height) - 140px);
}

.master-settings-two-pane--users {
  grid-template-columns: 260px minmax(0, 1fr);
}

.master-settings-list-pane,
.master-settings-detail-pane {
  min-width: 0;
}

.master-settings-detail-pane--stacked {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.master-settings-list,
.master-settings-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.master-settings-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
  overflow-y: auto;
}

.master-settings-card {
  padding: 18px;
}

.master-settings-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.master-settings-card__header h2,
.master-settings-empty h2 {
  margin: 0;
  font-size: 22px;
}

.master-settings-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 16px;
}

.master-settings-empty h1 {
  margin: 0 0 10px;
  font-size: 32px;
}

.master-settings-empty p {
  margin: 0;
  color: #667085;
}

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

.master-settings-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.quotations2-page .quotations2-card {
  gap: 14px;
}

.quotations2-page .quotations2-overview-shell {
  margin-bottom: 0;
}

.quotations2-page .quotations2-chart-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 168px;
  min-height: 168px;
  overflow: hidden;
}

.quotations2-chart {
  min-height: 140px;
  padding-top: 0;
}

.quotations2-sparkline-card {
  display: grid;
  gap: 6px;
  height: 100%;
}

.quotations2-sparkline-card__eyebrow {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quotations2-sparkline-card__value {
  margin: 0;
  color: #111827;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.quotations2-sparkline-card__value span {
  font-size: 18px;
  font-weight: 700;
  color: #6b7280;
}

.quotations2-sparkline-card__meta {
  margin: 0;
  color: #667085;
  font-size: 12px;
}

.quotations2-sparkline-card svg {
  width: 100%;
  height: 64px;
  margin-top: auto;
}

.quotations2-head-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.quotations2-head-button__arrow {
  min-width: 10px;
  color: #0f766e;
}

.quotations2-row {
  cursor: pointer;
}

.quotations2-row:hover {
  background: #f2fbfa;
}

.quotations2-company-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.quotations2-company-badge--teal {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.quotations2-company-badge--amber {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.quotations2-company-badge--blue {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.quotations2-company-badge--slate {
  background: rgba(71, 85, 105, 0.12);
  color: #334155;
}

.quotations2-company-badge--default {
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
}

.quotations2-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #5b6474;
  cursor: pointer;
}

.quotations2-download-button:hover {
  color: #0f766e;
}

.quotations2-download-button i,
.quotations2-download-button i svg,
.quotations2-download-button svg {
  width: 14px !important;
  height: 14px !important;
}

.quotations2-head-placeholder {
  display: inline-block;
  width: 14px;
  min-height: 1px;
}

.quotations2-table-wrap {
  overflow: auto;
}

.quotations2-editor-panel[hidden] {
  display: none !important;
}

.quotations2-editor-panel {
  position: fixed;
  inset: 52px 0 0 auto;
  width: min(860px, 100vw);
  height: calc(100vh - 52px);
  z-index: 90;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.quotations2-editor-panel__backdrop {
  position: fixed;
  inset: 52px 0 0 0;
  background: rgba(8, 12, 34, 0.34);
  backdrop-filter: blur(2px);
}

.quotations2-editor-panel__sheet {
  position: relative;
  width: min(860px, 100vw);
  height: calc(100vh - 52px);
  margin-left: auto;
  padding: 8px 0 8px;
  box-sizing: border-box;
  background: #f7fbfa;
  box-shadow: -20px 0 44px rgba(15, 23, 42, 0.14);
}

.quotations2-editor-panel__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7fbfa;
}

body.quotations2-editor-open {
  overflow: hidden;
}

body.quotation-page--embedded {
  overflow: hidden;
}

body.quotation-page--embedded .table-header,
body.quotation-page--embedded .quotation-editor-page__state {
  display: none;
}

body.quotation-page--embedded .quotation-editor-page {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

body.quotation-page--embedded .quotation-modal[open] {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  background: transparent;
}

body.quotation-page--embedded .quotation-modal::backdrop {
  display: none;
}

body.quotation-page--embedded .quotation-modal__card {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
  padding: 18px 22px 28px !important;
  box-sizing: border-box;
  scroll-padding-top: 18px;
  background: #f7fbfa;
}

body.quotation-page--embedded .quotation-modal__header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 0 10px;
  background: #f7fbfa;
}

body.quotation-page--embedded .quotation-sheet--editor {
  gap: 18px;
  padding: 0;
  background: transparent;
}

body.quotation-page--embedded .quotation-sheet__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
  gap: 18px;
  align-items: start;
}

body.quotation-page--embedded .quotation-band,
body.quotation-page--embedded .quotation-band--values {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.05fr) minmax(0, 1.15fr) 0.9fr;
}

body.quotation-page--embedded .quotation-items__head,
body.quotation-page--embedded .quotation-item-row {
  grid-template-columns: 36px minmax(0, 1fr) 62px 104px 112px 28px !important;
  column-gap: 8px;
}

body.quotation-page--embedded .quotation-items__head {
  padding-bottom: 12px;
  font-size: 0.62rem;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
}

body.quotation-page--embedded .quotation-item-row {
  padding: 9px 0;
  align-items: start;
}

body.quotation-page--embedded .quotation-item-row__description,
body.quotation-page--embedded .quotation-item-row__qty,
body.quotation-page--embedded .quotation-item-row__rate,
body.quotation-page--embedded .quotation-item-row__total {
  min-height: 31px;
  border: none;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

body.quotation-page--embedded .quotation-item-row__description {
  min-height: 31px;
  padding: 0;
  line-height: 1.45;
}

body.quotation-page--embedded .quotation-item-row__total-wrap {
  grid-template-columns: 1fr 28px;
  gap: 8px;
}

body.quotation-page--embedded .quotation-item-row--header,
body.quotation-page--embedded .quotation-item-row--photo {
  grid-template-columns: 36px minmax(0, 1fr) 28px !important;
}

/* Native quotations2 editor */
.quotations2-editor-panel[hidden] {
  display: none !important;
}

.quotations2-editor-panel {
  position: fixed;
  inset: 52px 0 0 auto;
  width: min(980px, 100vw);
  height: calc(100vh - 52px);
  z-index: 90;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.quotations2-editor-panel__backdrop {
  position: fixed;
  inset: 52px 0 0 0;
  background: rgba(8, 12, 34, 0.34);
  backdrop-filter: blur(2px);
}

.quotations2-editor-panel__sheet {
  position: relative;
  width: min(980px, 100vw);
  height: calc(100vh - 52px);
  margin-left: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 24px;
  box-sizing: border-box;
  background: #f7fbfa;
  box-shadow: -20px 0 44px rgba(15, 23, 42, 0.14);
}

.quotations2-editor-panel .quotation-modal__card {
  width: 100%;
  min-height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 14px 24px 28px;
  box-sizing: border-box;
  background: #f7fbfa;
}

.quotations2-editor-panel .quotation-modal__header {
  position: sticky;
  top: -10px;
  z-index: 5;
  padding: 0 0 10px;
  background: linear-gradient(180deg, #f7fbfa 82%, rgba(247, 251, 250, 0));
}

.quotations2-editor-panel .quotation-company-switch {
  display: block !important;
  min-width: 110px;
}

.quotations2-editor-panel .quotation-sheet__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.quotations2-editor-panel .quotation-items__head,
.quotations2-editor-panel .quotation-item-row {
  grid-template-columns: 36px minmax(0, 1fr) 62px 104px 112px 28px;
}

.quotations2-editor-panel .quotation-item-row--header,
.quotations2-editor-panel .quotation-item-row--photo {
  grid-template-columns: 36px minmax(0, 1fr) 28px !important;
}

.quotations2-editor-panel .quotation-item-row {
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.05);
}

.quotations2-editor-panel .quotation-item-row__description,
.quotations2-editor-panel .quotation-item-row__qty,
.quotations2-editor-panel .quotation-item-row__rate,
.quotations2-editor-panel .quotation-item-row__total {
  min-height: 31px;
  border: none;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

.quotations2-editor-panel .quotation-item-row__description {
  min-height: 31px;
  padding: 0;
  line-height: 1.45;
}

.quotations2-editor-panel .quotation-item-row__total-wrap {
  grid-template-columns: 1fr 28px;
  gap: 8px;
}

.quotations2-editor-panel .quotation-notes-field {
  margin-bottom: 8px;
}

body.quotations2-editor-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .quotations2-editor-panel,
  .quotations2-editor-panel__sheet {
    width: 100vw;
  }
}

@media (max-width: 900px) {
  .quotations2-editor-panel .quotation-sheet__top,
  .quotations2-editor-panel .quotation-band,
  .quotations2-editor-panel .quotation-footer {
    grid-template-columns: 1fr;
  }
}


/* quotations2 native editor should match quotation-editor */
.quotations2-editor-panel.quotation-page .quotation-modal__card {
  padding: 22px 26px;
  background: #f7fbfa;
}

.quotations2-editor-panel.quotation-page .quotation-sheet--editor {
  gap: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.quotations2-editor-panel.quotation-page .quotation-sheet__top {
  grid-template-columns: minmax(0, 1.18fr) minmax(230px, 0.82fr);
  gap: 30px;
}

.quotations2-editor-panel.quotation-page .quotation-block,
.quotations2-editor-panel.quotation-page .quotation-meta--editable {
  border-radius: 4px;
  background: #f0f7f6;
  padding: 8px;
}

.quotations2-editor-panel.quotation-page .quotation-inline-card {
  gap: 3px;
  padding: 0;
}

.quotations2-editor-panel.quotation-page .quotation-meta--editable {
  align-content: start;
  gap: 3px;
}

.quotations2-editor-panel.quotation-page .quotation-meta-row {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 20px;
  padding: 0 5px;
  background: #f0f7f6;
}

.quotations2-editor-panel.quotation-page .quotation-meta-row input,
.quotations2-editor-panel.quotation-page .quotation-version-control {
  background: transparent;
  border: none;
  box-shadow: none;
}

.quotations2-editor-panel.quotation-page .quotation-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.86fr 0.72fr;
  gap: 12px;
  background: transparent;
  border-radius: 0;
}

.quotations2-editor-panel.quotation-page .quotation-band > div {
  padding: 8px 8px 15px;
  border-radius: 3px 3px 0 0;
  background: #e9f4f2;
  color: #2d5f56;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quotations2-editor-panel.quotation-page .quotation-band--values {
  margin: -18px 0 0 !important;
  background: transparent;
}

.quotations2-editor-panel.quotation-page .quotation-band--values > div {
  padding: 0;
  background: #e9f4f2;
  border-radius: 0 0 3px 3px;
}

.quotations2-editor-panel.quotation-page .quotation-band--values input {
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  border: none;
}

.quotations2-editor-panel.quotation-page .quotation-note {
  font-size: 0.82rem;
  margin-top: -3px !important;
}

.quotations2-editor-panel.quotation-page .quotation-items {
  padding: 6px 0 0;
}

.quotations2-editor-panel.quotation-page .quotation-items__head,
.quotations2-editor-panel.quotation-page .quotation-item-row {
  grid-template-columns: 36px minmax(0, 1fr) 62px 104px 112px 28px;
}

.quotations2-editor-panel.quotation-page .quotation-items__head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.08);
  color: #60716d;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quotations2-editor-panel.quotation-page .quotation-item-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 4, 53, 0.05);
  align-items: start;
}

.quotations2-editor-panel.quotation-page .quotation-item-row__description,
.quotations2-editor-panel.quotation-page .quotation-item-row__qty,
.quotations2-editor-panel.quotation-page .quotation-item-row__rate,
.quotations2-editor-panel.quotation-page .quotation-item-row__total {
  min-height: 31px;
  border: none;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

.quotations2-editor-panel.quotation-page .quotation-item-row__description {
  min-height: 31px;
  padding: 0;
  line-height: 1.45;
}

.quotations2-editor-panel.quotation-page .quotation-footer {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.9fr);
  align-items: start;
  gap: 44px;
}

.quotations2-editor-panel.quotation-page .quotation-client-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.quotations2-editor-panel.quotation-page .quotation-company-switch .quotation-editable-field {
  margin: 0;
}

.quotations2-editor-panel.quotation-page .quotation-company-switch select {
  min-width: 84px;
}

/* ---------- Editor panel: mobile responsiveness ----------
   The desktop grid rules above (.quotations2-editor-panel.quotation-page ...)
   have specificity (0,3,0). The earlier @media block at ~15315 uses lower
   specificity and is overridden on narrow viewports. These rules match the
   desktop specificity AND come later in source order, so ties resolve in
   mobile's favor without resorting to !important. */
@media (max-width: 720px) {
  /* Top of sheet: Client block stacks on top, Date/Quote/Version/Status
     meta block below. Previously the right column had a 230px min-width
     which forced the meta column off-screen. */
  .quotations2-editor-panel.quotation-page .quotation-sheet__top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Project Name / Delivery / Payment Terms / Currency: 4 fields. On a
     phone-width viewport, stack as 2x2 so each label still sits above its
     input. Both .quotation-band (header) and .quotation-band--values
     (inputs) get the same 2-col layout so columns line up. */
  .quotations2-editor-panel.quotation-page .quotation-band {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* The desktop layout overlaps the values onto the header by -18px to
     create a single visual capsule. With 2x2 stacking that overlap puts
     row 1 of values on top of row 2 of headers — kill the negative margin
     on mobile. */
  .quotations2-editor-panel.quotation-page .quotation-band--values {
    margin-top: 0 !important;
  }

  /* Footer: Terms above Totals instead of side-by-side. */
  .quotations2-editor-panel.quotation-page .quotation-footer {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Items grid: collapse the 6 desktop columns
     (#, Description, Qty, Rate, Total, Remove) into 2 cols. Everything
     after Description flows under it in the second column. */
  .quotations2-editor-panel.quotation-page .quotation-items__head,
  .quotations2-editor-panel.quotation-page .quotation-item-row {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 4px;
  }

  .quotations2-editor-panel.quotation-page .quotation-items__head span:nth-child(n + 3),
  .quotations2-editor-panel.quotation-page .quotation-item-row__qty,
  .quotations2-editor-panel.quotation-page .quotation-item-row__rate,
  .quotations2-editor-panel.quotation-page .quotation-item-row__total,
  .quotations2-editor-panel.quotation-page .quotation-item-row__total-wrap {
    grid-column: 2;
  }

  /* Tighten the card's own padding so fields get more horizontal room. */
  .quotations2-editor-panel .quotation-modal__card {
    padding: 12px 14px 24px;
  }

  /* Shrink the company logo so the sticky header row (title + logo +
     Save + 3-dot menu + close) doesn't push the Save button off-screen. */
  .quotations2-editor-panel .quotation-sheet__logo {
    width: 92px;
  }

  /* Belt-and-braces: panel + sheet pin to viewport width exactly and
     never allow horizontal overflow (which would otherwise show as a
     gap-strip on the right). */
  .quotations2-editor-panel,
  .quotations2-editor-panel__sheet {
    width: 100%;
    max-width: 100vw;
  }

  .quotations2-editor-panel__sheet {
    overflow-x: hidden;
  }

  /* Header gap is 50px on desktop (.quotation-page rule) — that's too
     big for phone width. Reduce it and let the header wrap if the
     content (company switch + title + logo + actions) is too wide. */
  .quotation-page .quotation-modal__header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* The header is `position: sticky` with margin overlap on desktop.
     Make sure it doesn't reserve unused space for the company switch
     when the panel is locked to a single company. */
  .quotations2-editor-panel .quotation-company-switch {
    min-width: 0;
  }

  /* Stop the Save / options / close trio from getting margin-left:auto
     and pushing off the right edge — let it flow on its own line if
     needed. */
  .quotation-page .quotation-modal__top-actions {
    margin-left: 0;
  }
}

.quotations2-version-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: transparent;
  color: #0f766e;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.quotations2-version-toggle:hover,
.quotations2-version-toggle:focus-visible {
  color: #0f766e;
  outline: none;
}

.quotations2-version-toggle__text {
  font: inherit;
  color: #0f766e;
}

.quotations2-version-label {
  font: inherit;
  color: inherit;
}

.quotations2-version-toggle__icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  transition: transform 0.18s ease;
  transform: rotate(0deg);
}

.quotations2-version-toggle.is-expanded .quotations2-version-toggle__icon {
  transform: rotate(90deg);
}

.quotations2-version-label--child {
  opacity: 0.82;
  color: inherit;
}




.table2-filter-bar__left,
.table2-filter-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table2-filter-bar__left {
  justify-content: flex-start;
  flex: 1 1 auto;
}

.table2-filter-bar__right {
  justify-content: flex-end;
  margin-left: auto;
}

.clients-new-page .overview-shell {
  margin-bottom: 0;
}

.clients-new-page .clients-new-table-wrap {
  overflow: auto;
}

.clients-new-page .table2-filter-chip--action {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .table2-filter-bar__right {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.clients-new-modal__card {
  width: min(820px, 100vw);
  padding: 24px 28px;
  border-radius: 12px;
  background: #eaf4f2;
}

.clients-new-modal__card .job-modal__header {
  margin-bottom: 8px;
}

.clients-new-modal__card .modal-eyebrow {
  margin: 0 0 4px;
  color: #5f6b78;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clients-new-modal__card .job-form-grid {
  gap: 14px 16px;
}

.clients-new-modal__card .modal-field input,
.clients-new-modal__card .modal-field textarea,
.clients-new-modal__card .modal-field select {
  background: #f0f7f6;
}

.clients-new-page .new-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.clients-new-page .clients-new-modal__card {
  width: min(100vw - 28px, 920px);
  padding: 28px 32px;
  border-radius: 12px;
  background: #eaf4f2;
}

.clients-new-page .clients-new-modal__card .job-modal__header {
  margin-bottom: 12px;
}

.clients-new-page .clients-new-modal__card .modal-eyebrow {
  margin: 0 0 4px;
  color: #5f6b78;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clients-new-page .clients-new-modal__card .job-form-grid {
  gap: 14px 16px;
}

.clients-new-page .clients-new-modal__card .modal-field input,
.clients-new-page .clients-new-modal__card .modal-field textarea,
.clients-new-page .clients-new-modal__card .modal-field select {
  background: #f0f7f6;
}

.clients-new-page .clients-new-modal__card .job-modal__footer {
  margin-top: 16px;
}

.clients-new-page .table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clients-new-page .table-pagination__controls {
  margin-left: auto;
}

.quotations2-page .quotations2-period-card {
  display: grid;
  place-items: center;
  text-align: center;
}

.quotations2-page .quotations2-period-card h1 {
  font-size: clamp(1.05rem, 3.4vw, 1.85rem);
  line-height: 1.05;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.table-page--v2 .overview-card__value-row {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.table-page--v2 .overview-card__value-row strong {
  font-size: clamp(2rem, 3vw, 2.55rem);
  line-height: 0.95;
}

.table-page--v2 .overview-card__value-inline-note {
  color: #0f6b5b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.table-page--v2 .overview-card__value-note {
  display: block;
  margin-top: 8px;
  color: #0f6b5b;
  font-size: 12px;
  font-weight: 700;
}

.table-page--v2 .overview-card__currency {
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  font-weight: 700;
  color: #6b7280;
  margin-left: 4px;
}

.quotations2-chart {
  min-height: 190px;
  padding-top: 0;
}

.quotations2-bar-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  height: 168px;
  max-height: 168px;
}

.quotations2-bar-chart__item {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  min-width: 0;
}

.quotations2-bar-chart__tower-wrap {
  position: relative;
  width: 100%;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.quotations2-bar-chart__tower {
  width: min(34px, 100%);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #5ecdb5 0%, #0f766e 100%);
}

.quotations2-bar-chart__value {
  position: absolute;
  left: 50%;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.quotations2-bar-chart__value.is-inside {
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 8px;
}

.quotations2-bar-chart__value.is-touching {
  transform: translate(-50%, 50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #24423d;
}

.quotations2-bar-chart__month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #75838a;
}


.quotations2-page .quotations2-chart-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  height: 168px;
  min-height: 168px;
  max-height: 168px;
  padding: 8px 10px;
  overflow: hidden;
}

.quotations2-page .quotations2-chart-card .overview-card__head {
  margin-bottom: 4px;
  min-height: 14px;
}

.quotations2-page .quotations2-chart-card .overview-card__label {
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
}

.quotations2-page .quotations2-chart-card .overview-card__label span {
  display: none;
}

.quotations2-page .quotations2-chart {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto;
  padding-top: 0;
  overflow: hidden;
}

.quotations2-page .quotations2-bar-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  width: 100%;
  height: 138px;
  min-height: 138px;
  max-height: 138px;
}

.quotations2-page .quotations2-bar-chart__item {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 4px;
  min-width: 0;
}

.quotations2-page .quotations2-bar-chart__tower-wrap {
  position: relative;
  width: 100%;
  height: 122px;
  min-height: 122px;
  max-height: 122px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.quotations2-page .quotations2-bar-chart__tower {
  width: min(30px, 100%);
}

.quotations2-page .quotations2-bar-chart__value {
  position: absolute;
  left: 50%;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.quotations2-page .quotations2-bar-chart__value.is-inside {
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 6px;
}

.quotations2-page .quotations2-bar-chart__value.is-touching {
  transform: translate(-50%, 50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #24423d;
}

.quotations2-page .quotations2-bar-chart__month {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #75838a;
}

/* Quotations overview metric cards: keep the amount big but let the
   "AED / this month" suffix stack into up to ~3 short lines beside it,
   so nothing overflows the card. */
.quotations2-page .overview-grid--metrics .overview-card,
.quotations2-page #wonAmountCard {
  min-width: 0;
  overflow: hidden;
}

.quotations2-page .overview-grid--metrics .overview-card__value-row,
.quotations2-page #wonAmountCard .overview-card__value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.quotations2-page .overview-grid--metrics .overview-card__value-row strong,
.quotations2-page #wonAmountCard .overview-card__value-row strong {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.quotations2-page .overview-card__value-suffix {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  max-width: 4.5ch;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.12;
  white-space: normal;
  word-break: break-word;
}

.quotations2-page .overview-card__value-suffix .overview-card__currency {
  display: block;
  margin: 0;
  font-size: 11px;
  color: #6b7280;
  white-space: normal;
}

.quotations2-page .overview-card__value-suffix .overview-card__value-inline-note {
  display: block;
  font-size: 11px;
  color: #0f6b5b;
  white-space: normal;
}

.quotations2-page .overview-grid--metrics .overview-card__value-note,
.quotations2-page #wonAmountCard .overview-card__value-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #0f6b5b;
  white-space: normal;
  overflow-wrap: anywhere;
}

.installation-row--inactive td {
  background: #fff4e8;
}

/* Task pill — one of 8 colored capsules. Background is a soft tint and
   text is its saturated cousin, so all chips read clearly on the white
   table row without competing with the row stripe. Slug is derived from
   the task name in installations.js (lowercased, non-alnum → hyphen). */
.installation-task-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.installation-task-pill--item-pickup   { background: #FFEDD5; color: #9A3412; }
.installation-task-pill--delivery      { background: #DBEAFE; color: #1E40AF; }
.installation-task-pill--installation  { background: #EDE9FE; color: #5B21B6; }
.installation-task-pill--snagging      { background: #FEE2E2; color: #991B1B; }
.installation-task-pill--removal       { background: #E2E8F0; color: #334155; }
.installation-task-pill--site-visit    { background: #CCFBF1; color: #0F766E; }
.installation-task-pill--client-visit  { background: #FCE7F3; color: #9D174D; }
.installation-task-pill--client-pickup { background: #FEF3C7; color: #92400E; }

.installation-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  background: #e7f5ef;
  color: #0f766e;
}

.installation-status-pill--active {
  background: #e7f5ef;
  color: #0f766e;
}

.installation-status-pill--closed,
.installation-status-pill--lost,
.installation-status-pill--cancelled,
.installation-status-pill--inactive {
  background: #fff1f2;
  color: #b42318;
}

.installation-row--inactive td {
  background: #fff4e8;
}

.installation-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  background: #e7f5ef;
  color: #0f766e;
}

.installation-status-pill--active {
  background: #e7f5ef;
  color: #0f766e;
}

.installation-status-pill--closed,
.installation-status-pill--lost,
.installation-status-pill--cancelled,
.installation-status-pill--inactive {
  background: #fff1f2;
  color: #b42318;
}

.master-settings-page--modern {
  --new-sidebar-width: 240px;
  --new-topbar-height: 52px;
  background: #f8f9ff;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-shell {
  min-height: 100vh;
  background: #f8f9ff;
}

.master-settings-page--modern .master-settings-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #dbe4f2;
  backdrop-filter: blur(12px);
}

.master-settings-page--modern .master-settings-sidebar {
  position: fixed;
  inset: var(--new-topbar-height) auto 0 0;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  padding: 18px 14px 14px;
  background: #ffffff;
  border-right: 1px solid #dbe4f2;
  overflow-y: auto;
}

.master-settings-page--modern .master-settings-sidebar__intro {
  padding: 10px 10px 18px;
  border-bottom: 1px solid #edf2fb;
  margin-bottom: 14px;
}

.master-settings-page--modern .master-settings-sidebar__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.master-settings-page--modern .master-settings-sidebar__intro h2 {
  margin: 14px 0 6px;
  font-family: Manrope, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-sidebar__intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5d6b7f;
}

.master-settings-page--modern .master-settings-nav {
  display: grid;
  gap: 4px;
align-content: start;
}

.master-settings-page--modern .master-settings-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 24px) 24px 24px;
}

.master-settings-page--modern .master-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.master-settings-page--modern .master-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.master-settings-page--modern .master-settings-head h1 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-head p,
.master-settings-page--modern .master-settings-card__header p,
.master-settings-page--modern .master-settings-hint,
.master-settings-page--modern .master-settings-empty p {
  margin: 6px 0 0;
  color: #66758b;
  font-size: 14px;
  line-height: 20px;
}

.master-settings-page--modern .master-settings-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.master-settings-page--modern .master-settings-kpi,
.master-settings-page--modern .master-settings-card,
.master-settings-page--modern .master-settings-list {
  background: #ffffff;
  border: 1px solid #dbe4f2;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.master-settings-page--modern .master-settings-kpi {
  padding: 18px 20px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.master-settings-page--modern .master-settings-kpi__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #496070;
}

.master-settings-page--modern .master-settings-kpi strong {
  font-family: Manrope, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  font-weight: 800;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-kpi small {
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
}

.master-settings-page--modern .master-settings-overview-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 16px;
}

.master-settings-page--modern .master-settings-card {
  padding: 20px;
}

.master-settings-page--modern .master-settings-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.master-settings-page--modern .master-settings-card__header h2,
.master-settings-page--modern .master-settings-empty h2 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-overview-copy {
  display: grid;
  gap: 12px;
}

.master-settings-page--modern .master-settings-overview-copy p {
  margin: 0;
  color: #475467;
  line-height: 1.7;
}

.master-settings-page--modern .master-settings-overview-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.master-settings-page--modern .master-settings-compact-list {
  display: grid;
  gap: 10px;
}

.master-settings-page--modern .master-settings-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid #e6edf8;
}

.master-settings-page--modern .master-settings-compact-row strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-compact-row small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #66758b;
}

.master-settings-page--modern .master-settings-compact-row span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.master-settings-page--modern .master-settings-two-pane {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - var(--new-topbar-height) - 160px);
}

.master-settings-page--modern .master-settings-two-pane--users {
  grid-template-columns: 280px minmax(0, 1fr);
}

.master-settings-page--modern .master-settings-list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 100%;
  overflow-y: auto;
}

.master-settings-page--modern .master-settings-directory-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  color: #0b1c30;
  cursor: pointer;
  transition: 140ms ease;
}

.master-settings-page--modern .master-settings-directory-card:hover {
  border-color: #d4e3f8;
  background: #f9fcff;
}

.master-settings-page--modern .master-settings-directory-card.is-active {
  border-color: rgba(0, 101, 101, 0.22);
  background: rgba(0, 128, 128, 0.08);
}

.master-settings-page--modern .master-settings-directory-card__avatar {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 128, 128, 0.12);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.master-settings-page--modern .master-settings-directory-card__content {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.master-settings-page--modern .master-settings-directory-card__content strong,
.master-settings-page--modern .master-settings-directory-card__content small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-settings-page--modern .master-settings-directory-card__content strong {
  font-size: 12px;
  font-weight: 700;
}

.master-settings-page--modern .master-settings-directory-card__content small {
  font-size: 11px;
  color: #66758b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.master-settings-page--modern .master-settings-directory-card__meta {
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
}

.master-settings-page--modern .master-settings-detail-pane--stacked {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.master-settings-page--modern .master-settings-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #d7e3f3;
  border-radius: 12px;
  padding: 32px;
}

.master-settings-page--modern .master-settings-empty h1 {
  margin: 0 0 10px;
  font-family: Manrope, sans-serif;
  font-size: 30px;
  line-height: 38px;
}

.master-settings-page--modern .master-settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.master-settings-page--modern .master-settings-field {
  display: grid;
  gap: 8px;
}

.master-settings-page--modern .master-settings-field span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #496070;
}

.master-settings-page--modern .master-settings-field input,
.master-settings-page--modern .master-settings-field select {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #cdd7e6;
  background: #f8fbff;
  color: #0b1c30;
  outline: none;
  font: inherit;
  font-size: 14px;
}

.master-settings-page--modern .master-settings-field input:focus,
.master-settings-page--modern .master-settings-field select:focus {
  border-color: #008080;
  box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.12);
}

.master-settings-page--modern .master-settings-field input[readonly] {
  color: #66758b;
  background: #f4f7fb;
}

.master-settings-page--modern .master-settings-pill-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.master-settings-page--modern .master-settings-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 128, 128, 0.1);
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.master-settings-page--modern .master-settings-company-access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.master-settings-page--modern .master-settings-company-access__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #f9fcff;
}

.master-settings-page--modern .master-settings-company-access__item input {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
}

.master-settings-page--modern .master-settings-company-access__item span {
  display: grid;
  gap: 4px;
}

.master-settings-page--modern .master-settings-company-access__item strong {
  font-size: 14px;
  font-weight: 700;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-company-access__item small,
.master-settings-page--modern .master-settings-company-access__master {
  font-size: 12px;
  color: #66758b;
}

.master-settings-page--modern .master-settings-company-access__master {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #dbe4f2;
  background: rgba(0, 128, 128, 0.06);
}

.master-settings-page--modern .master-settings-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.master-settings-page--modern .master-settings-permission-tile {
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #dbe4f2;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}

.master-settings-page--modern .master-settings-permission-tile.is-active {
  border-color: rgba(0, 128, 128, 0.25);
  background: rgba(0, 128, 128, 0.08);
}

.master-settings-page--modern .master-settings-permission-tile input {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
}

.master-settings-page--modern .master-settings-permission-tile__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 128, 128, 0.12);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}

.master-settings-page--modern .master-settings-permission-tile__copy {
  display: grid;
  gap: 4px;
}

.master-settings-page--modern .master-settings-permission-tile__copy strong {
  font-size: 14px;
  font-weight: 700;
  color: #0b1c30;
}

.master-settings-page--modern .master-settings-permission-tile__copy small {
  font-size: 12px;
  color: #66758b;
  text-transform: capitalize;
}

@media (max-width: 1100px) {
  .master-settings-page--modern .master-settings-overview-grid,
  .master-settings-page--modern .master-settings-overview-layout,
  .master-settings-page--modern .master-settings-two-pane,
  .master-settings-page--modern .master-settings-two-pane--users {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .master-settings-page--modern .master-settings-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #dbe4f2;
  }

  .master-settings-page--modern .master-settings-main {
    margin-left: 0;
    padding: 24px 14px 18px;
  }

  .master-settings-page--modern .master-settings-head,
  .master-settings-page--modern .master-settings-overview-actions,
  .master-settings-page--modern .master-settings-head__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .master-settings-page--modern .master-settings-form-grid {
    grid-template-columns: 1fr;
  }
}

.master-settings-page--modern {
  --new-sidebar-width: 180px;
}

.master-settings-page--modern .master-settings-topbar .new-topbar__crumbs,
.master-settings-page--modern .master-settings-topbar .new-topbar__crumbs strong,
.master-settings-page--modern .master-settings-topbar .new-topbar__badge,
.master-settings-page--modern .master-settings-sidebar,
.master-settings-page--modern .master-settings-sidebar .new-sidebar__link,
.master-settings-page--modern .master-settings-sidebar .new-sidebar__logout {
  font-size: 12px;
}

.master-settings-page--modern .master-settings-sidebar {
  padding: 10px 8px 12px;
  gap: 2px;
}

.master-settings-page--modern .master-settings-sidebar__intro {
  padding: 6px;
  margin-bottom: 0px;
  border-bottom: 0;
}

.master-settings-page--modern .master-settings-sidebar__intro h2,
.master-settings-page--modern .master-settings-sidebar__intro p {
  display: none;
}

.master-settings-page--modern .master-settings-sidebar__badge {
  background: #0f766e;
  color: #ffffff;
}

.master-settings-page--modern .master-settings-nav {
  gap: 0px;
}

.master-settings-page--modern .master-settings-nav .new-sidebar__link {
  min-height: 24px;
  padding: 0 12px;
  border-radius: 10px;
  color: #334155;
}

.master-settings-page--modern .master-settings-nav .new-sidebar__link.is-active {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.12);
}

.master-settings-page--modern .master-settings-nav .new-sidebar__icon,
.master-settings-page--modern .master-settings-sidebar .new-sidebar__logout-icon,
.master-settings-page--modern .master-settings-topbar .new-topbar__panel-icon,
.master-settings-page--modern .master-settings-topbar .new-topbar__icon-button svg {
  width: 14px;
  height: 14px;
}

.master-settings-page--modern .master-settings-sidebar .new-sidebar__logout {
  margin-top: auto;
  min-height: 30px;
  padding: 0 12px;
}

.master-settings-page--modern .master-settings-main {
  margin-left: var(--new-sidebar-width);
}

.master-settings-page--modern .master-settings-panel.is-hidden {
  display: none !important;
}

.master-settings-page--modern .master-settings-empty {
  min-height: 180px;
}

.dashboard-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  background: #f6f8fc;
}
.dashboard-sidebar-slot {
  min-width: 0;
}
.dashboard-main-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}
.dashboard-content {
  padding: 24px;
}
.new-sidebar__switch {
  margin: auto 16px 10px;
  border: 0;
  background: transparent;
  color: #0f766e;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.master-settings-compact-row--button {
  width: 100%;
  border: 0;
  background: #f7fbff;
  cursor: pointer;
  text-align: left;
}
.new-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0 4px 8px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid #edf2f7;
}
.new-sidebar__brand-logo {
  display: block;
  max-width: 160px;
  max-height: 24px;
  object-fit: contain;
}
.master-settings-page--modern .master-settings-table-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.master-settings-page--modern .master-settings-table-tile {
  min-height: 86px;
  padding: 12px 14px;
}
.master-settings-page--modern .master-settings-table-tile .overview-card__head {
  margin-bottom: 4px;
}
.master-settings-page--modern .master-settings-table-tile .overview-card__label,
.master-settings-page--modern .master-settings-table-tile .overview-card__value-note {
  font-size: 12px;
}
.master-settings-page--modern .master-settings-table-tile .overview-card__value-row strong {
  font-size: 28px;
}
.master-settings-page--modern .master-settings-table-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(360px, 430px);
  gap: 14px;
  align-items: start;
  min-height: calc(100vh - var(--new-topbar-height) - 250px);
}
.master-settings-page--modern .master-settings-table-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--new-topbar-height) - 250px);
  padding: 12px;
}
.master-settings-page--modern .master-settings-table-wrap {
  flex: 1 1 auto;
  min-height: 300px;
  max-height: calc(100vh - var(--new-topbar-height) - 330px);
}
.master-settings-page--modern .master-settings-data-table {
  font-size: 12px;
}
.master-settings-page--modern .master-settings-data-table th,
.master-settings-page--modern .master-settings-data-table td {
  padding: 6px 10px;
  line-height: 16px;
}
.master-settings-page--modern .master-settings-data-table tbody tr {
  cursor: pointer;
}
.master-settings-page--modern .master-settings-data-table tbody tr.is-selected td {
  background: #e7f7f2;
}
.master-settings-page--modern .master-settings-data-table tbody tr.is-selected:hover td {
  background: #dcf3ec;
}
.master-settings-table-logo {
  display: block;
  width: auto;
  max-width: 42px;
  height: 14px;
  object-fit: contain;
}
.master-settings-table-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e3f3;
  border-radius: 999px;
  background: #ffffff;
}
.master-settings-table-search span {
  color: #66758b;
  font-size: 12px;
  font-weight: 700;
}
.master-settings-table-search input {
  width: 190px;
  min-height: 26px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f1728;
  font-size: 12px;
}
.master-settings-page--modern .master-settings-detail-pane--stacked {
  position: sticky;
  top: calc(var(--new-topbar-height) + 16px);
  max-height: calc(100vh - var(--new-topbar-height) - 28px);
  overflow: auto;
}
.master-settings-page--modern .master-settings-logo-field {
  grid-column: 1 / -1;
}
.master-settings-logo-control {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.master-settings-logo-control img {
  width: 88px;
  height: 48px;
  padding: 6px;
  border: 1px solid #dbe4f2;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}
.master-settings-logo-control input[type="file"] {
  grid-column: 2;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}
@media (max-width: 1180px) {
  .master-settings-page--modern .master-settings-table-layout {
    grid-template-columns: 1fr;
  }
  .master-settings-page--modern .master-settings-detail-pane--stacked {
    position: static;
    max-height: none;
  }
}
@media (max-width: 760px) {
  .master-settings-page--modern .master-settings-table-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .master-settings-page--modern .master-settings-table-search {
    width: 100%;
  }
  .master-settings-table-search input {
    width: 100%;
  }
}
.company-switch-dialog {
  border: 0;
  padding: 0;
  border-radius: 20px;
  background: transparent;
}
.company-switch-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}
.company-switch-dialog__card {
  width: min(420px, calc(100vw - 32px));
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
  padding: 22px;
}
.company-switch-dialog__head h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.company-switch-dialog__head p {
  margin: 0 0 16px;
  color: #64748b;
}
.company-switch-dialog__list {
  display: grid;
  gap: 10px;
}
.company-switch-dialog__option {
  border: 1px solid #d7e3f4;
  border-radius: 14px;
  background: #f8fbff;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}
.company-switch-dialog__option strong {
  display: block;
  font-size: 15px;
}
.company-switch-dialog__option small {
  color: #64748b;
}

.homepage-page {
  --new-sidebar-width: 180px;
  --new-topbar-height: 52px;
  min-height: 100vh;
  margin: 0;
  background: #fbfaf8;
  color: #0f1728;
  font-family: "Inter", "Manrope", sans-serif;
}

.homepage-shell {
  min-height: 100vh;
}

.homepage-page .new-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--new-sidebar-width);
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--new-topbar-height);
  padding: 0 12px;
  border-bottom: 1px solid #e7e5df;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  transition: left 180ms ease;
}

/* Future-proof: when the sidebar is collapsed/hidden, add the body class
   `.homepage-sidebar-collapsed` and the topbar will animate back to the
   left edge so it spans the full viewport width. */
.homepage-page.homepage-sidebar-collapsed .new-topbar,
.homepage-page.homepage-sidebar-collapsed .homepage-topbar {
  left: 0;
}

.homepage-topbar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--new-sidebar-width);
  min-height: var(--new-topbar-height);
  text-decoration: none;
}

.homepage-topbar__brand-logo {
  width: auto;
  max-width: 160px;
  max-height: 24px;
  display: block;
}

.homepage-topbar__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.homepage-topbar__crumbs,
.homepage-topbar__crumbs strong {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.homepage-topbar__crumbs strong {
  color: #0f1728;
}

.homepage-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.homepage-topbar__notification {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
}

.homepage-topbar__notification svg {
  width: 12px;
  height: 12px;
}

.homepage-page .new-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--new-sidebar-width);
  height: 100vh;
  padding: 0;
  border-right: 1px solid #e7e5df;
  background: #ffffff;
}

.homepage-page .new-sidebar__group {
  padding: 14px 10px 0 10px;
}

.homepage-page .new-sidebar__nav {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}

.homepage-page .new-sidebar__section-title {
  margin: 0;
  padding: 0 10px;
  color: #8b98b0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.homepage-page .new-sidebar__section-links {
  display: grid;
  gap: 0;
  padding-left: 10px;
}

.homepage-page .new-sidebar__link,
.homepage-page .new-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #475467;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.homepage-page .new-sidebar__link:hover,
.homepage-page .new-sidebar__logout:hover {
  background: #f8faf9;
  color: #0f1728;
}

.homepage-page .new-sidebar__link.is-active {
  background: #e7f7f2;
  color: #0f766e;
  font-weight: 600;
}

.homepage-page .new-sidebar__icon,
.homepage-page .new-sidebar__logout-icon,
.homepage-page .new-sidebar__icon svg,
.homepage-page .new-sidebar__logout-icon svg {
  width: 14px;
  height: 14px;
}

.homepage-page .new-sidebar__switch {
  margin: auto 10px 10px;
  color: #0f766e;
  font-size: 12px;
}

.homepage-page .new-sidebar__logout {
  margin: 0 10px 12px;
}

.homepage-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 16px) 20px 24px;
}

.homepage-hero h1 {
  margin: 0 0 18px;
}

.homepage-notifications {
  top: calc(var(--new-topbar-height) + 12px);
  right: 20px;
}

/* Tablet: keep the desktop full-height-sidebar layout intact. The
   notifications panel was the only piece that needed to reset its
   position (it used to be pinned to the right at desktop). Mobile
   (≤720px) handles the off-canvas drawer separately. */
@media (max-width: 960px) {
  .homepage-notifications {
    position: static;
    width: auto;
    padding: 0;
  }
}

/* Mobile-only UI for dashboard: 3-dot menu button + overlay backdrop.
   Hidden by default (desktop); shown only inside @media (max-width:720px). */
.homepage-page .homepage-mobile-only {
  display: none;
}
.homepage-page .homepage-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  border: 0;
  background: rgba(15, 23, 40, 0.32);
  cursor: pointer;
}

/* ---- Dashboard mobile (phone-width) ---- */
@media (max-width: 720px) {
  /* Topbar: reset the desktop `left: var(--new-sidebar-width)` (sidebar
     is off-canvas on mobile so topbar starts at the left edge again).
     Grid is `auto 1fr auto` — menu, brand (in flex middle), actions.
     Both selectors are needed because the topbar element carries both
     `.new-topbar` and `.homepage-topbar` and there's an `.new-topbar`
     rule later in the file. */
  .homepage-page .homepage-topbar,
  .homepage-page .new-topbar {
    inset: 0 0 auto 0;
    left: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 6px;
  }
  .homepage-page .homepage-mobile-only {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f6e84;
    cursor: pointer;
  }
  .homepage-page .homepage-mobile-only svg {
    width: 16px;
    height: 16px;
  }
  /* Re-show the brand on mobile (desktop hides it because the sidebar
     carries the logo; on mobile the sidebar is off-canvas so we need a
     visible brand in the topbar). */
  .homepage-page .homepage-topbar__brand {
    display: flex !important;
    align-items: center;
    width: auto;
    padding: 8px 8px;
    border-right: 0;
  }
  .homepage-page .homepage-topbar__brand-logo {
    max-width: 100px;
    max-height: 20px;
  }
  .homepage-page .homepage-topbar__title-wrap {
    display: none;
  }
  .homepage-page .homepage-topbar__actions {
    padding: 0 8px;
    gap: 6px;
  }

  /* Sidebar: full-viewport-height off-canvas drawer that sits ABOVE the
     topbar. When body.homepage-sidebar-open is set, the sidebar slides in
     from the left and the topbar shifts right so its 3-dot toggle button
     stays visible alongside the open sidebar. */
  .homepage-page .homepage-sidebar-slot {
    display: block !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(80vw, 240px);
    z-index: 110;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    background: #fffdfb;
    box-shadow: 0 14px 38px rgba(15, 23, 40, 0.18);
  }
  .homepage-page.homepage-sidebar-open .homepage-sidebar-slot {
    transform: translateX(0);
  }
  .homepage-page .homepage-sidebar,
  .homepage-page .new-sidebar {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  /* Topbar: animate its left edge so it slides right when the sidebar
     opens, freeing the left strip for the drawer. Width shrinks because
     right:0 stays pinned. Both class selectors required (see note above). */
  .homepage-page .homepage-topbar,
  .homepage-page .new-topbar {
    transition: left 180ms ease;
  }
  .homepage-page.homepage-sidebar-open .homepage-topbar,
  .homepage-page.homepage-sidebar-open .new-topbar {
    left: min(80vw, 240px);
  }

  /* Backdrop: visible only while the sidebar is open. */
  .homepage-page.homepage-sidebar-open .homepage-mobile-overlay {
    display: block;
  }

  /* Main content: drop the sidebar gutter, tighten the padding. */
  .homepage-page .homepage-main {
    margin-left: 0 !important;
    padding: calc(var(--new-topbar-height) + 12px) 12px 18px;
    gap: 14px;
  }

  /* Greeting: smaller and tighter. */
  .homepage-page .homepage-hero {
    margin-bottom: 8px;
  }
  .homepage-page .homepage-hero h1 {
    font-size: 1.35rem;
  }

  /* Tiles grid: allow tiles to wrap to as many rows as needed. The JS
     sets --main-grid-columns based on tile count (max 6 fixed 80px cols);
     override to auto-fit so they reflow into available width. */
  .homepage-page .homepage-grid,
  .homepage-page .main-grid {
    grid-template-columns: repeat(auto-fit, 80px) !important;
    gap: 16px 12px;
    justify-content: center;
  }

  /* Quote card / notice card: tighter padding so they don't overshoot. */
  .homepage-page .homepage-quote-card .main-notice-card,
  .homepage-page .homepage-quote-card .main-daily-quote {
    padding: 16px 16px;
  }
  .homepage-page .homepage-quote-card .main-quote-card h2,
  .homepage-page .main-quote-card h2 {
    font-size: 1rem;
    line-height: 1.35;
  }
  .homepage-page .main-quote-card__eyebrow {
    font-size: 0.65rem;
  }

  /* Notifications card: full-width with tighter inner padding so the
     list inside doesn't feel cramped at narrow widths. */
  .homepage-page .homepage-notifications {
    padding: 14px 14px;
    border-radius: 16px;
  }
  .homepage-page .main-notifications__header h2 {
    font-size: 0.95rem;
  }
  .homepage-page .main-notifications__list {
    max-height: none !important;
  }
}

.homepage-page .homepage-main {
  display: grid;
  gap: 20px;
}

.homepage-page .homepage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.homepage-page .homepage-primary {
  display: grid;
  gap: 18px;
  min-width: 0;
height: stretch;
    align-content: space-between;
}

.homepage-page .homepage-secondary {
  display: block;
  min-width: 0;
}

.homepage-page .homepage-notifications {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid #ebe5de;
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 14px 34px rgba(15, 23, 40, 0.06);
}

.homepage-page .homepage-notifications .main-notifications__list {
  max-height: none;
  max-height: calc(100vh - var(--new-topbar-height) - 110px);
  overflow: auto;
}

.homepage-page .homepage-quote-card {
  position: static;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin-top: 0;
  padding: 0;
  border: 1px solid #ebe5de;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}

.homepage-page .homepage-quote-card::after {
  display: none;
}

.homepage-page .homepage-quote-card .main-notice-card,
.homepage-page .homepage-quote-card .main-daily-quote {
  padding: 22px 24px;
  border-radius: 22px;
}

@media (max-width: 1180px) {
  .homepage-page .homepage-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .homepage-page .homepage-notifications .main-notifications__list {
    max-height: none;
  }
}

.config-page {
  --new-sidebar-width: 180px;
  --new-topbar-height: 52px;
  min-height: 100vh;
  margin: 0;
  background: #fbfaf8;
  color: #0f1728;
  font-family: "Inter", "Manrope", sans-serif;
}

.config-page .config-sidebar-slot {
  position: fixed;
  inset: var(--new-topbar-height) auto 0 0;
  width: var(--new-sidebar-width);
  z-index: 30;
}

.config-page .new-sidebar {
  position: fixed;
  inset: var(--new-topbar-height) auto 0 0;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  padding: 0;
  border-right: 1px solid #e7e5df;
  background: #ffffff;
}

.config-page .new-sidebar__group {
  padding: 14px 10px 0 10px;
}

.config-page .new-sidebar__section-title {
  margin: 0;
  padding: 0 10px;
  color: #8b98b0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.config-page .new-sidebar__section-links {
  display: grid;
  gap: 0;
  padding-left: 10px;
}

.config-page .new-sidebar__link,
.config-page .new-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #475467;
  font-size: 12px;
  text-decoration: none;
}

.config-page .new-sidebar__link.is-active {
  background: #e7f7f2;
  color: #0f766e;
  font-weight: 600;
}

.config-page .new-sidebar__icon,
.config-page .new-sidebar__logout-icon,
.config-page .new-sidebar__icon svg,
.config-page .new-sidebar__logout-icon svg {
  width: 14px;
  height: 14px;
}

.config-page .new-sidebar__switch {
  margin: auto 10px 10px;
  color: #0f766e;
  font-size: 12px;
}

.config-page .new-sidebar__logout {
  margin: 0 10px 12px;
}

.config-page .config-main {
  margin-left: var(--new-sidebar-width);
  padding: calc(var(--new-topbar-height) + 18px) 20px 24px;
}

.config-shell {
  overflow: hidden;
  border: 1px solid #e7e5df;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}

.config-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid #e7e5df;
}

.config-tab {
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #6d7b7a;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.config-tab.is-active {
  color: #0f766e;
  border-bottom-color: #0f766e;
}

.config-body {
  padding: 22px 24px 24px;
}

.config-page-head {
  margin-bottom: 18px;
}

.config-page-head h1 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.15;
}

.config-page-head p {
  margin: 0;
  color: #70808f;
  font-size: 12px;
}

.config-status {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
}

.config-status.is-error {
  background: #fef2f2;
  color: #b91c1c;
}

.config-grid {
  display: grid;
  gap: 18px;
}

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

.config-stack {
  display: grid;
  gap: 18px;
}

.config-card {
  padding: 18px;
  border: 1px solid #d9f1ea;
  border-radius: 22px;
  background: linear-gradient(180deg, #f5fffd 0%, #ffffff 100%);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}

.config-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.config-card__header h2 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.2;
}

.config-card__header p {
  margin: 0;
  color: #70808f;
  font-size: 12px;
}

.config-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.config-list {
  display: grid;
  gap: 10px;
}

.config-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.config-list-row--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.config-list-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.config-empty-message {
  margin: 0;
  color: #70808f;
  font-size: 12px;
}

.config-entity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

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

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

.config-field span {
  color: #14213d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.config-field--full {
  grid-column: 1 / -1;
}

.config-helper {
  margin: 0;
  color: #70808f;
  font-size: 12px;
}

.config-table-wrap {
  overflow: auto;
}

.config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.config-table th,
.config-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e7edf2;
  text-align: left;
  vertical-align: top;
}

.config-table th {
  color: #6d7b7a;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.config-tile-grid {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 180px);
  gap: 10px;
  align-items: center;
}

.config-tile-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid #d8e6e4;
  border-radius: 14px;
  background: #f7fbfb;
}

.config-tile-grid__icon img {
  max-width: 28px;
  max-height: 28px;
  display: block;
}

.config-icon-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.config-icon-library__item {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 12px;
  border: 1px solid #dce8e5;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
}

.config-icon-library__item img {
  max-width: 28px;
  max-height: 28px;
}

.config-icon-library__item span {
  color: #5e6d7a;
  font-size: 11px;
  text-align: center;
  word-break: break-word;
}

.config-upload-button {
  position: relative;
  overflow: hidden;
}

.config-upload-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.config-letterhead-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.config-letterhead-column {
  padding: 14px;
  border: 1px solid #dce8e5;
  border-radius: 16px;
  background: #ffffff;
  display: grid;
  gap: 12px;
}

.config-notifications {
  position: relative;
}

.config-notifications__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  padding: 14px;
  border: 1px solid #e4ece8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.config-notifications__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.config-notifications__header strong {
  font-size: 13px;
}

.config-notifications__list {
  display: grid;
  gap: 10px;
}

.config-notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  background: #fbfdfd;
}

.config-notification-item__body {
  display: grid;
  gap: 4px;
}

.config-notification-item__body strong {
  font-size: 12px;
  line-height: 1.45;
}

.config-notification-item__body span {
  color: #70808f;
  font-size: 11px;
}

.config-icon-button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.settings-add-input--textarea {
  min-height: 160px;
  resize: vertical;
}

@media (max-width: 1080px) {
  .config-grid--two,
  .config-form-grid,
  .config-entity-grid,
  .config-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Branch row in Company settings: branch button + delete button. */
.settings-company-entity-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}
.settings-company-entity-row .settings-company-entity-button {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.settings-company-entity-row .settings-delete-button {
  flex: 0 0 auto;
  width: 32px;
  align-self: stretch;
}

/* ============================================================
   Sidebar redesign — 2026-05-10
   - Hide topbar brand (the sidebar's top brand IS the main logo).
   - Sidebar runs full viewport height in table-page--v2 layouts.
   - Top brand container: locked to 52px (matches topbar height)
     with thin bottom border; logo image capped at 24px tall.
   - Bottom .new-sidebar__footer pins Switch + Logout + Enlitco
     mark to the bottom in one block; logo capped at 24px.
   - In v2 layouts the topbar starts at exactly the sidebar width
     (180px), with its own padding instead of the main's.
   - On the installations page the topbar uses a flex layout so
     actions sit on the right edge.
   ============================================================ */
.new-topbar__brand {
  display: none !important;
}

/* Disable the base .new-shell grid in table-page--v2 layouts. The base
   uses `display: grid; grid-template-columns: 230px 1fr;` which fights
   with the fixed-position sidebar — leaves a 50px gap left of the main
   and pushes the topbar wrong. We use position: fixed on the sidebar
   plus margin-left on main, so a plain block flow is correct here. */
.table-page--v2 .new-shell {
  display: block;
  min-height: 100vh;
}

/* Sidebar runs full viewport height in every page that mounts the
   universal sidebar inside a .new-shell. (Old-style pages without
   .new-shell — settings, notes, design, report — keep their layout.) */
.new-shell .new-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--new-sidebar-width, 180px);
  height: 100vh;
  /* Must stay above .table2-mobile-overlay (z=35) so taps on sidebar
     links register instead of being swallowed by the overlay. */
  z-index: 40;
}

/* ------------------------------------------------------------------
   Full-height sidebar with a scrollable middle.
   The aside is always a full-height flex column. The brand (top logo)
   and the footer (Switch / Logout / user card / Enlitco logo) stay
   pinned; only the nav scrolls when the menu is taller than the screen.

   The nav lives inside .new-sidebar__group, so the group must itself be
   a flex column that fills the space between brand and footer — without
   this the nav's flex:1/overflow never engages and the footer gets
   pushed off-screen on short viewports. Component-level (applies to
   every page that mounts the universal sidebar).
   ------------------------------------------------------------------ */
.new-sidebar {
  overflow: hidden; /* clip the scroll region to the viewport height */
}
.new-sidebar__group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* allow the flex child (nav) to shrink and scroll */
}
.new-sidebar__brand {
  flex-shrink: 0;
}
.new-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.new-sidebar__nav::-webkit-scrollbar {
  width: 6px;
}
.new-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(16, 33, 58, 0.16);
  border-radius: 6px;
}
.new-sidebar__footer {
  flex-shrink: 0; /* footer keeps its size; never collapses */
}

/* Force the brand container to exactly 52px (matches topbar height).
   Scoped to .table-page--v2 + !important to beat the older base rules
   at lines 12212 / 12630 / 16639 that set min-height: 34/38px. */
.table-page--v2 .new-sidebar__brand {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-bottom: 1px solid #e7e5df;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.table-page--v2 .new-sidebar__brand-logo {
  width: auto;
  max-width: 100%;
  max-height: 24px !important;
  height: auto;
  object-fit: contain;
}

.new-sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid #e7e5df;
}

.new-sidebar__footer .new-sidebar__switch,
.new-sidebar__footer .new-sidebar__logout {
  margin: 0;
}

/* To-do + Switch buttons in the footer adopt Logout's look (icon + text,
   transparent background, hover tint). Same baseline as .new-sidebar__link
   / .new-sidebar__logout — duplicated here so we don't have to retro-add
   the new classes to every rule that already targets those two. */
.new-sidebar__footer > .new-sidebar__todo,
.new-sidebar__footer > .new-sidebar__switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  padding: 8px 12px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #45556f;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 150ms ease, color 150ms ease;
}
.new-sidebar__footer > .new-sidebar__todo:hover,
.new-sidebar__footer > .new-sidebar__switch:hover {
  background: rgba(15, 118, 110, 0.08);
  color: #10213a;
}
/* Footer now uses gap: 0, so no negative margins are needed to close
   the To-do → Switch → Logout spacing. The footer logo still has its
   own `margin: 6px -10px -14px` for the teal breathing room. */
.new-sidebar__todo-icon,
.new-sidebar__switch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.new-sidebar__switch-icon svg {
  width: 18px;
  height: 18px;
}
/* TO-DO icon explicitly smaller (per design — 14px instead of the 18px
   shared default with the Switch icon). */
.new-sidebar__todo-icon,
.new-sidebar__todo-icon svg {
  width: 14px;
  height: 14px;
}
/* Match the smaller v2 sizing already applied to .new-sidebar__logout. */
.table-page--v2 .new-sidebar__footer > .new-sidebar__todo,
.table-page--v2 .new-sidebar__footer > .new-sidebar__switch {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.table-page--v2 .new-sidebar__todo-icon,
.table-page--v2 .new-sidebar__switch-icon,
.table-page--v2 .new-sidebar__todo-icon svg,
.table-page--v2 .new-sidebar__switch-icon svg {
  width: 14px;
  height: 14px;
}

/* Current-user card: avatar + name + role, sits between Logout and the
   teal Enlitco footer logo. */
.new-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 6px 0 0;
  padding: 8px 6px;
  border-top: 1px solid #e7e5df;
}
.new-sidebar__user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #0f766e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.new-sidebar__user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.new-sidebar__user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.new-sidebar__user-name {
  font-size: 13px;
  font-weight: 600;
  color: #10213a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.new-sidebar__user-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a93a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer logo: edge-to-edge teal panel that breaks out of the
   .new-sidebar__footer padding so it spans the full sidebar width.
   Inner span uses a CSS mask so the PNG renders as solid white.
   Container keeps its original 50px height; the mark shrinks to 38px
   so there's 6px of teal breathing room above and below it. */
.new-sidebar__footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px -10px -14px;  /* negate the footer's 10px sides + 14px bottom */
  padding: 6px 0;
  background: #0f766e;
  border-radius: 0;
}
.new-sidebar__footer-logo-mark {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 38px;
  background-color: #ffffff;
  -webkit-mask-image: url('enlitcocompany.png');
          mask-image: url('enlitcocompany.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Drop the 8px top padding inside each sidebar group so the first
   group title sits flush against the brand container's bottom border. */
.table-page--v2 .new-sidebar__group {
  padding-top: 0 !important;
}

/* Topbar starts at exactly the sidebar's right edge (180px from the
   viewport left). Move horizontal padding off .new-main and onto the
   topbar / table-content directly so the topbar's left edge sits at
   x = sidebar-width. */
.table-page--v2 .new-main {
  padding-left: 0;
  padding-right: 0;
}
.table-page--v2 .new-topbar,
.table-page--v2 .table-content {
  padding-left: 18px;
  padding-right: 18px;
}

/* Topbar pinned to the top of the viewport, starting at the sidebar's
   right edge — applied globally to every page that uses .new-shell so
   the topbar can never be covered by the sidebar. Pages with their
   own grid layout for the topbar (table2, dashboard, etc.) inherit
   this fixed-flex layout instead. */
.new-shell .new-topbar {
  position: fixed;
  top: 0;
  left: var(--new-sidebar-width, 180px);
  right: 0;
  height: var(--new-topbar-height, 52px);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0 18px;
  background: #ffffff;
  border-bottom: 1px solid #e7e5df;
  box-sizing: border-box;
}
.new-shell .new-topbar__left {
  flex: 1 1 auto;
  min-width: 0;
}
.new-shell .new-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Push the page content below the fixed topbar. Adds padding-top
   without disturbing the original side / bottom paddings. */
.new-shell .new-main {
  padding-top: var(--new-topbar-height, 52px);
}

/* Mobile: sidebar collapses (existing rules at line 8744 et al
   handle the translateX hide for v2 pages); the topbar should span
   the full viewport width and main loses its sidebar-width margin. */
@media (max-width: 720px) {
  .new-shell .new-topbar {
    left: 0 !important;
  }
  .new-shell .new-main {
    margin-left: 0 !important;
  }

  /* ---- Installations (Schedule) page mobile card. Columns 1..12:
     1 (check), 2 DATE, 3 TASK, 4 JOB No, 5 STATUS, 6 BRAND, 7 DETAILS,
     8 LOCATION, 9 TIME, 10 STAFF, 11 NOTES, 12 (edit).
     Visible on mobile: 2 (DATE), 3 (TASK), 4 (JOB No), 6 (BRAND),
                        7 (DETAILS), 8 (LOCATION). */
  .installations-page .jobs-table {
    min-width: 0 !important;
  }
  .installations-page .jobs-table th:nth-child(1),
  .installations-page .jobs-table td:nth-child(1),
  .installations-page .jobs-table th:nth-child(5),
  .installations-page .jobs-table td:nth-child(5),
  .installations-page .jobs-table th:nth-child(9),
  .installations-page .jobs-table td:nth-child(9),
  .installations-page .jobs-table th:nth-child(10),
  .installations-page .jobs-table td:nth-child(10),
  .installations-page .jobs-table th:nth-child(11),
  .installations-page .jobs-table td:nth-child(11),
  .installations-page .jobs-table th:nth-child(12),
  .installations-page .jobs-table td:nth-child(12) {
    display: none !important;
  }
  .installations-page .jobs-table th,
  .installations-page .jobs-table td {
    width: auto !important;
  }

  /* Card layout:
       Row 1: JOB No (left)   | DATE (right)
       Row 2: TASK            (spans both, badge-like)
       Row 3: BRAND (left)    | LOCATION (right)
       Row 4: DETAILS         (spans both) */
  .installations-page .jobs-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "jobno date"
      "task  task"
      "brand location"
      "detail detail";
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #ece9e2 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .installations-page .jobs-table tbody tr:nth-child(even) {
    background: #fafaf9 !important;
  }
  .installations-page .jobs-table tbody td {
    display: block !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #10212d !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .installations-page .jobs-table tbody td:nth-child(4) { grid-area: jobno;    font-weight: 700; color: #0f766e !important; }
  .installations-page .jobs-table tbody td:nth-child(2) { grid-area: date;     text-align: right; color: #475467 !important; }
  .installations-page .jobs-table tbody td:nth-child(3) {
    grid-area: task;
    text-align: center;
    background: transparent !important;
    padding: 2px 0 !important;
  }
  /* The inline pill keeps its own per-task color; mobile rule above
     only positions the cell, no extra background needed. */
  .installations-page .jobs-table tbody td:nth-child(6) { grid-area: brand;    font-weight: 600; }
  .installations-page .jobs-table tbody td:nth-child(8) { grid-area: location; text-align: right; color: #475467 !important; }
  .installations-page .jobs-table tbody td:nth-child(7) { grid-area: detail;   color: #475467 !important; white-space: normal; }

  /* ---- Clients: mobile card layout keyed off data-col-key (same robust
     approach as the job-tracker cards in table2.html). Cells are hidden
     by default and only the mapped keys are surfaced, so adding/removing
     columns or toggling column visibility never breaks the layout.
     Layout:
       Row 1: Code (left)    | Client (right, bold)
       Row 2: City (left)    | Country (right)
       Row 3: Contact (left) | Contact no (right) */
  .clients-new-page .jobs-table {
    table-layout: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .clients-new-page .jobs-table thead {
    display: none !important;
  }
  .clients-new-page .jobs-table,
  .clients-new-page .jobs-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .clients-new-page .jobs-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "code   name"
      "city   country"
      "person phone";
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #ece9e2 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .clients-new-page .jobs-table tbody tr:nth-child(even) {
    background: #fafaf9 !important;
  }
  /* Hide every cell by default; only the mapped data-col-key cells show. */
  .clients-new-page .jobs-table tbody td {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .clients-new-page .jobs-table tbody td[data-col-key="clientCode"],
  .clients-new-page .jobs-table tbody td[data-col-key="name"],
  .clients-new-page .jobs-table tbody td[data-col-key="city"],
  .clients-new-page .jobs-table tbody td[data-col-key="country"],
  .clients-new-page .jobs-table tbody td[data-col-key="contactName"],
  .clients-new-page .jobs-table tbody td[data-col-key="contactNo"] {
    display: block !important;
    padding: 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #10212d !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0 !important;
  }
  .clients-new-page .jobs-table tbody td[data-col-key="clientCode"]  { grid-area: code;    color: #475467 !important; font-weight: 600; }
  .clients-new-page .jobs-table tbody td[data-col-key="name"]        { grid-area: name;    text-align: right; font-weight: 700; color: #0f766e !important; }
  .clients-new-page .jobs-table tbody td[data-col-key="city"]        { grid-area: city;    color: #475467 !important; }
  .clients-new-page .jobs-table tbody td[data-col-key="country"]     { grid-area: country; text-align: right; color: #475467 !important; }
  .clients-new-page .jobs-table tbody td[data-col-key="contactName"] { grid-area: person;  color: #475467 !important; }
  .clients-new-page .jobs-table tbody td[data-col-key="contactNo"]   { grid-area: phone;   text-align: right; color: #475467 !important; }
  /* Empty-state row ("No clients match...") spans the full card width. */
  .clients-new-page .jobs-table tbody td.schedule-empty {
    display: block !important;
    grid-column: 1 / -1;
    padding: 16px 0 !important;
    text-align: center;
    color: #6b7280 !important;
  }
  /* Inline children (badges, buttons, the <strong> wrapping client name) keep their own styling. */
  .clients-new-page .jobs-table tbody td > * {
    color: inherit !important;
  }

  /* ---- Quotation mobile card layout lives in mobile.css (linked
     by quotation.html / 2quotation.html). Rules used to be duplicated
     here. */

  /* ---- Invoices: same 2-line card pattern with shifted column
     indices because there's no Status column.
     Columns (1..10): 1 Company, 2 Invoice no, 3 Rev, 4 Date,
     5 Client, 6 Brand, 7 Project name, 8 User, 9 Amount, 10 Download. */
  .invoices-page .jobs-table {
    table-layout: auto !important;
    min-width: 0 !important;
  }
  .invoices-page .jobs-table thead { display: none !important; }
  .invoices-page .jobs-table,
  .invoices-page .jobs-table tbody { display: block !important; width: 100% !important; }
  .invoices-page .jobs-table tr {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 14px !important;
    border: 0;
    border-bottom: 1px solid #ece9e2 !important;
    background: #ffffff !important;
  }
  .invoices-page .jobs-table tr:nth-child(even) { background: #fafaf9 !important; }
  .invoices-page .jobs-table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .invoices-page .jobs-table td:nth-child(3),
  .invoices-page .jobs-table td:nth-child(4),
  .invoices-page .jobs-table td:nth-child(8),
  .invoices-page .jobs-table td:nth-child(10) {
    display: none !important;
  }
  .invoices-page .jobs-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
  .invoices-page .jobs-table td:nth-child(2) { grid-column: 2; grid-row: 1; color: #0f766e; font-weight: 600; }
  .invoices-page .jobs-table td:nth-child(9) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; color: #10213a; }
  .invoices-page .jobs-table td:nth-child(5) { grid-column: 1; grid-row: 2; color: #475467; }
  .invoices-page .jobs-table td:nth-child(6) { grid-column: 2; grid-row: 2; color: #475467; }
  .invoices-page .jobs-table td:nth-child(7) { grid-column: 3; grid-row: 2; color: #475467; text-align: right; }

  /* ---- Quotation topbar order on mobile lives in mobile.css. */
}
/* ==================================================================
   mobile.css — shared mobile overrides for pages that opt in by
   adding `<link rel="stylesheet" href="mobile.css?v=N">` AFTER the
   main `style.css` link.

   Currently linked by:
     - quotation.html

   Loaded AFTER style.css so any selector at the same specificity
   wins by virtue of source order. `!important` is used on
   properties that fight rules in style.css's older mobile block
   (e.g. `.table-page--v2 .jobs-table tbody tr` which uses
   "jobno progress / client detail" grid-template-areas designed
   for table2.html and unsuitable for the quotation cards).

   Coverage: viewports up to 720px wide. Desktop styles in
   style.css are untouched.

   Add new page-specific blocks below, each scoped to its own body
   class (.quotations2-page, .invoices-page, .clients-new-page,
   etc.) so blocks don't bleed across pages.
   ================================================================== */

@media (max-width: 720px) {

  /* -- TOPBAR ORDER ------------------------------------------------
     Desired bar (left to right) on every page in this group:
       1. 3-dot menu button   (per-page id)
       2. Search field        .new-topbar__search
       3. Notification bell   (per-page id)
       4. + Add ...           (per-page id, mobile icon variant)
     The .new-topbar__actions wrapper gets `display: contents` so its
     buttons participate in the flex order alongside the search.
     Applied to quotations2-page (quotation + invoices), installations,
     and clients so the four pages share a consistent mobile header. */
  body.quotations2-page .new-topbar__left,
  body.installations-page .new-topbar__left,
  body.clients-new-page .new-topbar__left {
    display: none !important;
  }
  body.quotations2-page .new-topbar__actions,
  body.installations-page .new-topbar__actions,
  body.clients-new-page .new-topbar__actions {
    display: contents !important;
  }
  /* Hide each page's desktop "+ New X" text button on mobile;
     the mobile icon "+" button replaces it. */
  body.quotations2-page #newQuotationButton,
  body.quotations2-page #newInvoiceButton,
  body.installations-page #newInstallationButton,
  body.clients-new-page #clientsNewAddButton {
    display: none !important;
  }
  body.quotations2-page .new-topbar__search,
  body.installations-page .new-topbar__search,
  body.clients-new-page .new-topbar__search {
    order: 2 !important;
    flex: 1 1 auto !important;
    position: static !important;
    justify-self: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 10px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #ffffff !important;
  }
  /* Order 1: mobile menu button */
  body.quotations2-page #quotations2MobileMenuButton,
  body.installations-page #table2MobileMenuButton,
  body.clients-new-page #clientsNewMobileMenuButton {
    order: 1 !important;
    display: inline-flex !important;
  }
  /* Order 3: notification bell */
  body.quotations2-page #quotations2NotificationButton,
  body.installations-page #installationsHeaderNotificationButton,
  body.clients-new-page #clientsNewNotificationButton {
    order: 3 !important;
  }
  /* Order 4: mobile-only icon "+" button (rightmost) */
  body.quotations2-page #quotations2MobileNewButton,
  body.installations-page #installationsMobileNewButton,
  body.clients-new-page #clientsNewMobileNewButton {
    order: 4 !important;
    display: inline-flex !important;
  }
  /* Uniform 28x28 button size for the three icon buttons */
  body.quotations2-page #quotations2MobileMenuButton,
  body.quotations2-page #quotations2NotificationButton,
  body.quotations2-page #quotations2MobileNewButton,
  body.installations-page #table2MobileMenuButton,
  body.installations-page #installationsHeaderNotificationButton,
  body.installations-page #installationsMobileNewButton,
  body.clients-new-page #clientsNewMobileMenuButton,
  body.clients-new-page #clientsNewNotificationButton,
  body.clients-new-page #clientsNewMobileNewButton {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  body.quotations2-page .new-topbar__icon-button svg,
  body.installations-page .new-topbar__icon-button svg,
  body.clients-new-page .new-topbar__icon-button svg {
    width: 13px;
    height: 13px;
  }


  /* -- TABLE: 2-line card layout per row --------------------------
     Source order of cells (11 in quotation, 10 in invoices):
       1 Company,  2 Quote/Inv No, 3 Rev,    4 Date,
       5 Status*,  6 Client,       7 Brand,  8 Project name,
       9 User,    10 Amount,      11 Download
       (* Status exists only on quotation; invoices shifts 5..10 by -1)

     Visible on mobile (Quotation page):
       Row 1: [80px] Quote No | Client | Brand | Amount (right)
       Row 2: [80px] Company  | Project name (spans cols 2..4)
  ----------------------------------------------------------------- */

  /* Let the inner wrap visualize naturally — no horizontal scrollbar
     on mobile since we're rebuilding rows as cards. Also reset the
     desktop max-height (set at .table-page--v2 .jobs-table-wrap to
     calc(100vh - 320px)); otherwise the wrap stays clipped to that
     height, rows overflow it visually, and the pagination sits at the
     clip line and gets visually overlapped by the rows. */
  body.quotations2-page:not(.invoices-page) .jobs-table-wrap,
  body.invoices-page .jobs-table-wrap,
  body.clients-new-page .jobs-table-wrap {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Defeat .table-page--v2 .table-card { height: 100%; overflow: hidden }
     so the card grows with its rows on mobile. Without this the table-wrap
     overflows visually past the card's clipped box and the pagination
     (next flex child) ends up rendered on top of the lower rows.
     Applied to every page that ships its own mobile card layout.
     (installations.html has inline CSS that already does this.) */
  body.quotations2-page:not(.invoices-page) .table-card,
  body.invoices-page .table-card,
  body.clients-new-page .table-card {
    height: auto !important;
    overflow: visible !important;
  }

  /* Drop the desktop table semantics for the mobile card layout. */
  body.quotations2-page:not(.invoices-page) .jobs-table {
    table-layout: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
  }
  body.quotations2-page:not(.invoices-page) .jobs-table thead {
    display: none !important;
  }
  body.quotations2-page:not(.invoices-page) .jobs-table,
  body.quotations2-page:not(.invoices-page) .jobs-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* The TR is the card. Named grid-areas place the cells precisely. */
  body.quotations2-page:not(.invoices-page) .jobs-table tbody tr {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "qno    client  brand   amount"
      "comp   proj    proj    proj" !important;
    column-gap: 8px;
    row-gap: 2px;
    padding: 10px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ece9e2 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
  }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody tr:nth-child(even) {
    background: #fafaf9 !important;
  }

  /* Reset every TD to a normal block so its text node renders. The
     parent rule in style.css gives each td 0 dimensions via the
     "jobno/progress/client/detail" grid-template-areas; here we clear
     that and use our own named areas. */
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td {
    display: block !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 18px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #10212d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Reset any grid-area inherited from a prior rule. */
    grid-area: auto !important;
  }
  /* Any badge / button / span inside a visible td must stay rendered. */
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td > * {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit;
    max-width: 100%;
  }

  /* Hide cells we don't display: Rev(3), Date(4), Status(5),
     User(9), Download(11). */
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(3),
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(4),
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(5),
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(9),
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(11) {
    display: none !important;
  }

  /* Position the visible 6 cells into their named areas. */
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(2)  { grid-area: qno    !important; color: #0f766e !important; font-weight: 700 !important; }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(1)  { grid-area: comp   !important; color: #475467 !important; font-weight: 600 !important; }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(6)  { grid-area: client !important; }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(7)  { grid-area: brand  !important; }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(10) { grid-area: amount !important; font-weight: 700 !important; text-align: right !important; }
  body.quotations2-page:not(.invoices-page) .jobs-table tbody td:nth-child(8)  { grid-area: proj   !important; color: #475467 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Job editor v2 — modal restructure (Phase 1)
   Lives alongside the existing .job-modal styles; the v2 modifier
   classes (.job-modal--v2, .job-modal__card--v2, etc.) opt into the
   new layout without disrupting other dialogs that still use
   .job-modal (production departments dialog, delivery order dialog).
═══════════════════════════════════════════════════════════════════ */

.job-modal__card--v2 {
  max-width: 1080px;
  width: min(1080px, calc(100vw - 32px));
  padding: 20px 28px 24px;
  display: grid;
  gap: 18px;
}

/* Smaller modal for Add Task / edit task (Phase 3). Narrower than the
   main job editor since it's only a 6-field form. */
.job-task-modal .job-task-modal__card {
  max-width: 560px;
  width: min(560px, calc(100vw - 32px));
}

/* Add Invoice modal (Phase 4). Medium-width to fit the items table. */
.job-invoice-modal .job-invoice-modal__card {
  max-width: 760px;
  width: min(760px, calc(100vw - 32px));
}

.job-invoice-items {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #ece6df;
  border-radius: 10px;
  background: #fbfaf6;
}

.job-invoice-items__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 70px 90px 90px 28px;
  gap: 8px;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7c76;
  padding-bottom: 6px;
  border-bottom: 1px solid #ece6df;
}

.job-invoice-items__body {
  display: grid;
  gap: 6px;
}

.job-invoice-items__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 70px 90px 90px 28px;
  gap: 8px;
  align-items: center;
}

.job-invoice-items__serial {
  text-align: center;
  font-size: 0.82rem;
  color: #6b7c76;
  font-weight: 700;
}

.job-invoice-items__row input {
  padding: 6px 8px;
  border: 1px solid rgba(0, 4, 53, 0.14);
  border-radius: 6px;
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
}

.job-invoice-items__total {
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: #10213a;
}

.job-invoice-items__remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.job-invoice-items__remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.job-invoice-totals {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #ece6df;
  font-size: 0.9rem;
  font-weight: 700;
  color: #10213a;
}

.job-invoice-totals strong {
  font-size: 1.05rem;
}

/* Invoice list row on the job modal — index, no, date, amount, edit pen. */
.job-invoices-list__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #10213a;
}

.job-invoices-list__index {
  color: #6b7c76;
  text-align: right;
}

.job-invoices-list__no {
  font-weight: 700;
  color: #0f766e;
}

.job-invoices-list__date {
  color: #475467;
}

.job-invoices-list__amount {
  text-align: right;
  font-weight: 700;
}

.job-invoices-list__edit {
  border: 0;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
  justify-self: end;
}

.job-invoices-list__edit:hover {
  background: rgba(15, 118, 110, 0.08);
}

/* Legacy invoice marker — for jobs whose only invoice info is the
   pre-v2 `invoice_no` / `invoice_date` / `amount` columns. Read-only
   in this list; no pen icon, just a tag. */
.job-invoices-list__legacy-tag {
  justify-self: end;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: help;
}

@media (max-width: 720px) {
  .job-invoice-items__head,
  .job-invoice-items__row {
    grid-template-columns: 28px minmax(0, 1fr) 60px 28px;
  }
  .job-invoice-items__head span:nth-child(4),
  .job-invoice-items__head span:nth-child(5),
  .job-invoice-items__row .job-invoice-items__rate,
  .job-invoice-items__row .job-invoice-items__total {
    grid-column: 2;
  }
}

/* Sticky header so Save + close stay reachable while scrolling. */
.job-modal__header--v2 {
  position: sticky;
  top: -20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 12px;
  margin: -20px -28px 0;
  padding-left: 28px;
  padding-right: 20px;
  background: #ffffff;
  border-bottom: 1px solid #ece6df;
}

.job-modal__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.job-modal__heading-title {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #10213a;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  line-height: 1.1;
}

.job-modal__heading-status {
  color: #0f766e;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Render "- {progress}" only when the status label has content. */
.job-modal__heading-status:not(:empty)::before {
  content: "- ";
  color: #10213a;
  margin-right: 4px;
}

.job-modal__save {
  /* Compact primary CTA — sized to match the topbar "+ New" buttons
     (.new-topbar__button) so it doesn't dominate the header. */
  white-space: nowrap;
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 8px;
}

.job-modal__actions--v2 {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

/* Full-width top section: Start Date row, Client+Brand, Project Name,
   Description. Sits above the split, taking the entire modal width. */
.job-form-v2__top {
  display: grid;
  gap: 12px;
}

/* Two-column split below the top section.
   Left  = smaller paired rows (Support Staff/Designer, Add Task/Invoice,
           LPO/Quotation) + Invoice list block + Production Status.
   Right = chronological timeline matching the left column's height. */
.job-form-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 24px;
  align-items: start;
}

.job-form-v2__left,
.job-form-v2__right {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.job-form-v2__row {
  display: grid;
  gap: 12px;
}

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

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

.job-form-v2__quick-actions .table-action-button {
  width: 100%;
  justify-content: center;
}

/* Timeline container — Phase 2 fills it with event rows. */
.job-timeline {
  padding: 14px 16px;
  min-height: 240px;
  display: grid;
  align-content: start;
  gap: 33px;
}

.job-timeline__empty {
  margin: 0;
  color: #61706a;
  font-size: 0.85rem;
  text-align: center;
}

/* Each row: marker | body, with a vertical guide line connecting markers.
   `align-items: center` so the numbered circle sits vertically centered
   against the multi-line body (task chip + description text). */
.job-timeline__event {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  position: relative;
}

.job-timeline__event + .job-timeline__event::before {
  /* Faint connecting line between consecutive events. */
  content: "";
  position: absolute;
  left: 13px;
  top: -26px;
  width: 2px;
  height: 26px;
  background: #d8e4df;
}

.job-timeline__marker {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.job-timeline__marker--done {
  background: #0f766e;
  color: #ffffff;
}

.job-timeline__marker--upcoming {
  background: #ffffff;
  color: #0F766E;
  border: 2px solid #0F766E;
}

.job-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.job-timeline__chip {
  align-self: flex-start;
}

.job-timeline__text {
  color: #10213a;
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-word;
}

.job-timeline__event.is-completed .job-timeline__text {
  color: #2d3a47;
}

/* Auto-growing textareas (Project Name, Description, Notes). Modern
   browsers respect `field-sizing: content`; older browsers fall back
   to the textarea's `rows` attribute. */
textarea.auto-grow {
  field-sizing: content;
  min-height: 38px;
  resize: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Invoice list block — read-only summary of invoices linked to this
   job. Phase 4 fills `.job-invoices-list` from server data and adds
   per-row edit pen icons. */
.job-invoices-block {
  display: grid;
  gap: 8px;
  padding: 12px 14px;

}

.job-invoices-block__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7c76;
}

.job-invoices-list {
  display: grid;
  gap: 6px;
}

.job-invoices-list__empty {
  margin: 0;
  color: #8a9690;
  font-size: 0.85rem;
}

.job-invoices-list__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #10213a;
}

.job-invoices-list__edit {
  border: 0;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
}

.job-invoices-list__edit:hover {
  background: rgba(15, 118, 110, 0.08);
}

/* Production Status v2: two checkboxes inline. */
.job-production-status--v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 12px 14px;

}

.job-production-status--v2 legend {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7c76;
}

.job-production-status--v2 label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #10213a;
  cursor: pointer;
}

/* Each checkbox + inline date input lives on one row inside the v2
   Production Status block. The date input is hidden via [hidden] when
   its matching checkbox is unchecked. */
.job-production-status__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.job-production-status__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.job-production-status__date {
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1px solid #cfd8d4;
  border-radius: 8px;
  background: #ffffff;
  color: #18322d;
}

.job-production-status__date[hidden] {
  display: none;
}

/* Mobile: single column, timeline stacks below the form column. */
@media (max-width: 720px) {
  .job-modal__card--v2 {
    padding: 14px 16px 20px;
    width: 100%;
  }
  .job-modal__header--v2 {
    flex-wrap: wrap;
    top: -14px;
    margin: -14px -16px 0;
    padding-left: 16px;
    padding-right: 12px;
  }
  .job-modal__heading-title {
    font-size: 1.4rem;
  }
  .job-form-v2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .job-form-v2__row--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .job-form-v2__row--two {
    grid-template-columns: 1fr;
  }
  .job-timeline {
    min-height: 120px;
  }
}

/* Progressive jobs load indicator. Sits bottom-right while the
   second-stage background fetch is running so the user knows the
   table will keep growing without them having to hit refresh. */
.jobs-background-load-pill {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9000;
  padding: 8px 14px;
  background: #0f766e;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  animation: jobs-background-load-pulse 1.4s ease-in-out infinite;
}

@keyframes jobs-background-load-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  .jobs-background-load-pill {
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 0.72rem;
  }
}

/* ============================================================
   Shared production pages (productions.html + productions2.html)
   Both run productions2.js. Standard topbar; productions2.html
   adds the universal sidebar, productions.html does not. A
   full-width bottom tab bar (All Jobs + 11 departments) drives
   the department filter on both.
   ============================================================ */

/* productions.html has NO sidebar — cancel the table2 left offsets
   for BOTH the fixed topbar and the main column so the header and
   content span the full viewport width. Higher specificity than
   `.new-shell .new-topbar` / `.table-page--v2 .new-main`. */
.productions-shared-page--tabs.table-page--v2 .new-main {
  margin-left: 0;
}

.productions-shared-page--tabs .new-shell .new-topbar {
  left: 0;
}

/* The shared content area must scroll internally: the table2 layout
   pins .table-content to viewport height with overflow:hidden (built
   for one big table), which clips a multi-row card grid. Override to
   scroll, and pad the bottom so the last row clears the fixed tab
   bar. Specificity (0,2,0) matches `.table-page--v2 .table-content`
   and wins on source order (appended at EOF). */
.table-page--v2 .productions-shared-content {
  height: calc(100vh - var(--new-topbar-height, 52px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 96px;
}

.productions-shared-status {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fffdf9;
  color: #5b6866;
  box-shadow: 0 16px 38px rgba(8, 12, 34, 0.06);
  margin-bottom: 18px;
}

.productions-shared-status[hidden] {
  display: none;
}

.productions-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

/* The class display rules above out-specify the UA [hidden] reset, so
   the grid/kanban toggle (jobsGrid.hidden / kanbanBoard.hidden) needs
   explicit guards or both would render at once. */
.productions-job-grid[hidden],
.productions-shared-page .productions2-kanban[hidden] {
  display: none !important;
}

/* The shared tile is capped at 300px in the existing
   .productions-job-tile rule; keep the grid cells from stretching
   it oddly by aligning tiles to the start of each cell. */
.productions-job-grid .productions-job-tile {
  justify-self: start;
}

/* Bottom tab bar — fixed, full width, equally divided. */
.productions-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  /* No explicit width: left+right define it. With width:100% the
     sidebar-offset variant (left:180px) would be 100vw wide and
     overflow the right edge, clipping the last tab off-screen. */
  border-top: 1px solid rgba(15, 107, 91, 0.14);
  background: rgba(255, 253, 249, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px rgba(8, 12, 34, 0.06);
  /* NOT a scroll container — every tab must stay visible. Children
     shrink (flex 1, min-width:0) to share the bar equally. */
  flex-wrap: nowrap;
  overflow: hidden;
}

/* With the universal sidebar present, the bar starts after it so
   it stays "full width after the sidebar". */
.productions-shared-page--sidebar .productions-tabbar {
  left: var(--new-sidebar-width, 180px);
}

.productions-tabbar__tab {
  /* min-width:0 so all 11 tabs (All Jobs + 10 departments) shrink to
     share the bar equally and stay visible without horizontal
     scroll, even on productions2.html where the bar starts after
     the 180px sidebar. */
  flex: 1 1 0;
  min-width: 0;
  border: none;
  border-right: 1px solid rgba(15, 107, 91, 0.1);
  background: transparent;
  color: #18322d;
  padding: 13px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}

.productions-tabbar__tab:last-child {
  border-right: none;
}

.productions-tabbar__tab:hover {
  background: rgba(15, 107, 91, 0.08);
}

.productions-tabbar__tab.is-active {
  background: #0f6b5b;
  color: #ffffff;
}

@media (max-width: 900px) {
  /* On mobile the sidebar is off-canvas, so the bar spans full
     width again. */
  .productions-shared-page--sidebar .productions-tabbar {
    left: 0;
  }

  /* Narrow screens: stop squeezing 11 tabs into a thin strip.
     Each tab keeps a readable min-width and the bar scrolls
     horizontally by swipe. The active tab is auto-scrolled into
     view by renderView() in productions2.js. */
  .productions-tabbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .productions-tabbar__tab {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 14px 14px;
    font-size: 13px;
    scroll-snap-align: center;
    text-overflow: clip;
  }

  /* Slim, unobtrusive scrollbar (still swipeable on touch). */
  .productions-tabbar::-webkit-scrollbar {
    height: 4px;
  }
  .productions-tabbar::-webkit-scrollbar-thumb {
    background: rgba(15, 107, 91, 0.3);
    border-radius: 999px;
  }
}

/* A fixed bar has display:flex which beats the UA [hidden] reset —
   guard it so the To-Do view can hide both bottom bars. */
.productions-tabbar[hidden] {
  display: none !important;
}

/* productions.html only: two stacked bottom bars. Pin a fixed height
   on both so the department bar can sit flush on top of the progress
   bar with no cream seam between them. productions2.html keeps a
   single bar (no progress bar / no `--tabs` class). */
.productions-shared-page--tabs .productions-tabbar {
  height: var(--prod-tabbar-h, 46px);
}

.productions-shared-page--tabs .productions-tabbar .productions-tabbar__tab {
  display: flex;
  align-items: center;
  justify-content: center;
}

.productions-shared-page--tabs #productions2TabBar {
  bottom: var(--prod-tabbar-h, 46px);
  z-index: 31;
}

/* Second bar — progress / status filter. Distinct (dark) background
   so it reads as a separate control from the department bar. */
.productions-tabbar--progress {
  bottom: 0;
  z-index: 30;
  background: #143d36;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.productions-tabbar--progress .productions-tabbar__tab {
  color: #dbeae5;
  border-right-color: rgba(255, 255, 255, 0.12);
}

.productions-tabbar--progress .productions-tabbar__tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.productions-tabbar--progress .productions-tabbar__tab.is-active {
  background: #f2994a;
  color: #1a1208;
}

/* Two stacked bars need more bottom clearance than the single-bar
   layout. Out-specifies `.table-page--v2 .productions-shared-content`
   (same specificity, later in source). */
.productions-shared-page--tabs .productions-shared-content {
  padding-bottom: 150px;
}

/* ============================================================
   Inline login modal (productions.html / productions2.html)
   Shown by productions2.js when the session is invalid, so the
   installed PWA never leaves its own window.
   ============================================================ */
.productions-login {
  border: none;
  padding: 0;
  margin: auto;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}

.productions-login::backdrop {
  background: rgba(14, 28, 24, 0.66);
  backdrop-filter: blur(4px);
}

.productions-login__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: min(92vw, 380px);
  padding: 32px 28px;
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: 0 30px 70px rgba(8, 12, 34, 0.28);
  text-align: center;
}

.productions-login__logo {
  width: auto;
  max-width: 160px;
  max-height: 44px;
  object-fit: contain;
  align-self: center;
  margin-bottom: 4px;
}

.productions-login__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #10213a;
}

.productions-login__subtitle {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: #5b6866;
}

.productions-login__input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(15, 107, 91, 0.22);
  border-radius: 12px;
  background: #ffffff;
  color: #18322d;
  font: inherit;
  box-sizing: border-box;
}

.productions-login__input:focus {
  outline: none;
  border-color: rgba(15, 107, 91, 0.55);
  box-shadow: 0 0 0 3px rgba(15, 107, 91, 0.12);
}

.productions-login__button {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 12px;
  background: #0f6b5b;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.productions-login__button:hover {
  background: #0c5a4c;
}

.productions-login__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.productions-login__status {
  margin: 2px 0 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: #5b6866;
}

.productions-login__status.is-error {
  color: #c0392b;
  font-weight: 700;
}

/* Client-side page-access guard ("You shall not pass") screen. */
.page-guard-body {
  margin: 0;
  background: #f5b400;
}

.page-guard-block {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f5b400;
  z-index: 2147483647;
}

.page-guard-block__card {
  text-align: center;
  max-width: 460px;
  width: 100%;
}

.page-guard-block__sign {
  width: min(520px, 88vw);
  height: auto;
  display: block;
  margin: 0 auto 28px;
  border-radius: 18px;
}

.page-guard-block__card h1 {
  margin: 0 0 8px;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1.4rem;
  color: #1c1c17;
}

.page-guard-block__card p {
  margin: 0 0 20px;
  font-family: Manrope, Arial, sans-serif;
  color: #4a4636;
}

.page-guard-block__button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #111;
  color: #f5b400;
  font-family: Manrope, Arial, sans-serif;
  font-weight: 800;
  text-decoration: none;
}

.page-guard-block__button:hover {
  background: #000;
}

/* ============================================================
   Master Settings — user editor modal
   Replaces the old fixed side detail pane. Reuses the existing
   .master-settings-* field/card classes for the inner content.
   ============================================================ */
.master-settings-user-modal {
  border: none;
  padding: 0;
  margin: auto;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}

.master-settings-user-modal::backdrop {
  background: rgba(14, 22, 34, 0.55);
  backdrop-filter: blur(3px);
}

.master-settings-user-modal__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(94vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 26px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(8, 12, 34, 0.3);
}

.master-settings-user-modal__card .master-settings-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.master-settings-user-modal__close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7282;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}

.master-settings-user-modal__close:hover {
  background: #f1efe9;
  color: #10213a;
}

.master-settings-user-modal__card .master-settings-card {
  margin: 0;
}

.master-settings-user-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 560px) {
  .master-settings-user-modal__card {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* TEMPORARY danger button (Invoices "Delete All"). Red so it can't
   be mistaken for a normal action. */
.new-topbar__button--danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #ffffff;
}

.new-topbar__button--danger:hover {
  background: #a93226;
  border-color: #a93226;
}

/* ============================================================
   Design page — per-designer cards above the table (Phase 5)
   ============================================================ */
.design-overview-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

/* Narrow the hero card and stack "Design" / "Schedule" so the
   designer cards get the rest of the width. */
.design-page .design-overview-shell .overview-shell__left {
  flex: 0 0 auto;
}

.design-page .design-overview-shell .overview-card--hero {
  width: 210px;
}

.design-page .design-overview-shell .overview-card--hero h1 {
  line-height: 1.04;
}

.design-page .design-overview-shell .overview-card--hero h1 span {
  display: block;
}

.design-designers {
  flex: 1 1 300px;
  min-width: 0;
}

.design-designers__title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7c76;
}

.design-designer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* Responsive: only on phones (≤720px, the table2 mobile breakpoint)
   collapse the design table to the essentials (Design ID, Job No,
   Client, Project Name, Status). Laptops/desktops keep the full
   table so the layout isn't wrongly reduced on wider screens. */
@media (max-width: 720px) {
  .design-table {
    min-width: 0;
  }
  .design-table th:not([data-col-key="designId"]):not([data-col-key="jobNo"]):not([data-col-key="client"]):not([data-col-key="projectName"]):not([data-col-key="status"]),
  .design-table td:not([data-col-key="designId"]):not([data-col-key="jobNo"]):not([data-col-key="client"]):not([data-col-key="projectName"]):not([data-col-key="status"]) {
    display: none;
  }
  .design-page .design-overview-shell .overview-card--hero {
    width: 100%;
  }
}

.design-designer-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ece6df;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 12, 34, 0.05);
}

.design-designer-card__name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f766e;
}

.design-designer-card__line {
  font-size: 0.86rem;
  color: #475467;
}

.design-designer-card__line strong {
  color: #10213a;
  font-weight: 700;
}

.design-designer-card__pending {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b9770e;
}

/* ============================================================
   New-notification toast pop-ups (header.js, Phase 6)
   Small box, bottom-right; newer toast sits on top with each older
   one offset 6px lower and behind it.
   ============================================================ */
.header-toast-stack {
  position: fixed;
  right: 18px;
  /* Top-right, just below the fixed header. */
  top: calc(var(--new-topbar-height, 56px) + 14px);
  z-index: 4000;
  pointer-events: none;
  /* Full vertical stack: each toast sits completely below the
     previous one (no overlap). Removing one makes the rest move up. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-toast {
  position: relative;
  width: 210px;
  min-height: 50px;
  padding: 8px 24px 8px 12px;
  border-radius: 10px;
  background: #10213a;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(8, 12, 34, 0.28);
  font-size: 0.8rem;
  line-height: 1.25;
  cursor: pointer;
  pointer-events: auto;
}

.header-toast__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.header-toast__close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.header-toast__close:hover {
  color: #ffffff;
}

.design-designers__empty {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed #d8d2c8;
  border-radius: 14px;
  color: #8a9690;
  font-size: 0.88rem;
}

/* ============================================================
   Receipts (RV) page
   ============================================================ */
.receipts-table-wrap { overflow-x: auto; }
.receipts-row { cursor: pointer; }
.receipts-empty {
  padding: 24px 18px;
  text-align: center;
  color: #8a9690;
}
.receipts-modal__card { max-width: 620px; width: 100%; }
.receipts-invoices { margin: 14px 0; }
.receipts-invoices__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.receipts-invoices__hint { font-weight: 500; font-size: 0.8rem; color: #8a9690; }
.receipts-invoices__list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(20, 32, 29, 0.12);
  border-radius: 12px;
}
.receipts-invoices__empty { padding: 16px; color: #8a9690; text-align: center; }
.receipts-invoice-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(20, 32, 29, 0.08);
  cursor: pointer;
  font-size: 0.9rem;
}
.receipts-invoice-row:last-child { border-bottom: none; }
.receipts-invoice-row.is-selected { background: rgba(15, 107, 91, 0.08); }
.receipts-invoice-row--static { grid-template-columns: 1fr auto; }
.receipts-invoice-row__no { font-weight: 600; }
.receipts-invoice-row__date { color: #8a9690; }
.receipts-invoice-row__amount { text-align: right; font-variant-numeric: tabular-nums; }
.receipts-totals {
  margin: 14px 0;
  border-top: 1px solid rgba(20, 32, 29, 0.12);
  padding-top: 12px;
}
.receipts-totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.95rem;
}
.receipts-totals__row--net {
  font-size: 1.05rem;
  font-weight: 800;
  border-top: 1px dashed rgba(20, 32, 29, 0.2);
  margin-top: 6px;
  padding-top: 10px;
}
.receipts-totals__row--discount input {
  width: 140px;
  text-align: right;
  padding: 8px 10px;
  border: 1px solid rgba(20, 32, 29, 0.18);
  border-radius: 8px;
}
.receipts-detail-notes {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(20, 32, 29, 0.04);
  border-radius: 8px;
  font-size: 0.9rem;
}

/* ===== To-Do conversations: mail icon, request cards, chat panel ===== */
.header-messages-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #eaf4ef;
  cursor: pointer;
}
.header-messages-button__icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: grayscale(1);
}
.header-messages-button__badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d7282f;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
.new-topbar__badge.header-messages-button__badge { display: inline-block; }

/* Request To-Do cards */
.note-tile--request {
  border-left: 4px solid #d7282f;
}
.note-tile__kind {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fdecec;
  color: #c0242a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.note-tile__heading {
  margin: 8px 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1f2a37;
}
.note-tile__static {
  margin: 4px 0;
  font-size: 0.88rem;
  color: #4a5568;
  white-space: pre-wrap;
  word-break: break-word;
}
.note-tile__job {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d6f42;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.note-tile__job:hover { color: #14532d; }

.note-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.note-tile__chat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #eef6f1;
  color: #1d6f42;
  cursor: pointer;
}
.note-tile__chat svg { width: 17px; height: 17px; }
.note-tile__chat:hover { background: #dcefe4; }
.note-tile__chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d7282f;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Chat panel (WhatsApp-style, right side, full height, 400px) */
.todo-chat {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #efeae2;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.todo-chat.is-open { transform: translateX(0); }
.todo-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: #0f766e;
  color: #fff;
}
.todo-chat__heading { display: flex; flex-direction: column; min-width: 0; }
.todo-chat__heading strong {
  font-size: 0.96rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-chat__heading small { font-size: 0.74rem; opacity: 0.85; }
.todo-chat__close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.todo-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-chat__empty {
  margin: auto;
  color: #6b7280;
  font-size: 0.86rem;
}
.todo-chat__msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  padding: 7px 10px 5px;
  border-radius: 8px;
  background: #fff;
  align-self: flex-start;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.todo-chat__msg.is-mine {
  align-self: flex-end;
  background: #e7f7f2;
}
.todo-chat__sender {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1d6f42;
  margin-bottom: 2px;
}
.todo-chat__bubble {
  font-size: 0.88rem;
  color: #1f2a37;
  white-space: pre-wrap;
  word-break: break-word;
}
.todo-chat__msg time {
  align-self: flex-end;
  margin-top: 2px;
  font-size: 0.62rem;
  color: #8a949e;
}
.todo-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: #f0f0f0;
}
.todo-chat__composer textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid #d6dbdf;
  border-radius: 20px;
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}
.todo-chat__composer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  cursor: pointer;
  flex: none;
}
.todo-chat__composer button svg { width: 18px; height: 18px; }
.todo-chat__composer button:hover { background: #1db1a6; }

@media (max-width: 480px) {
  .todo-chat { width: 100vw; }
}

/* ===== To-Do mail icon / badges refinements ===== */
/* Message icon: no round/highlighted background — render it like the
   plain notification icon button (desktop and mobile). */
.header-messages-button {
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
}
.header-messages-button:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: inherit !important;
}

/* 2. Smaller count badges for notifications and chats. */
.header-notification-button__badge,
.header-messages-button__badge,
.new-topbar__badge {
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  font-size: 8px;
  line-height: 13px;
}
.note-tile__chat-badge {
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  font-size: 8px;
  line-height: 13px;
}

/* Requester name on request cards */
.note-tile__requester {
  display: block;
  margin: 2px 0 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #6b7280;
}

/* Conversations popover items */
.header-messages-popover .main-notification-item__link strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: #14352b;
}
.header-messages-popover .main-notification-item__link span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #4a5568;
  font-size: 0.8rem;
}
.header-messages-popover .main-notification-item.is-unread {
  font-weight: 600;
}
.header-messages-unread {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d7282f;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* ===== To-Do round 3 tweaks ===== */
/* 1. Completed cards: strike through ALL card types (incl. request
   cards) and disable the job link + conversation icon. */
.note-tile.is-completed .note-tile__title,
.note-tile.is-completed .note-tile__body,
.note-tile.is-completed .note-tile__heading,
.note-tile.is-completed .note-tile__static,
.note-tile.is-completed .note-tile__requester {
  text-decoration: line-through;
}
.note-tile.is-completed .note-tile__job {
  pointer-events: none;
  opacity: 0.45;
  text-decoration: line-through;
}
.note-tile.is-completed .note-tile__chat {
  pointer-events: none;
  opacity: 0.4;
}

/* 2. Conversation icon: double size, pinned to the card's bottom-right. */
.note-tile__chat {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.note-tile__chat svg {
  width: 30px;
  height: 30px;
}
.note-tile__chat-badge {
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  font-size: 9px;
  line-height: 18px;
}
/* keep the timestamp clear of the larger button */
.note-tile__footer {
  justify-content: flex-start;
  padding-right: 76px;
  min-height: 56px;
}

/* 3. Chat header subtitle = participant names (allow wrap) */
.todo-chat__heading small {
  white-space: normal;
  line-height: 1.25;
  max-height: 2.6em;
  overflow: hidden;
}

/* 4. Mobile: panel hugs the visible viewport; composer above keyboard.
   JS sets explicit height/top from visualViewport; these are the
   no-JS fallbacks plus the flexbox rules that keep the composer
   pinned and the message list independently scrollable. */
.todo-chat {
  height: 100vh;
  height: 100dvh;
}
.todo-chat__messages {
  min-height: 0;
}
.todo-chat__composer {
  flex: none;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
@media (max-width: 600px) {
  .todo-chat {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ============================================================
   Universal header (header-loader.js) — mobile layout/order.
   Scoped to .new-topbar--universal so only migrated pages are
   affected. Desktop is left untouched (it's already correct).
   Mobile order: 3-dot · search · message · notification · +
   ============================================================ */
@media (max-width: 720px) {
  .new-topbar--universal {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
  }

  /* Brand + breadcrumb are hidden on mobile (space for the row). */
  .new-topbar--universal .new-topbar__brand,
  .new-topbar--universal .new-topbar__left {
    display: none !important;
  }

  /* 1) 3-dot sidebar button */
  .new-topbar--universal .new-topbar__mobile-menu {
    order: 1;
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  /* 2) search bar (takes the remaining width) */
  .new-topbar--universal .new-topbar__search {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 3) actions: message · notification · + (DOM order already) */
  .new-topbar--universal .new-topbar__actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  /* Desktop text "+ New" button hidden on mobile; the icon-only
     mobile add button (.table2-mobile-only) shows instead. */
  .new-topbar--universal .new-topbar__actions .new-topbar__button {
    display: none !important;
  }
}

/* ============================================================
   Universal header override for pages that ALSO carry a legacy
   body class (quotations2-page / installations-page /
   clients-new-page). The old per-page mobile block applies
   `display: contents` to `.new-topbar__actions` and only orders
   notification/+ — leaving the message button at order:0 (it
   renders FIRST). Re-assert the universal flex actions wrapper
   with higher specificity + !important so message · notification
   · + stay in DOM order inside the wrapper.
   ============================================================ */
@media (max-width: 720px) {
  body.table-page .new-topbar--universal .new-topbar__actions {
    display: flex !important;
    order: 3 !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  body.table-page .new-topbar--universal .new-topbar__left,
  body.table-page .new-topbar--universal .new-topbar__brand {
    display: none !important;
  }
  body.table-page .new-topbar--universal .new-topbar__search {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  body.table-page .new-topbar--universal .new-topbar__mobile-menu {
    order: 1 !important;
    display: inline-flex !important;
  }
}

/* ===== To-Do round 4: per-type colors + chat panel makes room ===== */
/* Close requests = red, Invoice requests = amber/orange */
.note-tile--close {
  border-left: 4px solid #d7282f;
}
.note-tile--close .note-tile__kind {
  background: #fdecec;
  color: #c0242a;
}
.note-tile--invoice {
  border-left: 4px solid #c2410c;
}
.note-tile--invoice .note-tile__kind {
  background: #fff1e6;
  color: #c2410c;
}

/* When the conversation window is open, shrink the notes area so the
   400px panel never overlaps the cards (desktop/tablet only — on
   phones the panel is full-screen). */
.notes-layout {
  transition: padding-right 0.22s ease;
}
@media (min-width: 601px) {
  body.todo-chat-open .notes-layout {
    padding-right: 424px;
  }
}

/* Conversation cards: whole card is clickable to open the chat */
.note-tile--clickable { cursor: pointer; }
.note-tile--clickable:hover {
  box-shadow: 0 22px 54px rgba(28, 28, 23, 0.16);
}
.note-tile--clickable.is-completed:hover {
  box-shadow: 0 20px 50px rgba(28, 28, 23, 0.08);
}

/* ── Inventory page ─────────────────────────────────────────────────── */
.inventory-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.inventory-table th,
.inventory-table td {
  vertical-align: middle;
}

.inventory-table tr[data-item-id] {
  cursor: pointer;
}

.inventory-table tr[data-item-id]:hover td {
  background: rgba(37, 99, 235, 0.04);
}

.inventory-table__empty {
  padding: 36px 18px;
  text-align: center;
  color: #71808d;
}

.inventory-qty {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 600;
  font-size: 12px;
}

.inventory-qty--empty {
  background: #fef2f2;
  color: #b91c1c;
}

.inventory-thumb {
  display: inline-block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f4f6;
}

.inventory-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-weight: 700;
}

.inventory-photo-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
}

.inventory-photo-block__label {
  font-size: 12px;
  font-weight: 600;
  color: #5d6673;
  margin: 0;
}

.inventory-photo-block__preview {
  width: 207px;
  height: 368px;
  border: 1px dashed rgba(0, 4, 53, 0.18);
  border-radius: 10px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inventory-photo-block__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inventory-photo-block__placeholder {
  color: #94a3b8;
  font-size: 12px;
}

.inventory-photo-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.inventory-photo-block__hint {
  margin: 0;
  font-size: 11px;
  color: #71808d;
}

.inventory-activity-item {
  border-left: 3px solid #cbd5e1;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #ffffff;
  border-radius: 6px;
}

.inventory-activity-item--in { border-left-color: #16a34a; }
.inventory-activity-item--out { border-left-color: #dc2626; }
.inventory-activity-item--transfer { border-left-color: #2563eb; }

.inventory-activity-item .job-activity-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.inventory-activity-item .job-activity-item__meta {
  font-size: 11px;
  color: #71808d;
  margin-top: 2px;
}

.inventory-activity-item .job-activity-item__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: #1f2937;
}

.settings-add-form--bin .role-select {
  min-width: 160px;
}

.settings-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 4, 53, 0.06);
}

.settings-list-item__name {
  font-weight: 600;
  color: #1f2937;
}

.settings-list-item__meta {
  margin-left: auto;
  color: #71808d;
  font-size: 12px;
}

.settings-list-item .settings-delete-button {
  margin-left: 8px;
}

.settings-empty {
  padding: 16px;
  color: #94a3b8;
  font-size: 13px;
}

.inventory-movement-availability {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 8px;
  font-size: 12px;
  color: #155e75;
}

.inventory-movement-availability__sep {
  margin: 0 8px;
  color: #94a3b8;
}

/* Photo crop dialog (414 x 736 → preview canvas is 276 x 491). */
.inventory-photo-crop-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: min(92vw, 360px);
  width: min(92vw, 360px);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.28);
}

.inventory-photo-crop-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

.inventory-photo-crop-dialog__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  margin: 0;
}

.inventory-photo-crop-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-photo-crop-dialog__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #71808d;
}

.inventory-photo-crop-dialog__header h3 {
  margin: 4px 0 0;
  font-size: 16px;
  color: #1f2937;
}

.inventory-photo-crop-dialog__close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #71808d;
  cursor: pointer;
}

.inventory-photo-crop-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.inventory-photo-crop-dialog__preview-shell {
  width: 276px;
  height: 491px;
  border-radius: 10px;
  background: #0f172a;
  overflow: hidden;
  touch-action: none;
}

.inventory-photo-crop-dialog__canvas {
  display: block;
  width: 276px;
  height: 491px;
  cursor: grab;
}

.inventory-photo-crop-dialog__canvas:active {
  cursor: grabbing;
}

.inventory-photo-crop-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.inventory-photo-crop-dialog__field span {
  font-size: 11px;
  font-weight: 600;
  color: #5d6673;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inventory-photo-crop-dialog__field input[type="range"] {
  width: 100%;
}

.inventory-photo-crop-dialog__hint {
  margin: 0;
  font-size: 11px;
  color: #71808d;
  text-align: center;
}

.inventory-photo-crop-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── Movement modal v3: stepper, photo slots, transfer row, pills ── */
.inventory-movement-itemqty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px;
  align-items: end;
  margin-top: 4px;
}

.inventory-movement-itemqty__qty {
  min-width: 0;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 4, 53, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  height: 40px;
}

.qty-stepper:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.qty-stepper button {
  width: 38px;
  height: 100%;
  background: #f8fafc;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #1f2937;
}

.qty-stepper button:hover { background: #eef2f7; }

.qty-stepper input[type="number"] {
  width: 80px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}

.qty-stepper input[type=number]::-webkit-outer-spin-button,
.qty-stepper input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inventory-photos-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inventory-photos-block__label {
  font-size: 12px;
  font-weight: 600;
  color: #5d6673;
  display: flex;
  align-items: center;
  gap: 10px;
}

.inventory-photos-block__hint {
  font-weight: 400;
  font-size: 11px;
  color: #94a3b8;
}

.inventory-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.inventory-photos-slot {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: #f5f7fa;
  border: 1px dashed rgba(0, 4, 53, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5d6673;
  transition: border-color 120ms ease, background 120ms ease;
}

.inventory-photos-slot--empty:hover {
  border-color: #2563eb;
  background: #f0f4ff;
  color: #1d4ed8;
}

.inventory-photos-slot--filled {
  border-style: solid;
  cursor: default;
  background: #0f172a;
}

.inventory-photos-slot--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inventory-photos-slot__plus {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.inventory-photos-slot__caption {
  font-size: 11px;
  margin-top: 4px;
}

.inventory-photos-slot__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.inventory-photos-slot__remove:hover { background: #dc2626; }

/* Transactions table styling (per-item + cross-item shared) */
.inventory-item-transactions {
  margin: 16px 0 4px;
}

.inventory-item-transactions__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.inventory-item-transactions__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.inventory-item-transactions__count {
  font-size: 11px;
  color: #71808d;
}

.inventory-item-transactions__wrap {
  overflow-x: auto;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 10px;
}

.inventory-entries-wrap {
  overflow: auto;
  border: 1px solid rgba(0, 4, 53, 0.08);
  border-radius: 10px;
  margin: 8px 0 4px;
}

.inventory-entries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: #fff;
}

.inventory-entries-table th,
.inventory-entries-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #f0f3f6;
  vertical-align: middle;
}

.inventory-entries-table th {
  background: #f7f9fb;
  font-size: 11px;
  font-weight: 600;
  color: #5d6673;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.inventory-entries-table tr:hover td { background: rgba(37, 99, 235, 0.04); }

.inventory-entries-table .cell-right { text-align: right; }

.tx-pill {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: middle;
}

.tx-pill--in { background: #d1fae5; box-shadow: inset 0 0 0 1.5px #047857; }
.tx-pill--out { background: #fee2e2; box-shadow: inset 0 0 0 1.5px #b91c1c; }
.tx-pill--transfer { background: #dbeafe; box-shadow: inset 0 0 0 1.5px #1d4ed8; }

.tx-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.tx-pill-dot--in { background: #047857; }
.tx-pill-dot--out { background: #b91c1c; }
.tx-pill-dot--transfer { background: #1d4ed8; }

.tx-qty {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}

.tx-qty--in { background: #ecfdf5; color: #047857; }
.tx-qty--out { background: #fef2f2; color: #b91c1c; }
.tx-qty--transfer { background: #eff6ff; color: #1d4ed8; }

.tx-sku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

.tx-item-title { font-weight: 600; color: #1f2937; }
.tx-item-desc { font-size: 11.5px; color: #6b7280; margin-top: 2px; }
.tx-sub { font-size: 11.5px; color: #6b7280; }
.tx-driver { font-size: 11px; color: #71808d; margin-top: 2px; }
.tx-empty { color: #cbd5e1; }
.tx-remarks { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tx-thumb-row { display: flex; gap: 4px; }

.tx-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #f3f4f6 50% / cover no-repeat;
  background-size: cover;
  background-position: center;
}

.tx-thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f3f4f6;
}

.inventory-tx-delete {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
}

.inventory-tx-delete:hover { color: #dc2626; }

/* Transactions modal — full-width card */
.inventory-transactions-card {
  width: min(96vw, 1280px) !important;
  max-width: min(96vw, 1280px) !important;
}

.inventory-transactions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
}

.inventory-transactions-search input {
  width: 280px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(0, 4, 53, 0.16);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}

.inventory-transactions-search input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.inventory-transactions-chips {
  display: flex;
  gap: 6px;
  margin-left: 4px;
}

.inventory-photo-block__hint-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfeff;
  color: #155e75;
  font-size: 10.5px;
  font-weight: 500;
  margin-left: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   Stock movement modal — Binstack-inspired design.
   Right-side drawer that does NOT inherit .job-modal__card padding
   or .job-form-v2__row grid, so its row visibility is unambiguous.
═══════════════════════════════════════════════════════════════════ */
:root {
  --invmov-primary: #0f6b5b;
  --invmov-primary-12: #0f6b5b1f;
  --invmov-primary-wash: #e9f2f1;
  --invmov-accent: #8f4c3a;
  --invmov-accent-wash: #f8eee9;
  --invmov-ink: #14201d;
  --invmov-ink-2: #3a4a47;
  --invmov-muted: #6b7a77;
  --invmov-muted-2: #94a09d;
  --invmov-line: #e6ebea;
  --invmov-line-2: #eef2f1;
  --invmov-bg: #f7f9f8;
  --invmov-card: #ffffff;
  --invmov-hover: #f3f6f5;
}

.invmov-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(1080px, 96vw);
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.invmov-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.invmov-dialog[open] {
  animation: invmovSlideIn 220ms ease-out;
}

@keyframes invmovSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.invmov-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--invmov-bg);
  border-radius: 16px 0 0 16px;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--invmov-ink);
}

.invmov-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 14px;
  background: var(--invmov-bg);
  border-bottom: 1px solid var(--invmov-line);
  flex-shrink: 0;
}

.invmov-topbar__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invmov-topbar__title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--invmov-ink);
}

.invmov-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.invmov-tag--in { background: var(--invmov-primary-wash); color: var(--invmov-primary); border: 1px solid var(--invmov-primary-12); }
.invmov-tag--out { background: var(--invmov-accent-wash); color: var(--invmov-accent); border: 1px solid #8f4c3a1f; }
.invmov-tag--transfer { background: #eff6ff; color: #1d4ed8; border: 1px solid #1d4ed81f; }

.invmov-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--invmov-line);
  background: #fff;
  color: var(--invmov-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.invmov-close:hover { background: var(--invmov-hover); color: var(--invmov-ink); }

.invmov-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.invmov-card {
  background: var(--invmov-card);
  border: 1px solid var(--invmov-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 32, 29, 0.04);
}

.invmov-card__head {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--invmov-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invmov-card__head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--invmov-ink);
}

.invmov-card__sub {
  font-size: 12.5px;
  color: var(--invmov-muted);
}

.invmov-card__body { padding: 24px; }

/* 12-col grid */
.invmov-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 20px;
}

.invmov-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.invmov-c3 { grid-column: span 3; }
.invmov-c6 { grid-column: span 6; }
.invmov-c9 { grid-column: span 9; }
.invmov-c12 { grid-column: 1 / -1; }

/* Row wrapper that participates as cells in the parent grid via
   display:contents. Crucially: when hidden, children disappear — this
   is what fixes the "3 warehouse rows visible at once" bug. */
.invmov-row {
  display: contents;
}

.invmov-row[hidden],
.invmov-row.is-hidden {
  display: none !important;
}

.invmov-row[hidden] > *,
.invmov-row.is-hidden > * {
  display: none !important;
}

.invmov-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--invmov-ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.005em;
}

.invmov-req {
  color: var(--invmov-accent);
  margin-left: -2px;
  font-weight: 700;
}

.invmov-hint {
  color: var(--invmov-muted-2);
  font-weight: 400;
  margin-left: auto;
  font-size: 11.5px;
}

.invmov-input,
select.invmov-input,
textarea.invmov-input {
  appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--invmov-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  color: var(--invmov-ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}

.invmov-input::placeholder, textarea.invmov-input::placeholder {
  color: var(--invmov-muted-2);
}

.invmov-input:hover { border-color: #d4dcdb; }

.invmov-input:focus {
  border-color: var(--invmov-primary);
  box-shadow: 0 0 0 3px var(--invmov-primary-12);
}

.invmov-input:disabled,
.invmov-input[readonly] {
  background: var(--invmov-bg);
  color: var(--invmov-muted);
  cursor: not-allowed;
}

textarea.invmov-input {
  min-height: 76px;
  padding: 9px 12px;
  line-height: 1.5;
  resize: vertical;
}

select.invmov-input {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7a77' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.invmov-sku-select {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

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

.invmov-input-wrap > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--invmov-muted-2);
  pointer-events: none;
}

.invmov-input-wrap > .invmov-input {
  padding-left: 32px;
}

/* Quantity stepper */
.invmov-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--invmov-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  min-height: 36px;
}

.invmov-qty:focus-within {
  border-color: var(--invmov-primary);
  box-shadow: 0 0 0 3px var(--invmov-primary-12);
}

.invmov-qty button {
  appearance: none;
  width: 36px;
  border: 0;
  border-right: 1px solid var(--invmov-line);
  background: var(--invmov-bg);
  color: var(--invmov-ink-2);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.invmov-qty button:last-of-type {
  border-right: 0;
  border-left: 1px solid var(--invmov-line);
}

.invmov-qty button:hover {
  background: var(--invmov-primary-wash);
  color: var(--invmov-primary);
}

.invmov-qty input {
  border: 0;
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: transparent;
  outline: none;
  color: var(--invmov-ink);
  -moz-appearance: textfield;
}

.invmov-qty input::-webkit-outer-spin-button,
.invmov-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Availability info box */
.invmov-availability {
  margin: 0;
  padding: 10px 12px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 8px;
  font-size: 12.5px;
  color: #155e75;
}

.invmov-availability strong {
  color: #0e7490;
}

.invmov-availability__sep {
  margin: 0 8px;
  color: #94a3b8;
}

.invmov-field-help {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--invmov-muted);
}

/* Photos: thumbnails + a single "Add photo" button. Supports one-at-a
   -time picking and multi-select (up to MAX). Drag-and-drop highlights
   the area. */
.invmov-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  border-radius: 10px;
  padding: 2px;
  transition: background 0.12s, outline-color 0.12s;
  outline: 2px dashed transparent;
}

.invmov-photos.is-dragover {
  background: var(--invmov-primary-wash);
  outline-color: var(--invmov-primary);
}

.invmov-photo-thumb,
.invmov-photo-add {
  width: 132px;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
}

.invmov-photo-thumb {
  position: relative;
  background: #0f172a;
  border: 1px solid var(--invmov-line);
  overflow: hidden;
}

.invmov-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invmov-photo-thumb__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 32, 29, 0.78);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.12s;
}

.invmov-photo-thumb:hover .invmov-photo-thumb__remove { opacity: 1; }
.invmov-photo-thumb__remove:hover { background: #dc2626; }

.invmov-photo-thumb__pos {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 10.5px;
  color: #fff;
  background: rgba(20, 32, 29, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}

.invmov-photo-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--invmov-bg);
  border: 1px dashed #cad4d2;
  cursor: pointer;
  color: var(--invmov-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  appearance: none;
  font-family: inherit;
}

.invmov-photo-add:hover {
  border-color: var(--invmov-primary);
  color: var(--invmov-primary);
  background: var(--invmov-primary-wash);
}

.invmov-photo-add svg {
  width: 26px;
  height: 26px;
  color: inherit;
}

.invmov-photo-add__title { font-size: 13px; font-weight: 500; }
.invmov-photo-add__sub { font-size: 10.5px; color: var(--invmov-muted-2); font-weight: 400; }

/* Footer */
.invmov-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #fafcfb;
  border-top: 1px solid var(--invmov-line-2);
  flex-shrink: 0;
}

.invmov-status {
  margin: 0;
  font-size: 12.5px;
  color: var(--invmov-muted);
}

.invmov-footer__actions {
  display: flex;
  gap: 8px;
}

.invmov-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--invmov-ink-2);
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}

.invmov-btn:hover { background: var(--invmov-hover); }

.invmov-btn-ghost { color: var(--invmov-muted); }

.invmov-btn-secondary {
  background: #fff;
  border-color: var(--invmov-line);
  color: var(--invmov-ink);
}

.invmov-btn-secondary:hover {
  background: var(--invmov-hover);
  border-color: #d4dcdb;
}

.invmov-btn-primary {
  background: var(--invmov-primary);
  color: #fff;
  border-color: var(--invmov-primary);
}

.invmov-btn-primary:hover {
  background: #0c5a4d;
  border-color: #0c5a4d;
}

.invmov-btn-primary.is-out {
  background: var(--invmov-accent);
  border-color: var(--invmov-accent);
}

.invmov-btn-primary.is-out:hover {
  background: #7c4131;
  border-color: #7c4131;
}

.invmov-btn-primary.is-transfer {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.invmov-btn-primary.is-transfer:hover {
  background: #1740b8;
  border-color: #1740b8;
}

/* Mobile sizing */
@media (max-width: 720px) {
  .invmov-dialog { width: 100vw; }
  .invmov-shell { border-radius: 0; }
  .invmov-c3 { grid-column: span 6; }
  .invmov-c9 { grid-column: span 12; }
  .invmov-c6 { grid-column: span 12; }
  .invmov-card__body { padding: 16px; }
  .invmov-scroll { padding: 14px; }
  .invmov-photo-thumb,
  .invmov-photo-add { width: calc((100% - 12px) / 2); }
}

/* Mobile-only brand line stacked inside the Client cell. Hidden on
   desktop because the Brand column is shown on its own. */
.inv-mobile-brand { display: none; }

/* Action bar: four buttons, equal width on desktop AND mobile. */
.inventory-page .inventory-action-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
  max-width: 600px;
}

.inventory-page .inventory-action-bar .table-action-button {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* Mobile-only flex break so the chips after Reset (Columns, Export) wrap
   to their own line. Width 0 on desktop = no effect. */
.inv-filter-break { display: none; }

/* Mobile card list — rendered into a dedicated <div> instead of
   inside the <table>, so the legacy .table-page--v2 .jobs-table
   mobile rules can't fight us. The table is hidden on phones and
   this div takes over. */
.inv-mobile-cards { display: none; }

.inv-mobile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  column-gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid #ece9e2;
  cursor: pointer;
}

.inv-mobile-card:nth-child(even) { background: #fafaf9; }

.inv-mobile-card__body { min-width: 0; }

.inv-mobile-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.inv-mobile-card__row--top { margin-bottom: 4px; }

.inv-mobile-card__name {
  font-weight: 700;
  font-size: 13px;
  color: #14201d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.inv-mobile-card__qty {
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  padding: 2px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.inv-mobile-card__qty.is-empty {
  color: #b91c1c;
  background: #fef2f2;
}

.inv-mobile-card__brand,
.inv-mobile-card__warehouse {
  font-size: 11.5px;
  color: #5d6673;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.inv-mobile-card__warehouse {
  text-align: right;
  flex: 0 0 auto;
}

.inv-mobile-card__photo {
  justify-self: end;
}

.inv-mobile-card__photo .inventory-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.inv-mobile-card__photo .inventory-thumb--empty {
  display: grid;
  place-items: center;
  background: #f1f5f4;
  color: #cbd5e1;
  font-weight: 700;
}

.inv-mobile-cards__empty {
  text-align: center;
  padding: 36px 18px;
  color: #94a09d;
  font-size: 13px;
}

@media (max-width: 720px) {
  /* Hide the desktop table and the stat-counter strip on phones. */
  html body.inventory-page .jobs-table-wrap { display: none !important; }
  html body.inventory-page .overview-grid--metrics { display: none !important; }

  /* Show the mobile card list. */
  html body.inventory-page .inv-mobile-cards {
    display: block !important;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ece9e2;
    background: #fff;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Filter bar — project-wide chip conventions (see memory file
   feedback_filter_chip_conventions.md). Applies anywhere a table uses
   the .table2-filter-bar + .table2-filter-chip pattern.
   1. Filter chips left, Columns + Export right.
   2. Icons on every chip.
   3. Click-outside closes dropdowns (handled in JS).
   4. Active chip: solid green border + tinted bg + green text;
      summary text is the value name or "Multiple".
   5. "+ Filter" + Reset present on every page.
   6. Default chip: white bg + dotted border.
   7. Mobile: hide Columns + Export, show a Filter toggle chip with
      a count badge; filter chips are collapsed by default and expand
      only when the toggle is clicked.
═══════════════════════════════════════════════════════════════════ */

.table2-filter-bar__chips {
  align-items: flex-start;
  justify-content: left;
}

/* On desktop, the collapsible wrapper is a transparent pass-through
   so its children sit beside the (hidden) Filter toggle as flex
   siblings of .table2-filter-bar__left. */
.inv-filter-collapsible {
  display: contents;
}

/* Active filter chip — clearly highlighted so users see at a glance
   which dimensions have selections. */
.table2-filter-chip.is-active {
  border-style: solid !important;
  border-color: #047857 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  font-weight: 600;
}

.table2-filter-chip.is-active .table2-filter-chip__icon,
.table2-filter-chip.is-active .table2-filter-chip__clear {
  color: #047857 !important;
}

/* Mobile Filter toggle chip + count badge. Hidden on desktop. */
.inv-filter-toggle { display: none; }

.inv-filter-toggle__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 5px;
  margin-left: 6px;
  line-height: 1;
}

@media (max-width: 720px) {
  /* Reveal the toggle; hide Columns + Export entirely. */
  .inv-filter-toggle { display: inline-flex !important; }
  .table2-filter-bar__right { display: none !important; }

  /* Collapsible chips: hidden by default, expand on toggle. */
  .inv-filter-collapsible {
    display: none;
    flex-basis: 100%;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .inv-filter-collapsible.is-expanded {
    display: flex;
  }
}

  /* Stat cards tighter on phones */
  .inventory-page .overview-grid--metrics {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  /* Action buttons: 4-in-a-row, smaller font so labels fit. */
  .inventory-page .inventory-action-bar {
    gap: 4px;
  }
  .inventory-page .inventory-action-bar .table-action-button {
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 600;
    border-radius: 8px;
    min-width: 0;
  }

  /* Filter chips: force Columns + Export onto a fresh row. */
  .inv-filter-break {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
  }
}

.inv-mobile-meta { display: none; }

/* Thumbnail cursor cues — every inventory thumbnail (main table, tx
   tables) is clickable to open the lightbox. */
.inventory-thumb { cursor: zoom-in; }
.tx-thumb:not(.tx-thumb--more) { cursor: zoom-in; }
.tx-thumb:not(.tx-thumb--more):hover {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* Mobile-only meta strip shown stacked inside a tx-table cell. Hidden
   on desktop; the data is already in dedicated columns there. */
.tx-mobile-meta { display: none; }

/* Responsive transactions tables (per-item + cross-item). At <= 720px
   we collapse to a compact view: type pill + item (with sku/date/qty/
   client/staff/loc stacked) + photos. */
@media (max-width: 720px) {
  .tx-mobile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: #6b7a77;
    align-items: center;
  }

  .tx-mobile-meta__sku {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
    color: #1f2937;
  }

  /* Cross-item table: hide all but type, item (with sub-meta), photos */
  .inventory-entries-table--wide th[data-tx-col="sku"],
  .inventory-entries-table--wide td[data-tx-col="sku"],
  .inventory-entries-table--wide th[data-tx-col="date"],
  .inventory-entries-table--wide td[data-tx-col="date"],
  .inventory-entries-table--wide th[data-tx-col="qty"],
  .inventory-entries-table--wide td[data-tx-col="qty"],
  .inventory-entries-table--wide th[data-tx-col="client"],
  .inventory-entries-table--wide td[data-tx-col="client"],
  .inventory-entries-table--wide th[data-tx-col="location"],
  .inventory-entries-table--wide td[data-tx-col="location"],
  .inventory-entries-table--wide th[data-tx-col="staff"],
  .inventory-entries-table--wide td[data-tx-col="staff"],
  .inventory-entries-table--wide th[data-tx-col="remarks"],
  .inventory-entries-table--wide td[data-tx-col="remarks"],
  .inventory-entries-table--wide th[data-tx-col="actions"],
  .inventory-entries-table--wide td[data-tx-col="actions"] {
    display: none !important;
  }

  /* Per-item table (8 cols → keep type, date+meta, qty, photos) */
  .inventory-entries-table:not(.inventory-entries-table--wide) th[data-tx-col="location"],
  .inventory-entries-table:not(.inventory-entries-table--wide) td[data-tx-col="location"],
  .inventory-entries-table:not(.inventory-entries-table--wide) th[data-tx-col="staff"],
  .inventory-entries-table:not(.inventory-entries-table--wide) td[data-tx-col="staff"],
  .inventory-entries-table:not(.inventory-entries-table--wide) th[data-tx-col="remarks"],
  .inventory-entries-table:not(.inventory-entries-table--wide) td[data-tx-col="remarks"],
  .inventory-entries-table:not(.inventory-entries-table--wide) th[data-tx-col="actions"],
  .inventory-entries-table:not(.inventory-entries-table--wide) td[data-tx-col="actions"] {
    display: none !important;
  }

  .inventory-entries-table th,
  .inventory-entries-table td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .tx-item-title { font-size: 12.5px; }
  .tx-item-desc { font-size: 11px; }

  /* Transactions modal goes full-width on phones */
  .inventory-transactions-card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0;
  }

  .inventory-transactions-search input {
    width: 100%;
  }
}

/* Photo lightbox: full-viewport overlay with optional prev/next
   controls when a movement has multiple photos. */
.inv-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.94);
  overflow: hidden;
}

.inv-lightbox::backdrop { background: transparent; }

.inv-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-lightbox__image {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  background: #0f172a;
}

.inv-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.inv-lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }

.inv-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.inv-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.inv-lightbox__nav--prev { left: 18px; }
.inv-lightbox__nav--next { right: 18px; }

.inv-lightbox__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.inv-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
}

@media (max-width: 720px) {
  .inv-lightbox__nav { width: 36px; height: 36px; font-size: 16px; }
  .inv-lightbox__nav--prev { left: 10px; }
  .inv-lightbox__nav--next { right: 10px; }
  .inv-lightbox__close { top: 12px; right: 12px; }
}

/* ===== To-Do round 5: last-message preview + clickable card ===== */
.note-tile__preview {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #4a5568;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.3;
}
.note-tile__preview strong {
  color: #1d6f42;
  font-weight: 700;
}

/* Subtle hover affordance on cards that act as a conversation
   shortcut (full-card click opens the chat). */
.note-tile--clickable {
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.note-tile--clickable:hover {
  box-shadow: 0 22px 60px rgba(28, 28, 23, 0.14);
}
.note-tile--clickable.is-completed {
  cursor: default;
}

/* ===== To-Do round 6: tick = save, cross = mark complete ===== */
.note-tile__submit,
.note-tile__finish {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.95rem;
}
.note-tile__submit {
  background: rgba(13, 116, 97, 0.12);
  color: #0d7461;
}
.note-tile__submit:hover {
  background: rgba(13, 116, 97, 0.2);
}
.note-tile__finish {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
}
.note-tile__finish:hover {
  background: rgba(180, 35, 24, 0.22);
}
.note-tile.is-completed .note-tile__finish {
  background: #b42318;
  color: #ffffff;
}

/* ===== To-Do round 7: tick visible only while editing ===== */
.note-tile__submit {
  display: none;
}
.note-tile.is-editing .note-tile__submit {
  display: inline-flex;
}

/* ===== To-Do round 8: fix preview/time/chat-icon overlap ===== */
/* The tile was a fixed 200px box with overflow:hidden, so a card with
   title + body + preview + footer overflowed and the absolutely-placed
   chat icon overlapped the text/time. Make it a flex column that grows
   to fit, pin the footer to the bottom, and clamp long body text. */
.note-tile:not(.note-tile--add) {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
}
.note-tile:not(.note-tile--add) .note-tile__static {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.note-tile__footer {
  margin-top: auto;
  min-height: 60px;
  align-items: flex-end;
}
.note-tile__chat {
  width: 52px;
  height: 52px;
  right: 12px;
  bottom: 12px;
}
.note-tile__chat svg {
  width: 28px;
  height: 28px;
}

/* ===== To-Do round 9: compact card, chat icon beside the cross =====
   Layout target: header + up to 4 message lines + 2 preview lines + time,
   with no wasted vertical space. */
.note-tile:not(.note-tile--add) {
  min-height: 0;
}
/* Chat icon now lives in the top-right actions row, same size as the
   cross — overrides the earlier large bottom-right placement. */
.note-tile__chat {
  position: static;
  right: auto;
  bottom: auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
}
.note-tile__chat svg {
  width: 14px;
  height: 14px;
}
.note-tile__chat-badge {
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
}
/* Footer just holds the timestamp now — no pinning, no reserved gap. */
.note-tile__footer {
  margin-top: 8px;
  min-height: 0;
  padding-right: 0;
  justify-content: flex-start;
  align-items: center;
}
/* Keep the header text clear of the action buttons. */
.note-tile__heading {
  padding-right: 56px;
}
.note-tile__title {
  padding-right: 88px;
}
/* Message body: up to 4 lines, then clamp/scroll. */
.note-tile:not(.note-tile--add) .note-tile__static {
  -webkit-line-clamp: 4;
}
.note-tile__body {
  height: auto;
  min-height: 3.6em;
  max-height: 5.6em;
  overflow-y: auto;
}
.note-tile__preview {
  -webkit-line-clamp: 2;
}

/* ============================================================
   Production modal redesign (pp-*) — cream/teal handoff design.
   Scoped to #productions2JobModal (.pp-modal) and its upload
   sheet (.pp-upload). Tokens are namespaced (--pp-*) so nothing
   leaks into the rest of the app.
   ============================================================ */
.pp-modal,
.pp-upload {
  --pp-paper: #f5f0e4;
  --pp-paper-deep: #ece5d3;
  --pp-surface: #fbf7ee;
  --pp-surface-sunken: #f0eadb;
  --pp-hair: #e3dccb;
  --pp-hair-strong: #cfc6b1;
  --pp-hair-soft: #ece5d3;
  --pp-ink: #1d1a14;
  --pp-ink-2: #443e32;
  --pp-ink-3: #6d6557;
  --pp-ink-4: #98907f;
  --pp-ink-5: #c2bba8;
  --pp-teal-900: #084845;
  --pp-teal-700: #0d6868;
  --pp-teal-600: #117373;
  --pp-teal-300: #7ec2bf;
  --pp-teal-100: #d6ebe9;
  --pp-teal-50: #eaf3f1;
  --pp-prog-track: #e9e2d0;
  --pp-prog-fill: #1f8f6a;
  --pp-r-md: 10px;
  --pp-r-lg: 14px;
  --pp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pp-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-teal-700);
}
.pp-label--xs { font-size: 10px; }
.pp-mono { font-family: var(--pp-mono); font-feature-settings: "tnum"; }

/* Dialog + card overrides (sits on top of .productions-modal). */
.productions-modal.pp-modal {
  width: min(760px, calc(100vw - 32px));
  border-radius: 18px;
}
.pp-modal__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-height: calc(100vh - 48px);
  background: var(--pp-paper);
  border-radius: 18px;
  overflow: hidden;
  color: var(--pp-ink);
  box-shadow: 0 30px 80px -20px rgba(20, 15, 5, 0.45), 0 0 0 1px rgba(20, 15, 5, 0.08);
}

/* Header */
.pp-mhead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--pp-hair);
  background: var(--pp-paper);
  flex-shrink: 0;
}
.pp-mhead__main { flex: 1; min-width: 0; }
.pp-mtitle {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--pp-ink);
}
.pp-mtitle__sep { color: var(--pp-ink-4); margin: 0 10px; font-weight: 400; }
.pp-mmeta {
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #dbeede;
  color: #2f7a48;
}
.pp-status-pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pp-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pp-ink-2); }
.pp-owner__text strong { font-weight: 600; }
.pp-daterange { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pp-ink-3); }
.pp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d6ebe9;
  color: #084845;
  font-weight: 700;
  flex-shrink: 0;
}
.pp-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.pp-mclose {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-hair);
  color: var(--pp-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.14s;
}
.pp-mclose:hover { background: var(--pp-paper-deep); }

/* Body */
.pp-mbody {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pp-mbody > * { flex-shrink: 0; }
.pp-secthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* Identity */
.pp-identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--pp-hair);
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-lg);
  overflow: hidden;
}
.pp-identity__cell { background: var(--pp-surface); padding: 14px 16px; min-width: 0; }
.pp-identity__val {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--pp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description */
.pp-desc { font-size: 13.5px; line-height: 1.55; color: var(--pp-ink-2); }
.pp-desc--empty { color: var(--pp-ink-4); font-style: italic; }
.pp-desc__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--pp-teal-700);
  font-weight: 600;
  font-size: 12.5px;
  padding: 0;
  font-family: inherit;
}

/* Production status */
.pp-statusgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--pp-hair);
  background: var(--pp-surface);
  border-radius: var(--pp-r-md);
  cursor: pointer;
  min-width: 0;
  transition: background 0.14s, border-color 0.14s;
}
.pp-check.is-checked { background: var(--pp-teal-50); border-color: var(--pp-teal-300); }
.pp-check input { position: absolute; opacity: 0; pointer-events: none; }
.pp-check__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-hair-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s;
}
.pp-check__box svg { opacity: 0; }
.pp-check input:checked ~ .pp-check__box { background: var(--pp-teal-700); border-color: var(--pp-teal-700); }
.pp-check input:checked ~ .pp-check__box svg { opacity: 1; }
.pp-check__text { flex: 1; min-width: 0; }
.pp-check__title { display: block; font-size: 13.5px; font-weight: 600; color: var(--pp-ink); }
.pp-check__hint { display: block; font-size: 11.5px; color: var(--pp-ink-3); margin-top: 1px; }
.pp-check__datepill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--pp-hair);
  background: var(--pp-surface);
  color: var(--pp-ink-2);
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.pp-check__datepill[hidden] { display: none; }
.pp-hidden-date { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Department progress hero */
.pp-hero {
  background: var(--pp-surface);
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-lg);
  padding: 18px 18px 16px;
}
.pp-hero[hidden] { display: none !important; }
.pp-hero__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.pp-hero__overall { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.pp-hero__overall .pp-mono { font-size: 24px; font-weight: 600; line-height: 1; color: var(--pp-teal-900); }
.pp-hero__overall-sub { font-size: 12px; color: var(--pp-ink-3); }
.pp-hero__edit {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--pp-hair-strong);
  background: transparent;
  color: var(--pp-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.pp-hero__edit:hover { background: var(--pp-paper-deep); }
.pp-sliders { display: flex; flex-direction: column; gap: 12px; }
.pp-sliders .production-slider-row {
  background: transparent;
  padding: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 44px;
  gap: 14px;
}
.pp-sliders .production-slider-row span { font-size: 13.5px; font-weight: 600; color: var(--pp-ink); }
.pp-sliders .production-slider-row strong {
  font-family: var(--pp-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-ink-2);
  text-align: right;
}

/* Schedule + Files two-column */
.pp-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pp-twocol__col { min-width: 0; }

/* Installation schedule timeline */
.pp-schedule {
  position: relative;
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-lg);
  background: var(--pp-surface);
  padding: 8px 12px 10px;
}
.pp-schedule__list { list-style: none; margin: 0; padding: 0; position: relative; }
.pp-schedule__line { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--pp-hair); z-index: 0; }
.pp-sched-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  padding: 10px 4px;
  position: relative;
  z-index: 1;
}
.pp-sched-item + .pp-sched-item { border-top: 1px dashed var(--pp-hair-soft); }
.pp-sched-item__dot { display: flex; justify-content: center; padding-top: 3px; }
.pp-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--pp-surface);
  border: 2px solid var(--pp-hair-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-dot--done { background: var(--pp-prog-fill); border-color: var(--pp-prog-fill); }
.pp-sched-item__body { min-width: 0; }
.pp-evttag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #dbeede;
  color: #2f7a48;
}
.pp-evttag--install { background: #dfe9f0; color: #3a6a8a; }
.pp-evttag--delivery { background: #e2e6f0; color: #44557a; }
.pp-sched-title { font-size: 13px; font-weight: 600; color: var(--pp-ink); line-height: 1.35; }
.pp-sched-title--scheduled { color: var(--pp-ink-2); }
.pp-sched-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pp-sched-note { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--pp-ink-3); }
.pp-sched-date { font-family: var(--pp-mono); font-size: 11px; font-weight: 600; color: var(--pp-ink-3); }

/* Files */
.pp-files {
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-lg);
  background: var(--pp-surface);
  padding: 10px 12px 12px;
}
.pp-filefilter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-filebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--pp-hair-strong);
  background: transparent;
  color: var(--pp-ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.pp-filebtn.is-active { background: var(--pp-teal-700); color: #fbf7ee; border-color: var(--pp-teal-700); }
.pp-filebtn__count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  text-align: center;
  background: var(--pp-surface-sunken);
  color: var(--pp-ink-3);
  font-size: 9.5px;
  font-weight: 700;
}
.pp-filebtn.is-active .pp-filebtn__count { background: rgba(255, 255, 255, 0.18); color: #fbf7ee; }
.pp-filelist { display: flex; flex-direction: column; gap: 5px; }
.pp-filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-md);
  background: var(--pp-surface);
  text-decoration: none;
  transition: background 0.12s;
}
.pp-filerow:hover { background: var(--pp-paper); }
.pp-filerow__meta { flex: 1; min-width: 0; }
.pp-filerow__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-filerow__sub { font-size: 10.5px; color: var(--pp-ink-3); margin-top: 1px; }
.pp-filerow__dl { display: inline-flex; flex-shrink: 0; color: var(--pp-ink-3); }

.pp-empty {
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--pp-hair-strong);
  border-radius: var(--pp-r-md);
  color: var(--pp-ink-3);
  font-size: 12px;
}
.pp-loading { padding: 16px; text-align: center; color: var(--pp-ink-4); font-size: 12px; }

/* Production photos */
.pp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pp-photocard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  border: 1px solid var(--pp-hair);
  border-radius: var(--pp-r-md);
  background: var(--pp-surface);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.pp-photocard:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(20, 15, 5, 0.18); }
.pp-photocard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-photocard__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 10px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  color: #fff;
}
.pp-photocard__cap-title {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pp-photocard__cap-sub { font-size: 10px; font-weight: 500; margin-top: 1px; opacity: 0.85; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.pp-addphoto {
  position: relative;
  aspect-ratio: 4 / 3.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1.5px dashed var(--pp-hair-strong);
  border-radius: var(--pp-r-md);
  background: var(--pp-surface-sunken);
  cursor: pointer;
  text-align: center;
  transition: background 0.14s, border-color 0.14s;
}
.pp-addphoto.is-drag { border-color: var(--pp-teal-600); background: var(--pp-teal-50); }
.pp-addphoto__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--pp-teal-100);
  color: var(--pp-teal-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-addphoto.is-drag .pp-addphoto__icon { background: var(--pp-teal-700); color: #fff; }
.pp-addphoto__label { font-size: 12px; font-weight: 600; color: var(--pp-ink-2); }

/* Status message + footer */
.pp-mstatus { flex-shrink: 0; }
.pp-mstatus:not([hidden]) { margin: 0 20px; }
.pp-mfoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--pp-hair);
  background: var(--pp-paper);
  flex-shrink: 0;
}
.pp-mfoot .productions-modal__button {
  border-radius: var(--pp-r-md);
  background: var(--pp-teal-700);
  border-color: var(--pp-teal-700);
  color: #fbf7ee;
}
.pp-mfoot .productions-modal__button:hover { background: var(--pp-teal-900); }
.pp-mfoot .productions-modal__button--secondary {
  background: var(--pp-surface);
  color: var(--pp-ink-2);
  border-color: var(--pp-hair-strong);
}
.pp-mfoot .productions-modal__button--secondary:hover { background: var(--pp-paper-deep); }

/* Upload sheet */
.pp-upload {
  width: min(420px, calc(100vw - 32px));
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 16px;
}
.pp-upload::backdrop { background: rgba(20, 15, 5, 0.5); }
.pp-upload__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  background: var(--pp-paper);
  color: var(--pp-ink);
  box-shadow: 0 20px 60px -10px rgba(20, 15, 5, 0.4);
}
.pp-upload__head { display: flex; align-items: center; justify-content: space-between; }
.pp-upload__title { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--pp-ink); }
.pp-upload__drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1.5px dashed var(--pp-hair-strong);
  border-radius: 12px;
  background: var(--pp-surface);
  cursor: pointer;
  text-align: center;
  transition: background 0.14s, border-color 0.14s;
}
.pp-upload__drop.is-drag { border-color: var(--pp-teal-600); background: var(--pp-teal-50); }
.pp-upload__drop-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--pp-teal-100);
  color: var(--pp-teal-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-upload__drop.is-drag .pp-upload__drop-icon { background: var(--pp-teal-700); color: #fff; }
.pp-upload__drop-title { font-size: 14.5px; font-weight: 600; color: var(--pp-ink); }
.pp-upload__drop-sub { font-size: 12px; color: var(--pp-ink-3); }
.pp-upload__drop-sub span { color: var(--pp-teal-700); font-weight: 600; }
.pp-upload__input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pp-upload__camera[hidden] { display: none; }
.pp-upload__or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pp-ink-4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pp-upload__or span { flex: 1; height: 1px; background: var(--pp-hair); }
.pp-upload__camera-btn {
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--pp-r-md);
  background: var(--pp-teal-700);
  border-color: var(--pp-teal-700);
  color: #fbf7ee;
}
.pp-upload__camera-btn:hover { background: var(--pp-teal-900); }
.pp-upload__hint { margin: 0; font-size: 11.5px; color: var(--pp-ink-3); text-align: center; }
.pp-upload__status { margin: 0; }

@media (max-width: 640px) {
  .pp-identity,
  .pp-statusgrid,
  .pp-twocol { grid-template-columns: 1fr; }
  .pp-mhead { padding: 18px 18px 14px; }
  .pp-mbody { padding: 12px 18px 18px; }
  .pp-mfoot { padding: 12px 18px; }
  .pp-mtitle { font-size: 22px; }

  /* Department-progress sliders: stack the title above the slider so the
     slider gets the full row width — at 150px label + tight viewport
     the slider was so short it snapped 0→100 with no usable middle. */
  .pp-sliders .production-slider-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 12px;
    row-gap: 6px;
  }
  .pp-sliders .production-slider-row > span:first-child {
    grid-column: 1 / -1;
  }
}

/* Delete button overlay on each production photo card. */
.pp-photocard-wrap { position: relative; }
.pp-photocard-wrap .pp-photocard { width: 100%; border: 0; font: inherit; cursor: pointer; }
.pp-photocard__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.9;
  transition: background 0.14s, opacity 0.14s, transform 0.12s;
  z-index: 2;
}
.pp-photocard__delete:hover { background: #b42318; opacity: 1; transform: scale(1.05); }

/* ============================================================
   Photo lightbox — fullscreen modal with keyboard + swipe nav.
   Renders on top of the production modal.
   ============================================================ */
.pp-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: #fff;
}
.pp-lightbox::backdrop { background: rgba(10, 8, 4, 0.92); }
.pp-lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 72px 96px;
  box-sizing: border-box;
}
.pp-lightbox__close,
.pp-lightbox__delete,
.pp-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: background 0.14s, transform 0.12s, opacity 0.14s;
}
.pp-lightbox__close:hover,
.pp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.pp-lightbox__delete:hover { background: #b42318; }
.pp-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; }
.pp-lightbox__delete { top: 16px; right: 64px; width: 40px; height: 40px; }
.pp-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.pp-lightbox__nav--prev { left: 16px; }
.pp-lightbox__nav--next { right: 16px; }
.pp-lightbox__nav:disabled,
.pp-lightbox__delete:disabled { opacity: 0.35; cursor: not-allowed; }
.pp-lightbox__stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.pp-lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.pp-lightbox__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: #fff;
}
.pp-lightbox__caption-title {
  font-size: 14px;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-lightbox__caption-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  opacity: 0.85;
}
.pp-lightbox__count { font-family: var(--pp-mono); font-weight: 600; }

@media (max-width: 640px) {
  .pp-lightbox__inner { padding: 48px 8px 96px; }
  .pp-lightbox__nav { width: 40px; height: 40px; }
  .pp-lightbox__nav--prev { left: 6px; }
  .pp-lightbox__nav--next { right: 6px; }
  .pp-lightbox__close { top: 12px; right: 12px; }
  .pp-lightbox__delete { top: 12px; right: 60px; }
}

/* Embed mode: hides navigation chrome when loaded in a dashboard modal iframe */
body.embed-mode .new-shell > .universal-sidebar-mount,
body.embed-mode .new-shell .new-sidebar { display: none !important; }
body.embed-mode .new-topbar { display: none !important; }
body.embed-mode .table2-mobile-overlay { display: none !important; }
body.embed-mode .homepage-mobile-overlay { display: none !important; }
body.embed-mode .new-main,
body.embed-mode .new-shell .new-main { margin-left: 0 !important; padding-top: 16px !important; padding-left: 0 !important; padding-right: 0 !important; }
body.embed-mode .new-shell { display: block; }

/* ============================================================
   Embed mode — show ONLY the editor (dashboard quick-action modals)
   The quick-action buttons load these pages in an iframe with ?embed=1
   and auto-open the create form. Every editor lives OUTSIDE .new-main
   (except notes, whose inline tiles live inside it), so we hide the
   page's list/table and force the editor full-bleed with its own dark
   backdrop removed — it then fills the dashboard modal as if it were
   the only thing on the page.
   ============================================================ */
body.embed-mode { background: #fff !important; }

/* Hide the list/table page behind the editor (notes excluded). */
body.embed-mode.quotations2-page .new-main,
body.embed-mode.clients-new-page .new-main,
body.embed-mode.installations-page .new-main,
body.embed-mode.service-tickets-page .new-main { display: none !important; }

/* Quotation — slide-in editor panel → full-bleed */
body.embed-mode.quotations2-page #quotations2EditorPanel:not([hidden]) {
  position: fixed !important; inset: 0 !important; z-index: 100 !important;
}
body.embed-mode.quotations2-page .quotations2-editor-panel__backdrop { display: none !important; }
body.embed-mode.quotations2-page .quotations2-editor-panel__sheet {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; max-width: none !important;
  height: 100% !important; max-height: none !important;
  margin: 0 !important; border-radius: 0 !important;
  transform: none !important; box-shadow: none !important;
}

/* Clients & Installations — native <dialog> → full-bleed, no dim backdrop */
body.embed-mode.clients-new-page #clientModal[open],
body.embed-mode.installations-page #installationModal[open] {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; max-width: none !important;
  height: 100vh !important; max-height: none !important;
  margin: 0 !important; border: none !important; border-radius: 0 !important;
  overflow: auto !important;
}
body.embed-mode.clients-new-page #clientModal::backdrop,
body.embed-mode.installations-page #installationModal::backdrop { background: #fff !important; }

/* Ticket — slide-in drawer → full-bleed */
body.embed-mode.service-tickets-page #tktDrawer {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; max-width: none !important;
  transform: none !important; animation: none !important; box-shadow: none !important;
}