/* ===========================================================================
   STL Digital Port Services — design system
   Maritime corporate theme (deep navy + teal accent)
   =========================================================================== */
:root {
    --stl-navy: #0a2540;
    --stl-navy-700: #0f3057;
    --stl-blue: #1668c1;
    --stl-teal: #0ea5a5;
    --stl-teal-600: #0d9488;
    --stl-amber: #f59e0b;
    --stl-light: #f5f8fb;
    --stl-border: #e2e8f0;
    --stl-muted: #64748b;
    --bs-primary: #0a2540;
    --bs-primary-rgb: 10, 37, 64;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
    background: #fff;
}

a { text-decoration: none; }

.text-teal { color: var(--stl-teal) !important; }
.bg-navy { background-color: var(--stl-navy) !important; }
.bg-navy-700 { background-color: var(--stl-navy-700) !important; }
.bg-light-blue { background-color: var(--stl-light) !important; }

.btn-primary {
    background-color: var(--stl-navy);
    border-color: var(--stl-navy);
}
.btn-primary:hover { background-color: var(--stl-navy-700); border-color: var(--stl-navy-700); }
.btn-teal { background-color: var(--stl-teal); border-color: var(--stl-teal); color: #fff; }
.btn-teal:hover { background-color: var(--stl-teal-600); border-color: var(--stl-teal-600); color: #fff; }
.btn-outline-light-teal { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light-teal:hover { background:#fff; color: var(--stl-navy); }

/* ---------- Public top bar & navbar ---------- */
.stl-topbar { background: var(--stl-navy); color: #cbd5e1; font-size: .82rem; }
.stl-topbar a { color: #cbd5e1; }
.stl-topbar a:hover { color: #fff; }

.stl-navbar { background:#fff; box-shadow: 0 2px 14px rgba(15,23,42,.06); }
.stl-navbar .navbar-brand strong { color: var(--stl-navy); }
.stl-navbar .nav-link { color: #334155; font-weight: 500; font-size: .92rem; padding: .6rem .85rem !important; }
.stl-navbar .nav-link:hover, .stl-navbar .nav-link.active { color: var(--stl-teal); }

.brand-badge {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(135deg, var(--stl-navy), var(--stl-teal));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; letter-spacing:.5px;
}

/* ---------- Hero ---------- */
.stl-hero {
    position: relative; color:#fff;
    background:
        linear-gradient(120deg, rgba(10,37,64,.92), rgba(10,37,64,.55)),
        url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    padding: 6rem 0;
}
.stl-hero h1 { font-weight: 800; line-height: 1.1; }
.stl-section { padding: 4.5rem 0; }
.stl-section-sm { padding: 3rem 0; }

.section-eyebrow {
    color: var(--stl-teal); font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; font-size: .78rem;
}

/* ---------- Cards ---------- */
.service-card, .feature-card {
    border: 1px solid var(--stl-border); border-radius: 14px; background:#fff;
    transition: transform .18s ease, box-shadow .18s ease; height: 100%;
}
.service-card:hover, .feature-card:hover {
    transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15,23,42,.10);
    border-color: transparent;
}
.service-icon {
    width: 56px; height: 56px; border-radius: 12px; font-size: 1.6rem;
    display:flex; align-items:center; justify-content:center;
    background: rgba(14,165,165,.12); color: var(--stl-teal);
}
.stat-card { border-radius: 14px; border: 1px solid var(--stl-border); }
.stat-card .stat-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

.page-hero {
    background: linear-gradient(120deg, var(--stl-navy), var(--stl-navy-700));
    color:#fff; padding: 3.5rem 0;
}
.page-hero .breadcrumb a { color:#cbd5e1; }
.page-hero .breadcrumb-item.active { color:#fff; }

/* ---------- Footer ---------- */
.stl-footer { background: var(--stl-navy); color:#94a3b8; }
.stl-footer a { color:#94a3b8; }
.stl-footer a:hover { color:#fff; }
.stl-footer h6 { color:#fff; letter-spacing:.5px; }
.stl-footer .footer-bottom { background: rgba(0,0,0,.2); }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%; background:#25d366; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.7rem;
    box-shadow: 0 8px 20px rgba(37,211,102,.45);
}
.wa-float:hover { color:#fff; transform: scale(1.05); }

/* ===========================================================================
   Dashboard shell (admin / client / operation)
   =========================================================================== */
.dash-body { background: var(--stl-light); }
.dash-sidebar {
    width: 256px; background: var(--stl-navy); color:#cbd5e1;
    position: fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index: 1030;
}
.dash-sidebar .brand { padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.dash-sidebar .nav-section { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:#64748b; padding:1rem 1.25rem .35rem; }
.dash-sidebar .nav-link { color:#cbd5e1; padding:.6rem 1.25rem; font-size:.9rem; display:flex; align-items:center; gap:.65rem; border-left:3px solid transparent; }
.dash-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color:#fff; }
.dash-sidebar .nav-link.active { background: rgba(14,165,165,.16); color:#fff; border-left-color: var(--stl-teal); }
.dash-main { margin-left: 256px; min-height:100vh; }
.dash-topbar { background:#fff; border-bottom:1px solid var(--stl-border); padding:.7rem 1.5rem; position:sticky; top:0; z-index:1020; }
.dash-content { padding: 1.5rem; }
.avatar-circle { width:38px; height:38px; border-radius:50%; background:var(--stl-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; }

@media (max-width: 991.98px) {
    .dash-sidebar { left: -256px; transition: left .2s ease; }
    .dash-sidebar.open { left: 0; }
    .dash-main { margin-left: 0; }
}

.card { border: 1px solid var(--stl-border); border-radius: 12px; }
.card-header { background:#fff; border-bottom:1px solid var(--stl-border); font-weight:600; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.timeline { list-style:none; padding-left:0; }
.timeline li { position:relative; padding-left:1.5rem; padding-bottom:1rem; border-left:2px solid var(--stl-border); margin-left:.4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--stl-teal); }