/* Icon button (e.g. "+ Create") shared by backend and frontend. */
.btn.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.btn.btn-success.btn-icon {
  background: #0A7E78;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(10, 126, 120, 0.2);
}

.btn.btn-success.btn-icon:hover {
  background: #096f6a;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(10, 126, 120, 0.25);
  transform: translateY(-1px);
}

.btn.btn-success.btn-icon:active {
  background: #085f5a;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(10, 126, 120, 0.2);
  transform: translateY(0);
}

.btn.btn-success.btn-icon:focus-visible {
  outline: 3px solid rgba(10, 126, 120, 0.25);
  outline-offset: 2px;
}

.btn.btn-icon.btn-sm {
  min-height: 34px;
  padding: 6px 14px;
  gap: 8px;
  font-size: 0.875rem;
}

.btn.btn-danger.btn-icon {
  background: #D92D20;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(217, 45, 32, 0.2);
}

.btn.btn-danger.btn-icon:hover {
  background: #b42318;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(217, 45, 32, 0.25);
  transform: translateY(-1px);
}

.btn.btn-danger.btn-icon:active {
  background: #912018;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(217, 45, 32, 0.2);
  transform: translateY(0);
}

.btn.btn-danger.btn-icon:focus-visible {
  outline: 3px solid rgba(217, 45, 32, 0.25);
  outline-offset: 2px;
}

.btn.btn-icon:disabled,
.btn.btn-icon:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Toolbar row above a GridView (e.g. "Nuevo X" + "Eliminar seleccionados"). */
.item-index__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
}

/* The theme gives the GridView's "Showing X-Y of Z items." summary its own
   top margin, which — stacked on top of item-index__toolbar's own
   margin-bottom above — left a bigger gap under the button row than any
   other section on the page. Kill it here so the two margins don't add up. */
.item-index .summary {
  margin-top: 0;
}

.btn.btn-secondary.btn-icon {
  background: #667085;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(102, 112, 133, 0.2);
}

.btn.btn-secondary.btn-icon:hover {
  background: #475467;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(102, 112, 133, 0.25);
  transform: translateY(-1px);
}

.btn.btn-secondary.btn-icon:active {
  background: #344054;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(102, 112, 133, 0.2);
  transform: translateY(0);
}

.btn.btn-secondary.btn-icon:focus-visible {
  outline: 3px solid rgba(102, 112, 133, 0.25);
  outline-offset: 2px;
}

.btn-icon__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #ffffff;
  color: #0A7E78;
  border-radius: 50%;
  flex-shrink: 0;
}

.btn-icon__badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* On a danger button (e.g. "Cerrar Caja") the badge icon should read as red,
   not the default teal — same white circle, tinted to match. */
.btn.btn-danger.btn-icon .btn-icon__badge {
  color: #D92D20;
}

.btn-icon.btn-sm .btn-icon__badge {
  width: 18px;
  height: 18px;
}

.btn-icon.btn-sm .btn-icon__badge svg {
  width: 11px;
  height: 11px;
}

/* Outline "Back" button, e.g. "← Volver". */
.btn.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: #ffffff;
  color: #667085;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.btn.btn-back:hover {
  background: #475467;
  border-color: #475467;
  color: #ffffff;
}

.btn.btn-back:active {
  background: #344054;
  border-color: #344054;
  color: #ffffff;
}

.btn.btn-back:focus-visible {
  outline: 3px solid rgba(102, 112, 133, 0.25);
  outline-offset: 2px;
}

.btn.btn-back svg {
  width: 14px;
  height: 14px;
}

/* Same shape/size as .btn-back, but keeps whichever color the button already
   has (.btn-success, .btn-danger, .btn-primary...) instead of setting one.
   Used on the other action buttons next to "Volver" (Guardar, Actualizar,
   Eliminar, Activar/Desactivar) so the whole row looks consistent. */
.btn.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

/* GridView tables (index.php listings, i.e. tables that have a <thead>):
   soft green header, no cell border lines, subtle green row hover. Body rows
   keep Bootstrap's default gray striping (table-striped) — not overridden
   here. Scoped to :has(thead) so it doesn't touch DetailView tables
   (view.php), which have no header row and keep their own grid lines. */
.table-responsive table:has(thead) th,
.table-responsive table:has(thead) td {
  border: none !important;
}

.table-responsive table thead th {
  background-color: rgba(10, 126, 120, 0.08) !important;
  border-bottom: 1px solid rgba(10, 126, 120, 0.15) !important;
}

.table-responsive table:has(thead) tbody tr:hover > * {
  background-color: rgba(10, 126, 120, 0.08) !important;
}

/* Narrow, centered "Cantidad"/"Stock" column on item-line GridViews (sale
   items, refund/exchange lines, stock movements) and the matching editable
   quantity <input> on the create forms — a short number doesn't need as
   much horizontal room as the surrounding text columns. !important because
   on the <input> case it's fighting Bootstrap's own `.form-control { width:
   100% }`, loaded after this shared stylesheet. */
.col-quantity {
  width: 90px !important;
}

input.col-quantity {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Large avatar for the account profile page (Mazer only ships up to avatar-xl,
   60px). */
.avatar.avatar-2xl .avatar-content,
.avatar.avatar-2xl img {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

/* app.css's `.avatar .avatar-content` has no border-radius of its own — it
   only looked round before because `.avatar` (the parent) is round and
   exactly the same size, but that only holds for the initials-badge case;
   with a photo <img> it needs the same explicit radius. Also fixes the
   `.user-menu` vertical misalignment between the name and the avatar
   (compiled theme leaves align-items at its flex default). */
.user-menu {
  align-items: center;
}

.avatar .avatar-content,
.avatar img {
  border-radius: 50%;
  object-fit: cover;
}

/* Small light-green icon circle next to a field label (e.g. profile page
   Name/Email/Role rows). */
.field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 126, 120, 0.12);
  color: #0A7E78;
  flex-shrink: 0;
}

.field-icon i {
  font-size: 1rem;
  line-height: 1;
}

/* Profile page field row: icon + label + value, centered in the card so a
   short list of fields doesn't look sparse against the rest of the card. */
.field-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Wraps a group of .field-row so they all line up on the same left edge
   (icons/labels aligned), while the group as a whole is centered in the
   card instead of hugging its left side. */
.field-list {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.field-row__content {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
}

/* Action buttons below the profile field list, centered the same way as
   .field-list so they sit under the text instead of hugging the card edge. */
.field-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Select2 (Krajee BS5 theme) hardcodes Bootstrap blue for the highlighted
   dropdown option instead of using a CSS variable — override it here. */
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
  background-color: #0A7E78 !important;
  color: #ffffff !important;
}

/* Period toggle group on report filters (Hoy/Esta Semana/Este Mes) —
   `.btn-outline-primary.active`/`:hover`/`:focus` otherwise render
   Bootstrap's leftover blue instead of the app's teal brand color. */
.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-primary:hover,
.btn-group .btn-outline-primary:focus {
  background-color: #0A7E78 !important;
  border-color: #0A7E78 !important;
  color: #ffffff !important;
}

/* Bootstrap tabs (e.g. the Detalles/Administradores/Sucursales tabs on the
   business view) use --bs-link-color for their resting color, which the
   theme sets to the teal brand color — but --bs-link-hover-color is a
   leftover Bootstrap indigo (#364b98) nobody re-themed, so hovering/
   focusing an inactive tab flips it purple instead of staying teal. */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #0A7E78;
}

/* Bootstrap accordion (e.g. the "Filtros avanzados" panel above an index
   table) defaults to the theme's leftover indigo (#3c55ab) for its expanded
   state and focus ring — re-theme it to the app's teal brand color via the
   same Bootstrap variables the compiled theme itself sets on `.accordion`,
   so the expand/collapse chevron icon (baked into --bs-accordion-btn-active-
   icon as an inline SVG fill) recolors along with the text/background. */
.accordion {
  --bs-accordion-active-color: #0A7E78;
  --bs-accordion-active-bg: rgba(10, 126, 120, 0.08);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A7E78'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: rgba(10, 126, 120, 0.5);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(10, 126, 120, 0.25);
}

/* A bootstrap-icons glyph (e.g. bi-funnel here) sits high inside its own
   line box relative to normal text — same fix as .item-index__header-title
   .bi: collapse the icon's box to its glyph height so flex centering
   (.accordion-button is itself display:flex; align-items:center) lines it
   up with the button label instead of floating above it. */
.accordion-button .bi {
  display: inline-flex;
  line-height: 1;
}