/* ============================================================================
   aurora-glass.css  —  "Aurora Glass" skin (v17.97)

   Design 1 chosen by the client. Applied to the pages that share the SAME
   layout + logic:
     • /gestion-tarifs           (Gestion des Tarifs Globaux)
     • /savings-management/{id}   (Épargnes)
     • /loans-management/{id}     (Prêts)
     • /insurance-management/{id} (Assurances)

   SAFETY CONTRACT:
   Everything here is scoped under `.aurora-glass`, a class added ONLY to the
   root <MudContainer> of those four pages. No other page, dialog, or popover
   is affected (MudBlazor dialogs/menus render in a body-level overlay that is
   OUTSIDE this container, so they keep their normal styling).

   The 4 gradient stat cards keep their gradients because those are set via an
   inline `style=` attribute, which wins over these class rules — we only add
   rounding/shadow to them. Panels, plan cards and the mobile transaction
   cards (no inline background) receive the frosted-glass treatment.
   ============================================================================ */

/* ---- palette ---- */
.aurora-glass{
  --ag-c1a:#6366f1; --ag-c1b:#8b5cf6;   /* client / primary */
  --ag-c2a:#ec4899; --ag-c2b:#f43f5e;   /* chauffeur */
  --ag-c3a:#06b6d4; --ag-c3b:#3b82f6;   /* courtier */
  --ag-c4a:#10b981; --ag-c4b:#22d3ee;   /* actifs */
  --ag-accent:#7c3aed;
  --ag-ink:#1e1b3a;
  --ag-radius:20px;

  position:relative;
  background:
    radial-gradient(1200px 520px at 12% -8%, #ede9fe 0%, transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, #cffafe 0%, transparent 55%),
    linear-gradient(180deg,#f6f7ff,#eef1f9);
  border-radius:24px;
}

/* ---- glass surfaces (papers, panels, plan cards, mobile tx cards) ---------
   NB: no !important on `background`, so the stat cards' inline gradient wins. */
.aurora-glass .mud-paper{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--ag-radius) !important;
  box-shadow:0 18px 40px -26px rgba(30,27,75,.55);
}

/* Gradient stat cards: keep gradient (inline), just modernise the frame + glow. */
.aurora-glass .mud-grid .mud-card[style*="gradient"]{
  border:none;
  box-shadow:0 16px 34px -18px rgba(30,27,75,.55);
}
.aurora-glass .mud-grid .mud-card[style*="gradient"] .mud-card-content{ background:transparent; }

/* ---- gradient title hook (added to the page title MudText) ---- */
.aurora-glass .aurora-title{
  background:linear-gradient(90deg,#4f46e5,#a21caf);
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;
  font-weight:800 !important;
  letter-spacing:-.4px;
}

/* ---- section spacing polish ---- */
.aurora-glass .mud-card-content{ position:relative; z-index:1; }

/* ---- filter button group → pills ---- */
.aurora-glass .mud-button-group{
  box-shadow:none !important;
  border:none !important;
  background:transparent !important;
  gap:8px;
  flex-wrap:wrap;
}
.aurora-glass .mud-button-group > .mud-button-root{
  border-radius:12px !important;
  margin:0 !important;
  border:1px solid rgba(99,102,241,.28) !important;
  font-weight:700 !important;
  transition:.15s;
}
/* active (Color.Primary) filter pill → gradient */
.aurora-glass .mud-button-group > .mud-button-filled-primary,
.aurora-glass .mud-button-group > .mud-button-filled.mud-button-filled-primary{
  background:linear-gradient(135deg,var(--ag-c1a),var(--ag-c1b)) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 10px 22px -12px var(--ag-c1a) !important;
}

/* ---- plan / account cards ---- */
.aurora-glass .plan-card{
  border-radius:16px !important;
  border:1px solid rgba(99,102,241,.14) !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.aurora-glass .plan-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -20px var(--ag-c1a);
  border-color:#ddd6fe !important;
}
.aurora-glass .mud-card.plan-card-selected{
  background:linear-gradient(135deg,#f5f3ff,#faf5ff) !important;
  border-color:transparent !important;
  box-shadow:0 0 0 2px var(--ag-c1a) inset, 0 16px 34px -20px var(--ag-c1b) !important;
}
/* define the previously-missing pulse animation referenced by .plan-card-pulse */
.aurora-glass .plan-card-pulse{ animation:pulseSelection 2.2s ease-in-out infinite; }
@keyframes pulseSelection{
  0%,100%{ box-shadow:0 0 0 2px var(--ag-c1a) inset, 0 0 0 0 rgba(99,102,241,.30); }
  50%    { box-shadow:0 0 0 2px var(--ag-c1a) inset, 0 0 0 9px rgba(99,102,241,0); }
}

/* ============================================================================
   ACTIONS RAPIDES — "Duo de tuiles" (Idée 1), mobile.
   Each mobile action MudButton carries .aurora-tile + a colour class. The
   button becomes a gradient tile with an icon chip on top and the label below.
   Add .aurora-tile-wide for a full-width horizontal tile (the 3rd action).
   Buttons render only in the mobile variant (hidden on desktop), so these
   rules are safe app-wide under .aurora-glass.
   ============================================================================ */
.aurora-glass .aurora-tile.mud-button-root{
  min-height:106px !important;
  width:100% !important;
  border-radius:18px !important;
  color:#fff !important;
  padding:15px 13px !important;
  text-transform:none !important;
  box-shadow:0 14px 26px -14px rgba(30,27,75,.5) !important;
  align-items:stretch !important;
  transition:transform .15s ease;
}
.aurora-glass .aurora-tile.mud-button-root:active{ transform:scale(.98); }
.aurora-glass .aurora-tile .mud-button-label{
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  height:100%; width:100%;
  font-weight:800 !important; font-size:14px !important; line-height:1.2 !important;
  text-align:left !important; white-space:normal !important;
}
.aurora-glass .aurora-tile .mud-button-icon-start,
.aurora-glass .aurora-tile .mud-button-icon-end{
  margin:0 !important;
  width:42px !important; height:42px !important;
  background:rgba(255,255,255,.22);
  border-radius:12px;
  display:flex !important; align-items:center; justify-content:center;
}
.aurora-glass .aurora-tile .mud-icon-root{ font-size:1.4rem !important; }
/* wide, horizontal variant for a full-width 3rd action */
.aurora-glass .aurora-tile-wide.mud-button-root{ min-height:auto !important; padding:13px 15px !important; }
.aurora-glass .aurora-tile-wide .mud-button-label{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; }
/* colour variants */
.aurora-glass .aurora-tile-green{  background:linear-gradient(135deg,#43e97b,#22c55e) !important; }
.aurora-glass .aurora-tile-violet{ background:linear-gradient(135deg,#8b5cf6,#6366f1) !important; }
.aurora-glass .aurora-tile-amber{  background:linear-gradient(135deg,#fbbf24,#f59e0b) !important; }
.aurora-glass .aurora-tile-blue{   background:linear-gradient(135deg,#38bdf8,#3b82f6) !important; }
.aurora-glass .aurora-tile-grey{   background:linear-gradient(135deg,#94a3b8,#64748b) !important; }

/* ---- return / action pill button (keep gradient, align radius) ---- */
.aurora-glass .return-to-chauffeurs-btn{
  border-radius:14px !important;
  box-shadow:0 10px 24px -12px var(--ag-c1a) !important;
}

/* ---- data grid → Aurora header ---- */
.aurora-glass .modern-data-grid{ border-radius:16px !important; overflow:hidden; }
.aurora-glass .modern-data-grid .mud-table-head,
.aurora-glass .modern-data-grid .mud-table-head tr{
  background:linear-gradient(135deg,var(--ag-c1a),var(--ag-c1b)) !important;
}
.aurora-glass .modern-data-grid .mud-table-head th,
.aurora-glass .modern-data-grid .mud-table-head .mud-typography,
.aurora-glass .modern-data-grid .mud-table-head .mud-button-root{
  color:#fff !important;
}
.aurora-glass .modern-data-grid .mud-table-row:hover{ background:#faf9ff !important; }

/* ---- chips a touch rounder ---- */
.aurora-glass .mud-chip{ border-radius:999px !important; font-weight:700; }

/* ============================================================================
   RESPONSIVE  —  desktop / tablet / phone
   ============================================================================ */

/* Tablet & below: tighten the canvas. */
@media (max-width: 960px){
  .aurora-glass{ border-radius:18px; }
  .aurora-glass .mud-button-group{ width:100%; }
  .aurora-glass .mud-button-group > .mud-button-root{ flex:1 1 auto; justify-content:center; }
}

/* Phone: flush edge-to-edge canvas, single-line filters, no horizontal overflow. */
/* ============================================================================
   FIX — duplicated desktop / mobile variants.
   These pages ship a DESKTOP variant (.d-none.d-md-flex) AND a MOBILE variant
   (.d-flex.d-md-none) of BOTH the Filtres bar and the Actions Rapides bar.
   On this build MudBlazor's d-* breakpoint utilities don't hide the desktop
   copy on phones, so both render at once (the cramped button row + the 2x2
   grid). We enforce a single correct 960px cutover ourselves, scoped to these
   pages only, so exactly one variant shows.
   ============================================================================ */
@media (max-width: 959.98px){
  .aurora-glass .d-none.d-md-flex{ display:none !important; }
  .aurora-glass .d-flex.d-md-none{ display:flex !important; }
}
@media (min-width: 960px){
  .aurora-glass .d-none.d-md-flex{ display:flex !important; }
  .aurora-glass .d-flex.d-md-none{ display:none !important; }
}

/* Phone: flush edge-to-edge canvas, full-width sections, no horizontal overflow. */
@media (max-width: 600px){
  .aurora-glass{ border-radius:0; padding-left:6px !important; padding-right:6px !important; overflow-x:hidden; }
  .aurora-glass .mud-grid > .mud-grid-item{ min-width:0; }
  .aurora-glass .mud-paper{ width:100%; max-width:100%; border-radius:16px !important; }

  /* data grid scrolls INSIDE its panel instead of stretching the page */
  .aurora-glass .modern-data-grid,
  .aurora-glass .modern-data-grid .mud-table{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Transaction filter (a real MudButtonGroup, visible on phones): keep it on
     ONE line, filling the width, scrolling only if it overflows. */
  .aurora-glass .mud-button-group{
    display:flex !important; flex-wrap:nowrap !important; gap:6px;
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .aurora-glass .mud-button-group::-webkit-scrollbar{ display:none; }
  .aurora-glass .mud-button-group > .mud-button-root{
    flex:1 1 0 !important; min-width:fit-content !important; white-space:nowrap;
    padding-left:8px !important; padding-right:8px !important; font-size:.8rem !important;
  }

  /* Entity filter mobile grid (2x2 full-width buttons): tidy rounded pills */
  .aurora-glass .d-flex.d-md-none .mud-button-root{ border-radius:12px !important; }

  /* stat numbers never clip */
  .aurora-glass .mud-card[style*="gradient"] .mud-typography{ white-space:normal; }

  .aurora-glass .plan-card{ border-radius:14px !important; }
}