/* ===================================================================
   BROWN THEME FOR CONTAINER QUANTITY SYSTEM
   Consistent brown color scheme across all components
   =================================================================== */

/* ==================== COLOR VARIABLES ==================== */
:root {
  --brown-primary: #8b4513;
  --brown-dark: #6d3410;
  --brown-light: #a0522d;
  --brown-lighter: #bc7948;
  --brown-lightest: #d4a574;
  --brown-bg-light: rgba(139, 69, 19, 0.1);
  --brown-bg-lighter: rgba(139, 69, 19, 0.05);
  --brown-border: rgba(139, 69, 19, 0.2);
}

/* ==================== PRIMARY BUTTONS ==================== */
.btn-primary {
  background-color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3) !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.btn-primary:disabled {
  background-color: var(--brown-lightest) !important;
  border-color: var(--brown-lightest) !important;
}

/* ==================== OUTLINE BUTTONS ==================== */
.btn-outline-primary {
  color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
  background-color: transparent !important;
}

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

/* ==================== LINKS ==================== */
a {
  color: var(--brown-primary);
}

a:hover {
  color: var(--brown-dark);
}

/* ==================== BADGES ==================== */
.badge-primary {
  background-color: var(--brown-primary) !important;
  color: #ffffff !important;
}

/* ==================== FORM CONTROLS ==================== */
.form-control:focus,
.form-select:focus {
  border-color: var(--brown-light) !important;
  box-shadow: 0 0 0 0.2rem var(--brown-bg-light) !important;
}

.form-check-input:checked {
  background-color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
}

/* ==================== NAVIGATION (ACTIVE STATE) ==================== */
.menu-item.active > .menu-link,
#layout-menu .menu-item.active > .menu-link {
  background-color: var(--brown-primary) !important;
  color: #ffffff !important;
}

.menu-item.active > .menu-link i,
#layout-menu .menu-item.active > .menu-link i {
  color: #ffffff !important;
}

/* ==================== PAGINATION ==================== */
.pagination .page-item.active .page-link {
  background-color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
}

.pagination .page-link {
  color: var(--brown-primary);
}

.pagination .page-link:hover {
  color: var(--brown-dark);
  background-color: var(--brown-bg-lighter);
}

/* ==================== ALERTS ==================== */
.alert-primary {
  background-color: var(--brown-bg-light) !important;
  border-color: var(--brown-border) !important;
  color: var(--brown-dark) !important;
}

/* ==================== PROGRESS BARS ==================== */
.progress-bar {
  background-color: var(--brown-primary) !important;
}

/* ==================== DROPDOWNS ==================== */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brown-primary) !important;
  color: #ffffff !important;
}

/* ==================== TABS ==================== */
.nav-tabs .nav-link.active {
  color: var(--brown-primary) !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
  border-bottom: 2px solid var(--brown-primary) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--brown-primary) !important;
  color: #ffffff !important;
}

/* ==================== CARDS ==================== */
.card-header {
  background-color: var(--brown-bg-lighter) !important;
  border-bottom: 1px solid var(--brown-border) !important;
}

/* ==================== TABLES ==================== */
.table-primary {
  background-color: var(--brown-bg-light) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--brown-bg-lighter) !important;
}

/* ==================== LIST GROUPS ==================== */
.list-group-item.active {
  background-color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
}

/* ==================== SPINNERS ==================== */
.spinner-border,
.spinner-grow {
  color: var(--brown-primary) !important;
}

/* ==================== TEXT COLORS ==================== */
.text-primary {
  color: var(--brown-primary) !important;
}

.bg-primary {
  background-color: var(--brown-primary) !important;
}

.border-primary {
  border-color: var(--brown-primary) !important;
}

/* ==================== SWITCHES & TOGGLES ==================== */
.form-switch .form-check-input:checked {
  background-color: var(--brown-primary) !important;
  border-color: var(--brown-primary) !important;
}

/* ==================== INPUT GROUPS ==================== */
.input-group-text {
  background-color: var(--brown-bg-lighter);
  border-color: var(--brown-border);
  color: var(--brown-dark);
}

/* ==================== MODALS ==================== */
.modal-header {
  background-color: var(--brown-bg-lighter);
  border-bottom: 1px solid var(--brown-border);
}

/* ==================== TOASTS ==================== */
.toast-header {
  background-color: var(--brown-bg-lighter);
  border-bottom: 1px solid var(--brown-border);
}

/* ==================== CUSTOM SELECTS ==================== */
.form-select:focus {
  border-color: var(--brown-light) !important;
  box-shadow: 0 0 0 0.2rem var(--brown-bg-light) !important;
}

/* ==================== ACCORDION ==================== */
.accordion-button:not(.collapsed) {
  background-color: var(--brown-bg-light) !important;
  color: var(--brown-dark) !important;
}

.accordion-button:focus {
  border-color: var(--brown-light) !important;
  box-shadow: 0 0 0 0.2rem var(--brown-bg-light) !important;
}

/* ==================== OFFCANVAS ==================== */
.offcanvas-header {
  background-color: var(--brown-bg-lighter);
  border-bottom: 1px solid var(--brown-border);
}

/* ==================== BREADCRUMB ==================== */
.breadcrumb-item.active {
  color: var(--brown-primary);
}

/* ==================== NAVBAR ==================== */
.navbar-brand {
  color: var(--brown-primary) !important;
}

/* Top Navbar - White Glass Effect */
.layout-navbar,
.navbar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Navbar text - Black and bold */
.layout-navbar .navbar-nav .nav-link,
.layout-navbar .navbar-text,
.layout-navbar span,
.layout-navbar .nav-item,
.navbar .navbar-nav .nav-link,
.navbar .navbar-text {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Navbar icons */
.layout-navbar i,
.navbar i {
  color: #000000 !important;
}

/* Search input */
.layout-navbar .form-control,
.navbar .form-control {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

.layout-navbar .form-control::placeholder,
.navbar .form-control::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
}

/* Notification badge */
.badge.bg-danger {
  background-color: var(--brown-primary) !important;
}

/* Dropdown menu from navbar */
.layout-navbar .dropdown-menu,
.navbar .dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.layout-navbar .dropdown-item,
.navbar .dropdown-item {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar-thumb {
  background-color: var(--brown-light);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--brown-primary);
}

/* ==================== BUTTON SIZES - CONSISTENT FORMAT ==================== */
.btn {
  font-weight: 500;
  border-radius: 6px;
  padding: 0.625rem 1.25rem;
  transition: all 0.2s ease;
}

.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* ==================== FOCUS STATES ==================== */
*:focus {
  outline: none !important;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 0.2rem var(--brown-bg-light) !important;
}

/* ==================== HOVER EFFECTS ==================== */
.btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

/* ==================== ACTIVE STATES ==================== */
.btn-primary:active {
  transform: translateY(0);
}

/* ==================== LOGOUT BUTTON ==================== */
#layout-menu .logout-link,
#layout-menu .menu-item .logout-link,
.menu-item form button,
.menu-item .logout-form button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--brown-primary) !important;
  border: 1px solid var(--brown-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  width: calc(100% - 1.5rem) !important;
  margin: 1.5rem 0.75rem !important;
  transition: all 0.2s ease !important;
}

/* Logout button container positioning */
#layout-menu .menu-item:last-child,
#layout-menu .menu-inner > .menu-item:last-child {
  margin-top: auto !important;
  padding-bottom: 1rem !important;
}

#layout-menu .logout-link:hover,
#layout-menu .menu-item .logout-link:hover,
.menu-item form button:hover,
.menu-item .logout-form button:hover {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3) !important;
  transform: translateY(-1px) !important;
}

#layout-menu .logout-link i,
.menu-item form button i,
.menu-item .logout-form button i {
  color: #ffffff !important;
  margin-right: 0.5rem !important;
}