/* ---------- Base ---------- */
* { box-sizing: border-box }
:root{
  --bg:#0b1220;
  --card:#111827;
  --text:#0b1220;
  --muted: #ffff;
  --primary:#2563eb;   /* blue */
  --success:#22c55e;   /* green */
  --danger:#ef4444;    /* red */
  --ghost:#334155;     /* slate */
  --ring:#60a5fa;      /* focus ring */
}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background: #ffff;
  color:var(--text);
}

/* ---------- Layout ---------- */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.card{
  background:linear-gradient(180deg,#0f172a,#111827);
  border:1px solid #1f2937;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  margin:.5rem 0;
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.row{display:flex;align-items:center;gap:1rem;margin:.5rem 0}
.spacer{flex:1}

/* ---------- Inputs & Buttons ---------- */
input,select,button,textarea{font-size:14px}
input,select,textarea{
  background:#0b1220;
  border:1px solid #1f2937;
  color:var(--text);
  border-radius:.5rem;
  padding:.6rem .7rem;
  width:100%;
}
input:focus,select:focus,textarea:focus,button:focus{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

/* Base button (applies to plain <button> so it never looks white) */
button{
  border:1px solid #4b5563;      /* slate-600 */
  background:#374151;            /* slate-700 */
  cursor:pointer;
  border-radius:.6rem;
  padding:.55rem 1rem;
  color:#e5e7eb;                 /* readable on dark */
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* App-level themes */
button.primary{background:var(--primary); border-color:#1d4ed8; color:#fff}
button.success{background:var(--success); border-color:#16a34a; color:#fff}
button.ghost{background:var(--ghost); color:#e5e7eb; border-color:#475569}
button.icon{padding:.45rem .7rem;border-radius:.65rem}
button.big{font-size:16px;padding:.7rem 1.2rem;border-radius:.7rem}
button[disabled]{opacity:.85;cursor:not-allowed;box-shadow:none}

/* Interactions */
button:hover:not([disabled]){filter:brightness(1.06)}
button:active:not([disabled]){transform:translateY(1px)}
button:focus-visible{outline:3px solid rgba(96,165,250,.7);outline-offset:2px}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;margin-top:.5rem}
.table th,.table td{
  border-bottom:1px solid #1f2937;
  padding:.6rem .5rem;
  text-align:left;
  vertical-align:top
}
.table th{color:#cbd5e1;font-weight:600;font-size:.85rem}
.table tr:hover td{background:#0f172a}

/* Make the first two columns compact & centered */
.col-serial,.col-id{width:64px;text-align:center;white-space:nowrap}

/* ---------- Badges (status-aware) ---------- */
.badge{
  display:inline-block;
  padding:.18rem .55rem;
  border:1px solid transparent;
  border-radius:999px;
  color:#e5e7eb;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.badge[data-status="DRAFT"]{background:#374151}
.badge[data-status="PENDING"]{background:#1d4ed8}
.badge[data-status="CHANGES_REQUESTED"]{background:#b45309}
.badge[data-status="APPROVED"]{background:#15803d}
.badge[data-status="ACCEPTED"]{background:#15803d}
.badge[data-status="REJECTED"]{background:#b91c1c}
.badge[data-status="WITHDRAWN"]{background:#374151; color:#e5e7eb; border-color:#4b5563}

/* ---------- Actions column buttons (clear & readable) ---------- */
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* Default action button in generic lists */
.actions .icon{background:#2563eb;border:1px solid #1d4ed8;color:#fff}

/* Edit = secondary gray */
.actions .icon[data-act="edit"]{
  background:#374151;
  border:1px solid #4b5563;
  color:#e5e7eb;
}

/* Withdraw = danger red */
.actions .icon.danger,
.actions .icon[data-act="withdraw"]{
  background:#dc2626;
  border:1px solid #b91c1c;
  color:#fff;
}

/* Disabled: still readable but clearly inactive */
.actions .icon[disabled]{
  background:#475569;
  border:1px solid #64748b;
  color:#e2e8f0;
  opacity:.85;
  transform:none;
  filter:none;
  cursor:not-allowed;
  box-shadow:none;
}

/* ---------- Misc ---------- */
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.9rem}
.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:#111827;border:1px solid #1f2937;color:#e5e7eb;padding:.7rem 1rem;border-radius:.6rem;
  box-shadow:0 10px 20px rgba(0,0,0,.3);z-index:9999
}
.attachment{display:block;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}

a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

/* Top bar */
.topbar{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}
.topbar .spacer{flex:1}

/* Proposer heading */
#prop-heading{text-align:center;font-size:2rem;font-weight:700;margin:.25rem 0 1rem}

/* ---------- Make letters white but keep links/muted readable ---------- */
body,
.cpfr-wrapper,
.login-pane,
.cpfr-wrapper *,
.login-pane * {
  color:#ffffff !important;
}
.muted{ color:#cbd5e1 !important; }
a{ color:#93c5fd !important; }

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .topbar{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}
  button.big{font-size:15px}
  .table th, .table td{font-size:.92rem}
}

/* ---------- Admin additions (overrides & extras) ---------- */
/* Wrap scrolling for wide tables */
.table-wrap{overflow:auto}

/* Make admin tables fully bordered (overrides border-bottom above) */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid #1f2937; padding:.5rem; text-align:left}

/* Small stat cards and grid */
.card-sm{border:1px solid #1f2937; border-radius:.75rem; padding:.75rem}
.stats-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem}
.stat-label{font-size:.8rem; opacity:.8}
.stat-value{font-size:1.25rem; font-weight:600}

/* Queued-project action buttons (explicit classes) */
.btn-approve{
  padding:.4rem .7rem;
  border-radius:.55rem;
  background:#10b981;           /* emerald-500 */
  border:1px solid #10b981;
  color:#fff;
}
.btn-approve:hover:not(:disabled){ background:#0ea371; border-color:#0ea371 }

.btn-reject{
  padding:.4rem .7rem;
  border-radius:.55rem;
  background:#ef4444;           /* red-500 */
  border:1px solid #ef4444;
  color:#fff;
}
.btn-reject:hover:not(:disabled){ background:#dc2626; border-color:#dc2626 }

/* Disabled (both queue and EOI tables) */
.btn-approve:disabled,
.btn-reject:disabled,
#adm-eoi-table td:last-child button:disabled{
  background:#1f2937 !important; /* slate-800 */
  border-color:#374151 !important;
  color:rgba(255,255,255,.75) !important;
  box-shadow:none; cursor:not-allowed; opacity:1;
}

/* EOI approvals table – style by position because buttons have no classes */
#adm-eoi-table td:last-child button:first-child{
  background:#10b981; border-color:#10b981; color:#fff;   /* Approve */
}
#adm-eoi-table td:last-child button:first-child:hover:not(:disabled){
  background:#0ea371; border-color:#0ea371;
}
#adm-eoi-table td:last-child button:last-child{
  background:#ef4444; border-color:#ef4444; color:#fff;   /* Decline */
}
#adm-eoi-table td:last-child button:last-child:hover:not(:disabled){
  background:#dc2626; border-color:#dc2626;
}

.topbar button.active{box-shadow:0 0 0 2px var(--ring)}


/* ===== CPFR v6.9.0: Full-screen CQU background + transparent overlay + hide WP chrome ===== */
/* body.cpfr-fullscreen{
  background: url('../assets/bg.png') center/cover fixed no-repeat !important;
  color:#fff;
} */
/* Hide WordPress chrome entirely on this page */
body.cpfr-fullscreen #wpadminbar,
body.cpfr-fullscreen header,
body.cpfr-fullscreen .site-header,
body.cpfr-fullscreen .site-footer,
body.cpfr-fullscreen footer,
body.cpfr-fullscreen .entry-header,
body.cpfr-fullscreen .page-title,
body.cpfr-fullscreen .breadcrumbs { display:none !important }

/* One transparent overlay across whole page for readability */
body.cpfr-fullscreen::before{
  content:"";
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  -webkit-
  
  z-index:0;
}
/* Put app content above overlay */
body.cpfr-fullscreen #cpfr-root,
body.cpfr-fullscreen #cpfr-app{ position:relative; z-index:1; }

/* Make all text readable */
body.cpfr-fullscreen, 
body.cpfr-fullscreen p, 
body.cpfr-fullscreen li, 
body.cpfr-fullscreen td, 
body.cpfr-fullscreen th {
  color:#0b1220;
 
}

/* Inputs/buttons/tables tuned for overlay */
body.cpfr-fullscreen .input, 
body.cpfr-fullscreen select, 
body.cpfr-fullscreen textarea{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.30);
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
}
body.cpfr-fullscreen .btn{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.50);
  color:#fff;
  padding:8px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
body.cpfr-fullscreen .btn:hover{ background: rgba(0,0,0,.66) }

body.cpfr-fullscreen .table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px; overflow:hidden;
  background: rgba(0,0,0,.18);
}
body.cpfr-fullscreen .table thead th{ background: rgba(0,0,0,.55); padding:12px; text-align:left; position:sticky; top:0; z-index:2 }
body.cpfr-fullscreen .table tbody td{ padding:12px; border-top:1px solid rgba(255,255,255,.20) }
body.cpfr-fullscreen .table tbody tr:nth-child(even){ background: rgba(255,255,255,.06) }
body.cpfr-fullscreen .table tbody tr:hover{ background: rgba(255,255,255,.12) }


/* === Clear HD Background Enforcer (v6.9.2) === */
html, body {
  min-height: 100%;
}
body {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Remove any inherited blur on main containers */
#cpf-root, .cpf-root, .container, .page, .wrap, .site, .app, .overlay, .panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  background-color: transparent !important;
}
/* If a background overlay layer exists, neutralize heavy opacity */
.bg-overlay, .background-overlay, .shade, .dim, .veil {
  background: transparent !important;
  opacity: 1 !important;
}
/* Make background cover the viewport when set on body or root */
body, #cpf-root, .cpf-root {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}



/* Hide WP chrome inside plugin route without affecting dashboard */
body.cpf-override .site-header,
body.cpf-override .site-footer,
body.cpf-override #wpadminbar,
body.cpf-override .entry-header,
body.cpf-override .entry-footer,
body.cpf-override .site-branding,
body.cpf-override .page-header {
  display: none !important;
}

body.cpf-override {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: -10% !important;
}



/* === Full-Background Layout Overrides (v6.9.3) === */
html, body { height: 100%; }

/* Remove all panel/card/section chrome so content sits on the background */
.card,
.panel,
.section,
.wrapper,
.box,
.block,
.widget,
.cpf-panel,
.cpf-card,
.cpf-section,
.cpf-wrapper,
.container-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make main containers span the full page width */
.container, .cpf-container, .page, .wrap, .site, .content, .app {
  max-width: none !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Transparent tables so rows appear directly over the background */
table, thead, tbody, tr, th, td {
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.25) !important; /* keep faint separators for readability */
}

/* Keep inputs readable but minimal chrome */
input, select, textarea {
  background: rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* Buttons float cleanly on the background */
button, .btn, .button {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

/* Remove any remaining overlay veils */
.bg-overlay, .background-overlay, .shade, .dim, .veil, .overlay {
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Ensure WP chrome stays hidden on plugin pages */
body.cpf-override .site-header,
body.cpf-override .site-footer,
body.cpf-override #wpadminbar,
body.cpf-override .entry-header,
body.cpf-override .entry-footer,
body.cpf-override .site-branding,
body.cpf-override .page-header {
  display: none !important;
}

/* =========================================================
   Light Theme Overrides (paste at end of your CSS)
   ========================================================= */

/* 1) Light palette */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;         /* slate-900 */
  --muted:#475569;        /* slate-600 */
  --primary:#2563eb;      /* blue-600 */
  --success:#16a34a;      /* green-600 */
  --danger:#dc2626;       /* red-600 */
  --ghost:#e5e7eb;        /* slate-200 */
  --ring:#60a5fa;         /* focus ring */
}

/* 2) Reset the forced-white text from earlier rules */
body, .cpfr-wrapper, .login-pane,
.cpfr-wrapper *, .login-pane * {
  color: var(--text) !important;
  text-shadow: none !important;
}

/* 3) Page base */
html, body { height: 100%; }
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4) Cards & layout */
.card{
  background: var(--card) !important;
  border: 1px solid #e5e7eb !important;   /* light border */
  border-radius: 12px !important;
  padding: 1rem !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.06) !important; /* subtle */
  margin: .75rem 0 !important;
}

/* 5) Inputs & controls */
input, select, textarea{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
input::placeholder, textarea::placeholder{ color:#94a3b8 !important; }
input:focus, select:focus, textarea:focus, button:focus{
  outline: 3px solid var(--ring) !important;
  outline-offset: 2px !important;
}

/* 6) Buttons */
button{
  background: #f8fafc !important;        /* light */
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: .6rem 1rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.06) !important;
}
button:hover:not([disabled]){ filter:none !important; background:#eef2f7 !important; color: #0f172a !important; }
button:active:not([disabled]){ transform: translateY(1px) !important; }

button.primary{ background: var(--primary) !important; border-color:#1d4ed8 !important; color:#fff !important; }
button.success{ background: var(--success) !important; border-color:#16a34a !important; color:#fff !important; }
button.ghost{   background:#ffffff !important; color:#0f172a !important; border-color:#e5e7eb !important; }

.actions .icon{ background: var(--primary) !important; border-color:#1d4ed8 !important; color:#fff !important; }
.actions .icon[data-act="edit"]{
  background:#f8fafc !important; border:1px solid #e5e7eb !important; color:#0f172a !important;
}
.actions .icon.danger, .actions .icon[data-act="withdraw"]{
  background: var(--danger) !important; border-color:#b91c1c !important; color:#fff !important;
}

/* 7) Links & muted text */
a{ color:#1d4ed8 !important; text-decoration:none; }
a:hover{ text-decoration:underline; }
.muted{ color: var(--muted) !important; }

/* 8) Tables */
.table{
  width:100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #ffffff !important;
  box-shadow: 0 1px 0 #f1f5f9 inset;  /* hairline */
}
.table thead th{
  background:#f8fafc !important;
  color:#0f172a !important;
  font-weight:700 !important;
  border-bottom:1px solid #e5e7eb !important;
  padding:12px !important;
}
.table tbody td{
  padding:12px !important;
  border-top:1px solid #e5e7eb !important;
}
.table tbody tr:hover td{ background:#f1f5f9 !important; }
.col-serial,.col-id{ width:64px; text-align:center; white-space:nowrap; }

/* 9) Badges (soft tints on light bg) */
.badge{
  display:inline-block;
  padding:.22rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
}
.badge[data-status="DRAFT"]{             background:#f1f5f9;   color:#334155;   border-color:#e2e8f0; }
.badge[data-status="PENDING"]{           background:#dbeafe;   color:#1d4ed8;   border-color:#bfdbfe; }
.badge[data-status="APPROVED"]{          background:#dcfce7;   color:#15803d;   border-color:#bbf7d0; }
.badge[data-status="ACCEPTED"]{          background:#dcfce7;   color:#15803d;   border-color:#bbf7d0; }
.badge[data-status="REJECTED"]{          background:#fee2e2;   color:#b91c1c;   border-color:#fecaca; }
.badge[data-status="WITHDRAWN"]{         background:#f1f5f9;   color:#475569;   border-color:#e2e8f0; }

/* 10) Toasts */
.toast{
  background:#111827; color:#e5e7eb; border:1px solid #1f2937;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}

/* 11) Fullscreen / WP chrome overrides – keep content readable on light theme */
body.cpfr-fullscreen::before{
  content:""; position:fixed; inset:0;
  background: rgba(255,255,255,.0) !important; /* remove dark veil */
}
body.cpfr-fullscreen #cpfr-root, body.cpfr-fullscreen #cpfr-app{
  position:relative; z-index:1;
}
body.cpf-override .site-header,
body.cpf-override .site-footer,
body.cpf-override #wpadminbar,
body.cpf-override .entry-header,
body.cpf-override .entry-footer,
body.cpf-override .site-branding,
body.cpf-override .page-header{
  display:none !important;
}

/* 12) Small screens */
@media (max-width:640px){
  .table thead th, .table tbody td{ font-size:.95rem !important; }
  button.big{ font-size:15px !important; }
}

/* 13) Disabled buttons (consistent on light) */
.btn-approve:disabled, .btn-reject:disabled,
#adm-eoi-table td:last-child button:disabled{
  background:#f1f5f9 !important;
  border-color:#e5e7eb !important;
  color:#94a3b8 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}

/* 14) EOI table inline action colors (keep but on light bg) */
#adm-eoi-table td:last-child button:first-child{
  background:#16a34a !important; border-color:#16a34a !important; color:#fff !important;
}
#adm-eoi-table td:last-child button:first-child:hover:not(:disabled){
  background:#0f9a40 !important; border-color:#0f9a40 !important;
}
#adm-eoi-table td:last-child button:last-child{
  background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important;
}
#adm-eoi-table td:last-child button:last-child:hover:not(:disabled){
  background:#c81e1e !important; border-color:#c81e1e !important;
}

#panel-login{
  margin-top: 10% !important;
}
/* ===============================
   Auth Layout (Two-Panel Design)
   =============================== */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}

.auth-left {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: left;
  color: #fff;
  background-image: url('./bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  overflow: hidden;
}

/* Add a soft grey overlay for readability */
.auth-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* dark grey shade overlay */
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Ensure text sits above the overlay */
.auth-left h1,
.auth-left p,
.auth-illustration {
  position: relative;
  z-index: 1;
  color: #fff !important;
}
.auth-left h1{
font-style: bold !important;
}

/* Optional: soften image appearance */
.auth-left .auth-illustration {
  opacity: 0.85;
}

.auth-right {
  flex: 1;
  padding: 2.5rem;
  background: #ffffff;
  border-left: none !important;
}

.auth-right h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-right .row,
.auth-right .grid {
  margin-bottom: 1rem;
}

.auth-right button.big {
  width: 100%;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .auth-container {
    flex-direction: column;
    box-shadow: none;
    border-radius: 0;
  }
  .auth-left {
    border-radius: 0;
    text-align: center;
  }
  .auth-right {
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
}