/* ============================================
   SDigital — Clean Professional Theme v2
   ============================================ */

:root {
  --sd-blue-900: #0A1628;
  --sd-blue-800: #0F2140;
  --sd-blue-700: #163063;
  --sd-blue-600: #1A3F7A;
  --sd-blue-500: #2563EB;
  --sd-blue-400: #3B82F6;
  --sd-blue-300: #60A5FA;
  --sd-blue-200: #93C5FD;
  --sd-blue-100: #DBEAFE;
  --sd-blue-50:  #EFF6FF;

  --sd-slate-900: #0F172A;
  --sd-slate-800: #1E293B;
  --sd-slate-700: #334155;
  --sd-slate-600: #475569;
  --sd-slate-500: #64748B;
  --sd-slate-400: #94A3B8;
  --sd-slate-300: #CBD5E1;
  --sd-slate-200: #E2E8F0;
  --sd-slate-100: #F1F5F9;
  --sd-slate-50:  #F8FAFC;

  --sd-white: #FFFFFF;
  --sd-green: #059669;
  --sd-amber: #D97706;
  --sd-red:   #DC2626;
}

/* === Reset & Base === */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: var(--sd-slate-100) !important;
  color: var(--sd-slate-800) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sd-blue-500) !important; text-decoration: none !important; }
a:hover { color: var(--sd-blue-700) !important; }


/* =====================
   NAVBAR
   ===================== */
.navbar, nav.navbar {
  background: var(--sd-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--sd-slate-200) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  padding: .5rem 1.5rem !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .navbar-brand span {
  color: var(--sd-slate-700) !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
}
.navbar .nav-link { opacity: .75; transition: opacity .15s ease; }
.navbar .nav-link:hover { opacity: 1; color: var(--sd-slate-900) !important; }

.navbar .navbar-brand {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -.3px;
  opacity: 1 !important;
  color: var(--sd-slate-900) !important;
}
.navbar .navbar-brand img {
  filter: none !important;
  height: 30px !important;
}

/* Register button in navbar */
.navbar .btn-outline-light,
.navbar .btn-outline-primary,
.navbar .btn {
  border: 1.5px solid var(--sd-slate-200) !important;
  background: var(--sd-white) !important;
  color: var(--sd-slate-700) !important;
  font-size: .82rem !important;
  padding: .35rem 1rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.navbar .btn:hover {
  background: var(--sd-slate-50) !important;
  border-color: var(--sd-slate-300) !important;
  color: var(--sd-slate-900) !important;
}

/* Language selector in navbar */
.navbar .ts-control,
.navbar .ts-wrapper .ts-control,
.navbar select,
.navbar .form-select {
  background: var(--sd-white) !important;
  border: 1px solid var(--sd-slate-200) !important;
  color: var(--sd-slate-700) !important;
  font-size: .82rem !important;
  border-radius: 6px !important;
}


/* =====================
   SHOWCASE / HERO
   ===================== */
.showcase, .jumbotron, .hero,
[class*="showcase"],
.card:first-child .card-body:has(h1),
.bg-primary {
  background: var(--sd-blue-500) !important;
  color: var(--sd-white) !important;
}

/* Target the showcase container more specifically */
.container > .card:first-of-type,
.container > div:first-of-type > .card:first-of-type {
  /* don't override randomly */
}

/* The welcome hero area */
body > div > .container > :first-child,
.card.border-0.rounded-0,
.card[class*="bg-"] {
  border-radius: 0 !important;
}

/* Hero section specific styling */
h1, .h1 {
  font-weight: 700 !important;
  letter-spacing: -.5px;
}


/* =====================
   CARDS
   ===================== */
.card {
  background: var(--sd-white) !important;
  border: 1px solid var(--sd-slate-200) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04) !important;
}
.card-header {
  background: var(--sd-white) !important;
  border-bottom: 1px solid var(--sd-slate-200) !important;
  padding: 1rem 1.25rem !important;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .h1, .card-header .h2, .card-header .h3,
.card-header .h4, .card-header .h5, .card-header .h6 {
  color: var(--sd-slate-900) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.card-body {
  padding: 1.25rem !important;
  color: var(--sd-slate-600) !important;
}


/* =====================
   BUTTONS
   ===================== */
.btn-primary, .btn-primary:focus, .btn-primary:active {
  background: var(--sd-blue-500) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: .55rem 1.35rem !important;
  color: var(--sd-white) !important;
  box-shadow: 0 1px 2px rgba(37,99,235,.3) !important;
  transition: all .15s ease !important;
}
.btn-primary:hover {
  background: var(--sd-blue-600) !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.35) !important;
  transform: translateY(-1px) !important;
}

.btn-outline-primary {
  color: var(--sd-blue-500) !important;
  border: 1.5px solid var(--sd-blue-500) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: .55rem 1.35rem !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--sd-blue-500) !important;
  color: var(--sd-white) !important;
}

/* Fix dark/secondary buttons to match the palette */
.btn-secondary, .btn-dark, .btn-outline-secondary, .btn-outline-dark {
  background: var(--sd-slate-700) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: .55rem 1.35rem !important;
  color: var(--sd-white) !important;
}
.btn-secondary:hover, .btn-dark:hover {
  background: var(--sd-slate-800) !important;
}

.btn-success {
  background: var(--sd-green) !important;
  border: none !important;
  border-radius: 8px !important;
}
.btn-danger {
  background: var(--sd-red) !important;
  border: none !important;
  border-radius: 8px !important;
}
.btn-warning {
  background: var(--sd-amber) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--sd-white) !important;
}


/* =====================
   TABLES
   ===================== */
.table { border-collapse: separate; border-spacing: 0; }
.table thead th {
  background: var(--sd-slate-50) !important;
  color: var(--sd-slate-500) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: .72rem !important;
  letter-spacing: .6px !important;
  padding: .75rem 1rem !important;
  border-bottom: 1px solid var(--sd-slate-200) !important;
  border-top: none !important;
}
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--sd-slate-50) !important; }
.table tbody td { 
  padding: .75rem 1rem !important;
  border-color: var(--sd-slate-100) !important;
  vertical-align: middle !important;
}


/* =====================
   FORMS
   ===================== */
.form-control, .form-select {
  border: 1.5px solid var(--sd-slate-300) !important;
  border-radius: 8px !important;
  padding: .5rem .85rem !important;
  font-size: .875rem !important;
  color: var(--sd-slate-800) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sd-blue-400) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
  outline: none !important;
}
.form-label, label {
  font-weight: 500 !important;
  font-size: .85rem !important;
  color: var(--sd-slate-700) !important;
}


/* =====================
   BADGES
   ===================== */
.badge {
  font-weight: 600 !important;
  font-size: .72rem !important;
  padding: .35rem .65rem !important;
  border-radius: 6px !important;
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--sd-blue-500) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--sd-green) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--sd-amber) !important; }
.badge.bg-danger, .badge.text-bg-danger   { background: var(--sd-red) !important; }
.badge.bg-secondary { background: var(--sd-slate-500) !important; }
.badge.bg-info { background: var(--sd-blue-400) !important; }


/* =====================
   FOOTER
   ===================== */
footer, .footer {
  background: var(--sd-slate-900) !important;
  color: var(--sd-slate-400) !important;
  padding: 2rem 0 !important;
  font-size: .85rem !important;
}
footer a, .footer a {
  color: var(--sd-slate-300) !important;
}
footer a:hover, .footer a:hover {
  color: var(--sd-white) !important;
}
footer span, .footer span {
  color: var(--sd-slate-400) !important;
}


/* =====================
   SIDEBAR / LIST GROUP
   ===================== */
.list-group { border-radius: 10px !important; overflow: hidden; }
.list-group-item {
  border-color: var(--sd-slate-100) !important;
  font-size: .875rem !important;
  padding: .75rem 1rem !important;
  transition: background .1s ease !important;
}
.list-group-item:hover { background: var(--sd-slate-50) !important; }
.list-group-item.active {
  background: var(--sd-blue-500) !important;
  border-color: var(--sd-blue-500) !important;
  color: var(--sd-white) !important;
}


/* =====================
   BREADCRUMBS
   ===================== */
.breadcrumb {
  background: transparent !important;
  padding: .5rem 0 !important;
  font-size: .82rem !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--sd-slate-400) !important; }
.breadcrumb-item a { color: var(--sd-blue-500) !important; }
.breadcrumb-item.active { color: var(--sd-slate-500) !important; }


/* =====================
   PAGINATION
   ===================== */
.page-link {
  color: var(--sd-blue-500) !important;
  border-color: var(--sd-slate-200) !important;
  font-size: .85rem !important;
}
.page-item.active .page-link {
  background: var(--sd-blue-500) !important;
  border-color: var(--sd-blue-500) !important;
  color: var(--sd-white) !important;
}


/* =====================
   ALERTS
   ===================== */
.alert { border-radius: 8px !important; font-size: .875rem !important; }
.alert-primary {
  background: var(--sd-blue-50) !important;
  border: 1px solid var(--sd-blue-200) !important;
  color: var(--sd-blue-700) !important;
}
.alert-success {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
}
.alert-danger {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  color: #991B1B !important;
}
.alert-warning {
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #92400E !important;
}


/* =====================
   LOGIN / AUTH PAGES
   ===================== */
.page-login .card, .page-signup .card, .page-password-reset .card {
  border: 1px solid var(--sd-slate-200) !important;
  border-top: 3px solid var(--sd-blue-500) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}


/* =====================
   ACCORDION
   ===================== */
.accordion-button:not(.collapsed) {
  background: var(--sd-blue-50) !important;
  color: var(--sd-blue-700) !important;
  box-shadow: none !important;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}


/* =====================
   INVOICE GATEWAY
   ===================== */
.invoice-gateway {
  border: 1.5px solid var(--sd-slate-200) !important;
  border-radius: 8px !important;
  transition: all .15s ease !important;
}
.invoice-gateway:hover {
  border-color: var(--sd-blue-400) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.1) !important;
}


/* =====================
   MISC
   ===================== */
.dropdown-menu {
  border: 1px solid var(--sd-slate-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  padding: .35rem !important;
}
.dropdown-item {
  border-radius: 6px !important;
  font-size: .85rem !important;
  padding: .45rem .75rem !important;
}
.dropdown-item:active, .dropdown-item.active {
  background: var(--sd-blue-500) !important;
}

.text-primary { color: var(--sd-blue-500) !important; }
.bg-primary { background: var(--sd-blue-500) !important; }
.border-primary { border-color: var(--sd-blue-500) !important; }

/* Toast notifications */
.toast { border-radius: 8px !important; }

/* Offcanvas / Mobile menu */
.offcanvas { background: var(--sd-white) !important; }
.offcanvas-item { border-color: var(--sd-slate-100) !important; }
.offcanvas-item:hover { background: var(--sd-slate-50) !important; }

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

/* Smooth scrolling */
html { scroll-behavior: smooth; }