/* ================================================================
   CODM Team Manager — Custom Dark Theme
   ================================================================ */

:root {
  --sidebar-width: 240px;
  --color-primary: #4f46e5;
  --color-bg-darkest: #020817;
  --color-bg-darker:  #0f172a;
  --color-bg-dark:    #1e293b;
  --color-border:     #1e293b;
  --color-text:       #f8fafc;
  --color-muted:      #94a3b8;
}

/* ─── Global ─────────────────────────────────────────────── */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--color-bg-darkest); }
* { box-sizing: border-box; }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-darker); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ─── Layout ────────────────────────────────────────────── */
#wrapper { min-height: 100vh; }

/* ─── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--color-bg-darker);
  transition: width .25s ease, transform .25s ease;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
  flex-shrink: 0;
}

#sidebar.collapsed { width: 60px; }
#sidebar.collapsed .sidebar-user div,
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .sidebar-footer a span,
#sidebar.collapsed .nav-section { display: none; }
#sidebar.collapsed .sidebar-brand span { display: none; }
#sidebar.collapsed .badge { display: none; }

#content-wrapper {
  margin-left: var(--sidebar-width);
  transition: margin-left .25s ease;
}
#sidebar.collapsed ~ #content-wrapper { margin-left: 60px; }

/* ─── Nav links ───────────────────────────────────────────── */
.sidebar-nav .nav-link {
  color: var(--color-muted);
  border-radius: 8px;
  margin: 1px 8px;
  transition: all .15s ease;
  font-size: .85rem;
  text-decoration: none;
}
.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: var(--color-text);
}
.sidebar-nav .nav-link.active {
  background: rgba(255,255,255,.08);
  color: var(--color-text);
  font-weight: 600;
}

/* ─── Brand ───────────────────────────────────────────────── */
.sidebar-brand { text-decoration: none; }
.brand-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

/* ─── bg-darker utility ───────────────────────────────────── */
.bg-darker { background: var(--color-bg-darker) !important; }

/* ─── Cards ────────────────────────────────────────────────── */
.card { border-radius: 12px; }
.card-header { padding: .75rem 1.25rem; }

/* ─── Kanban Board ────────────────────────────────────────── */
.kanban-column { user-select: none; }
.kanban-col { transition: background .15s, border-color .15s; }
.task-card { transition: transform .15s, box-shadow .15s; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.4); }

/* ─── Tables ───────────────────────────────────────────────── */
.table-dark > thead > tr > th { border-bottom: 1px solid #1e293b; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.table-hover > tbody > tr:hover > * { background: rgba(255,255,255,.04); }

/* ─── Forms ────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important; }
.form-control::placeholder, .form-select option { color: #475569; }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn { border-radius: 8px; font-size: .85rem; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); color: #fff; }
.border-dashed { border-style: dashed !important; }

/* ─── Badges ───────────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .02em; border-radius: 6px; }

/* ─── Progress ─────────────────────────────────────────────── */
.progress { background: #1e293b; }

/* ─── Alerts ───────────────────────────────────────────────── */
.alert { border-radius: 10px; border: none; }
.alert-success { background: rgba(34,197,94,.15); color: #86efac; }
.alert-danger  { background: rgba(239,68,68,.15);  color: #fca5a5; }
.alert-warning { background: rgba(249,115,22,.15); color: #fdba74; }
.alert-info    { background: rgba(59,130,246,.15); color: #93c5fd; }
.alert-secondary { background: rgba(100,116,139,.15); color: #cbd5e1; }

/* ─── Dropdown dark ────────────────────────────────────────── */
.dropdown-menu { border-radius: 10px; }
.dropdown-item:hover { background: rgba(255,255,255,.08); }

/* ─── Modals dark ──────────────────────────────────────────── */
.modal-content { border-radius: 14px; }
.modal-backdrop { backdrop-filter: blur(4px); }

/* ─── Navbar ────────────────────────────────────────────────── */
.navbar.bg-darker { background: var(--color-bg-darker) !important; }

/* ─── Topbar search ──────────────────────────────────────────── */
.navbar .form-control:focus { background: #334155 !important; }

/* ─── Project card hover ─────────────────────────────────────── */
.project-card { transition: transform .15s, box-shadow .15s; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }

/* ─── Sidebar toggle mobile ─────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.show { transform: translateX(0); }
  #content-wrapper { margin-left: 0 !important; }
}

/* ─── Hover utilities ─────────────────────────────────────────── */
.hover-text-white:hover { color: #f8fafc !important; }

/* ─── Wiki content ────────────────────────────────────────────── */
.wiki-content h1, .wiki-content h2, .wiki-content h3 { color: #f8fafc; margin-top: 1.5rem; }
.wiki-content code { background: #1e293b; color: #a5b4fc; padding: 2px 6px; border-radius: 4px; font-size: .85em; }
.wiki-content pre { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 16px; overflow-x: auto; }
.wiki-content blockquote { border-left: 4px solid var(--color-primary); padding-left: 16px; color: #94a3b8; }
.wiki-content a { color: #818cf8; }
.wiki-content hr { border-color: #1e293b; }

/* ─── FullCalendar dark ───────────────────────────────────────── */
.fc-event { padding: 2px 5px; font-weight: 500; }
.fc-daygrid-event-dot { display: none; }
.fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: .5rem; }

/* ─── Toast notifications ────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast-item {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 280px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  animation: slideIn .2s ease;
  color: #f8fafc;
  font-size: .85rem;
}
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─── Status badge colours ────────────────────────────────────── */
.status-todo        { background: rgba(100,116,139,.3) !important; color: #94a3b8; }
.status-in_progress { background: rgba(79,70,229,.3)  !important; color: #a5b4fc; }
.status-review      { background: rgba(249,115,22,.3)  !important; color: #fdba74; }
.status-done        { background: rgba(34,197,94,.3)   !important; color: #86efac; }
.status-blocked     { background: rgba(239,68,68,.3)   !important; color: #fca5a5; }
.status-cancelled   { background: rgba(100,116,139,.2) !important; color: #64748b; }

/* ─── Loading spinner ─────────────────────────────────────────── */
.spinner-tiny { width: 14px; height: 14px; border-width: 2px; }

/* ─── Overflow auto on x ──────────────────────────────────────── */
.overflow-x-auto { overflow-x: auto; }