/* ==========================================================================
   PROSCALE OS - ENTERPRISE SAAS SYSTEM & HIGH-CONTRAST THEME ENGINE
   Dual Mode: Dark Blue Cyan (#0b1329) & Pure White Cyan (#ffffff)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   THEME VARIABLES
   -------------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --ps-bg: #0b1329;
  --ps-bg-subtle: #070d1e;
  --ps-sidebar-bg: #080e21;
  --ps-card: #111c3a;
  --ps-card-hover: #16244a;
  --ps-card-border: #1e2d5a;
  --ps-text: #ffffff;
  --ps-text-muted: #cbd5e1;
  --ps-input-bg: #070d1e;
  --ps-input-border: #1e2d5a;
  --ps-cyan: #22d3ee;
  --ps-cyan-light: #38bdf8;
  --ps-cyan-dark: #0891b2;
  --ps-cyan-glow: rgba(34, 211, 238, 0.25);
  --ps-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --ps-bg: #ffffff;
  --ps-bg-subtle: #f8fafc;
  --ps-sidebar-bg: #ffffff;
  --ps-card: #ffffff;
  --ps-card-hover: #f8fafc;
  --ps-card-border: #e2e8f0;
  --ps-text: #0f172a;
  --ps-text-muted: #334155;
  --ps-input-bg: #ffffff;
  --ps-input-border: #cbd5e1;
  --ps-cyan: #0891b2;
  --ps-cyan-light: #06b6d4;
  --ps-cyan-dark: #0e7490;
  --ps-cyan-glow: rgba(8, 145, 178, 0.15);
  --ps-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   GLOBAL RESET & FULL-SCREEN CANVAS
   -------------------------------------------------------------------------- */
body.proscale-canvas-body,
body[class*="proscale"] {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--ps-bg) !important;
  color: var(--ps-text) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   HIDE WORDPRESS ADMIN CHROME ON PROSCALE PAGES
   -------------------------------------------------------------------------- */
body[class*="proscale"] #wpadminbar,
body[class*="proscale"] #adminmenumain,
body[class*="proscale"] #adminmenuwrap,
body[class*="proscale"] #wpfooter {
  display: none !important;
}

body[class*="proscale"] #wpcontent,
body[class*="proscale"] #wpbody,
body[class*="proscale"] #wpbody-content {
  margin-left: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  background-color: var(--ps-bg) !important;
}

/* --------------------------------------------------------------------------
   DYNAMIC THEME STYLING & HIGH CONTRAST OVERRIDES
   -------------------------------------------------------------------------- */
.ps-bg { background-color: var(--ps-bg) !important; transition: background-color 0.3s ease; }
.ps-bg-subtle { background-color: var(--ps-bg-subtle) !important; transition: background-color 0.3s ease; }
.ps-sidebar { 
  background-color: var(--ps-sidebar-bg) !important; 
  border-right: 1px solid var(--ps-card-border) !important; 
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.ps-card { 
  background-color: var(--ps-card) !important; 
  border: 1px solid var(--ps-card-border) !important; 
  color: var(--ps-text) !important;
  box-shadow: var(--ps-shadow) !important;
  transition: all 0.3s ease;
}
.ps-card:hover {
  background-color: var(--ps-card-hover) !important;
  border-color: var(--ps-cyan) !important;
}
.ps-text { color: var(--ps-text) !important; }
.ps-text-muted { color: var(--ps-text-muted) !important; }
.ps-text-cyan { color: var(--ps-cyan) !important; }
.ps-border { border-color: var(--ps-card-border) !important; }
.ps-input {
  background-color: var(--ps-input-bg) !important;
  border: 1px solid var(--ps-input-border) !important;
  color: var(--ps-text) !important;
}
.ps-input:focus {
  border-color: var(--ps-cyan) !important;
  outline: none !important;
}

.ps-btn-cyan {
  background-color: var(--ps-cyan) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  transition: all 0.3s ease !important;
}
.ps-btn-cyan:hover {
  background-color: var(--ps-cyan-light) !important;
  box-shadow: 0 0 20px var(--ps-cyan-glow) !important;
  transform: translateY(-1px);
}

/* Switch Button Styling */
.proscale-theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background-color: var(--ps-card);
  border: 1px solid var(--ps-card-border);
  color: var(--ps-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ps-shadow);
  transition: all 0.3s ease;
}
.proscale-theme-switch-btn:hover {
  border-color: var(--ps-cyan);
  transform: translateY(-1px);
}

/* Deep Light Mode High-Contrast Overrides */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .text-white {
  color: #0f172a !important;
}

[data-theme="light"] p,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-500 {
  color: #334155 !important;
}

[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-950 {
  background-color: #ffffff !important;
}

[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-900 {
  border-color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------
   CUSTOM HIGH-CONTRAST SWITCH TOGGLE
   -------------------------------------------------------------------------- */
.ps-switch-bg {
  position: relative;
  width: 2.75rem; /* 44px */
  height: 1.5rem; /* 24px */
  background-color: #475569 !important; /* Slate 600 */
  border-radius: 9999px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
[data-theme="light"] .ps-switch-bg {
  background-color: #cbd5e1 !important; /* Slate 300 */
}
.ps-switch-bg::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  background-color: #ffffff !important;
  border-radius: 9999px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.proscale-block-toggle:checked + .ps-switch-bg {
  background-color: var(--ps-cyan) !important;
}
[data-theme="light"] .proscale-block-toggle:checked + .ps-switch-bg {
  background-color: #06b6d4 !important; /* Vivid Cyan */
}
.proscale-block-toggle:checked + .ps-switch-bg::after {
  transform: translateX(1.25rem); /* Move exactly by its width */
}