/* HOMERC Retro Future Theme · V2.4.2
   Palette: Cyan #00CED1 · Beige #FAF0E6 · Orange #FF6F00 · Purple #A020F0
   Mode is browser-only (localStorage), no database changes. */
:root{
  --hf-cyan:#00CED1;
  --hf-beige:#FAF0E6;
  --hf-orange:#FF6F00;
  --hf-purple:#A020F0;
  --hf-ink:#141824;
  --hf-muted:#647078;
  --hf-line:rgba(20,24,36,.09);
  --hf-card:#fff;
  --hf-radius:18px;
  --hf-shadow:0 12px 34px rgba(40,48,62,.08);
}
html,body{min-height:100%}
body{color:var(--hf-ink);transition:background .25s ease;color .2s ease}

/* ---------- theme selector ---------- */
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.homerc-theme-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid rgba(20,24,36,.09);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 6px 18px rgba(30,37,48,.07);backdrop-filter:blur(10px)}
.homerc-theme-switch button{appearance:none;border:0;background:transparent;color:#657179;font:inherit;font-size:11px;font-weight:800;line-height:1;padding:8px 11px;border-radius:999px;cursor:pointer;transition:.18s ease;white-space:nowrap}
.homerc-theme-switch button:hover{transform:translateY(-1px);color:#111827}
html[data-homerc-theme="white"] .homerc-theme-switch [data-theme-btn="white"],
html[data-homerc-theme="color"] .homerc-theme-switch [data-theme-btn="color"]{background:var(--hf-cyan);color:#fff;box-shadow:0 5px 14px rgba(0,206,209,.28)}
.mobile-theme-switch{display:none}

/* ---------- common retro future surface ---------- */
.app{position:relative;isolation:isolate}
.main{position:relative;min-height:100vh;overflow-x:hidden;background:transparent!important}
.main>*{position:relative;z-index:1}
.main::before{content:"";position:fixed;inset:0 0 0 222px;z-index:0;pointer-events:none;transition:opacity .3s ease,background .3s ease}

/* White background mode */
html[data-homerc-theme="white"] body{background:#f8fafb}
html[data-homerc-theme="white"] .main::before{background:linear-gradient(180deg,#fff 0%,#f8fafb 58%,#fff 100%);opacity:1}

/* Color background mode: colorful but readable */
html[data-homerc-theme="color"] body{background:var(--hf-beige)}
html[data-homerc-theme="color"] .main::before{
  opacity:1;
  background:
    radial-gradient(circle at 93% 7%,rgba(160,32,240,.22) 0 8%,transparent 25%),
    radial-gradient(circle at 73% 5%,rgba(255,111,0,.22) 0 7%,transparent 23%),
    radial-gradient(circle at 25% 0%,rgba(0,206,209,.26) 0 12%,transparent 34%),
    radial-gradient(circle at 5% 88%,rgba(0,206,209,.16) 0 12%,transparent 31%),
    linear-gradient(135deg,#fdf9f3 0%,#fff 44%,#fff4e8 72%,#f6ecff 100%);
}

/* ---------- sidebar: clean white/beige in both modes ---------- */
.sidebar{background:rgba(255,252,247,.96)!important;border-right:1px solid var(--hf-line)!important;box-shadow:8px 0 28px rgba(39,45,54,.04)!important;color:var(--hf-ink)!important;backdrop-filter:blur(18px)}
.homerc-sidebar-brand{border-bottom:1px solid rgba(20,24,36,.06);margin-bottom:4px}
.homerc-logo-box{background:#fff!important;border:1px solid rgba(20,24,36,.08);box-shadow:0 7px 22px rgba(30,40,50,.06)}
.homerc-sidebar-copy b{color:#111827!important}.homerc-sidebar-copy small{color:#6b747a!important}
.nav .nav-title{color:#17979b!important;letter-spacing:.14em;font-weight:800}
.nav a{color:#22313a!important;border-radius:13px!important;transition:.18s ease!important}
.nav a:hover{background:rgba(0,206,209,.10)!important;transform:translateX(2px)}
.nav a.active{background:linear-gradient(135deg,#00bfc3,#19d8db)!important;color:#fff!important;box-shadow:0 9px 20px rgba(0,206,209,.20)!important}

/* ---------- header ---------- */
.topbar{background:rgba(255,255,255,.74)!important;border:1px solid rgba(20,24,36,.06)!important;border-radius:18px!important;padding:12px 15px!important;margin-bottom:14px!important;backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(28,36,46,.05)!important}
.topbar h1{font-weight:900!important;letter-spacing:-.035em}
.user-chip{background:#fff!important;border:1px solid rgba(20,24,36,.08)!important;color:#26333a!important;box-shadow:none!important}

/* ---------- cards / panels ---------- */
.card,.metric,.pd-section,.mh-panel,.req-detail-card,.po-create-card,.uat-step,.table-wrap,.module-head,.outlet-mobile-hero,.track-card-v223{
  border:1px solid rgba(20,24,36,.075)!important;
  border-radius:var(--hf-radius)!important;
  box-shadow:var(--hf-shadow)!important;
}
html[data-homerc-theme="white"] :is(.card,.metric,.pd-section,.mh-panel,.req-detail-card,.po-create-card,.uat-step,.table-wrap,.module-head){background:rgba(255,255,255,.96)!important}
html[data-homerc-theme="color"] :is(.card,.metric,.pd-section,.mh-panel,.req-detail-card,.po-create-card,.uat-step,.table-wrap,.module-head){background:rgba(255,255,255,.88)!important;backdrop-filter:blur(12px)}

/* Accent KPI cards without sacrificing readability */
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+1),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+1){background:linear-gradient(135deg,#00c9cc,#18dce0)!important;color:#fff!important;border-color:transparent!important}
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+2),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+2){background:linear-gradient(135deg,#fff9f2,#FAF0E6)!important}
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+3),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+3){background:linear-gradient(135deg,#ff7d1d,#FF6F00)!important;color:#fff!important;border-color:transparent!important}
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+4),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+4){background:linear-gradient(135deg,#b53cff,#A020F0)!important;color:#fff!important;border-color:transparent!important}
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+1) :is(.label,.help,.muted),
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+3) :is(.label,.help,.muted),
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+4) :is(.label,.help,.muted),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+1) :is(.label,.help,.muted),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+3) :is(.label,.help,.muted),
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+4) :is(.label,.help,.muted){color:rgba(255,255,255,.82)!important}
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+1) .value,
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+3) .value,
html[data-homerc-theme="color"] .compact-kpis>.metric:nth-child(4n+4) .value,
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+1) .value,
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+3) .value,
html[data-homerc-theme="color"] .grid-4>.metric:nth-child(4n+4) .value{color:#fff!important}

/* ---------- buttons / inputs ---------- */
.btn,.btn-primary{border-radius:12px!important}
.btn-primary{background:linear-gradient(135deg,#00bfc3,#00CED1)!important;border-color:transparent!important;box-shadow:0 7px 18px rgba(0,206,209,.20)!important}
.btn-primary:hover{filter:brightness(.96);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#ff7d1d,#FF6F00)!important;border-color:transparent!important}
input,select,textarea{border-radius:12px!important;border-color:rgba(30,45,55,.14)!important;background:rgba(255,255,255,.92)!important;transition:.18s ease!important}
input:focus,select:focus,textarea:focus{border-color:var(--hf-cyan)!important;box-shadow:0 0 0 3px rgba(0,206,209,.12)!important;outline:none!important}

/* ---------- tables / badges ---------- */
table thead th{background:rgba(250,240,230,.66)!important;color:#52606a!important}
table tbody tr:hover td{background:rgba(0,206,209,.035)!important}
.badge.info{background:rgba(0,206,209,.14)!important;color:#087b7e!important}
.badge.warn,.badge.warning{background:rgba(255,111,0,.13)!important;color:#b84f00!important}
.badge.danger{background:rgba(160,32,240,.11)!important;color:#7d17bf!important}
.badge.ok,.badge.success{background:rgba(0,178,120,.12)!important;color:#057e58!important}

/* ---------- subtle retro markers ---------- */
.eyebrow,.mh-kicker{color:#118f93!important;letter-spacing:.14em!important}
.section-head h2,.pd-section-head h2{letter-spacing:-.025em}
html[data-homerc-theme="color"] .pd-section:nth-of-type(3n+1){box-shadow:inset 4px 0 0 rgba(0,206,209,.72),var(--hf-shadow)!important}
html[data-homerc-theme="color"] .pd-section:nth-of-type(3n+2){box-shadow:inset 4px 0 0 rgba(255,111,0,.72),var(--hf-shadow)!important}
html[data-homerc-theme="color"] .pd-section:nth-of-type(3n+3){box-shadow:inset 4px 0 0 rgba(160,32,240,.72),var(--hf-shadow)!important}

/* ---------- login ---------- */
.login-wrap{background:linear-gradient(135deg,#fff 0%,#FAF0E6 55%,rgba(0,206,209,.13) 100%)!important}
.login-card{border-radius:24px!important;border:1px solid rgba(20,24,36,.08)!important;box-shadow:0 25px 70px rgba(32,44,60,.13)!important}
.homerc-login-logo{border-radius:20px!important}

/* ---------- mobile ---------- */
@media(max-width:980px){
  .main::before{inset:0!important}
  .mobile-theme-switch{display:inline-flex}
  .topbar-tools .homerc-theme-switch{display:none}
  .mobile-head{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,24,36,.07)!important}
  .mobile-theme-switch{padding:3px;margin-left:auto}
  .mobile-theme-switch button{padding:7px 9px;font-size:10px}
  html[data-homerc-theme="color"] .outlet-mobile-shell{background:transparent!important}
}
@media(max-width:600px){
  :root{--hf-radius:16px}
  html[data-homerc-theme="color"] .main::before{background:radial-gradient(circle at 90% 3%,rgba(160,32,240,.15),transparent 28%),radial-gradient(circle at 10% 10%,rgba(0,206,209,.18),transparent 34%),linear-gradient(180deg,#fffaf4,#fff 45%,#faf6ff)}
  .mobile-head{gap:7px!important}
  .homerc-mobile-brand{flex:1}
  .mobile-theme-switch{flex:0 0 auto}
  .mobile-theme-switch+ .btn{flex:0 0 auto}
}

/* Accessibility: animation reduction */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}