/* Dual stat card layout */
.dual-stat { display:flex; gap:32px; justify-content:space-between; align-items:stretch; width:100%; }
.dual-stat .stat-block { flex:1 1 50%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:8px 12px; }
.dual-stat .stat-block .card-label { font-size:13px; margin-bottom:6px; color:var(--muted); }
.dual-stat .stat-block .card-value { font-size:26px; line-height:1; font-weight:700; }
/* Vertical separator between the two stats */
.dual-stat .stat-block + .stat-block { border-left:1px solid var(--border); padding-left:20px; }
:root{
  --bg: #0f172a;
  --bg-soft: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #22c55e;
  --accent-2: #60a5fa;
  --card: #111827;
  --border: #1f2937;
}

:root.light{
  --bg: #f8fafc;
  --bg-soft: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #16a34a;
  --accent-2: #2563eb;
  --card: #ffffff;
  --border: #e5e7eb;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg); color: var(--text);
  display:flex;
}

.hidden{ display:none !important; }

.sidebar{
  width: 240px; background: var(--bg-soft); border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:16px;
}
.brand{ font-weight:700; font-size:20px; display:grid; gap:8px; }
.brand-row{ display:flex; align-items:center; gap:10px; line-height:1.1; flex-wrap:nowrap; }
.brand-logo{ width:48px; height:48px; object-fit:contain; border-radius:6px; background: transparent; }
.brand-title{ display:inline-block; font-weight:800; }
.company-select{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--border); background: var(--bg); color: var(--text); }
/* (removed: refresh/diagnostic controls styles) */
.nav-link{
  width:100%; text-align:left; background: transparent; color: var(--text); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; display:block; text-decoration:none;
}
.nav-link:hover{ text-decoration:none; }
.nav-link.active{ border-color: var(--accent); color: var(--accent); }
.sidebar-footer{ margin-top:auto; }
#toggle-theme{ width:100%; }

/* Space menu items vertically */
.sidebar nav{ display:grid; gap:8px; }

.container{ flex:1; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); background: var(--bg-soft); }
.topbar .actions{ display:flex; gap:8px; position:relative; }
/* User badge (avatar + name) */
.user-badge{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background: var(--card); color: var(--text); font-size:14px; }
.user-badge .user-avatar{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.user-badge .user-name{ max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* App launcher (flyout) */
.app-launcher-wrap{ position:relative; }
.app-flyout{ position:absolute; top:42px; right:0; min-width:220px; background: var(--bg-soft); border:1px solid var(--border); border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding:8px; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; opacity:0; visibility:hidden; transform: translateY(-4px); transition: all .16s ease; z-index: 2000; }
.app-launcher-wrap:hover .app-flyout, .app-launcher-wrap:focus-within .app-flyout{ opacity:1; visibility:visible; transform: translateY(0); }
.app-item{ display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:10px; background: var(--card); color: var(--text); text-decoration:none; font-size:14px; }
.app-item:hover{ border-color: var(--accent-2); }
.app-icon{ width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; background: rgba(96,165,250,0.18); color:#60a5fa; font-weight:700; }

/* Sidebar brand positioning: flyout under the logo, aligned left */
.sidebar .brand .app-launcher-wrap{ position: relative; display:inline-flex; }
.sidebar .brand .app-launcher-wrap .app-flyout{ top:56px; left:0; right:auto; }

input[type="search"]{ padding:10px; border:1px solid var(--border); border-radius:8px; background: var(--bg); color: var(--text); }
button{ padding:10px 12px; border-radius:8px; border:1px solid var(--border); background: var(--card); color: var(--text); cursor:pointer; }
button:hover{ border-color: var(--accent-2); }

main{ padding:20px; }
.view.hidden{ display:none; }

/* Disabled/empty state */
.empty-state{ padding:16px; border:1px dashed var(--border); border-radius:12px; background: color-mix(in srgb, var(--bg-soft) 80%, transparent); color: var(--muted); }
.content-disabled{ opacity: 0.6; filter: grayscale(0.1); }

.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.card{ background: var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; }
.card-label{ color: var(--muted); font-size:14px; }
.card-value{ font-size:28px; font-weight:700; margin-top:8px; }

.activity{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.activity li{ background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; }

.list-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.item-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.item{ display:flex; align-items:center; justify-content:space-between; gap:12px; background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; }
.item{ transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease; }
.item:hover{ border-color: color-mix(in srgb, var(--accent-2) 28%, var(--border)); box-shadow: 0 10px 28px rgba(2,6,23,0.28); transform: translateY(-2px); }
.item.completed{ opacity: 0.6; }
.item .meta{ display:flex; flex-direction:column; }
.item .title{ font-weight:600; }
.item .desc{ color: var(--muted); font-size:14px; }
.item .tags{ display:flex; gap:6px; }
.tag{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background: transparent; color: var(--muted); }

/* Modal */
dialog::backdrop{ background: rgba(0,0,0,0.55); }
dialog{ border:none; border-radius:12px; padding:0; }
.modal{ min-width: min(560px, 92vw); background: var(--bg-soft); color: var(--text); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.modal.modal-lg{ min-width: min(820px, 96vw); }
.modal header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); }
.modal .modal-body{ display:grid; gap:16px; padding:20px; }
.modal footer{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); justify-content:flex-end; }
.modal label{ display:grid; gap:6px; font-size:14px; }
.modal input, .modal textarea, .modal select{ padding:10px; border-radius:8px; border:1px solid var(--border); background: var(--bg); color: var(--text); }

/* Requests UX enhancements */
.req-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.req-card{ display:grid; grid-template-columns: auto 1fr; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px; background: var(--card); }
.req-card input[type="checkbox"]{ margin-top:2px; }
.pill{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; }
.requests-list{ display:grid; gap:10px; }
.company-label{ font-size:14px; color: var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .cards{ grid-template-columns: repeat(1, minmax(0,1fr)); }
  .sidebar{ width: 200px; }
}

/* Formations grid cards */
.cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.f-card{ display:grid; grid-template-rows: 140px auto; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), var(--card)); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.f-card{ transition: transform .12s ease, box-shadow .16s ease, border-color .12s ease; }
.f-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(2,6,23,0.28); border-color: color-mix(in srgb, var(--accent-2) 28%, var(--border)); }
.f-thumb{ background: #0b1220; position:relative; }
.f-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-body{ padding:12px; display:grid; gap:8px; }
.f-title{ font-weight:700; }
.f-desc{ color: var(--muted); font-size:14px; }
.f-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{ font-size:12px; padding:4px 10px; border-radius:999px; background: rgba(96,165,250,0.10); color:#93c5fd; border:1px solid color-mix(in srgb, var(--border) 60%, transparent); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.03); }
.badge:hover{ transform: translateY(-1px); }
/* Category tags: green */
.badge.category{ background: rgba(34,197,94,0.15); color:#22c55e; }
/* Kind tags: specific colors */
.badge.kind.kind-folder{ background: rgba(37,99,235,0.18); color:#3b82f6; }
.badge.kind.kind-course,
.badge.kind.kind-syllabus{ background: rgba(239,68,68,0.16); color:#ef4444; }

/* Admin-specific styles have been moved to assets/admin.css */

/* Toast notifications (shared) */
.toast-container{ position: fixed; right: 16px; bottom: 16px; display:grid; gap:8px; z-index: 10000; }
.toast{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background: var(--bg-soft); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity:0; transform: translateY(8px); transition: all .18s ease; }
.toast.show{ opacity:1; transform: translateY(0); }
.toast.hide{ opacity:0; transform: translateY(8px); }
.toast .toast-dot{ width:10px; height:10px; border-radius:999px; background: var(--muted); }
.toast-success .toast-dot{ background:#22c55e; }
.toast-error .toast-dot{ background:#ef4444; }
.toast-warn .toast-dot{ background:#f59e0b; }
.toast-info .toast-dot{ background:#60a5fa; }
.toast-close{ background: transparent; border: none; color: var(--muted); padding:4px 6px; }