/* ============================================================
   KICATEX TECHNOLOGY — WHMCS 9.0.5 Client Area Custom CSS
   Bootstrap 5 compatible | Version 2.0
   
   HOW TO APPLY:
   WHMCS Admin → Setup → General Settings → Styling tab
   → Paste into "Custom CSS (Client Area)" → Save Changes
   ============================================================ */

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

:root {
  --kx-dark:    #2d5a0e;
  --kx-mid:     #3d7a1f;
  --kx-bright:  #5ea82f;
  --kx-pale:    #f1f8e9;
  --kx-border:  #c5e1a5;
  --kx-text:    #1a2e0a;
  --kx-muted:   #5a7a40;
  --bs-primary:       #3d7a1f;
  --bs-primary-rgb:   61,122,31;
  --bs-link-color:    #3d7a1f;
  --bs-link-hover-color: #5ea82f;
}

/* 1. GLOBAL */
body, .container, .container-fluid, .card, .modal-content,
p, li, td, th, label, input, select, textarea, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body { background-color: #f4f9ef !important; color: var(--kx-text) !important; font-size: 14px; }
h1,h2,h3,h4,h5,h6 { font-family:'Inter',sans-serif !important; font-weight:700; color:var(--kx-dark); letter-spacing:-.3px; }
h1 { font-size:22px; font-weight:800; } h2 { font-size:18px; } h3 { font-size:16px; }
a { color: var(--kx-mid) !important; }
a:hover { color: var(--kx-bright) !important; text-decoration: none !important; }

/* 2. NAVBAR */
.navbar, header .navbar, nav.navbar {
  background-color: var(--kx-dark) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(45,90,14,.28) !important;
  padding: 0 !important; min-height: 60px;
}
.navbar-brand { font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:17px !important; color:#fff !important; padding:14px 20px !important; }
.navbar-brand:hover { color:#a5d66e !important; }

/* Force ALL links inside the navbar to white — overrides the global a{color:green} */
.navbar a,
.navbar a:link,
.navbar a:visited,
.navbar .nav-link,
.navbar-nav a,
.navbar-nav .nav-link,
.navbar-nav .nav-item > a,
.navbar .dropdown-toggle {
  color: rgba(255,255,255,.88) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:600 !important;
  font-size:13px !important;
  transition: color .15s, background .15s !important;
}
/* Padding only on the main nav links */
.navbar-nav .nav-link,
.navbar-nav .nav-item > a { padding: 18px 14px !important; }

.navbar a:hover,
.navbar .nav-link:hover,
.navbar-nav .nav-link:hover,
.navbar-nav a:hover { color: #ffffff !important; background: rgba(255,255,255,.08) !important; }

.navbar-nav .nav-link.active { color: #a5d66e !important; background: rgba(94,168,47,.15) !important; }
.navbar-toggler { border-color:rgba(255,255,255,.25) !important; }
.navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,.85)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; }
.dropdown-menu { background:var(--kx-dark) !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; box-shadow:0 8px 28px rgba(0,0,0,.22) !important; padding:6px !important; }
.dropdown-item,
.dropdown-menu a,
.dropdown-menu .dropdown-item { font-size:13px !important; font-weight:500 !important; color:rgba(255,255,255,.82) !important; padding:9px 14px !important; border-radius:7px !important; transition:all .15s !important; }
.dropdown-item:hover,
.dropdown-menu a:hover { background:rgba(94,168,47,.2) !important; color:#fff !important; }
.dropdown-divider { border-color:rgba(255,255,255,.1) !important; }

/* 3. BREADCRUMBS */
.breadcrumb { background:transparent !important; padding:8px 0 !important; font-size:12.5px !important; }
.breadcrumb-item { color:var(--kx-muted) !important; font-weight:500; }
.breadcrumb-item + .breadcrumb-item::before { color:var(--kx-border) !important; }
.breadcrumb-item.active { color:var(--kx-dark) !important; font-weight:600; }
.breadcrumb-item a { color:var(--kx-muted) !important; }
.breadcrumb-item a:hover { color:var(--kx-mid) !important; }

/* 4. CARDS */
.card { border:1.5px solid var(--kx-border) !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(61,122,31,.07) !important; background:#fff !important; overflow:visible !important; }
/* Keep header corners rounded separately since card overflow is now visible */
.card-header:first-child { border-radius:10px 10px 0 0 !important; }
.card-header { background:var(--kx-pale) !important; border-bottom:1.5px solid var(--kx-border) !important; padding:13px 20px !important; font-weight:700 !important; font-size:13.5px !important; color:var(--kx-dark) !important; }
.card-header.bg-primary, .card-header.text-white { background:var(--kx-mid) !important; color:#fff !important; border-color:var(--kx-mid) !important; }
.card-body { padding:20px !important; }
.card-footer { background:#fafdf5 !important; border-top:1.5px solid var(--kx-border) !important; padding:13px 20px !important; }

/* 5. BUTTONS */
.btn { font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:13.5px !important; border-radius:8px !important; padding:9px 20px !important; transition:all .18s !important; border-width:1.5px !important; }
.btn-primary, .btn-success { background-color:var(--kx-mid) !important; border-color:var(--kx-mid) !important; color:#fff !important; box-shadow:0 2px 10px rgba(61,122,31,.28) !important; }
.btn-primary:hover, .btn-success:hover { background-color:var(--kx-bright) !important; border-color:var(--kx-bright) !important; color:#fff !important; transform:translateY(-1px); }
.btn-outline-primary { border-color:var(--kx-mid) !important; color:var(--kx-mid) !important; }
.btn-outline-primary:hover { background-color:var(--kx-mid) !important; color:#fff !important; }
.btn-secondary, .btn-outline-secondary { border-color:var(--kx-border) !important; color:var(--kx-text) !important; background:#fff !important; }
.btn-secondary:hover { background-color:var(--kx-pale) !important; border-color:var(--kx-mid) !important; color:var(--kx-mid) !important; }
.btn-danger { background-color:#dc2626 !important; border-color:#dc2626 !important; }
.btn-danger:hover { background-color:#b91c1c !important; border-color:#b91c1c !important; }
.btn-sm { padding:6px 14px !important; font-size:12px !important; }
.btn-lg { padding:12px 28px !important; font-size:15px !important; }

/* 6. FORMS — complete rewrite for WHMCS 9 Bootstrap 5 */

/* ── Base font/colour on all inputs ── */
.form-control, .form-select,
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], input[type=date],
select, textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-text) !important;
  background-color: #fff !important;
  height: auto !important;
  transition: border-color .2s, box-shadow .2s !important;
}

/* ── STANDALONE inputs (no input-group parent) ── */
/* These get full border + extra left padding to clear the icon */
:not(.input-group) > .form-control,
:not(.input-group) > input[type=text],
:not(.input-group) > input[type=email],
:not(.input-group) > input[type=password],
:not(.input-group) > input[type=number],
:not(.input-group) > input[type=date],
:not(.input-group) > select,
:not(.input-group) > textarea {
  border: 1.5px solid var(--kx-border) !important;
  border-radius: 8px !important;
  padding: 10px 13px 10px 40px !important;
}
textarea, select {
  padding-left: 13px !important; /* no icon */
}
:not(.input-group) > .form-control:focus,
:not(.input-group) > input:focus,
:not(.input-group) > select:focus,
:not(.input-group) > textarea:focus {
  border-color: var(--kx-mid) !important;
  box-shadow: 0 0 0 3px rgba(61,122,31,.13) !important;
  outline: none !important;
}

/* ── WHMCS input-group structure:
      <div class="input-group">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
        <input class="form-control" placeholder="First Name">
      </div>
   Bootstrap 5 handles this as a flex row.
   We style the BORDER on input-group-text (left) and remove it from the input (right)
   so they look like one unified field.
── */
.input-group {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

/* Icon span — left border + rounded left corners */
.input-group > .input-group-text {
  background: #fff !important;
  border: 1.5px solid var(--kx-border) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  padding: 0 10px 0 12px !important;
  color: var(--kx-muted) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1;
}

/* Input inside group — right border only, rounded right corners
   :not([type=tel]) excludes the phone field — ITI controls that padding */
.input-group > .form-control:not([type=tel]),
.input-group > input:not([type=tel]) {
  flex: 1 !important;
  border: 1.5px solid var(--kx-border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 13px !important;
  background: #fff !important;
  font-size: 13.5px !important;
  color: var(--kx-text) !important;
  box-shadow: none !important;
  height: auto !important;
}
.input-group > .form-control:not([type=tel]):focus,
.input-group > input:not([type=tel]):focus {
  border-color: var(--kx-mid) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Green left-border on icon span when input focused */
.input-group:focus-within > .input-group-text {
  border-color: var(--kx-mid) !important;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > input {
  border-color: var(--kx-mid) !important;
  box-shadow: 0 0 0 3px rgba(61,122,31,.12) !important;
}

/* Right-side button/span (e.g. password show/hide) */
.input-group > .input-group-text:last-child,
.input-group > .btn:last-child {
  border: 1.5px solid var(--kx-border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  background: #fff !important;
  color: var(--kx-muted) !important;
}

/* Labels */
.form-label, label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--kx-dark) !important;
  margin-bottom: 5px !important;
}
.form-text { color: var(--kx-muted) !important; font-size: 12px !important; }

/* Checkboxes */
.form-check-input:checked {
  background-color: var(--kx-mid) !important;
  border-color: var(--kx-mid) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(61,122,31,.15) !important;
  border-color: var(--kx-mid) !important;
}

/* ── intl-tel-input (phone field) ── */
/* Wrapper fills container */
.iti, .iti.iti--allow-dropdown { width: 100% !important; }

/* Flag image (~28px) + dial code "+254" (~35px) + gap = needs ~90px clearance
   High specificity selectors to beat any generic input-group rule */
html .iti input[type=tel],
html .iti input[type=text],
.iti.input-group > input[type=tel],
.iti > input[type=tel] {
  padding-left: 95px !important;
  width: 100% !important;
}

/* CRITICAL: phone country dropdown must escape all overflow:hidden parents */
/* ITI v17/v18 with dropdownContainer:body uses position:fixed */
.iti__dropdown-content,
.iti__country-listbox,
.iti__country-list {
  z-index: 999999 !important;
  position: absolute !important;
  background: #fff !important;
  border: 1.5px solid var(--kx-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.15) !important;
  overflow-y: auto !important;
  max-height: 220px !important;
}
/* When ITI appends dropdown to body (dropdownContainer) */
.iti--container {
  z-index: 999999 !important;
  position: fixed !important;
}
/* Country rows */
.iti__country, .iti__item {
  padding: 8px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.iti__country:hover, .iti__item:hover,
.iti__country.iti__highlight {
  background: var(--kx-pale) !important;
  color: var(--kx-mid) !important;
}
.iti__dial-code { color: var(--kx-muted) !important; font-size: 12px !important; }
/* Search box inside dropdown */
.iti__search-input {
  border: 1.5px solid var(--kx-border) !important;
  border-radius: 7px !important;
  padding: 7px 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  margin: 8px 8px 4px !important;
  width: calc(100% - 16px) !important;
  box-sizing: border-box !important;
}
.iti__search-input:focus {
  border-color: var(--kx-mid) !important;
  box-shadow: 0 0 0 3px rgba(61,122,31,.12) !important;
  outline: none !important;
}

/* 7. TABLES */
.table { font-family:'Inter',sans-serif !important; font-size:13.5px !important; --bs-table-hover-bg:#f5fbee; --bs-table-striped-bg:#fafdf5; }
.table > thead > tr > th { background:var(--kx-pale) !important; color:var(--kx-dark) !important; font-weight:700 !important; font-size:11px !important; text-transform:uppercase !important; letter-spacing:.6px !important; padding:11px 16px !important; border-bottom:2px solid var(--kx-border) !important; white-space:nowrap; }
.table > tbody > tr > td { padding:11px 16px !important; border-top:1px solid #f0f5e8 !important; vertical-align:middle !important; }
.table > tbody > tr:hover > td { background:#f5fbee !important; }
.table-responsive { border:1.5px solid var(--kx-border) !important; border-radius:10px !important; overflow:hidden; }

/* 8. BADGES */
.badge { font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:11px !important; padding:4px 10px !important; border-radius:20px !important; letter-spacing:.3px; }
.badge.bg-success, .text-bg-success { background:#dcfce7 !important; color:#166534 !important; }
.badge.bg-danger,  .text-bg-danger  { background:#fee2e2 !important; color:#991b1b !important; }
.badge.bg-warning, .text-bg-warning { background:#fef9c3 !important; color:#854d0e !important; }
.badge.bg-info,    .text-bg-info    { background:var(--kx-pale) !important; color:var(--kx-dark) !important; }
.badge.bg-primary, .text-bg-primary { background:var(--kx-mid) !important; color:#fff !important; }
.badge.bg-secondary,.text-bg-secondary { background:#f1f5f9 !important; color:#475569 !important; }

/* 9. ALERTS */
.alert { font-size:13.5px !important; border-radius:10px !important; border:1.5px solid transparent !important; padding:13px 18px !important; font-weight:500; }
.alert-success { background:#f0fdf4 !important; border-color:#bbf7d0 !important; color:#166534 !important; }
.alert-danger  { background:#fef2f2 !important; border-color:#fecaca !important; color:#991b1b !important; }
.alert-warning { background:#fffbeb !important; border-color:#fde68a !important; color:#92400e !important; }
.alert-info    { background:var(--kx-pale) !important; border-color:var(--kx-border) !important; color:var(--kx-dark) !important; }

/* 10. TABS */
.nav-tabs { border-bottom:2px solid var(--kx-border) !important; }
.nav-tabs .nav-link { font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--kx-muted) !important; border:none !important; border-bottom:2.5px solid transparent !important; border-radius:0 !important; padding:10px 18px !important; margin-bottom:-2px; background:transparent !important; transition:color .15s !important; }
.nav-tabs .nav-link:hover { color:var(--kx-mid) !important; border-bottom-color:var(--kx-border) !important; }
.nav-tabs .nav-link.active { color:var(--kx-mid) !important; border-bottom-color:var(--kx-mid) !important; font-weight:700 !important; background:transparent !important; }

/* 11. LIST GROUPS */
.list-group { border-radius:10px !important; overflow:hidden; border:1.5px solid var(--kx-border) !important; }
.list-group-item { font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--kx-text) !important; padding:11px 16px !important; border-color:#f0f5e8 !important; transition:all .15s !important; }
.list-group-item:hover { background:var(--kx-pale) !important; color:var(--kx-mid) !important; }
.list-group-item.active, .list-group-item-action.active { background:var(--kx-mid) !important; border-color:var(--kx-mid) !important; color:#fff !important; font-weight:700 !important; }

/* 12. PAGINATION */
.pagination .page-link { font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--kx-mid) !important; border:1.5px solid var(--kx-border) !important; padding:7px 13px !important; transition:all .15s !important; }
.pagination .page-link:hover { background:var(--kx-pale) !important; border-color:var(--kx-mid) !important; }
.pagination .page-item.active .page-link { background:var(--kx-mid) !important; border-color:var(--kx-mid) !important; color:#fff !important; }

/* 13. MODALS */
.modal-content { border:none !important; border-radius:14px !important; box-shadow:0 20px 60px rgba(0,0,0,.2) !important; overflow:hidden; }
.modal-header { background:var(--kx-pale) !important; border-bottom:1.5px solid var(--kx-border) !important; padding:16px 24px !important; }
.modal-title { font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:16px !important; color:var(--kx-dark) !important; }
.modal-body { padding:24px !important; }
.modal-footer { background:#fafdf5 !important; border-top:1.5px solid var(--kx-border) !important; padding:14px 24px !important; }

/* 14. INVOICE STATUS (WHMCS 9) */
.status-paid,.invoiceStatus-Paid,.text-success   { color:#166534 !important; font-weight:700; }
.status-unpaid,.invoiceStatus-Unpaid,.text-danger { color:#991b1b !important; font-weight:700; }
.status-overdue,.invoiceStatus-Overdue            { color:#7c2d12 !important; font-weight:700; }
.status-active                                    { color:var(--kx-mid) !important; font-weight:700; }
.status-suspended                                 { color:#92400e !important; font-weight:700; }
.status-cancelled                                 { color:#64748b !important; font-weight:700; }

/* 15. FOOTER */
#footer, footer, .footer { background:var(--kx-dark) !important; color:rgba(255,255,255,.4) !important; font-family:'Inter',sans-serif !important; font-size:12.5px !important; padding:20px 32px !important; border-top:none !important; margin-top:40px; }
#footer a, footer a, .footer a { color:rgba(255,255,255,.5) !important; }
#footer a:hover, footer a:hover { color:#a5d66e !important; }

/* 16. MISC */
hr { border-color:var(--kx-border) !important; opacity:1; }
.text-primary { color:var(--kx-mid) !important; }
.bg-primary   { background-color:var(--kx-mid) !important; }
*:focus-visible { outline:none !important; box-shadow:0 0 0 3px rgba(61,122,31,.2) !important; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--kx-pale); }
::-webkit-scrollbar-thumb { background:var(--kx-border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--kx-muted); }

/* 17. RESPONSIVE */
@media(max-width:768px){
  .navbar-nav .nav-link { padding:12px 14px !important; }
  .card-body { padding:14px !important; }
  h1 { font-size:19px !important; }
  .table > thead > tr > th { font-size:10px !important; padding:9px 10px !important; }
  .table > tbody > tr > td { padding:9px 10px !important; }
  .btn { padding:8px 16px !important; font-size:13px !important; }
}