@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap");

/* Gemonio UI Core 1.2.2 ----------------------------------------------------
   SINGLE SOURCE OF TRUTH für die gemeinsame Gemonio-CI.
   Geladen NACH den lokalen App-Styles und deshalb bewusst autoritativ.
   Lokal bleiben nur fach-/ansichtsspezifische Layoutregeln.
*/
:root{
  --g-bg:#f4f6f8;
  --g-surface:#ffffff;
  --g-surface-soft:#f8fafb;
  --g-text:#18262e;
  --g-text-strong:#202a31;
  --g-muted:#6d7981;
  --g-muted-2:#879198;
  --g-line:#dfe5e8;
  --g-line-soft:#edf1f3;
  --g-brand:#123849;
  --g-brand-hover:#0e2d3a;
  --g-green-bg:#eff8f2;
  --g-green:#1b7a41;
  --g-amber-bg:#fff4d8;
  --g-amber:#8a5c00;
  --g-orange-bg:#fff0e5;
  --g-orange:#9c561f;
  --g-red-bg:#fdecec;
  --g-red:#9f2929;
  --g-neutral-bg:#f1f4f6;
  --g-neutral:#65717a;
  --g-radius-sm:9px;
  --g-radius:14px;
  --g-radius-lg:18px;
  --g-shadow:0 4px 18px rgba(20,35,45,.05);
  --g-shadow-hover:0 10px 26px rgba(20,35,45,.09);
  --g-data-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

html{background:var(--g-bg)!important}
body{background:var(--g-bg)!important;color:var(--g-text)!important;font-family:"Open Sans",sans-serif!important;font-weight:400!important}

/* Typography --------------------------------------------------------------- */
body,button,input,select,textarea,optgroup,.button,
.topbar,.topbar *,.workspace-nav,.workspace-nav *,.workspace-switch,.workspace-switch *,
.app-switch,.app-switch *,.card,.summary-box,.summary-strip,.customer-table,.domain-table,.footer,
.page-title,.toolbar,.facts,.notice,.actions,.field-hint{
  font-family:"Open Sans",sans-serif!important;
}
h1,h2,h3,h4,h5,h6,.page-title h1,.brand h1,.app h2{
  font-family:"Open Sans",sans-serif!important;
  font-weight:500!important;
  color:var(--g-text-strong);
}
strong,b{font-weight:600!important}
.topbar-brand strong,.workspace-nav a,.workspace-nav summary,.workspace-switch a,.app-switch a,
.button,button,input[type=submit],input[type=button],label,.customer-name-link,.row-actions a{
  font-weight:500!important;
}
.customer-table th,.domain-table th,.eyebrow,.status-pill,.payment-status,.badge,.customer-status,
.service-pill,.bank-known-badge{
  font-weight:600!important;
}

/* Data typography: bewusst separat und immer leicht. */
.gemonio-data,.gemonio-data-value,.meta-value,
.customer-form input[name="customer_number"],.customer-form input[type="date"],.customer-form input[type="time"],
.invoice-journal-number,.invoice-journal-date,.faktura-invoice-number-cell,.faktura-position-number,
.bulk-date-cell,.bulk-date-meta,.gemonio-status-version,.bank-iban,.site-domain-one-line,
.customer-number,.customer-id,.domain-name,.host-name,.technical-id,time,code{
  font-family:var(--g-data-font)!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
  font-weight:400!important;
  font-style:normal;
}
.gemonio-data strong,.gemonio-data-value strong,strong.gemonio-data,strong.gemonio-data-value,
.customer-number-data,.customer-modified-data{
  font-weight:400!important;
}

/* App chrome --------------------------------------------------------------- */
.topbar{background:#10242e!important;color:#fff!important;border:0!important;box-shadow:none!important}
.topbar-brand strong{letter-spacing:-.012em}
.topbar-brand span{opacity:.68}
.workspace-switch,.app-switch{gap:5px}
.workspace-switch a,.app-switch a{border-radius:999px!important;transition:.15s ease}
.workspace-switch a.active,.app-switch a.active{background:rgba(255,255,255,.14)!important;color:#fff!important}
.workspace-nav a,.workspace-nav summary{border-radius:var(--g-radius-sm)!important}

/* Cards -------------------------------------------------------------------- */
.card,.summary-box,.summary-strip>div{
  background:var(--g-surface);
  border-color:var(--g-line);
  border-radius:var(--g-radius-lg)!important;
  box-shadow:var(--g-shadow)!important;
}
/* Semantic/app-specific card variants (e.g. Monitor Sites/AKUT) deliberately
   keep their own more-specific background and border colours. The Core owns
   the neutral default, not the meaning of a specialised KPI. */
.card:not(.table-card){padding:22px}
.page-title h1{letter-spacing:-.025em}
.page-title p,.description,.muted{color:var(--g-muted)!important}

/* Buttons ------------------------------------------------------------------ */
.button,button,input[type=submit],input[type=button]{
  border-radius:10px!important;
  font-weight:500!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.button:not(.secondary):not(.danger),button:not(.secondary):not(.danger){background:var(--g-brand)}
.button:not(.secondary):not(.danger):hover,button:not(.secondary):not(.danger):hover{background:var(--g-brand-hover)}
.button.secondary{background:#edf2f4!important;color:var(--g-brand)!important}
.button.secondary:hover{background:#e4ebee!important}

/* Form controls ------------------------------------------------------------ */
input,select,textarea{border-color:#cfd8dd;border-radius:10px;background:#fff;color:var(--g-text)}
input:focus,select:focus,textarea:focus{border-color:#8ca1ad!important;box-shadow:0 0 0 3px rgba(18,56,73,.08)!important;outline:none}
label{color:#34434c}.field-hint{color:var(--g-muted)}

/* Tables ------------------------------------------------------------------- */
.customer-table,.domain-table{border-collapse:collapse;width:100%}
.customer-table th,.domain-table th{
  background:var(--g-surface-soft)!important;
  color:#69767f!important;
  font-size:11px;
  font-weight:600!important;
  letter-spacing:.045em;
  border-bottom:1px solid var(--g-line)!important;
}
.customer-table td,.domain-table td{border-bottom:1px solid var(--g-line-soft)!important;vertical-align:middle}
.customer-table tbody tr:hover td,.domain-table tbody tr:hover td{background:#fafcfd}

/* Status semantics --------------------------------------------------------- */
.payment-status-paid,.status-paid,.badge.ok,.status-ok{background:var(--g-green-bg)!important;color:var(--g-green)!important}
.payment-status-open,.status-open,.badge.warn,.status-attention{background:var(--g-amber-bg)!important;color:var(--g-amber)!important}
.payment-status-review,.status-review{background:var(--g-orange-bg)!important;color:var(--g-orange)!important}
.badge.bad,.status-critical,.status-error{background:var(--g-red-bg)!important;color:var(--g-red)!important}
.status-neutral,.status-inactive{background:var(--g-neutral-bg)!important;color:var(--g-neutral)!important}
.payment-status,.badge,.status-pill{border-radius:999px!important}

/* Notices + footer --------------------------------------------------------- */
.notice{border-radius:12px}.notice.ok{background:var(--g-green-bg);color:var(--g-green)}.notice.bad{background:var(--g-red-bg);color:var(--g-red)}
.footer{color:#7c878e!important;font-size:12px;text-align:center}
.nav-attention-badge{font-family:var(--g-data-font)!important;font-variant-numeric:tabular-nums;font-weight:400!important}

@media(max-width:760px){.card:not(.table-card){padding:18px}}


/* Action toolbar -----------------------------------------------------------
   Gemeinsame kompakte Aktionsleiste für primäre + sekundäre Werkzeuge. */
.page-title.compact .gemonio-action-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  width:auto!important;
  padding:7px!important;
  border:1px solid var(--g-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--g-shadow)!important;
}
.gemonio-action-toolbar .gemonio-action-group{display:flex;align-items:center;gap:5px;min-width:0}
.page-title.compact .gemonio-action-toolbar .button,
.page-title.compact .gemonio-action-toolbar summary.button{
  min-height:36px!important;
  margin:0!important;
  padding:8px 12px!important;
  border:1px solid #d9e0e4!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--g-brand)!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  white-space:nowrap;
}
.page-title.compact .gemonio-action-toolbar .button:hover,
.page-title.compact .gemonio-action-toolbar summary.button:hover{
  background:var(--g-surface-soft)!important;
  border-color:#c7d1d7!important;
  transform:none!important;
  box-shadow:none!important;
}
.page-title.compact .gemonio-action-toolbar .gemonio-action-primary{
  background:var(--g-brand)!important;
  border-color:var(--g-brand)!important;
  color:#fff!important;
}
.page-title.compact .gemonio-action-toolbar .gemonio-action-primary:hover{background:var(--g-brand-hover)!important;border-color:var(--g-brand-hover)!important;color:#fff!important}
.gemonio-action-separator{width:1px;height:25px;background:var(--g-line);flex:0 0 1px}
.gemonio-action-menu{position:relative;margin:0}
.gemonio-action-menu>summary{list-style:none;cursor:pointer;display:flex!important;align-items:center;gap:6px}
.gemonio-action-menu>summary::-webkit-details-marker{display:none}
.gemonio-action-menu-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:1000;
  min-width:190px;padding:6px;background:#fff;border:1px solid var(--g-line);
  border-radius:12px;box-shadow:0 14px 36px rgba(18,56,73,.14)
}
.gemonio-action-menu-panel a{display:block;padding:9px 10px;border-radius:8px;color:var(--g-brand);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.gemonio-action-menu-panel a:hover{background:var(--g-surface-soft)}
/* Red-Dot-Indikator kommt aus dem bestehenden Scan-State, kein zweiter Pseudo-Punkt. */
.page-title.compact .gemonio-action-toolbar .button-red-dot::before{content:none!important;display:none!important}
@media(max-width:1100px){
  .page-title.compact .gemonio-action-toolbar{flex-wrap:wrap!important;justify-content:flex-start!important;width:100%!important}
  .gemonio-action-separator{display:none}
}
@media(max-width:700px){
  .gemonio-action-toolbar .gemonio-action-group{flex-wrap:wrap}
  .page-title.compact .gemonio-action-toolbar .button,.page-title.compact .gemonio-action-toolbar summary.button{font-size:12px!important;padding:7px 9px!important}
}