/* Interface Meligai: portal identity, task-oriented density.
   Opt-in shell only: never imported into a customer's rendered document. */
.meligai-customer-ui {
  --customer-navy: #071a33;
  --customer-blue: #2563ff;
  --customer-yellow: #ffdb46;
  --customer-action: #2563ff;
  --customer-action-hover: #174dcc;
  --customer-paper: #fffaf0;
  --customer-muted: #475569;
  --customer-line: #758398;
  --customer-error: #b91c1c;
  --customer-radius: 11px;
  --customer-control-shadow: 2px 3px 0 var(--customer-navy);
  --editor-navy: var(--customer-navy);
  --editor-text: var(--customer-navy);
  --editor-muted: var(--customer-muted);
  --editor-blue: var(--customer-blue);
  --editor-surface: var(--customer-paper);
  --editor-line: var(--customer-line);
  color: var(--customer-navy);
  background-color: var(--customer-paper);
  font-family: Inter, system-ui, sans-serif;
}

.meligai-customer-ui :is(.app-topbar, .contextual-editor-topbar) {
  background: var(--customer-paper);
  border-bottom: 2px solid var(--customer-navy);
  box-shadow: 0 4px 0 rgb(7 26 51 / 8%);
  backdrop-filter: none;
}

.meligai-customer-ui :is(.app-page-heading h1, .client-task-header h1,
  .domain-workspace__header h1, .contextual-editor-empty-start h1, .auth-heading h1) {
  font-family: Poppins, Inter, sans-serif;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Explicit customer authentication pages only; the internal access shell and
   the already approved customer login keep their own presentation. */
.meligai-customer-ui .auth-main { background: var(--customer-paper); }
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-main {
  background: linear-gradient(135deg, var(--customer-yellow), #ffc126 48%, #ff9d1a);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-content {
  background: var(--customer-paper);
  border-inline: 2px solid var(--customer-navy);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-brand-panel {
  background: var(--customer-blue);
  border-right: 2px solid var(--customer-navy);
  box-shadow: inset -6px 0 0 rgb(7 26 51 / 12%);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-brand-panel > a {
  width: fit-content;
  background: var(--customer-navy);
  padding: .65rem .9rem;
  border: 2px solid var(--customer-paper);
  border-radius: 16px;
  box-shadow: 4px 5px 0 var(--customer-navy);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-brand-panel :is(.text-slate-200, .text-slate-400) {
  color: #fff;
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-benefit-icon {
  background: var(--customer-paper);
  color: var(--customer-navy);
  border: 1px solid var(--customer-navy);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-brand-panel a:focus-visible {
  outline-color: var(--customer-yellow);
}
.auth-page.meligai-customer-ui:not(.auth-page--client-beta) .auth-mobile-logo {
  border-bottom: 2px solid var(--customer-navy);
}

/* The Home accent belongs to the customer chrome, not the working document. */
.meligai-customer-ui.app-page .app-topbar {
  box-shadow: inset 0 -6px 0 var(--customer-yellow), 0 4px 0 rgb(7 26 51 / 8%);
}
.meligai-customer-ui.app-page .client-sidebar__product-icon {
  background: var(--customer-blue);
  color: #fff;
}
.meligai-customer-ui .auth-heading h1 { color: var(--customer-navy); }
.meligai-customer-ui .auth-heading > p:not(.auth-eyebrow) { color: var(--customer-muted); }
.meligai-customer-ui .auth-eyebrow { color: var(--customer-action); }

.meligai-customer-ui :is(.btn-primary, .btn-secondary, .btn-danger) {
  min-height: 44px;
  border: 2px solid var(--customer-navy);
  border-radius: var(--customer-radius);
  box-shadow: var(--customer-control-shadow);
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
}

.meligai-customer-ui .btn-primary {
  background: var(--customer-action);
  color: #fff;
}
.meligai-customer-ui .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--customer-action-hover);
}
.meligai-customer-ui .btn-secondary {
  background: #fff;
  color: var(--customer-navy);
}
.meligai-customer-ui .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #eaf1ff;
  color: var(--customer-navy);
}
.meligai-customer-ui .btn-danger {
  background: var(--customer-error);
  color: #fff;
}
.meligai-customer-ui .btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #991b1b;
}
.meligai-customer-ui :is(.btn-primary, .btn-secondary, .btn-danger):is(:disabled, [aria-disabled="true"]) {
  background: #e2e8f0;
  color: var(--customer-muted);
  border-color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  filter: none;
}

.meligai-customer-ui :is(.form-control, .form-select),
.meligai-customer-ui .auth-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid var(--customer-line);
  border-radius: var(--customer-radius);
  color: var(--customer-navy);
  background-color: #fff;
}
.meligai-customer-ui :is(.form-label, .app-eyebrow) { color: var(--customer-navy); }
.meligai-customer-ui .form-help { color: var(--customer-muted); }
.meligai-customer-ui .auth-form .form-field--error input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--customer-error);
}
.meligai-customer-ui :is(.form-control, .form-select):disabled {
  background-color: #e2e8f0;
  color: var(--customer-muted);
}
.meligai-customer-ui :is(.form-field--error .form-control,
  .form-field--error .form-select, [aria-invalid="true"]) {
  border-color: var(--customer-error);
}
.meligai-customer-ui .field-error { color: var(--customer-error); }

/* Task controls in the customer workspace only. Editor tool surfaces keep
   their independently reviewed rules; internal management never opts in. */
.meligai-customer-ui.app-page .icon-button {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--customer-navy);
  border-radius: var(--customer-radius);
  background: #fff;
  color: var(--customer-navy);
  box-shadow: var(--customer-control-shadow);
}
.meligai-customer-ui.app-page .icon-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #eaf1ff;
}
.meligai-customer-ui.app-page .icon-button--danger {
  color: var(--customer-error);
  border-color: var(--customer-error);
}
.meligai-customer-ui.app-page .icon-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #fef2f2;
}
.meligai-customer-ui.app-page .icon-button:is(:disabled, [aria-disabled="true"]) {
  background: #e2e8f0;
  color: var(--customer-muted);
  border-color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}
.meligai-customer-ui .client-name-choice {
  border: 2px solid var(--customer-navy);
  border-radius: var(--customer-radius);
  color: var(--customer-navy);
  background: #fff;
}
.meligai-customer-ui .client-name-choice input {
  accent-color: var(--customer-blue);
}
.meligai-customer-ui .client-name-choice:has(input:checked) {
  border-color: var(--customer-blue);
  background: var(--customer-paper);
  box-shadow: var(--customer-control-shadow);
}
.meligai-customer-ui .client-name-choice:has(input:disabled) {
  color: var(--customer-muted);
  background: #e2e8f0;
  box-shadow: none;
  cursor: not-allowed;
}

.meligai-customer-ui .client-name-preference__errors {
  display: grid;
  grid-column: 1 / -1;
  gap: .5rem;
}
.meligai-customer-ui .client-name-preference__form {
  grid-template-columns: minmax(0, 1fr);
}
.meligai-customer-ui .client-name-preference__form .field-error {
  color: var(--customer-error);
}
.meligai-customer-ui .client-name-preference__form > button[type="submit"] {
  grid-column: 1;
  grid-row: auto;
  align-self: end;
  justify-self: start;
}

/* A selection control stays native; target size belongs to its label, not to
   an enlarged checkbox that obscures the selected state. */
.meligai-customer-ui :is(.form-check, .form-checkbox-row) {
  min-height: 44px;
  align-items: center;
}
.meligai-customer-ui :is(.form-checkbox, .form-check input) {
  accent-color: var(--customer-blue);
  border-color: var(--customer-line);
}
.meligai-customer-ui :is(.form-help a, .form-check a, .auth-link, .auth-switch a) {
  color: #174dcc;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}
.meligai-customer-ui :is(.app-alert, .status-badge) {
  border-radius: var(--customer-radius);
}
.meligai-customer-ui .app-alert {
  border-inline-start-width: 4px;
}
.meligai-customer-ui .app-alert--error { border-inline-start-color: var(--customer-error); }
.meligai-customer-ui .app-alert--warning { border-inline-start-color: #92400e; }
.meligai-customer-ui .app-alert--success { border-inline-start-color: #047857; }
.meligai-customer-ui .app-alert--info { border-inline-start-color: var(--customer-blue); }

/* Editor-owned controls, never the preview document. Keep geometry and event
   hooks in contextual-editor.css/JS authoritative. */
.meligai-customer-ui :is(.contextual-editor-tools, .contextual-editor-viewport) {
  background: var(--customer-paper);
  border: 2px solid var(--customer-navy);
  border-radius: var(--customer-radius);
  box-shadow: var(--customer-control-shadow);
  backdrop-filter: none;
}
.meligai-customer-ui :is(.contextual-editor-tools, .contextual-editor-viewport) button {
  color: var(--customer-navy);
}
.meligai-customer-ui .contextual-editor-tools button.is-active {
  background: var(--customer-blue);
  color: #fff;
  box-shadow: none;
}
.meligai-customer-ui .contextual-editor-viewport button.is-active {
  background: var(--customer-navy);
  color: #fff;
}
/* The segmented control clips its corners: keep keyboard focus inside it. */
.meligai-customer-ui .contextual-editor-viewport button:focus-visible {
  outline-offset: -4px;
  outline-color: var(--customer-action);
}
.meligai-customer-ui :is(.contextual-panel__header, .contextual-panel__tabs) {
  background: var(--customer-paper);
  border-bottom-color: var(--customer-line);
}
.meligai-customer-ui .contextual-panel__tabs button { color: var(--customer-muted); }
.meligai-customer-ui .contextual-panel__tabs button.is-active {
  color: var(--customer-navy);
  border-bottom-color: var(--customer-action);
}
.meligai-customer-ui .contextual-panel__intro {
  background: var(--customer-paper);
  border-color: var(--customer-line);
}

.meligai-customer-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--customer-blue);
  outline-offset: 3px;
}
.meligai-customer-ui .app-nav__item.is-active {
  background: #eaf1ff;
  color: var(--customer-navy);
  box-shadow: inset 4px 0 0 var(--customer-action);
}
.meligai-customer-ui :is(.app-dialog, .client-account-menu__panel) {
  border: 2px solid var(--customer-navy);
  border-radius: 18px;
  background: var(--customer-paper);
}

/* Invoice summaries stay comparable; long terms and actions use the full row. */
.meligai-customer-ui .finance-row--customer-invoice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.meligai-customer-ui .finance-row--customer-invoice > div { min-width: 0; }
.meligai-customer-ui .customer-invoice-section {
  grid-column: 1 / -1;
  border-top: 1px solid var(--customer-line);
  padding-top: 1rem;
}
.meligai-customer-ui .customer-invoice-section .management-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 639px) {
  .meligai-customer-ui .finance-row--customer-invoice,
  .meligai-customer-ui .customer-invoice-section .management-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .meligai-customer-ui.app-page .icon-button,
  .meligai-customer-ui .client-name-choice {
    border-color: ButtonText;
    box-shadow: none;
  }
  .meligai-customer-ui .client-name-choice:has(input:checked) {
    border-color: Highlight;
    box-shadow: none;
  }
  .meligai-customer-ui :is(.btn-primary, .btn-secondary, .btn-danger) {
    border-color: ButtonText;
    box-shadow: none;
  }
  .meligai-customer-ui :focus-visible { outline-color: Highlight; }
}

/* The compact selector includes its address below the control. */
@media (min-width: 1024px) {
  .meligai-customer-ui.customer-product-shell .app-topbar {
    height: 104px;
    padding-block: 10px;
  }
  .meligai-customer-ui.customer-product-shell .app-sidebar {
    top: 104px;
    height: calc(100vh - 104px);
  }
}