/* ==========================================================================
   Clean & light — shared look for the admin system and the client portal.
   Loaded last in <head> by views/layouts/header.php and views/portal/layout_header.php.
   To switch it off, remove that one <link> line from each layout.
   ========================================================================== */

/* ---- Text: black, never grey ------------------------------------------- */
:root { --gray: #111827; --dark: #000; --dark2: #111827; --dark3: #111827; --text: #000; }
body { color: #000; -webkit-font-smoothing: antialiased; }
::placeholder { color: #52525b !important; opacity: 1; }
a { color: var(--brand-ink, #000); }
thead th { color: #000 !important; }

/* ---- Icons: one colour (black) on soft neutral tiles -------------------- */
.stat-icon, .stat-icon.red, .stat-icon.green, .stat-icon.blue, .stat-icon.orange, .stat-icon.purple {
  background: #f3f4f6 !important; color: #000 !important; border: 1px solid #e5e7eb;
}
.stat-icon i { color: #000 !important; }
.card-title, .card-title i { color: #000 !important; }
.icon-btn { color: #000; }
.top-nav a i, .nav-menu a i, .drawer-body a i, .drawer-nav a i, .dropdown-menu a i, .dropdown-menu button i, .user-drop a i { color: #000; }
.side-link:not(.active) i, .side-sub a:not(.active) i { color: #000; }
/* Coloured inline icons (blue / green / orange / purple / teal) become black. Red stays for errors. */
i[style*="color:#2563eb"], i[style*="color:#1d4ed8"], i[style*="color:var(--blue)"],
i[style*="color:#16a34a"], i[style*="color:#15803d"], i[style*="color:var(--green)"],
i[style*="color:#d97706"], i[style*="color:var(--orange)"], i[style*="color:#FF6B35"],
i[style*="color:#7c3aed"], i[style*="color:#0891b2"], i[style*="color:var(--gray)"] { color: #000 !important; }

/* ---- Status badges: white pill + small coloured dot ---------------------- */
.badge {
  background: #fff !important; color: #000 !important; border: 1px solid #e5e7eb;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; flex: none; }
.badge-green::before  { background: #16a34a; }
.badge-red::before    { background: #dc2626; }
.badge-orange::before { background: #f59e0b; }
.badge-blue::before   { background: #2563eb; }
.badge-gray::before   { background: #9ca3af; }

/* ---- Hover animations (from the client portal) -------------------------- */
.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }

.stat-card, a.stat, .card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
a.stat-card:hover, .stat-card:has(a):hover, a.stat:hover {
  transform: translateY(-1px); border-color: var(--brand, #000) !important; text-decoration: none;
}
a.card:hover { transform: translateY(-1px); border-color: var(--brand, #000); text-decoration: none; }

tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: #fafbfc; }

.icon-btn, .top-nav a, .nav-menu a, .side-link, .side-sub a, .drawer-body a, .drawer-nav a,
.dropdown-menu a, .dropdown-menu button, .user-drop a, .notif-item, .conv, .rail-links a {
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.icon-btn:hover { background: #f3f4f6; color: #000; }

/* ---- Navigation: hamburger + slide-out menu on every screen size -------- */
body .top-nav, body.nav-left .top-nav,
body .side-nav, body.nav-left .side-nav { display: none !important; }
body.nav-left .main { margin-left: 0 !important; }
body .appbar .app-brand, body.nav-left .appbar .app-brand { display: flex !important; }
.appbar .menu-toggle { display: grid !important; }

/* Top-bar buttons a little larger */
.appbar .icon-btn { width: 42px; height: 42px; font-size: 17px; }
.appbar .menu-toggle { font-size: 19px; }

/* Slide-out menu: roomier, with every icon in the same-size tile */
.nav-drawer { width: min(340px, 88vw) !important; }
.drawer-head { height: 68px; }
.drawer-body { padding: 12px 14px 22px; }
.drawer-label { font-size: 11px !important; font-weight: 700; letter-spacing: .08em; color: #000 !important; margin: 18px 12px 8px !important; }
.drawer-body a { gap: 14px !important; padding: 8px 12px !important; margin: 2px 0; border-radius: 12px !important; font-size: 15px !important; font-weight: 500; color: #000 !important; }
.drawer-body a i {
  width: 38px !important; height: 38px; flex: none; display: grid !important; place-items: center;
  border-radius: 10px; background: #f3f4f6; border: 1px solid #e5e7eb; color: #000 !important; font-size: 19px !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.drawer-body a:hover { background: #f7f7f8 !important; }
.drawer-body a:hover i { background: #fff; border-color: #000; transform: translateY(-1px); }
.drawer-body a.active { background: #f3f4f6 !important; color: #000 !important; font-weight: 700 !important; }
.drawer-body a.active i { background: var(--brand-gradient, #000); border-color: transparent; color: var(--on-brand, #fff) !important; }
.drawer-foot { padding: 14px 20px; }
.drawer-foot a { font-size: 15px; gap: 12px !important; }
.drawer-foot a i { font-size: 19px; }

/* ==========================================================================
   One consistent style for every menu item with an icon:
   slide-out menus, Settings tabs, dropdown menus and the profile menu
   (admin + client portal). Same tile, same hover lift, same active state.
   ========================================================================== */
.settings-nav a i, .nav-menu a i, .user-drop a i, .drawer-nav a i {
  width: 34px !important; height: 34px !important; flex: none; display: grid !important; place-items: center;
  border-radius: 9px !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb;
  color: #000 !important; font-size: 17px !important; text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.settings-nav a, .nav-menu a, .user-drop a, .drawer-nav a {
  gap: 12px !important; color: #000 !important; font-weight: 500; border-radius: 11px !important;
  transition: background .15s ease, color .15s ease;
}
.settings-nav a:hover, .nav-menu a:hover, .user-drop a:hover, .drawer-nav a:hover { background: #f7f7f8 !important; text-decoration: none; }
/* the same lift on every icon tile (also the admin slide-out menu above) */
.settings-nav a:hover i, .nav-menu a:hover i, .user-drop a:hover i, .drawer-nav a:hover i,
.drawer-body a:hover i { background: #fff !important; border-color: #000 !important; transform: translateY(-1px); }
.settings-nav a.active, .nav-menu a.active, .drawer-nav a.active {
  background: #f3f4f6 !important; color: #000 !important; font-weight: 700 !important;
}
.settings-nav a.active i, .nav-menu a.active i, .drawer-nav a.active i {
  background: var(--brand-gradient, #000) !important; border-color: transparent !important; color: var(--on-brand, #fff) !important;
}
/* Sign out: black like every other menu item */
body .nav-menu a.danger, body .user-drop a.danger, body .drawer-foot a { color: #000 !important; }
body .nav-menu a.danger i, body .user-drop a.danger i { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #000 !important; }
body .nav-menu a.danger:hover i, body .user-drop a.danger:hover i { background: #fff !important; border-color: #000 !important; }
body .drawer-foot a i { color: #000 !important; }

/* Profile menus: roomier, same header on both sides */
.user-group .nav-menu, .user-drop { min-width: 260px !important; width: auto !important; padding: 8px !important; border-radius: 14px !important; border-color: #e5e7eb !important; }
.user-group .who-full, .user-drop .who-full { padding: 10px 12px 12px !important; border-bottom: 1px solid #e5e7eb !important; margin-bottom: 6px; }
.user-group .who-full strong, .user-drop .who-full strong { font-size: 14px !important; color: #000; }
.user-group .who-full small, .user-drop .who-full small { font-size: 12.5px !important; color: #000 !important; }
.user-btn { transition: background .15s ease, border-color .15s ease; }
.user-btn:hover { border-color: #000 !important; }
.user-btn .who { color: #000 !important; }

/* Settings page */
@media (min-width: 769px) { .settings-wrap { grid-template-columns: 236px 1fr !important; } }
.settings-nav { gap: 3px !important; }
.settings-nav a { padding: 7px 10px !important; font-size: 14px !important; }
.tab-header, .tab-header i { color: #000 !important; }
.tab-header { font-size: 14px !important; font-weight: 700 !important; display: flex; align-items: center; gap: 8px; }
.toggle input:checked + .toggle-slider { background: var(--brand, #000) !important; }
.gateway-card.enabled { border-color: #000 !important; background: #f7f7f8 !important; }
.theme-card.theme-selected { border-color: #000 !important; }
.settings-wrap i[style*="color:var(--red)"], .settings-wrap i[style*="color:#0078D4"], .settings-wrap i[style*="color:#25D366"] { color: #000 !important; }

/* Loading spinners: same speed everywhere */
.fa-spin { animation-duration: .9s !important; }

/* Login pages */
.panel-points i { width: 34px !important; height: 34px !important; font-size: 17px !important; border-radius: 10px !important; }
.input-wrap > i { font-size: 17px !important; }
.btn-auth { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }

/* ---- Notifications (client portal dropdown + admin bell) ----------------- */
/* Neutral icon tile like every other menu; urgency shows as a small dot. */
.notif-item .ni {
  position: relative; width: 36px !important; height: 36px !important; border-radius: 10px !important;
  background: #f3f4f6 !important; border: 1px solid #e5e7eb; color: #000 !important; font-size: 18px !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.notif-item .ni i { color: #000 !important; }
.notif-item .ni::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; display: none; }
.notif-item.danger .ni::after  { display: block; background: #dc2626; }
.notif-item.warning .ni::after { display: block; background: #f59e0b; }
.notif-item.success .ni::after { display: block; background: #16a34a; }
.notif-item:hover { background: #f7f7f8 !important; }
.notif-item:hover .ni { background: #fff !important; border-color: #000; transform: translateY(-1px); }
.notif-item .nt strong { color: #000; font-size: 13.5px !important; }
.notif-item .nt small, .notif-head span { color: #000 !important; }
.notif-item .na { color: #000 !important; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 99px; background: #fff; }
.notif-item:hover .na { border-color: #000; }
.notif-head strong { font-size: 15px !important; color: #000; }
.notif-drop { border-color: #e5e7eb !important; }
/* Admin bell list: same black icons */
#notifList i[style] { color: #000 !important; }

/* ---- Client portal: hamburger + slide-out menu on every screen size ----- */
.topbar .top-nav { display: none !important; }
.topbar .menu-toggle { display: grid !important; font-size: 19px; }
.topbar .icon-btn { width: 42px; height: 42px; font-size: 17px; }
/* Same slide-out menu as the admin side */
#portal-menu.nav-drawer { width: min(340px, 88vw) !important; }
#portal-menu .drawer-body { padding: 14px 14px 22px; }
#portal-menu .drawer-user { background: #f7f7f8 !important; border-color: #e5e7eb !important; }
#portal-menu .drawer-user small { color: #000 !important; }
#portal-menu .nav-label { color: #000 !important; font-size: 11px; letter-spacing: .08em; margin: 18px 12px 8px; }
#portal-menu .drawer-nav a { padding: 8px 12px !important; font-size: 15px !important; margin: 2px 0; }
#portal-menu .drawer-nav a i { width: 38px !important; height: 38px !important; font-size: 19px !important; border-radius: 10px !important; }
#portal-menu .drawer-foot a { font-size: 15px; gap: 12px; }