/* ==========================================================================
   MinStock — Custom Theme Override
   Primary palette: Indigo (#6366f1) for content/buttons
   Sidebar active accent: Sky (#38bdf8) — pops on dark background
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary,
.wizard > .actions a {
  --bs-btn-color:                #fff;
  --bs-btn-bg:                   #6366f1;
  --bs-btn-border-color:         #6366f1;
  --bs-btn-hover-color:          #fff;
  --bs-btn-hover-bg:             #4f46e5;
  --bs-btn-hover-border-color:   #4f46e5;
  --bs-btn-focus-shadow-rgb:     99, 102, 241;
  --bs-btn-active-color:         #fff;
  --bs-btn-active-bg:            #4338ca;
  --bs-btn-active-border-color:  #4338ca;
  --bs-btn-disabled-color:       #fff;
  --bs-btn-disabled-bg:          #6366f1;
  --bs-btn-disabled-border-color:#6366f1;
}

.btn-primary:not(.btn-light),
.wizard > .actions a:not(.btn-light) {
  color: #fff;
}

.btn-primary:not(.btn-light):hover,
.wizard > .actions a:not(.btn-light):hover,
.btn-primary:not(.btn-light):focus,
.wizard > .actions a:not(.btn-light):focus,
.btn-primary:not(.btn-light):active,
.wizard > .actions a:not(.btn-light):active {
  color: #fff;
}

.btn-primary:not(.btn-light):focus,
.wizard > .actions a:not(.btn-light):focus,
.btn-primary:not(.btn-light):active,
.wizard > .actions a:not(.btn-light):active {
  background: #4f46e5;
  border-color: #4f46e5;
}

.btn-outline-primary:hover,
.wizard > .actions .disabled a:hover,
.btn-outline-primary:focus,
.wizard > .actions .disabled a:focus,
.btn-outline-primary:active,
.wizard > .actions .disabled a:active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.btn-inverse-primary {
  background-color: rgba(99, 102, 241, 0.15);
  border-color: transparent;
  color: #6366f1;
}

.btn-inverse-primary:hover {
  background-color: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

/* ==========================================================================
   Sidebar icons
   All icons: neutral / muted by default
   Active route only: sky-blue accent — pops on dark sidebar background
   ========================================================================== */

/* All icon pills — subtle neutral on dark bg */
.sidebar .nav .nav-item .nav-link .icon-bg {
  background: rgba(255, 255, 255, 0.06);
}

/* All menu icons — muted grey */
.sidebar .nav .nav-item .nav-link .icon-bg .menu-icon {
  color: #8e94a9;
}

/* Active item: left-edge indicator */
.sidebar .nav .nav-item.active > .nav-link:before {
  background: #38bdf8;
}

/* Active item: menu title */
.sidebar .nav .nav-item.active > .nav-link .menu-title {
  color: #38bdf8;
}

/* Active item: generic icon colour (arrow, etc.) */
.sidebar .nav .nav-item.active > .nav-link i {
  color: #38bdf8;
}

/* Active item: icon-bg pill accent */
.sidebar .nav .nav-item.active > .nav-link .icon-bg {
  background: rgba(56, 189, 248, 0.15);
}

/* Active item: menu-icon inside icon-bg */
.sidebar .nav .nav-item.active > .nav-link .icon-bg .menu-icon {
  color: #38bdf8;
}

/* Hover row */
.sidebar .nav .nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Sidebar-user-actions profile/logout active link */
.sidebar .nav .nav-item.sidebar-user-actions.active .sidebar-user-menu .nav-link,
.sidebar .nav .nav-item.sidebar-user-actions.active .sidebar-user-menu .nav-link i {
  color: #38bdf8;
}

/* ==========================================================================
   Navbar dropdown header
   ========================================================================== */
.navbar .p-3.text-center.bg-primary {
  background-color: #6366f1 !important;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge-success,
.preview-list .preview-item .preview-thumbnail .badge.badge-online {
  border: 1px solid #10b981;
  background: #10b981;
  color: #fff;
}

.badge-info,
.preview-list .preview-item .preview-thumbnail .badge.badge-offline {
  border: 1px solid #0ea5e9;
  background: #0ea5e9;
  color: #fff;
}

/* ==========================================================================
   Form controls — smaller padding, rounded, refined focus ring
   ========================================================================== */
.form-control,
.typeahead,
.tt-query,
.tt-hint,
.select2-container--default .select2-selection--single .select2-search__field,
.select2-container--default .select2-selection--single,
.jsgrid .jsgrid-table .jsgrid-filter-row input[type=number],
.jsgrid .jsgrid-table .jsgrid-filter-row input[type=text],
.jsgrid .jsgrid-table .jsgrid-filter-row select,
.dataTables_wrapper select,
.asColorPicker-input {
  padding: 0.42rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #000000;
}

/* Selects: prevent browser from inflating height */
select.form-control {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  height: auto !important;
}

textarea.form-control,
textarea.typeahead {
  padding: 0.42rem 0.75rem;
  line-height: 1.6;
}

/* File input */
.form-control::file-selector-button {
  padding: 0.42rem 0.75rem;
  margin: -0.42rem -0.75rem;
  margin-inline-end: 0.75rem;
}

input[type="file"].form-control {
  padding: 0.35rem 0.75rem;
}

/* Focus ring — indigo */
.form-control:focus,
.typeahead:focus,
.tt-query:focus,
.tt-hint:focus {
  color: #000000;
  border-color: #6366f1;
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.2);
}

/* Placeholder colour */
.form-control::placeholder,
.typeahead::placeholder,
.tt-query::placeholder,
.tt-hint::placeholder {
  color: #b0b7c3;
  opacity: 1;
}

/* Tighter form-group spacing */
.form-group {
  margin-bottom: 0.9rem;
}

/* ==========================================================================
   Tables — tighter cells, centered action column
   ========================================================================== */
.table > :not(caption) > * > *,
.jsgrid .jsgrid-table > :not(caption) > * > * {
  padding: 0.4rem 0.65rem;
}

.table th,
.jsgrid .jsgrid-table th,
.table td,
.jsgrid .jsgrid-table td {
  font-size: 0.8rem;
  line-height: 1.4;
}

.table thead th,
.jsgrid .jsgrid-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
}

/* Center the last header column (Actions) */
.table thead tr th:last-child {
  text-align: center;
}

/* Center action button groups inside any table cell */
.table td > .d-flex.gap-2 {
  justify-content: center;
}

/* Discontinue toggle: centering is handled via Bootstrap utilities (d-flex justify-content-center)
   on the form/div wrapper directly in the view, so no extra rule is needed here. */

/* ==========================================================================
   Misc
   ========================================================================== */
.input-group-text {
  border-radius: 6px;
  font-size: 0.8125rem;
}

.card-description {
  color: #8e94a9;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Navbar — hamburger alignment & search bar width
   ========================================================================== */

/* Desktop only: align the hamburger with the sidebar boundary.
   Must be guarded so we don't override the theme's display:none on mobile. */
@media (min-width: 992px) {
  .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
    padding: 0 1rem;
    font-size: 1.25rem;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    color: #6c757d;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

/* Push the profile/actions group to the right on ALL screen sizes.
   Theme only sets margin-left:auto at ≥992px; without this, the profile
   sits flush-left on mobile once the hidden search field disappears. */
.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
  margin-left: auto;
}

/* Constrain the search field so it doesn't expand into the profile area */
.navbar .navbar-menu-wrapper .search-field {
  max-width: 260px;
  width: 260px;
}

.navbar .navbar-menu-wrapper .search-field .input-group {
  width: 100%;
}

/* ==========================================================================
   Sidebar closed — desktop only
   Triggered by body.sidebar-closed via the JS toggle in footer.blade.php
   ========================================================================== */
@media (min-width: 992px) {
  .sidebar,
  .main-panel {
    transition: width 0.25s ease, min-width 0.25s ease;
  }

  body.sidebar-closed .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  body.sidebar-closed .main-panel {
    width: 100% !important;
  }
}

/* ==========================================================================
   Page header — stack title above breadcrumb, left-aligned
   ========================================================================== */
.page-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem;
  margin-bottom: 1.5rem;
}

.page-header .page-title {
  margin-bottom: 0.1rem;
}

.page-header nav[aria-label="breadcrumb"] .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.775rem;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
  color: #c0c6d4;
}

.page-header .breadcrumb-item a {
  color: #6366f1;
  text-decoration: none;
}

.page-header .breadcrumb-item a:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.page-header .breadcrumb-item.active {
  color: #8e94a9;
}

.page-header .breadcrumb-item .mdi {
  font-size: 0.85rem;
  vertical-align: -1px;
}