/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rad2);overflow:hidden}
.card-head{padding:12px 16px 10px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;font-family:var(--mono);font-weight:600}
.card-body{padding:14px 16px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.metric{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px 16px;position:relative;overflow:hidden}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.m-amber::before{background:linear-gradient(90deg,var(--teal),transparent)}
.m-teal::before{background:linear-gradient(90deg,var(--teal),transparent)}
.m-green::before{background:linear-gradient(90deg,var(--green),transparent)}
.m-red::before{background:linear-gradient(90deg,var(--red),transparent)}
.m-blue::before{background:linear-gradient(90deg,var(--blue),transparent)}
.metric-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono)}
.metric-val{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--txt);margin:6px 0 3px;line-height:1}
.metric-val sup{font-size:12px;font-weight:400;color:var(--txt3)}
.metric-sub{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:5px}
.metric-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;opacity:.07}
.bar-mini{height:3px;background:var(--bg5);border-radius:2px;margin-top:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:2px;transition:width .5s}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-bottom:12px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
.mb12{margin-bottom:12px}

/* ── MACHINE CARDS ── */
.mach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mach-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px;border-left:3px solid var(--bdr2);transition:all .15s}
.mach-card:hover{background:var(--bg4);transform:translateY(-1px)}
.mach-card.s-run{border-left-color:var(--green)}
.mach-card.s-idle{border-left-color:var(--yellow)}
.mach-card.s-down{border-left-color:var(--red)}
.mach-card.s-maint{border-left-color:var(--purple)}
.mach-uts{font-family:var(--mono);font-size:10px;color:var(--txt3)}
.mach-name{font-family:var(--display);font-size:13px;font-weight:700;color:var(--txt);margin:3px 0 6px}

/* Status pills */
.sp{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.sp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sp-run{background:var(--green-dim);color:var(--green);border:1px solid rgba(163,230,53,.22)}.sp-run .sp-dot{background:var(--green);box-shadow:0 0 4px var(--green)}
.sp-idle{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(251,191,36,.2)}.sp-idle .sp-dot{background:var(--yellow)}
.sp-down{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,.22)}.sp-down .sp-dot{background:var(--red);animation:blink 1s infinite}
.sp-maint{background:rgba(167,139,250,.10);color:var(--purple);border:1px solid rgba(167,139,250,.22)}.sp-maint .sp-dot{background:var(--purple)}

/* Light mode status pills — warna disesuaikan kontras ivory */
[data-theme="light"] .sp-run{background:rgba(61,122,10,.10);color:var(--green);border-color:rgba(61,122,10,.20)}
[data-theme="light"] .sp-run .sp-dot{background:var(--green);box-shadow:none}
[data-theme="light"] .sp-idle{background:rgba(154,107,0,.10);color:var(--yellow);border-color:rgba(154,107,0,.20)}
[data-theme="light"] .sp-idle .sp-dot{background:var(--yellow)}
[data-theme="light"] .sp-down{background:rgba(192,40,42,.10);color:var(--red);border-color:rgba(192,40,42,.20)}
[data-theme="light"] .sp-maint{background:rgba(112,48,192,.10);color:var(--purple);border-color:rgba(112,48,192,.20)}

.mach-row{display:flex;gap:10px;margin-top:10px}
.mstat{flex:1;background:var(--bg2);border-radius:5px;padding:6px 8px;text-align:center}
.mstat-l{font-size:9px;color:var(--txt3);font-family:var(--mono)}
.mstat-v{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:1px}
.oee-track{height:3px;background:var(--bg5);border-radius:2px;margin-top:8px;overflow:hidden}
.oee-fill{height:100%;border-radius:2px;background:var(--teal)}

/* ── TABLES ── */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl thead th{padding:8px 10px;text-align:left;font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;border-bottom:1px solid var(--bdr);font-family:var(--mono);font-weight:600}
.tbl tbody td{padding:9px 10px;border-bottom:1px solid var(--bdr);color:var(--txt2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.tbl tfoot td{padding:8px 10px;font-size:11px;font-weight:600;background:var(--bg3);color:var(--txt);font-family:var(--mono);border-top:1px solid var(--bdr2)}

/* Light mode thead — warm tint */
[data-theme="light"] .tbl thead th{background:rgba(80,50,10,.04)}
[data-theme="light"] .tbl tbody tr:hover{background:rgba(80,50,10,.03)}
[data-theme="light"] .tbl tfoot td{background:var(--bg3)}

.mono{font-family:var(--mono)}

/* ── BADGES ── */
.badge{display:inline-block;font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:4px;font-weight:600;letter-spacing:.3px}
.b-green{background:var(--green-dim);color:var(--green)}
.b-red{background:var(--red-dim);color:var(--red)}
.b-yellow{background:var(--yellow-dim);color:var(--yellow)}
.b-amber{background:var(--amber-dim);color:var(--amber)}
.b-blue{background:var(--blue-dim);color:var(--blue)}
.b-purple{background:rgba(167,139,250,.10);color:var(--purple)}
.b-teal{background:var(--teal-dim);color:var(--teal)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rad);font-size:12px;font-family:var(--body);font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-amber{background:var(--amber);color:#0a0a0a}.btn-amber:hover{background:var(--amber2);transform:translateY(-1px)}
.btn-ghost{background:var(--bg3);border:1px solid var(--bdr2);color:var(--txt2)}.btn-ghost:hover{background:var(--bg4);color:var(--txt)}
.btn-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,.22)}.btn-red:hover{background:var(--red);color:white}
.btn-teal{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(34,211,238,.22)}.btn-teal:hover{background:var(--teal);color:#060e14}
.btn-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(163,230,53,.22)}.btn-green:hover{background:var(--green);color:#060e14}
.btn-sm{padding:6px 12px;font-size:12px}.btn-xs{padding:3px 8px;font-size:10px;gap:4px}

/* Light mode buttons — kontras warm ivory */
[data-theme="light"] .btn-amber{background:var(--amber);color:#fffdf8}
[data-theme="light"] .btn-amber:hover{background:var(--amber2)}
[data-theme="light"] .btn-teal{background:var(--teal-dim);color:var(--teal);border-color:rgba(7,121,160,.22)}
[data-theme="light"] .btn-teal:hover{background:var(--teal);color:#fffdf8}
[data-theme="light"] .btn-green{background:var(--green-dim);color:var(--green);border-color:rgba(61,122,10,.22)}
[data-theme="light"] .btn-green:hover{background:var(--green);color:#fffdf8}
[data-theme="light"] .btn-red{background:var(--red-dim);color:var(--red);border-color:rgba(192,40,42,.22)}
[data-theme="light"] .btn-red:hover{background:var(--red);color:#fffdf8}

/* ── FORMS ── */
.fs{margin-bottom:18px}
.fs-title{font-size:9px;color:var(--teal);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--teal-dim);font-family:var(--mono);font-weight:700}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono)}
.fg input,.fg select,.fg textarea{background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--rad);padding:8px 10px;font-size:12px;font-family:var(--body);color:var(--txt);outline:none;transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
.fg input[readonly]{color:var(--teal);font-family:var(--mono);background:var(--bg2);cursor:default}
.fg select option{background:var(--bg3)}
.fg textarea{resize:vertical;min-height:65px;line-height:1.5}
.fgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* ── TABS ── */
.tab-bar{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--bdr);padding-bottom:0}
.tab-btn{padding:8px 16px;border:none;border-radius:var(--rad) var(--rad) 0 0;font-size:11px;font-family:var(--mono);cursor:pointer;color:var(--txt3);background:none;transition:all .15s;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn:hover{color:var(--txt2)}
.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadein .15s ease}

/* ── PROGRESS ── */
.prog{height:4px;background:var(--bg5);border-radius:2px;overflow:hidden}
.pf-h{height:100%;border-radius:2px;transition:width .6s ease}
.pf-amber{background:var(--amber)}.pf-teal{background:var(--teal)}.pf-green{background:var(--green)}
.pf-red{background:var(--red)}.pf-blue{background:var(--blue)}.pf-yellow{background:var(--yellow)}

/* ── OEE ── */
.oee-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.oee-g{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px;text-align:center}
.oee-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;font-family:var(--mono);margin-bottom:8px}
.oee-val{font-family:var(--mono);font-size:24px;font-weight:700}

/* ── ALERTS ── */
.alert{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--rad);margin-bottom:8px;border:1px solid transparent}
.alert-danger{background:var(--red-dim);border-color:rgba(255,77,90,.15)}
.alert-warning{background:var(--yellow-dim);border-color:rgba(251,191,36,.15)}
.alert-info{background:var(--blue-dim);border-color:rgba(56,189,248,.15)}
.alert-success{background:var(--green-dim);border-color:rgba(163,230,53,.15)}
[data-theme="light"] .alert-danger{background:var(--red-dim);border-color:rgba(192,40,42,.18)}
[data-theme="light"] .alert-warning{background:var(--yellow-dim);border-color:rgba(154,107,0,.18)}
[data-theme="light"] .alert-info{background:var(--blue-dim);border-color:rgba(22,104,176,.18)}
[data-theme="light"] .alert-success{background:var(--green-dim);border-color:rgba(61,122,10,.18)}
.alert-icon{font-size:13px;margin-top:1px;flex-shrink:0}
.alert-title{font-size:12px;font-weight:600}
.alert-desc{font-size:11px;color:var(--txt2);margin-top:1px;line-height:1.4}
.alert-time{font-size:9px;color:var(--txt3);font-family:var(--mono);margin-top:3px}

/* ── TIMELINE ── */
.timeline{padding-left:22px;position:relative}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--bdr2)}
.tl-item{position:relative;padding-bottom:14px}
.tl-dot{position:absolute;left:-16px;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg0)}
.tl-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad);padding:9px 11px}
.tl-name{font-size:12px;font-weight:600;color:var(--txt)}
.tl-meta{font-size:10px;color:var(--txt3);font-family:var(--mono);margin-top:2px}
.tl-dur{font-family:var(--mono);font-weight:700;font-size:13px;margin-top:3px}