/* ============================================
   TownCloud AI — Billing Portal Theme v2
   Light theme matching towncloud.ai main site
   ============================================ */

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

/* === Variables (matched to towncloud.ai) === */
:root {
  --tc-blue:        #2563eb;
  --tc-blue-lt:     #1d4ed8;
  --tc-blue-glow:   rgba(37,99,235,0.15);
  --tc-blue-dim:    rgba(37,99,235,0.08);
  --tc-bg:          #ffffff;
  --tc-bg2:         #f8fafc;
  --tc-bg3:         #f0f7ff;
  --tc-bg4:         #eff6ff;
  --tc-border:      #e2e8f0;
  --tc-text:        #0f172a;
  --tc-text-muted:  #64748b;
  --tc-white:       #ffffff;
  --bs-body-bg:           #ffffff;
  --bs-body-color:        #0f172a;
  --bs-primary:           #2563eb;
  --bs-primary-rgb:       37,99,235;
  --bs-link-color:        #2563eb;
  --bs-link-hover-color:  #1d4ed8;
  --bs-border-color:      #e2e8f0;
  --bs-card-bg:           #ffffff;
  --bs-secondary-bg:      #f8fafc;
  --bs-tertiary-bg:       #f0f7ff;
  --bs-emphasis-color:    #0f172a;
  --bs-secondary-color:   #64748b;
}

/* === Base === */
html, body {
  background-color: var(--tc-bg) !important;
  color: var(--tc-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

a {
  color: var(--tc-blue) !important;
}
a:hover {
  color: var(--tc-blue-lt) !important;
}

.card, .panel, .box {
  background-color: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.navbar, .navbar-header, header, .topbar {
  background-color: var(--tc-bg) !important;
  border-bottom: 1px solid var(--tc-border) !important;
  color: var(--tc-text) !important;
}

.btn-primary, .btn.btn-primary {
  background-color: var(--tc-blue) !important;
  border-color: var(--tc-blue) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--tc-blue-lt) !important;
  border-color: var(--tc-blue-lt) !important;
}

.text-primary, .badge-primary {
  color: var(--tc-blue) !important;
}
.bg-primary {
  background-color: var(--tc-blue) !important;
}

input, select, textarea, .form-control {
  background-color: #ffffff !important;
  border: 1px solid var(--tc-border) !important;
  color: var(--tc-text) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--tc-blue) !important;
  box-shadow: 0 0 0 3px var(--tc-blue-dim) !important;
}

table, th, td {
  color: var(--tc-text) !important;
  border-color: var(--tc-border) !important;
}
thead {
  background-color: var(--tc-bg2) !important;
}

.footer, footer {
  background-color: var(--tc-bg2) !important;
  color: var(--tc-text-muted) !important;
  border-top: 1px solid var(--tc-border) !important;
}

.sidebar, .nav-sidebar {
  background-color: var(--tc-bg2) !important;
  border-right: 1px solid var(--tc-border) !important;
}

.nav-link {
  color: var(--tc-text) !important;
}
.nav-link:hover, .nav-link.active {
  color: var(--tc-blue) !important;
}

.text-muted {
  color: var(--tc-text-muted) !important;
}

/* Status badges keep semantic colors */
.badge-success, .text-success { color: #10b981 !important; }
.badge-danger, .text-danger { color: #ef4444 !important; }
.badge-warning, .text-warning { color: #f59e0b !important; }

/* Dashboard welcome banner: black text instead of blue (readability) */
.alert-info {
  color: var(--tc-text) !important;
}
.alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info p, .alert-info li {
  color: var(--tc-text) !important;
}

/* Card-header action buttons (Update, All Invoices, All Orders, All Tickets, etc.):
   swap dark bg -> blue bg, white text */
.btn-dark, .btn.btn-dark {
  background-color: var(--tc-blue) !important;
  border-color: var(--tc-blue) !important;
  color: #ffffff !important;
}
.btn-dark:hover, .btn.btn-dark:hover {
  background-color: var(--tc-blue-lt) !important;
  border-color: var(--tc-blue-lt) !important;
  color: #ffffff !important;
}