/* =============================================================
   AfriCore Tech Solutions — Hostiko Material Color Scheme
   File: css/africore.css
   WCAG 2.1 AA compliant — no gradients — flat colors only
   Compatible with WHMCS 8.7.1+
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

body,
.card-body,
.page-wrapper {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #1a2433;
  background-color: #f7f9fc;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.widget-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #003c6a;
}

/* Body text: #1a2433 on white = 15.62:1 ✓ WCAG AA */
p,
li,
td,
th,
label,
.form-control {
  color: #1a2433;
}

/* Secondary text: #4a5568 on white = 7.53:1 ✓ WCAG AA */
.text-muted,
.small-text,
.help-block {
  color: #4a5568;
}

/* Muted text: #6b7280 on white = 4.83:1 ✓ WCAG AA */
/* WARNING: Do NOT use #6b7280 on #e8f4fc backgrounds (4.32:1 — fails) */
small,
.caption {
  color: #6b7280;
}

a {
  color: #005f9f; /* on white: 6.69:1 ✓ */
}
a:hover,
a:focus {
  color: #003c6a; /* on white: 11.32:1 ✓ */
  text-decoration: underline;
}

/* Topbar background: #003c6a (dark brand) */
/* Text on #003c6a: white = 11.32:1 ✓, #e8f4fc = 10.13:1 ✓ */
.topbar,
.navbar-header,
#main-navbar {
  background-color: #003c6a;
  border-bottom: 1px solid #005f9f;
}

.topbar a,
.navbar-brand,
.navbar-brand span {
  color: #ffffff; /* on #003c6a: 11.32:1 ✓ */
  font-weight: 600;
}

.topbar a:hover,
.navbar-brand:hover {
  color: #e8f4fc; /* on #003c6a: 10.13:1 ✓ */
  text-decoration: none;
}

/* Sidebar background: #003c6a */
/* All sidebar text must be white or #e8f4fc */
.left-sidebar,
.sidebar-nav,
.sidebar-footer {
  background-color: #003c6a;
  border-right: 1px solid #005f9f;
}

/* Sidebar nav links: white on dark = 11.32:1 ✓ */
.sidebar-nav ul li a,
.sidebar-nav > ul > li > a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li.active > a {
  background-color: #005f9f;
  color: #ffffff; /* on #005f9f: 6.69:1 ✓ */
  text-decoration: none;
}

/* Active indicator bar — use secondary as decoration, not text */
.sidebar-nav ul li.active > a::before,
.sidebar-nav ul li.active > a .active-indicator {
  background-color: #38b6ff; /* decorative only — not text */
}

/* Sidebar icon color: #e8f4fc on dark = 10.13:1 ✓ */
.sidebar-nav ul li a i,
.sidebar-nav ul li a .nav-icon {
  color: #e8f4fc;
}

.sidebar-nav ul li.active > a i,
.sidebar-nav ul li a:hover i {
  color: #ffffff;
}

/* Nav background: #005f9f */
/* Text: white = 6.69:1 ✓ */
.navbar,
.main-menu {
  background-color: #005f9f;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.navbar .navbar-nav > li > a,
.main-menu .nav > li > a {
  color: #ffffff; /* on #005f9f: 6.69:1 ✓ */
  font-size: 14px;
  font-weight: 500;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.active > a,
.main-menu .nav > li.active > a {
  background-color: #003c6a;
  color: #ffffff; /* on #003c6a: 11.32:1 ✓ */
  text-decoration: none;
}

/* Dropdown menus */
.navbar .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #d1e4f5;
  border-top: 2px solid #005f9f;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-menu > li > a {
  color: #1a2433; /* on white: 15.62:1 ✓ */
  font-size: 13.5px;
}

.navbar .dropdown-menu > li > a:hover {
  background-color: #e8f4fc;
  color: #003c6a; /* on #e8f4fc: 10.13:1 ✓ */
}

/* Card/panel: white background, dark text */
.card,
.panel,
.white-box {
  background-color: #ffffff;
  border: 1px solid #d1e4f5;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* Fix squished cards inside grid columns, but leave .card-group alone so they stay horizontal */
.row > [class*="col-"] > .card,
.row > [class*="col-"] > .panel {
    width: 100%;
}

/* Card headers: use light bg, not colored bg — avoids text contrast issues */
.card .card-header,
.panel .panel-heading,
.widget-header {
  background-color: #e8f4fc;
  border-bottom: 2px solid #005f9f;
  color: #003c6a; /* on #e8f4fc: 10.13:1 ✓ */
  font-weight: 600;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 6px 6px 0 0;
}

.card .card-header a,
.panel .panel-heading a {
  color: #005f9f; /* on #e8f4fc: 5.98:1 ✓ */
}

.card .card-header a:hover {
  color: #003c6a;
}

/* Card body */
.card .card-body,
.panel .panel-body {
  padding: 18px;
  color: #1a2433;
}

/* Primary button: white text on #005f9f bg = 6.69:1 ✓ */
.btn-primary,
.btn-info {
  background-color: #005f9f;
  border: 1px solid #004d82;
  color: #ffffff;
  font-weight: 600;
  border-radius: 5px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: #003c6a;
  border-color: #003c6a;
  color: #ffffff;
  text-decoration: none;
}

/* Success button: white on #15803d = 5.82:1 ✓ */
.btn-success {
  background-color: #15803d;
  border-color: #166534;
  color: #ffffff;
  font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #166534;
  border-color: #14532d;
  color: #ffffff;
}

/* Danger button: white on #b91c1c = 7.01:1 ✓ */
.btn-danger {
  background-color: #b91c1c;
  border-color: #991b1b;
  color: #ffffff;
  font-weight: 600;
}

.btn-danger:hover {
  background-color: #991b1b;
  border-color: #7f1d1d;
  color: #ffffff;
}

/* Outlined / secondary button */
.btn-default,
.btn-secondary {
  background-color: #ffffff;
  border: 1px solid #005f9f;
  color: #005f9f; /* on white: 6.69:1 ✓ */
  font-weight: 500;
}

.btn-default:hover {
  background-color: #e8f4fc;
  color: #003c6a; /* on #e8f4fc: 10.13:1 ✓ */
  border-color: #003c6a;
}

/* Label: dark text on white = 15.62:1 ✓ */
label,
.control-label {
  color: #1a2433;
  font-weight: 500;
  font-size: 14px;
}

.form-control {
  border: 1px solid #a8c8e8;
  border-radius: 5px;
  color: #1a2433;
  background-color: #ffffff;
  font-size: 14px;
}

/* Focus ring: #38b6ff as a border (UI component — 3:1 needed vs white bg)
   #38b6ff on white = 2.26:1 contrast — FAILS for text but OK for focus indicator
   per WCAG 2.1 SC 1.4.11 Non-Text Contrast: input border needs 3:1 vs adjacent colors.
   Use #005f9f for the focus border instead (6.69:1 vs white ✓) */
.form-control:focus {
  border-color: #005f9f;
  box-shadow: 0 0 0 3px rgba(0, 95, 159, 0.18);
  outline: none;
}

/* Placeholder text: must meet 4.5:1 — use #4a5568 (7.53:1 ✓) */
.form-control::placeholder {
  color: #4a5568;
  opacity: 1;
}

/* Table header: white text on #005f9f = 6.69:1 ✓ */
.table > thead > tr > th {
  background-color: #005f9f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid #003c6a;
  padding: 10px 14px;
}

/* Table body: dark text on white/light = 15.62:1 ✓ */
.table > tbody > tr > td {
  color: #1a2433;
  border-color: #d1e4f5;
  padding: 9px 14px;
}

/* Striped rows: #1a2433 on #e8f4fc = 13.97:1 ✓ */
.table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: #e8f4fc;
  color: #1a2433;
}

/* Hover: #1a2433 on #ddeef9 = passes ✓ */
.table-hover > tbody > tr:hover > td {
  background-color: #ddeef9;
  color: #1a2433;
}

/* Info alert: #003c6a text on #e8f4fc bg = 10.13:1 ✓ */
.alert-info {
  background-color: #e8f4fc;
  border: 1px solid #a8c8e8;
  border-left: 4px solid #005f9f;
  color: #003c6a;
}

/* Success alert: #166534 on #dcfce7 = passes ✓ */
.alert-success {
  background-color: #dcfce7;
  border: 1px solid #86efac;
  border-left: 4px solid #15803d;
  color: #166534;
}

/* Warning alert: #92400e on #fef3c7 = passes ✓ */
.alert-warning {
  background-color: #fef3c7;
  border: 1px solid #fcd34d;
  border-left: 4px solid #b45309;
  color: #92400e;
}

/* Danger alert: #991b1b on #fee2e2 = passes ✓ */
.alert-danger {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #b91c1c;
  color: #991b1b;
}

/* Badges: white text on colored bg */
.label-primary,
.badge-primary {
  background-color: #005f9f;
  color: #ffffff;
}
.label-success,
.badge-success {
  background-color: #15803d;
  color: #ffffff;
}
.label-danger,
.badge-danger {
  background-color: #b91c1c;
  color: #ffffff;
}
.label-warning,
.badge-warning {
  background-color: #b45309;
  color: #ffffff;
}
.label-info,
.badge-info {
  background-color: #005f9f;
  color: #ffffff;
}

/* All status colors verified: dark text on white or colored bg */
/* Paid: #166534 on white = 6.27:1 ✓ */
.status-paid,
.badge-paid {
  color: #166534;
  font-weight: 600;
}

/* Unpaid: #991b1b on white = 7.98:1 ✓ */
.status-unpaid,
.badge-unpaid {
  color: #991b1b;
  font-weight: 600;
}

/* Overdue: #92400e on white = 4.69:1 ✓ */
.status-overdue,
.badge-overdue {
  color: #92400e;
  font-weight: 600;
}

/* Cancelled: #4a5568 on white = 7.53:1 ✓ */
.status-cancelled,
.badge-cancelled {
  color: #4a5568;
  font-weight: 600;
}

/* Page title bar: light background, dark text */
.page-titles,
.page-header,
.breadcrumb-wrapper {
  background-color: #e8f4fc;
  border-bottom: 1px solid #d1e4f5;
  padding: 14px 20px;
}

/* Breadcrumb text: #1a2433 on #e8f4fc = 13.97:1 ✓ */
.page-titles h4,
.page-titles .title,
.breadcrumb-item {
  color: #1a2433;
  font-weight: 600;
}

/* Breadcrumb separators and inactive links */
.breadcrumb > li + li::before {
  color: #4a5568;
}

.breadcrumb a {
  color: #005f9f; /* on #e8f4fc: 5.98:1 ✓ */
}

/* Footer: dark background, white/light text */
.footer,
#footer,
.footer-wrapper {
  background-color: #003c6a;
  border-top: 2px solid #005f9f;
  padding: 20px 24px;
  color: #e8f4fc; /* on #003c6a: 10.13:1 ✓ */
  font-size: 13px;
}

.footer a,
#footer a {
  color: #e8f4fc; /* on #003c6a: 10.13:1 ✓ */
  text-decoration: underline;
}

.footer a:hover {
  color: #ffffff; /* on #003c6a: 11.32:1 ✓ */
}

/* Footer copyright text */
.footer .copyright,
#footer .copyright {
  color: #e8f4fc;
  font-size: 12px;
}

/* Login page wrapper: light page bg */
.login-register,
.login-box,
.auth-wrapper {
  background-color: #f7f9fc;
}

/* Login card: white bg */
.login-box .card,
.auth-wrapper .card,
.login-register .card {
  background-color: #ffffff;
  border: 1px solid #d1e4f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Login card title area: light bg */
.login-box .card-header,
.auth-wrapper .card-header {
  background-color: #e8f4fc;
  border-bottom: 2px solid #005f9f;
  padding: 20px 24px;
  text-align: center;
}

/* Login title: #003c6a on #e8f4fc = 10.13:1 ✓ */
.login-box .card-header h3,
.login-box .card-header .title,
.auth-wrapper .card-header h3 {
  color: #003c6a;
  font-size: 20px;
  font-weight: 700;
}

/* Login submit button — already covered by .btn-primary above */

/* Login link: #005f9f on white = 6.69:1 ✓ */
.login-box a,
.auth-wrapper a {
  color: #005f9f;
}

/* Stat widget: white bg, dark text */
.el-element-overlay .el-card-content,
.stat-widget,
.counter-box {
  background-color: #ffffff;
  border: 1px solid #d1e4f5;
  border-radius: 6px;
}

/* Widget numbers: #003c6a on white = 11.32:1 ✓ */
.stat-widget .stat-number,
.counter-box .counter {
  color: #003c6a;
  font-size: 28px;
  font-weight: 700;
}

/* Widget labels: #4a5568 on white = 7.53:1 ✓ */
.stat-widget .stat-label,
.counter-box .title {
  color: #4a5568;
  font-size: 13px;
}

/* Widget icons: use #0097b2 (large icon = 3.46:1, passes large/UI ✓) */
.stat-widget .stat-icon i,
.counter-box .icon i {
  color: #0097b2;
  font-size: 28px;
}

/* Widget top accent bar (decorative) */
.stat-widget,
.counter-box {
  border-top: 3px solid #005f9f;
}

@media (max-width: 768px) {
  .left-sidebar {
    background-color: #003c6a;
  }

  .navbar .navbar-nav > li > a {
    color: #ffffff;
    padding: 10px 14px;
  }

  .navbar .navbar-nav > li > a:hover {
    background-color: #003c6a;
    color: #ffffff;
  }
}

/* Fix text visibility inside all white cards globally (including standalone Browse Products) */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card .title,
.card .panel-title,
.card .card-title,
.card strong,
.card b {
    color: #003c6a !important;
}

.card p,
.card span:not(.badge),
.card .text-white,
.card .text-light {
    color: #1a2433 !important;
}

/* Ensure sub-panels are slightly grey to stand out */
.card .card,
.card .panel,
.card .list-group-item {
    background-color: #f7f9fc !important;
    border-color: #d1e4f5 !important;
}

.card .card:hover,
.card .panel:hover,
.card .list-group-item:hover {
    background-color: #e8f4fc !important;
}

.client-home-cards .card .btn,
.card a[href*="cart.php"].btn,
.card-body a[href*="cart.php"].btn,
.card a[href*="store"].btn,
.card-body a[href*="store"].btn {
    background-color: #005f9f !important;
    border-color: #004d82 !important;
    color: #ffffff !important;
}

.client-home-cards .card .btn:hover,
.card a[href*="cart.php"].btn:hover,
.card-body a[href*="cart.php"].btn:hover,
.card a[href*="store"].btn:hover,
.card-body a[href*="store"].btn:hover {
    background-color: #003c6a !important;
    border-color: #003c6a !important;
    color: #ffffff !important;
}

.client-home-cards .card .btn *,
.card a[href*="cart.php"].btn *,
.card a[href*="store"].btn * {
    color: #ffffff !important;
}

.client-home-cards .card-body .card,
.client-home-cards .card-body .panel,
.client-home-cards .card-body .list-group-item {
  background-color: #f7f9fc !important;
  border-color: #d1e4f5 !important;
  color: #005f9f;
}

.client-home-cards .card-body .card:hover,
.client-home-cards .card-body .panel:hover,
.client-home-cards .card-body .list-group-item:hover {
  background-color: #e8f4fc !important;
}