/* layout-modern.css
   Responsive application shell: topbar + collapsible sidebar + content feed
   Initial scaffold. Iterative enhancements will follow.
*/
:root {
  --sidebar-w: 240px;
  --sidebar-w-compact: 72px;
  --topbar-h: 60px;
  --shell-bg: #f6f7f9;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e4e9ee;
  --sidebar-text: #222;
  --sidebar-muted: #778;
  --sidebar-accent: #e03b3b;
  --focus-ring: 3px solid rgba(26,115,232,0.75);
  --transition: 180ms cubic-bezier(.2,.8,.2,1);
  --tooltip-bg: #111;
  --tooltip-text: #fff;
  --sidebar-hover-bg: rgba(0,0,0,0.045);
  --sidebar-active-gradient: linear-gradient(90deg,var(--sidebar-accent), #ff6d40);
  --elevated-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}

body { background: var(--shell-bg); }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-areas: "sidebar topbar" "sidebar main";
  grid-template-columns: var(--sidebar-current-w, var(--sidebar-w)) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 10px 12px 16px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  width: var(--sidebar-current-w, var(--sidebar-w));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sidebar header { display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.sidebar .brand-mini { display:flex; align-items:center; text-decoration:none; color: var(--sidebar-text); font-weight:600; font-size:1.05rem; }
.sidebar .brand-mini img { height:3.2rem; width:auto; display:block; }

.sidebar-nav { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.sidebar-nav li { margin:0; }
.sidebar-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color: var(--sidebar-text);
  font-size:0.95rem;
  font-weight:500;
  background: transparent;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.sidebar-nav a:hover { background: var(--sidebar-hover-bg); }
.sidebar-nav a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sidebar-nav a[aria-current="page"] { background: var(--sidebar-active-gradient); color:#fff; box-shadow: 0 4px 14px rgba(224,59,59,0.22); }
.sidebar-nav a .icon { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.sidebar-nav.compact a span.label { display:none; }
.sidebar-nav.compact a { justify-content:center; padding:12px 8px; }
/* Icon opacity microinteraction */
.sidebar-nav a .icon svg { transition: opacity 120ms ease; }
.sidebar-nav a:hover .icon svg { opacity:0.82; }

/* Tooltip (compact mode) */
body.sidebar-compact .sidebar-nav a[data-label]:hover::after,
body.sidebar-hidden.sidebar-overlay .sidebar-nav a[data-label]:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding:6px 10px;
  font-size: 0.75rem;
  line-height:1;
  border-radius:6px;
  white-space:nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index:1500;
}
@media (max-width:900px){
  body.sidebar-overlay .sidebar-nav a[data-label]:hover::after { left: calc(100% + 4px); }
}

/* Compact state width adjustment */
/* legacy compact width removed: we only support expanded and hidden states now */
/* body.sidebar-compact { --sidebar-current-w: var(--sidebar-w-compact); } */
body.sidebar-hidden { --sidebar-current-w: 0px; }
body.sidebar-hidden .sidebar { transform: translateX(-100%); box-shadow:none; }
body.sidebar-overlay .sidebar { position: fixed; top:0; left:0; bottom:0; z-index:1400; box-shadow:0 14px 40px rgba(0,0,0,0.28); }
body.sidebar-overlay.sidebar-hidden .sidebar { pointer-events:none; }
body.sidebar-overlay:not(.sidebar-hidden) .sidebar { transform: translateX(0); }
body.sidebar-overlay .app-shell { grid-template-columns: 0 1fr; }
/* Dim page content under overlay when sidebar is visible (cover main content, images, etc) */
#sidebarOverlay { display:none; position: fixed; inset:0; background: rgba(0,0,0,0.38); z-index: 1350; }
body.sidebar-overlay:not(.sidebar-hidden) #sidebarOverlay { display:block; }
/* Ensure topbar toggle is visible in overlay/hidden states */
@media (max-width: 900px) {
  .header.topbar .sidebar-toggle-btn { display:inline-flex; }
}

/* Topbar */
.header.topbar { grid-area: topbar; position: relative; top:0; left:0; right:0; height: var(--topbar-h); display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#fff; border-bottom:1px solid var(--sidebar-border); box-shadow: 0 1px 2px rgba(0,0,0,0.04); z-index:1300; }
.topbar-left { display:flex; align-items:center; gap:10px; }
.topbar-center { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:0 8px; }
.topbar-right { display:flex; align-items:center; gap:12px; }

/* Toggle placement logic */
.header.topbar .sidebar-toggle-btn { display: none; }
.sidebar .sidebar-header { display:flex; align-items:center; padding: 4px 4px 8px; }
.sidebar .sidebar-header .sidebar-toggle-btn { display:inline-flex; }

/* Show topbar toggle whenever sidebar is hidden (desktop or overlay), hide sidebar's own toggle */
body.sidebar-hidden .header.topbar .sidebar-toggle-btn { display:inline-flex; }
body.sidebar-hidden .sidebar .sidebar-header .sidebar-toggle-btn { display:none; }
/* When overlay is open, prefer the sidebar toggle and hide the topbar one */
body.sidebar-overlay:not(.sidebar-hidden) .header.topbar .sidebar-toggle-btn { display:none; }
body.sidebar-overlay:not(.sidebar-hidden) .sidebar .sidebar-header .sidebar-toggle-btn { display:inline-flex; }

/* When sidebar is expanded, hide the duplicate topbar brand to avoid duplication */
/* Hide topbar brand when sidebar visible (expanded desktop or overlay open) to avoid duplication */
body.sidebar-expanded .header.topbar .brand,
body.sidebar-overlay:not(.sidebar-hidden) .header.topbar .brand { display: none !important; }

.sidebar-toggle-btn { background:#fff; border:1px solid var(--sidebar-border); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:0.95rem; display:inline-flex; align-items:center; gap:6px; line-height:1; }
.sidebar-toggle-btn:hover { background:#f2f5f8; }
.sidebar-toggle-btn:active { background:#edf0f3; }
.sidebar-toggle-btn:focus-visible { outline: var(--focus-ring); }

/* Brand logo sizing - slightly smaller */
.brand-logo { height: 28px; width: auto; display: block; }

.search-form { width:100%; max-width:560px; display:flex; align-items:center; gap:8px; margin:0; }
.search-form input[type="text"] { flex:1 1 auto; padding:8px 10px; border:1px solid var(--sidebar-border); border-radius:8px; font-size:0.95rem; background:#fff; }
.search-form button { padding:8px 14px; border-radius:8px; border:1px solid var(--sidebar-border); background:#fafbfc; cursor:pointer; font-weight:500; }
.search-form button:hover { background:#f0f4f7; }
.search-form button:active { background:#e8edf2; }

/* Content */
main { grid-area: main; }
main > .site-container { max-width: 1280px; padding: 16px 16px 24px; margin: 0 auto; }
/* Normalize global rhythm: reduce excessive top paddings and keep consistent gutters */
:root { --gutter: 16px; }
.header.topbar { padding-left: var(--gutter); padding-right: var(--gutter); }
.topbar-center { padding-left: 8px; padding-right: 8px; }
main > .site-container { padding-left: var(--gutter); padding-right: var(--gutter); }
.sidebar { padding-left: calc(var(--gutter) - 4px); padding-right: calc(var(--gutter) - 4px); }
.sidebar-nav a { padding-top: 10px; padding-bottom: 10px; }
.site-container .card { margin-bottom: 18px; }

/* Overlay breakpoint: below 900px use fixed overlay sidebar hidden by default */
@media (max-width: 900px) {
  /* Overlay model: default hidden; when visible, respect compact vs full widths */
  body { --sidebar-current-w: 0px; }
  body.sidebar-overlay:not(.sidebar-hidden):not(.sidebar-compact) { --sidebar-current-w: var(--sidebar-w); }
  body.sidebar-overlay.sidebar-compact:not(.sidebar-hidden) { --sidebar-current-w: var(--sidebar-w-compact); }
  /* Overlay model adjustments: sidebar becomes off-canvas; center area repurposed */
  .header.topbar { height: var(--topbar-h); padding: 0 12px; }
  .topbar-center { justify-content:flex-end; padding:0; }
  .search-form { max-width: 360px; }
}

/* Hide search on extremely narrow viewports */
@media (max-width: 520px){
  .topbar-center { display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .app-shell { transition: none !important; }
  .sidebar-nav a { transition: none !important; }
  .sidebar-toggle-btn { transition: none !important; }
}

/* Disable shell/sidebar animations during navigation to prevent flicker */
body.no-anim .app-shell,
body.no-anim .sidebar,
body.no-anim .sidebar-nav a,
body.no-anim .sidebar-toggle-btn {
  transition: none !important;
}

/* No-JS fallback: ensure sidebar visible */
.no-js .sidebar { transform:none !important; }

/* SVG icon sizing */
.sidebar-nav a .icon svg { width:24px; height:24px; display:block; }
/* Upload CTA refinement */
.header.topbar .primary-cta { background: var(--sidebar-active-gradient); color:#fff; padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:600; box-shadow: 0 4px 12px rgba(224,59,59,0.22); border:1px solid rgba(255,255,255,0.4); }
.header.topbar .primary-cta:hover { filter: brightness(1.04); }
.header.topbar .primary-cta:active { filter: brightness(0.95); }
/* Settings hover */
.header.topbar a.muted:hover { background:#f5f7fa; }
body.sidebar-compact .sidebar-nav a { position:relative; }

/* Sidebar header alignment */
.sidebar header { padding: 4px 4px 8px; }
.sidebar header .sidebar-toggle-btn { margin-left: 0; }

/* Sidebar nav item height normalization */
.sidebar-nav a { min-height: 40px; }
.sidebar-nav a .label { line-height: 1; }