/*
 * ── WHITELABEL THEME ─────────────────────────────────────────────────────────
 *
 *  To re-brand for a new client, change only these four lines:
 *
 *    --cc-primary        Main action colour  (buttons, active states, accents)
 *    --cc-primary-text   Text ON the primary colour (black on yellow, white on dark)
 *    --cc-secondary      Sidebar / nav background colour
 *    --cc-secondary-text Text ON the secondary colour
 *
 *  Everything else derives from those four values automatically.
 *
 *  Current client: CloseCooper (yellow + black)
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand colours ──────────────────────────────────────────────────────── */
  --cc-primary:        #FFD600;
  --cc-primary-text:   #1A1A1A;
  --cc-secondary:      #1A1A1A;
  --cc-secondary-text: #FFFFFF;

  /* ── Radzen primary palette ─────────────────────────────────────────────── */
  --rz-primary:         var(--cc-primary);
  --rz-primary-dark:    #E6C000;
  --rz-primary-darker:  #CCaa00;
  --rz-primary-light:   #FFE566;
  --rz-primary-lighter: #FFF5B3;

  /* Text/icons on top of a primary-coloured surface (e.g. filled primary button) */
  --rz-on-primary:          var(--cc-primary-text);
  --rz-on-primary-dark:     var(--cc-primary-text);
  --rz-on-primary-darker:   var(--cc-primary-text);
  --rz-on-primary-light:    var(--cc-primary-text);
  --rz-on-primary-lighter:  var(--cc-primary-text);

  /* Borders using the primary colour */
  --rz-border-primary:          var(--cc-primary);
  --rz-border-primary-dark:     #E6C000;
  --rz-border-primary-darker:   #CCaa00;
  --rz-border-primary-light:    #FFE566;
  --rz-border-primary-lighter:  #FFF5B3;

  /* Focus outline on primary elements */
  --rz-outline-primary:         rgba(255, 214, 0, 0.5);
  --rz-outline-on-primary:      rgba(26, 26, 26, 0.4);

  /* ── Radzen secondary palette ───────────────────────────────────────────── */
  --rz-secondary:         var(--cc-secondary);
  --rz-secondary-dark:    #000000;
  --rz-secondary-darker:  #000000;
  --rz-secondary-light:   #333333;
  --rz-secondary-lighter: #555555;

  --rz-on-secondary:          var(--cc-secondary-text);
  --rz-on-secondary-dark:     var(--cc-secondary-text);
  --rz-on-secondary-darker:   var(--cc-secondary-text);
  --rz-on-secondary-light:    var(--cc-secondary-text);
  --rz-on-secondary-lighter:  var(--cc-secondary-text);

  /* ── Sidebar ────────────────────────────────────────────────────────────── */
  --rz-sidebar-background-color:        var(--cc-secondary);
  --rz-sidebar-color:                   var(--cc-secondary-text);
  --rz-sidebar-toggle-background-color: var(--cc-secondary);
  --rz-sidebar-toggle-color:            var(--cc-secondary-text);
  --rz-sidebar-toggle-hover-background-color: rgba(255,255,255,0.08);

  /* ── Side-panel nav items ───────────────────────────────────────────────── */
  --rz-panel-menu-item-color:                   rgba(255, 255, 255, 0.70);
  --rz-panel-menu-item-hover-color:             #FFFFFF;
  --rz-panel-menu-item-hover-background-color:  rgba(255, 255, 255, 0.08);
  --rz-panel-menu-item-active-color:            var(--cc-primary);
  --rz-panel-menu-item-active-background-color: rgba(255, 214, 0, 0.12);
  --rz-panel-menu-icon-color:                   rgba(255, 255, 255, 0.70);
}

/* ── Footer nav active tab colour (hardcoded in MainLayout overridden here) ── */
.footer-button.active {
  color: var(--cc-primary) !important;
}

/* Dark-mode footer active tab */
@media (prefers-color-scheme: dark) {
  .footer-button.active {
    color: var(--cc-primary) !important;
  }
}