/* ================================================================
   iAutomate – ChakraHQ-inspired Theme
   Replaces Argon Dashboard visual layer entirely.
   Structure classes (navbar-vertical, main-content) are kept
   for JS compatibility; only visuals are overridden here.
================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --ia-primary:       #6c5ce7;
  --ia-primary-h:     #5a4bd1;
  --ia-primary-light: #f0efff;
  --ia-green:         #10b981;
  --ia-red:           #ef4444;
  --ia-orange:        #f59e0b;
  --ia-sidebar-w:     260px;
  --ia-header-h:      60px;
  --ia-border:        #e5e7eb;
  --ia-bg:            #f4f5f7;
  --ia-white:         #ffffff;
  --ia-text:          #111827;
  --ia-text-2:        #374151;
  --ia-text-muted:    #6b7280;
  --ia-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --ia-radius:        8px;
}

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--ia-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  color: var(--ia-text) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

a { color: var(--ia-primary); text-decoration: none; }
a:hover { color: var(--ia-primary-h); }

body.lw-authenticated-page .fas,
body.lw-authenticated-page .fa-solid,
body.lw-authenticated-page .fa { font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; }
body.lw-authenticated-page .far,
body.lw-authenticated-page .fa-regular { font-family: 'Font Awesome 5 Free' !important; font-weight: 400 !important; }
body.lw-authenticated-page .fal,
body.lw-authenticated-page .fa-light { font-family: 'Font Awesome 5 Free' !important; font-weight: 300 !important; }
body.lw-authenticated-page .fab,
body.lw-authenticated-page .fa-brands { font-family: 'Font Awesome 5 Brands' !important; font-weight: 400 !important; }

/* ── Sidebar shell ──────────────────────────────────────────── */
#sidenav-main,
.navbar-vertical {
  background: var(--ia-white) !important;
  border-right: 1px solid var(--ia-border) !important;
  box-shadow: none !important;
  width: var(--ia-sidebar-w) !important;
  min-width: var(--ia-sidebar-w) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Argon sets padding on container-fluid – kill it */
#sidenav-main .container-fluid {
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;
}

/* collapse wrapper fills sidebar height */
#sidenav-main .navbar-collapse {
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
}

/* ── Main content offset ────────────────────────────────────── */
.main-content {
  margin-left: var(--ia-sidebar-w) !important;
  min-height: 100vh;
  padding-top: 0 !important;
}

/* ── IA Brand block ─────────────────────────────────────────── */
.ia-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 16px 20px;
  margin-top: 24px;
  border-bottom: 1px solid var(--ia-border);
  text-decoration: none !important;
  flex-shrink: 0;
  min-height: 80px;
  position: sticky;
  top: 0;
  background: var(--ia-white);
  z-index: 10;
}
.ia-brand:hover { background: none !important; }
.ia-brand-icon {
  width: 36px; height: 36px;
  background: var(--ia-primary);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  flex-shrink: 0; letter-spacing: -.5px;
}
.ia-brand-logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--ia-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.ia-brand-name {
  font-size: 15px; font-weight: 700;
  color: var(--ia-text); line-height: 1.2;
}
.ia-brand-sub {
  font-size: 10.5px; color: var(--ia-text-muted); line-height: 1.2;
}

/* ── Nav section label ──────────────────────────────────────── */
.ia-nav-label {
  font-size: 10px; font-weight: 600;
  color: var(--ia-text-muted);
  text-transform: uppercase; letter-spacing: .8px;
  padding: 14px 18px 4px;
  display: block;
}

/* ── Nav list ───────────────────────────────────────────────── */
.navbar-vertical .navbar-nav {
  padding: 6px 0 !important;
  width: 100% !important;
}

/* kill Argon nav-link styles completely */
.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .navbar-nav .nav-link:focus {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  color: var(--ia-text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  transition: background .12s, color .12s, border-color .12s !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  position: relative !important;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  background: var(--ia-bg) !important;
  color: var(--ia-text-2) !important;
  border-left-color: var(--ia-border) !important;
}

.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link.ia-active {
  background: var(--ia-primary-light) !important;
  color: var(--ia-primary) !important;
  border-left-color: var(--ia-primary) !important;
  font-weight: 600 !important;
}

/* icons inside nav-links */
.navbar-vertical .navbar-nav .nav-link i,
.navbar-vertical .navbar-nav .nav-link .fa,
.navbar-vertical .navbar-nav .nav-link .fas,
.navbar-vertical .navbar-nav .nav-link .fab,
.navbar-vertical .navbar-nav .nav-link .far,
.navbar-vertical .navbar-nav .nav-link .fal {
  width: 18px !important;
  text-align: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  margin-right: 0 !important;
}

/* chevron arrow on collapsible items */
.navbar-vertical .navbar-nav .nav-link::after {
  content: none !important; /* kill Argon's arrow */
}
.ia-arrow {
  margin-left: auto !important;
  font-size: 10px !important;
  transition: transform .2s !important;
  opacity: .6;
}
.nav-link[aria-expanded="true"] .ia-arrow { transform: rotate(90deg); }

/* ── Submenu ─────────────────────────────────────────────────── */
.lw-expandable-nav {
  padding: 2px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-left: 2px solid var(--ia-border) !important;
  margin-left: 29px !important;
}

.lw-expandable-nav .nav-link,
.lw-expandable-nav .nav-link-ul {
  display: flex !important;
  align-items: center !important;
  padding: 7px 14px 7px 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ia-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .12s, color .12s !important;
}
.lw-expandable-nav .nav-link:hover,
.lw-expandable-nav .nav-link-ul:hover {
  background: var(--ia-primary-light) !important;
  color: var(--ia-primary) !important;
}
.lw-expandable-nav .nav-link.active,
.lw-expandable-nav .nav-link-ul.active,
.lw-expandable-nav .nav-link.ia-active,
.lw-expandable-nav .nav-link-ul.ia-active {
  background: var(--ia-primary-light) !important;
  color: var(--ia-primary) !important;
  font-weight: 600 !important;
}
/* kill Argon sub-link dot */
.lw-expandable-nav .nav-link::before,
.nav-link-ul::before { content: none !important; }

/* ── Sidebar footer (user area) ─────────────────────────────── */
.ia-sidebar-footer {
  border-top: 1px solid var(--ia-border);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.ia-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ia-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.ia-sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--ia-text); }
.ia-sidebar-user-role { font-size: 11px; color: var(--ia-text-muted); }

/* ── Top header ─────────────────────────────────────────────── */
#navbar-main {
  background: var(--ia-white) !important;
  border-bottom: 1px solid var(--ia-border) !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  height: var(--ia-header-h) !important;
  min-height: var(--ia-header-h) !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

#navbar-main .container-fluid {
  padding: 0 !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
}

.ia-page-title {
  font-size: 16px; font-weight: 600;
  color: var(--ia-text);
}

/* Available badge */
.ia-available {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ecfdf5; color: #065f46;
  font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 20px;
  border: 1px solid #a7f3d0;
}
.ia-available-dot {
  width: 7px; height: 7px;
  background: var(--ia-green); border-radius: 50%;
  animation: ia-pulse 2s ease-in-out infinite;
}
@keyframes ia-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Header icon buttons */
.ia-icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ia-text-muted) !important;
  background: transparent !important;
  border: none; cursor: pointer;
  transition: background .12s;
  text-decoration: none !important;
  font-size: 15px;
}
.ia-icon-btn:hover {
  background: var(--ia-bg) !important;
  color: var(--ia-text) !important;
}

/* Header user chip */
.ia-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 5px;
  border-radius: 24px;
  border: 1px solid var(--ia-border);
  cursor: pointer; background: var(--ia-white);
  text-decoration: none !important;
  transition: background .12s;
}
.ia-user-chip:hover { background: var(--ia-bg) !important; }
.ia-user-chip .ia-avatar { width: 28px; height: 28px; font-size: 11px; }
.ia-chip-name { font-size: 13px; font-weight: 500; color: var(--ia-text); }
.ia-chip-caret { font-size: 10px; color: var(--ia-text-muted); }

/* kill Argon top navbar gradient */
#navbar-main *,
#navbar-main .nav-link,
#navbar-main .h1,
#navbar-main .h4,
#navbar-main .h5 {
  color: var(--ia-text) !important;
}
#navbar-main .nav-link:hover { color: var(--ia-primary) !important; }

/* ── Content area ───────────────────────────────────────────── */

/* Kill Argon's massive .header padding that creates the gap */
.main-content .header {
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
.main-content .header-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Page heading that Argon uses (h6.text-uppercase etc.) */
.main-content .header .container-fluid h6,
.main-content .header .container-fluid h2,
.main-content .header .container-fluid .h6 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ia-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
}

/* Content containers */
.main-content .container-fluid {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.ia-page-header {
  padding: 20px 24px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.ia-page-header h1 {
  font-size: 20px; font-weight: 700;
  color: var(--ia-text); margin: 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--ia-white) !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: var(--ia-radius) !important;
  box-shadow: var(--ia-shadow) !important;
}
.card-header {
  background: var(--ia-white) !important;
  border-bottom: 1px solid var(--ia-border) !important;
  padding: 14px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ia-text) !important;
}
.card-body { padding: 20px !important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table { font-size: 13.5px !important; margin-bottom: 0 !important; }

.table thead th,
th {
  background: #f9fafb !important;
  color: var(--ia-text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--ia-border) !important;
  padding: 10px 14px !important;
  white-space: nowrap;
}

.table td,
td {
  background: var(--ia-white) !important;
  color: var(--ia-text-2) !important;
  border-color: var(--ia-border) !important;
  vertical-align: middle !important;
  padding: 10px 14px !important;
}

.table td a { color: var(--ia-primary) !important; font-weight: 500; }
.table-striped tbody tr:nth-of-type(odd) td { background: #fafafa !important; }
.table-hover tbody tr:hover td { background: var(--ia-primary-light) !important; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-weight: 500 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  transition: all .15s !important;
}
.btn-primary, .btn-primary:focus {
  background: var(--ia-primary) !important;
  border-color: var(--ia-primary) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--ia-primary-h) !important; border-color: var(--ia-primary-h) !important; }

.btn-success { background: var(--ia-green) !important; border-color: var(--ia-green) !important; color:#fff!important; }
.btn-danger  { background: var(--ia-red) !important;   border-color: var(--ia-red) !important;   color:#fff!important; }
.btn-warning { background: var(--ia-orange) !important;border-color: var(--ia-orange) !important; color:#fff!important; }
.btn-info    { background: #3b82f6 !important; border-color: #3b82f6 !important; color:#fff!important; }

/* btn-sm overrides */
.btn-sm { font-size: 12px !important; padding: 4px 10px !important; border-radius: 5px !important; }
.btn-default.btn-sm { background: var(--ia-primary) !important; border-color: var(--ia-primary) !important; color:#fff!important; }
.btn-dark.btn-sm    { background: #374151 !important; border-color: #374151 !important; color:#fff!important; }
.btn-light.btn-sm   { background: var(--ia-green) !important; border-color: var(--ia-green) !important; color:#fff!important; }
.btn-light.btn-sm:hover { background: #059669 !important; border-color: #059669 !important; }
.btn-warning.btn-sm { color:#fff!important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { font-size: 11px !important; font-weight: 500 !important; border-radius: 4px !important; padding: 3px 7px !important; }
.badge-success, .badge-approved { background: #dcfce7 !important; color: #166534 !important; }
.badge-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.badge-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge-info    { background: #dbeafe !important; color: #1e40af !important; }
.badge-secondary, .badge-muted { background: #f3f4f6 !important; color: var(--ia-text-muted) !important; }

/* ── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
  border: 1px solid var(--ia-border) !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  color: var(--ia-text) !important;
  background: var(--ia-white) !important;
  padding: 7px 12px !important;
  height: auto !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ia-primary) !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important;
}
.input-group-text {
  background: #f9fafb !important;
  border: 1px solid var(--ia-border) !important;
  font-size: 13px !important;
  color: var(--ia-text-muted) !important;
}
label { font-size: 13px !important; font-weight: 500 !important; color: var(--ia-text-2) !important; }

/* ── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--ia-border) !important;
  border-radius: var(--ia-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
.dropdown-item {
  font-size: 13px !important;
  border-radius: 5px !important;
  color: var(--ia-text-2) !important;
  padding: 8px 12px !important;
}
.dropdown-item:hover { background: var(--ia-bg) !important; color: var(--ia-text) !important; }
.dropdown-divider { border-color: var(--ia-border) !important; margin: 4px 0 !important; }
.dropdown-header { color: var(--ia-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; padding: 6px 12px !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border-radius: var(--ia-radius) !important; border: none !important; font-size: 13.5px !important; }
.alert-danger  { background: #fef2f2 !important; color: #dc2626 !important; }
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; }
.alert-info    { background: var(--ia-primary-light) !important; color: var(--ia-primary) !important; }

/* ── Fieldset / Legend ──────────────────────────────────────── */
legend {
  background: var(--ia-primary-light) !important;
  color: var(--ia-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
  margin-bottom: 12px !important;
}

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.modal-header {
  border-bottom: 1px solid var(--ia-border) !important;
  padding: 16px 20px !important;
}
.modal-footer {
  border-top: 1px solid var(--ia-border) !important;
  padding: 12px 20px !important;
}
.modal-title { font-size: 15px !important; font-weight: 600 !important; }

/* ── Tabs ───────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--ia-border) !important; }
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  color: var(--ia-text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link:hover { color: var(--ia-primary) !important; background: none !important; }
.nav-tabs .nav-link.active {
  color: var(--ia-primary) !important;
  border-bottom-color: var(--ia-primary) !important;
  background: none !important;
  font-weight: 600 !important;
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination .page-link {
  border: 1px solid var(--ia-border) !important;
  color: var(--ia-text-2) !important;
  font-size: 13px !important;
  padding: 5px 11px !important;
  border-radius: 5px !important;
  margin: 0 2px !important;
}
.pagination .page-item.active .page-link {
  background: var(--ia-primary) !important;
  border-color: var(--ia-primary) !important;
  color: #fff !important;
}

/* ── DataTables overrides ───────────────────────────────────── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ia-border) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
}
.dataTables_wrapper .dataTables_info { font-size: 12px !important; color: var(--ia-text-muted) !important; }

/* ── SweetAlert2 overrides ──────────────────────────────────── */
.swal2-popup { border-radius: 10px !important; font-size: 14px !important; }
.swal2-confirm { background: var(--ia-primary) !important; border-radius: 6px !important; }
.swal2-cancel  { border-radius: 6px !important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
#sidenav-main::-webkit-scrollbar { width: 4px; }
#sidenav-main::-webkit-scrollbar-track { background: transparent; }
#sidenav-main::-webkit-scrollbar-thumb { background: var(--ia-border); border-radius: 4px; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #sidenav-main {
    position: fixed !important;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 1040 !important;
  }
  #sidenav-main.show { transform: translateX(0) !important; }
  .main-content { margin-left: 0 !important; }
  #navbar-main { padding: 0 16px !important; }
}

/* ── Utility classes ────────────────────────────────────────── */
.ia-divider {
  height: 1px; background: var(--ia-border);
  margin: 6px 16px;
}
.text-ia-primary { color: var(--ia-primary) !important; }
.bg-ia-primary   { background: var(--ia-primary) !important; }
.border-ia       { border-color: var(--ia-border) !important; }

/* ── Dashboard stat card text fix ──────────────────────────── */
/* Force stat card text to be dark/visible regardless of card bg */
.stat-card .stat-card-value {
  color: #1a202c !important;
  font-weight: 700 !important;
  position: relative;
  z-index: 1;
}
.stat-card .stat-card-title {
  color: #4a5568 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  position: relative;
  z-index: 1;
}
.stat-card .stat-card-icon {
  position: relative;
  z-index: 1;
}
.stat-card .stat-card-icon i {
  color: #fff !important;
}

/* Fix the huge gap: chart area takes less space when empty */
.chart-canvas,
#lwNewVendorRegistrationGraph {
  max-height: 200px !important;
}
/* Tighten the analytics section wrapper */
.main-content .card.shadow .card-body {
  padding: 16px !important;
}
/* Remove excessive bottom margin on stat row */
.main-content .col.mb-5 {
  margin-bottom: 1rem !important;
}
.main-content .mb-5.mb-xl-0,
.main-content .col-12.mb-5.mb-xl-5 {
  margin-bottom: 0.5rem !important;
}

/* Fix the "User Onboarding Analytics" heading color */
.main-content .card-header h2 {
  color: var(--ia-text) !important;
  font-size: 16px !important;
  text-transform: none !important;
}
.main-content .card-header h4 {
  color: var(--ia-text-muted) !important;
  font-size: 12px !important;
}

/* Fix table header green bg override from dashboard.blade */
.main-content th {
  background: #f9fafb !important;
}