/* ==========================================================================
   dash-stats-r1.css — user dashboard overview tiles (my_account_stats.html)

   Loaded only on dashboard pages (see main.html). Uses the dashboard design
   tokens from v2-tokens.css (--card, --border, --primary, --foreground,
   --muted, --muted-foreground) so it matches the panel theme.
   ========================================================================== */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.ds-tile {
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg, .75rem);
  padding: 1.2rem 1.3rem 1.25rem;
  min-height: 148px;
}
.ds-tile--accent {
  background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(0 84% 64%) 100%);
  border-color: transparent;
}

.ds-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.ds-label {
  font-size: .8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.ds-tile--accent .ds-label { color: hsl(0 86% 95%); }
.ds-value {
  margin-top: .3rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: hsl(var(--foreground));
}
.ds-value small { font-size: .82rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.ds-tile--accent .ds-value,
.ds-tile--accent .ds-value small { color: #fff; }

.ds-ic {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}
.ds-tile--accent .ds-ic { background: rgba(255, 255, 255, .18); color: #fff; }

.ds-spacer { flex: 1 1 auto; }

.ds-meta {
  margin-top: .6rem;
  font-size: .78rem;
  color: hsl(var(--muted-foreground));
}
.ds-tile--accent .ds-meta { color: hsl(0 86% 95%); }
.ds-meta--action { margin-top: .45rem; }
.ds-meta a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  text-decoration: none;
  color: hsl(var(--primary));
}
/* Pin link colour across every interactive state — on the accent (brand-red)
   card the link is white, and we don't want ANY global hover rule (current or
   future) repainting it primary on hover and making it invisible against
   the red background. Same defence for the plain card. */
.ds-tile--accent .ds-meta a,
.ds-tile--accent .ds-meta a:hover,
.ds-tile--accent .ds-meta a:focus,
.ds-tile--accent .ds-meta a:active { color: #fff !important; }
.ds-tile:not(.ds-tile--accent) .ds-meta a,
.ds-tile:not(.ds-tile--accent) .ds-meta a:hover,
.ds-tile:not(.ds-tile--accent) .ds-meta a:focus,
.ds-tile:not(.ds-tile--accent) .ds-meta a:active { color: hsl(var(--primary)) !important; }
.ds-meta a:hover { text-decoration: underline; }

/* storage progress bar */
.ds-bar {
  height: 7px;
  margin-top: .7rem;
  background: hsl(var(--muted));
  border-radius: 999px;
  overflow: hidden;
}
.ds-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(0 84% 64%));
  animation: ds-fill 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes ds-fill { from { width: 0 !important; } }

/* premium / unlimited storage pill (shown instead of the bar) */
.ds-unlimited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: .7rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(0 84% 64%));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* downloads sparkline (real 7-day data) */
.ds-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  margin-top: .7rem;
}
.ds-spark i {
  position: relative;
  flex: 1;
  height: var(--h);
  min-height: 5px;
  border-radius: 3px;
  background: hsl(var(--primary) / .16);
  transform-origin: bottom;
  cursor: default;
  outline: none;
  transition: background .12s ease;
  animation: ds-grow .8s cubic-bezier(.2, .7, .2, 1) both;
}
.ds-spark i.is-peak { background: hsl(var(--primary)); }
.ds-spark i:hover,
.ds-spark i:focus-visible { background: hsl(var(--primary)); }

/* hover / keyboard-focus tooltip — shows the day + download count */
.ds-spark i::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  white-space: nowrap;
  background: hsl(var(--foreground));
  color: hsl(var(--card));
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 6px;
  box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, .18));
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10;
}
.ds-spark i::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent;
  border-top-color: hsl(var(--foreground));
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10;
}
.ds-spark i:hover::after,
.ds-spark i:focus-visible::after,
.ds-spark i:hover::before,
.ds-spark i:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ds-spark i:nth-child(2) { animation-delay: .06s; }
.ds-spark i:nth-child(3) { animation-delay: .12s; }
.ds-spark i:nth-child(4) { animation-delay: .18s; }
.ds-spark i:nth-child(5) { animation-delay: .24s; }
.ds-spark i:nth-child(6) { animation-delay: .3s; }
.ds-spark i:nth-child(7) { animation-delay: .36s; }
@keyframes ds-grow { from { transform: scaleY(0); } }

@media (max-width: 1100px) {
  .ds-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ds-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-bar__fill,
  .ds-spark i { animation: none; }
}

/* ==========================================================================
   /account/ settings panel — overrides layered on v2-dashboard-pro.css
   ========================================================================== */
/* Tab column = exactly one stat-card wide, with the same 1rem gap, so it
   lines up under the Balance card. Desktop only — the mobile rule in
   v2-dashboard-pro.css (max-width 991.98) keeps the stacked layout. */
@media (min-width: 992px) {
  body.v2 .account-settings-grid {
    grid-template-columns: calc((100% - 3rem) / 4) 1fr;
    gap: 1rem;
  }
}

/* Active tab: soft tint + left accent bar instead of a solid red fill. */
body.v2 .account-tabs-vertical .nav-link.active {
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: inset 3px 0 0 hsl(var(--primary));
}
body.v2 .account-tabs-vertical .nav-link.active .at-icon {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.28);
  color: hsl(var(--primary));
}
body.v2 .account-tabs-vertical .nav-link.active .at-title {
  color: hsl(var(--primary));
}
body.v2 .account-tabs-vertical .nav-link.active .at-sub {
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   mu-dash-theme — Premium-page look applied to the WHOLE signed-in user
   dashboard (left sidebar + top bar + page content). main.html puts the
   .mu-dash-theme class on <body> for non-admin dashboard pages. Pure design-
   token override: no layout / component-CSS changes. The admin panel is
   intentionally excluded (it loads the legacy, non-tokenised dashboard.css).
   NOTE: this theme forces light mode — it pins the light token values even
   under prefers-color-scheme: dark — for a consistent premium look.
   ========================================================================== */
body.v2.mu-dash-theme {
  --primary:            353 100% 68%;   /* #ff5a6e */
  --primary-hover:      351 81% 55%;    /* #e8324a */
  --ring:               353 100% 68%;
  --primary-foreground: 0 0% 100%;
  --background:         230 33% 97%;    /* #f6f7fb */
  --card:               0 0% 100%;
  --card-foreground:    230 23% 13%;    /* #1a1d29 */
  --foreground:         230 23% 13%;
  --border:             228 23% 94%;    /* #ebedf3 */
  --input:              228 23% 94%;
  --muted:              230 33% 97%;
  --muted-foreground:   225 11% 50%;    /* #5a6275 */
  --subtle:             230 33% 98%;
  /* dark-mode-safe — v2-tokens.css remaps these under prefers-color-scheme:
     dark; pin light values so a dark-OS browser keeps a consistent look. */
  --secondary:            230 33% 97%;
  --secondary-foreground: 230 23% 13%;
  --accent:               230 33% 97%;
  --accent-foreground:    230 23% 13%;
  --popover:              0 0% 100%;
  --popover-foreground:   230 23% 13%;
  --destructive:            0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --radius-sm:   0.625rem;
  --radius:      1rem;
  --radius-md:   1rem;
  --radius-lg:   1rem;
  --radius-xl:   1.375rem;
  --radius-card: 1rem;                  /* used by .profile-hero / .pp-card */
  --shadow-xs: 0 1px 2px rgba(20,24,39,.04), 0 1px 6px rgba(20,24,39,.04);
  --shadow-sm: 0 1px 2px rgba(20,24,39,.04), 0 1px 6px rgba(20,24,39,.04);
  --shadow:    0 4px 16px rgba(20,24,39,.06), 0 1px 3px rgba(20,24,39,.05);
  --shadow-md: 0 4px 16px rgba(20,24,39,.06), 0 1px 3px rgba(20,24,39,.05);
  --shadow-lg: 0 18px 48px rgba(20,24,39,.12), 0 4px 12px rgba(20,24,39,.06);
  --font-sans: 'Somar Sans','Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* Pill buttons — .btn radius is hardcoded in v2-dashboard-pro.css, not tokenised */
body.v2.mu-dash-theme .btn { border-radius: 999px; }

/* Primary buttons — pink brand glow, matching the premium page's .mu-btn--primary
   (box-shadow is already in .btn's transition, so the hover change animates). */
body.v2.mu-dash-theme .btn-primary {
  box-shadow: 0 10px 26px hsl(353 100% 68% / 0.32);
}
body.v2.mu-dash-theme .btn-primary:hover {
  box-shadow: 0 12px 30px hsl(353 100% 68% / 0.40);
}

/* Targeted fixes — gradient stops hardcoded to the old red won't follow --primary */
body.v2.mu-dash-theme .profile-hero::before {
  background: linear-gradient(180deg, hsl(353 100% 68%), hsl(351 81% 55%));
}
body.v2.mu-dash-theme .profile-hero-avatar {
  background: linear-gradient(135deg, hsl(353 100% 68%), hsl(351 81% 55%));
  box-shadow: 0 4px 12px hsl(353 100% 68% / 0.30);
}
/* Shell — sidebar logo mark + topbar avatar hardcode the old red secondary
   gradient stop (v2-dashboard-pro.css:181, :514); pin them to premium pink. */
body.v2.mu-dash-theme .v2-sidebar-brand .v2-logo-mark,
body.v2.mu-dash-theme .topbar-avatar {
  background: linear-gradient(135deg, hsl(353 100% 68%), hsl(351 81% 55%));
}
/* Balance card — clean vivid premium gradient (#ff5a6e -> #ff7384) + soft
   brand glow so the accent tile reads as designed, not a flat block. */
body.v2.mu-dash-theme .ds-tile--accent {
  background: linear-gradient(145deg, hsl(353 100% 68%), hsl(353 100% 73%));
  box-shadow: 0 10px 28px hsl(353 100% 68% / 0.28);
}
body.v2.mu-dash-theme .ds-bar__fill,
body.v2.mu-dash-theme .ds-unlimited {
  background: linear-gradient(135deg, hsl(353 100% 68%), hsl(353 100% 73%));
}

/* ==========================================================================
   Recent uploads panel — My Dashboard (/dashboard/)
   ========================================================================== */
.ru-panel {
  margin-top: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem 1.25rem;
}
.ru-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.ru-panel__title { margin: 0; font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); font-family: 'Somar Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }
.ru-panel__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.ru-panel__link:hover { text-decoration: underline; }

.ru-list { display: flex; flex-direction: column; gap: .25rem; }
.ru-file {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: calc(var(--radius-lg) - 6px);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.ru-file:hover { background: hsl(var(--muted)); }

.ru-file__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.ru-file__icon--image  { background: hsl(262 83% 95%); color: hsl(262 60% 48%); }
.ru-file__icon--video  { background: hsl(0 84% 95%);   color: hsl(0 65% 52%);   }
.ru-file__icon--audio  { background: hsl(330 80% 95%); color: hsl(330 58% 50%); }
.ru-file__icon--archive{ background: hsl(38 92% 92%);  color: hsl(32 75% 44%);  }
.ru-file__icon--pdf    { background: hsl(0 84% 95%);   color: hsl(0 70% 48%);   }
.ru-file__icon--doc    { background: hsl(214 90% 94%); color: hsl(214 70% 48%); }
.ru-file__icon--sheet  { background: hsl(142 55% 92%); color: hsl(142 52% 38%); }
.ru-file__icon--slides { background: hsl(24 90% 92%);  color: hsl(24 75% 47%);  }
.ru-file__icon--code   { background: hsl(199 80% 93%); color: hsl(199 68% 42%); }
.ru-file__icon--exec   { background: hsl(220 14% 92%); color: hsl(220 12% 42%); }
.ru-file__icon--other  { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.ru-file__body { flex: 1 1 auto; min-width: 0; }
.ru-file__name {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ru-file__meta {
  display: block;
  margin-top: .12rem;
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}
.ru-file__flag {
  font-weight: 700;
  color: hsl(var(--primary));
}
.ru-file__flag--ok { color: hsl(142 52% 38%); }
.ru-file__chev { flex: 0 0 auto; color: hsl(var(--muted-foreground)); opacity: .5; }
.ru-file:hover .ru-file__chev { opacity: .9; }

.ru-empty { text-align: center; padding: 1.75rem 1rem; color: hsl(var(--muted-foreground)); }
.ru-empty p { margin: 0 0 .85rem; font-size: .875rem; }

/* ==========================================================================
   Brand logo sizing — desktop sidebar lockup (mark + "Mega4Up" word) and the
   mobile topbar mark. Overrides the smaller defaults in v2-dashboard-pro.css.
   ========================================================================== */
body.v2 .v2-sidebar-brand {
  gap: .55rem;
  padding-top: .15rem;
}
body.v2 .v2-sidebar-brand img {
  height: 1.9rem;
  width: 1.9rem;
  flex: 0 0 auto;
}
body.v2 .v2-sidebar-brand .v2-logo-text {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
  white-space: nowrap;
}
/* Mobile topbar — mark only, slightly larger so it reads cleanly */
body.v2 .topbar-logo img {
  height: 1.75rem;
  width: 1.75rem;
}

/* Mobile menu (hamburger) button — branded, clearer tap target */
body.v2 .topbar-burger {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: hsl(var(--primary) / 0.10);
  border: 1px solid hsl(var(--primary) / 0.22);
  color: hsl(var(--primary));
}
body.v2 .topbar-burger:hover,
body.v2 .topbar-burger:active {
  background: hsl(var(--primary) / 0.18);
  border-color: hsl(var(--primary) / 0.30);
}