/* ==========================================================
   TEMA MERAH MARON (MAROON THEME) - APLIKASI BENGKEL TERPADU
   Warna Dasar: Merah Maron (#7A0C0C / #8B0000)
   Aksen Gelap: #5E0808 | Teks Kontras Tinggi: #FFFFFF
   ========================================================== */

:root {
  --maron-primary: #7A0C0C;
  --maron-dark: #580808;
  --maron-light: #9B1B1B;
  --maron-hover: #660A0A;
  --maron-subtle: #FDF2F2;
  --maron-border: #8B0000;
}

/* Navbar & Brand Header */
.main-header.navbar-maron {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--maron-dark);
}

.main-header.navbar-maron .nav-link,
.main-header.navbar-maron .navbar-nav .nav-link {
  color: #ffffff !important;
}

.main-header.navbar-maron .nav-link:hover {
  color: #ffe6e6 !important;
}

.brand-link.bg-maron {
  background-color: var(--maron-dark) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-link.bg-maron:hover {
  color: #ffffff !important;
}

/* Sidebar Dark Styling with Maroon Accent */
.sidebar-dark-maron .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-maron .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.sidebar-dark-maron .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--maron-light) !important;
  color: #ffffff !important;
}

.nav-sidebar .nav-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #adb5bd;
  padding: 0.8rem 1rem 0.3rem 1rem;
}

/* Primary Button Styled with Maroon */
.btn-primary {
  background-color: var(--maron-primary) !important;
  border-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--maron-dark) !important;
  border-color: var(--maron-dark) !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  color: var(--maron-primary) !important;
  border-color: var(--maron-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

/* Cards & Panels with Maroon Header */
.card-maron:not(.card-outline) > .card-header {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

.card-maron.card-outline {
  border-top: 3px solid var(--maron-primary) !important;
}

.bg-maron {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

.text-maron {
  color: var(--maron-primary) !important;
}

.badge-maron {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

/* Small Stats Box with Maroon */
.small-box.bg-maron {
  background-color: var(--maron-primary) !important;
  color: #ffffff !important;
}

.small-box.bg-maron .icon {
  color: rgba(255, 255, 255, 0.2) !important;
}

.small-box.bg-maron .small-box-footer {
  background-color: var(--maron-dark) !important;
  color: #ffffff !important;
}

/* Breadcrumbs & Accents */
.breadcrumb-item a {
  color: var(--maron-primary);
}

.page-item.active .page-link {
  background-color: var(--maron-primary) !important;
  border-color: var(--maron-primary) !important;
}

/* POS Cashier UI Specific Styling */
.pos-total-display {
  background: #1e293b;
  color: #38bdf8;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pos-total-label {
  font-size: 0.85rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.pos-total-amount {
  font-size: 2.2rem;
  color: #22c55e;
  line-height: 1.1;
}

/* Responsive Table Adjustments (Aturan 20) */
@media (max-width: 767.98px) {
  .content-header h1 {
    font-size: 1.35rem;
  }
  .card-header .btn {
    width: 100%;
    margin-top: 5px;
  }
  .pos-total-amount {
    font-size: 1.6rem;
  }
  .btn-group.btn-group-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
}