/* Provisional visual layer for the foundation stage. Values are CSS
   variables on purpose so a later design pass (informed by the AMEISE Beta
   review) can be dropped in without touching template markup. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:root {
  --color-bg: #f3f4f2;
  --color-card: #ffffff;
  --color-ink: #20231d;
  --color-ink-muted: #5a5f57;
  --color-accent: #f56336;
  --color-accent-ink: #20231d;
  --color-border: #e3e5e0;
  --color-danger: #c2410c;
  --color-success: #2f7a3e;
  --radius-card: 20px;
  --radius-input: 10px;
  --font-base: 15px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--font-base);
  line-height: 1.5;
}

a { color: inherit; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

.btn-block { width: 100%; }

.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table.data-table {
  min-width: 480px;
}

.app-main {
  flex: 1;
  min-width: 0;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
  gap: 12px;
  flex-wrap: wrap;
}

.app-topbar > div { min-width: 0; overflow-wrap: anywhere; }

.app-content {
  padding: 28px;
  max-width: 1100px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}

.page-header p {
  margin: 0;
  color: var(--color-ink-muted);
}

.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  padding: 20px;
  margin-bottom: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.stat-card .stat-label {
  color: var(--color-ink-muted);
  font-size: 0.85rem;
}

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-input);
  border: 1px solid transparent;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.92rem;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.input, select.input, textarea.input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-ink);
}

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.88rem; }
.field .help { color: var(--color-ink-muted); font-size: 0.8rem; }
.field .errorlist { color: var(--color-danger); list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.82rem; }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.checkbox-row label { font-weight: 500; margin: 0; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card);
}

table.data-table th, table.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

table.data-table th { color: var(--color-ink-muted); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active { background: #e4f3e6; color: var(--color-success); }
.badge-pending { background: #fdeddc; color: #b15c16; }
.badge-suspended { background: #fbe4e0; color: var(--color-danger); }
.badge-terminated { background: #e7e7e5; color: var(--color-ink-muted); }

.badge-mail-queued, .badge-mail-processing { background: #fdeddc; color: #b15c16; }
.badge-mail-captured, .badge-mail-submitted { background: #e4f3e6; color: var(--color-success); }
.badge-mail-failed { background: #fbe4e0; color: var(--color-danger); }
.badge-mail-uncertain { background: #fdf6d8; color: #8a6d00; }
.badge-mail-cancelled { background: #e7e7e5; color: var(--color-ink-muted); }

.badge-run-never-started { background: #e7e7e5; color: var(--color-ink-muted); }
.badge-run-running { background: #fdeddc; color: #b15c16; }
.badge-run-healthy { background: #e4f3e6; color: var(--color-success); }
.badge-run-stale { background: #fdf6d8; color: #8a6d00; }
.badge-run-error { background: #fbe4e0; color: var(--color-danger); }

.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--color-ink-muted);
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.messages { list-style: none; margin: 0 0 16px; padding: 0; }
.messages li {
  padding: 10px 14px;
  border-radius: var(--radius-input);
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.messages .success { background: #e4f3e6; color: var(--color-success); }
.messages .error { background: #fbe4e0; color: var(--color-danger); }
.messages .info { background: #eef1ed; color: var(--color-ink); }

.account-menu { display: flex; align-items: center; gap: 14px; }
.account-menu .org-name { color: var(--color-ink-muted); font-size: 0.85rem; }

.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 650px) {
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.detail-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.detail-main { flex: 1; min-width: 0; }
.detail-main table.data-table { min-width: 0; table-layout: fixed; }
.detail-main table.data-table th { width: 38%; }
.detail-main table.data-table td { overflow-wrap: anywhere; }

.detail-context {
  width: 320px;
  flex-shrink: 0;
}

.context-panel-section {
  margin-bottom: 14px;
}

.context-panel-section h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  margin: 0 0 8px;
}

.context-panel-section.disabled {
  opacity: 0.6;
}

.activity-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.activity-item:last-child { border-bottom: none; }
.activity-item .activity-meta { color: var(--color-ink-muted); font-size: 0.76rem; }

.completeness-note {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
}

@media (max-width: 900px) {
  .detail-layout { flex-direction: column; }
  .detail-main { width: 100%; }
  .detail-context { width: 100%; }
}

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .app-content { padding: 16px; }
}

/* Customer dossier: header, main/context tab navs, tag chips. */

.customer-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.customer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.customer-header-meta {
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  margin: 2px 0 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef1ed;
  color: var(--color-ink);
  font-size: 0.78rem;
}

.tag-chip button {
  border: none;
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
}

.dossier-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
}

.dossier-tabs a {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-ink-muted);
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

.dossier-tabs a.active {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.panel-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.panel-tabs a {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--radius-input);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  background: #eef1ed;
}

.panel-tabs a.active {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.inline-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.inline-form .field { margin-bottom: 0; flex: 1; min-width: 140px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 650px) {
  .customer-header { flex-direction: column; }
  .dossier-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Customer workspace: independent main/context areas, aligned at the top. */
.detail-layout-single { grid-template-columns: minmax(0, 1fr); }
.detail-context { align-self: start; min-width: 0; }
.document-status-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.document-status { font-size: .75rem; color: var(--color-ink-muted); text-decoration: none; border: 1px solid var(--color-border); border-radius: 8px; padding: 5px 7px; }
.document-status:hover { color: var(--color-accent); border-color: var(--color-accent); }
.panel-tabs { flex-wrap: wrap; }

.customer-workspace { max-width: none; }
.customer-workspace .detail-context { width: clamp(300px, 27vw, 420px); }
.customer-workspace .detail-main table.data-table { table-layout: auto; }
.customer-workspace .detail-main table.data-table th { width: auto; }
.customer-workspace .detail-main table.data-table td { overflow-wrap: normal; }
.customer-workspace .contract-register { min-width: 650px; }
.customer-workspace .contract-register td { vertical-align: top; }
.contract-register .contract-meta { display: block; color: var(--color-ink-muted); font-size: .78rem; margin-top: 5px; }
.contract-register .contract-dates { white-space: nowrap; }
.contract-register .contract-premium { text-align: right; min-width: 130px; }
@media (max-width: 1100px) {
  .customer-workspace .detail-layout { flex-direction: column; }
  .customer-workspace .detail-context { width: 100%; }
}

/* Operator access list (templates/operator/access_list.html): desktop
   keeps the ordinary filter row and scrollable data-table; scoped to
   .operator-access-* only so no other list/table on the site is affected. */
.operator-access-search { max-width: 260px; }

@media (max-width: 640px) {
  .operator-access-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .operator-access-toolbar .field { width: 100%; margin-bottom: 10px; }
  .operator-access-search { max-width: none; }
  .operator-access-filter-submit { width: 100%; }

  .operator-access-table-wrap { overflow-x: visible; }

  /* workspace.css's unscoped table.data-table th/td rules load after this
     file and match at equal specificity, so every rule below is prefixed
     with the .operator-access-table-wrap ancestor to outrank them
     regardless of stylesheet order -- a bare "table.operator-access-table
     td" is not enough. */
  .operator-access-table-wrap table.operator-access-table { min-width: 0; }
  .operator-access-table-wrap table.operator-access-table thead { display: none; }
  .operator-access-table-wrap table.operator-access-table,
  .operator-access-table-wrap table.operator-access-table tbody,
  .operator-access-table-wrap table.operator-access-table tr,
  .operator-access-table-wrap table.operator-access-table td {
    display: block;
    width: 100%;
  }
  .operator-access-table-wrap table.operator-access-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .operator-access-table-wrap table.operator-access-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
    font-size: 14px;
    min-width: 0;
  }
  .operator-access-table-wrap table.operator-access-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  /* Name/username cell only: label above, full-width wrapping name below,
     instead of the squeezed label-left/value-right row every other cell
     uses -- a long name or username must never be cut to a ~90px column. */
  .operator-access-table-wrap table.operator-access-table td.operator-access-name-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }
  .operator-access-table-wrap table.operator-access-table td.operator-access-name-cell .row-primary-link {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
  }

  .operator-access-table-wrap .row-edit-link { width: 44px; height: 44px; }
}

/* Operator invitation list (templates/operator/invitation_list.html):
   same card-stacking treatment below 1024px as the operator access table
   above, scoped to .operator-invitation-* only. Wider than the 640px used
   there: this table's actions cell holds two full-width buttons, which
   clip behind horizontal scroll on a tablet (~820px) viewport well above
   640px -- the access table has no such cell, so its own breakpoint stays
   unchanged. */
.operator-invitation-actions-cell form { display: inline-block; margin: 0 8px 0 0; }
.operator-invitation-actions-cell form:last-child { margin-right: 0; }

@media (max-width: 1024px) {
  .operator-invitation-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .operator-invitation-toolbar .field { width: 100%; margin-bottom: 10px; }
  .operator-invitation-filter-submit { width: 100%; }

  .operator-invitation-table-wrap { overflow-x: visible; }

  /* workspace.css's unscoped table.data-table th/td rules load after this
     file and match at equal specificity, so every rule below is prefixed
     with the .operator-invitation-table-wrap ancestor, mirroring the
     .operator-access-table-wrap block above. */
  .operator-invitation-table-wrap table.operator-invitation-table { min-width: 0; }
  .operator-invitation-table-wrap table.operator-invitation-table thead { display: none; }
  .operator-invitation-table-wrap table.operator-invitation-table,
  .operator-invitation-table-wrap table.operator-invitation-table tbody,
  .operator-invitation-table-wrap table.operator-invitation-table tr,
  .operator-invitation-table-wrap table.operator-invitation-table td {
    display: block;
    width: 100%;
  }
  .operator-invitation-table-wrap table.operator-invitation-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .operator-invitation-table-wrap table.operator-invitation-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
    font-size: 14px;
    min-width: 0;
  }
  .operator-invitation-table-wrap table.operator-invitation-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  /* Actions cell only: label above, full-width stacked buttons below,
     instead of the squeezed label-left/value-right row every other cell
     uses -- two side-by-side forms would otherwise be cut to a sliver. */
  .operator-invitation-table-wrap table.operator-invitation-table td.operator-invitation-actions-cell {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .operator-invitation-table-wrap table.operator-invitation-table td.operator-invitation-actions-cell form {
    display: block;
    margin: 0;
  }
  .operator-invitation-table-wrap table.operator-invitation-table td.operator-invitation-actions-cell .btn {
    width: 100%;
    text-align: center;
  }
}

/* Operator module list (templates/operator/module_list.html): same
   card-stacking treatment as .operator-access-table-wrap above, scoped to
   .operator-module-* only so no other list/table on the site is affected. */
.operator-module-search { max-width: 260px; }

@media (max-width: 640px) {
  .operator-module-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .operator-module-toolbar .field { width: 100%; margin-bottom: 10px; }
  .operator-module-search { max-width: none; }
  .operator-module-filter-submit { width: 100%; }

  .operator-module-table-wrap { overflow-x: visible; }

  /* workspace.css's unscoped table.data-table th/td rules load after this
     file and match at equal specificity, so every rule below is prefixed
     with the .operator-module-table-wrap ancestor, mirroring the
     .operator-access-table-wrap block above. */
  .operator-module-table-wrap table.operator-module-table { min-width: 0; }
  .operator-module-table-wrap table.operator-module-table thead { display: none; }
  .operator-module-table-wrap table.operator-module-table,
  .operator-module-table-wrap table.operator-module-table tbody,
  .operator-module-table-wrap table.operator-module-table tr,
  .operator-module-table-wrap table.operator-module-table td {
    display: block;
    width: 100%;
  }
  .operator-module-table-wrap table.operator-module-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .operator-module-table-wrap table.operator-module-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
    font-size: 14px;
    min-width: 0;
  }
  .operator-module-table-wrap table.operator-module-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }
  .operator-module-table-wrap .row-edit-link { width: 44px; height: 44px; }
}

/* Module configuration toggles (templates/operator/module_form.html,
   templates/tenants/module_usage.html): the whole labeled row is the
   44px+ touch target, not just the native checkbox square, and the
   description sits directly beneath so the toggle's effect is never
   ambiguous. Scoped to .module-toggle only. */
.module-toggle { margin-bottom: 18px; }
.module-toggle .toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
}
.module-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.module-toggle .help { margin: 4px 0 0 30px; }

/* Module/Nutzung usage summary (operator and org-admin screens): the
   stat-card grid already wraps via .card-grid's auto-fit columns, this
   only tightens the section's own vertical rhythm. */
.usage-section .card-grid { margin-top: 12px; margin-bottom: 0; }
.usage-section .stat-exact { color: var(--color-ink-muted); font-size: 0.78rem; margin-top: 2px; }

/* Customer-limit input (templates/operator/module_form.html): the base
   .input rule has no min-height, which renders below the 44px touch
   target. Scoped to .capacity-section only -- no other layout change. */
.capacity-section .input { min-height: 44px; }

/* Customer access management (templates/customer_portal/manage.html):
   same card-stacking treatment below 1024px as
   .operator-invitation-table-wrap above, scoped to
   .customer-portal-* only. Shared by both the invitation and the
   identity table on that page. */
.customer-portal-actions-cell form { display: inline-block; margin: 0 8px 0 0; }
.customer-portal-actions-cell form:last-child { margin-right: 0; }

@media (max-width: 1024px) {
  .customer-portal-invitation-table-wrap,
  .customer-portal-identity-table-wrap { overflow-x: visible; }

  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table { min-width: 0; }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table thead,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table thead { display: none; }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table,
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table tbody,
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table tr,
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table tbody,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table tr,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td {
    display: block;
    width: 100%;
  }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table tr,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
    font-size: 14px;
    min-width: 0;
  }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td::before,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  /* Actions cell only: label above, full-width stacked buttons below. */
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td.customer-portal-actions-cell,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td.customer-portal-actions-cell {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td.customer-portal-actions-cell form,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td.customer-portal-actions-cell form {
    display: block;
    margin: 0;
  }
  .customer-portal-invitation-table-wrap table.customer-portal-invitation-table td.customer-portal-actions-cell .btn,
  .customer-portal-identity-table-wrap table.customer-portal-identity-table td.customer-portal-actions-cell .btn {
    width: 100%;
    text-align: center;
  }
}