/* v0.1.6 Content-Density Desktop Layer
   Ziel: weiterhin deploy-only und auf 1920x1080/Browser-Viewport ohne globales Scrollen,
   aber keine abgeschnittenen Kopfzeilen, KPI-Karten oder Formularbereiche mehr. */
@media (min-width: 1181px) {
  :root {
    --sidebar-width: 228px;
    --header-height: 60px;
    --gap: 10px;
    --content-pad-x: 14px;
    --content-pad-y: 10px;
    --radius-lg: 17px;
    --radius: 13px;
    --radius-sm: 9px;
  }

  html,
  body,
  #app,
  .app-shell,
  .main-area {
    width: 100%;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body { overscroll-behavior: none; }
  .app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important; }

  .sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 14px 10px 12px !important;
  }
  .brand { gap: 8px !important; padding: 0 5px 12px !important; font-size: 22px !important; }
  .logo-mark { width: 31px !important; height: 31px !important; border-width: 2px !important; }
  .logo-mark::before { left: 8px !important; top: 7px !important; width: 12px !important; height: 7px !important; border-width: 2px !important; }
  .logo-mark::after { right: -6px !important; top: 7px !important; width: 13px !important; height: 2px !important; }
  .nav { gap: 3px !important; }
  .nav-item { min-height: 35px !important; padding: 0 10px !important; border-radius: 10px !important; }
  .nav-icon { width: 18px !important; font-size: 14px !important; }
  .nav-label { font-size: 12.5px !important; }
  .sidebar-bottom { gap: 5px !important; }
  .mini-link { min-height: 30px !important; padding: 0 10px !important; font-size: 12px !important; }
  .profile-card { padding: 7px !important; grid-template-columns: 34px 1fr auto !important; gap: 8px !important; }
  .avatar { width: 34px !important; height: 34px !important; }
  .profile-card strong { font-size: 13px !important; }
  .profile-card small { font-size: 10.5px !important; }

  .topbar { height: var(--header-height) !important; padding: 0 16px !important; }
  .topbar h1 { font-size: 16px !important; margin: 0 0 2px !important; }
  .topbar p { font-size: 11.5px !important; }
  .top-actions { gap: 7px !important; }

  .content {
    height: calc(100dvh - var(--header-height)) !important;
    max-height: calc(100dvh - var(--header-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: var(--content-pad-y) var(--content-pad-x) !important;
  }

  .page-grid { gap: var(--gap) !important; min-height: 0 !important; }
  .grid-main-side { grid-template-columns: minmax(0, 1fr) 300px !important; min-height: 0 !important; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .card { border-radius: var(--radius) !important; min-height: 0 !important; overflow: hidden !important; }
  .card-inner { padding: 10px !important; min-height: 0 !important; }
  .card-title { min-height: 28px !important; margin-bottom: 7px !important; align-items: center !important; }
  .card-title h2, .card-title h3 { font-size: 14px !important; line-height: 1.2 !important; }
  .btn { min-height: 30px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 12px !important; }
  .badge { min-height: 19px !important; padding: 0 7px !important; font-size: 10px !important; }

  .kpi { min-height: 76px !important; }
  .kpi .card-inner { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; height: 100% !important; }
  .kpi-icon { width: 34px !important; height: 34px !important; font-size: 15px !important; }
  .kpi-label { font-size: 11px !important; line-height: 1.15 !important; }
  .kpi-value { font-size: 22px !important; line-height: 1.05 !important; margin-top: 1px !important; }
  .kpi-sub { font-size: 10px !important; line-height: 1.15 !important; margin-top: 3px !important; }

  .input, .select { min-height: 31px !important; border-radius: 8px !important; font-size: 12px !important; padding: 0 10px !important; }
  .textarea { min-height: 58px !important; border-radius: 8px !important; padding: 8px 10px !important; font-size: 12px !important; resize: none !important; }
  .field { gap: 4px !important; }
  .field label { font-size: 10.5px !important; }
  .form-grid, .form-grid-3 { gap: 8px !important; }
  .settings-row { padding: 7px 0 !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; }
  .settings-row strong { font-size: 12px !important; }
  .settings-row small { font-size: 10px !important; }
  .empty-state { min-height: 42px !important; padding: 8px !important; font-size: 12px !important; }
  .notice { padding: 8px !important; font-size: 12px !important; }
  .footer-note { display: none !important; }
  .ring { --size: 84px; }

  /* Dashboard: Header sichtbar, Timer nicht riesig, drei Bereiche passen ohne Scroll. */
  .content-dashboard .dashboard-view {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 238px minmax(0, 1fr) !important;
    gap: var(--gap) !important;
    overflow: hidden !important;
  }
  .content-dashboard .dashboard-top { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; gap: var(--gap) !important; min-height: 0 !important; }
  .content-dashboard .dashboard-kpis { display: grid !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; gap: var(--gap) !important; min-height: 0 !important; }
  .content-dashboard .dashboard-kpis .kpi { height: 100% !important; min-height: 0 !important; }
  .content-dashboard .dashboard-bottom { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px !important; gap: var(--gap) !important; min-height: 0 !important; }
  .content-dashboard .dashboard-top > *,
  .content-dashboard .dashboard-bottom > * { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
  .content-dashboard .dashboard-bottom .card-inner { height: 100% !important; overflow: hidden !important; }

  .hero-timer { height: 100% !important; min-height: 0 !important; }
  .hero-timer .card-inner { height: 100% !important; display: grid !important; grid-template-rows: auto minmax(0,1fr) auto auto auto !important; align-items: center !important; }
  .timer-value { font-size: clamp(42px, 4.3vw, 66px) !important; line-height: .95 !important; text-align: center !important; align-self: end !important; }
  .timer-sub { margin-top: 4px !important; font-size: 12px !important; text-align: center !important; }
  .timer-actions { max-width: 440px !important; gap: 8px !important; margin: 10px auto 0 !important; }
  .timer-meta { width: 100% !important; margin-top: 8px !important; font-size: 11.5px !important; display: flex !important; justify-content: space-between !important; }
  .week-bars { min-height: 82px !important; height: calc(100% - 120px) !important; gap: 8px !important; padding-top: 6px !important; }
  .week-bar { gap: 4px !important; font-size: 10px !important; }
  .week-bar-fill { width: 13px !important; min-height: 6px !important; }
  .booking-list { gap: 4px !important; overflow: hidden !important; }
  .booking-item { padding: 5px 0 !important; grid-template-columns: 26px minmax(0,1fr) auto !important; gap: 8px !important; }
  .booking-icon { width: 25px !important; height: 25px !important; font-size: 12px !important; }
  .booking-main small { font-size: 10px !important; }
  .booking-time { font-size: 12px !important; }

  .month-calendar { display: grid !important; grid-template-rows: 23px repeat(6, minmax(0, 1fr)) !important; gap: 1px !important; border-radius: 12px !important; min-height: 0 !important; }
  .month-row { min-height: 0 !important; }
  .month-day-name { min-height: 0 !important; padding: 4px 6px !important; font-size: 10px !important; }
  .month-cell { min-height: 0 !important; height: 100% !important; padding: 5px !important; }
  .month-date { font-size: 11px !important; }
  .month-entry { margin-top: 2px !important; gap: 2px !important; }
  .month-status { font-size: 10px !important; }
  .legend { margin-top: 6px !important; gap: 8px !important; font-size: 10px !important; }

  /* Zeiterfassung */
  .content-tracking .tracking-view {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: var(--gap) !important;
    overflow: hidden !important;
  }
  .content-tracking .tracking-view > .page-grid:first-child {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 228px 112px minmax(0, 1fr) !important;
    gap: var(--gap) !important;
  }
  .content-tracking .tracking-view aside.page-grid { height: 100% !important; grid-template-rows: minmax(0, 1fr) minmax(0, .82fr) !important; gap: var(--gap) !important; }
  .content-tracking .hero-timer .timer-value { font-size: clamp(44px, 4.45vw, 70px) !important; }
  .content-tracking .timeline { height: 100% !important; min-height: 0 !important; padding: 9px !important; }
  .content-tracking .timeline-scale { margin-bottom: 6px !important; font-size: 11px !important; }
  .content-tracking .timeline-bar { height: 17px !important; }
  .content-tracking #manual-entry-form { gap: 8px !important; }
  .content-tracking aside .ring { --size: 86px !important; margin: 10px auto 7px !important; }

  /* Kalender */
  .content-calendar > .page-grid {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 64px 78px minmax(0, 1fr) !important;
    gap: var(--gap) !important;
    overflow: hidden !important;
  }
  .content-calendar .calendar-head { height: 64px !important; gap: 7px !important; margin: 0 !important; }
  .content-calendar .day-chip { height: 64px !important; min-height: 64px !important; padding: 6px 8px !important; overflow: hidden !important; }
  .content-calendar .day-chip small { margin-bottom: 3px !important; font-size: 10px !important; line-height: 1.15 !important; }
  .content-calendar .day-chip strong { font-size: 12px !important; line-height: 1.1 !important; }
  .content-calendar .grid-4 .kpi { height: 78px !important; min-height: 78px !important; }
  .content-calendar .grid-main-side { height: 100% !important; grid-template-columns: minmax(0, 1fr) 294px !important; gap: var(--gap) !important; }
  .content-calendar .grid-main-side > .card,
  .content-calendar .grid-main-side > aside { height: 100% !important; overflow: hidden !important; }
  .content-calendar .grid-main-side > .card > .card-inner { height: 100% !important; display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; overflow: hidden !important; }
  .content-calendar .legend { margin: 0 0 6px !important; }
  .content-calendar .month-calendar { height: 100% !important; margin-top: 0 !important; }
  .content-calendar aside .card-inner { height: 100% !important; overflow: hidden !important; }
  .content-calendar aside .textarea { min-height: 58px !important; }
  .content-calendar aside hr { margin: 10px 0 !important; }

  /* Buchungen */
  .content-bookings > .page-grid { height: 100% !important; display: grid !important; grid-template-rows: 78px minmax(0, 1fr) !important; gap: var(--gap) !important; overflow: hidden !important; }
  .content-bookings .grid-4 .kpi { height: 78px !important; min-height: 78px !important; }
  .content-bookings .grid-main-side { height: 100% !important; grid-template-columns: minmax(0, 1fr) 300px !important; }
  .content-bookings .grid-main-side > .card,
  .content-bookings .grid-main-side > aside,
  .content-bookings .card-inner { height: 100% !important; overflow: hidden !important; }
  .content-bookings .form-grid-3 { margin-bottom: 8px !important; }
  .content-bookings .table-wrap { height: calc(100% - 76px) !important; overflow: auto !important; }
  .content-bookings table { min-width: 720px !important; }
  .content-bookings th,
  .content-bookings td { padding: 6px 8px !important; font-size: 12px !important; }
  .content-bookings aside form { gap: 7px !important; }
  .content-bookings aside .textarea { min-height: 54px !important; }

  /* Auswertung */
  .content-analytics > .page-grid { height: 100% !important; display: grid !important; grid-template-rows: 34px 78px minmax(0, .95fr) minmax(0, .72fr) !important; gap: var(--gap) !important; overflow: hidden !important; }
  .content-analytics .grid-4 .kpi { height: 78px !important; min-height: 78px !important; }
  .content-analytics .grid-2 > .card,
  .content-analytics .grid-3 > .card { height: 100% !important; overflow: hidden !important; }
  .content-analytics .grid-2 > .card > .card-inner,
  .content-analytics .grid-3 > .card > .card-inner { height: 100% !important; overflow: hidden !important; }
  .content-analytics .analytics-bar-chart { height: calc(100% - 32px) !important; min-height: 120px !important; padding: 8px 8px 5px !important; }
  .content-analytics .line-chart { height: calc(100% - 32px) !important; min-height: 120px !important; padding: 8px !important; }
  .content-analytics .analytics-bar { width: 20px !important; }
  .content-analytics .donut-row { grid-template-columns: 96px minmax(0,1fr) !important; gap: 10px !important; }
  .content-analytics .ring { --size: 92px !important; }

  /* Abwesenheiten */
  .content-absences > .page-grid { height: 100% !important; display: grid !important; grid-template-rows: 42px 78px minmax(0, 1fr) !important; gap: var(--gap) !important; overflow: hidden !important; }
  .content-absences h2 { font-size: 20px !important; line-height: 1.1 !important; }
  .content-absences p { font-size: 12px !important; line-height: 1.15 !important; }
  .content-absences .grid-4 .kpi { height: 78px !important; min-height: 78px !important; }
  .content-absences .grid-main-side { height: 100% !important; grid-template-columns: minmax(0, 1fr) 294px !important; }
  .content-absences .grid-main-side > .page-grid:first-child { height: 100% !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 126px !important; }
  .content-absences aside.page-grid { height: 100% !important; display: grid !important; grid-template-rows: auto 100px !important; }
  .content-absences .table-wrap { max-height: 100% !important; overflow: auto !important; }
  .content-absences .absence-days { height: 100% !important; }
  .content-absences .absence-day { min-height: 0 !important; padding: 5px !important; font-size: 10px !important; }
  .content-absences .textarea { min-height: 58px !important; }

  /* Projekte: keine riesigen leergezogenen Projektkarten mehr. */
  .content-projects > .page-grid { height: 100% !important; display: grid !important; grid-template-rows: 68px minmax(0, 1fr) !important; gap: var(--gap) !important; overflow: hidden !important; }
  .content-projects .grid-main-side { height: 100% !important; grid-template-columns: minmax(0, 1fr) 294px !important; }
  .content-projects section.grid-2 { height: auto !important; align-content: start !important; grid-auto-rows: 152px !important; overflow: hidden !important; }
  .content-projects .project-card { min-height: 152px !important; height: 152px !important; gap: 8px !important; }
  .content-projects .project-card .card-inner { height: 100% !important; overflow: hidden !important; }
  .content-projects aside { height: max-content !important; max-height: 100% !important; }

  /* Meine Daten / Einstellungen */
  .content-profile > .page-grid,
  .content-settings > .page-grid { height: 100% !important; overflow: hidden !important; }
  .content-profile .grid-main-side,
  .content-settings .grid-main-side { height: 100% !important; grid-template-columns: minmax(0,1fr) 294px !important; align-content: start !important; }
  .content-profile .card,
  .content-settings .card { max-height: 100% !important; overflow: hidden !important; }

  .content::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
  .content::-webkit-scrollbar-thumb,
  .table-wrap::-webkit-scrollbar-thumb { background: rgba(25, 242, 223, 0.28); border-radius: 999px; }
}

/* Bei sehr niedriger Browserhöhe ist echtes No-Scroll nicht mehr ehrlich erreichbar.
   Dann lieber interne Inhaltsfläche scrollen lassen statt Texte abzuschneiden. */
@media (min-width: 1181px) and (max-height: 760px) {
  .content { overflow: auto !important; }
  .content > .page-grid,
  .content > .dashboard-view,
  .content-tracking .tracking-view { min-height: 690px !important; }
}