/* ============================================================================
   Dashboard-specific overrides
   Targets the dashboard page chrome:
   - .widget panels (already styled in _widgets.css, this adds heading rules)
   - "Quick stats" tile labels/values
   - Recent activity panels, chart cards, project status panels
   Loaded after _tw-overrides.css so it can layer on top of generic Tailwind
   neutralization with dashboard-specific accents (icon halos, header bars).
   ============================================================================ */

/* ----------------------------------------------------------------------
   Widget panel headings - the small title bar at the top of each .widget
   ---------------------------------------------------------------------- */
body.theme-new .widget .panel-heading,
body.theme-new .widget > .panel > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-heading) !important;
    padding: 16px 18px !important;
}

body.theme-new .widget .panel-heading h4,
body.theme-new .widget .panel-heading .panel-title,
body.theme-new .widget .panel-heading h3,
body.theme-new .widget .panel-heading h5 {
    color: var(--text-heading) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

body.theme-new .widget .panel-body {
    padding: 18px !important;
    background: transparent !important;
}

/* ----------------------------------------------------------------------
   Top stats tile: icon + label row, then big number, then progress bar.
   The current markup uses tw-text-neutral-800 for the row — covered by
   _tw-overrides.css. Here we strengthen the layout so the tile reads
   like the docs reference.
   ---------------------------------------------------------------------- */
body.theme-new .top_stats_wrapper > div > .tw-text-neutral-800,
body.theme-new .top_stats_wrapper .tw-flex.tw-items-center.tw-justify-between {
    margin-top: 0 !important;
}

body.theme-new .top_stats_wrapper svg {
    color: var(--text-muted) !important;
    stroke: currentColor !important;
}

body.theme-new .quick-stats-invoices .top_stats_wrapper svg { color: #ff8a82 !important; }
body.theme-new .quick-stats-leads    .top_stats_wrapper svg { color: var(--primary-color) !important; }
body.theme-new .quick-stats-projects .top_stats_wrapper svg { color: #66c7ff !important; }
body.theme-new .quick-stats-tasks    .top_stats_wrapper svg { color: #ffd24a !important; }

/* Tile right-side count (e.g. "12 / 48") */
body.theme-new .top_stats_wrapper .tw-font-semibold {
    color: var(--text-heading) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 1.05rem !important;
}

/* ----------------------------------------------------------------------
   Recent activity / right-side panel
   The "right-4" container holds the activity feed and notifications card.
   ---------------------------------------------------------------------- */
body.theme-new [data-container="right-4"] .panel,
body.theme-new [data-container="right-4"] .widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
}

body.theme-new .activity-feed,
body.theme-new .timeline {
    color: var(--text-main) !important;
}

body.theme-new .activity-feed .feed-item,
body.theme-new .timeline > li {
    border-color: var(--border-soft) !important;
}

/* ----------------------------------------------------------------------
   Chart cards (Chart.js canvases live inside .widget)
   Make sure the canvas wrapper has the right padding and the legend
   reads on dark.
   ---------------------------------------------------------------------- */
body.theme-new .widget canvas {
    background: transparent !important;
}

body.theme-new .chartjs-legend li,
body.theme-new .widget .chart-legend li,
body.theme-new .widget .legend li {
    color: var(--text-muted) !important;
}

/* ----------------------------------------------------------------------
   "Dashboard options" floating button (screen-options-btn)
   ---------------------------------------------------------------------- */
body.theme-new .screen-options-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-soft) !important;
    transition:
        background var(--transition-speed) var(--ease-standard),
        color var(--transition-speed) var(--ease-standard),
        border-color var(--transition-speed) var(--ease-standard) !important;
}

body.theme-new .screen-options-btn:hover {
    background: var(--bg-elevated) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

body.theme-new .screen-options-area {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-elev) !important;
    color: var(--text-main) !important;
    padding: 16px 20px;
    margin-bottom: 16px;
}

/* The screen-options-area is populated by dashboard JS with widget-toggle
   controls. Force readable text + light-mode flips against any hardcoded
   inline white styles. */
body.theme-new .screen-options-area,
body.theme-new .screen-options-area label,
body.theme-new .screen-options-area h1,
body.theme-new .screen-options-area h2,
body.theme-new .screen-options-area h3,
body.theme-new .screen-options-area h4,
body.theme-new .screen-options-area h5,
body.theme-new .screen-options-area h6,
body.theme-new .screen-options-area p,
body.theme-new .screen-options-area span,
body.theme-new .screen-options-area div {
    color: var(--text-main);
}

body.theme-new .screen-options-area input[type="text"],
body.theme-new .screen-options-area input[type="search"],
body.theme-new .screen-options-area select,
body.theme-new .screen-options-area textarea {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-main) !important;
}

/* Light-mode override - any inline white text the dashboard JS sets
   inside the screen-options-area gets flipped to dark for readability */
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color:#fff"],
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color: #fff"],
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color:white"],
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color: white"],
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color:rgba(255"],
:root[data-theme="light"] body.theme-new .screen-options-area [style*="color: rgba(255"] {
    color: var(--text-main) !important;
}

/* ----------------------------------------------------------------------
   Project status / Tasks status panels - the bars-with-counts panels
   on the bottom row of the dashboard.
   ---------------------------------------------------------------------- */
body.theme-new .dash-stats-list > li,
body.theme-new .panel-stats > li {
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-main) !important;
}

body.theme-new .dash-stats-list > li:last-child,
body.theme-new .panel-stats > li:last-child {
    border-bottom: none !important;
}

/* ----------------------------------------------------------------------
   PMP / Portal cards (custom modules render large cards on the dashboard)
   Targets generic Bootstrap col wrappers around a .panel.panel-default in
   the dashboard. Adds the dark glass surface + hover lift consistent with
   .widget so any module that hangs widgets on the dashboard auto-blends.
   ---------------------------------------------------------------------- */
body.theme-new .content .panel.panel-default {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-main) !important;
}

body.theme-new .content .panel.panel-default > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-heading) !important;
}

/* ----------------------------------------------------------------------
   Welcome banner / greeting strip at top of dashboard (if any module
   injects one). Keep it subtle on dark.
   ---------------------------------------------------------------------- */
body.theme-new .dashboard-welcome,
body.theme-new .pp-dashboard-greeting {
    background: linear-gradient(135deg,
        rgba(0, 229, 141, 0.08) 0%,
        rgba(0, 229, 141, 0.02) 100%) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px 24px !important;
    color: var(--text-heading) !important;
}

/* ----------------------------------------------------------------------
   PHASE F - Dashboard tile reveal sequence + universal panel hover-lift
   ---------------------------------------------------------------------- */

/* F.3a Tile reveal: scale 0.96 + 8px down + opacity 0, animates to
   natural state once body.pp-mounted lands. Stagger via nth-child. */
body.theme-new .widget,
body.theme-new .top_stats_wrapper > div,
body.theme-new .pp-widget-tile,
body.theme-new .si-kpi-tile,
body.theme-new .si-positioning-card {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition:
        opacity 0.5s var(--ease-out-soft),
        transform 0.5s var(--ease-out-soft),
        box-shadow var(--transition-speed) var(--ease-standard),
        border-color var(--transition-speed) var(--ease-standard);
}

body.theme-new.pp-mounted .widget,
body.theme-new.pp-mounted .top_stats_wrapper > div,
body.theme-new.pp-mounted .pp-widget-tile,
body.theme-new.pp-mounted .si-kpi-tile,
body.theme-new.pp-mounted .si-positioning-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(1)   { transition-delay: 200ms; }
body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(2)   { transition-delay: 260ms; }
body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(3)   { transition-delay: 320ms; }
body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(4)   { transition-delay: 380ms; }
body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(5)   { transition-delay: 440ms; }
body.theme-new.pp-mounted .top_stats_wrapper > div:nth-child(n+6) { transition-delay: 500ms; }

body.theme-new.pp-mounted .si-kpi-tile:nth-child(1)   { transition-delay: 200ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(2)   { transition-delay: 240ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(3)   { transition-delay: 280ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(4)   { transition-delay: 320ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(5)   { transition-delay: 360ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(6)   { transition-delay: 400ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(7)   { transition-delay: 440ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(8)   { transition-delay: 480ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(9)   { transition-delay: 520ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(10)  { transition-delay: 560ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(11)  { transition-delay: 600ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(12)  { transition-delay: 640ms; }
body.theme-new.pp-mounted .si-kpi-tile:nth-child(n+13) { transition-delay: 680ms; }

body.theme-new.pp-mounted .si-positioning-card:nth-child(1) { transition-delay: 220ms; }
body.theme-new.pp-mounted .si-positioning-card:nth-child(2) { transition-delay: 280ms; }
body.theme-new.pp-mounted .si-positioning-card:nth-child(3) { transition-delay: 340ms; }

/* F.3b Universal hover lift on card surfaces.
   Use box-shadow only — earlier `transform: translateY` versions caused
   a classic hover-loop flicker when the cursor sat near the top edge of
   a tile: the lift moved the element out from under the cursor, hover
   ended, element snapped back, cursor was on it again, etc. Pure shadow
   reads as "lifted" without changing the hit-test box. */
body.theme-new.pp-mounted .widget:hover,
body.theme-new.pp-mounted .top_stats_wrapper > div:hover,
body.theme-new.pp-mounted .pp-widget-tile:hover,
body.theme-new.pp-mounted .si-kpi-tile:hover,
body.theme-new.pp-mounted .si-positioning-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Generic .panel_s lift everywhere (customer/lead/invoice list pages) */
body.theme-new .panel_s {
    transition:
        box-shadow var(--transition-speed) var(--ease-standard) !important;
}
body.theme-new .panel_s:hover {
    box-shadow: var(--shadow-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .screen-options-btn,
    body.theme-new .content .panel.panel-default,
    body.theme-new .panel_s,
    body.theme-new .widget,
    body.theme-new .top_stats_wrapper > div,
    body.theme-new .pp-widget-tile,
    body.theme-new .si-kpi-tile,
    body.theme-new .si-positioning-card {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}