/* =========================================================================
   Banshkhali Blood Bank — Home Dashboard "Premium Pink" UI Refresh (v1.20.3)
   -------------------------------------------------------------------------
   Presentation-only visual refresh of the existing Home Dashboard ("/" ·
   assets/js/views/dashboard.js). Matches the requested premium Android-app
   card style (white cards, soft pink page canvas, soft pink shadow, light
   pink border, garnet primary) across every dashboard card:

     - Live Statistics (Total Members / Total Donations / Active Donors /
       Registered Hospitals / Blood Requests)                — .dbx-live-stats
     - Available Donors by blood group                        — .dbx-blood-stock
     - Top Donors (Today/Monthly/Yearly/Lifetime leaderboard)  — .dbx-top-donors
     - Recent Donations carousel                               — .dbx-recent-donations
     - Upcoming Blood Camp (admin-managed)                     — .dbx-camp
     - Notice Board (admin-managed)                            — .dbx-notice
     - The original stat/recent-request cards                  — .db-stats / .db-recent

   Every selector below is scoped under `.db-page` (the Home Dashboard's
   own root wrapper — confirmed used nowhere else in the app) or targets
   classes that only ever render inside it, so nothing here can reach the
   Login, Register, OTP, Profile, or any other screen. No REST endpoint,
   PHP class, admin screen, or database structure is touched — every value
   rendered by these cards still comes straight from the existing live
   data (see dashboard.js's own "Dashboard data policy" comment). This
   file only changes paint: color, border, radius, shadow, spacing, type.

   Loaded after both bbb-app and bbb-dashboard-extra (see functions.php)
   so these rules win the cascade without a single `!important`.
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* Design tokens — scoped to the dashboard only. Dark Mode keeps the      */
/* theme's existing dark surface/border/shadow tokens (no visual change   */
/* there), so Dark Mode support is fully preserved.                        */
/* ---------------------------------------------------------------------- */
.db-page {
	--dpp-page-bg:   #FFF7F8;
	--dpp-card-bg:   #FFFFFF;
	--dpp-border:    #F3B5C2;
	--dpp-primary:   #D1264E;
	--dpp-shadow:    rgba(170, 20, 45, .12);
	--dpp-shadow-sm: 0 6px 16px -6px rgba(170, 20, 45, .12);
	--dpp-shadow-md: 0 10px 26px -8px rgba(170, 20, 45, .12), 0 2px 8px -2px rgba(170, 20, 45, .08);
	--dpp-shadow-lg: 0 16px 34px -12px rgba(170, 20, 45, .16), 0 3px 10px -2px rgba(170, 20, 45, .1);
	--dpp-heading:   #3A0E1B;
}
[data-theme="dark"] .db-page {
	--dpp-page-bg:   var(--bg);
	--dpp-card-bg:   var(--surface-raised);
	--dpp-border:    var(--border);
	--dpp-primary:   var(--accent);
	--dpp-shadow:    rgba(0, 0, 0, .35);
	--dpp-shadow-sm: var(--shadow-card);
	--dpp-shadow-md: var(--shadow-card);
	--dpp-shadow-lg: var(--shadow-card-hover);
	--dpp-heading:   var(--text);
}

/* ---------------------------------------------------------------------- */
/* Page canvas — very soft pink, Light Mode only. `#bbb-app:not(.bbb-bg)` */
/* guards the existing Background Manager "Preset Gallery" feature: if an */
/* admin has assigned a custom background to the Home Dashboard screen    */
/* (background-preset-runtime.js adds `.bbb-bg` to #bbb-app for exactly   */
/* that case), this rule steps aside and that custom background keeps    */
/* showing through completely untouched, exactly as before.                */
/* ---------------------------------------------------------------------- */
html:not([data-theme="dark"]) #bbb-app:not(.bbb-bg):not(.bbb-bg-manager-active) .db-page {
	background: var(--dpp-page-bg);
}

/* ---------------------------------------------------------------------- */
/* Shared card look — every dashboard card gets the same white surface,   */
/* soft pink shadow, light pink border and 18-20px radius.                 */
/* ---------------------------------------------------------------------- */
.db-page .dbx-extra .dbx-section,
.db-page .db-stats .db-stat-card,
.db-page .db-recent-list .db-request-card {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	border-radius: 19px;
	box-shadow: var(--dpp-shadow-md);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.db-page .db-stats .db-stat-card:hover,
.db-page .db-recent-list .db-request-card:hover {
	box-shadow: var(--dpp-shadow-lg);
}

/* Section heading typography — a touch bolder/darker for premium hierarchy. */
.db-page .dbx-head h2,
.db-page .db-recent-head h2 {
	color: var(--dpp-heading);
	letter-spacing: .15px;
}
.db-page .dbx-head .db-see-all,
.db-page .db-recent-head .db-see-all,
.db-page .dbx-donation-viewall {
	color: var(--dpp-primary);
}

/* ---------------------------------------------------------------------- */
/* Live Statistics tiles — white premium mini-cards with a light pink     */
/* edge, replacing the glass/blur treatment.                               */
/* ---------------------------------------------------------------------- */
.db-page .dbx-stat-tile,
.db-page .db-stat-card {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	border-radius: 16px;
	box-shadow: var(--dpp-shadow-sm);
}
.db-page .dbx-stat-tile-value {
	font-weight: 800;
	letter-spacing: .1px;
}

/* ---------------------------------------------------------------------- */
/* Available Donors (blood group chips)                                   */
/* ---------------------------------------------------------------------- */
.db-page .dbx-stock-chip {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	border-radius: 16px;
	box-shadow: var(--dpp-shadow-sm);
}
.db-page .dbx-stock-group { color: var(--dpp-primary); }

/* ---------------------------------------------------------------------- */
/* Top Donors — ranked cards                                              */
/* ---------------------------------------------------------------------- */
.db-page .dbx-donor-card {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	box-shadow: var(--dpp-shadow-sm);
}
.db-page .dbx-donor-avatar { border-color: var(--dpp-card-bg); }
.db-page .dbx-donor-tab {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
}
.db-page .dbx-donor-tab.active {
	background: var(--dpp-primary);
	border-color: var(--dpp-primary);
}

/* ---------------------------------------------------------------------- */
/* Recent Donations slider cards                                          */
/* ---------------------------------------------------------------------- */
.db-page .dbx-donation-slide {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	box-shadow: var(--dpp-shadow-sm);
}
.db-page .dbx-donation-slide-photo { border-color: var(--dpp-card-bg); }
.db-page .dbx-donation-viewall {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
}

/* ---------------------------------------------------------------------- */
/* Recent Requests (original cards, kept fully wired to live data)        */
/* ---------------------------------------------------------------------- */
.db-page .db-request-card { transition: box-shadow .16s ease, transform .16s ease; }

/* ---------------------------------------------------------------------- */
/* Upcoming Blood Camp (admin-managed) — pink date badge over a white card */
/* ---------------------------------------------------------------------- */
.db-page .dbx-camp-card {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	box-shadow: var(--dpp-shadow-md);
}
/* Only when no banner image is set (BLOOD_CAMP.banner_url) does the card
   fall back to the plain white surface above; a banner still paints its
   own cover image + overlay via the existing inline style, untouched. */
.db-page .dbx-camp-date {
	background: var(--dpp-primary);
	box-shadow: none;
}
.db-page .dbx-camp-date span,
.db-page .dbx-camp-date small {
	color: #fff;
}
.db-page .dbx-camp-btn {
	background: var(--dpp-primary);
	color: #fff;
	border: none;
}

/* ---------------------------------------------------------------------- */
/* Notice Board (admin-managed)                                           */
/* ---------------------------------------------------------------------- */
.db-page .dbx-notice-card {
	background: var(--dpp-card-bg);
	border: 1px solid var(--dpp-border);
	box-shadow: var(--dpp-shadow-sm);
}
.db-page .dbx-notice-icon {
	background: color-mix(in srgb, var(--dpp-primary) 12%, transparent);
	color: var(--dpp-primary);
}

/* ---------------------------------------------------------------------- */
/* Responsive polish — keeps the existing breakpoints, only refines       */
/* spacing so cards keep a premium, uncramped feel on small phones.       */
/* ---------------------------------------------------------------------- */
@media (max-width: 380px) {
	.db-page .dbx-extra .dbx-section,
	.db-page .db-stats .db-stat-card,
	.db-page .db-recent-list .db-request-card {
		border-radius: 18px;
	}
}
@media (min-width: 900px) {
	.db-page .dbx-extra .dbx-section,
	.db-page .db-stats .db-stat-card,
	.db-page .db-recent-list .db-request-card {
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.db-page .db-stat-card,
	.db-page .db-request-card,
	.db-page .dbx-stat-tile,
	.db-page .dbx-donation-slide {
		transition: none !important;
	}
}


/* v1.21.4 recent donation date/time typography fix */
.dbh-page .bdh-card-time, .bdh-page .bdh-card-time { font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; }