/* ================================================================ WERKERHELD — DESKTOP LAYOUT Triggered by JS adding class "is-desktop" to . window.innerWidth >= 960px → is-desktop active. Mobile styles in styleApp.css are NEVER touched here. ================================================================ */ /* Sidebar hidden by default on all screens */ .desktop-sidebar { display: none; } /* ──────────────────────────────────────────────────────────────── Everything below only applies when JS sets is-desktop on ──────────────────────────────────────────────────────────────── */ /* ─── CSS Variables ──────────────────────────────────────────────── */ html.is-desktop { --sidebar-width: 252px; --desktop-top-pad: 32px; /* Lock html to viewport — body becomes the scroll container */ overflow: hidden !important; height: 100% !important; } /* ─── Body as scroll container ───────────────────────────────────── */ html.is-desktop body { overflow-y: auto !important; /* THE scroll container */ overflow-x: hidden !important; height: auto !important; /* grow with content */ } /* ─── Hide mobile chrome ─────────────────────────────────────────── */ /* Use "html.is-desktop body header" for maximum specificity to beat any !important rules in styleApp.css */ html.is-desktop body header, html.is-desktop body nav.mobile-nav, html.is-desktop body .mobile-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; } /* ID-level override — beats any inline style !important */ html.is-desktop #nav_manager, html.is-desktop #nav_employee { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; } /* ─── Body layout ────────────────────────────────────────────────── */ html.is-desktop body { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: var(--sidebar-width) !important; background-color: #eef2f7 !important; min-height: 100vh; } /* ─── SIDEBAR ────────────────────────────────────────────────────── */ html.is-desktop .desktop-sidebar { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: auto !important; transform: none !important; width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important; height: 100vh !important; background: var(--color-surface) !important; border-right: 1px solid var(--color-background-Two) !important; border-top: none !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; box-shadow: none !important; z-index: 200 !important; overflow: hidden !important; justify-content: flex-start !important; padding: 0 !important; } /* Brand */ html.is-desktop .desktop-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px; border-bottom: 1px solid var(--color-background-Two); flex-shrink: 0; } html.is-desktop .desktop-sidebar__logo-icon { width: 30px; height: 30px; background: var(--color-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } html.is-desktop .desktop-sidebar__logo-icon svg { fill: white; color: white; } html.is-desktop .desktop-sidebar__logo-text { font-size: 15px; font-weight: 700; color: var(--color-black); letter-spacing: -0.02em; } /* Sidebar Nav — override styleApp.css nav { position:fixed; bottom:0 } */ html.is-desktop .desktop-sidebar__nav { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; position: static !important; bottom: auto !important; left: auto !important; transform: none !important; width: auto !important; max-width: none !important; height: auto !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 8px !important; gap: 1px !important; overflow-y: auto !important; scrollbar-width: none !important; z-index: auto !important; } html.is-desktop .desktop-sidebar__nav::-webkit-scrollbar { display: none; } html.is-desktop .desktop-sidebar__section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-lightgray); padding: 14px 8px 4px; flex-shrink: 0; } /* Nav items */ html.is-desktop .desktop-nav-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 10px !important; border-radius: var(--radius-m) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--color-muted) !important; cursor: pointer !important; transition: all var(--transition) !important; text-decoration: none !important; white-space: nowrap !important; user-select: none !important; /* Override nav-obj flex settings */ flex-direction: row !important; flex: none !important; justify-content: flex-start !important; width: 100% !important; } html.is-desktop .desktop-nav-item svg { flex-shrink: 0; opacity: 0.7; } html.is-desktop .desktop-nav-item span { flex: 1; } html.is-desktop .desktop-nav-item:hover { background: var(--color-background) !important; color: var(--color-black) !important; } html.is-desktop .desktop-nav-item:hover svg { opacity: 1; } html.is-desktop .desktop-nav-item.active { background: var(--color-accent-light) !important; color: var(--color-accent) !important; font-weight: 600 !important; } html.is-desktop .desktop-nav-item.active svg { opacity: 1; } /* Manager-only nav items */ html.is-desktop .desktop-nav-manager { display: none !important; } html.is-desktop .desktop-nav-manager.visible { display: flex !important; } /* Sidebar footer */ html.is-desktop .desktop-sidebar__footer { border-top: 1px solid var(--color-background-Two); padding: 8px; flex-shrink: 0; } html.is-desktop .desktop-sidebar__profile { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition); } html.is-desktop .desktop-sidebar__profile:hover { background: var(--color-background); } html.is-desktop .desktop-profile-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--color-accent); color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } html.is-desktop .desktop-sidebar__profile-info { flex: 1; min-width: 0; } html.is-desktop .desktop-sidebar__profile-name { font-size: 13px; font-weight: 600; color: var(--color-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.is-desktop .desktop-sidebar__profile-role { font-size: 11px; color: var(--color-muted); margin-top: 1px; } html.is-desktop .desktop-sidebar__profile-chevron { color: var(--color-lightgray); flex-shrink: 0; } /* ─── Sidebar Notification Button ───────────────────────────────── */ html.is-desktop .desktop-sidebar__notif-btn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-m); font-size: 13.5px; font-weight: 500; color: var(--color-muted); cursor: pointer; transition: background var(--transition); user-select: none; margin: 0 0 2px; } html.is-desktop .desktop-sidebar__notif-btn:hover { background: var(--color-background); color: var(--color-black); } html.is-desktop .desktop-sidebar__notif-btn svg { flex-shrink: 0; opacity: 0.7; } html.is-desktop .desktop-sidebar__notif-btn:hover svg { opacity: 1; } /* Panel position on desktop is set dynamically by JS (_open method) */ /* ─── Profile Modal (desktop position) ──────────────────────────── */ html.is-desktop .profile-modal { position: fixed !important; bottom: 80px !important; left: 8px !important; top: auto !important; right: auto !important; width: 236px !important; box-shadow: 0 8px 32px rgba(0,0,0,.14) !important; } /* ─── Container ──────────────────────────────────────────────────── */ html.is-desktop .container { padding: var(--desktop-top-pad) 36px !important; max-width: none !important; gap: 24px !important; } html.is-desktop .area { padding-top: 0 !important; } /* ─── PAGE: index (Dashboard) ────────────────────────────────────── */ html.is-desktop body[data-page="index"] #managerDash .grid { grid-template-columns: repeat(4, 1fr) !important; } html.is-desktop .desktop-dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; } html.is-desktop body[data-page="index"] #employeeDash { max-width: 680px; } html.is-desktop body[data-page="index"] .headerText { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } html.is-desktop body[data-page="index"] .headerText h5 { font-size: 1.5rem; } /* ─── PAGE: record ───────────────────────────────────────────────── */ html.is-desktop body[data-page="record"] .container { max-width: 1100px !important; } html.is-desktop .desktop-rec-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; } html.is-desktop .desktop-rec-grid .timer-card { grid-column: 1; grid-row: 1 / 3; position: sticky; top: var(--desktop-top-pad); margin-top: 0 !important; } html.is-desktop .desktop-rec-right { grid-column: 2; display: flex; flex-direction: column; gap: 20px; } html.is-desktop .desktop-rec-right .area { margin-top: 0 !important; } html.is-desktop .desktop-manager-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } html.is-desktop .desktop-manager-rec-grid .area { margin-top: 0 !important; } /* ─── PAGE: managment ────────────────────────────────────────────── */ html.is-desktop body[data-page="managment"] #overviewArea { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } html.is-desktop body[data-page="managment"] #openListArea { display: contents; } html.is-desktop body[data-page="managment"] .openListBtn[data-type="customers"] { width: auto !important; margin-top: 0 !important; grid-column: span 2; } html.is-desktop body[data-page="managment"] .managment-list-container { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; } html.is-desktop body[data-page="managment"] #listArea > .flex:first-child { margin-bottom: 16px !important; } /* ─── PAGE: calendar ─────────────────────────────────────────────── */ html.is-desktop body[data-page="calendar"] .calendar-sub-header, html.is-desktop body[data-page="calendar"] .cal-sub-header { left: var(--sidebar-width) !important; right: 0 !important; width: auto !important; max-width: none !important; transform: none !important; top: 0 !important; } html.is-desktop body[data-page="calendar"] .header-v2 { left: var(--sidebar-width) !important; right: 0 !important; width: auto !important; max-width: none !important; transform: none !important; } /* Kalender-Content bekommt auf Desktop das korrekte padding-top (cal-sub-header hat kein top-header mehr, da das mobile header weg ist) */ html.is-desktop body[data-page="calendar"] .container { padding-top: 122px !important; } /* ─── PAGE: performance_reports ──────────────────────────────────── */ html.is-desktop body[data-page="performance_reports"] .container { max-width: 1280px !important; } /* ─── Modals & Overlays ──────────────────────────────────────────── */ html.is-desktop .bottom-modal { position: fixed !important; bottom: auto !important; top: 50% !important; left: calc(var(--sidebar-width) + 5vw) !important; right: 5vw !important; width: auto !important; max-width: 680px !important; margin: 0 auto; transform: translateY(-50%) !important; border-radius: var(--radius-xl) !important; min-height: 0 !important; max-height: 80vh !important; } html.is-desktop .bottom-modal.active { transform: translateY(-50%) !important; } html.is-desktop .modal-v2 { max-width: 540px; margin: 0 auto; } /* ─── Misc ───────────────────────────────────────────────────────── */ html.is-desktop .grid-obj-Two h3 { font-size: 2.2rem; } html.is-desktop .openListBtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-Two); cursor: pointer; } html.is-desktop .card-Search { max-width: 480px; } /* ═══════════════════════════════════════════════════════════════════ LARGE SCREENS (1280px – 1599px) ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 1280px) { html.is-desktop { --sidebar-width: 268px; } html.is-desktop .container { padding: var(--desktop-top-pad) 48px !important; } html.is-desktop .desktop-dash-cols { grid-template-columns: 3fr 2fr; gap: 28px; } } /* ═══════════════════════════════════════════════════════════════════ WIDE SCREENS (1600px+) — 24" / 27" monitors ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 1600px) { html.is-desktop { --sidebar-width: 280px; --desktop-top-pad: 36px; } /* Cap content width so it doesn't span the full 1600-2560px canvas */ html.is-desktop .container { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding: var(--desktop-top-pad) 56px !important; } /* Dashboard: 4 stat cards still, but more breathing room */ html.is-desktop body[data-page="index"] #managerDash .grid { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } html.is-desktop .desktop-dash-cols { gap: 32px; } /* Record page */ html.is-desktop body[data-page="record"] .container { max-width: 1200px !important; } html.is-desktop .desktop-rec-grid { grid-template-columns: 340px 1fr; gap: 32px; } /* Management 3-col overview keeps good proportions */ html.is-desktop body[data-page="managment"] #overviewArea { grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Sidebar nav items slightly larger for the bigger screen */ html.is-desktop .desktop-nav-item { padding: 10px 12px !important; font-size: 14px !important; } html.is-desktop .desktop-sidebar__section-label { font-size: 10.5px; } } /* ═══════════════════════════════════════════════════════════════════ ULTRA-WIDE (2200px+) — additional cap so nothing looks absurd ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 2200px) { html.is-desktop .container { max-width: 1800px !important; } }