/* OMNIS — Dock Page Components
   Extracted from dock.html inline <style> */

/* ── PAGE ENTER ── */
    @keyframes page-enter { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
    .app-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden;
                 animation:page-enter .35s cubic-bezier(.16,1,.3,1) both; }

    /* ── DOCK TOOLBAR ── */
    .dock-toolbar {
      padding:10px 20px;
      display:flex; align-items:center; gap:10px; flex-shrink:0;
      border-bottom:1px solid var(--border);
      background:rgba(2,3,10,.6);
    }
    .dock-filter-btn {
      height:28px; padding:0 12px;
      border:1px solid var(--border-2); border-radius:20px;
      background:transparent; color:var(--ink-3);
      font-family:var(--font); font-size:11px; font-weight:600;
      cursor:pointer; transition:all .15s;
    }
    .dock-filter-btn.active {
      background:var(--neural-bg); border-color:var(--neural-border); color:var(--neural-b,#dc2626);
    }
    .dock-filter-btn:hover:not(.active) { border-color:var(--border-3,var(--border-2)); color:var(--ink-2); }
    .dock-count {
      margin-left:auto;
      font-family:var(--mono); font-size:11px; color:var(--ink-3);
    }
    .dock-count span { color:var(--ink-2); font-weight:600; }

    /* ── DOCK GRID ── */
    .dock-scroll { flex:1; overflow-y:auto; padding:16px 20px; }
    .dock-scroll::-webkit-scrollbar { width:3px; }
    .dock-scroll::-webkit-scrollbar-thumb { background:rgba(120,140,200,.1); border-radius:4px; }

    .dock-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
      gap:10px;
    }

    /* ── DOCK CARD ── */
    .dock-card {
      background:rgba(5,9,16,.97);
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
      transition:border-color .2s, transform .2s, box-shadow .2s;
      position:relative;
      cursor:default;
    }
    .dock-card:hover { border-color:var(--border-2); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.5); }

    /* Status accent bar at top */
    .dock-card::before {
      content:'';
      position:absolute; top:0; left:0; right:0; height:2px;
      transition:background .2s;
    }
    .dock-card.free     ::before { background:rgba(120,140,200,.1); }
    .dock-card.occupied ::before { background:linear-gradient(90deg,var(--caution),transparent); }
    .dock-card.loading  ::before { background:linear-gradient(90deg,var(--clear),transparent); animation:loadingBar 2s ease-in-out infinite; }
    .dock-card.unloading::before { background:linear-gradient(90deg,var(--intel),transparent); animation:loadingBar 2s ease-in-out infinite; }
    .dock-card.ready    ::before { background:linear-gradient(90deg,var(--clear),transparent); }
    .dock-card.delayed  ::before { background:linear-gradient(90deg,var(--critical),transparent); }
    @keyframes loadingBar {
      0%,100%{ opacity:1; } 50%{ opacity:.4; }
    }

    /* Left edge indicator */
    .dock-card::after {
      content:'';
      position:absolute; top:2px; left:0; bottom:0; width:3px;
    }
    .dock-card.occupied ::after { background:var(--caution); }
    .dock-card.loading  ::after { background:var(--clear); }
    .dock-card.unloading::after { background:var(--intel); }
    .dock-card.ready    ::after { background:var(--clear); opacity:.5; }
    .dock-card.delayed  ::after { background:var(--critical); }

    /* Card header */
    .dock-card-head {
      padding:12px 14px 10px 16px;
      display:flex; align-items:center; justify-content:space-between;
      border-bottom:1px solid var(--border);
      background:rgba(0,0,0,.2);
    }
    .dock-code {
      font-family:var(--mono); font-size:18px; font-weight:600;
      color:var(--ink); letter-spacing:.04em;
    }
    .dock-zone {
      font-size:9px; font-weight:700; letter-spacing:.14em;
      text-transform:uppercase; color:var(--ink-3);
      margin-top:1px;
    }

    /* Status badge */
    .dock-badge {
      display:inline-flex; align-items:center; gap:5px;
      height:22px; padding:0 9px;
      font-size:10px; font-weight:700; letter-spacing:.04em;
      border-radius:5px; border:1px solid; white-space:nowrap;
    }
    .dock-badge::before {
      content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0;
    }
    .dock-badge.free      { color:var(--ink-3);    border-color:var(--border-2);        background:transparent; }
    .dock-badge.free::before { background:var(--ink-3); }
    .dock-badge.occupied  { color:var(--caution);  border-color:var(--caution-border);  background:var(--caution-bg); }
    .dock-badge.occupied::before { background:var(--caution); }
    .dock-badge.loading   { color:var(--clear);    border-color:var(--clear-border);    background:var(--clear-bg); }
    .dock-badge.loading::before  { background:var(--clear); animation:dotPulse 1.2s ease infinite; }
    .dock-badge.unloading { color:var(--intel);    border-color:var(--intel-border);    background:var(--intel-bg); }
    .dock-badge.unloading::before{ background:var(--intel); animation:dotPulse 1.2s ease infinite; }
    .dock-badge.ready     { color:var(--clear);    border-color:var(--clear-border);    background:var(--clear-bg); font-weight:800; }
    .dock-badge.ready::before    { background:var(--clear); }
    .dock-badge.delayed   { color:var(--critical-b); border-color:var(--critical-border); background:var(--critical-dim); }
    .dock-badge.delayed::before  { background:var(--critical-b); animation:dotPulse .8s ease infinite; }
    @keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.7)} }

    /* Card body */
    .dock-card-body { padding:12px 16px 10px; }
    .dock-empty {
      font-size:12px; color:var(--ink-3); font-style:italic;
      padding:4px 0 2px;
    }
    .dock-trailer-num {
      font-family:var(--mono); font-size:16px; font-weight:600;
      color:var(--ink); letter-spacing:.04em;
    }
    .dock-carrier-name {
      font-size:12px; color:var(--ink-3); margin-top:2px;
    }
    .dock-meta-row {
      display:flex; align-items:center; gap:8px; margin-top:8px;
    }
    .dock-meta-chip {
      font-family:var(--mono); font-size:10px; color:var(--ink-3);
      background:rgba(0,0,0,.3); border:1px solid var(--border);
      padding:2px 7px; border-radius:4px;
    }
    .dock-plate-chip {
      font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px;
    }
    .dock-plate-chip.up   { color:var(--clear);   background:var(--clear-bg);    border:1px solid var(--clear-border); }
    .dock-plate-chip.down { color:var(--ink-3);   background:rgba(0,0,0,.3);     border:1px solid var(--border); }

    /* Card actions */
    .dock-actions {
      padding:10px 14px 12px;
      display:flex; gap:6px; flex-wrap:wrap;
      border-top:1px solid var(--border);
    }
    .dock-btn {
      height:32px; padding:0 13px;
      border-radius:7px; border:1px solid; font-size:11px; font-weight:600;
      cursor:pointer; transition:all .15s; white-space:nowrap;
      font-family:var(--font);
      display:inline-flex; align-items:center; gap:5px;
    }
    .dock-btn:active { transform:scale(.95); }
    .dock-btn.start   { background:var(--clear-bg);    border-color:var(--clear-border);    color:var(--clear);    }
    .dock-btn.start:hover   { background:rgba(48,209,88,.14); }
    .dock-btn.finish  { background:var(--intel-bg);    border-color:var(--intel-border);    color:var(--intel);   }
    .dock-btn.finish:hover  { background:rgba(10,132,255,.14); }
    .dock-btn.clear   { background:var(--critical-dim); border-color:var(--critical-border); color:var(--critical-b); }
    .dock-btn.clear:hover   { background:rgba(255,45,85,.14); }
    .dock-btn.plate   { background:rgba(0,0,0,.3);     border-color:var(--border-2);        color:var(--ink-3);   }
    .dock-btn.plate:hover   { border-color:var(--border-3,var(--border-2)); color:var(--ink-2); }
    .dock-btn.plate.raised  { background:var(--clear-bg); border-color:var(--clear-border); color:var(--clear); }

    /* ── KPI STRIP ── */
    .kpi-strip {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:0; flex-shrink:0;
      border-bottom:1px solid var(--border);
    }
    .kpi-strip-item {
      padding:10px 16px;
      border-right:1px solid var(--border);
      display:flex; flex-direction:column; gap:2px;
    }
    .kpi-strip-item:last-child { border-right:none; }
    .kpi-strip-label { font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
    .kpi-strip-val   { font-family:var(--mono); font-size:22px; font-weight:400; color:var(--ink); line-height:1; letter-spacing:-.02em; }
    .kpi-strip-val.caution  { color:var(--caution); }
    .kpi-strip-val.critical { color:var(--critical-b); }
    .kpi-strip-val.clear    { color:var(--clear); }

    /* ── EMPTY STATE ── */
    .dock-empty-state {
      grid-column:1/-1;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding:48px 24px; gap:10px; text-align:center;
    }
    .dock-empty-state-icon  { font-size:32px; opacity:.2; }
    .dock-empty-state-title { font-size:14px; font-weight:500; color:var(--ink-3); }

    /* ── TOAST ── */
    .toast-stack { position:fixed; bottom:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:7px; }
    .toast {
      padding:10px 16px; border-radius:8px; font-size:12px; font-weight:500;
      background:rgba(5,9,16,.99); color:var(--ink-2);
      border:1px solid var(--border-2); border-left:2px solid var(--neural);
      max-width:300px; box-shadow:0 8px 24px rgba(0,0,0,.5);
      animation:tIn .2s ease, tOut .2s ease 3.1s forwards;
    }
    .toast.success { border-left-color:var(--clear);      color:var(--clear); }
    .toast.error   { border-left-color:var(--critical-b); color:var(--critical-b); }
    @keyframes tIn  { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }
    @keyframes tOut { from{opacity:1} to{opacity:0;transform:translateX(14px)} }

    @media (max-width:768px) {
      .dock-grid { grid-template-columns:1fr !important; }
      .filter-toolbar { flex-wrap:wrap; gap:6px; }
      .filter-toolbar button { min-height:40px; font-size:12px; }
      .dock-card .action-btns { flex-wrap:wrap; gap:5px; }
      .dock-card .action-btns button { flex:1; min-width:60px; min-height:40px; font-size:11px; }
    }
    @media (max-width:480px) {
      .kpi-strip { grid-template-columns:repeat(2,1fr); }
    }


    .dock-recommend-btn{height:28px;padding:0 10px;font-size:10px;font-weight:700;border-radius:6px;background:var(--neural-bg);border:1px solid var(--neural-border);color:var(--neural-b);cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap}
    .dock-recommend-btn:hover{background:var(--neural);color:#fff}
    .dock-rec-panel{background:rgba(5,9,16,.99);border:1px solid var(--neural-border);border-radius:10px;padding:14px;margin-top:8px;display:none}
    .dock-rec-panel.open{display:block}
    .dock-rec-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;margin-bottom:4px;cursor:pointer;border:1px solid var(--border);transition:all .15s}
    .dock-rec-item:hover{border-color:var(--neural-border);background:var(--neural-bg)}
    .dock-rec-rank{font-family:var(--mono);font-size:18px;font-weight:400;color:var(--neural-b);width:28px;flex-shrink:0}
    .dock-rec-code{font-size:14px;font-weight:600;color:var(--ink);min-width:60px}
    .dock-rec-reason{font-size:11px;color:var(--ink-3);flex:1}
    .dock-rec-score{font-family:var(--mono);font-size:11px;color:var(--clear)}