/* ============================================================
   G1 HV — Design system v2
   Brand:  #67A0D2 blue · #B3CFE8 light blue · #1D1D1B ink · #6A6A6A grey
   Accents: #2E9B8F teal · #E1A23B amber
   Font:   Inter (300 display / 400 body / 600 emphasis)
   The MudTheme (toolkit MudMainLayout._devCTheme) owns palette + radius;
   this file owns the finer visual design that the C# theme can't express.
   ============================================================ */

:root {
  /* Soft, layered shadows instead of Mud's heavy defaults */
  --mud-elevation-1: 0 1px 2px rgba(29, 29, 27, .04), 0 1px 3px rgba(29, 29, 27, .06);
  --mud-elevation-2: 0 2px 6px rgba(29, 29, 27, .06), 0 1px 2px rgba(29, 29, 27, .05);
  --mud-elevation-3: 0 8px 20px rgba(29, 29, 27, .08);
  --mud-elevation-4: 0 12px 28px rgba(29, 29, 27, .10);
  --mud-elevation-6: 0 16px 36px rgba(29, 29, 27, .12);
  --mud-elevation-8: 0 20px 44px rgba(29, 29, 27, .14);

  /* Brand tints (light blue) reused for hover / selected states */
  --g1-tint: rgba(103, 160, 210, .12);
  --g1-tint-strong: rgba(103, 160, 210, .20);
}

html, body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Typography: airy display, legible body, crisp labels ---- */
.mud-typography-h3, .mud-typography-h4, .mud-typography-h5 { font-weight: 300; letter-spacing: -.02em; }
.mud-typography-h6 { font-weight: 600; letter-spacing: -.01em; }
.mud-typography-subtitle1, .mud-typography-subtitle2 { font-weight: 600; }
.mud-typography-button { font-weight: 500; text-transform: none; letter-spacing: 0; }
.mud-typography-caption { letter-spacing: .01em; }

/* ============================================================
   App shell
   ============================================================ */

/* Content canvas */
.mud-main-content { background-color: var(--mud-palette-background); min-height: 100vh; }

/* App bar — clean, light, hairline divider, no heavy shadow */
.mud-appbar { border-bottom: 1px solid var(--mud-palette-divider); }
.mud-appbar.mud-elevation-0 { box-shadow: none; }
.mud-appbar .mud-button-root { font-weight: 500; }

/* ---- Sidebar (dark, refined) ---- */
.mud-drawer { border-right: none; box-shadow: none; }

.mud-drawer .mud-drawer-header.g1-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.g1-brand .mud-typography { color: #fff; font-weight: 300; letter-spacing: .06em; }
.g1-brand-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mud-palette-primary);
  box-shadow: 0 0 0 4px rgba(103, 160, 210, .25);
  flex: 0 0 auto;
}

.mud-navmenu { padding: 10px; }
.mud-navmenu .mud-nav-link {
  border-radius: 10px;
  margin: 2px 0;
  padding-top: 9px; padding-bottom: 9px;
  color: #C7C7C7;
  transition: background-color .15s ease, color .15s ease;
}
.mud-navmenu .mud-nav-link .mud-nav-link-icon { color: #8C8C8C; transition: color .15s ease; }
.mud-navmenu .mud-nav-link:hover { background-color: rgba(255, 255, 255, .06); color: #fff; }
.mud-navmenu .mud-nav-link:hover .mud-nav-link-icon { color: #fff; }
.mud-navmenu .mud-nav-link.active {
  background-color: var(--g1-tint-strong);
  color: #fff;
  font-weight: 600;
}
.mud-navmenu .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary); }
.mud-navmenu .mud-divider { border-color: rgba(255, 255, 255, .08); margin: 10px 12px; }

/* ============================================================
   Surfaces & components
   ============================================================ */

/* Cards / papers — crisp hairline + soft shadow */
.mud-paper { border-radius: var(--mud-default-borderradius); background-clip: padding-box; }
.mud-paper.mud-elevation-1 { border: 1px solid var(--mud-palette-divider); box-shadow: var(--mud-elevation-1); }

/* ---- Tables — scannable, branded, calm (see also the dedicated block below) ---- */
.mud-table { border-radius: var(--mud-default-borderradius); overflow: hidden; box-shadow: var(--mud-elevation-1); }
.mud-table.mud-table-outlined { border: 1px solid var(--mud-palette-divider); }

/* Toolbar (filters + create) */
.mud-table-toolbar {
  min-height: 56px;
  padding: 8px 12px;
  background: var(--mud-palette-surface);
  border-bottom: 1px solid var(--mud-palette-divider);
}
.mud-table-toolbar .search-input { width: 150px; }
.mud-table-toolbar .mud-button-root { color: var(--mud-palette-primary); }

/* Header — quiet uppercase labels on a faint tint */
.mud-table thead .mud-table-cell {
  background: #FAFBFD;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  border-bottom: 1px solid var(--mud-palette-divider);
  white-space: nowrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.mud-table-sort-label:hover { color: var(--mud-palette-primary); }

/* Body — hairline row separators, brand hover, no heavy zebra */
.mud-table-dense tbody .mud-table-cell { padding: 7px 14px; }
.mud-table tbody .mud-table-row > .mud-table-cell { border-bottom: 1px solid var(--mud-palette-divider); }
.mud-table tbody .mud-table-row:last-child > .mud-table-cell { border-bottom: none; }
.mud-table-striped tbody .mud-table-row > .mud-table-cell { background-color: transparent; }
.mud-table-hover tbody .mud-table-row:hover > .mud-table-cell { background-color: var(--g1-tint) !important; }
tbody .mud-table-row.mud-selected-row > .mud-table-cell { background-color: var(--g1-tint-strong) !important; }

/* Row action controls — render as plain icons, not buttons:
   no background/shadow/min-width, muted grey, brand-blue on hover. */
.mud-table-cell .mud-button-root,
.mud-table-cell .mud-icon-button {
  min-width: 0;
  padding: 4px;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--mud-palette-text-secondary);
  border-radius: 8px;
}
.mud-table-cell .mud-button-root:hover,
.mud-table-cell .mud-icon-button:hover {
  color: var(--mud-palette-primary);
  background-color: transparent !important;
}
.mud-table-cell .mud-button-root .mud-icon-root,
.mud-table-cell .mud-icon-button .mud-icon-root { font-size: 1.2rem; }

/* Pager */
.mud-table-pager { border-top: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-secondary); }

/* Action column — shrink to fit its icon button(s) */
.mud-table tbody .mud-table-cell:has(> .mud-button-root),
.mud-table tbody .mud-table-cell:has(> .mud-icon-button) { width: 1%; white-space: nowrap; }

/* Create button (the toolbar text button) → filled brand */
.mud-table-toolbar .mud-button-root:not(.mud-icon-button) {
  background-color: var(--mud-palette-primary);
  color: #fff;
  padding: 6px 16px;
}
.mud-table-toolbar .mud-button-root:not(.mud-icon-button):hover {
  background-color: #5790c6;
  box-shadow: var(--mud-elevation-2);
}
.mud-table-toolbar .mud-button-root:not(.mud-icon-button) .mud-icon-root { color: #fff; }

/* Sticky header — stays under the fixed app bar while a long table scrolls */
.mud-table { overflow: visible; }
.mud-table .mud-table-container { overflow: visible; }
.mud-table thead .mud-table-cell { position: sticky; top: 64px; z-index: 3; }

/* Empty state (NoRecordsContent → <TableEmpty/>) */
.table-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.5rem 1rem; color: var(--mud-palette-text-secondary);
}
.table-empty .table-empty-icon { font-size: 2.4rem; color: var(--mud-palette-divider); }

/* Buttons — flat by default, lift on hover */
.mud-button-root { text-transform: none; font-weight: 500; letter-spacing: 0; border-radius: 9px; }
.mud-button-filled { box-shadow: none; }
.mud-button-filled:hover { box-shadow: var(--mud-elevation-2); }

/* Chips */
.mud-chip { border-radius: 8px; font-weight: 500; }

/* Inputs — slightly rounder, brand focus */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 9px; }

/* Dialogs */
.mud-dialog { border-radius: 14px; }

/* ---- Custom scrollbars (subtle) ---- */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(29, 29, 27, .18);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(29, 29, 27, .32); background-clip: content-box; }

/* Keyboard focus */
:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ============================================================
   Dashboard (Index.razor)
   ============================================================ */
.dash { display: flex; flex-direction: column; gap: 16px; }

.dash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 28px;
  border-radius: 16px;
  background: linear-gradient(120deg, #2C5C8A 0%, #4A82B8 52%, #67A0D2 100%);
  color: #fff;
  box-shadow: var(--mud-elevation-3);
  position: relative;
  overflow: hidden;
}
.dash-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 160, 210, .35), transparent 70%);
}
.dash-hero-title { color: #fff; font-weight: 300; }
.dash-hero-sub { color: rgba(255, 255, 255, .72); margin-top: 6px; max-width: 46ch; }
.dash-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mud-palette-primary); color: #fff;
  padding: 13px 22px; border-radius: 12px;
  text-decoration: none; font-weight: 600; white-space: nowrap;
  z-index: 1;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dash-cta:hover { transform: translateY(-2px); box-shadow: var(--mud-elevation-4); background: #5790c6; }

.dash-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dash-card {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--mud-default-borderradius);
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-card:hover { transform: translateY(-3px); box-shadow: var(--mud-elevation-3); border-color: transparent; }
.dash-card-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dash-card-icon .mud-icon-root { font-size: 1.4rem; }
.dash-card-body { flex: 1 1 auto; min-width: 0; }
.dash-card-title { color: var(--mud-palette-text-primary); font-weight: 600; }
.dash-card-desc { color: var(--mud-palette-text-secondary); }
.dash-card-arrow { color: var(--mud-palette-text-secondary); transition: transform .15s ease, color .15s ease; }
.dash-card:hover .dash-card-arrow { transform: translateX(4px); color: var(--mud-palette-primary); }

.tone-blue  { background: rgba(103, 160, 210, .16); color: #4f8bc4; }
.tone-teal  { background: rgba(46, 155, 143, .14);  color: #2E9B8F; }
.tone-amber { background: rgba(225, 162, 59, .16);  color: #c0871f; }
.tone-navy  { background: rgba(44, 92, 138, .14);   color: #2C5C8A; }

/* ============================================================
   Density — more information per screen
   ============================================================ */
.editform-body { padding: 1.25rem 1.5rem; gap: .6rem; max-width: 1000px; }
.editform-footer { padding: .7rem 1.5rem; }

/* Multi-column form layout — fields flow into two responsive columns.
   Use <... class="editform-full"> (or a MudDivider with that class) to span both. */
.editform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 1.5rem;
  align-items: start;
}
.editform-grid > .editform-full,
.editform-grid > .mud-divider { grid-column: 1 / -1; }
.editform-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .editform-grid { grid-template-columns: 1fr; } }
.mud-button-root { padding-top: 6px; padding-bottom: 6px; }
.mud-card-content { padding: 14px; }
.mud-list-item { padding-top: 6px; padding-bottom: 6px; }
.mud-expansion-panel .mud-expand-panel-text { padding: 8px 16px; }
.mud-tabs .mud-tab { min-height: 42px; }
.mud-input-control { margin-top: 6px; margin-bottom: 6px; }

/* ============================================================
   Calculation / preview workflow (§3e) — Betriebskostenabrechnung
   ============================================================ */

/* Criteria row: inputs flow inline and wrap; the property select needs room. */
.calc-criteria { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.calc-criteria .calc-criteria-realestate { min-width: 280px; }

/* Result tables (Gesamtaufstellung / Pro Miete) — compact, right-aligned amounts. */
.statement-table { max-width: 640px; }
.statement-table th:last-child,
.statement-table td:last-child { text-align: right; }

/* The owner (Miete) picker on the per-Miete tab. */
.statement-owner-select { max-width: 420px; }

/* Right-aligned amount column in the history list. */
.mud-table-cell.cell-amount { text-align: right; }