/* Universal CRM — Grundgerüst. Alle Farben/Formen kommen aus den CSS-Variablen,
   die pro Mandant aus der Konfiguration gesetzt werden (siehe App.razor). */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ucrm-font);
    background: var(--ucrm-bg);
    color: var(--ucrm-text);
    font-size: 14px;
}

h1 { font-size: 22px; margin: 0 0 2px; font-weight: 600; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; text-transform: uppercase;
     letter-spacing: .04em; color: color-mix(in srgb, var(--ucrm-text) 65%, transparent); }

/* ---------- Grundlayout ---------- */
.ucrm-shell { display: flex; min-height: 100vh; }

.ucrm-sidebar {
    width: 240px; flex: 0 0 240px;
    background: var(--ucrm-sidebar-bg); color: var(--ucrm-sidebar-text);
    display: flex; flex-direction: column;
}

.ucrm-brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px;
              border-bottom: 1px solid rgba(255,255,255,.08); }
.ucrm-logo { width: 32px; height: 32px; object-fit: contain; }
.ucrm-brand-name { font-weight: 600; font-size: 15px; }
.ucrm-brand-tenant { font-size: 12px; opacity: .6; }

.ucrm-nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; }
.ucrm-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--ucrm-radius);
    color: var(--ucrm-sidebar-text); text-decoration: none; font-size: 14px;
}
.ucrm-nav-item:hover { background: rgba(255,255,255,.07); }
.ucrm-nav-item.active { background: var(--ucrm-primary); color: #fff; }
.ucrm-nav-icon { width: 18px; text-align: center; opacity: .85; }

.ucrm-user { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.ucrm-user-name { font-weight: 600; }
.ucrm-user-role { opacity: .6; margin-bottom: 8px; }
.ucrm-logout { background: none; border: 1px solid rgba(255,255,255,.25); color: inherit;
               padding: 5px 10px; border-radius: var(--ucrm-radius); cursor: pointer; font-size: 12px; }
.ucrm-logout:hover { background: rgba(255,255,255,.1); }

.ucrm-main { flex: 1; padding: 22px 26px; overflow-x: auto; }
.ucrm-plain { padding: 0; }

/* ---------- Kopfzeile / Aktionen ---------- */
.ucrm-page-head { display: flex; justify-content: space-between; align-items: flex-end;
                  gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ucrm-page-actions { display: flex; gap: 8px; align-items: center; }
.ucrm-subtitle { color: color-mix(in srgb, var(--ucrm-text) 60%, transparent); font-size: 13px; }

.ucrm-search { padding: 8px 12px; border: 1px solid #d5dae1; border-radius: var(--ucrm-radius);
               min-width: 260px; font-size: 14px; background: var(--ucrm-surface); color: inherit; }
.ucrm-search:focus { outline: 2px solid color-mix(in srgb, var(--ucrm-primary) 40%, transparent); border-color: var(--ucrm-primary); }

.ucrm-primary-btn { background: var(--ucrm-primary); color: #fff; border: none;
                    padding: 9px 16px; border-radius: var(--ucrm-radius); cursor: pointer; font-size: 14px; }
.ucrm-primary-btn:hover { background: var(--ucrm-primary-dark); }
.ucrm-btn { background: var(--ucrm-surface); border: 1px solid #d5dae1; padding: 7px 12px;
            border-radius: var(--ucrm-radius); cursor: pointer; }
.ucrm-btn:disabled { opacity: .45; cursor: default; }

/* ---------- Karten & Tabellen ---------- */
.ucrm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.ucrm-card { background: var(--ucrm-surface); border: 1px solid #e3e7ec;
             border-radius: var(--ucrm-radius); padding: 16px 18px; }

.ucrm-table { width: 100%; border-collapse: collapse; background: var(--ucrm-surface);
              border: 1px solid #e3e7ec; border-radius: var(--ucrm-radius); overflow: hidden; }
.ucrm-table th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase;
                 letter-spacing: .03em; padding: 10px 12px; background: #f0f3f7; border-bottom: 1px solid #e3e7ec; }
.ucrm-table td { padding: 9px 12px; border-bottom: 1px solid #eef1f5; }
.ucrm-table tbody tr:hover { background: color-mix(in srgb, var(--ucrm-primary) 7%, transparent); cursor: pointer; }
.ucrm-table-plain tbody tr:hover { background: none; cursor: default; }

.ucrm-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 6px 14px; margin: 0; }
.ucrm-dl dt { color: color-mix(in srgb, var(--ucrm-text) 55%, transparent); font-size: 13px; }
.ucrm-dl dd { margin: 0; font-size: 13px; word-break: break-word; }

.ucrm-tabs { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid #e3e7ec; }
.ucrm-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 14px;
            cursor: pointer; font-size: 14px; color: inherit; }
.ucrm-tab.active { border-bottom-color: var(--ucrm-primary); color: var(--ucrm-primary); font-weight: 600; }

.ucrm-pager { display: flex; gap: 12px; align-items: center; margin-top: 14px; font-size: 13px; }
.ucrm-result-info { margin-bottom: 10px; font-size: 13px;
                    color: color-mix(in srgb, var(--ucrm-text) 60%, transparent); }

.ucrm-badge { background: color-mix(in srgb, var(--ucrm-primary) 12%, transparent);
              color: var(--ucrm-primary-dark); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.ucrm-badge-readonly { background: #fff3cd; color: #7a5b00; }

.ucrm-hint { color: color-mix(in srgb, var(--ucrm-text) 55%, transparent); padding: 10px 0; }
.ucrm-muted { color: color-mix(in srgb, var(--ucrm-text) 50%, transparent); }
.ucrm-ok { color: #1a7f37; }
.ucrm-fail { color: #b42318; }
.ucrm-error { background: #fdecea; border: 1px solid #f5c6c2; color: #8a1c13;
              padding: 10px 14px; border-radius: var(--ucrm-radius); margin-bottom: 14px; }

/* ---------- Login ---------- */
.ucrm-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
              background: linear-gradient(140deg, var(--ucrm-primary-dark), var(--ucrm-primary)); }
.ucrm-login-card { background: var(--ucrm-surface); padding: 32px 34px; width: 380px;
                   border-radius: calc(var(--ucrm-radius) * 1.5); box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.ucrm-login-card h1 { margin-bottom: 4px; }
.ucrm-login-sub { color: color-mix(in srgb, var(--ucrm-text) 55%, transparent); margin: 0 0 20px; font-size: 13px; }
.ucrm-login-card label { display: block; font-size: 12px; margin: 12px 0 4px;
                         color: color-mix(in srgb, var(--ucrm-text) 60%, transparent); }
.ucrm-login-card input, .ucrm-login-card select {
    width: 100%; padding: 9px 12px; border: 1px solid #d5dae1;
    border-radius: var(--ucrm-radius); font-size: 14px; background: var(--ucrm-surface); color: inherit; }
.ucrm-login-card .ucrm-primary-btn { width: 100%; margin-top: 20px; padding: 11px; }