/* ==========================================================================
   Dashboard pixel-perfect redesign — Imperium Business Suite
   File:    public/assets/css/dashboard-redesign.css
   Source:  Figma file aHXTUBS6Nm6DD6Fx2O2pJ9
            Desktop  1280  → node 2024:294 (sidebar extended)
            Large    1920  → node 2024:2516 (sidebar collapsed)
   Pattern: CSS-only overlay; no blade markup edits required.
   ========================================================================== */

:root {
    /* Palette pulled directly from Figma styles */
    --imp-d-primary:        #585FFF;
    --imp-d-primary-soft:   #9BA0F7;   /* placement card "Add Credits" button */
    --imp-d-primary-tint:   #6C73FF;   /* hero decorative ellipses */
    --imp-d-primary-fill:   #969BFF;   /* progress bar fill */
    --imp-d-lilac:          #ECECFF;   /* QA row + report icon bg */
    --imp-d-lilac-border:   #D7D9FF;
    --imp-d-bar-track:      #E4E4F4;
    --imp-d-button-border:  #C5C7FF;   /* Use Credits outline */
    --imp-d-text:           #3E4256;
    --imp-d-text-strong:    #1A1A2E;
    --imp-d-text-muted:     #6B6E7C;
    --imp-d-text-soft:      #9191AD;
    --imp-d-divider:        #DEDFEC;
    --imp-d-card-bg:        #FFFFFF;
    --imp-d-card-radius:    16px;
    --imp-d-inner-radius:   8px;
    --imp-d-card-pad:       24px;
    --imp-d-card-shadow:    0 1px 4px rgba(11, 13, 35, 0.04);
}

/* Hide modal partials that render inline because their stylesheet is missing.
   No !important so jQuery .show() / .css('display','flex') still works. */
body .popup-bg { display: none; }

/* Force the right credits variant per breakpoint (existing inline rules
   hide .hideonmobile at all sizes, which kills the desktop card). */
@media (min-width: 768px) {
    body .dash-credits-block.hideonmobile { display: block !important; }
    body .dash-credits-block.showonmobile { display: none !important; }
}
@media (max-width: 767px) {
    body .dash-credits-block.hideonmobile { display: none !important; }
    body .dash-credits-block.showonmobile { display: block !important; }
}

/* ==========================================================================
   HERO — "Guaranteed Media Placements"
   Figma 2024:344 — solid #585FFF, p=32, gap=24, radius=16, title 24/Inter-Bold,
   sub 16/Helvetica, button white pill px-24/py-12, label 16/Inter-Medium
   ========================================================================== */
body .dash-hero-block {
    background: var(--imp-d-primary) !important;
    border-radius: var(--imp-d-card-radius) !important;
    padding: 32px !important;
    height: auto !important;
    min-height: 235px !important;
    color: #FFFFFF !important;
    position: relative;
    overflow: hidden;
    box-shadow: var(--imp-d-card-shadow);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    text-align: center;
}

/* Decorative ellipses — perfect circles via aspect-ratio:1.
   Sizes/positions = (Figma px) / (Figma 400 width) as percentages, so they
   stay round and proportionally placed regardless of card width. */
body .dash-hero-block .dash-hero-ell {
    position: absolute;
    border-radius: 50%;
    background: var(--imp-d-primary-tint);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1;
}
/* Large 85/400 = 21.25% width → height auto-matches via aspect-ratio */
body .dash-hero-block .dash-hero-ell--lg { width: 21.25%; }
/* Small 36/400 = 9% width */
body .dash-hero-block .dash-hero-ell--sm { width: 9%; }

/* Positions: x/400 = left%, y/255 = top% relative to card. */
body .dash-hero-block .dash-hero-ell--lg-l { left: 2.75%;  top: 47.45%; }   /* (11, 121) */
body .dash-hero-block .dash-hero-ell--lg-r { left: 64%;    top: 81.5%; }    /* (256, 208) — extends past bottom on shorter cards */
body .dash-hero-block .dash-hero-ell--sm-l { left: 24%;    top: 73.7%; }    /* (96, 188) */
body .dash-hero-block .dash-hero-ell--sm-r { left: 79.25%; top: 58.4%; }    /* (317, 149) */

/* Ensure text/button float above the ellipses */
body .dash-hero-block h5,
body .dash-hero-block p,
body .dash-hero-block a,
body .dash-hero-block button { position: relative; z-index: 2; }

body .dash-hero-block h5 {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
}

body .dash-hero-block p {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
}

body .dash-hero-block a { position: relative; z-index: 2; }

body .dash-hero-block button {
    background: #FFFFFF !important;
    color: var(--imp-d-primary) !important;
    border-radius: 100px !important;
    border: none !important;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 12px 24px !important;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
body .dash-hero-block button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}


/* ==========================================================================
   CREDITS SUMMARY — Figma 2024:374
   White card, p=24, gap=16, radius=16, title 18/Helvetica-Bold,
   number 40/Helvetica-Bold + 24/regular grey, bar 10px h #E4E4F4 → #969BFF,
   buttons px-24/py-12 16/Inter-Medium
   ========================================================================== */
body .dash-credits-block.hideonmobile .credits-card,
body .dash-credits-block.showonmobile .credits-card {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow);
    padding: var(--imp-d-card-pad) !important;
    height: 100% !important;
    min-height: 235px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* "Credits Summary" title */
body .dash-credits-block .credits-card h6 {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
    margin: 0 !important;
    letter-spacing: 0;
}

/* Hide the existing horizontal mid-divider so children stack vertically */
body .dash-credits-block.hideonmobile .credits-card .divider {
    display: none !important;
}

/* Flatten the 3-col flex row into a vertical block */
body .dash-credits-block.hideonmobile .credits-card > .d-flex.justify-content-between {
    display: block !important;
    margin: 0 !important;
}
body .dash-credits-block.hideonmobile .credits-card > .d-flex.justify-content-between > div {
    width: 100% !important;
    margin: 0 !important;
}

/* Big counter "34" — 40px Helvetica Neue Bold */
body .dash-credits-block .credits-card > .d-flex > div:first-child > div,
body .dash-credits-block.showonmobile .credits-card .topmrgn2 {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--imp-d-text) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

/* Denominator "/131" — 24px regular grey */
body .dash-credits-block .credits-card > .d-flex > div:first-child > div span,
body .dash-credits-block.showonmobile .credits-card .topmrgn2 span {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text-soft) !important;
    align-self: flex-end;
}

/* "Credits used" label — 16px Helvetica Medium */
body .dash-credits-block .credits-card .d-flex > div:nth-child(3) > div:first-child,
body .dash-credits-block.showonmobile .credits-card .topmrgn {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
    margin: 0 0 8px !important;
}

/* Progress bar track — 10px tall, soft track #E4E4F4 */
body .dash-credits-block .credits-card .credits-bar {
    height: 10px !important;
    background: var(--imp-d-bar-track) !important;
    border-radius: 100px !important;
    overflow: hidden;
    width: 100% !important;
    margin: 0 !important;
}

/* Progress bar fill — SOLID #969BFF (no gradient per Figma) */
body .dash-credits-block .credits-card .credits-bar-fill {
    height: 100% !important;
    background: var(--imp-d-primary-fill) !important;
    border-radius: 100px !important;
    transition: width 300ms ease;
    min-width: 4px;
}

/* Button row — gap 8px, both buttons flex 1 */
body .dash-credits-block .credits-card .topmargin,
body .dash-credits-block .credits-card > div[style*="display:flex"][style*="gap:8px"] {
    display: flex !important;
    gap: 8px !important;
    margin-top: auto !important;
    justify-content: stretch !important;
}

/* Add Credits — primary purple solid pill, px-24 py-12, label 16/Inter-Medium */
body .dash-credits-block .credits-card .btn-add-cred,
body .dash-credits-block .credits-card .btn-add-cred.upgrade-niww {
    background: var(--imp-d-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 100px !important;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 12px 24px !important;
    height: auto !important;
    flex: 1 1 0 !important;
    cursor: pointer;
    transition: background 180ms ease, transform 100ms ease;
}
body .dash-credits-block .credits-card .btn-add-cred:hover { background: #4045D6 !important; }
body .dash-credits-block .credits-card .btn-add-cred:active { transform: scale(0.98); }

/* Use Credits — outlined pill, border #C5C7FF, label 16/Inter-Medium #585FFF */
body .dash-credits-block .credits-card .btn-use-cred {
    background: #FFFFFF !important;
    color: var(--imp-d-primary) !important;
    border: 1px solid var(--imp-d-button-border) !important;
    border-radius: 100px !important;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 12px 24px !important;
    height: auto !important;
    flex: 1 1 0 !important;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
body .dash-credits-block .credits-card .btn-use-cred:hover {
    background: var(--imp-d-lilac) !important;
    border-color: var(--imp-d-primary) !important;
}

/* ==========================================================================
   QUICK ACTIONS — Figma 2024:356
   White card p=24 gap=14 radius=16. Each row: bg #ECECFF, border #D7D9FF,
   p=12 gap=10 radius=8 (rounded RECT, not pill). Label 16 Helvetica.
   ========================================================================== */
body #dash-root .dash-qa-block .qa-card,
body #dash-root .qa-card {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow) !important;
    padding: var(--imp-d-card-pad) !important;
    height: auto !important;
    min-height: 235px !important;
    display: flex !important;
    flex-direction: column !important;
    /* gap=8 between rows (Figma 2024:359). Title-to-first-row spacing
       is supplied by h6 margin-bottom below so the title sits 14px above
       row 1 while rows stay tight at 8px to each other. */
    gap: 8px !important;
}

body #dash-root .dash-qa-block .qa-card h6 {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
    margin: 0 0 6px !important;
    letter-spacing: 0;
}

/* Figma 2024:359 — Actions container has gap:8 between the 3 rows.
   Use #dash-root prefix so we beat blade's `#dash-root .qa-row { margin-top:4 }`. */
body #dash-root .dash-qa-block .qa-card .qa-row,
body #dash-root .qa-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--imp-d-lilac) !important;
    border: 1px solid var(--imp-d-lilac-border) !important;
    border-radius: var(--imp-d-inner-radius) !important;
    padding: 12px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
/* Parent flex gap is 8px — adjacent margin would double-stack so we zero it. */
body #dash-root .dash-qa-block .qa-card .qa-row + .qa-row,
body #dash-root .qa-row + .qa-row {
    margin-top: 0 !important;
}
body #dash-root .dash-qa-block .qa-card .qa-row:hover,
body #dash-root .qa-row:hover {
    background: #DCDDFE !important;
    border-color: var(--imp-d-primary) !important;
}

body #dash-root .dash-qa-block .qa-card .qa-row .qa-left,
body #dash-root .qa-row .qa-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
}
body #dash-root .dash-qa-block .qa-card .qa-row .qa-left svg,
body #dash-root .qa-row .qa-left svg { flex-shrink: 0; width: 24px; height: 24px; }
body #dash-root .dash-qa-block .qa-card .qa-row > svg,
body #dash-root .qa-row > svg { flex-shrink: 0; width: 24px; height: 24px; }

/* ==========================================================================
   MONTHLY REPORTS — Figma 2024:401
   Outer: white card p=24 radius=16. Each rpt-item: white, border #DEDFEC,
   p=12 gap=12 radius=8. Header: pill icon-bg #ECECFF border #D7D9FF p=8 r=100.
   Title 14 Helvetica-Medium. Buttons 16 Helvetica-Medium #585FFF.
   ========================================================================== */
/* Make sure the grid item (.dash-reports-block) fills its row height first,
   otherwise the inner sec-card has no parent height to stretch to. */
body #dash-root .dash-reports-block,
body .dash-reports-block {
    height: 100% !important;
    align-self: stretch !important;
    min-height: 0 !important;
}

body #dash-root .dash-reports-block .sec-card,
body .dash-reports-block .sec-card {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow) !important;
    padding: var(--imp-d-card-pad) !important;
    /* Stretch to fill grid cell so the Reports card height matches the
       Calendar card height in the same grid row. */
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The 2×2 grid expands to fill remaining space below the title, and each
   row is equal height — pushing the bottom row down to the card edge. */
body #dash-root .dash-reports-block .sec-card .rpt-grid {
    flex: 1 1 auto !important;
    grid-template-rows: 1fr 1fr !important;
    align-content: stretch !important;
    min-height: 0 !important;
}

/* Each report card stretches to fill its row so the 4 cards are uniform.
   Combined with the rpt-grid 1fr rows, this fills the column to bottom. */
body #dash-root .dash-reports-block .sec-card .rpt-grid .rpt-item {
    height: 100% !important;
    min-height: 0 !important;
}

/* Same pattern for Calendar — ensure its grid item also stretches so the
   row uses Reports' natural minimum if Reports is taller (defensive). */
body #dash-root .dash-calendar-block,
body .dash-calendar-block {
    height: 100% !important;
    align-self: stretch !important;
    min-height: 0 !important;
}
body #dash-root .dash-calendar-block .sec-card,
body .dash-calendar-block .sec-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Push the calendar grid wrapper to fill remaining height after title +
   date pickers — keeps the bottom row of cells flush with the card edge. */
body #dash-root .dash-calendar-block .sec-card .calendar-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body #dash-root .dash-calendar-block .sec-card .calendar-wrapper .calendar-table {
    flex: 1 1 auto !important;
    height: 100% !important;
}

body .dash-reports-block .sec-card .classdflex {
    margin-bottom: 16px !important;
}
body .dash-reports-block .sec-card .classdflex > span {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--imp-d-text) !important;
}
body .dash-reports-block .sec-card .view-all {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--imp-d-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

body .dash-reports-block .sec-card .rpt-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0 !important;
}

body #dash-root .dash-reports-block .sec-card .rpt-item,
body .dash-reports-block .sec-card .rpt-item {
    background: #FFFFFF !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-inner-radius) !important;
    /* 14/16/18/16 — extra bottom padding so the last link doesn't kiss the
       card edge; extra top padding gives the header a touch of breathing room */
    padding: 14px 16px 18px !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* gap=10 between header / divider / Download / Previous Reports — gives
       proper visual breathing without pushing the card too tall */
    gap: 10px !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Trim the Download / Previous Reports wrapper divs' default margins
   so the only spacing between them comes from the .rpt-item gap. */
body #dash-root .dash-reports-block .sec-card .rpt-item > div[style*="margin-bottom"] {
    margin-bottom: 0 !important;
}
body .dash-reports-block .sec-card .rpt-item:hover {
    border-color: var(--imp-d-lilac-border) !important;
    box-shadow: 0 2px 8px rgba(88, 95, 255, 0.06);
}

/* Report title "PR Reports" — bumped to 600 (semibold) per user feedback;
   Figma spec is 500 but the visual rendered too thin in browser — 600 hits
   the "tint bit more bold" target the user asked for. */
body #dash-root .dash-reports-block .sec-card .rpt-item label.prreports,
body #dash-root .rpt-item label.prreports {
    font-family: 'Helvetica Neue', 'Helvetica', 'Inter', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
    margin: 0 !important;
    cursor: default;
    letter-spacing: 0;
}

/* Under-title link/eye/users mini-icons (`.iconheight`, `.icontop`) —
   blade ships these as 10/15px SVGs; Figma 2024:408 has them at 16x16. */
body #dash-root .dash-reports-block .sec-card .rpt-item .iconheight,
body #dash-root .rpt-item .iconheight {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}
body #dash-root .dash-reports-block .sec-card .rpt-item .icontop,
body #dash-root .rpt-item .icontop {
    margin-top: 0 !important;
}
/* The under-title row is a small d-flex containing those mini-icons */
body #dash-root .dash-reports-block .sec-card .rpt-item label.prreports + div {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 4px !important;
}

/* Download / Previous Reports / Reports links — Figma 16px Helvetica Medium
   #585FFF with leading 24px icons. Blade ships these as 13px SVGs; bump up. */
body #dash-root .dash-reports-block .sec-card .rpt-item .rpt-link {
    font-family: 'Helvetica Neue', 'Helvetica', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}
/* Download / Previous Reports leading icon — 24px per Figma 2024:413 / 2024:417.
   The blade hard-codes width/height attrs at 13px and tags them .iconheight,
   so we need attribute-overriding CSS specificity. */
body #dash-root .dash-reports-block .sec-card .rpt-item .rpt-link > svg:first-child,
body #dash-root .dash-reports-block .sec-card .rpt-item .rpt-link svg.iconheight:first-child,
body #dash-root .rpt-item .rpt-link > svg:first-child {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
/* The trailing "→" arrow at end of "Previous Reports →" sits at 16px in Figma */
body #dash-root .dash-reports-block .sec-card .rpt-item .rpt-link > svg:last-child:not(:first-child),
body #dash-root .rpt-item .rpt-link > svg:last-child:not(:first-child) {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Report icon container — the SVG already encodes the 40x40 lilac circle
   (rect rx=19.5 fill=#ECECFF) + the email icon. We just need to render it
   at full Figma size. Use #dash-root prefix to beat the existing
   `#dash-root .rpt-item` ID-specific blade rules. */
body #dash-root .dash-reports-block .sec-card .rpt-item > div:first-child > .d-flex > svg:first-child {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Mid divider */
body .dash-reports-block .sec-card .rpt-item .margintop {
    height: 1px !important;
    background: var(--imp-d-divider) !important;
    margin: 0 !important;
}

/* Download / Previous Reports links — 16px Helvetica Medium #585FFF */
body .dash-reports-block .sec-card .rpt-item .rpt-link {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

/* ==========================================================================
   CALENDAR — Figma 2024:2701
   Outer card: white p=24 gap=16 radius=16 border #DEDFEC.
   Title 18 Helvetica-Bold + View All Reports 16 Helvetica-Medium #585FFF.
   Date pickers: white pill, border #D1D3F1, p=9/13, shadow drop-sm,
     date text 14 Helvetica-Regular #8183AF.
   View toggle: 2-button left segmented (#ECECFF / white, border #C5C7FF,
     left/right rounded), then a separate 40px circular #585FFF active button.
   Calendar grid: WRAPPED in border #D1D3F1 radius 8 overflow:hidden.
   Header row: bg #ECECFF, day text 16 Helvetica-Medium #8183AF.
   Hour cells: border #D1D3F1, hour text 12 Helvetica-Medium #8F90B9, padding 8.
   Event cell (04/22 8am): bg #6C73FF, p=4, rounded 4, white text 12 Helvetica-Medium
   ========================================================================== */

/* Outer card (wraps the calendar block) — same spec as reports */
body .dash-calendar-block .sec-card,
body .dash-cal-block,
body .dash-cal-block .calendar-card {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow) !important;
    padding: var(--imp-d-card-pad) !important;
}

/* Calendar block title */
body .dash-calendar-block .sec-card > div:first-child > span {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--imp-d-text) !important;
}
body .dash-calendar-block .sec-card .view-all {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--imp-d-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

/* Date-range pickers — pill buttons, border #D1D3F1.
   Higher specificity (body #dash-root) to beat blade's
   `#dash-root .cal-date-box` rule. */
body #dash-root .dash-calendar-block .cal-date-box,
body #dash-root .cal-date-box {
    background: #FFFFFF !important;
    border: 1px solid #D1D3F1 !important;
    border-radius: 100px !important;
    padding: 9px 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Helvetica', 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #8183AF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* View-mode toggle — the inline SVGs already encode Figma's exact bg/border
   states (segmented lilac+white left pair + standalone purple-active right
   button). Override the existing #dash-root .cal-btn { width:30 height:30 }
   so the 48x40 / 40x40 SVGs render at their native Figma sizes. */
body #dash-root .dash-calendar-block .cal-btn,
body #dash-root .cal-btn {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: filter 180ms ease;
}
body #dash-root .dash-calendar-block .cal-btn:hover,
body #dash-root .cal-btn:hover { filter: brightness(0.96); }
body #dash-root .dash-calendar-block .cal-btn.act,
body #dash-root .cal-btn.act {
    background: transparent !important;
    border: none !important;
}
body #dash-root .dash-calendar-block .cal-btn svg,
body #dash-root .cal-btn svg { display: block; max-height: 40px; height: auto; }

/* INNER border around the day-grid table — the missing Figma piece */
body .dash-calendar-block .calendar-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #D1D3F1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Reset Bootstrap table defaults inside our calendar */
body .dash-calendar-block .calendar-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
}

/* Day-of-week header row — bg #ECECFF, 16 Helvetica-Medium #8183AF */
body .dash-calendar-block .calendar-table th {
    background: var(--imp-d-lilac) !important;
    border: 1px solid #D1D3F1 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 16px !important;
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #8183AF !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body .dash-calendar-block .calendar-table th + th {
    border-left: 1px solid #D1D3F1 !important;
}

/* Hour cells — border #D1D3F1, 12px Helvetica-Medium #8F90B9, p=8 */
body .dash-calendar-block .calendar-table td {
    background: #FFFFFF !important;
    border: 1px solid #D1D3F1 !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 8px !important;
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #8F90B9 !important;
    vertical-align: middle !important;
    text-align: left !important;
    height: 44px !important;
}
body .dash-calendar-block .calendar-table td + td {
    border-left: 1px solid #D1D3F1 !important;
}
body .dash-calendar-block .calendar-table tr:first-child td {
    border-top: none !important;
}

/* Active event cell (04/22 8am) — purple #6C73FF rounded inner box.
   Use #dash-root prefix to beat the blade's
   `#dash-root table td img { display:none !important }` rule that
   would otherwise hide the event thumbnail.
   Text is now flex-start (next to the icon) per user feedback. */
body #dash-root .dash-calendar-block .calendar-table .meeting-box {
    background: var(--imp-d-primary-tint) !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
body #dash-root .dash-calendar-block .calendar-table .meeting-box img {
    display: block !important;          /* override #dash-root table td img { display:none } */
    width: 20px !important;
    height: 26px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}
body .dash-calendar-block .calendar-table .meeting-box strong {
    font-weight: 500 !important;
}

/* Tablet + mobile — stack the event icon above the date/time so the
   event reads cleanly in the narrow calendar cells (Figma 2024-6457). */
@media (max-width: 991.98px) {
    body #dash-root .dash-calendar-block .calendar-table .meeting-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 6px !important;
    }
}

/* ==========================================================================
   FEATURED PLACEMENTS — Figma 2024:616 (Forbes), 632 (Yahoo), 648 (FB), 664 (YT)
   Each card: white, border #D7D9FF, p=12 gap=12 radius=8.
   Brand logo at top. Name 16/Helvetica-Bold #3E4256. Estimated 16/Helvetica
   #6B6E7C with "2 weeks" 16/Helvetica-Medium #585FFF. Price 16/Helvetica-Bold
   #6B6E7C. Button bg #9BA0F7, px-16/py-6, label 14/Inter-Medium white.
   ========================================================================== */

/* Outer "Featured Placements" wrapper card */
body .dash-qa-block .classlghide {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow) !important;
    padding: var(--imp-d-card-pad) !important;
    margin-top: 24px !important;
}
body .dash-qa-block .classlghide > div:first-child > span {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--imp-d-text) !important;
}
body .dash-qa-block .classlghide .view-all {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--imp-d-primary) !important;
    text-decoration: none !important;
}

/* Card — Figma node 2158:6059
   White, 1px #D7D9FF border, 8px radius, p=12, column gap=12. */
body .plc-card {
    background: #FFFFFF !important;
    border: 1px solid var(--imp-d-lilac-border) !important;
    border-radius: var(--imp-d-inner-radius) !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 100% !important;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
body .plc-card:hover {
    border-color: var(--imp-d-primary) !important;
    box-shadow: 0 4px 12px rgba(88, 95, 255, 0.08);
}

/* Logo wrapper — generic flex centerer (children may be img, span, or svg/div) */
body .plc-card .plc-logo {
    flex: 1 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 56px;
}
body .plc-card .plc-logo img {
    max-height: 32px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    height: auto !important;   /* defeat .imgheightinc:70px legacy helper */
    width: auto !important;
}

/* Horizontal divider — 1px lilac, full width */
body .plc-card .plc-divider {
    border: 0 !important;
    border-top: 1px solid var(--imp-d-lilac-border) !important;
    width: 100%;
    height: 0;
    margin: 0;
}

/* Title + delivery group — Figma sets 4px gap between them */
body .plc-card .plc-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body .plc-card .plc-title {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text) !important;
    margin: 0 !important;
}
body .plc-card .plc-delivery {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text-muted) !important;
    margin: 0 !important;
}
body .plc-card .plc-delivery span {
    color: var(--imp-d-primary) !important;
    font-weight: 500 !important;
}

/* Price + button row */
body .plc-card .plc-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    margin: 0;
}
body .plc-card .plc-price {
    font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--imp-d-text-muted) !important;
    margin: 0 !important;
}

/* "Add Credits" pill — bg #9BA0F7, padding 6/16, Inter Medium 14, white.
   #dash-root prefix needed to outrank legacy `#dash-root .btn-plc` block
   inlined in dashboard/index.blade.php. */
#dash-root .plc-card .btn-plc,
body .plc-card .btn-plc {
    background: var(--imp-d-primary-soft) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 100px !important;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 6px 16px !important;
    width: auto !important;
    cursor: pointer;
    transition: background 180ms ease;
    height: auto !important;
}
#dash-root .plc-card .btn-plc:hover,
body .plc-card .btn-plc:hover { background: var(--imp-d-primary) !important; color: #FFFFFF !important; }

/* ==========================================================================
   FP+LMA wrapper — at <1100px, hide the FP-pane (the .classlghide block
   already renders a tablet/mobile-shaped FP duplicate above) and collapse
   the inner 2-col grid to a single column so LMA takes the full width.
   Desktop layout (>=1100px) is unaffected — both panes render side-by-side.
   ========================================================================== */
body .fp-lma-wrapper .fp-lma-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 1099px) {
    body .fp-lma-wrapper .fp-lma-grid { grid-template-columns: 1fr !important; }
    body .fp-lma-wrapper .fp-pane { display: none !important; }
    /* Visual breathing room before whatever follows (Calendar at tablet,
       Calendar at mobile) — without this the LMA panel butts against it. */
    body .fp-lma-wrapper { margin-bottom: 16px !important; }
}

/* ==========================================================================
   .classlghide FP mini-list — vertical scroll + up/down arrows
   (Figma 2024-5751 tablet node 2158:3589 / 2024-6457 mobile node 2158:3597).
   Tablet/mobile only — desktop uses the .plcMainSwiper instead.
   ========================================================================== */
body .classlghide .plc-mini-scroll {
    max-height: 380px;
    overflow-y: auto;
    /* Hide scrollbar — arrows are the only scroll affordance */
    scrollbar-width: none;
}
body .classlghide .plc-mini-scroll::-webkit-scrollbar { display: none; }

body .classlghide .plc-mini-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
body .classlghide .plc-mini-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--imp-d-lilac);
    border: 1px solid var(--imp-d-divider);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease;
}
body .classlghide .plc-mini-arrow:hover { background: #DCDFFB; }

/* ==========================================================================
   LINK MORE ACCOUNTS — Figma 2158:5044
   ========================================================================== */
body .dash-link-accounts-block,
body div[class*="link-accounts"] {
    background: var(--imp-d-card-bg) !important;
    border: 1px solid var(--imp-d-divider) !important;
    border-radius: var(--imp-d-card-radius) !important;
    box-shadow: var(--imp-d-card-shadow) !important;
}

/* ==========================================================================
   TOPBAR / WELCOME — Figma 2024:322
   Title "Welcome, David!" 22 Inter-Bold + thin divider + "Imperium Businesses
   Suite" 16 Helvetica-Regular muted
   ========================================================================== */
body .welcome-strip,
body div[class*="welcome"] h1,
body div[class*="welcome"] h2 {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--imp-d-text-strong) !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
}