/* =========================================================
   app.css – Mindspace Web App (2-Rail: Sidebar + Main)
   - Seite scrollt normal
   - Topbar: fixed, schwarz
   - Linke Sidebar: sticky + interner Scroll
   - Main: scrollt über die Seite (kein abgeschnittener Header)
   - Einheitliche 8px-Abstände, sichtbare Rundungen
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
    --gap: 8px;
    --rail-pad: var(--gap);
    --topbar-h: 56px;

    --page-bg: #000;       /* Body-Hintergrund */
    --rail-bg: #1c1c1e;    /* Card-Flächen */
    --card-bg: #232323;

    --text: #ececec;
    --muted: #9ba1a6;

    --left-w: 300px;

    --chip-h: 32px;
    --chip-px: 12px;
    --chip-radius: 999px;
    --chipbar-btn-w: 28px;

    --radius-lg: 12px;
    
}

html[data-bs-theme="dark"]{
    /* Werte identisch, falls Dark-Mode gewechselt wird */
    --page-bg:#000;
    --rail-bg:#1c1c1e;
    --card-bg:#232323;
    --text:#ececec;
    --muted:#9ba1a6;
}

/* ---------- Base ---------- */
html{
    height:100%;
    margin:0;
    overflow:hidden; /* Verhindert Page-Scrolling komplett */
}
body{
    height:100%;
    margin:0;
    background:var(--page-bg);
    color:var(--text);
    overflow:hidden; /* Verhindert Page-Scrolling komplett */
}

.text-muted{ color:var(--muted) !important; }

/* ---------- Topbar ---------- */
.app-topnav{
    position:fixed;
    left:0; right:0; top:0;
    height:var(--topbar-h);
    z-index:1000;
    background:#000;
    border-bottom:0 !important; /* kein Border unten */
}
.app-topnav-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: calc((var(--topbar-h) - 40px) / 2) var(--gap); /* Perfect vertical centering: (56px - 40px) / 2 = 8px */
}

/* Topbar brand logo - Apple-like mit Border */
.app-topnav .brand img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15); /* 1px minimal grauer Rahmen */
}

/* Topbar user avatar - konsistente Größe */
.app-topnav .dropdown img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
}

/* ---------- Shell (Fixed position - kein Page-Scroll) ---------- */
.app-shell{
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 var(--gap) var(--gap) var(--gap); /* Kein Top-Padding um doppelten Abstand zu vermeiden */
    display: grid;
    grid-template-columns: var(--left-w) minmax(0,1fr);
    gap: var(--gap);
}

/* ---------- Rail-Grundflächen ---------- */
.rail{
    background:var(--rail-bg);
    border-radius:var(--radius-lg);
    overflow:hidden;              /* zeigt die Rundungen sichtbar */
    min-width:0;
    display:flex;
    flex-direction:column;
}

/* Sidebar - volle Höhe im fixed container */
.rail-left{
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Main - volle Höhe im fixed container */
.rail-main{
    position: static;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bereich mit Innenabstand + optional sticky Kopfbereiche */
.rail__sticky{
    position: sticky;   /* <- wieder sticky! */
    top: 0;
    z-index: 2;
    background: inherit;
}
.rail__sticky-inner{
    /*padding: var(--gap);*/
    padding: var(--rail-pad);
}


/* Scrollanteil der Rail */
.rail__scroll{
    flex:1 1 auto;
    min-height:0;
    overflow: auto; /* Ermöglicht internes Scrollen für alle Rails */
}

/* Padding nur für Sidebar scroll area, nicht für Main */
.rail-left .rail__scroll{
    padding: var(--gap);
    overflow:auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Main content scroll area hat eigenes Padding-System */
.rail-main .rail__scroll{
    padding-top: var(--gap);
}
/* Standard: Padding in allen Sticky-Headern */
.rail__sticky-inner{
    padding: var(--rail-pad);
}

/* Override NUR im Hauptbereich: oben kein Padding */
.rail-main .rail__sticky-inner{
    padding: 0;                     /* kein Top-Padding im Main */
    /* optional explizit, falls du’s klarer magst: */
    /* padding: 0 var(--rail-pad) var(--rail-pad); */
}

/* Damit es nicht wieder doppelt wird: wenn Sticky vor Scroll, dann Scroll oben ohne */
.rail .rail__sticky + .rail__scroll{
    padding-top: 0;
}
/* Sidebar-spezifisches Scrollverhalten ist nun durch allgemeine .rail__scroll Regel abgedeckt */

/* Dünner Trenner */
.rail__divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin: var(--gap) 0;
}

/* ---------- Sidebar: horizontale Chipbar mit Scrollbar ---------- */
.chipbar{
    display:flex; align-items:center;
}

.chipbar__track{
    position:relative;
    flex:1 1 auto; min-width:0;
    display:flex; align-items:center; gap:var(--gap);
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    padding:0 0 8px 0;  /* Only bottom padding for scrollbar, remove all other padding */
    margin-left: -2px;  /* Pull first chip flush with title */
}

/* Custom styled scrollbar */
.chipbar__track::-webkit-scrollbar {
    height: 6px;
}

.chipbar__track::-webkit-scrollbar-track {
    background: rgba(255,255,255,.1);
    border-radius: 3px;
}

.chipbar__track::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.3);
    border-radius: 3px;
}

.chipbar__track::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.5);
}

/* Firefox scrollbar styling */
.chipbar__track {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.3) rgba(255,255,255,.1);
}

.chip{
    flex:0 0 auto;
    height:var(--chip-h);
    padding:0 var(--chip-px);
    border-radius:var(--chip-radius);
    border:none;
    background:var(--system-gray-5, #636366);
    color:#fff;
    font-size:.875rem;
    display:inline-flex; align-items:center; gap:6px;
    cursor:pointer;
}
.chip--active{
    background:var(--ms-primary, #A4ACFF); 
    color:#000; 
    border:none;
}

/* sanfte Kanten (optional) */
.chipbar__track::before{
    content:""; pointer-events:none; position:sticky; top:0; bottom:0; width:16px; z-index:1;
    left:0; background:linear-gradient(90deg, var(--rail-bg) 40%, transparent);
}

/* ---------- Sidebar-Liste ---------- */
.lib-item{
    display:grid;
    grid-template-columns:40px 1fr auto;
    gap:8px; align-items:center;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
}
.lib-item:hover{ background:rgba(255,255,255,.06); }
.lib-cover{ width:40px; height:40px; border-radius:4px; background:#333; overflow:hidden; }

/* ---------- Main Feed Beispiel ---------- */
.feed-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
    gap:var(--gap);
}
.feed-card{
    background:var(--card-bg);
    border-radius:8px;
    padding:var(--gap);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.feed-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 24px rgba(0,0,0,.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
    .app-shell{
        grid-template-columns: minmax(0,1fr);
        position: fixed; /* bleibt fixed auch auf mobile */
    }
    .rail-left{
        display: none; /* Sidebar wird auf mobile ausgeblendet */
    }
    .rail-main{
        height: 100%;
    }
    .rail-left .rail__scroll, .rail-main .rail__scroll{
        overflow: auto; /* behält scrolling bei */
    }
}

/* When there's no sidebar (unauthenticated users), use single column layout */
.app-shell:not(:has(.rail-left)) {
    grid-template-columns: minmax(0,1fr);
}

/* Fallback for browsers that don't support :has() selector */
.app-shell.no-sidebar {
    grid-template-columns: minmax(0,1fr);
}

/* Optional: Scrollbar-Styling */
.rail-left .rail__scroll::-webkit-scrollbar, .rail-main .rail__scroll::-webkit-scrollbar{ width:10px; }
.rail-left .rail__scroll::-webkit-scrollbar-thumb, .rail-main .rail__scroll::-webkit-scrollbar-thumb{
    background-color:rgba(255,255,255,.18);
    border-radius:8px; border:2px solid transparent; background-clip:content-box;
}

/* ---------- Legal Section ---------- */
.library-content {
    flex: 1;
    min-height: 0;
}

.legal-section {
    margin-top: auto;
    padding: var(--gap);
    flex-shrink: 0;
}

/* When library is empty, legal section should stick to bottom */
.rail__scroll:not(:has(.lib-item)) .legal-section {
    position: sticky;
    bottom: 0;
}

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--gap);
}

.legal-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.75rem;
    padding: 2px 0;
    transition: color 0.2s ease;
}

.legal-links a:hover {
    color: var(--text);
}

/* Compact legal links with center dots */
.legal-links-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    flex-wrap: wrap;
}

.legal-links-compact a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-links-compact a:hover {
    color: var(--text);
}

.legal-links-compact .separator {
    color: var(--muted);
    font-size: 0.8rem;
    user-select: none;
}

.copyright-section {
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
}

.copyright-section .rog-link {
    color: var(--text);
    text-decoration: none;
    font-family: 'DICE', monospace;
    font-size: 0.8rem;
    transition: opacity 0.2s ease;
}

.copyright-section .rog-link:hover {
    opacity: 0.8;
}