/* Operations Atelier — FunkyCore stg2 */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg-canvas:#f3eee2;
  --bg-paper:#fbf7ec;
  --bg-elevated:#ffffff;
  --bg-inset:#e8e1cf;
  --ink-primary:#1c1a14;
  --ink-secondary:#4a4538;
  --ink-muted:#7a7363;
  --ink-faint:#a89e88;
  --rule:#d4cbb3;
  --rule-soft:#e2dac3;
  --accent:#b8541a;
  --accent-soft:#f0d9b8;
  --accent-ink:#fff5e6;
  --ok:#3b6e3b;
  --warn:#a87608;
  --err:#a83232;
  --info:#2c6e8f;
  --shadow-card:0 1px 0 rgba(28,26,20,.04),0 2px 8px rgba(28,26,20,.06);
  --shadow-elev:0 2px 0 rgba(28,26,20,.05),0 8px 24px rgba(28,26,20,.10);
  --grid-line:rgba(28,26,20,.045);
  --tint:color-mix(in srgb,var(--accent) 12%,var(--bg-paper));
  --tint-strong:color-mix(in srgb,var(--accent) 28%,var(--rule));
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

html[data-theme="dark"]{
  --bg-canvas:#0f1318;
  --bg-paper:#161b22;
  --bg-elevated:#1c232c;
  --bg-inset:#0a0d12;
  --ink-primary:#e8e4d8;
  --ink-secondary:#b8b0a0;
  --ink-muted:#7d7669;
  --ink-faint:#4a453c;
  --rule:#2a313c;
  --rule-soft:#20262f;
  --accent:#e8924c;
  --accent-soft:#3a2616;
  --accent-ink:#1a0d04;
  --ok:#6bb66b;
  --warn:#e0b340;
  --err:#d8554f;
  --info:#4ea4c4;
  --shadow-card:0 1px 0 rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.4);
  --shadow-elev:0 2px 0 rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.5);
  --grid-line:rgba(255,255,255,.03);
}

html{
  background:var(--bg-canvas);
  color:var(--ink-primary);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;
  scrollbar-color:var(--rule) transparent;
}

::selection{background:var(--accent);color:var(--accent-ink)}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:36px;
}

/* ===== Command Header ===== */
#command-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 20px;
  background:var(--bg-paper);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.02em;
}

#command-header::before{
  content:"◉";
  color:var(--accent);
  font-size:9px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

#app-logo{
  height:32px;width:32px;
  object-fit:contain;
  border-radius:4px;
  background:var(--bg-elevated);
  padding:2px;
  border:1px solid var(--rule);
}

#page-title{
  font-family:var(--serif);
  font-size:19px;
  font-weight:700;
  margin:0;
  padding-right:14px;
  border-right:1px solid var(--rule);
  letter-spacing:.005em;
}

#live-clock{
  margin-left:auto;
  color:var(--ink-secondary);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  padding:5px 11px;
  background:var(--bg-inset);
  border:1px solid var(--rule);
  border-radius:3px;
  letter-spacing:.04em;
}

#live-clock::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ok);
  margin-right:8px;
  vertical-align:1px;
  box-shadow:0 0 6px color-mix(in srgb,var(--ok) 60%,transparent);
}

#settings-btn{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:6px 14px;
  background:transparent;
  color:var(--ink-secondary);
  border:1px solid var(--rule);
  border-radius:3px;
  cursor:pointer;
  transition:all .15s ease;
  font-weight:600;
}
#settings-btn::before{content:"⚙";margin-right:6px;font-size:12px}
#settings-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#settings-btn:active{transform:translateY(1px)}

/* ===== Main Nav ===== */
#main-nav{
  position:sticky;
  top:53px;
  z-index:99;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  padding:8px 20px;
  background:var(--bg-paper);
  border-bottom:1px solid var(--rule);
}

#main-nav a{
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.07em;
  text-decoration:none;
  color:var(--ink-muted);
  padding:6px 11px;
  border:1px solid transparent;
  border-radius:3px;
  transition:all .15s ease;
  position:relative;
  font-weight:500;
}
#main-nav a:hover{
  color:var(--ink-primary);
  background:var(--bg-elevated);
  border-color:var(--rule-soft);
}
#main-nav a.active{
  color:var(--accent-ink);
  background:var(--accent);
  border-color:var(--accent);
  font-weight:700;
}
#main-nav a.active::after{
  content:"";
  position:absolute;
  bottom:-9px;left:0;right:0;
  height:2px;
  background:var(--accent);
}

/* ===== Main Canvas ===== */
#app-main{
  flex:1;
  padding:28px 20px 24px;
  max-width:1400px;
  width:100%;
  margin:0 auto;
}

section[data-page]{display:none}
section[data-page].active{
  display:block;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

section[data-page] h2{
  font-family:var(--serif);
  font-size:24px;
  font-weight:700;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:baseline;
  gap:12px;
}
section[data-page] h2::before{
  content:"§";
  color:var(--accent);
  font-family:var(--mono);
  font-size:18px;
  font-weight:400;
}
section[data-page] h2::after{
  content:attr(data-page);
  margin-left:auto;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-faint);
  font-weight:400;
}

.page-content{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.page-content > p:empty + *,
.page-content:empty{display:none}

/* ===== Cards ===== */
.agent-card{
  background:var(--bg-paper);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:16px 16px 14px;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.agent-card::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:3px;height:100%;
  background:var(--accent);
  opacity:0;
  transition:opacity .15s ease;
  border-radius:4px 0 0 4px;
}
.agent-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-elev);
  border-color:var(--ink-faint);
}
.agent-card:hover::before{opacity:1}

.agent-card h3,
.agent-card .agent-card-title{
  font-family:var(--mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin:0;
  color:var(--ink-primary);
  font-weight:700;
}
.agent-card p{
  font-size:13px;
  color:var(--ink-secondary);
  margin:0;
  line-height:1.5;
}
.agent-card .agent-card-meta{
  margin-top:auto;
  padding-top:10px;
  border-top:1px dashed var(--rule-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-muted);
}

/* ===== Status Pills ===== */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  padding:3px 9px;
  border-radius:10px;
  background:var(--bg-inset);
  color:var(--ink-secondary);
  border:1px solid var(--rule);
  font-weight:700;
  white-space:nowrap;
}
.status-pill::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.status-pill.ok,.status-pill[data-status="ok"],.status-pill.active{
  color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,var(--bg-paper));
  border-color:color-mix(in srgb,var(--ok) 32%,var(--rule));
}
.status-pill.warn,.status-pill[data-status="warn"],.status-pill.pending{
  color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,var(--bg-paper));
  border-color:color-mix(in srgb,var(--warn) 32%,var(--rule));
}
.status-pill.err,.status-pill[data-status="err"],.status-pill.error,.status-pill.down{
  color:var(--err);
  background:color-mix(in srgb,var(--err) 14%,var(--bg-paper));
  border-color:color-mix(in srgb,var(--err) 32%,var(--rule));
}
.status-pill.idle,.status-pill[data-status="idle"],.status-pill.offline{
  color:var(--ink-muted);
}
.status-pill.info,.status-pill[data-status="info"]{
  color:var(--info);
  background:color-mix(in srgb,var(--info) 14%,var(--bg-paper));
  border-color:color-mix(in srgb,var(--info) 32%,var(--rule));
}
.status-pill .pill-dot::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor;
  margin-right:5px;
  vertical-align:1px;
}

/* Generic .active accent (sections, list items, etc.) */
.active:not(#main-nav a):not(.status-pill):not(.agent-card){
  outline:1px solid var(--accent);
  outline-offset:-1px;
}

/* ===== Forms ===== */
form,.form{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--bg-paper);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:18px;
  box-shadow:var(--shadow-card);
}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row > *{flex:1 1 200px}

label{
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-secondary);
  display:block;
  margin-bottom:5px;
  font-weight:600;
}
.field{display:flex;flex-direction:column}

input,textarea,select{
  width:100%;
  font-family:var(--sans);
  font-size:14px;
  padding:8px 11px;
  background:var(--bg-elevated);
  color:var(--ink-primary);
  border:1px solid var(--rule);
  border-radius:3px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input[type="checkbox"],input[type="radio"]{
  width:auto;height:auto;margin:0;
  accent-color:var(--accent);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
textarea{
  min-height:84px;
  resize:vertical;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
}
::placeholder{color:var(--ink-faint);font-style:italic}

button:not(#settings-btn){
  font-family:var(--mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  padding:8px 18px;
  background:var(--accent);
  color:var(--accent-ink);
  border:1px solid var(--accent);
  border-radius:3px;
  cursor:pointer;
  font-weight:700;
  transition:filter .15s ease,transform .1s ease;
  align-self:flex-start;
}
button:not(#settings-btn):hover{filter:brightness(1.08)}
button:not(#settings-btn):active{transform:translateY(1px)}
button.ghost,button.secondary{
  background:transparent;
  color:var(--ink-secondary);
  border-color:var(--rule);
}
button.ghost:hover,button.secondary:hover{
  background:var(--bg-elevated);
  color:var(--ink-primary);
  filter:none;
}

/* ===== Toast ===== */
#toast-container{
  position:fixed;
  bottom:50px;
  right:20px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:380px;
  pointer-events:none;
}
#toast-container > *{
  pointer-events:auto;
  background:var(--bg-elevated);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:3px;
  padding:11px 14px;
  font-size:13px;
  color:var(--ink-primary);
  box-shadow:var(--shadow-elev);
  animation:toastIn .22s ease;
  font-family:var(--sans);
}
#toast-container .toast-ok{border-left-color:var(--ok)}
#toast-container .toast-warn{border-left-color:var(--warn)}
#toast-container .toast-err{border-left-color:var(--err)}
#toast-container .toast-title{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-muted);
  display:block;
  margin-bottom:2px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ===== Login Disabled Note ===== */
#login-disabled-note{
  position:fixed;
  bottom:0;left:0;right:0;
  padding:8px 20px;
  background:var(--bg-paper);
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-muted);
  text-align:center;
  z-index:50;
}
#login-disabled-note::before{
  content:"●";
  color:var(--warn);
  margin-right:8px;
  font-size:11px;
  vertical-align:1px;
}

/* ===== Tables (used inside .page-content) ===== */
.page-content table,
table.data{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  background:var(--bg-paper);
  border:1px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  grid-column:1/-1;
}
.page-content table th,
table.data th{
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:left;
  padding:9px 12px;
  background:var(--bg-inset);
  color:var(--ink-secondary);
  border-bottom:1px solid var(--rule);
  font-weight:700;
}
.page-content table td,
table.data td{
  padding:10px 12px;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-primary);
}
.page-content table tr:last-child td,
table.data tr:last-child td{border-bottom:none}
.page-content table tr:hover td,
table.data tr:hover td{background:color-mix(in srgb,var(--accent) 5%,var(--bg-paper))}

/* ===== Responsive ===== */
@media (max-width:900px){
  .page-content{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media (max-width:768px){
  body{padding-bottom:48px}
  #command-header{flex-wrap:wrap;padding:8px 12px;gap:10px}
  #page-title{font-size:16px;padding-right:8px}
  #live-clock{order:99;margin-left:0;width:100%;text-align:center;font-size:12px}
  #settings-btn{padding:5px 10px;font-size:10.5px}
  #main-nav{
    top:auto;
    position:relative;
    padding:6px 10px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:thin;
  }
  #main-nav a{flex-shrink:0}
  #main-nav a.active::after{display:none}
  #app-main{padding:18px 12px}
  .page-content{grid-template-columns:1fr;gap:12px}
  section[data-page] h2{font-size:20px;flex-wrap:wrap}
  section[data-page] h2::after{font-size:9.5px}
  #toast-container{left:12px;right:12px;bottom:56px;max-width:none}
}
@media (max-width:480px){
  #command-header{font-size:12px}
  #app-logo{height:28px;width:28px}
  .form-row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}