:root { --forest:#0c3427; --forest-2:#176443; --accent:#20a466; --lime:#8bcf68; --ink:#14251d; --muted:#6f7e76; --line:rgba(169,194,179,.48); --bg:#f3f8f5; --card:rgba(255,255,255,.88); --danger:#b84343; --shadow:0 14px 40px rgba(18,65,43,.09); --shadow-hover:0 20px 52px rgba(18,65,43,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 5%,rgba(112,202,146,.16),transparent 28rem),radial-gradient(circle at 94% 22%,rgba(143,205,100,.12),transparent 30rem),linear-gradient(145deg,#f7faf8 0%,#f1f7f3 48%,#f8faf9 100%); background-attachment:fixed; font:15px/1.45 Inter,"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
.top { position:sticky; z-index:20; top:0; overflow:hidden; background:linear-gradient(112deg,#082f22 0%,#13533a 48%,#26744a 100%); color:#fff; box-shadow:0 8px 28px rgba(7,43,29,.2); }
.top:before { position:absolute; inset:-70px -10% auto 42%; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(154,229,132,.2),transparent 66%); content:""; pointer-events:none; animation:headerGlow 9s ease-in-out infinite alternate; }
.top-inner,.container { width:min(1180px,calc(100% - 40px)); margin:auto; }
.top-inner { position:relative; min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:21px; font-weight:750; letter-spacing:-.4px; }
.brand img { width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 5px 9px rgba(0,0,0,.28)); transition:transform .35s ease,filter .35s ease; }
.brand:hover img { transform:translateY(-2px) rotate(-2deg) scale(1.05); filter:drop-shadow(0 8px 14px rgba(0,0,0,.32)); }
.brand small { display:block; margin-top:2px; color:#bdd8c9; font-size:11px; font-weight:500; letter-spacing:.1px; }
.nav { display:flex; align-items:center; gap:10px; }
.nav > a { position:relative; padding:9px 12px; border-radius:9px; color:#e5f3eb; text-decoration:none; font-weight:650; transition:background .2s,color .2s,transform .2s; }
.nav > a:hover { background:rgba(255,255,255,.11); color:#fff; transform:translateY(-1px); }
.nav form { margin:0; }
.user-chip { padding:7px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.07); color:#d9ecdf; font-size:13px; backdrop-filter:blur(8px); }
button,.button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:39px; overflow:hidden; border:0; border-radius:9px; padding:9px 16px; background:linear-gradient(135deg,#1ca260,#16804e); color:white; cursor:pointer; font-family:inherit; font-size:14px; font-weight:650; text-decoration:none; box-shadow:0 5px 14px rgba(22,128,78,.18); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
button:before,.button:before { position:absolute; top:0; left:-120%; width:75%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); content:""; transform:skewX(-20deg); transition:left .55s ease; }
button:hover:before,.button:hover:before { left:145%; }
button:hover,.button:hover { box-shadow:0 9px 20px rgba(19,126,75,.25); filter:saturate(1.08); transform:translateY(-2px); }
button:active,.button:active { transform:translateY(0) scale(.985); }
button.secondary,.button.secondary { background:linear-gradient(135deg,rgba(246,249,247,.96),#e4eee8); color:#315442; box-shadow:0 3px 10px rgba(30,69,49,.08); }
button.secondary:hover,.button.secondary:hover { box-shadow:0 7px 17px rgba(30,69,49,.13); }
.container { position:relative; padding:36px 0 58px; animation:pageEnter .55s cubic-bezier(.2,.75,.25,1) both; }
h1 { margin:0 0 6px; font-size:30px; letter-spacing:-.7px; }
h2 { margin:0 0 15px; font-size:18px; letter-spacing:-.2px; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.metrics-grid { grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); }
.card,.panel { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,252,249,.82)); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.card { position:relative; overflow:hidden; padding:20px; animation:cardEnter .5s cubic-bezier(.2,.75,.25,1) both; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.card:before { position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,#24ad6a,#78c866,#c5e47c); content:""; }
.card:after { position:absolute; right:-36px; bottom:-52px; width:125px; height:125px; border-radius:50%; background:radial-gradient(circle,rgba(92,186,113,.13),transparent 68%); content:""; transition:transform .35s ease; }
.card:hover { border-color:rgba(81,165,113,.35); box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.card:hover:after { transform:scale(1.2); }
.metrics-grid .card:nth-child(2) { animation-delay:.05s; }
.metrics-grid .card:nth-child(3) { animation-delay:.1s; }
.metrics-grid .card:nth-child(4) { animation-delay:.15s; }
.metrics-grid .card:nth-child(5) { animation-delay:.2s; }
.metric { background:linear-gradient(110deg,#0f3c2c,#1f8b56 72%); background-clip:text; color:transparent; font-size:29px; font-weight:780; letter-spacing:-.7px; }
.panel { position:relative; margin-top:21px; padding:22px; animation:panelEnter .52s cubic-bezier(.2,.75,.25,1) both; transition:border-color .25s ease,box-shadow .25s ease; }
.panel:hover { border-color:rgba(80,156,107,.3); box-shadow:var(--shadow-hover); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:6px; }
.section-heading h2 { margin:3px 0 0; }
.section-note { margin:0 0 18px; color:var(--muted); font-size:13px; }
.compact-metrics { margin:18px 0 22px; }
.compact-metrics .card { padding:16px 18px; }
.compact-metrics .metric { font-size:24px; }
.subheading { margin:25px 0 8px; font-size:15px; }
.analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:18px 0 24px; }
.chart-card { margin:18px 0 22px; padding:18px; border:1px solid rgba(157,189,170,.48); border-radius:13px; background:linear-gradient(145deg,rgba(247,252,249,.97),rgba(235,247,240,.82)); box-shadow:inset 0 1px rgba(255,255,255,.9),0 7px 22px rgba(26,91,56,.06); }
.analytics-grid .chart-card { margin:0; }
.chart-title { display:flex; justify-content:space-between; gap:12px; margin-bottom:16px; }
.chart-title strong { color:#163f2e; font-size:14px; }
.chart-title span { color:var(--muted); font-size:11px; text-align:right; }
.bar-chart { display:grid; gap:11px; }
.bar-row { display:grid; grid-template-columns:minmax(78px,128px) minmax(80px,1fr) 76px; align-items:center; gap:10px; }
.bar-label { overflow:hidden; color:#496158; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { height:12px; overflow:hidden; border-radius:999px; background:rgba(169,199,181,.25); box-shadow:inset 0 1px 3px rgba(30,71,49,.08); }
.bar-fill { display:block; width:var(--bar-width); height:100%; min-width:3px; border-radius:inherit; transform-origin:left; animation:barGrow .8s cubic-bezier(.2,.75,.25,1) both; }
.production-bar { background:linear-gradient(90deg,#1b9a5d,#77c968); box-shadow:0 0 12px rgba(43,174,102,.28); }
.operator-bar { background:linear-gradient(90deg,#176a98,#3aa89d); box-shadow:0 0 12px rgba(39,139,151,.25); }
.downtime-bar { background:linear-gradient(90deg,#e49b39,#e5c653); box-shadow:0 0 12px rgba(223,161,53,.25); }
.bar-value { color:#244d3a; font-size:11px; text-align:right; white-space:nowrap; }
table { width:100%; border-collapse:collapse; }
.table-scroll { width:100%; overflow-x:auto; }
.agent-table { min-width:980px; }
th,td { padding:13px 10px; border-bottom:1px solid #e7efea; text-align:left; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .18s ease,box-shadow .18s ease; }
tbody tr:hover { background:linear-gradient(90deg,rgba(229,246,236,.6),rgba(249,252,250,.5)); box-shadow:inset 3px 0 #39a86d; }
th { color:#7d8b83; font-size:11px; font-weight:700; letter-spacing:.55px; text-transform:uppercase; }
table a { color:#147548; font-weight:650; transition:color .15s ease; }
table a:hover { color:#0c5735; }
.status { display:inline-block; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:650; white-space:nowrap; }
.on { color:#10643b; background:linear-gradient(135deg,#ddf7e8,#ccefdc); }
.off { color:#9d3333; background:#fae4e4; }
.idle { color:#596a61; background:#edf1ef; }
.warning { color:#8c5910; background:linear-gradient(135deg,#fff4d9,#ffe8b7); }
.warning-text { display:inline-block; margin-top:5px; color:#a5680c; font-size:12px; }
.agent-meta { display:inline-block; margin-top:5px; color:#7a8a81; font-size:11px; }
.queue-pill { display:inline-block; padding:4px 8px; border-radius:8px; background:linear-gradient(135deg,#edf6f1,#e2efe8); color:#285c43; font-size:12px; font-weight:650; white-space:nowrap; }
.queue-alert { background:linear-gradient(135deg,#fff1d8,#ffe2b2); color:#92570a; }
.agent-error { max-width:260px; margin-top:6px; overflow:hidden; color:#aa4a35; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.agent-path { max-width:260px; margin-top:5px; overflow:hidden; color:#49665a; font:11px/1.35 Consolas,"Courier New",monospace; text-overflow:ellipsis; white-space:nowrap; }
.dedupe-note { display:inline-block; margin-top:5px; color:#17734a; font-size:12px; }
.form { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; }
.compact-form { grid-template-columns:minmax(260px,420px) auto; }
.period-panel { display:grid; grid-template-columns:minmax(360px,1fr) auto; align-items:center; gap:24px; }
.period-panel h2 { margin:3px 0 5px; }
.period-panel p { margin:0; font-size:13px; }
.period-controls { display:grid; justify-items:end; gap:9px; min-width:0; }
.quick-periods { display:flex; align-items:center; gap:7px; margin:0; color:var(--muted); font-size:12px; white-space:nowrap; }
.quick-periods a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:9px 15px; border-radius:9px; background:linear-gradient(135deg,#eaf7ef,#d8eee1); color:#176443; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 3px 10px rgba(25,102,60,.08); transition:background .15s,transform .15s,box-shadow .15s; }
.quick-periods a:hover { background:linear-gradient(135deg,#dff2e7,#cbe8d6); box-shadow:0 7px 16px rgba(19,126,75,.16); transform:translateY(-2px); }
.period-form { display:flex; align-items:end; gap:10px; }
.date-range { display:flex; align-items:end; gap:5px; padding:6px 8px; border:1px solid #d7e2db; border-radius:10px; background:linear-gradient(145deg,#fff,#f6faf7); box-shadow:inset 0 1px 2px rgba(25,62,43,.03); white-space:nowrap; }
.date-range label { margin-bottom:3px; font-size:11px; }
.date-range input { width:116px; min-height:34px; padding:5px 4px; border-color:transparent; background:transparent; font-size:13px; }
.date-range input:focus { border-color:#35a971; background:#fff; }
.date-divider { padding-bottom:7px; color:#8a9a90; }
label { display:block; margin-bottom:6px; color:#63746a; font-size:12px; font-weight:650; }
input { width:100%; min-height:40px; border:1px solid #cbd9d0; border-radius:9px; outline:0; padding:9px 11px; background:linear-gradient(145deg,#fff,#f8fbf9); color:var(--ink); font:inherit; transition:border-color .18s,box-shadow .18s,background .18s; }
input:focus { border-color:#35a971; box-shadow:0 0 0 3px rgba(32,164,102,.13); }
.actions { display:flex; align-items:center; gap:8px; }
.actions form { margin:0; }
code { padding:3px 6px; border-radius:5px; background:linear-gradient(135deg,#f1f7f3,#e8f1eb); color:#315443; white-space:normal; word-break:break-all; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 15% 20%,rgba(68,167,105,.9) 0,transparent 32%),radial-gradient(circle at 88% 78%,rgba(133,196,90,.35),transparent 35%),linear-gradient(135deg,#082d21,#164b36 55%,#176b45); background-size:120% 120%; animation:loginBackground 13s ease-in-out infinite alternate; }
.login { width:min(440px,100%); }
.login-brand { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 22px; color:#fff; }
.login-brand img { width:70px; height:70px; object-fit:contain; filter:drop-shadow(0 7px 14px rgba(0,0,0,.28)); animation:logoFloat 4s ease-in-out infinite; }
.login-brand h1 { margin:0; font-size:28px; }
.login-brand p { margin:3px 0 0; color:#c7e0d1; font-size:13px; }
.login-panel { padding:28px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,250,246,.9)); box-shadow:0 22px 60px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
.login-panel h2 { margin:4px 0 22px; font-size:22px; }
.login-panel p { margin:16px 0; }
.eyebrow { color:#218452; font-size:11px; font-weight:750; letter-spacing:1px; text-transform:uppercase; }
.wide-button { width:100%; margin-top:5px; }
.error { margin:0 0 16px !important; padding:10px 12px; border-radius:8px; background:#fae5e5; color:#982e2e; font-size:13px; }
@keyframes pageEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes panelEnter { from { opacity:0; transform:translateY(14px) scale(.992); } to { opacity:1; transform:none; } }
@keyframes cardEnter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes headerGlow { from { transform:translateX(-5%) scale(.95); opacity:.55; } to { transform:translateX(8%) scale(1.08); opacity:1; } }
@keyframes loginBackground { from { background-position:0% 0%; } to { background-position:100% 100%; } }
@keyframes logoFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes barGrow { from { opacity:.3; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }
@media(max-width:760px) { .top-inner { min-height:unset; padding:14px 0; align-items:flex-start; flex-direction:column; gap:12px; } .top-inner,.container { width:min(100% - 28px,1180px); } .nav { width:100%; flex-wrap:wrap; } .user-chip { margin-left:auto; } .container { padding-top:24px; } h1 { font-size:26px; } .grid,.form,.compact-form,.analytics-grid { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-direction:column; } .period-panel { display:flex; align-items:stretch; flex-direction:column; } .period-controls { justify-items:stretch; min-width:0; } .quick-periods { flex-wrap:wrap; } .period-form { align-items:stretch; flex-direction:column; } .date-range { justify-content:space-between; } .date-range input { width:100%; } .panel { overflow-x:auto; padding:16px; } table { min-width:620px; font-size:13px; } .chart-card { min-width:560px; } .login-wrap { padding:18px; } .login-brand { align-items:flex-start; } .login-brand h1 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }