/**
 * Zigru admin branding — primary #3f10fa, gradient on buttons/sidebar/add.
 * Brand gradient: 135deg #02d6cc → #8f1f84.
 * Load via UNFOLD["STYLES"] so it applies on all admin pages.
 */

/* Brand gradient (reused for all primary buttons) */
:root {
  --brand-gradient: linear-gradient(135deg, #02d6cc 0%, #8f1f84 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(2, 214, 204, 0.06) 0%, rgba(143, 31, 132, 0.06) 100%);
  --brand-border-gradient: linear-gradient(135deg, #02d6cc, #8f1f84);
}

/* ============================================
   Dark theme — card base + gradient (global)
   So calendar/cards on pages that don’t define their own (e.g. ensayo changelist)
   get dark styling.    Base #0d0e45 at 50% opacity (softer in dark).
   ============================================ */
html.dark {
  --brand-card-bg-dark: rgba(13, 14, 69, 0.5);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(2, 214, 204, 0.011) 0%, rgba(143, 31, 132, 0.011) 100%);
  --brand-border-gradient: linear-gradient(135deg, rgba(2, 214, 204, 0.45), rgba(143, 31, 132, 0.45));
  /* Calendar and card components use these when parent page doesn’t set them */
  --card-bg: rgba(13, 14, 69, 0.5);
  --card-shadow: rgba(0, 0, 0, 0.3);
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border-color: #374151;
  /* FullCalendar / calendar legend */
  --content-item-bg: rgba(13, 14, 69, 0.65);
  --fc-bg: rgba(13, 14, 69, 0.5);
  --fc-border: #374151;
  --fc-today-bg: rgba(2, 214, 204, 0.12);
  --fc-button-bg: #374151;
  --fc-button-text: #e5e7eb;
  --fc-button-hover: #4b5563;
  --link-color: #02d6cc;
}

/* ============================================
   All system primary buttons — gradient
   (Save, Add, Submit, and any .bg-primary-600 / primary action buttons)
   ============================================ */
#content button.bg-primary-600,
#content a.bg-primary-600,
#content input[type="submit"].bg-primary-600,
#content .submit-row input[type="submit"],
#content button[type="submit"].bg-primary-600,
#header a.addlink.bg-primary-600,
#header-inner a.addlink.bg-primary-600,
.object-tool a.addlink.bg-primary-600,
a.bg-primary-600[href],
button.bg-primary-600 {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: none !important;
}
#content button.bg-primary-600:hover,
#content a.bg-primary-600:hover,
#content input[type="submit"].bg-primary-600:hover,
#content .submit-row input[type="submit"]:hover,
#content button[type="submit"].bg-primary-600:hover,
#header a.addlink.bg-primary-600:hover,
#header-inner a.addlink.bg-primary-600:hover,
.object-tool a.addlink.bg-primary-600:hover,
a.bg-primary-600[href]:hover,
button.bg-primary-600:hover {
  filter: brightness(1.05);
  color: #fff !important;
}

/* Header add button (circular +) — keep size/shadow */
#header a.addlink.bg-primary-600,
#header-inner a.addlink.bg-primary-600,
.object-tool a.addlink.bg-primary-600 {
  box-shadow: 0 2px 4px rgba(2, 214, 204, 0.25);
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
#header a.addlink.bg-primary-600:hover,
#header-inner a.addlink.bg-primary-600:hover,
.object-tool a.addlink.bg-primary-600:hover {
  box-shadow: 0 4px 8px rgba(2, 214, 204, 0.35);
  transform: translateY(-2px);
}

/* ============================================
   Sidebar active nav item — gradient
   ============================================ */
[data-simplebar] ol li a.bg-base-100,
[data-simplebar] ol li a.font-semibold.text-primary-600 {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}
[data-simplebar] ol li a.bg-base-100:hover,
[data-simplebar] ol li a.font-semibold.text-primary-600:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  filter: brightness(1.05);
}

/* Dark mode: sidebar active (match class containing dark bg/text) */
html.dark [data-simplebar] ol li a[class*="dark:bg-white"],
html.dark [data-simplebar] ol li a[class*="dark:text-primary"] {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}
html.dark [data-simplebar] ol li a[class*="dark:bg-white"]:hover,
html.dark [data-simplebar] ol li a[class*="dark:text-primary"]:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  filter: brightness(1.05);
}

/* ============================================
   Floating edit button (detail pages: artista, persona, show, ensayo, cancion)
   Uses --brand-gradient so the pencil in the bottom-right matches brand.
   ============================================ */
a.floating-edit-button,
a.floating-btn.edit {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(2, 214, 204, 0.3);
}
a.floating-edit-button:hover,
a.floating-btn.edit:hover {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(2, 214, 204, 0.4);
}