/* Kompakte, professionelle Oberfläche für angemeldete Kunden und Mitarbeiter. */
.app-shell {
    --radius: 12px;
    --shadow: 0 12px 34px rgba(0, 0, 0, .22);
    line-height: 1.45;
}

.app-shell .site-header { background: rgba(9, 11, 14, .96); }
.app-shell .nav-wrap { height: 62px; }
.app-shell .brand { gap: 9px; font-size: .82rem; }
.app-shell .brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: .78rem; }
.app-shell .main-nav { gap: 16px; font-size: .82rem; }
.app-shell .site-footer { display: none; }
.app-shell .container { width: min(1320px, calc(100% - 32px)); }
.app-shell .section { padding: 28px 0; }

.app-shell .portal {
    grid-template-columns: 218px minmax(0, 1fr);
    min-height: calc(100vh - 62px);
}
.app-shell .sidebar {
    position: sticky;
    top: 62px;
    align-self: start;
    height: calc(100vh - 62px);
    overflow-y: auto;
    padding: 18px 14px;
    background: #0a0d11;
}
.app-shell .user-box { padding: 12px; margin-bottom: 15px; border-radius: 10px; }
.app-shell .user-box strong { font-size: .86rem; }
.app-shell .side-nav { gap: 3px; }
.app-shell .side-nav a { padding: 8px 10px; border-radius: 7px; font-size: .78rem; }
.app-shell .side-nav a.active { box-shadow: inset 3px 0 0 var(--accent); }
.app-shell .quick-search { margin-bottom: 14px; }
.app-shell .quick-search input { padding: 8px 9px; font-size: .76rem; }
.app-shell .quick-search button { width: 36px; }

.app-shell .portal-main { padding: 22px 24px 34px; }
.app-shell .portal-head { gap: 14px; margin-bottom: 16px; }
.app-shell .portal-head h1 { font-size: 1.45rem; letter-spacing: -.02em; }
.app-shell .portal-head h2 { margin: 0; }
.app-shell .eyebrow { font-size: .64rem; letter-spacing: .17em; }
.app-shell h3 { margin-top: 10px; margin-bottom: 7px; }
.app-shell p { margin-top: 7px; margin-bottom: 10px; }
.app-shell .actions { gap: 8px; margin-top: 14px; }

.app-shell .panel,
.app-shell .card { border-radius: 11px; box-shadow: 0 8px 24px rgba(0, 0, 0, .13); }
.app-shell .panel { padding: 17px; margin-bottom: 15px; }
.app-shell .panel h2 { margin-bottom: 13px; font-size: 1rem; }
.app-shell .card { padding: 17px; }
.app-shell .grid { gap: 13px; }
.app-shell .stat-grid { gap: 11px; margin-bottom: 16px; }
.app-shell .stat { padding: 14px 15px; border-radius: 10px; }
.app-shell .stat span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.app-shell .stat strong { font-size: 1.45rem; }

.app-shell .field { margin-bottom: 11px; }
.app-shell .field label { margin-bottom: 5px; font-size: .75rem; }
.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea { padding: 9px 11px; border-radius: 8px; font-size: .82rem; }
.app-shell .field textarea { min-height: 86px; }
.app-shell .form-grid { gap: 11px 14px; }
.app-shell .form-note { font-size: .72rem; }
.app-shell .btn { padding: 9px 13px; border-radius: 8px; font-size: .78rem; }
.app-shell .btn-small { padding: 7px 10px; }
.app-shell .maintenance-box { padding: 13px; margin-bottom: 13px; }
.app-shell .tabs { margin-bottom: 14px; }
.app-shell .tabs button { padding: 8px 11px; font-size: .76rem; }
.app-shell .settings-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, .6fr) auto; gap: 14px; align-items: end; }
.app-shell .settings-row .field { margin: 0; }

.app-shell .search-panel { padding: 11px; margin-bottom: 14px; border-radius: 10px; }
.app-shell .search-panel input { padding: 9px 11px; font-size: .8rem; }
.app-shell .table-wrap { border-radius: 10px; max-width: 100%; }
.app-shell table { font-size: .76rem; }
.app-shell th,
.app-shell td { padding: 9px 11px; }
.app-shell th { position: sticky; top: 0; z-index: 1; background: #151a20; font-size: .65rem; }
.app-shell tbody tr:hover { background: rgba(255, 255, 255, .025); }
.app-shell .badge { padding: 4px 7px; font-size: .65rem; }
.app-shell .pagination { margin-top: 14px; }
.app-shell .pagination a { padding: 6px 9px; font-size: .74rem; }
.app-shell .empty { padding: 23px; }

.app-shell .calendar-toolbar { margin-bottom: 11px; }
.app-shell .month-calendar { margin-bottom: 16px; border-radius: 10px; }
.app-shell .calendar-weekdays > div { padding: 7px; font-size: .67rem; }
.app-shell .calendar-day { min-height: 94px; padding: 6px; }
.app-shell .day-number { width: 23px; height: 23px; font-size: .69rem; }
.app-shell .calendar-event { padding: 3px 5px; margin: 2px 0; font-size: .61rem; }

.app-shell .document-item-head,
.app-shell .document-item-row { grid-template-columns: 115px minmax(210px,2fr) 64px 64px 86px 70px 86px 66px 66px 82px 92px 32px; min-width: 1235px; }
.app-shell .document-item-row { padding: 6px; }
.app-shell .document-item-row input,
.app-shell .document-item-row select,
.app-shell .document-item-row textarea { padding: 6px; font-size: .72rem; }
.app-shell .document-item-row textarea { height: 46px; }

/* Die komfortable Ansicht bleibt modern, lässt aber etwas mehr Luft. */
.app-shell.density-comfortable .portal-main { padding: 30px; }
.app-shell.density-comfortable .panel { padding: 22px; margin-bottom: 20px; }
.app-shell.density-comfortable th,
.app-shell.density-comfortable td { padding: 12px 14px; }
.app-shell.density-comfortable .field { margin-bottom: 16px; }
.app-shell.density-comfortable .field input,
.app-shell.density-comfortable .field select,
.app-shell.density-comfortable .field textarea { padding: 12px 13px; }

@media (max-width: 900px) {
    .app-shell .portal { grid-template-columns: 1fr; }
    .app-shell .sidebar { position: static; height: auto; overflow: visible; padding: 12px 14px; }
    .app-shell .user-box { display: none; }
    .app-shell .quick-search { max-width: 480px; }
    .app-shell .portal-main { padding: 18px 16px 28px; }
    .app-shell .settings-row { grid-template-columns: 1fr 1fr; }
    .app-shell .settings-row .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 680px) {
    .app-shell .nav-wrap { height: 58px; }
    .app-shell .main-nav { top: 58px; }
    .app-shell .portal-head { align-items: flex-start; flex-direction: column; }
    .app-shell .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell .settings-row { grid-template-columns: 1fr; }
    .app-shell .calendar-weekdays,
    .app-shell .calendar-grid { min-width: 720px; }
}