/* ═══════════════════════════════════════════════
   TDL Buletine Portuare — Styles v2.0
   Dark maritime industrial theme
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e17;--bg-card:#111827;--bg-hover:#1a2332;
  --border:#1e293b;--border-light:#334155;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;
  --accent:#0ea5e9;--accent-d:#0284c7;--accent-l:#38bdf8;
  --green:#10b981;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;
  --radius:8px;
}
body{font-family:'Inter','Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}
h1,h2,h3{font-family:'JetBrains Mono','SF Mono',monospace}
input,select,button{font-family:inherit}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}

/* ─── Layout ───────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:220px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s}
.sidebar.collapsed{width:56px}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow:auto;padding:20px}
.page-content{display:flex;flex-direction:column;gap:20px}

/* ─── Sidebar ──────────────────────────────── */
.sidebar-brand{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;min-height:56px}
.brand-logo{width:32px;height:32px;border-radius:4px;flex-shrink:0;object-fit:contain}
.collapsed .brand-logo{width:28px;height:28px}
.brand-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.brand-sub{font-size:10px;color:var(--text3);white-space:nowrap}
.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}
.sidebar-divider{border-bottom:1px solid var(--border);margin:8px 12px}
.sidebar-group{padding:10px 16px 4px;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:2px;font-weight:600}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:var(--text2);border-right:2px solid transparent;transition:all .15s;font-size:12px}
.sidebar-item:hover{background:rgba(14,165,233,.06);color:var(--text)}
.sidebar-item.active{color:var(--accent);background:rgba(14,165,233,.1);border-right-color:var(--accent)}
.sidebar-user{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:50%;background:rgba(14,165,233,.2);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:11px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.user-info{flex:1;overflow:hidden}
.user-name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--text3)}
.logout-btn{cursor:pointer;color:var(--text3);flex-shrink:0;padding:4px}
.logout-btn:hover{color:var(--red)}

/* ─── Filters ──────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 20px;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.filters-label{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:4px}
.filters select,.filters input{padding:5px 10px;font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);outline:none}
.filters select:focus,.filters input:focus{border-color:var(--accent)}

/* ─── KPI Cards ────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.kpi-4{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;border-top:3px solid var(--accent)}
.kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}
.kpi-value{font-size:26px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace}
.kpi-hint{font-size:11px;color:var(--text2);margin-top:4px}

/* ─── Cards ────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chart-card{padding:18px}
.chart-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px}

/* ─── Tables ───────────────────────────────── */
.tbl-card{overflow:hidden}
.tbl-head{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.tbl-title{font-size:13px;font-weight:600;color:var(--text)}
.tbl-count{font-weight:400;color:var(--text3);font-size:12px}
.tbl-actions{display:flex;gap:6px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{padding:8px 14px;text-align:left;color:var(--text3);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--bg-card)}
td{padding:8px 14px;color:var(--text2);white-space:nowrap;border-bottom:1px solid var(--border);font-size:12px}
tr:hover td{background:rgba(255,255,255,.02)}
.empty{padding:24px;text-align:center;color:var(--text3)}

/* ─── Badges ───────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600}
.badge-blue{background:rgba(14,165,233,.15);color:var(--accent-l)}
.badge-amber{background:rgba(245,158,11,.15);color:var(--amber)}
.badge-green{background:rgba(16,185,129,.15);color:var(--green)}
.badge-purple{background:rgba(139,92,246,.15);color:var(--purple)}
.badge-red{background:rgba(239,68,68,.15);color:var(--red)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.dot-green{background:var(--green)}.dot-red{background:var(--red)}

/* ─── Buttons ──────────────────────────────── */
.btn-sm{padding:4px 10px;font-size:11px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text2);cursor:pointer;transition:all .15s}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{padding:10px 18px;background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:opacity .15s}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

/* ─── Grid ─────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}.kpi-4{grid-template-columns:repeat(2,1fr)}}

/* ─── Section headers ──────────────────────── */
.section-header{margin-bottom:4px}
.section-header h2{font-size:18px;font-weight:700;color:var(--text)}
.section-header p{font-size:12px;color:var(--text3);margin-top:2px}

/* ─── Settings ─────────────────────────────── */
.setting-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--text2)}
.setting-row:last-child{border-bottom:none}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px}

/* ─── Forms (login, add user) ──────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.field input,.field select{width:100%;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;outline:none;transition:border-color .15s}
.field input:focus,.field select:focus{border-color:var(--accent)}

/* ─── Login ────────────────────────────────── */
.login-bg{min-height:100vh;background:linear-gradient(135deg,var(--bg) 0%,#0f172a 50%,#1e1b4b 100%);display:flex;align-items:center;justify-content:center}
.login-box{width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:36px;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.login-brand{text-align:center;margin-bottom:28px}
.login-logo{max-width:240px;height:auto;margin-bottom:16px}
.login-eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
.login-title{font-size:22px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace}
.login-sub{font-size:11px;color:var(--text3);margin-top:3px}
.login-err{color:var(--red);font-size:12px;margin-bottom:10px}

/* ─── Loading ──────────────────────────────── */
.loading{padding:40px;text-align:center;color:var(--text3);font-size:14px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.loading{animation:pulse 1.5s infinite}

/* ─── Recharts overrides ───────────────────── */
.recharts-default-legend{font-size:11px!important}
.recharts-legend-item-text{color:var(--text2)!important;font-size:11px!important}

/* ═══ PORT MAP ═══ */
.map-tooltip {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-family: Inter, system-ui, sans-serif !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.map-tooltip::before {
  border-top-color: #334155 !important;
}
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
.leaflet-popup-tip {
  background: #ffffff !important;
}