/*
 * Admin theme palette — shared across all admin pages.
 *
 * The default :root block holds the ORIGINAL dark values, so dark mode renders
 * exactly as before. The [data-theme="light"] block overrides each variable.
 *
 * Only colors that must flip between themes are variables here:
 *   --bg-page / --bg-panel  : page and panel/modal backgrounds (were dark gradients)
 *   --text                  : primary text (was #fff)
 *   --wa-*                  : the white-on-dark rgba(255,255,255,α) values,
 *                             named by alpha (wa-10 == alpha 0.10)
 *
 * Accent colors (blue/green/red/yellow) and black shadows/overlays stay literal
 * in the templates — they read fine on both backgrounds.
 *
 * The sidebar and mobile topbar intentionally stay dark in both themes.
 */

:root {
  --bg-page: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --bg-panel: linear-gradient(135deg, #1a1a2e, #16213e);
  --bg-panel-alt: linear-gradient(135deg, #1a1a2e, #0f3460);
  --bg-solid: #1a1a2e;
  --text: #fff;

  /* Accent foregrounds — original (dark) shades. Overridden darker for light. */
  --accent-blue:   #63b3ed;
  --accent-green:  #68d391;
  --accent-red:    #fc8181;
  --accent-yellow: #f6e05e;
  --accent-green-fill: rgba(104,211,145,0.55);

  --wa-025: rgba(255,255,255,0.025);
  --wa-03:  rgba(255,255,255,0.03);
  --wa-05:  rgba(255,255,255,0.05);
  --wa-07:  rgba(255,255,255,0.07);
  --wa-08:  rgba(255,255,255,0.08);
  --wa-10:  rgba(255,255,255,0.1);
  --wa-12:  rgba(255,255,255,0.12);
  --wa-15:  rgba(255,255,255,0.15);
  --wa-20:  rgba(255,255,255,0.2);
  --wa-25:  rgba(255,255,255,0.25);
  --wa-30:  rgba(255,255,255,0.3);
  --wa-35:  rgba(255,255,255,0.35);
  --wa-40:  rgba(255,255,255,0.4);
  --wa-45:  rgba(255,255,255,0.45);
  --wa-50:  rgba(255,255,255,0.5);
  --wa-60:  rgba(255,255,255,0.6);
  --wa-70:  rgba(255,255,255,0.7);
  --wa-80:  rgba(255,255,255,0.8);
  --wa-85:  rgba(255,255,255,0.85);
  --wa-90:  rgba(255,255,255,0.9);
}

:root[data-theme="light"] {
  --bg-page: linear-gradient(135deg, #eef2f8 0%, #e8eef7 50%, #dfe8f3 100%);
  --bg-panel: linear-gradient(135deg, #ffffff, #f1f5fb);
  --bg-panel-alt: linear-gradient(135deg, #ffffff, #eaf1fa);
  --bg-solid: #ffffff;
  --text: #182233;

  /* Darker, higher-contrast accents for the light background */
  --accent-blue:   #2b6cb0;
  --accent-green:  #2f855a;
  --accent-red:    #c53030;
  --accent-yellow: #b7791f;
  --accent-green-fill: rgba(47,133,90,0.5);

  /* low alpha -> subtle grey surfaces/borders on white */
  --wa-025: rgba(24,34,51,0.02);
  --wa-03:  rgba(24,34,51,0.028);
  --wa-05:  rgba(24,34,51,0.04);
  --wa-07:  rgba(24,34,51,0.05);
  --wa-08:  rgba(24,34,51,0.06);
  --wa-10:  rgba(24,34,51,0.09);
  --wa-12:  rgba(24,34,51,0.1);
  --wa-15:  rgba(24,34,51,0.12);
  --wa-20:  rgba(24,34,51,0.16);
  /* mid/high alpha -> readable dark text on white */
  --wa-25:  rgba(24,34,51,0.26);
  --wa-30:  rgba(24,34,51,0.32);
  --wa-35:  rgba(24,34,51,0.38);
  --wa-40:  rgba(24,34,51,0.46);
  --wa-45:  rgba(24,34,51,0.52);
  --wa-50:  rgba(24,34,51,0.58);
  --wa-60:  rgba(24,34,51,0.66);
  --wa-70:  rgba(24,34,51,0.74);
  --wa-80:  rgba(24,34,51,0.82);
  --wa-85:  rgba(24,34,51,0.86);
  --wa-90:  rgba(24,34,51,0.9);
}

/* Theme toggle button — lives in the (always-dark) sidebar footer */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}
.theme-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}