/* ═══════════════════════════════════════════════════
   OptiGuide — Premium Dark Design System
   ═══════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────── */
:root {
    --bg:         #070b12;
    --bg2:        #0d1320;
    --panel:      #0c1422;
    --glass:      rgba(12, 20, 34, 0.88);
    --glass2:     rgba(20, 30, 50, 0.55);
    --border:     rgba(255,255,255,0.07);
    --border2:    rgba(99,179,237,0.2);

    --blue:       #3b82f6;
    --blue-d:     #2563eb;
    --cyan:       #06b6d4;
    --purple:     #8b5cf6;
    --gold:       #f59e0b;
    --green:      #22c55e;
    --red:        #ef4444;
    --orange:     #f97316;

    --text:       #eef2f7;
    --text2:      #8fa3bf;
    --text3:      #4e637a;

    --tr:         .22s cubic-bezier(.4,0,.2,1);
    --shadow:     0 8px 40px rgba(0,0,0,.55);
    --glow:       0 0 24px rgba(59,130,246,.18);

    --top-h:      60px;
    --left-w:     296px;
    --right-w:    336px;
    --r:          16px;
    --r-sm:       10px;
}

/* ── Reset ────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
button{cursor:pointer;font-family:inherit;border:none;outline:none;}
input,textarea{font-family:inherit;}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);}

/* ═══════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════ */
.app-shell{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;}

/* ═══════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════ */
.top-bar{
    height:var(--top-h);
    background:var(--panel);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:16px;
    padding:0 18px;flex-shrink:0;z-index:100;
}

.topbar-brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-icon{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 0 18px rgba(139,92,246,.35);
}
.brand-icon svg{width:18px;height:18px;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-name{
    font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:800;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.brand-sub{font-size:.65rem;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;}

.topbar-kpis{flex:1;display:flex;gap:8px;justify-content:center;overflow:hidden;}
.kpi-chip{
    display:flex;align-items:center;gap:9px;
    padding:6px 14px;border-radius:100px;
    background:rgba(255,255,255,.04);border:1px solid var(--border);
    transition:var(--tr);white-space:nowrap;
}
.kpi-chip:hover{border-color:var(--border2);background:rgba(59,130,246,.07);}
.kpi-chip svg{width:14px;height:14px;color:var(--cyan);flex-shrink:0;}
.kpi-chip div{display:flex;flex-direction:column;line-height:1.15;}
.kpi-chip div span{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.kpi-chip div strong{font-size:.88rem;font-weight:700;color:var(--text);}

.topbar-status{display:flex;gap:8px;flex-shrink:0;}
.status-pill{
    display:flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:100px;font-size:.72rem;
    border:1px solid var(--border);background:rgba(255,255,255,.03);
    transition:var(--tr);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text3);}
.dot.green{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.5);}
.dot.red{background:var(--red);}
.dot.amber{background:var(--gold);}

/* ═══════════════════════════════════════════════════
   MAIN 3-COLUMN LAYOUT
   ═══════════════════════════════════════════════════ */
.main-layout{
    flex:1;display:flex;overflow:hidden;
    height:calc(100vh - var(--top-h));
}

/* ── Side Panels (Left & Right) ───────────────────── */
.side-panel{
    width:var(--left-w);
    background:var(--panel);border-right:1px solid var(--border);
    display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.right-panel{width:var(--right-w);border-right:none;border-left:1px solid var(--border);}

.panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.panel-title{
    display:flex;align-items:center;gap:8px;
    font-size:.82rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;
}
.panel-title svg{width:14px;height:14px;}

.badge{
    font-size:.65rem;font-weight:600;padding:3px 10px;
    border-radius:100px;letter-spacing:.04em;
}
.badge-blue{background:rgba(59,130,246,.15);color:var(--blue);border:1px solid rgba(59,130,246,.25);}
.badge-purple{background:rgba(139,92,246,.15);color:var(--purple);border:1px solid rgba(139,92,246,.25);}

.panel-scroll{flex:1;overflow-y:auto;padding:14px 14px 20px;}

/* ── Param Blocks ─────────────────────────────────── */
.param-block{
    padding:12px;border-radius:var(--r-sm);
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    margin-bottom:10px;
}
.param-block-title{
    display:flex;align-items:center;gap:7px;
    font-size:.72rem;font-weight:600;color:var(--cyan);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;
}
.param-block-title svg{width:13px;height:13px;}

/* Sliders */
.slider-field{margin-bottom:12px;}
.slider-field:last-child{margin-bottom:0;}
.slider-label{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:5px;font-size:.78rem;color:var(--text2);
}
.slider-label em{font-size:.68rem;color:var(--text3);font-style:normal;margin-left:4px;}
.slider-label strong{font-size:.82rem;color:var(--blue);font-weight:700;}
.slider{
    width:100%;height:4px;border-radius:4px;
    background:rgba(59,130,246,.2);border:none;outline:none;
    -webkit-appearance:none;appearance:none;cursor:pointer;
}
.slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--blue);border:2px solid #fff;
    box-shadow:0 0 8px rgba(59,130,246,.5);transition:var(--tr);
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.3);}

/* Demand Inputs */
.demand-row{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:9px;gap:8px;
}
.demand-row label{font-size:.76rem;color:var(--text2);white-space:nowrap;}
.demand-row em{font-size:.65rem;color:var(--text3);font-style:normal;margin-left:3px;}
.demand-inputs{display:flex;gap:6px;}
.demand-inputs input{
    width:54px;padding:4px 6px;border-radius:6px;font-size:.78rem;
    background:rgba(255,255,255,.06);border:1px solid var(--border);
    color:var(--text);text-align:center;
    transition:var(--tr);
}
.demand-inputs input:focus{border-color:var(--blue);outline:none;background:rgba(59,130,246,.08);}

/* Presets */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.preset-btn{
    padding:8px 6px;border-radius:8px;font-size:.74rem;font-weight:500;
    background:rgba(255,255,255,.05);border:1px solid var(--border);
    color:var(--text2);transition:var(--tr);
}
.preset-btn:hover{background:rgba(59,130,246,.12);border-color:var(--blue);color:var(--text);}
.preset-btn.active{background:rgba(59,130,246,.2);border-color:var(--blue);color:var(--blue);}

/* Optimize Button */
.optimize-btn{
    width:100%;padding:13px;margin-top:14px;border-radius:12px;
    background:linear-gradient(135deg,var(--blue),var(--blue-d));
    color:#fff;font-size:.9rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:var(--tr);box-shadow:0 4px 20px rgba(59,130,246,.35);
}
.optimize-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(59,130,246,.5);}
.optimize-btn:active{transform:translateY(0);}
.optimize-btn svg{width:16px;height:16px;}
.optimize-btn.loading{opacity:.7;pointer-events:none;}
.optimize-hint{font-size:.68rem;color:var(--text3);text-align:center;margin-top:8px;}

/* ═══════════════════════════════════════════════════
   CENTER PANEL
   ═══════════════════════════════════════════════════ */
.center-panel{
    flex:1;display:flex;flex-direction:column;
    padding:14px;gap:12px;overflow-y:auto;
    background:var(--bg2);
}

/* Map */
.map-card{
    border-radius:var(--r);overflow:hidden;
    display:flex;flex-direction:column;
    height:0;flex:1.8;min-height:260px;
}
.map-header{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:14px 18px 10px;flex-shrink:0;
}
.map-header h3{
    display:flex;align-items:center;gap:8px;
    font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;
}
.map-header h3 svg{width:16px;height:16px;color:var(--cyan);}
.map-header p{font-size:.73rem;color:var(--text3);margin-top:2px;}

.map-legend{
    display:flex;gap:14px;align-items:center;
    font-size:.68rem;color:var(--text2);flex-wrap:wrap;
}
.ldot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;}
.ldot.supplier{background:var(--blue);}
.ldot.roastery{background:var(--cyan);}
.ldot.cafe{background:var(--gold);}
.lline{display:inline-block;width:20px;height:2px;background:var(--green);margin-right:5px;border-radius:2px;}

#map{flex:1;min-height:0;}

/* Glass cards */
.glass{
    background:var(--glass);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border);border-radius:var(--r);
    box-shadow:var(--shadow);
}

/* Analysis Row */
.analysis-row{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:12px;
    flex-shrink:0;
}
.a-card{
    padding:16px;display:flex;flex-direction:column;gap:10px;
    height:240px;overflow:hidden;
}
.card-title{
    display:flex;align-items:center;gap:8px;
    font-size:.8rem;font-weight:600;color:var(--text2);
    text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
}
.card-title svg{width:13px;height:13px;}

.chart-wrap{flex:1;min-height:0;position:relative;}
.chart-wrap canvas{max-height:100%;}

.breakdown-legend{
    display:flex;gap:12px;flex-shrink:0;font-size:.72rem;color:var(--text2);
}
.breakdown-legend div{display:flex;align-items:center;gap:5px;}
.breakdown-legend strong{margin-left:4px;color:var(--text);font-weight:600;}
.bd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Routes Table */
.routes-card{overflow:hidden;}
.table-wrap{flex:1;overflow-y:auto;}
table{width:100%;border-collapse:collapse;font-size:.77rem;}
thead th{
    padding:6px 8px;text-align:left;
    color:var(--text3);font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;
    border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--glass);
}
tbody td{
    padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);
    color:var(--text2);transition:background var(--tr);
}
tbody tr:hover td{background:rgba(59,130,246,.06);color:var(--text);}
.empty-tr td{text-align:center;color:var(--text3);padding:20px;font-size:.78rem;}
.vol-badge{
    display:inline-block;padding:1px 7px;border-radius:100px;
    background:rgba(6,182,212,.15);color:var(--cyan);font-size:.7rem;font-weight:600;
}
.cost-tag{color:var(--gold);font-weight:600;}

/* ═══════════════════════════════════════════════════
   RIGHT PANEL — WHAT-IF SCENARIOS
   ═══════════════════════════════════════════════════ */
/* Query Box */
.query-box{
    padding:12px;border-radius:var(--r-sm);
    background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.2);
    margin-bottom:10px;
}
.query-label{
    display:flex;align-items:center;gap:6px;
    font-size:.72rem;font-weight:600;color:var(--purple);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.query-label svg{width:12px;height:12px;}
.query-box textarea{
    width:100%;resize:none;padding:8px 10px;
    background:rgba(255,255,255,.05);border:1px solid var(--border);
    border-radius:8px;color:var(--text);font-size:.82rem;line-height:1.5;
    transition:var(--tr);
}
.query-box textarea:focus{outline:none;border-color:var(--purple);background:rgba(139,92,246,.07);}
.analyze-btn{
    width:100%;margin-top:8px;padding:10px;border-radius:9px;
    background:linear-gradient(135deg,var(--purple),#6d28d9);
    color:#fff;font-size:.82rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;gap:7px;
    transition:var(--tr);
}
.analyze-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,92,246,.4);}
.analyze-btn svg{width:14px;height:14px;}
.analyze-btn.loading{opacity:.65;pointer-events:none;}

/* Template Chips */
.template-section{margin-bottom:10px;}
.template-label{font-size:.67rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.template-chips{display:flex;flex-wrap:wrap;gap:5px;}
.t-chip{
    padding:5px 10px;border-radius:100px;font-size:.72rem;
    background:rgba(255,255,255,.04);border:1px solid var(--border);
    color:var(--text2);transition:var(--tr);
}
.t-chip:hover{background:rgba(139,92,246,.15);border-color:var(--purple);color:var(--text);}

/* Scenario List */
.sc-list-header{
    display:flex;justify-content:space-between;align-items:center;
    font-size:.72rem;font-weight:600;color:var(--text3);
    text-transform:uppercase;letter-spacing:.06em;
    padding:0 2px;margin-bottom:6px;
}
.clear-btn{
    font-size:.67rem;color:var(--red);background:none;border:none;opacity:.6;transition:var(--tr);
}
.clear-btn:hover{opacity:1;}
.sc-list{display:flex;flex-direction:column;gap:8px;min-height:40px;margin-bottom:10px;}
.empty-state{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:20px;text-align:center;color:var(--text3);gap:10px;font-size:.78rem;
}
.empty-state svg{width:28px;height:28px;opacity:.4;}

/* Scenario Cards */
.sc-card{
    border-radius:10px;overflow:hidden;
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    animation:slideIn .3s ease;transition:var(--tr);
}
.sc-card:hover{border-color:rgba(255,255,255,.13);}
.sc-card-head{
    padding:8px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
}
.sc-card-q{font-size:.76rem;font-weight:500;color:var(--text);line-height:1.4;flex:1;}
.sc-card-cost{font-size:.88rem;font-weight:700;color:var(--gold);white-space:nowrap;}
.sc-card-body{
    padding:8px 12px;border-top:1px solid var(--border);
    font-size:.72rem;color:var(--text2);line-height:1.5;
}
.sc-card-meta{
    display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;
}
.sc-tag{
    padding:2px 8px;border-radius:100px;font-size:.66rem;font-weight:600;
}
.sc-tag.good{background:rgba(34,197,94,.12);color:var(--green);}
.sc-tag.bad{background:rgba(239,68,68,.12);color:var(--red);}
.sc-tag.neutral{background:rgba(255,255,255,.07);color:var(--text2);}

/* Services */
.services-block{margin-top:10px;}
.services-title{
    display:flex;align-items:center;gap:6px;
    font-size:.7rem;font-weight:600;color:var(--text3);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.services-title svg{width:12px;height:12px;}
.svc-item{
    display:flex;align-items:center;gap:10px;padding:7px 10px;
    border-radius:8px;border:1px solid var(--border);
    background:rgba(255,255,255,.02);margin-bottom:5px;
    transition:var(--tr);
}
.svc-item:hover{border-color:var(--border2);background:rgba(59,130,246,.05);}
.svc-icon{
    width:28px;height:28px;border-radius:7px;
    background:rgba(59,130,246,.12);display:flex;align-items:center;
    justify-content:center;flex-shrink:0;
}
.svc-icon svg{width:13px;height:13px;color:var(--blue);}
.svc-info{flex:1;min-width:0;}
.svc-name{font-size:.76rem;font-weight:600;color:var(--text);}
.svc-desc{font-size:.67rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
.loading-svc{font-size:.75rem;color:var(--text3);padding:8px 0;}

/* ═══════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════ */
.loading-overlay{
    position:fixed;inset:0;background:rgba(7,11,18,.75);
    display:flex;align-items:center;justify-content:center;
    z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;
    backdrop-filter:blur(4px);
}
.loading-overlay.active{opacity:1;pointer-events:all;}
.loading-box{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    padding:32px 48px;border-radius:var(--r);
    background:var(--glass);border:1px solid var(--border2);box-shadow:var(--shadow);
}
.loading-box p{font-size:.9rem;color:var(--text2);}
.spinner{
    width:36px;height:36px;border-radius:50%;
    border:3px solid rgba(59,130,246,.2);
    border-top-color:var(--blue);
    animation:spin .8s linear infinite;
}

/* ═══════════════════════════════════════════════════
   LEAFLET OVERRIDES
   ═══════════════════════════════════════════════════ */
.leaflet-container{background:#0a0f1a !important;}
.leaflet-bar a{
    background:var(--panel) !important;color:var(--text) !important;
    border:1px solid var(--border) !important;
}
.leaflet-bar a:hover{background:rgba(59,130,246,.2) !important;}
.leaflet-popup-content-wrapper{
    background:var(--glass) !important;border:1px solid var(--border) !important;
    color:var(--text) !important;border-radius:10px !important;
    backdrop-filter:blur(12px);
}
.leaflet-popup-tip{background:var(--panel) !important;}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════ */
@keyframes spin {to{transform:rotate(360deg);}}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}
    70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}
.dot.green{animation:pulse 2.2s infinite;}