<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OpsMaster</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@0.1,1,100..900&display=swap" rel="stylesheet"/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:psurface:1,100..900&display=swap');

/* ┌ Site-wide Reset & Custom Properties */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --c-bg:         #0f1113;
  --c-surface:    #181b1d;
  --c-surf2:      #222629;
  --c-border:     #303539;
  --c-text:       #e2e8f0;
  --c-mute:       #6c7789;
  --c-accent:     #3b82f6;
  --c-accent1:    #1d4ed8;
  --c-green:      #10b981;
  --c-yellow:     #f59d0b;
  --c-red:        #ef4444;
  --side-w:       196px;
  --head-h:       52px;
}
body { background: var(--c-bg); color: var(--c-text); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden; }

/* ┌ Layout */
.app-layout {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: var(--head-h) 1fr;
  height: 100vh;
}
.head {
  grid-column: 1 / -1;
  display: flex; align-items: center; padding: 0 16px;
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  gap: 12px;
}
.head .logo { font-size: 1.25rem; font-weight: 700; color: var(--c-text); letter-spacing: -0.5px; }
.head .logo span { color: var(--c-accent); }
.head .head-search { flex: 1; max-width: 320px; margin-left: auto; margin-right: 12px; }
.head .head-search input {
  width: 100%; padding: 6px 12px; border: 1px solid var(--c-border);
  border-radius: 6px; background: var(--c-surf2); color: var(--c-text); font-size: 13px;
}
.head-btn { padding: 6px 12px; border-radius: 6px; border: none; background: var(--c-accent); color: #fff; font-weight: 600; cursor: pointer; }

.notif { background: none; border: none; color: var(--c-text); cursor: pointer; padding: 6px; border-radius: 6px; }
.notif:hover { background: var(--c-surf2); }

/* ┌ Sidebar */
.aside {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.nav { flex: 1; padding: 8px 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  font-size: 13px; color: var(--c-mute);
  transition: background .15s, color .15s;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background: var(--c-surf2); color: var(--c-text); }
.nav-item.active { background: var(--c-accent1); color: #fff; }
.sidebar-footer { padding: 12px16px; font-size: 11px; color: var(--c-mute); border-top: 1px solid var(--c-border); }

/* ┌ Main */
.main {
  overflow-y: auto;
  background: var(--c-bg);
  display: flex; flex-direction: column;
}
.screen { display: none; padding: 24px; }
.screen.active { display: block; }

/* ┌ Screen Header */
.screen-head {
  display: flex; align-items: center; margin-bottom: 20px; gap: 12px;
}
.screen-title { font-size: 1.25rem; font-weight: 700; }
.screen-head .actions { margin-left: auto; display: flex; gap: 8px; }

/* ┌ Cards */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 16px;
}
.card-head { display: flex; align-items: center; margin-bottom: 12px; gap: 8px; }
.card-title { font-weight: 600; }
.card-actions { margin-left: auto; display: flex; gap: 6px; }

/* ┌ KPI Cards */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.kpi-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-label { font-size: 12px; color: var(--c-mute); }
.kpi-val { font-size: 1.6rem; font-weight: 700; }
.kpi-sub { font-size: 11px; color: var(--c-mute); }
.kpi-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.icon-blue { background: #1e3a5f; }
.icon-yellow { background: #78350f; }
.icon-green { background: #064e3b; }
.icon-purple { background: #4c1d95; }

/* ┌ Tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--c-surf2); color: var(--c-mute);
  padding: 8px 12px; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid var(--c-border);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
tr:hover td { background: var(--c-surf2); }
tr:last-child td { border-bottom: none; }

.loading-row { text-align: center; padding: 32px; color: var(--c-mute); }
.empty-row  { text-align: center; padding: 32px; color: var(--c-mute); font-style: italic; }

/* ┌ Badges */
.badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 12px; font-size: 11px; font-weight: 600;
}
.badge-ship  { background: #0f766e20; color: #2dd4bf; }
.badge-proc  { background: #1e3a5f;   color: #93c3ea; }
.badge-pend  { background: #78350f25; color: #fbd38d; }
.badge-done  { background: #054f3b20; color: #6ee7b1; }

/* ┌ Buttons */
.btn { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--c-accent); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-ghost { background: var(--c-surf2); color: var(--c-text); }

/* ┌ Forms */
input, select {
  background: var(--c-surf2); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px;
}
input:focus, select:focus { outline: none; border-color: var(--c-accent); }

/* ┌ Select Options Populated by JS */
.filter-row { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }

/* ┌ Chart canvas */
.chart-wrap { position: relative; height: 220px; }

/* ┌ Mini progress bar */
.mini-bar-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-mute); }
.mini-bar-track { flex: 1; height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 3px; }

/* ┌ Employee shift row */
.shift-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.shift-row:last-child { border-bottom: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; color: #fff; }
.shift-name { font-weight: 600; }
.shift-sub  { font-size: 11px; color: var(--c-mute); }
.shift-bar  { flex: 1; }

/* ┌ Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }

/* ┌ Spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }

</style>
</head>
<body>

<div class="app-layout">
<!-- ┌ HEAD BAR ┌ -->
<header class="head">
  <div class="logo">Ops<span>Master</span></div>
  <div class="head-search"><input type="text" placeholder="Quick Search..." oninput="quickSearch(this.value)"/></div>
  <button class="notif" title="Notifications"><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V3a2 2 0 012-2h0zm-.5 0H2a2 2 0 00-2 2v2a2 2 0 002 2h5.5A2 2 0 008 5V3a2 2 0 00-.5-2zm.5 11a2 2 0 014 0v1a2 2 0 01-4 0v-1zm2 0a3 3 0 100-6 3 3 0 000 6z"/></svg></button>
  <button class="head-btn" onclick="alert('Add new record')">+ New</button>
</header>

<!-- ┌ SIDEBAR ┌ -->
<aside class="aside">
  <nav class="nav" id="nav">
    <div class="nav-item active" data-screen="master" onclick="nav('master')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M2 2h5v5H2V2zm0 7h5v5H2V9zm7-7h5v5H9V2zm0 7h5v5H9V9z"></path></svg>
      Master Dash
    </div>
    <div class="nav-item" data-screen="orders" onclick="nav('orders')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2.5A1.5 1.5 0 012.5 1h11A1.5 1.5 0 0115 2.5v11a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 13.5v-11zm1.5-.5a.5.5 0 00-.5.5v11a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-11zM4 5h8v1H4V5zm0 3h8v1H4V8zm0 3h5v1H4v-1z"></path></svg>
      Order/Production
    </div>
    <div class="nav-item" data-screen="energy" onclick="nav('energy')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.251.068a.5.5 0 01.227.58L9.677 6.5H13a.5.5 0 01.364.843l-8 8.5a.5.5 0 01-.842-.49L6.323 9.5H3a.5.5 0 01-.364-.843l8-8.5a.5.5 0 01.615-.09z"></path></svg>
      Energy Dashboard
    </div>
    <div class="nav-item" data-screen="utility" onclick="nav('utility')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M6 1.5A2.5 2.5 0 018.5 4H4a2.5 2.5 0 01-2.5-2.5M2.5 4H4v1H2.5a2.5 2.5 0 00-2.5 2.5v3a2.5 2.5 0 002.5 2.5H13a2.5 2.5 0 002.5-2.5v-3a2.5 2.5 0 00-2.5-2.5H12V4h1a3.5 3.5 0 011 7H2.5a3.5 3.5 0 01-1-7H6"></path></svg>
      Utility Dashboard
    </div>
    <div class="nav-item" data-screen="shipping" onclick="nav('shipping')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M0 6a6 6 0 016-6h4a6 6 0 016 6v2a6 6 0 01-6 6H6a6 6 0 01-6-6V6zm6-5a5 5 0 00-5 5v2a5 5 0 005 5h4a5 5 0 005-5v-2a5 5 0 00-5-5H6z"/></svg>
      Shipping
    </div>
    <div class="nav-item" data-screen="employees" onclick="nav('employees')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 8a3 3 0 100-6 3 3 0 000 6zm2-3a2 2 0 11-4 0 2 2 0 014 0zm4 11s1 0-1 0c0-3.313-2.687-6-6-6S2 12.687 2 16h0a1 1 0 01-1-1C1 11.134 4.134 8 8 8s7 3.134 7 7a1 1 0 01-1 1z"></path></svg>
      Employee Tracking
    </div>
    <div class="nav-item" data-screen="costs" onclick="nav('costs')">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2zm2 2v8h10V4H3zm1 1h2v6H1V5zm3 2h2v4H7V7zm3-1h2v5h-2V6z"/></svg>
      Cost Structure
    </div>
    <div class="nav-item" onclick="window.open('/gg-pickup-request.html', '_blank')" style="cursor:pointer;">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M0 1.5A.5.5 0 01.5 1H2a.5.5 0 01.485.379L2.89 3H14.5a.5.5 0 01.491.592l-1.5 8A.5.5 0 0113 12H4a.5.5 0 01-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 01-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 100 4 2 2 0 000-4zm7 0a2 2 0 100 4 2 2 0 000-4z"/></svg>
      GG Pick Up
    </div>
  </nav>
  <div class="sidebar-footer">v2.1.0 ﻏ Anaheim Plant</div>
</aside>