/* * @hb/shared-frontend/styles/app-shell.css * Globale Layout-Schicht: Sidebar links, Main rechts. * Auf jeder App-Seite per aktivieren. */ body.with-sidebar { background: var(--color-surface-alt); } .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } /* === Sidebar === */ .sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; padding: 18px 18px; border-bottom: 1px solid var(--color-border); text-decoration: none; } .sidebar-brand img { height: 32px; max-height: 48px; max-width: 100%; width: auto; object-fit: contain; } .sidebar-brand [data-brand-fallback] { font-size: 18px; font-weight: 700; color: var(--color-brand-primary); overflow-wrap: anywhere; } [data-brand-logo][hidden], [data-brand-fallback][hidden] { display: none !important; } [data-feature-hidden] { display: none !important; } [data-feature-disabled] { opacity: .5; cursor: not-allowed !important; } .feature-notice { padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 14px; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; overflow-y: auto; } .sidebar-section { font-size: 11px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); padding: 16px 12px 6px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--color-text-default); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); text-decoration: none; transition: background 100ms ease, color 100ms ease; cursor: pointer; } .sidebar-link:hover { background: var(--color-surface-alt); text-decoration: none; } .sidebar-link.is-active { background: var(--color-brand-primary-soft); color: var(--color-brand-primary); } .sidebar-link.is-disabled { color: var(--color-text-subtle); cursor: not-allowed; opacity: 0.7; } .sidebar-link.is-disabled:hover { background: transparent; } .sidebar-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; font-size: 16px; flex-shrink: 0; } .sidebar-label { flex: 1; min-width: 0; } .sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--font-weight-bold); background: var(--color-surface-muted); color: var(--color-text-default); flex-shrink: 0; } .sidebar-badge.is-red { background: #ef4444; color: white; } .sidebar-badge.is-amber { background: #f59e0b; color: white; } .sidebar-foot { border-top: 1px solid var(--color-border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .sidebar-user { display: flex; align-items: center; gap: 10px; } .sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-primary); color: var(--color-brand-primary-on); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); flex-shrink: 0; } .sidebar-user-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); } .sidebar-user-role { font-size: var(--font-size-xs); color: var(--color-text-muted); } .sidebar-logout { width: 100%; padding: 6px 10px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; color: var(--color-text-muted); } .sidebar-logout:hover { color: var(--color-status-error); border-color: var(--color-status-error); } /* === Main === */ .app-main-content { padding: 32px 40px; width: 100%; box-sizing: border-box; min-width: 0; /* erlaubt Grid-Items, kleiner als Inhalt zu werden */ } @media (max-width: 800px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--color-border); } .app-main-content { padding: 20px; } } /* === Hinweis-Modal "Wird noch gebaut" === */ .coming-soon-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; } .coming-soon-modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px 28px; max-width: 420px; box-shadow: var(--shadow-lg); } .coming-soon-modal h3 { margin: 0 0 8px; } .coming-soon-modal p { margin: 0 0 20px; color: var(--color-text-muted); } .coming-soon-modal button { padding: 8px 16px; background: var(--color-brand-primary); color: var(--color-brand-primary-on); border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: var(--font-weight-semibold); }