/*
 * Help Link International – Admin Theme
 * Palette extracted from logo:
 *   Primary Blue  : #1B4F9B  (globe, "H" letterform, body text)
 *   Accent Green  : #3A9E3F  (leaf / "L" letterform, "INTERNATIONAL" tagline)
 *   Dark Navy     : #102D5E  (sidebar gradient base)
 *   Light Teal    : #EAF4FF  (content-page background)
 * NO PHP / backend files are touched.
 */

/* ───────────────── Google Font ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --hl-blue       : #1B4F9B;
  --hl-blue-dark  : #102D5E;
  --hl-blue-light : #2F6BC7;
  --hl-green      : #3A9E3F;
  --hl-green-light: #4FC254;
  --hl-white      : #FFFFFF;
  --hl-bg         : #EAF4FF;
  --hl-text       : #1e293b;
  --hl-muted      : #64748b;
  --hl-border     : #d0dff5;
  --hl-sidebar-w  : 240px;
}

/* ───────────────── Base ───────────────── */
body,
html {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--hl-bg) !important;
  color: var(--hl-text) !important;
}

/* ───────────────── TOP NAV-BAR ───────────────── */
.navbar-custom {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-dark) 100%) !important;
  box-shadow: 0 2px 12px rgba(27,79,155,.35) !important;
  border-bottom: 3px solid var(--hl-green) !important;
}

/* Logo box inside top-bar */
.navbar-custom .logo-box {
  background: var(--hl-white) !important;
  border-right: 3px solid var(--hl-green) !important;
}

/* Hamburger / toggle button */
.navbar-custom .button-menu-mobile {
  color: var(--hl-white) !important;
}
.navbar-custom .button-menu-mobile:hover {
  color: var(--hl-green-light) !important;
}

/* Username in top-bar */
.navbar-custom .username b {
  color: var(--hl-white) !important;
}

/* User avatar dropdown */
.navbar-custom .nav-link {
  color: var(--hl-white) !important;
}
.navbar-custom .nav-link:hover {
  color: var(--hl-green-light) !important;
}

/* ───────────────── LEFT SIDEBAR ───────────────── */
.left-side-menu {
  background: linear-gradient(180deg, var(--hl-blue) 0%, var(--hl-blue-dark) 100%) !important;
  box-shadow: 4px 0 20px rgba(16,45,94,.4) !important;
}

/* All sidebar links */
.left-side-menu #sidebar-menu ul li a {
  color: rgba(255,255,255,.82) !important;
  transition: all .2s ease;
  border-left: 3px solid transparent;
  display: block;
}
.left-side-menu #sidebar-menu ul li a span,
.left-side-menu #sidebar-menu ul li a i {
  color: inherit !important;
  background: none !important;
  border: none !important;
}

/* Hover state — only on the <a> tag, never on children */
.left-side-menu #sidebar-menu ul li a:hover {
  color: var(--hl-white) !important;
  background: rgba(255,255,255,.12) !important;
  border-left: 3px solid var(--hl-green-light) !important;
}
.left-side-menu #sidebar-menu ul li a:hover span,
.left-side-menu #sidebar-menu ul li a:hover i {
  color: var(--hl-white) !important;
  background: none !important;
  border: none !important;
}

/* Active link — covers all MetisMenu variants */
.left-side-menu #sidebar-menu ul li.active > a,
.left-side-menu #sidebar-menu ul li.mm-active > a,
.left-side-menu #sidebar-menu > ul > li > a.active,
.left-side-menu #sidebar-menu > ul > li > a.mm-active,
#sidebar-menu > ul > li > a.active,
#sidebar-menu li.mm-active > a {
  color: var(--hl-white) !important;
  background: rgba(58,158,63,.22) !important;
  border-left: 3px solid var(--hl-green-light) !important;
}
.left-side-menu #sidebar-menu ul li.active > a span,
.left-side-menu #sidebar-menu ul li.active > a i,
.left-side-menu #sidebar-menu ul li.mm-active > a span,
.left-side-menu #sidebar-menu ul li.mm-active > a i,
#sidebar-menu > ul > li > a.active span,
#sidebar-menu > ul > li > a.active i,
#sidebar-menu li.mm-active > a > span.menu-arrow {
  color: var(--hl-white) !important;
  background: none !important;
  border: none !important;
}

/* Sub-menu active */
.nav-second-level li.mm-active > a,
.nav-third-level li.mm-active > a,
.left-side-menu .nav-second-level li.mm-active > a,
.left-side-menu .nav-third-level li.mm-active > a {
  color: var(--hl-green-light) !important;
  background: none !important;
}

/* Sub-menu (nav-second-level) */
.left-side-menu .nav-second-level li a {
  color: rgba(255,255,255,.70) !important;
  font-size: .84rem;
}
.left-side-menu .nav-second-level li a:hover {
  color: var(--hl-white) !important;
  background: rgba(255,255,255,.10) !important;
}

/* Menu arrow colour */
.left-side-menu .menu-arrow {
  color: rgba(255,255,255,.55) !important;
}

/* Scrollbar in sidebar */
.left-side-menu::-webkit-scrollbar { width: 4px; }
.left-side-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

/* ───────────────── CONTENT PAGE ───────────────── */
.content-page {
  background-color: var(--hl-bg) !important;
}

/* Page title */
.page-title {
  color: var(--hl-blue) !important;
  font-weight: 700 !important;
}

/* Breadcrumb */
.breadcrumb-item a {
  color: var(--hl-blue-light) !important;
}
.breadcrumb-item.active {
  color: var(--hl-muted) !important;
}

/* ───────────────── CARDS & CARD-BOX ───────────────── */
.card {
  border: 1px solid var(--hl-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(27,79,155,.08) !important;
  background: var(--hl-white) !important;
  color: var(--hl-text) !important;
}
.card-body {
  background: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border-radius: 12px !important;
}
.card-box {
  background-color: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(27,79,155,.08) !important;
}
.card-header {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-light) 100%) !important;
  color: var(--hl-white) !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}
.card-footer {
  background: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border-top: 1px solid var(--hl-border) !important;
}

/* ───────────────── FORMS: LABELS ───────────────── */
label,
.form-group label,
.card label,
.card-box label,
.card-body label {
  color: var(--hl-text) !important;
  font-weight: 600;
  font-size: .88rem;
}

/* ───────────────── FORMS: INPUTS / SELECT / TEXTAREA ───────────────── */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.custom-select {
  background-color: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border: 1px solid #c8d6e5 !important;
  border-radius: 8px !important;
}
.form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
.form-control::-ms-input-placeholder {
  color: #94a3b8 !important;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.custom-select:focus {
  border-color: var(--hl-blue-light) !important;
  box-shadow: 0 0 0 3px rgba(27,79,155,.18) !important;
  background-color: var(--hl-white) !important;
  color: var(--hl-text) !important;
}

/* Input group addons */
.input-group-text {
  background-color: #f1f5f9 !important;
  border: 1px solid #c8d6e5 !important;
  color: var(--hl-text) !important;
}

/* Disabled / readonly inputs */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #f1f5f9 !important;
  color: var(--hl-muted) !important;
}

/* ───────────────── GENERAL TEXT COLORS ───────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--hl-text) !important;
}
p, span, div, td, th, li {
  color: inherit;
}
.text-muted {
  color: var(--hl-muted) !important;
}

/* ───────────────── TABLES (ensure readable) ───────────────── */
.table {
  color: var(--hl-text) !important;
}
.table td, .table th {
  color: var(--hl-text) !important;
  border-color: var(--hl-border) !important;
}
.table thead th {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-light) 100%) !important;
  color: var(--hl-white) !important;
  font-weight: 600;
  border: none !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(27,79,155,.04) !important;
}
.table tbody tr:hover {
  background-color: rgba(27,79,155,.08) !important;
}

/* ───────────────── MODALS ───────────────── */
.modal-content {
  background-color: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border-radius: 12px !important;
}
.modal-header {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-light) 100%) !important;
  color: var(--hl-white) !important;
  border-radius: 12px 12px 0 0 !important;
}
.modal-header .modal-title {
  color: var(--hl-white) !important;
}
.modal-header .close {
  color: var(--hl-white) !important;
  opacity: .8;
}
.modal-body {
  background: var(--hl-white) !important;
  color: var(--hl-text) !important;
}
.modal-footer {
  background: var(--hl-white) !important;
  border-top: 1px solid var(--hl-border) !important;
}

/* ───────────────── DROPDOWN MENUS ───────────────── */
.dropdown-menu {
  background-color: var(--hl-white) !important;
  border: 1px solid var(--hl-border) !important;
  box-shadow: 0 8px 24px rgba(27,79,155,.12) !important;
}
.dropdown-item {
  color: var(--hl-text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--hl-bg) !important;
  color: var(--hl-blue) !important;
}
.dropdown-header {
  color: var(--hl-muted) !important;
}

/* Profile dropdown */
.profile-dropdown .dropdown-header,
.profile-dropdown .noti-title {
  background: var(--hl-blue) !important;
  color: #fff !important;
}

/* ───────────────── DATATABLE / SEARCH ───────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--hl-white) !important;
  color: var(--hl-text) !important;
  border: 1px solid #c8d6e5 !important;
  border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--hl-text) !important;
}

/* ───────────────── WIDGET CARDS ───────────────── */
.widget-box-three .card-body {
  background: var(--hl-white) !important;
}
.widget-box-three .card-body p {
  color: var(--hl-muted) !important;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .5px;
}
.widget-box-three .card-body h2 {
  color: var(--hl-text) !important;
  font-weight: 700;
}

/* ───────────────── BUTTONS ───────────────── */
.btn-primary,
.btn-info,
.btn-bordered {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-light) 100%) !important;
  border-color: var(--hl-blue) !important;
  color: var(--hl-white) !important;
  border-radius: 8px !important;
  font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover,
.btn-info:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(27,79,155,.35) !important;
}

/* Sign-in button (login.php uses btn-danger, remap to blue) */
.btn-danger {
  background: linear-gradient(135deg, var(--hl-blue) 0%, var(--hl-blue-light) 100%) !important;
  border-color: var(--hl-blue) !important;
  color: var(--hl-white) !important;
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: .4px;
  transition: transform .15s, box-shadow .15s;
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(27,79,155,.35) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--hl-green) 0%, var(--hl-green-light) 100%) !important;
  border-color: var(--hl-green) !important;
  border-radius: 8px !important;
  font-weight: 600;
}



/* ───────────────── BADGES ───────────────── */
.badge-primary { background-color: var(--hl-blue) !important; }
.badge-success { background-color: var(--hl-green) !important; }

/* ───────────────── FOOTER ───────────────── */
.footer {
  background: var(--hl-white) !important;
  border-top: 2px solid var(--hl-border) !important;
  color: var(--hl-muted) !important;
  font-size: .85rem;
}

/* ───────────────── LOGIN PAGE ───────────────── */
/* Beautiful gradient background for login */
.bgimg-1 {
  background: linear-gradient(135deg, var(--hl-blue-dark) 0%, var(--hl-blue) 60%, #2563c7 100%) !important;
  min-height: 100vh;
}
.bgimg-1::before {
  background: transparent !important; /* remove dark overlay, gradient is enough */
}

/* Login card dark-blue glass effect */
.loginFieldAreainner .card {
  background: rgba(5, 21, 44, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.45) !important;
}

/* Logo area in login card */
.loginFieldAreainner .account-logo-box {
  background: rgba(255,255,255,.06) !important;
  border-radius: 18px 18px 0 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Login input fields */
.loginFieldAreainner .card .form-control {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.loginFieldAreainner .card .form-control:focus {
  border-color: var(--hl-green-light) !important;
  box-shadow: 0 0 0 3px rgba(58,158,63,.25) !important;
  background: rgba(255,255,255,.13) !important;
}

/* Labels — all labels inside login card stay white */
.loginFieldAreainner .card label,
.loginFieldAreainner .card label.text-white {
  color: rgba(255,255,255,.85) !important;
  font-size: .88rem;
  font-weight: 500;
}

/* Login card body text stays white */
.loginFieldAreainner .card,
.loginFieldAreainner .card .card-body {
  color: #fff !important;
  background: rgba(5,21,44,0.85) !important;
}

/* Eye icon */
.loginFieldAreainner .card .input-group-text {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-left: none !important;
  color: #fff !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Decorative animated globe circles behind login card */
.star-field .layer {
  box-shadow:
    -411px -476px rgba(27,79,155,.4),  777px -407px rgba(58,158,63,.3),
    -387px -477px rgba(255,255,255,.25), -91px -235px rgba(27,79,155,.35),
    491px -460px rgba(58,158,63,.25),   892px -128px rgba(255,255,255,.2),
    758px -277px rgba(27,79,155,.3),    596px 378px  rgba(58,158,63,.2),
    647px 423px  rgba(255,255,255,.15), 183px 389px  rgba(27,79,155,.25),
    524px -237px rgba(58,158,63,.3),    679px -535px rgba(255,255,255,.2),
    158px 399px  rgba(27,79,155,.2),    157px 249px  rgba(58,158,63,.25),
    81px  -450px rgba(255,255,255,.18), 719px -360px rgba(27,79,155,.3) !important;
}

/* ───────────────── WIDGET BOX ICONS ───────────────── */
.widget-box-three i {
  color: var(--hl-green) !important;
}

/* ───────────────── MISC OVERRIDES ───────────────── */
/* Scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hl-bg); }
::-webkit-scrollbar-thumb { background: var(--hl-blue-light); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--hl-blue); }

/* Links */
a { color: var(--hl-blue) !important; }
a:hover { color: var(--hl-blue-light) !important; }

/* sidebar links should stay white */
.left-side-menu a,
.left-side-menu a:hover {
  color: rgba(255,255,255,.85) !important;
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--hl-blue) !important;
  border-color: var(--hl-blue) !important;
}
.page-link { color: var(--hl-blue) !important; }

/* Form focus ring */
.form-control:focus {
  border-color: var(--hl-blue-light) !important;
  box-shadow: 0 0 0 3px rgba(27,79,155,.18) !important;
}

/* Alert / badge overrides */
.alert-info    { border-left: 4px solid var(--hl-blue)  !important; }
.alert-success { border-left: 4px solid var(--hl-green) !important; }

/* ───────────────── SIDEBAR & NAVBAR — WHITE TEXT GUARDS ───────────────── */
/* Prevent global h1-h6 dark color from bleeding into dark areas */
.left-side-menu h1, .left-side-menu h2,
.left-side-menu h3, .left-side-menu h4,
.left-side-menu h5, .left-side-menu h6 {
  color: var(--hl-white) !important;
}
.navbar-custom h1, .navbar-custom h2,
.navbar-custom h3, .navbar-custom h4,
.navbar-custom h5, .navbar-custom h6,
.navbar-custom span,
.navbar-custom .text-overflow {
  color: var(--hl-white) !important;
}
/* Login page headings stay white */
.loginFieldAreainner h1, .loginFieldAreainner h2,
.loginFieldAreainner h3, .loginFieldAreainner h4,
.loginFieldAreainner h5, .loginFieldAreainner h6 {
  color: var(--hl-white) !important;
}