/* InvoicePortal — SoftMacros dark theme */

/* ════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — override Bootstrap 5.3 dark-mode variables
   ════════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="dark"] {
  /* Palette */
  --sm-bg:           #0b2a1e;
  --sm-bg-alt:       #0d3324;
  --sm-bg-card:      #113d2a;
  --sm-accent:       #00e676;
  --sm-accent-hover: #69ff98;
  --sm-accent-dark:  #00c853;
  --sm-text:         #f0fff4;
  --sm-text-muted:   #a7c4b2;
  --sm-text-faint:   #5e8c75;
  --sm-border:       #1e4d36;

  /* Bootstrap overrides */
  --bs-body-bg:              var(--sm-bg);
  --bs-body-bg-rgb:          11, 42, 30;
  --bs-body-color:           var(--sm-text-muted);
  --bs-body-color-rgb:       167, 196, 178;
  --bs-heading-color:        var(--sm-text);
  --bs-emphasis-color:       var(--sm-text);

  --bs-primary:              var(--sm-accent);
  --bs-primary-rgb:          0, 230, 118;
  --bs-link-color:           var(--sm-accent);
  --bs-link-color-rgb:       0, 230, 118;
  --bs-link-hover-color:     var(--sm-accent-hover);

  --bs-card-bg:              var(--sm-bg-card);
  --bs-card-border-color:    var(--sm-border);
  --bs-card-cap-bg:          rgba(30, 77, 54, 0.5);

  --bs-secondary-bg:         var(--sm-bg-alt);
  --bs-secondary-bg-rgb:     13, 51, 36;
  --bs-tertiary-bg:          var(--sm-bg-card);
  --bs-tertiary-bg-rgb:      17, 61, 42;

  --bs-border-color:         var(--sm-border);
  --bs-border-color-translucent: rgba(30, 77, 54, 0.5);

  --bs-table-color:          var(--sm-text-muted);
  --bs-table-bg:             transparent;
  --bs-table-striped-bg:     rgba(30, 77, 54, 0.25);
  --bs-table-hover-bg:       rgba(0, 230, 118, 0.05);
  --bs-table-border-color:   var(--sm-border);

  --bs-input-bg:             var(--sm-bg-alt);
  --bs-input-border-color:   var(--sm-border);
  --bs-input-color:          var(--sm-text);

  --bs-code-color:           var(--sm-accent-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════════ */
html {
  background-color: #0b2a1e;
}

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--sm-text-muted);
  background-color: #0b2a1e !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sm-text);
}

a {
  color: var(--sm-accent);
}
a:hover {
  color: var(--sm-accent-hover);
}

code {
  color: var(--sm-accent-hover);
  background: rgba(0, 230, 118, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

pre {
  background: var(--sm-bg-alt) !important;
  border: 1px solid var(--sm-border);
  border-radius: 0.5rem;
}
pre code {
  font-size: 0.8rem;
  background: transparent;
  padding: 0;
  color: var(--sm-accent-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */
.btn-primary {
  --bs-btn-color:              #0b2a1e;
  --bs-btn-bg:                 var(--sm-accent);
  --bs-btn-border-color:       var(--sm-accent);
  --bs-btn-hover-color:        #0b2a1e;
  --bs-btn-hover-bg:           var(--sm-accent-hover);
  --bs-btn-hover-border-color: var(--sm-accent-hover);
  --bs-btn-active-color:       #0b2a1e;
  --bs-btn-active-bg:          var(--sm-accent-dark);
  --bs-btn-focus-shadow-rgb:   0, 230, 118;
}

.btn-outline-primary {
  --bs-btn-color:              var(--sm-accent);
  --bs-btn-border-color:       var(--sm-accent);
  --bs-btn-hover-color:        #0b2a1e;
  --bs-btn-hover-bg:           var(--sm-accent);
  --bs-btn-hover-border-color: var(--sm-accent);
}

.btn-outline-secondary {
  --bs-btn-color:              var(--sm-text-muted);
  --bs-btn-border-color:       var(--sm-border);
  --bs-btn-hover-color:        var(--sm-text);
  --bs-btn-hover-bg:           rgba(30, 77, 54, 0.5);
  --bs-btn-hover-border-color: var(--sm-border);
}

.btn-success {
  --bs-btn-color:              #0b2a1e;
  --bs-btn-bg:                 var(--sm-accent);
  --bs-btn-border-color:       var(--sm-accent);
  --bs-btn-hover-color:        #0b2a1e;
  --bs-btn-hover-bg:           var(--sm-accent-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   4. CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--sm-bg-card);
  border-color: var(--sm-border);
  border-radius: 0.75rem;
}

.card-header {
  background: rgba(30, 77, 54, 0.4);
  border-color: var(--sm-border);
  color: var(--sm-text);
}

.card-hoverable {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
}

.card-hoverable:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 230, 118, 0.1) !important;
}

/* highlighted card (e.g. most-popular pricing) */
.card.border-success,
.card.border-2 {
  border-color: var(--sm-accent) !important;
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.2);
}

/* ════════════════════════════════════════════════════════════════════════════
   5. FORMS
   ════════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background-color: var(--sm-bg-alt);
  border-color: var(--sm-border);
  color: var(--sm-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--sm-bg-alt);
  border-color: var(--sm-accent);
  color: var(--sm-text);
  box-shadow: 0 0 0 0.25rem rgba(0, 230, 118, 0.15);
}

.form-control::placeholder {
  color: var(--sm-text-faint);
}

.form-control[readonly] {
  background-color: var(--sm-bg);
  color: var(--sm-text-muted);
}

.form-text {
  color: var(--sm-text-faint);
}

.form-label {
  color: var(--sm-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   6. TABLES
   ════════════════════════════════════════════════════════════════════════════ */
.table {
  color: var(--sm-text-muted);
  border-color: var(--sm-border);
}

.table thead th {
  background: rgba(30, 77, 54, 0.4);
  color: var(--sm-text);
  border-color: var(--sm-border);
}

.table > :not(caption) > * > * {
  border-color: var(--sm-border);
}

.table-light th,
.table-light td {
  background: rgba(30, 77, 54, 0.4) !important;
  color: var(--sm-text) !important;
}

.table-primary,
.table-primary > td,
.table-primary > th {
  background: rgba(0, 230, 118, 0.15) !important;
  color: var(--sm-text) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   7. BADGES
   ════════════════════════════════════════════════════════════════════════════ */
.badge.bg-light {
  background: rgba(30, 77, 54, 0.6) !important;
  color: var(--sm-text-muted) !important;
  border-color: var(--sm-border) !important;
}

.badge.bg-success {
  background: var(--sm-accent) !important;
  color: #0b2a1e !important;
}

.bg-success-subtle {
  background: rgba(0, 230, 118, 0.12) !important;
}
.text-success {
  color: var(--sm-accent) !important;
}
.border-success {
  border-color: var(--sm-accent) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. ALERTS
   ════════════════════════════════════════════════════════════════════════════ */
.alert-info {
  background: rgba(0, 230, 118, 0.08);
  border-color: rgba(0, 230, 118, 0.25);
  color: var(--sm-accent-hover);
}

.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
  color: #f77;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
  color: #ffd55a;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. SIDEBAR
   ════════════════════════════════════════════════════════════════════════════ */
#wrapper {
  min-height: 100vh;
}

#sidebar {
  width: 260px;
  min-height: 100vh;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sm-bg-alt) !important;
  border-right: 1px solid var(--sm-border);
  transition: width 0.2s ease;
}

.sidebar-brand {
  border-bottom-color: var(--sm-border) !important;
}

#sidebar .nav-link {
  padding: 0.55rem 0.9rem;
  color: var(--sm-text-muted);
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}

#sidebar .nav-link:hover:not(.active) {
  background: rgba(0, 230, 118, 0.08);
  color: var(--sm-text);
}

#sidebar .nav-link.active {
  background: var(--sm-accent) !important;
  color: #0b2a1e !important;
  font-weight: 600;
}

#sidebar .border-top {
  border-color: var(--sm-border) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. NAVBAR (top bar inside app)
   ════════════════════════════════════════════════════════════════════════════ */
.navbar {
  min-height: 56px;
  background: var(--sm-bg-alt) !important;
  border-bottom: 1px solid var(--sm-border) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. PAGE CONTENT
   ════════════════════════════════════════════════════════════════════════════ */
#page-content {
  min-height: 100vh;
  background-color: var(--sm-bg) !important;
  overflow-x: clip;
}

/* ════════════════════════════════════════════════════════════════════════════
   12. AVATAR
   ════════════════════════════════════════════════════════════════════════════ */
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: rgba(0, 230, 118, 0.15);
  color: var(--sm-accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   13. STAT ICON BOXES
   ════════════════════════════════════════════════════════════════════════════ */
.stat-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. DROP ZONE
   ════════════════════════════════════════════════════════════════════════════ */
.drop-zone {
  border: 2px dashed var(--sm-border);
  border-radius: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--sm-bg-alt);
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--sm-accent);
  background: rgba(0, 230, 118, 0.04);
}

/* ════════════════════════════════════════════════════════════════════════════
   15. PUBLIC (auth) PAGES
   ════════════════════════════════════════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  background: var(--sm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  /* subtle radial glow */
  background-image: radial-gradient(ellipse 70% 50% at 50% 100%,
    rgba(0, 230, 118, 0.08) 0%, transparent 70%);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  border-radius: 1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  padding: 2.5rem 2rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   16. LANGUAGE SWITCHER
   ════════════════════════════════════════════════════════════════════════════ */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--sm-border);
  border-radius: 0.4rem;
  color: var(--sm-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.lang-select:hover,
.lang-select:focus {
  border-color: var(--sm-accent);
  color: var(--sm-text);
  outline: none;
}
.lang-select option {
  background: var(--sm-bg-card);
  color: var(--sm-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   17. MISC UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */
.border-dashed {
  border-style: dashed !important;
  border-color: var(--sm-border) !important;
}

.bg-light {
  background-color: var(--sm-bg-alt) !important;
  color: var(--sm-text-muted) !important;
}

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

.text-faint {
  color: var(--sm-text-faint) !important;
}

/* Progress bar */
.progress {
  background: var(--sm-bg-alt);
}
.progress-bar {
  transition: width 0.6s ease;
  background: var(--sm-accent);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sm-bg); }
::-webkit-scrollbar-thumb { background: var(--sm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sm-accent); }

/* ════════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE SIDEBAR
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  #sidebar {
    position: fixed;
    left: -260px;
    z-index: 1035;
    transition: left 0.2s ease;
  }

  #sidebar.show {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  #page-content {
    width: 100%;
  }
}