/* Neobrutalism Smooth - sender.homeotp.com - 2026-09-21
 * Bold borders, hard shadows, vibrant palette, smooth spring transitions
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&display=swap');

:root{
  --neo-border: 2.5px solid #1a1a1a;
  --neo-border-thick: 3px solid #1a1a1a;
  --neo-radius: 16px;
  --neo-radius-sm: 12px;
  --neo-radius-lg: 20px;
  --neo-shadow: 5px 5px 0 #1a1a1a;
  --neo-shadow-sm: 3px 3px 0 #1a1a1a;
  --neo-shadow-lg: 7px 7px 0 #1a1a1a;
  --neo-shadow-hover: 7px 7px 0 #1a1a1a;
  --neo-primary: #7367f0;
  --neo-primary-dark: #5a4de0;
  --neo-accent: #FFD93D;
  --neo-accent2: #6BCB77;
  --neo-accent3: #FF6B6B;
  --neo-accent4: #4D96FF;
  --neo-bg: #FFFDF5;
  --neo-paper: #ffffff;
  --neo-transition: 0.22s cubic-bezier(0.34,1.56,0.64,1);
  --neo-transition-smooth: 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
}

*{
  scroll-behavior: smooth;
}
html{ scroll-behavior: smooth; }

body{
  background: var(--neo-bg) !important;
  font-family: 'Lexend','Space Grotesk',system-ui,-apple-system,sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Smooth for all interactive */
a, button, .btn, .card, .form-control, .form-select, .menu-link, .menu-item, .nav-link{
  transition: all var(--neo-transition) !important;
}

/* Headings brutalist */
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* ---------- Cards ---------- */
.card{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  background: var(--neo-paper) !important;
  overflow: hidden;
  transform: translate(0,0);
}
.card:hover{
  transform: translate(-1px,-1px);
  box-shadow: var(--neo-shadow-hover) !important;
}
.card-header, .card-footer{
  background: transparent !important;
  border-bottom: var(--neo-border) !important;
}
.card-header{
  font-weight: 700;
  font-family: 'Space Grotesk',sans-serif;
}

/* ---------- Buttons ---------- */
.btn{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk',sans-serif !important;
  letter-spacing: -0.01em;
  padding: 0.6rem 1.2rem !important;
  transform: translate(0,0);
  position: relative;
}
.btn:hover{
  transform: translate(-1.5px,-1.5px);
  box-shadow: 4.5px 4.5px 0 #1a1a1a !important;
}
.btn:active, .btn:focus:active{
  transform: translate(2px,2px) !important;
  box-shadow: 1px 1px 0 #1a1a1a !important;
}
.btn-primary{
  background: var(--neo-primary) !important;
  color: #fff !important;
}
.btn-primary:hover{
  background: var(--neo-primary-dark) !important;
}
.btn-outline-primary{
  background: #fff !important;
  color: #1a1a1a !important;
}
.btn-outline-primary:hover{
  background: var(--neo-accent) !important;
  color: #1a1a1a !important;
}
.btn-success{ background: var(--neo-accent2) !important; color:#1a1a1a !important; border-color:#1a1a1a !important; }
.btn-warning{ background: var(--neo-accent) !important; color:#1a1a1a !important; }
.btn-danger{ background: var(--neo-accent3) !important; color:#fff !important; }
.btn-info{ background: var(--neo-accent4) !important; color:#fff !important; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  background: #fff !important;
  font-weight: 500;
  padding: 0.65rem 1rem !important;
}
.form-control:focus, .form-select:focus{
  border-color: #1a1a1a !important;
  box-shadow: 4px 4px 0 #1a1a1a !important;
  transform: translate(-1px,-1px);
  outline: none !important;
}
.form-control::placeholder{ color: #8a8a8a; font-weight: 400; }
.input-group-text{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-sm) !important;
  background: var(--neo-accent) !important;
  font-weight: 700;
  box-shadow: var(--neo-shadow-sm) !important;
}
.form-check-input{
  border: 2px solid #1a1a1a !important;
  box-shadow: 2px 2px 0 #1a1a1a !important;
}
.form-check-input:checked{
  background-color: var(--neo-primary) !important;
  border-color: #1a1a1a !important;
}

/* ---------- Navbar / Header ---------- */
.layout-navbar{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  background: #fff !important;
  margin: 12px 16px 0 16px;
  overflow: hidden;
}
.layout-navbar .navbar{
  background: transparent !important;
}

/* Landing navbar */
.landing-navbar{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  background: #fff !important;
}

/* ---------- Menu / Sidebar ---------- */
.layout-menu, .menu-vertical{
  border-right: var(--neo-border-thick) !important;
  box-shadow: 4px 0 0 rgba(26,26,26,0.06) !important;
  background: #fff !important;
}
.menu-item .menu-link{
  border-radius: 10px !important;
  margin: 4px 10px !important;
  border: 2px solid transparent !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk',sans-serif;
}
.menu-item .menu-link:hover{
  background: var(--neo-accent) !important;
  border-color: #1a1a1a !important;
  box-shadow: var(--neo-shadow-sm) !important;
  transform: translate(-1px,-1px);
  color: #1a1a1a !important;
}
.menu-item.active .menu-link{
  background: var(--neo-primary) !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
  box-shadow: var(--neo-shadow) !important;
}
.menu-item.active .menu-link .menu-icon,
.menu-item.active .menu-link i{ color: #fff !important; }

/* ---------- Tables ---------- */
.table{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius) !important;
  overflow: hidden;
  box-shadow: var(--neo-shadow) !important;
}
.table thead th{
  background: #1a1a1a !important;
  color: #fff !important;
  font-family: 'Space Grotesk',sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  border: none !important;
}
.table tbody td{
  border-bottom: 1.5px solid #e8e8e8 !important;
  font-weight: 500;
}
.table tbody tr:hover{
  background: #FFF9D6 !important;
}

/* ---------- Badges ---------- */
.badge{
  border: 2px solid #1a1a1a !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 #1a1a1a !important;
  font-weight: 800 !important;
  font-family: 'Space Grotesk',sans-serif;
  padding: 0.45em 0.8em !important;
}

/* ---------- Alerts ---------- */
.alert{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow) !important;
  font-weight: 600;
}

/* ---------- Modal ---------- */
.modal-content{
  border: var(--neo-border-thick) !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-lg) !important;
}
.modal-header{
  border-bottom: var(--neo-border) !important;
  background: var(--neo-accent) !important;
}
.modal-header .modal-title{ font-family:'Space Grotesk',sans-serif; font-weight:800; }

/* ---------- Dropdown ---------- */
.dropdown-menu{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow) !important;
  padding: 8px !important;
}
.dropdown-item{
  border-radius: 8px !important;
  font-weight: 600;
  margin: 2px 0;
}
.dropdown-item:hover{
  background: var(--neo-accent) !important;
  color:#1a1a1a !important;
  transform: translate(-1px,-1px);
  box-shadow: 2px 2px 0 #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
}

/* ---------- Pagination ---------- */
.pagination .page-link{
  border: 2px solid #1a1a1a !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 #1a1a1a !important;
  font-weight: 700;
  margin: 0 3px;
  color:#1a1a1a !important;
  background:#fff !important;
}
.pagination .page-link:hover{
  background: var(--neo-accent) !important;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #1a1a1a !important;
}
.pagination .active .page-link{
  background: var(--neo-primary) !important;
  color:#fff !important;
}

/* ---------- Auth page brutalism ---------- */
.authentication-wrapper{
  background: var(--neo-bg) !important;
}
.authentication-wrapper .card{
  border: var(--neo-border-thick) !important;
  box-shadow: var(--neo-shadow-lg) !important;
}

/* Auth cover */
.auth-cover-bg{
  background: repeating-linear-gradient(45deg, #FFE66D 0 20px, #fff 20px 40px) !important;
  border-right: var(--neo-border-thick) !important;
}

/* ---------- Landing (index) ---------- */
.front-page-landing{
  background: var(--neo-bg) !important;
}
.front-page-landing .section{
  border: var(--neo-border) !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow) !important;
  background: #fff;
  margin: 20px 0;
}

/* ---------- Footer brutalism ---------- */
.content-footer, .footer{
  border-top: var(--neo-border) !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: var(--neo-radius)  var(--neo-radius) 0 0 !important;
  box-shadow: 0 -4px 0 #1a1a1a !important;
}
.footer a{ color: var(--neo-accent) !important; font-weight:700; }

/* ---------- Switch brutalism ---------- */
.switch .switch-toggle-slider{
  border: 2px solid #1a1a1a !important;
  box-shadow: 2px 2px 0 #1a1a1a !important;
  border-radius: 999px !important;
}

/* ---------- Animations smooth ---------- */
@keyframes neo-float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}
@keyframes neo-pop{
  0%{ transform: scale(0.96) translate(1px,1px); }
  100%{ transform: scale(1) translate(0,0); }
}
.card, .btn, .alert{
  animation: neo-pop var(--neo-transition-smooth) both;
}

/* Scrollbar brutalism */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: #fff; border-left: var(--neo-border); }
::-webkit-scrollbar-thumb{ background: var(--neo-primary); border: 2px solid #1a1a1a; border-radius: 999px; box-shadow: inset 0 0 0 1px #fff; }
::-webkit-scrollbar-thumb:hover{ background: #5a4de0; }

/* App brand logo brutalism */
.app-brand-text{ font-family:'Space Grotesk',sans-serif !important; font-weight:800 !important; }

/* Avatar, timeline etc */
.avatar{ border: 2px solid #1a1a1a !important; box-shadow: 2px 2px 0 #1a1a1a !important; }

/* Utility: smooth all */
* { scrollbar-width: thin; scrollbar-color: var(--neo-primary) #fff; }

/* ---------- Dark mode - Neobrutalism Fix (full) ---------- */
[data-bs-theme="dark"]{
  --neo-bg: #15151a;
  --neo-paper: #232329;
  --neo-paper-2: #2b2b33;
  --neo-text: #f4f4f5;
  --neo-text-muted: #a1a1aa;
  --neo-border: 2.5px solid #3f3f46;
  --neo-border-thick: 3px solid #3f3f46;
  --neo-shadow: 5px 5px 0 #000;
  --neo-shadow-sm: 3px 3px 0 #000;
  --neo-shadow-lg: 7px 7px 0 #000;
  --neo-shadow-hover: 7px 7px 0 #000;
  --bs-body-bg: #15151a;
  --bs-paper-bg: #232329;
  --bs-body-color: #f4f4f5;
  --bs-heading-color: #ffffff;
  --bs-border-color: #3f3f46;
  --bs-card-bg: #232329;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .layout-wrapper,
[data-bs-theme="dark"] .content-wrapper{
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
}
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] .h4,[data-bs-theme="dark"] .h5,[data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label{
  color: #ffffff !important;
}
[data-bs-theme="dark"] .text-body, [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] small{
  color: var(--neo-text-muted) !important;
}
/* Cards */
[data-bs-theme="dark"] .card{
  background: var(--neo-paper) !important;
  color: var(--neo-text) !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
}
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer{
  border-color: #3f3f46 !important;
  color: #fff !important;
}
/* Navbar & Menu */
[data-bs-theme="dark"] .layout-navbar,
[data-bs-theme="dark"] .landing-navbar{
  background: #232329 !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  color: var(--neo-text) !important;
}
[data-bs-theme="dark"] .layout-menu, [data-bs-theme="dark"] .menu-vertical{
  background: #1f1f25 !important;
  border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .menu-item .menu-link{
  color: #d4d4d8 !important;
}
[data-bs-theme="dark"] .menu-item .menu-link:hover{
  background: #3f3f46 !important;
  color: #fff !important;
  border-color: #52525b !important;
}
[data-bs-theme="dark"] .menu-item.active .menu-link{
  background: var(--neo-primary) !important;
  color: #fff !important;
  border-color: #52525b !important;
}
/* Forms */
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select{
  background: #2a2a33 !important;
  color: #f4f4f5 !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow-sm) !important;
}
[data-bs-theme="dark"] .form-control::placeholder{ color: #a1a1aa !important; }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus{
  background: #2f2f3a !important;
  border-color: #52525b !important;
  box-shadow: 4px 4px 0 #000 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .input-group-text{
  background: #34343f !important;
  color: #f4f4f5 !important;
  border: var(--neo-border) !important;
}
[data-bs-theme="dark"] .form-check-input{
  background: #2a2a33 !important;
  border-color: #52525b !important;
}
/* Tables */
[data-bs-theme="dark"] .table{
  background: var(--neo-paper) !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
}
[data-bs-theme="dark"] .table thead th{
  background: #000 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .table tbody td{
  background: var(--neo-paper) !important;
  color: var(--neo-text) !important;
  border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .table tbody tr:hover td{
  background: #2f2f3a !important;
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background: #2a2a33 !important;
}
/* Dropdown */
[data-bs-theme="dark"] .dropdown-menu{
  background: #232329 !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
}
[data-bs-theme="dark"] .dropdown-item{
  color: #e4e4e7 !important;
}
[data-bs-theme="dark"] .dropdown-item:hover{
  background: #3f3f46 !important;
  color: #fff !important;
}
/* Modal */
[data-bs-theme="dark"] .modal-content{
  background: #232329 !important;
  color: var(--neo-text) !important;
  border: var(--neo-border-thick) !important;
  box-shadow: var(--neo-shadow-lg) !important;
}
[data-bs-theme="dark"] .modal-header{
  background: #2b2b33 !important;
  border-color: #3f3f46 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .modal-footer{
  border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .btn-close{ filter: invert(1); }
/* Pagination */
[data-bs-theme="dark"] .pagination .page-link{
  background: #2a2a33 !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .pagination .page-link:hover{
  background: #3f3f46 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .pagination .active .page-link{
  background: var(--neo-primary) !important;
  color: #fff !important;
}
/* Badges, Alerts */
[data-bs-theme="dark"] .badge{
  border-color: #3f3f46 !important;
}
[data-bs-theme="dark"] .alert{
  background: #2a2a33 !important;
  color: var(--neo-text) !important;
  border: var(--neo-border) !important;
}
/* Auth */
[data-bs-theme="dark"] .authentication-wrapper{
  background: var(--neo-bg) !important;
}
[data-bs-theme="dark"] .authentication-wrapper .card{
  background: #232329 !important;
}
[data-bs-theme="dark"] .auth-cover-bg{
  background: repeating-linear-gradient(45deg, #2a2a33 0 20px, #1f1f25 20px 40px) !important;
  border-color: #3f3f46 !important;
}
/* Footer */
[data-bs-theme="dark"] .content-footer, [data-bs-theme="dark"] .footer{
  background: #0f0f12 !important;
  border-color: #3f3f46 !important;
}
/* Switch */
[data-bs-theme="dark"] .switch .switch-toggle-slider{
  border-color: #3f3f46 !important;
}
/* Scrollbar dark */
[data-bs-theme="dark"] ::-webkit-scrollbar-track{ background: #18181b !important; border-color: #3f3f46 !important; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--neo-primary) !important; border-color: #3f3f46 !important; }
[data-bs-theme="dark"] *{ scrollbar-color: var(--neo-primary) #18181b !important; }
/* ApexCharts, cards advance etc */
[data-bs-theme="dark"] .apexcharts-text, [data-bs-theme="dark"] .apexcharts-legend-text{ fill: #e4e4e7 !important; color: #e4e4e7 !important; }
/* Fix white leftover: any inline style background white */
[data-bs-theme="dark"] .bg-white{ background: var(--neo-paper) !important; }
[data-bs-theme="dark"] .bg-light{ background: #2a2a33 !important; color: var(--neo-text) !important; }

/* Responsive tweak */
@media(max-width: 767px){
  .layout-navbar{ margin: 8px; }
  .card{ box-shadow: 3px 3px 0 #1a1a1a !important; }
}