/* static/css/console.css — Ukubona shared look & feel */

/* --- RESET ------------------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box }

/* --- TOKENS ------------------------------------------------------ */
:root{
  --primary:#0066cc; --primary-dark:#004499; --secondary:#00d4aa;
  --accent:#ff6b35; --danger:#ff4757; --warning:#ffa502; --success:#2ed573;
  --dark:#1a1a2e; --darker:#16213e; --light:#f8fafc; --dim:#e2e8f0;
  --gray:#64748b; --gray-light:#e2e8f0;
  --glass:rgba(255,255,255,.1);
  --shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,.25);

  /* islands */
  --island-a: rgba(81,160,106,.18);
  --island-b: rgba(143,232,255,.12);
  --island-c: rgba(229,107,106,.10);
}
html[data-theme='light']{
  --dark:#f8fafc; --darker:#e2e8f0; --gray:#334155; --gray-light:#64748b;
  --glass:rgba(0,0,0,.1);
}

/* --- BODY / WRAP ------------------------------------------------- */
html,body{height:100%}
body{
  color:var(--gray-light);
  font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Inter", sans-serif;
  background:linear-gradient(135deg,var(--dark) 0%,var(--darker) 100%);
  min-height:100vh; overflow-x:hidden;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- HEADER / NAV ------------------------------------------------ */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:blur(20px);
  background:rgba(26,26,46,.8);
  border-bottom:1px solid var(--glass);
  padding:1rem 2rem;
}
html[data-theme='light'] .header{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.1);
}
.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}

/* HEADER LOGO
   IMPORTANT: scope to #logo so we don't touch Plotly’s .logo inside charts.
   Keep ONE animation so rotation phase persists across theme toggles.
   No background / halo / ring. */
#logo{
  width:140px; height:140px; object-fit:contain; transform-origin:center;
  animation:ukb-spin 60s linear infinite;
}
/* Do NOT style .logo globally — Plotly uses .logo for its watermark */
.js-plotly-plot .logo{width:auto;height:auto;opacity:.6;pointer-events:none}

@keyframes ukb-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* header controls */
.top-right{display:flex;align-items:center;gap:1rem}
#toggle-theme{cursor:pointer;background:transparent;border:none;font-size:1.5rem;color:var(--gray-light)}
.menu-icon{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:32px;height:32px;cursor:pointer;background:transparent;border:none}
.menu-icon div{width:8px;height:8px;border-radius:1px}
html[data-theme='light'] .menu-icon div{background-color:#000}
html[data-theme='dark']  .menu-icon div{background-color:#fff}

/* --- APP GRID (overlay) ----------------------------------------- */
#gridMenu{display:none; position:fixed; inset:0; z-index:60;
  background:rgba(8,10,12,.72); backdrop-filter:blur(6px);
  padding:32px 16px; overflow:auto}
#gridMenu.open{display:block;}
#gridMenu .app-grid-inner{max-width:980px; margin:40px auto; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
#gridMenu .app-grid-inner a{display:flex; align-items:center; justify-content:center; height:90px;
  border:1px solid rgba(255,255,255,.08); border-radius:14px; background:#0f1216;
  color:#fff; text-decoration:none; font-weight:600}
#gridMenu .app-grid-inner a:hover{filter:brightness(1.12)}
@media (max-width:640px){
  #gridMenu{padding:16px}
  #gridMenu .app-grid-inner{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* --- PAGE TITLES ------------------------------------------------ */
.page-title{
  font-size:3rem;font-weight:800;margin:0.5rem 0;
  background:linear-gradient(135deg,var(--light),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-subtitle{color:var(--gray);font-size:1.2rem;margin:0 0 2rem}
.main-content{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:2rem}

/* --- METRICS / SECTIONS / CARDS --------------------------------- */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}
.metric-card{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass);border-radius:1rem;padding:2rem;position:relative;overflow:hidden;transition:all .3s ease}
.metric-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);border-color:var(--secondary)}
.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.metric-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.metric-icon.personnel{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.metric-icon.tasks{background:linear-gradient(135deg,var(--secondary),#00a085)}
.metric-icon.alerts{background:linear-gradient(135deg,var(--danger),#e03142)}
.metric-icon.events{background:linear-gradient(135deg,var(--warning),#e67e22)}
.metric-value{font-size:2.5rem;font-weight:800;color:var(--light);line-height:1}
.metric-label{color:var(--gray);font-size:.9rem;margin-top:.5rem}
.metric-trend{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.85rem}
.trend-up{color:var(--success)} .trend-down{color:var(--danger)}

.data-section{
  background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--glass);border-radius:1rem;
  padding:2rem;margin:2rem 0;
}
.section-title,.chart-title{
  font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:var(--light);
  display:flex;align-items:center;gap:.75rem
}
.stat-card{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass);border-radius:1rem;padding:2rem;position:relative;overflow:hidden;transition:all .3s ease}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);border-color:var(--secondary)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.stat-value{font-size:2.5rem;font-weight:800;color:var(--light);line-height:1}
.stat-label{color:var(--gray);font-size:.9rem;margin-top:.5rem}

/* --- TABLES ------------------------------------------------------ */
table{border-collapse:collapse;width:100%}
thead th{background:var(--glass);color:var(--light);padding:1rem;text-align:left;font-weight:700;font-size:.9rem;border-bottom:1px solid var(--glass)}
td{padding:1rem;border-bottom:1px solid #2a2d31;color:var(--gray-light);font-size:.9rem}
html[data-theme='light'] td{border-bottom-color:rgba(0,0,0,.12)}
tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
tbody tr:hover{background:rgba(255,255,255,.04)}

/* --- BADGES (generic) ------------------------------------------- */
.status-badge{padding:.25rem .75rem;border-radius:2rem;font-size:.75rem;font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;gap:.35rem;letter-spacing:.3px}
.status-active{background:rgba(46,213,115,.2);color:#2ed573}
.status-pending{background:rgba(255,165,2,.2);color:#ffa502}
.status-completed{background:rgba(0,212,170,.2);color:#00d4aa}
.status-cancelled{background:rgba(255,71,87,.2);color:#ff4757}
.red-flag{color:#ff4757;font-weight:600}

/* --- FLOATING ISLANDS + PARTICLES -------------------------------- */
.bg-islands{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 30% at 10% 15%, var(--island-a), transparent 60%),
    radial-gradient(35% 25% at 85% 20%, var(--island-b), transparent 60%),
    radial-gradient(50% 40% at 50% 80%, var(--island-c), transparent 60%);
}
.bg-islands::before,.bg-islands::after{
  content:""; position:absolute; width:120vmax; height:120vmax; top:-10vmax; left:-10vmax;
  background:
    radial-gradient(45% 35% at 30% 40%, var(--island-b), transparent 60%),
    radial-gradient(35% 45% at 70% 60%, var(--island-a), transparent 60%);
  mix-blend-mode:screen; opacity:.35; animation:island-drift 60s linear infinite;
}
.bg-islands::after{animation-duration:90s; opacity:.25}
@keyframes island-drift{to{transform:rotate(360deg) translateY(2%)}}

.bg-particles{position:fixed; inset:0; pointer-events:none; z-index:0}
.particle{position:absolute; width:2px; height:2px; background:var(--secondary, #51a06a);
  border-radius:50%; opacity:.35; animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}

/* --- CHART “GLASS ISLANDS” -------------------------------------- */
.chart-section{position:relative; background:var(--glass, rgba(255,255,255,.06));
  backdrop-filter:blur(20px); border:1px solid var(--glass, rgba(255,255,255,.06));
  border-radius:16px; overflow:hidden}
.chart-section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary, #0066cc), var(--secondary, #00d4aa));
  opacity:.9
}

/* --- DAG / TEMPORAL-SPATIAL FRAMEWORK ---------------------------- */
.dag-section{position:relative}
.dag-container{
  position:relative; width:100%; max-width:800px; margin:2rem auto; aspect-ratio:1;
  border-radius:1rem;
  background:radial-gradient(circle at center, rgba(0,102,204,.1) 0%, transparent 70%);
  animation:pulseGlow 4s infinite ease-in-out;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 30px rgba(0,102,204,.2)}
  50%{box-shadow:0 0 60px rgba(0,102,204,.3)}
}
.temporal-axis{
  position:absolute; left:50%; top:10%; height:80%; width:2px;
  background:linear-gradient(to bottom, var(--primary), var(--secondary));
  transform:translateX(-50%); opacity:.6
}
.temporal-labels{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:.8rem; opacity:.6; writing-mode:vertical-rl; text-orientation:mixed; color:var(--gray)
}

/* stages (nodes) */
.stage{
  position:absolute; width:140px; height:140px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; transition:all .4s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(10px); border:2px solid var(--glass);
  animation:float 6s ease-in-out infinite;
}
.stage:hover{transform:scale(1.1) translateZ(20px); box-shadow:var(--shadow); border-color:rgba(255,255,255,.3)}
.stage.active{transform:scale(1.15); z-index:10}
.stage-icon{font-size:2rem; margin-bottom:.5rem; filter:drop-shadow(0 0 10px currentColor)}
.stage-name{font-size:.9rem; font-weight:600; margin-bottom:.25rem; letter-spacing:.5px}
.stage-subtitle{font-size:.7rem; opacity:.8; font-weight:300}

/* stage placements + color auras */
.stage-random{top:15%; left:10%;
  background:radial-gradient(circle, rgba(255,107,107,.2), rgba(255,107,107,.1));
  color:var(--danger); animation-delay:0s}
.stage-weekly{top:30%; left:25%;
  background:radial-gradient(circle, rgba(0,212,170,.2), rgba(0,212,170,.1));
  color:var(--secondary); animation-delay:1s}
.stage-strategic{top:45%; left:15%;
  background:radial-gradient(circle, rgba(126,87,194,.2), rgba(126,87,194,.1));
  color:#7e57c2; animation-delay:2s}
.stage-operational{top:50%; left:50%;
  background:radial-gradient(circle, rgba(0,102,204,.2), rgba(0,102,204,.1));
  color:var(--primary); transform:translate(-50%,-50%); animation-delay:3s}
.stage-existential{top:70%; left:75%;
  background:radial-gradient(circle, rgba(240,147,251,.2), rgba(240,147,251,.1));
  color:#f093fb; animation-delay:4s}

/* flows */
.flow-line{position:absolute; background:linear-gradient(90deg, transparent, var(--secondary), transparent);
  height:2px; animation:flow 2s ease-in-out infinite; z-index:1}
@keyframes flow{0%{opacity:0;transform:scaleX(0)}50%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}
.flow-random-operational{top:25%; left:20%; width:25%; transform:rotate(35deg)}
.flow-weekly-operational{top:40%; left:35%; width:20%; transform:rotate(20deg)}
.flow-strategic-operational{top:47%; left:25%; width:20%; transform:rotate(5deg)}
.flow-operational-existential{top:60%; left:55%; width:25%; transform:rotate(20deg)}
.flow-existential-operational{top:65%; left:60%; width:20%; transform:rotate(-45deg);
  background:linear-gradient(90deg, transparent, rgba(240,147,251,.6), transparent)}

/* slide-out detail panel */
.detail-panel{
  position:fixed; top:0; right:-100%; width:100%; max-width:400px; height:100vh;
  background:rgba(26,26,46,.95); backdrop-filter:blur(20px);
  border-left:1px solid var(--glass); padding:2rem; z-index:1001;
  transition:right .5s cubic-bezier(.4,0,.2,1); overflow-y:auto
}
html[data-theme='light'] .detail-panel{background:rgba(255,255,255,.95); border-left:1px solid rgba(0,0,0,.1)}
.detail-panel.active{right:0}
.detail-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--glass)}
.detail-title{font-size:1.5rem; font-weight:600; display:flex; align-items:center; gap:.5rem}
.close-btn{background:none; border:none; color:var(--gray-light); font-size:1.5rem; cursor:pointer; padding:.5rem; border-radius:50%; transition:background .3s}
.close-btn:hover{background:var(--glass)}
.detail-section{margin-bottom:1.5rem}
.detail-section h3{font-size:1.1rem; margin-bottom:.5rem; color:var(--secondary)}
.detail-section p{line-height:1.6; color:var(--gray-light)}

/* --- CALENDAR / EVENTS BEAUTIFUL BADGES ------------------------- */
.priority-badge{padding:.25rem .6rem;border-radius:1rem;font-size:.72rem;font-weight:700;letter-spacing:.25px;display:inline-flex;align-items:center;gap:.25rem}
.priority-high{background:rgba(255,165,2,.18);color:#ffb84d;border:1px solid rgba(255,165,2,.28)}
.priority-normal{background:rgba(0,212,170,.18);color:#73e8cf;border:1px solid rgba(0,212,170,.28)}
.priority-low{background:rgba(0,102,204,.18);color:#6fb8ff;border:1px solid rgba(0,102,204,.28)}

.status-badge.status-completed{background:rgba(0,212,170,.22);color:#00d4aa;border:1px solid rgba(0,212,170,.32)}
.status-badge.status-pending{background:rgba(255,165,2,.20);color:#ffa502;border:1px solid rgba(255,165,2,.30)}
.status-badge.status-active{background:rgba(46,213,115,.20);color:#2ed573;border:1px solid rgba(46,213,115,.30)}
.status-badge.status-cancelled{background:rgba(255,71,87,.20);color:#ff4757;border:1px solid rgba(255,71,87,.30)}

.loc-chip{padding:.2rem .55rem;border-radius:1rem;font-size:.72rem;font-weight:600;display:inline-block;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
html[data-theme='light'] .loc-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04)}
.loc-virtual{color:#8adfff}
.loc-zoom{color:#bda6ff}
.loc-board{color:#ffd480}

/* --- PERSONNEL COMPONENTS --------------------------------------- */
.personnel-stats .stat-value{white-space:nowrap}
.personnel-name{display:flex;align-items:center;gap:.75rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.muted-id{font-size:.8rem;color:var(--gray)}
.role-badge{padding:.25rem .75rem;border-radius:2rem;font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}
.role-executive{background:rgba(240,147,251,.2);color:#f093fb}
.role-manager{background:rgba(126,87,194,.2);color:#7e57c2}
.role-developer{background:rgba(0,212,170,.2);color:var(--secondary)}
.role-analyst{background:rgba(255,165,2,.2);color:var(--warning)}
.role-coordinator{background:rgba(0,102,204,.2);color:var(--primary)}
.access-level{padding:.25rem .75rem;border-radius:2rem;font-size:.75rem;font-weight:600;white-space:nowrap}
.access-level-1{background:rgba(255,71,87,.2);color:var(--danger)}
.access-level-2{background:rgba(255,165,2,.2);color:var(--warning)}
.access-level-3{background:rgba(0,212,170,.2);color:var(--secondary)}
.access-level-4{background:rgba(0,102,204,.2);color:var(--primary)}
.access-level-5{background:rgba(240,147,251,.2);color:#f093fb}
.access-level-6{background:rgba(143,232,255,.2);color:#8fe8ff}
.access-level-7{background:rgba(81,160,106,.2);color:#51a06a}
.access-level-8{background:rgba(255,215,0,.2);color:#ffd700}
.access-level-9{background:rgba(255,140,0,.2);color:#ff8c00}
.access-level-10{background:rgba(255,99,71,.2);color:#ff6347}

/* --- RESPONSIVE -------------------------------------------------- */
@media (max-width:768px){
  .main-content{padding:1rem}
  .page-title{font-size:2rem}
  .dag-container{max-width:100%; height:60vh}
  .stage{width:100px; height:100px}
  .stage-icon{font-size:1.5rem}
  .stage-name{font-size:.8rem}
  .stage-subtitle{font-size:.6rem}
  .detail-panel{width:100vw}
}

/* add near end of static/css/console.css */
.pill { display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#0f1528; color:var(--ink); font-size:13px; text-decoration:none }

/* Dashboard layout */
.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; /* main + sidebar */
  gap: 18px;
}
@media (max-width: 980px) {
  .layout-grid { grid-template-columns: 1fr; }
  .side-col { order: -1; } /* sidebar first on mobile (optional) */
}

.side-col .island {
  position: sticky;
  top: 18px;
}

.card { background: var(--panel); border:1px solid var(--line); border-radius:12px; }

/* ===== App Grid ===== */
.app-grid[hidden] { display: none !important; }
.app-grid {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 10, 20, .70); /* dim backdrop */
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.app-grid-inner {
  width: min(900px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.app-tile {
  position: relative;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px 12px 12px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 560;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.app-tile:hover { transform: translateY(-1px); border-color: #3a4764; background: rgba(255,255,255,.05); }

/* Emoji bubble pulled from data-emoji */
.app-tile::before {
  content: attr(data-emoji);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-size: 18px;
}

/* Accent variants (optional) */
.app-tile.accent-green { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.app-tile.accent-blue  { background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.35); }