/* ============================================================
   OceanHub shared client theme — header (navbar), sidebar, footer
   Linked from client pages; overrides the shared includes' base styles.
============================================================ */
:root{
  --sky:#B8E1F5; --sky-2:#d7eefb; --sky-soft:#eaf6fd;
  --ocean:#2f82c4; --ocean-dp:#0f3e74;
  --bg:#eef5fb; --card:#ffffff; --ink:#112338; --muted:#5e7088; --line:#e4edf6;
  --brand:#2a73b0; --brand-dp:#124a86; --brand-soft:#eaf3fc; --accent:#1f9fc2;
  --ring:rgba(42,115,176,.22);
  --shadow-sm:0 2px 8px rgba(16,50,95,.05); --shadow:0 8px 24px rgba(16,50,95,.08);
  --shadow-md:0 16px 36px rgba(16,50,95,.12); --shadow-lg:0 22px 48px rgba(16,50,95,.14);
}

/* ===== Navbar (header) — align + sexy buttons ===== */
.navbar{ padding-left:0 !important; padding-right:0 !important; }
.navbar .container-fluid{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:20px !important; padding-right:20px !important; }
.navbar .nav-buttons .btn{
  background:#ffffff !important; color:var(--brand-dp) !important; border:1px solid #d9e8f6 !important;
  border-radius:999px !important; font-weight:600 !important; white-space:nowrap !important;
  box-shadow:0 2px 8px rgba(16,50,95,.06) !important; transition:all .25s ease !important;
}
.navbar .nav-buttons .btn:not([href$=".apk"]):hover{
  background:linear-gradient(135deg,var(--brand),var(--ocean-dp)) !important; color:#fff !important;
  border-color:transparent !important; transform:translateY(-2px) !important; box-shadow:0 8px 18px rgba(18,74,134,.26) !important;
}
.navbar .nav-buttons .btn::before, .navbar .nav-buttons .btn::after{ display:none !important; }
.navbar .welcome-text{ background:var(--brand-soft) !important; color:var(--brand-dp) !important; border:1px solid #d9e8f6 !important; }
.navbar .welcome-text strong{ color:var(--brand-dp) !important; }
.navbar .sidebar-toggle{ background:#fff !important; color:var(--brand-dp) !important; border:1px solid #d9e8f6 !important; }
.navbar .sidebar-toggle:hover{ background:var(--brand) !important; color:#fff !important; }
/* "Get App" — premium ocean gradient, no blink */
.navbar .nav-buttons a[href$=".apk"],
.navbar .nav-buttons a[href$=".apk"]:hover,
.navbar .nav-buttons a[href$=".apk"]:focus{
  background:linear-gradient(135deg,#1fa6cc 0%,#2a73b0 55%,#124a86 100%) !important;
  background-size:100% 100% !important; background-position:0 0 !important; animation:none !important;
  border:1px solid rgba(255,255,255,.22) !important; color:#fff !important; border-radius:999px !important;
  filter:none !important; transition:transform .25s ease, box-shadow .25s ease !important;
}
.navbar .nav-buttons a[href$=".apk"]{ box-shadow:0 6px 16px rgba(31,159,194,.30) !important; white-space:nowrap !important; }
.navbar .nav-buttons a[href$=".apk"] span{ white-space:nowrap !important; }
.navbar .nav-buttons a[href$=".apk"]:hover{ transform:translateY(-2px) !important; box-shadow:0 10px 22px rgba(18,74,134,.36) !important; }
.navbar .nav-buttons a[href$=".apk"]::before, .navbar .nav-buttons a[href$=".apk"]::after{ display:none !important; }

/* ===== Sidebar (slide-in) — modern ocean ===== */
#sidebar{ background:linear-gradient(185deg,#0c3a68,#0a2f5c 55%,#06213f) !important; color:#dbe9f7 !important; }
#sidebar h5{ color:#fff !important; }
#sidebar .nav-link, #sidebar ul li a{ background:rgba(255,255,255,.07) !important; color:#eaf4ff !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:11px !important; font-weight:500 !important; margin-bottom:8px !important; transition:all .22s ease !important; }
#sidebar .nav-link i, #sidebar ul li a i{ color:#8fc3ee !important; }
#sidebar .nav-link:hover, #sidebar ul li a:hover{ background:linear-gradient(135deg,var(--ocean),var(--brand-dp)) !important; color:#fff !important; border-color:transparent !important; transform:translateX(4px) !important; box-shadow:0 8px 16px rgba(31,159,194,.26) !important; }
#sidebar .nav-link:hover i, #sidebar ul li a:hover i{ color:#fff !important; }
#sidebar .nav-link::before{ display:none !important; }
#sidebar .btn-logout, #sidebar .logout-btn{
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.3) !important; color:#eaf4ff !important;
  border-radius:11px !important; transition:all .25s ease !important;
}
#sidebar .btn-logout:hover, #sidebar .logout-btn:hover{ background:#fff !important; color:var(--brand-dp) !important; transform:translateY(-2px) !important; }

/* ===== Footer — classy deep ocean ===== */
.footer{ background:linear-gradient(135deg,#0c3a68 0%,#07233f 58%,#05182c 100%) !important; color:#cfe0f2 !important; }
.footer .footer-section h3{ color:#ffffff !important; }
.footer .footer-section h3::after{ background:var(--accent) !important; }
.footer .footer-section p, .footer .footer-section ul li a,
.footer .footer-section.contact i, .footer .footer-section ul li a i{ color:#bcd2e8 !important; }
.footer .footer-section ul li a:hover{ color:#ffffff !important; }
.footer .social-icons a{ background:rgba(255,255,255,.08) !important; color:#dfeaf6 !important; border:1px solid rgba(255,255,255,.14) !important; }
.footer .social-icons a:hover{ background:var(--accent) !important; color:#06213f !important; }
.footer .footer-bottom{ color:#9fb6d2 !important; border-top:1px solid rgba(255,255,255,.1) !important; }
.footer .back-to-top{ background:var(--accent) !important; color:#06213f !important; }