/* ───────────────────────────────────────────── LOGISTICS DASHBOARD — iLogist v2 підключити в після custom.css ───────────────────────────────────────────── */ .db-section{padding:72px 0 80px;background:#07090d} .db-cnt{max-width:1280px;margin:0 auto;padding:0 48px} .db-lbl{display:flex;align-items:center;gap:14px;margin-bottom:20px} .db-line{flex:1;height:.5px;background:rgba(255,255,255,.06)} .db-tag{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#ba7517;white-space:nowrap;font-family:'Poppins',sans-serif} .db-h2{font-family:'Bebas Neue','Impact',sans-serif;font-size:clamp(28px,3.5vw,46px);letter-spacing:.04em;line-height:.95;margin-bottom:8px;font-weight:400;color:#fff} .db-h2 em{font-style:normal;color:#ef9f27} .db-sub{font-size:15px;line-height:1.7;max-width:580px;margin-bottom:36px;color:rgba(255,255,255,.6);font-family:'Poppins',sans-serif} /* ── WRAP ── */ .db-wrap{display:flex;gap:24px;align-items:flex-start;font-family:'Poppins',sans-serif} .db-desk{flex:1;background:#0d1117;border:.5px solid rgba(255,255,255,.06);border-radius:10px;padding:16px;min-width:0} /* top bar */ .db-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:.5px solid rgba(255,255,255,.06)} .db-logo{font-size:12px;font-weight:600;color:#ef9f27;letter-spacing:1px} .db-user{display:flex;align-items:center;gap:7px} .db-av{width:24px;height:24px;border-radius:50%;background:rgba(239,159,39,.15);border:.5px solid rgba(239,159,39,.3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#ef9f27} .db-uname{font-size:11px;color:rgba(255,255,255,.6)} .db-time{font-size:11px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums} /* KPI */ .db-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px} .db-kpi{background:#07090d;border:.5px solid rgba(255,255,255,.06);border-radius:8px;padding:10px 10px 8px;position:relative;overflow:hidden} .db-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px} .db-kpi.ok::before{background:#4ade80} .db-kpi.warn::before{background:#ef9f27} .db-kpi.bad::before{background:#e24b4a} .db-kpi-lbl{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .db-kpi-val{font-size:20px;font-weight:500;line-height:1;margin-bottom:2px} .db-kpi.ok .db-kpi-val{color:#4ade80} .db-kpi.warn .db-kpi-val{color:#ef9f27} .db-kpi.bad .db-kpi-val{color:#e24b4a} .db-kpi-sub{font-size:10px;color:rgba(255,255,255,.5)} .db-kpi-trend{position:absolute;right:8px;top:8px;font-size:10px;font-weight:500} .db-kpi.ok .db-kpi-trend{color:rgba(74,222,128,.7)} .db-kpi.warn .db-kpi-trend{color:rgba(239,159,39,.7)} .db-kpi.bad .db-kpi-trend{color:rgba(226,75,74,.7)} /* main 2-col grid */ .db-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} /* block base */ .db-block{background:#07090d;border:.5px solid rgba(255,255,255,.06);border-radius:8px;padding:10px} .db-block-title{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between} .db-block-title span{color:#ef9f27} /* bar chart */ .db-bars{display:flex;align-items:flex-end;gap:4px;height:52px} .db-bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1} .db-bar-fill{width:100%;border-radius:2px 2px 0 0} .db-bar-lbl{font-size:9px;color:rgba(255,255,255,.5)} /* chain */ .db-chain-row{display:flex;align-items:center;gap:0;margin-bottom:7px;padding-bottom:7px;border-bottom:.5px solid rgba(255,255,255,.04)} .db-chain-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} .db-chain-name{font-size:12px;color:rgba(255,255,255,.7);flex:1} .db-chain-bar{width:58px;height:3px;background:rgba(255,255,255,.07);border-radius:2px;margin:0 8px;overflow:hidden} .db-chain-fill{height:100%;border-radius:2px} .db-chain-pct{font-size:11px;font-weight:500;width:32px;text-align:right} .db-badge{font-size:9px;font-weight:600;padding:2px 5px;border-radius:3px;flex-shrink:0;margin-left:5px;letter-spacing:.3px} .db-badge.ok{background:rgba(74,222,128,.1);color:rgba(74,222,128,.85)} .db-badge.warn{background:rgba(239,159,39,.1);color:#ef9f27} .db-badge.bad{background:rgba(226,75,74,.1);color:#e24b4a} /* alerts */ .db-alert-row{display:flex;align-items:flex-start;gap:7px;margin-bottom:7px;padding-bottom:7px;border-bottom:.5px solid rgba(255,255,255,.04)} .db-alert-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} .db-alert-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:3px} .db-dot-bad{background:#e24b4a} .db-dot-warn{background:#ef9f27} .db-dot-ok{background:#4ade80} .db-alert-txt{font-size:11px;color:rgba(255,255,255,.6);line-height:1.4;flex:1} .db-alert-time{font-size:10px;color:rgba(255,255,255,.45);flex-shrink:0;font-variant-numeric:tabular-nums} /* bottom right col */ .db-br-col{display:flex;flex-direction:column;gap:8px} /* live counters */ .db-live-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .db-live-cell{background:#07090d;border:.5px solid rgba(255,255,255,.06);border-radius:6px;padding:8px;text-align:center} .db-live-n{font-size:18px;font-weight:500;color:#ef9f27;line-height:1;font-variant-numeric:tabular-nums} .db-live-l{font-size:10px;color:rgba(255,255,255,.5);margin-top:2px} /* donut */ .db-donut-wrap{display:flex;align-items:center;gap:10px} .db-donut-legend{display:flex;flex-direction:column;gap:5px;flex:1} .db-legend-row{display:flex;align-items:center;gap:5px} .db-legend-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .db-legend-lbl{font-size:10px;color:rgba(255,255,255,.6);flex:1} .db-legend-pct{font-size:11px;font-weight:500} /* ── PHONE ── */ .db-phone-wrap{width:154px;flex-shrink:0} .db-phone{background:#080808;border-radius:22px;border:2px solid #1c1c1c;padding:12px 9px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.04)} .db-notch{width:42px;height:6px;background:#1c1c1c;border-radius:3px;margin:0 auto 11px} .db-mob-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .db-mob-gr{font-size:9px;color:rgba(255,255,255,.5)} .db-mob-nm{font-size:11px;font-weight:500;color:#fff} .db-mob-bell{width:19px;height:19px;background:rgba(239,159,39,.12);border-radius:50%;display:flex;align-items:center;justify-content:center} .db-mob-kpi{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px} .db-mkpi{background:#0d1117;border:.5px solid rgba(255,255,255,.06);border-radius:6px;padding:7px} .db-mkpi-lbl{font-size:8px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px} .db-mkpi-val{font-size:14px;font-weight:500;line-height:1} .db-mkpi.ok .db-mkpi-val{color:#4ade80} .db-mkpi.warn .db-mkpi-val{color:#ef9f27} .db-mkpi.bad .db-mkpi-val{color:#e24b4a} .db-mob-sl{font-size:9px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 5px} .db-spark{display:flex;align-items:flex-end;gap:2px;height:28px;margin-bottom:8px} .db-spark-bar{flex:1;border-radius:1px 1px 0 0} .db-mob-alert{display:flex;align-items:flex-start;gap:5px;background:#0d1117;border-radius:5px;padding:6px 7px;margin-bottom:4px} .db-mob-adot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:2px} .db-mob-atxt{font-size:9px;color:rgba(255,255,255,.6);line-height:1.35} .db-mob-nav{display:flex;justify-content:space-around;padding-top:8px;border-top:.5px solid rgba(255,255,255,.06);margin-top:8px} .db-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px} .db-nav-ic{font-size:13px;color:rgba(255,255,255,.45)} .db-nav-ic.active{color:#ef9f27} .db-nav-lbl{font-size:8px;color:rgba(255,255,255,.45)} .db-nav-lbl.active{color:#ef9f27} /* ── MOBILE ── */ @media(max-width:991px){ .db-cnt{padding:0 24px} .db-wrap{flex-direction:column} .db-phone-wrap{width:100%;max-width:340px;margin:0 auto} .db-phone{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-radius:12px;padding:16px} .db-notch{display:none} .db-mob-nav{grid-column:1/-1} .db-kpi-row{grid-template-columns:1fr 1fr} .db-kpi:nth-child(2){border-right:none} .db-grid{grid-template-columns:1fr} } @media(max-width:575px){ .db-kpi-row{grid-template-columns:1fr 1fr} .db-live-row{grid-template-columns:repeat(3,1fr)} }