/* =====================================================
   AI for Sarcopenia Literature Daily - Custom Styles (Clean)
   Purpose: Formal, decent, non-overlapping layout with sidebar TOC
   Theme: Just the Docs
   Colors: #667eea (primary), #764ba2 (secondary), #27262b (text)
===================================================== */

:root { --sidebar-width: 291px; }
html { scroll-behavior: smooth; }
body { line-height: 1.65; color: #27262b; }

/* Sidebar */
.side-bar { width: var(--sidebar-width)!important; min-width: var(--sidebar-width)!important; border-right:1px solid #eeebee; background:#f5f6fa; overflow-y:auto; overflow-x:hidden; z-index:100; }
.site-header { border-bottom:1px solid #eeebee; padding:.75rem 1rem; overflow:hidden; }
.site-title { display:block; font-weight:600; color:#27262b; font-size:clamp(.9rem,2vw,1.125rem); line-height:1.3; padding:.5rem .75rem; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; }
.site-title::before { content:"🏥 "; margin-right:.25rem; }

/* Main layout */
@media (min-width:1064px){ .main{margin-left:var(--sidebar-width)!important; max-width:none!important; width:auto!important;} .main-content,.page-content{max-width:1400px; margin:0 auto; padding:2rem 3rem;} }
@media (max-width:1063.98px){ .main{margin-left:0!important;} .side-bar{position:fixed; top:0; left:0; bottom:0; transform:translateX(-100%); transition:transform .3s ease;} .side-bar.show{transform:translateX(0);} #mobile-menu-toggle{position:fixed; top:1rem; left:1rem; z-index:1001;} }

/* Dashboard header */
.paper-dashboard{position:relative; z-index:1;} .dashboard-header{text-align:center; margin-bottom:2rem; padding:2rem 1.5rem; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); border-radius:12px; box-shadow:0 4px 20px rgba(102,126,234,.25); color:#fff;} .dashboard-title{margin:0; font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800;} .dashboard-title::before{content:"🏥 "; font-size:.9em;} .last-updated{margin-top:.75rem; opacity:.95; font-weight:500;}

/* Quick stats */
.quick-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.5rem 0 2rem;} .stat-card{background:#fff; border-radius:12px; padding:1.25rem 1rem; box-shadow:0 2px 12px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease;} .stat-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(102,126,234,.2);} .stat-icon{font-size:2rem; display:block; margin-bottom:.5rem;} .stat-label{font-size:.85rem; color:#5c5962; text-transform:uppercase; letter-spacing:.05em;} .stat-value{font-size:1.5rem; font-weight:800; color:#27262b;}

/* Headings */
h1{font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; color:#212529; margin-bottom:1rem;} h2{font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; margin:2rem 0 1rem; padding-bottom:.5rem; border-bottom:3px solid #667eea;} h3{font-size:clamp(1.25rem,2vw,1.5rem); font-weight:600; color:#495057; margin:1.5rem 0 .75rem;}

/* In-page TOC */
.text-delta{font-size:1.1rem; font-weight:600; margin-top:0;} #markdown-toc{background:#f8f9fa; border-left:4px solid #667eea; padding:1rem 1.25rem; margin:1rem 0 2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05);} #markdown-toc li{list-style:none; margin:.5rem 0; position:relative; padding-left:1rem;} #markdown-toc li::before{content:"▸"; position:absolute; left:0; color:#667eea; font-weight:700;} #markdown-toc a{color:#5c5962; text-decoration:none; font-weight:500;} #markdown-toc a:hover{color:#667eea; text-decoration:underline;}

/* Sidebar TOC */
.sidebar-toc{margin:1rem; padding:.75rem; background:#fff; border:1px solid #ececf1; border-radius:8px;} .sidebar-toc-title{font-size:.85rem; font-weight:700; color:#7253ed; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem;} .sidebar-toc-list{list-style:none; margin:0; padding:0;} .sidebar-toc-list li{margin:.25rem 0;} .sidebar-toc-list li.h3{padding-left:.75rem;} .sidebar-toc-list a{display:block; padding:.25rem .5rem; border-radius:6px; color:#5c5962; text-decoration:none; font-size:.92rem;} .sidebar-toc-list a:hover{background:rgba(102,126,234,.1); color:#667eea;}

/* Tables */
table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); margin:1.5rem 0; font-size:.95rem;} thead{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff;} thead th{padding:1rem; text-align:left; text-transform:uppercase; letter-spacing:.5px; font-size:.9rem;} tbody tr{border-bottom:1px solid #e9ecef; transition:background-color .2s ease, transform .2s ease;} tbody tr:hover{background:rgba(102,126,234,.06); transform:translateX(2px);} tbody td{padding:1rem; vertical-align:top; color:#212529;} tbody td:nth-child(2){font-weight:600; color:#1a1a1a;} tbody td:nth-child(5) a{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff!important; padding:.4rem .7rem; border-radius:6px; font-weight:600; text-decoration:none!important; display:inline-block;} tbody td:nth-child(5) a:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(102,126,234,.3);}
@media (max-width:640px){ table, thead, tbody, th, td, tr{display:block;} thead tr{position:absolute; top:-9999px; left:-9999px;} tr{margin-bottom:1rem; border:1px solid #eeebee; border-radius:8px; padding:.5rem;} td{border:none; position:relative; padding-left:45%;} td::before{content:attr(data-label); position:absolute; left:.5rem; width:40%; white-space:nowrap; font-weight:700; color:#667eea;} }

/* Search & links */
.search-input{border-radius:8px!important; border:2px solid #e9ecef!important; transition:all .2s ease!important;} .search-input:focus{border-color:#667eea!important; box-shadow:0 0 0 3px rgba(102,126,234,.1)!important;} a{color:#667eea; text-decoration:none; transition:color .2s ease;} a:hover{color:#764ba2; text-decoration:underline;} .external-link-icon{margin-left:.2em; font-size:.8em; opacity:.6;}

/* Back to top */
#back-to-top{position:fixed; bottom:5rem; right:2rem; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; width:48px; height:48px; border-radius:50%; border:0; display:none; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 4px 12px rgba(102,126,234,.3); transition:all .3s ease; z-index:999;} #back-to-top.show{display:flex;} #back-to-top:hover{transform:translateY(-3px); box-shadow:0 6px 16px rgba(102,126,234,.4);}

/* Floating Search button (placed above back-to-top) */
#search-fab{position:fixed; right:2rem; bottom:11rem; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; width:48px; height:48px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 4px 12px rgba(102,126,234,.3); transition:all .3s ease; z-index:1000;}
#search-fab:hover{transform:translateY(-3px); box-shadow:0 6px 16px rgba(102,126,234,.4);} 

/* Footer */
.site-footer{border-top:1px solid #eeebee; background:#f5f6fa; padding:2rem 1rem; text-align:center; color:#7253ed; font-size:.875rem;}

/* Mobile adjustments */
@media (max-width: 768px){
   #back-to-top{bottom:4rem; right:1rem; width:44px; height:44px; font-size:1.3rem;}
   #search-fab{bottom:8.5rem; right:1rem; width:44px; height:44px; font-size:1.25rem;}
}