/* ==========================================================================
   Dashboard (index.php, signed-in view): notifications, greeting header, attention banner, KPI tiles,
   project cards, sidebar cards (tasks, quota, milestones, activity), pills, create-project card.
   The public landing page (.lp-*) keeps its own marketing look.
   Linked after styles.css; :root body selectors beat the page's inline <style>.
   ========================================================================== */

/* ---- dashboard cards named .side-panel -------------------------------------------------------------------
   The shared slide-in form panel rules in styles.css also target .side-panel; here it is a plain card.   */
:root body .content .side-panel {
    padding: 20px 22px;
    border: 1px solid var(--obsidian-border);
    border-radius: 16px;
    background: var(--obsidian-bg, var(--card-bg));
    box-shadow: none;
    transition: all 200ms var(--ease-out-ui);
}
:root body .content .side-panel:hover { border-color: var(--glow-edge); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.5); }
:root body .content .side-panel .btn { min-height: 0; }
:root body .content .side-panel h3 { color: var(--seg-text); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 0 18px rgba(var(--seg-rgb), 0.35); }
:root body .content .side-panel h3 i { color: var(--seg-text); font-size: 0.9em; }

/* ---- notifications + attention banner ---------------------------------------------------------------------- */
:root body .global-notification {
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: none;
}
:root body .global-notification.error   { background: rgba(var(--tag-red-rgb), 0.10);     border-color: rgba(var(--tag-red-rgb), 0.28);     border-left: 3px solid var(--tag-red);     color: var(--tag-red); }
:root body .global-notification.warning { background: rgba(var(--tag-amber-rgb), 0.10);   border-color: rgba(var(--tag-amber-rgb), 0.28);   border-left: 3px solid var(--tag-amber);   color: var(--tag-amber); }
:root body .global-notification.success { background: rgba(var(--tag-emerald-rgb), 0.10); border-color: rgba(var(--tag-emerald-rgb), 0.28); border-left: 3px solid var(--tag-emerald); color: var(--tag-emerald); }
:root body .btn-dismiss { border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 500; transition: all 200ms var(--ease-out-ui); }
:root body .btn-dismiss:hover { background: rgba(255, 255, 255, 0.08); }

:root body .attention-banner {
    border: 1px solid rgba(var(--tag-amber-rgb), 0.28);
    border-left: 3px solid var(--tag-amber);
    border-radius: 16px;
    background: rgba(var(--tag-amber-rgb), 0.08);
}
:root body .attention-banner .ab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid rgba(var(--tag-amber-rgb), 0.30); border-radius: 12px;
    background: rgba(var(--tag-amber-rgb), 0.14);
    color: var(--tag-amber); font-size: 18px;
    box-shadow: 0 0 18px -4px rgba(var(--tag-amber-rgb), 0.5);
}
:root body .attention-banner :is(.ab-title, .ab-project-link) { color: var(--tag-amber); }
:root body .attention-banner .ab-title strong { color: var(--heading-color); }
:root body .attention-banner .ab-project-link:hover { color: var(--heading-color); }
:root body .attention-banner .ab-count {
    padding: 0 8px;
    border: 1px solid rgba(var(--tag-amber-rgb), 0.35);
    background: rgba(var(--tag-amber-rgb), 0.18);
    color: var(--tag-amber);
    font-variant-numeric: tabular-nums;
}
:root body .notification-icon { color: inherit; }

/* ---- greeting header --------------------------------------------------------------------------------------- */
:root body .greeting-header {
    border: 1px solid var(--obsidian-border);
    border-radius: 20px;
    background: var(--obsidian-bg, var(--card-bg));
    box-shadow: none;
}
:root body .greeting-left h1 { font-weight: 600; letter-spacing: -0.02em; }
:root body .greeting-left .greeting-sub { font-variant-numeric: tabular-nums; }
:root body .greeting-left .org-badge .plan-tag {
    border: 1px solid rgba(var(--tag-amber-rgb), 0.35);
    background: rgba(var(--tag-amber-rgb), 0.14);
    color: var(--tag-amber);
    font-weight: 600;
}
:root body .greeting-left .org-badge .plan-tag.free { border-color: rgba(var(--tag-slate-rgb), 0.28); background: rgba(var(--tag-slate-rgb), 0.12); color: var(--text-secondary); }

/* quick actions */
:root body .qa-btn {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px; font-weight: 500;
    transition: all 200ms var(--ease-out-ui);
}
:root body .qa-btn:hover { transform: translateY(-1px); }
:root body .qa-btn-primary {
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--cta-bg);
    color: var(--cta-text);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px -8px var(--cta-glow);
}
:root body .qa-btn-primary:hover { background: var(--cta-bg-hover); color: var(--cta-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -8px var(--cta-glow); }
:root body .qa-btn-outline { border-color: var(--obsidian-border); background: rgba(var(--tag-slate-rgb), 0.08); color: var(--text-secondary); }
:root body .qa-btn-outline:hover { border-color: var(--glow-edge); background: var(--menu-item-hover); color: var(--heading-color); }

/* ---- KPI tiles ---------------------------------------------------------------------------------------------- */
:root body .stat-card {
    padding: 18px 20px;
    border: 1px solid var(--obsidian-border);
    border-radius: 16px;
    background: var(--obsidian-bg, var(--card-bg));
    box-shadow: none;
    transition: all 200ms var(--ease-out-ui);
}
:root body .stat-card::before { display: none; }
:root body .stat-card:hover { border-color: rgba(var(--seg-rgb), 0.40); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.5); transform: translateY(-2px); }
:root body .stat-card .label { color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
:root body .stat-card .value { color: var(--heading-color); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
:root body .stat-card .value.danger { color: var(--tag-red); }
:root body .stat-card .progress,
:root body .project-progress-track,
:root body .quota-progress { height: 8px; border-radius: 999px; background: rgba(var(--tag-slate-rgb), 0.20); overflow: hidden; }
:root body :is(.stat-card .progress-bar, .project-progress-fill, .quota-bar) { border-radius: 999px; background: linear-gradient(90deg, var(--tag-sky), var(--tag-emerald)); }

/* ---- project cards -------------------------------------------------------------------------------------------- */
:root body .project-card {
    border: 1px solid var(--obsidian-border);
    border-radius: 16px;
    background: var(--obsidian-bg, var(--card-bg));
    box-shadow: none;
    transition: all 200ms var(--ease-out-ui);
}
:root body .project-card::before { display: none; }
:root body .project-card:hover { border-color: rgba(var(--seg-rgb), 0.40); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.5); transform: translateY(-2px); }
:root body .project-card .project-header { border-bottom: 1px solid var(--obsidian-border); }
:root body .project-card .project-header h3 { font-weight: 600; letter-spacing: -0.01em; }
:root body .project-card .project-stats { border-top: 1px solid var(--obsidian-border); }
:root body .project-card .stat-value { color: var(--heading-color); font-variant-numeric: tabular-nums; }
:root body .project-card .project-actions .btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px;
    border: 1px solid rgba(var(--seg-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--seg-rgb), 0.12);
    color: var(--seg-text);
    font-size: 13px; font-weight: 500;
    box-shadow: none;
    transition: all 200ms var(--ease-out-ui);
}
:root body .project-card .project-actions .btn:hover { background: rgba(var(--seg-rgb), 0.22); border-color: rgba(var(--seg-rgb), 0.55); box-shadow: 0 0 16px -4px rgba(var(--seg-rgb), 0.55); color: var(--seg-text); transform: translateY(-1px); }

:root body .create-project-card {
    border: 1px dashed var(--field-border);
    border-radius: 16px;
    background: rgba(var(--tag-slate-rgb), 0.05);
    transition: all 200ms var(--ease-out-ui);
}
:root body .create-project-card:hover { border-color: rgba(var(--seg-rgb), 0.50); background: rgba(var(--seg-rgb), 0.07); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.5); transform: translateY(-2px); }

:root body .section-title h2 { font-weight: 600; letter-spacing: -0.01em; }
:root body .section-title .view-all {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(var(--seg-rgb), 0.30);
    background: rgba(var(--seg-rgb), 0.10);
    color: var(--seg-text);
    font-weight: 500;
    transition: all 200ms var(--ease-out-ui);
}
:root body .section-title .view-all:hover { background: rgba(var(--seg-rgb), 0.20); border-color: rgba(var(--seg-rgb), 0.50); color: var(--seg-text); }
:root body .section-title .view-all i { font-size: 11px; }

/* ---- tinted pills ---------------------------------------------------------------------------------------------- */
:root body .pulse-badge { font-variant-numeric: tabular-nums; }
:root body .pulse-badge.pulse-high { background: rgba(var(--tag-emerald-rgb), 0.10); color: var(--tag-emerald); border-color: rgba(var(--tag-emerald-rgb), 0.20); }
:root body .pulse-badge.pulse-mid  { background: rgba(var(--tag-amber-rgb), 0.10);   color: var(--tag-amber);   border-color: rgba(var(--tag-amber-rgb), 0.20); }
:root body .pulse-badge.pulse-low  { background: rgba(var(--tag-red-rgb), 0.10);     color: var(--tag-red);     border-color: rgba(var(--tag-red-rgb), 0.20); }
:root body .badge.status-active    { background: rgba(var(--tag-emerald-rgb), 0.10); color: var(--tag-emerald); border-color: rgba(var(--tag-emerald-rgb), 0.20); }
:root body .badge.status-on_hold   { background: rgba(var(--tag-amber-rgb), 0.10);   color: var(--tag-amber);   border-color: rgba(var(--tag-amber-rgb), 0.20); }
:root body .badge.status-completed { background: rgba(var(--tag-sky-rgb), 0.10);     color: var(--tag-sky);     border-color: rgba(var(--tag-sky-rgb), 0.20); }
:root body .milestone-days { font-variant-numeric: tabular-nums; border-radius: 999px; }
:root body .milestone-days.soon  { background: rgba(var(--tag-red-rgb), 0.10);     color: var(--tag-red);     border-color: rgba(var(--tag-red-rgb), 0.20); }
:root body .milestone-days.week  { background: rgba(var(--tag-amber-rgb), 0.10);   color: var(--tag-amber);   border-color: rgba(var(--tag-amber-rgb), 0.20); }
:root body .milestone-days.later { background: rgba(var(--tag-emerald-rgb), 0.10); color: var(--tag-emerald); border-color: rgba(var(--tag-emerald-rgb), 0.20); }

/* ---- sidebar lists ----------------------------------------------------------------------------------------------- */
:root body .task-category,
:root body .milestone-item,
:root body .activity-item { border-bottom: 1px solid rgba(var(--tag-slate-rgb), 0.14); }
:root body .task-category:last-child,
:root body .milestone-item:last-child,
:root body .activity-item:last-child { border-bottom: 0; }
:root body .task-category .category-name { display: inline-flex; align-items: center; gap: 8px; }
:root body .task-category .category-name i { width: 16px; color: var(--text-secondary); text-align: center; }
:root body .task-category.overdue .category-name i { color: var(--tag-red); }
:root body .task-category.today .category-name i   { color: var(--tag-amber); }
:root body .task-category .category-count { color: var(--heading-color); font-variant-numeric: tabular-nums; font-weight: 600; }
:root body .task-category.overdue .category-count { color: var(--tag-red); }
:root body .task-category.today .category-count   { color: var(--tag-amber); }
:root body .activity-item .timestamp { font-variant-numeric: tabular-nums; }
:root body .quota-row { font-variant-numeric: tabular-nums; }

/* ---- keyboard, touch, motion --------------------------------------------------------------------------------------- */
:root body :is(.qa-btn, .project-card .project-actions .btn, .section-title .view-all, .btn-dismiss, .create-project-card, .project-card a):focus-visible {
    outline: 2px solid var(--field-focus);
    outline-offset: 2px;
}
@media (pointer: coarse) {
    :root body :is(.qa-btn, .project-card .project-actions .btn) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    :root body :is(.stat-card, .project-card, .create-project-card, .qa-btn, .side-panel, .project-card .project-actions .btn) { transition-duration: 0.01ms; }
    :root body :is(.stat-card, .project-card, .create-project-card, .qa-btn, .project-card .project-actions .btn):hover { transform: none; }
}