/* Shared layout foundations. Colour and typography are defined in mem-tokens.css / mem-theme.css. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

/* Horizontal scrollbar styling for tables */

/* WebKit / Blink browsers (Chrome, Edge, Safari) */
.table-wrapper::-webkit-scrollbar {
  height: 0.375rem;                           /* horizontal scrollbar thickness */
}

.table-wrapper::-webkit-scrollbar-track {
  background: #151515;                   /* track color */
  border-radius: var(--mem-radius-pill);
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #666;                      /* thumb color */
  border-radius: var(--mem-radius-pill);                  /* rounded thumb */
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #888;                      /* hover state if needed */
}

/*==================================
  2. LAYOUT & GRID
  ==================================*/

/* Combined grid definitions */
.grid {
  display: grid;
  /* Using the more complex grid definition from the first block */
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr); 
}


/* Fallback for the simpler grid structure found later */
.grid.grid--two-col { 
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--mem-space-4);
  margin-bottom: var(--mem-space-4);
}

/*==================================
  3. APP HEADER & NAVIGATION
  ==================================*/
header.app-header {
  margin-bottom: 1.375rem; /* Using 22px from the later definition */
}

.app-avatar {
  object-fit: cover;
  font-size: var(--mem-type-body);
  font-weight: 500;
  color: var(--text);
}

.app-avatar.app-avatar--large {
  width: 4.375rem;
  height: 4.375rem;
}


.nav-link {
  font-size: var(--mem-type-sm);
  padding: var(--mem-space-1-5) 0.6875rem;
  border-radius: var(--mem-radius-pill);
  text-transform: capitalize;
  border: var(--mem-border-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  background: rgba(12, 12, 12, 0.75);
  backdrop-filter: blur(0.875rem);
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nav-link:hover {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, rgba(241, 91, 91, 0.18), rgba(20, 20, 20, 0.95));
}

.nav-link--small {
  display: inline-flex;
  align-items: center;
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nav-link--small.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.nav-link--small.faded {
  text-transform: capitalize;
  cursor: pointer;
  color: var(--text-muted);
  border: var(--mem-border-hairline) solid var(--border-subtle);
}

.nav-link--primary {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), rgba(241, 91, 91, 0.02));
  color: var(--text);
  cursor: pointer;
}

/*==================================
  4. CARD & STATUS COMPONENTS
  ==================================*/
main {
  display: flex;
  flex-direction: column;
  gap: 1.375rem; /* Using 22px from first block, adjusting later one to 22px */
  align-content: center;
  align-items: stretch;
}

.card {
  width: 100%;
  /* Using the later radial gradient for card background */
  background: radial-gradient(circle at top left, var(--mem-color-hover) 0, #101010 50%, #050505 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.card.smaller-width {
  max-width: 48.75rem;
}

.card.larger-width {
  width: 120%;
}


.card-title {
  font-size: var(--mem-type-body);
  font-weight: 600; /* Added font-weight from first block */
}

.card-meta {
  font-size: var(--mem-type-xs);
  color: var(--text-soft);
  text-transform: capitalize;
}

/* Status Pills (used in first block) */
.status-grid {
  margin-top: var(--mem-space-1-5);
}

.status-label {
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-soft);
}

.status-value {
  font-size: var(--mem-type-h6);
  font-weight: 600;
}

.status-pill--accent {
  border-color: rgba(241, 91, 91, 0.9);
}

.status-pill--accent .status-label {
  color: #ffd6d6;
}

.status-pill--accent .status-value {
  color: #ffecec;
}

/*==================================
  5. CLIENT DETAILS (from second block)
  ==================================*/

.client-name {
  font-size: var(--mem-type-h6);
  font-weight: 500;
  margin-bottom: var(--mem-space-1-5);
}

.client-field-label {
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-soft);
  margin-bottom: 0.1875rem;
}





/* Client Details from first block */



/*==================================
  6. TABLE & BADGES
  ==================================*/
  
.table-wrapper {
  border-radius: var(--radius-md);
  border: var(--mem-border-hairline) solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.6));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mem-type-sm);
  text-transform: capitalize;
}


.table__cell-link {
  color: var(--text);
  text-decoration: none;
}

th, td {
  padding: var(--mem-space-2) var(--mem-space-2-5);
  text-align: left;
  white-space: nowrap;
}

th {
  font-weight: 500;
  border-bottom: var(--mem-border-hairline) solid var(--border-subtle);
  font-size: var(--mem-type-2xs);
}

td {
  border-bottom: var(--mem-border-hairline) solid rgba(255, 255, 255, 0.02);
}


.col-main {
  white-space: nowrap;
}

/* Badge Status */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: var(--mem-space-0-5) var(--mem-space-2);
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: var(--mem-border-hairline) solid rgba(255, 255, 255, 0.16);
  color: var(--text-muted);
}

.badge-status--interactive {
  cursor: pointer;
  background-color: transparent;
  border-style: solid;
  border-width: var(--mem-border-hairline);
}

.badge-status svg {
  display: inline-block;
  flex-shrink: 0;
}

.badge-status__icon-inner path {
  fill: currentColor;
}

.badge-status--upcoming {
  border-color: rgba(255, 199, 102, 0.9);
  color: #ffecc1;
  background: rgba(255, 199, 102, 0.16);
}

.badge-status--overdue {
  border-color: rgba(255, 120, 120, 0.9);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.12);
}

.badge-status--paid {
  border-color: rgba(143, 237, 175, 0.9);
  color: #b8ffcf;
  background: rgba(78, 189, 120, 0.12);
}

.badge-status--pending {
  border-color: rgba(255, 199, 102, 0.9);
  color: #ffecc1;
  background: rgba(255, 199, 102, 0.16);
}

.badge-status--draft {
  border-color: rgba(160, 160, 160, 0.7);
  background: rgba(255, 255, 255, 0.02);
}

.badge-status--cancelled {
  border-color: rgba(255, 120, 120, 0.9);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.12);
  text-decoration: line-through;
}

button.badge-status {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--mem-space-1) var(--mem-space-2);
  margin: 0;
  line-height: 1;
}

.invoice-link {
  color: #f8f3ff;
  text-decoration: none;
  border-bottom: var(--mem-border-hairline) solid transparent;
  padding-bottom: 0.0625rem;
  transition: border-color 140ms ease, color 140ms ease;
}

.invoice-link:hover {
  color: #ffffff;
  border-color: rgba(241, 91, 91, 0.7);
}

.totals {
  margin-top: var(--mem-space-4);
  text-align: right;
  font-size: 0.8rem;
  margin-right: var(--mem-space-5);
  text-transform: capitalize;
  margin-bottom: var(--mem-space-4);
}


.subitems {
  list-style: disc;
  margin: 0.3rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.65rem;
}

/*==================================
  7. FORMS & INPUTS
  ==================================*/
.form-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--mem-space-2);
}

.form__field input, 
.form__field select, 
.form__field textarea {
  font-size: var(--mem-type-sm);
  padding: 0.9375rem 0.6875rem;
  border-radius: var(--mem-radius-md);
  border: var(--mem-border-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  text-decoration: none;
  background: rgba(12, 12, 12, 0.75);
  backdrop-filter: blur(0.875rem);
  width: 100%;
  font-family: var(--font-sans);
}

#status_select {
  font-size: var(--mem-type-sm);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--mem-radius-md);
  border: var(--mem-border-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  text-decoration: none;
  background: rgba(12, 12, 12, 0.75);
  backdrop-filter: blur(0.875rem);
}

/* --- Inline Form Styles (from the third block) --- */

/* Target the calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  filter: invert(1);
}

/* On hover / focus, make it stronger */
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  filter: invert(1) drop-shadow(0 0 0.1875rem rgba(241, 91, 91, 0.7));
}

.form {
  display: block;
}

.form--columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--mem-space-4);
}

.form__fieldset {
  border-radius: var(--mem-radius-md);
}

.form__fieldset legend {
  font-size: 0.8rem;
  font-weight: 500;
}

.form__field {
  margin-bottom: 0.7rem;
  display: flex;
  flex-direction: column;
}

.form__field--inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mem-space-2);
}


.form__actions {
  margin-top: var(--mem-space-4);
  display: flex;
  gap: var(--mem-space-2);
}

.form__actions--full {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

/*==================================
  8. UTILITIES & MISC
  ==================================*/
.h1-title {
  font-size: var(--mem-type-h3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.empty-state {
  padding: var(--mem-space-3-5) var(--mem-space-3);
  font-size: var(--mem-type-sm);
  color: var(--text-soft);
}




.line-item {
  border-top: var(--mem-border-hairline) solid var(--border-subtle);
  padding-top: var(--mem-space-2);
  margin-top: var(--mem-space-2);
}

.line-item h3 {
  font-size: 0.9rem;
  margin: 0 0 0.3rem;
}

.flash {
  margin-bottom: var(--mem-space-4);
  padding: var(--mem-space-2) var(--mem-space-3);
  border-radius: var(--mem-radius-sm);
  font-size: 0.9rem;
}

.flash--error {
  background: #ffecec;
  border: var(--mem-border-hairline) solid #f5a5a5;
  color: #851b1b;
}

.flash--success {
  background: #e6f6ec;
  border: var(--mem-border-hairline) solid #8bc79f;
  color: #195734;
}

/* Export overlay */
.export-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(0.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
  z-index: 999;
}

.export-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.export-overlay__box {
  min-width: 16.25rem;
  max-width: 22.5rem;
  background: var(--panel, #101010);
  border-radius: 0.625rem;
  border: var(--mem-border-hairline) solid var(--border-subtle, #242424);
  padding: var(--mem-space-4-5) var(--mem-space-5) var(--mem-space-4);
  box-shadow: 0 1.125rem 3.75rem rgba(0, 0, 0, 0.7);
}

.export-overlay__label {
  margin: 0 0 var(--mem-space-2-5);
  font-size: var(--mem-type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft, #a3a3a3);
}

.export-overlay__bar {
  position: relative;
  width: 100%;
  height: 0.375rem;
  border-radius: var(--mem-radius-pill);
  background: var(--border-subtle, #262626);
  overflow: hidden;
}

.export-overlay__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent, #ff7066),
    var(--accent-soft, #ffb27f)
  );
  transition: width 140ms ease-out;
}

.export-overlay__percent {
  margin: var(--mem-space-2) 0 0;
  font-size: var(--mem-type-2xs);
  color: var(--text-soft, #a3a3a3);
  text-align: right;
}

.section {
  background: #fff;
  border-radius: 0.625rem;
  padding: var(--mem-space-5) var(--mem-space-6) var(--mem-space-7);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.04);
}

.form__buttons--inline {
  display: flex;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mem-space-2);
  flex-direction: row;
  justify-content: flex-start;
}

.btn {
  display: inline-block;
  border-radius: var(--mem-radius-pill);
  border: var(--mem-border-hairline) solid #d0d0d7;
  background: #f5f5f7;
  color: #111;
  font-size: 0.9rem;
  text-decoration: none;
}


/* This table class was conflicting with the main table styles. Keeping it separated. */
.table.light-style {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table.light-style th,
.table.light-style td {
  padding: var(--mem-space-2) 0.4rem;
  border-bottom: var(--mem-border-hairline) solid #e2e2e7;
}

.table.light-style thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

/*==================================
9. Cashflow chart wrapper
  ==================================*/
.cashflow-summary {
  display: flex;
  flex-wrap: wrap;
  margin: var(--mem-space-2) 0 var(--mem-space-4);
}

.cashflow-chip {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2);
  padding: var(--mem-space-2) 0.85rem;
  border-radius: var(--radius-md, var(--mem-radius-md));
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: var(--mem-border-hairline) solid var(--border-subtle, #262626);
  min-width: 6.875rem;
}

.cashflow-chip--past {
  border-color: rgba(255,255,255,0.12);
}

.cashflow-chip--total {
  border-color: rgba(255,255,255,0.12);
}

.cashflow-chip__label {
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-soft);
}

.cashflow-chip__value {
  font-size: var(--mem-type-h6);
  font-weight: 600;
}

.chart-wrapper {
  width: 100%;
  max-width: 60rem;
  margin: var(--mem-space-3) auto var(--mem-space-2);
  border-radius: var(--radius-md);
  height: 16.25rem;
}

#cashflowChart {
  width: 100% !important;
  height: 100% !important;
}

/* Small dashboard charts (category breakdown, etc.) */
.chart-wrapper {
  position: relative;
  width: 100%;
}

.chart-wrapper--small {
  max-width: 26.25rem;
  height: 16.25rem;
}

.chart-wrapper--small canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Installment status modal overlay */
.installment-modal {
  position: fixed;
  inset: 0;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.installment-modal--open {
  display: flex;
}

.installment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(0.125rem);
}

.installment-modal__dialog {
  position: relative;
  z-index: 1;
  width: calc(100% - 3rem);
  max-width: 30rem;
}

body.modal-open {
  overflow: hidden;
}

.card.modal-version {
  max-width: 28.125rem;
}


/*==================================
  10. MEDIA QUERIES
  ==================================*/
@media (max-width: 56.25rem) {
  .grid, .grid.grid--two-col {
     grid-template-columns: minmax(0, 1fr);
  }
  .form--columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 50rem) {
}

@media (max-width: 43.75rem) {
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Avatar row inside Business Profile form */
.business-avatar-edit {
  display: flex;
  align-items: start;
  gap: var(--mem-space-5);
  margin-top: var(--mem-space-2);
}

/* Right-hand column: file input + help text */
.business-avatar-edit__controls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;         /* avoid weird overflow in flex layouts */
}

/* Tone down the native file input a bit */
.business-avatar-edit__controls input[type="file"] {
  font-size: 0.85rem;
  max-width: 16.25rem;
}

.business-avatar-edit__controls .form-help-text {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 0.0625rem;
  margin-bottom: 0px;
}

/* Align this field visually with other two-column rows on narrow screens */
@media (max-width: 40rem) {
  .business-avatar-edit {
    flex-direction: row;
    align-items: flex-start;
  }
}

/*==================================
  11. BREADCRUMB
  ==================================*/
.breadcrumb {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  gap: var(--mem-space-1-5);
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: var(--mem-space-3-5);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 140ms;
}

.breadcrumb__sep {
  user-select: none;
  opacity: .8;
}

.breadcrumb__current { color: var(--text); }

/*==================================
  12. PROJECT STATUS BADGES
  ==================================*/
.badge-project {
  display: inline-flex;
  align-items: center;
  padding: var(--mem-space-0-5) 0.5625rem;
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-2xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: var(--mem-border-hairline) solid;
  font-weight: 500;
  white-space: nowrap;
}

.badge-project--active {
  border-color: rgba(100, 210, 130, 0.5);
  color: #8fefaa;
  background: rgba(100, 210, 130, 0.08);
}

.badge-project--completed {
  border-color: rgba(120, 160, 255, 0.5);
  color: #a0b8ff;
  background: rgba(120, 160, 255, 0.08);
}

.badge-project--on_hold {
  border-color: rgba(255, 184, 108, 0.5);
  color: #ffcc80;
  background: rgba(255, 184, 108, 0.08);
}

.badge-project--cancelled {
  border-color: rgba(150, 150, 150, 0.4);
  color: #888;
  background: rgba(150, 150, 150, 0.06);
}

/*==================================
  13. PROJECT LIST CARDS
  ==================================*/








/*==================================
  14. PROJECT DETAIL
  ==================================*/





@media (max-width: 43.75rem) {
}

/*==================================
  15. FORM HELPERS
  ==================================*/
.form--stacked .form__field {
  margin-bottom: var(--mem-space-4);
}

.form-hint {
  font-size: var(--mem-type-2xs);
  color: var(--text-soft);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.form-hint--link {
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms;
}

.form-hint--link:hover { color: var(--text); }

.form-project-actions {
  margin-top: 0.3125rem;
  min-height: 1rem;
}

.form__actions--right {
  justify-content: flex-end;
}

/* Project detail — installment sub-rows */

/* Invoice detail header + export controls */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.invoice-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mem-space-4-5);
  padding-bottom: var(--mem-space-4);
  margin-bottom: var(--mem-space-3-5);
  border-bottom: var(--mem-border-hairline) solid var(--border-subtle);
}

.invoice-detail-header__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-2-5);
  min-width: 0;
}

.invoice-detail-title {
  margin: 0;
  max-width: 27.5rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: normal;
}

.invoice-detail-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mem-space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

.invoice-detail-header__actions form {
  display: inline-flex;
}

.invoice-detail-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mem-space-2-5);
  margin-bottom: var(--mem-space-7);
}

.invoice-toolbar-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-3-5);
  min-width: 0;
  padding: var(--mem-space-2-5);
  border: var(--mem-border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.34));
}

.invoice-toolbar-panel__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 7.5rem;
}

.invoice-toolbar-panel__label {
  color: var(--text);
  font-size: var(--mem-type-2xs);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.invoice-toolbar-panel__hint {
  color: var(--text-soft);
  font-size: var(--mem-type-2xs);
  line-height: 1.2;
}

.invoice-toolbar-panel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mem-space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.invoice-status-form,
.invoice-export-form,
.form-inline--export {
  display: flex;
}

.invoice-status-form #status_select {
  min-width: 8.4375rem;
}

.invoice-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.4375rem;
  min-height: 2rem;
  border-radius: var(--mem-radius-pill);
  border: var(--mem-border-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  background: rgba(12, 12, 12, 0.75);
  backdrop-filter: blur(0.875rem);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.invoice-theme-toggle__text {
  font-size: var(--mem-type-3xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.invoice-theme-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.invoice-theme-toggle__track {
  position: relative;
  width: 2.375rem;
  height: 1.25rem;
  border-radius: var(--mem-radius-pill);
  border: var(--mem-border-hairline) solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  transition: background 160ms ease, border-color 160ms ease;
}

.invoice-theme-toggle__thumb {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--mem-radius-pill);
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.invoice-theme-toggle__input:checked + .invoice-theme-toggle__track {
  border-color: rgba(241, 91, 91, 0.7);
  background: var(--accent-soft);
}

.invoice-theme-toggle__input:checked + .invoice-theme-toggle__track .invoice-theme-toggle__thumb {
  transform: translateX(1.125rem);
  background: var(--text);
}

.invoice-theme-toggle:hover,
.invoice-theme-toggle:focus-within {
  border-color: var(--accent);
  color: #fff;
}

@media (max-width: 60rem) {
  .invoice-detail-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42.5rem) {
  .invoice-detail-header {
    flex-direction: column;
  }

  .invoice-detail-header__actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .invoice-toolbar-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-toolbar-panel__controls {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Proposal editor + admin access */
.proposal-editor{max-width:57.5rem;margin:0 auto}.proposal-editor .form__field{min-width:0}.proposal-editor textarea{width:100%;min-height:6.5625rem}.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mem-space-4)}.proposal-items-heading{margin-top:1.875rem}.proposal-lines{display:grid;gap:var(--mem-space-3)}.proposal-line{display:grid;grid-template-columns:minmax(0,2fr) minmax(5rem,.52fr) minmax(6.5625rem,.7fr) 1.75rem;gap:var(--mem-space-3);align-items:end;}.proposal-line input{width:100%}.proposal-remove-line{color:var(--text-muted);background:transparent;border:0;font-size:1.4375rem;cursor:pointer;min-height:2.25rem}.proposal-detail-title{font-size:1.6875rem;line-height:1.2;margin-top:var(--mem-space-3)}.proposal-summary-number{font-size:clamp(2.375rem,5vw,4.25rem);margin:1.5625rem 0;}.proposal-summary-number span{font-size:var(--mem-type-body-lg);letter-spacing:0}.proposal-detail-actions{display:flex;gap:var(--mem-space-2-5);align-items:center;flex-wrap:wrap;margin:1.4375rem 0}.proposal-detail-actions form{margin:0}.proposal-detail-section-title{margin-top:var(--mem-space-7);font-size:var(--mem-type-sm)}.proposal-multiline{white-space:pre-line;overflow-wrap:anywhere}.proposal-status{display:inline-block;font-size:var(--mem-type-2xs);letter-spacing:.08em;text-transform:uppercase;color:#bbb;padding:0.3125rem 0.5625rem;border:var(--mem-border-hairline) solid #555;border-radius:1.875rem}.proposal-status--archived{color:#858585}.small{font-size:var(--mem-type-xs)}.muted{color:var(--text-muted)}.eyebrow{font-size:var(--mem-type-3xs);}.login-body{display:grid;min-height:100vh;place-items:center;padding:1.375rem}.login-panel h1{font-size:2rem;font-weight:400;}.login-panel input{width:100%}.login-panel button{margin-top:1.0625rem;padding:var(--mem-space-3) var(--mem-space-4);border-radius:var(--mem-radius-md);color:var(--text);background:var(--accent);border:0;cursor:pointer}.app-nav .logout-form{display:inline-flex;align-items:center;margin:0}.logout-button{font:inherit;background:transparent;border:0;padding:var(--mem-space-2) var(--mem-space-3)}.logout-button:hover{color:var(--text)}@media(max-width:43.75rem){.proposal-line{grid-template-columns:repeat(2,minmax(0,1fr))}.proposal-line .form__field:first-child{grid-column:1/-1}.proposal-remove-line{grid-column:2;justify-self:end}.form-grid-2{grid-template-columns:1fr}}