/*
 * Command Cockpit — styles.css
 * Dashboard-specific styles only.
 *
 * Brand tokens : ../_shared/tokens.css  (already loaded)
 * Global resets: ../_shared/global.css  (already loaded)
 *
 * Split from: command-center/ll-command-cockpit.html
 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--bg-elevated);color:var(--text-primary);-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:300px 1fr;grid-template-rows:72px 1fr auto;grid-template-areas:"header header" "sidebar main" "footer footer";min-height:100vh}
.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--slate);color:var(--text-inverse);position:sticky;top:0;z-index:50;box-shadow:0 4px 12px rgba(44,62,80,.08)}
.brand{display:flex;align-items:center;gap:13px;cursor:pointer;text-decoration:none}.brand:hover .brand-name{color:var(--copper)}
.brand-mark{height:40px;width:auto}.brand-mark polygon{fill:var(--copper)}
.brand-divider{width:1px;height:30px;background:rgba(255,255,255,.18)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--white);transition:var(--transition)}
.brand-sub{font-size:10px;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.header-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.refresh{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elevated);color:var(--slate);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 13px;font:600 13px var(--font-body);cursor:pointer;transition:var(--transition)}
.refresh:hover{border-color:var(--copper);color:var(--copper-deep)}
.msel{padding:8px 11px;border-radius:var(--radius-sm);border:none;font:600 13px var(--font-body);background:var(--copper);color:#fff;cursor:pointer}
.user-pill{display:flex;align-items:center;gap:8px}.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--copper);color:#fff;display:grid;place-items:center;font:700 12px var(--font-display)}.user-name{font-size:13px;color:rgba(255,255,255,.9)}
.sidebar{grid-area:sidebar;background:var(--bg-elevated);border-right:1px solid var(--border);padding:20px 14px;overflow-y:auto}
.sidebar-title{font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 8px 10px}
.cat-list{list-style:none}
.cat-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:3px;transition:var(--transition);color:var(--text-secondary)}
.cat-item:hover{background:var(--stone-light)}
.cat-item.active{background:var(--white);color:var(--slate);box-shadow:var(--shadow-xs);border:1px solid var(--border)}
.cat-status{width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex:none}
.cat-item.active .cat-status{background:var(--copper)}
.cat-num{font:700 14px var(--font-display);color:var(--copper);width:20px;text-align:center}
.cat-label{flex:1;font-size:13.5px;font-weight:600}
.sidenote{margin:18px 8px 0;font-size:11px;color:var(--text-muted);line-height:1.5}
.main{grid-area:main;padding:20px 24px 30px;overflow-y:auto;max-width:1160px}
.footer{grid-area:footer;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--white);border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);flex-wrap:wrap;gap:8px}
.footer-brand{display:flex;align-items:center;gap:8px}.footer-mark{width:14px;height:14px}.footer-mark polygon{fill:var(--copper)}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.card.dark{background:var(--slate);border-color:var(--slate);color:#fff}
.h3{font-family:var(--font-display);color:var(--slate);font-weight:700;font-size:16px;margin-bottom:10px}
.flag{font-size:12.5px;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;line-height:1.45}
.grid{display:grid;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tile{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}
.tile.accent{background:var(--copper);border-color:var(--copper)}
.tile .tl{font-size:12px;color:var(--text-muted)}.tile.accent .tl{color:rgba(255,255,255,.85)}
.tile .tv{font:800 23px var(--font-display);color:var(--slate)}.tile.accent .tv{color:#fff}
.tile .ts{font-size:11px;color:var(--text-muted)}.tile.accent .ts{color:rgba(255,255,255,.82)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:8px 9px;font:700 11.5px var(--font-display);background:var(--slate);color:#fff}
.tbl td{padding:8px 9px;border-bottom:1px solid var(--border);font-size:13.5px}
.tbl tr:nth-child(even) td{background:var(--bg-elevated)}
.linkbtn{background:none;border:none;color:var(--copper-deep);font:600 12px var(--font-body);cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.subtabs{display:flex;gap:5px;flex-wrap:wrap}
.subtab{padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font:600 12.5px var(--font-body);background:var(--white);color:var(--slate)}
.subtab.on{background:var(--copper);border-color:var(--copper);color:#fff}
.btn{padding:8px 14px;border-radius:var(--radius-sm);border:none;cursor:pointer;font:600 13px var(--font-body);background:var(--copper);color:#fff}
.btn.slate{background:var(--slate)}.btn.red{background:var(--danger)}
.fld{display:block;font-size:12px;color:var(--text-muted);margin-bottom:8px}
.fldrow{display:flex;align-items:center;margin-top:3px;gap:4px}
.inp{padding:7px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);font:400 13px var(--font-body);color:var(--text-primary);width:100%;background:var(--white)}
.tgl{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font:400 13px var(--font-body);color:var(--text-primary);cursor:pointer;margin-bottom:8px;text-align:left}
.modtabs{display:none;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.modtab{padding:9px 13px;border:none;border-radius:var(--radius);cursor:pointer;font:700 13px var(--font-body);background:var(--white);border:1px solid var(--border);color:var(--slate)}
.modtab.on{background:var(--copper);border-color:var(--copper);color:#fff}
@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-areas:"header" "main" "footer"}.sidebar{display:none}.modtabs{display:flex}}

/* ---- Command Center launcher (mirrors PM Command) ---- */
.scrim{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:24px}
.launcher{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(680px,100%);max-height:90vh;overflow-y:auto}
.lx-head{display:flex;align-items:center;gap:14px;padding:22px 26px;background:var(--slate);color:var(--white);border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative}
.lx-mark{height:38px;width:auto}.lx-mark polygon{fill:var(--copper)}
.lx-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}
.lx-title{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.2;margin-top:2px}
.lx-head .x{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);font-size:18px;color:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer}.lx-head .x:hover{background:rgba(255,255,255,.16)}
.lx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 26px}
@media(max-width:560px){.lx-grid{grid-template-columns:1fr}}
.lx-tile{border:1px solid var(--border-strong);border-radius:var(--radius);padding:18px;cursor:pointer;transition:var(--transition);background:var(--bg-elevated)}
.lx-tile:hover{border-color:var(--copper);background:var(--bg-card-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.lx-tile.here{border-left:3px solid var(--copper)}
.lx-tile.pending{opacity:.74}.lx-tile.pending:hover{transform:none;border-color:var(--border-accent)}
.lx-glyph{font-size:22px;line-height:1;color:var(--copper);margin-bottom:11px}
.lx-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lx-desc{font-size:12.5px;color:var(--text-secondary);margin-top:7px;line-height:1.45}
.lx-badge{font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:99px}
.lx-badge.bhere{background:var(--copper-soft);color:var(--copper-deep);border:1px solid var(--copper-edge)}
.lx-badge.bsoon{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(201,155,69,.32)}
.lx-foot{padding:14px 26px 22px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);line-height:1.5}

/* ---- logo-as-refresh + LL snake ---- */
.brand-logo-btn{background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;line-height:0}
.brand-logo-btn:focus{outline:none}
.brand-mark .ll-fill{fill:var(--copper);transition:opacity .25s}
.brand-mark .ll-snake{fill:none;stroke:none}
.brand-logo-btn:hover .ll-fill{fill:#9A5F26}
.brand-logo-btn.refreshing .ll-fill{opacity:.20}
.brand-logo-btn.refreshing .ll-snake{stroke:#EBB079;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;animation:llsnake 1.05s linear infinite}