: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;
}

@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 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 180px 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;
}

.homepage-page .homepage-topbar__brand {
  width: 180px;
  min-height: var(--new-topbar-height);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ece6df;
}

.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: var(--new-topbar-height);
  left: 0;
  bottom: 0;
  width: var(--new-sidebar-width);
  z-index: 90;
}

.homepage-page .homepage-sidebar {
  position: fixed;
  top: var(--new-topbar-height);
  left: 0;
  bottom: 0;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  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__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: 180px 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: 44px;
  border-radius: 12px;
  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;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(21, 147, 123, 0.5);
}

.table-action-button--secondary {
  background: #eae7ea;
  color: #323235;
  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;
}

.installation-dates {
  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 {
  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-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;
}

.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 {
  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__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-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 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;
}

@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: 86px 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;
}

.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: 1px solid rgba(23, 33, 29, 0.12);
  border-radius: 18px;
  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;
}

.productions-modal__check input {
  width: 18px;
  height: 18px;
  accent-color: #0f6b5b;
}

.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);
}

.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: 10px 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,
.table-page--v2 .new-sidebar__logout {
  min-height: 28px;
  padding: 0 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 .jobs-table thead {
    display: none;
  }

  .table-page--v2 .jobs-table,
  .table-page--v2 .jobs-table tbody {
    display: block;
  }

  .table-page--v2 .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 .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 .quotations2-page because the quotations renderer doesn't
     emit data-col-key (mobile.css handles those cells via nth-child). */
  .table-page--v2:not(.quotations2-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;
}

.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 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 {
  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__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;
  }
}

/* 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;
  }
}

.design-page .table-content {
  padding-top: 82px;
}

.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;
}

.design-table {
  min-width: 1180px;
}

.design-table th {
  color: #173057;
  font-weight: 800;
}

.design-table tbody tr {
  cursor: pointer;
}

.design-table tbody tr:nth-child(even) {
  background: #f6f7f8;
}

.design-table td {
  height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.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;
}

.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;
}

.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: 10px;
}

.settings-page .settings-sidebar-customize-group {
  display: grid;
  gap: 10px;
}

.settings-page .settings-sidebar-customize-group h4 {
  margin: 0;
  color: #6b7c76;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.settings-page .settings-sidebar-customize-group__header {
  display: grid;
  gap: 8px;
}

.settings-page .settings-sidebar-customize-group__header > strong {
  color: #001a33;
  font-size: 0.95rem;
  font-weight: 700;
}

.settings-page .settings-sidebar-customize-group__header label,
.settings-page .settings-sidebar-customize-item {
  display: grid;
  align-items: center;
  gap: 10px;
}

.settings-page .settings-sidebar-customize-group__header label {
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.settings-page .settings-sidebar-customize-group__header label span,
.settings-page .settings-sidebar-customize-item__static {
  color: #10213a;
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-page .settings-sidebar-customize-group__items {
  display: grid;
  gap: 10px;
}

.settings-page .settings-sidebar-customize-item {
  grid-template-columns: 18px minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 107, 91, 0.1);
  border-radius: 14px;
  background: #fbfffe;
}

.settings-page .settings-sidebar-customize-item.is-locked {
  background: #f5faf8;
}

.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: 8px 10px;
  border: 1px solid rgba(15, 107, 91, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #0f1728;
  font: inherit;
}

.new-sidebar__section {
  display: grid;
  gap: 8px;
}

.new-sidebar__section + .new-sidebar__section {
  margin-top: 14px;
}

.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: 0;
}

.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.55rem, 2.2vw, 2.5rem);
  line-height: 1;
}

.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;
}

.quotations2-page #wonAmountCard .overview-card__value-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
}

.quotations2-page #wonAmountCard .overview-card__value-row strong {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.quotations2-page #wonAmountCard .overview-card__currency,
.quotations2-page #wonAmountCard .overview-card__value-inline-note {
  display: inline;
  white-space: nowrap;
}

.quotations2-page .overview-grid--metrics .overview-card__value-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
}

.quotations2-page .overview-grid--metrics .overview-card__value-row strong {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.quotations2-page .overview-grid--metrics .overview-card__value-inline-note,
.quotations2-page .overview-grid--metrics .overview-card__currency {
  display: inline;
  white-space: nowrap;
}

.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;
}

.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: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: var(--new-sidebar-width) 1fr auto;
  align-items: center;
  min-height: var(--new-topbar-height);
  padding: 0 12px 0 0;
  border-bottom: 1px solid #e7e5df;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

.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: var(--new-topbar-height) auto 0 0;
  z-index: 30;
  width: var(--new-sidebar-width);
  height: calc(100vh - var(--new-topbar-height));
  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: 0;
}

.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: 0 10px;
  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;
}

@media (max-width: 960px) {
  .homepage-page .new-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #e7e5df;
  }

  .homepage-page .new-topbar {
    grid-template-columns: var(--new-sidebar-width) 1fr auto;
  }

  .homepage-main {
    margin-left: 0;
    padding: calc(var(--new-topbar-height) + 16px) 14px 20px;
  }

  .homepage-notifications {
    position: static;
    width: auto;
    padding: 0;
  }
}

.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;
}

/* 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: 6px;
  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: 40px;
  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;
}
/* Pull Switch up to remove the gap between it and To-do (the footer
   container has gap: 6px between every sibling — this negates only
   the gap above Switch, leaving Switch->Logout spacing intact). */
.new-sidebar__footer > .new-sidebar__switch {
  margin-top: -6px;
}
.new-sidebar__todo-icon,
.new-sidebar__switch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.new-sidebar__todo-icon svg,
.new-sidebar__switch-icon svg {
  width: 18px;
  height: 18px;
}
/* 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;
}

/* 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. */
.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: 0;
  background: #0f766e;
  border-radius: 0;
}
.new-sidebar__footer-logo-mark {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 50px;
  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 page: keep DATE / JOB No / BRAND / DETAILS /
     LOCATION (columns 2, 3, 5, 6, 7 of 11). Hide the rest so the
     remaining five fit on a phone. */
  .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(4),
  .installations-page .jobs-table td:nth-child(4),
  .installations-page .jobs-table th:nth-child(8),
  .installations-page .jobs-table td:nth-child(8),
  .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) {
    display: none !important;
  }
  .installations-page .jobs-table th,
  .installations-page .jobs-table td {
    width: auto !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):
       1. 3-dot menu button   #quotations2MobileMenuButton
       2. Search field        .new-topbar__search
       3. Notification bell   #quotations2NotificationButton
       4. + Add quotation     #quotations2MobileNewButton
     The .new-topbar__actions wrapper gets `display: contents` so its
     buttons participate in the flex order alongside the search.
  ----------------------------------------------------------------- */
  body.quotations2-page .new-topbar__left {
    display: none !important;
  }
  body.quotations2-page .new-topbar__actions {
    display: contents !important;
  }
  body.quotations2-page #newQuotationButton,
  body.quotations2-page #newInvoiceButton {
    display: none !important;
  }
  body.quotations2-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;
  }
  body.quotations2-page #quotations2MobileMenuButton {
    order: 1 !important;
    display: inline-flex !important;
  }
  body.quotations2-page #quotations2NotificationButton {
    order: 3 !important;
  }
  body.quotations2-page #quotations2MobileNewButton {
    order: 4 !important;
    display: inline-flex !important;
  }
  body.quotations2-page #quotations2MobileMenuButton,
  body.quotations2-page #quotations2NotificationButton,
  body.quotations2-page #quotations2MobileNewButton {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  body.quotations2-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. */
  body.quotations2-page:not(.invoices-page) .jobs-table-wrap {
    overflow: visible !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. */
  body.quotations2-page:not(.invoices-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; }
}