/* ── WO-specific styles ── */

    /* Nav sub-items */
    .nav-sub{padding:5px 16px 5px 40px;font-size:11.5px;color:var(--muted);cursor:pointer;transition:all 0.15s;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:8px}
    .nav-sub:hover{background:rgba(0,0,0,0.04);color:var(--text)}
    .nav-sub.active{background:rgba(0,48,130,0.08);color:var(--kai-blue);border-right:3px solid var(--kai-blue)}

    /* Tab pills */
    .tab-pills{display:flex;gap:0.375rem;flex-wrap:wrap}
    .tab-pill{padding:0.3rem 0.75rem;border-radius:100px;font-size:0.75rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--muted);transition:all 0.15s;white-space:nowrap}
    .tab-pill:hover{border-color:var(--kai-blue);color:var(--kai-blue)}
    .tab-pill.active{background:var(--kai-blue);color:#fff;border-color:var(--kai-blue)}
    .tab-pill .pill-count{margin-left:4px;opacity:0.75}
    .tab-pill.danger.active{background:var(--red);border-color:var(--red)}
    .tab-pill.danger{border-color:rgba(220,38,38,0.3);color:var(--red)}

    /* WO Card list */
    .wo-list{display:flex;flex-direction:column;gap:0.5rem}
    .wo-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0.875rem 1rem;cursor:pointer;transition:all 0.15s;border-left:3px solid var(--border)}
    .wo-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.07);border-left-color:var(--kai-blue)}
    .wo-card.selected{border-color:var(--kai-blue);border-left-color:var(--kai-blue);background:rgba(0,48,130,0.02);box-shadow:0 0 0 2px rgba(0,48,130,0.12)}
    .wo-card.overdue{border-left-color:var(--red)}
    .wo-card.done{border-left-color:var(--status-siap);opacity:0.85}

    .wo-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.375rem}
    .wo-id{font-family:'JetBrains Mono',monospace;font-size:0.8125rem;font-weight:700;color:var(--text)}
    .wo-title{font-size:0.875rem;font-weight:700;color:var(--text);margin-bottom:0.3rem}
    .wo-meta{display:flex;align-items:center;gap:1rem;font-size:0.75rem;color:var(--muted);flex-wrap:wrap}
    .wo-meta-item{display:flex;align-items:center;gap:0.3rem}
    .wo-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem;gap:0.75rem}
    .wo-progress-wrap{flex:1;display:flex;align-items:center;gap:0.625rem}
    .wo-prog-bar-bg{flex:1;height:5px;background:rgba(0,0,0,0.07);border-radius:3px;overflow:hidden;max-width:120px}
    .wo-prog-bar-fill{height:100%;border-radius:3px;background:var(--kai-blue);transition:width 0.5s ease}
    .wo-prog-bar-fill.done{background:var(--status-siap)}
    .wo-prog-text{font-size:0.6875rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--muted);white-space:nowrap}
    .wo-actions{display:flex;gap:0.375rem;flex-shrink:0}

    /* Detail drawer */
    .drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.18);z-index:200;opacity:0;pointer-events:none;transition:opacity 0.25s}
    .drawer-overlay.open{opacity:1;pointer-events:all}
    .drawer{position:fixed;top:0;right:0;height:100%;width:440px;background:var(--card);border-left:1px solid var(--border);z-index:201;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;overflow:hidden}
    .drawer.open{transform:translateX(0)}
    .drawer-hdr{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--card)}
    .drawer-wo-id{font-family:'JetBrains Mono',monospace;font-size:0.875rem;font-weight:700;color:var(--text)}
    .drawer-hdr-actions{display:flex;align-items:center;gap:0.5rem}
    .drawer-close{background:none;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all 0.15s}
    .drawer-close:hover{border-color:var(--red);color:var(--red)}
    .drawer-sub{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
    .drawer-title{font-size:0.9375rem;font-weight:800;color:var(--text);margin-bottom:0.5rem}
    .drawer-badges{display:flex;gap:0.375rem;flex-wrap:wrap}
    .drawer-info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
    .drawer-info-mini{background:var(--bg);border-radius:7px;padding:0.5rem 0.625rem}
    .drawer-info-mini-lbl{font-size:0.625rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
    .drawer-info-mini-val{font-size:0.8125rem;font-weight:700;color:var(--text)}

    /* Drawer tabs */
    .drawer-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:0 1.25rem}
    .drawer-tab{padding:0.625rem 0.75rem;font-size:0.75rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;white-space:nowrap}
    .drawer-tab:hover{color:var(--text)}
    .drawer-tab.active{color:var(--kai-blue);border-bottom-color:var(--kai-blue)}
    .drawer-body{flex:1;overflow-y:auto;padding:1rem 1.25rem}

    /* Checklist */
    .checklist-item{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.625rem;border-radius:7px;transition:background 0.15s;margin-bottom:2px}
    .checklist-item:hover{background:rgba(0,0,0,0.03)}
    .checklist-item.checked{opacity:0.75}
    .checklist-num{font-size:0.6875rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--muted);width:18px;flex-shrink:0;text-align:right}
    .checklist-label{flex:1;font-size:0.8125rem;color:var(--text);font-weight:500}
    .checklist-item.checked .checklist-label{color:var(--muted);text-decoration:line-through}
    .checklist-result{font-size:0.6875rem;color:var(--muted);display:flex;align-items:center;gap:0.375rem;margin-left:auto;flex-shrink:0}
    .checklist-actions{display:flex;gap:0.25rem;margin-left:auto;flex-shrink:0}
    .ck-btn{padding:0.2rem 0.5rem;border-radius:5px;font-size:0.6875rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:none;transition:all 0.15s}
    .ck-btn.ok:hover{background:rgba(22,163,74,0.1);border-color:var(--status-siap);color:#15803D}
    .ck-btn.defek:hover{background:rgba(220,38,38,0.1);border-color:var(--red);color:var(--red)}

    .checklist-check-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.75rem}
    .checklist-check-icon.done{background:rgba(22,163,74,0.12);color:#15803D}
    .checklist-check-icon.pending{border:1.5px solid var(--border);background:var(--bg)}

    .drawer-footer{padding:0.875rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:0.5rem;flex-shrink:0;background:var(--card)}

    /* Chart bar (PM compliance) */
    .chart-container{height:120px;display:flex;align-items:flex-end;gap:0.5rem;padding:0.5rem 0}
    .chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
    .chart-bar-bg{width:100%;background:rgba(0,0,0,0.05);border-radius:4px;position:relative;overflow:visible}
    .chart-bar-fill{width:100%;border-radius:4px;position:absolute;bottom:0;transition:height 0.6s ease;background:var(--kai-blue)}
    .chart-bar-fill.under{background:rgba(220,38,38,0.6)}
    .chart-target-line{position:absolute;width:calc(100% + 4px);left:-2px;border-top:1.5px dashed rgba(220,38,38,0.5);z-index:1}
    .chart-lbl{font-size:0.625rem;color:var(--muted);font-weight:600;text-align:center}
    .chart-val{font-size:0.625rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text);text-align:center}

    /* Overdue badge pulse */
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0.5}}
    .overdue-dot{width:7px;height:7px;background:var(--red);border-radius:50%;animation:blink 1.5s infinite;display:inline-block}

    /* Count info bar */
    .count-info{font-size:0.75rem;color:var(--muted);padding:0.25rem 0}

    /* WO empty state */
    .wo-empty{text-align:center;padding:2rem;color:var(--muted);font-size:0.875rem}
    .wo-empty i{font-size:2rem;margin-bottom:0.5rem;display:block;color:var(--border)}