/*
 * Common admin UI theme for the Reptile Management System.
 *
 * This file sits on top of the vendor Sneat theme (core.css, theme-default.css,
 * demo.css) — loaded after them in admin.layouts.master — and establishes the
 * shared look every module's pages inherit automatically just by using the
 * existing Bootstrap markup (`.table`, `.badge`, `.card`, `.btn-primary`, the
 * sidebar `<ul class="menu-inner">`, DataTables' own wrapper markup, ...).
 *
 * It does NOT replace the vendor theme and does NOT add a new CSS framework —
 * it only overrides a handful of vendor rules (see "Brand color" below, which
 * fixes a few leftover purple traces the theme's own `theme-default.css` did
 * not finish converting to this project's green) and adds new, additive
 * utility classes (`.status-badge`, `.action-menu`, ...) for anything the
 * vendor theme doesn't already provide.
 */

/* ==================================================================
   Brand color
   ==================================================================
   theme-default.css already recolors most primary-colored elements to this
   project's green (#01a453) but leaves a few hover/active/focus states and
   the CSS custom properties themselves on the original Sneat purple
   (#696cff). This section is the single source of truth for the accent
   color and finishes that recolor for the highest-visibility elements
   (buttons, sidebar active state) without touching the vendor files.
   ================================================================== */

:root {
  --bs-primary: #01a453;
  --bs-primary-rgb: 1, 164, 83;

  /* Local aliases used only in this file, so every rule below shares one
     definition of the palette instead of repeating hex codes. */
  --admin-accent: #01a453;
  --admin-accent-rgb: 1, 164, 83;
  --admin-accent-hover: #018f48;
  --admin-accent-active: #017d3f;
}

.btn-primary {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
  box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--admin-accent-rgb), 0.4);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--admin-accent-hover);
  border-color: var(--admin-accent-hover);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--admin-accent-active);
  border-color: var(--admin-accent-active);
}

.btn-outline-primary {
  color: var(--admin-accent);
  border-color: var(--admin-accent);
}

.btn-outline-primary:hover,
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--admin-accent-active);
  border-color: var(--admin-accent-active);
}

/* Sidebar active menu item — theme-default.css already colors the text/dot/
   icon green; only the rounded background tint itself is still purple. */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background-color: rgba(var(--admin-accent-rgb), 0.16) !important;
}

/* ==================================================================
   Sidebar polish
   ==================================================================
   Spacing/readability touches on top of the vendor sidebar — the vendor
   theme already provides the white background, bullets, chevrons and
   active-state colors; this only tightens spacing to match the reference
   design's "clean, minimal" feel.
   ================================================================== */

.menu-inner > .menu-item {
  margin-bottom: 0.125rem;
}

.menu-inner > .menu-header {
  margin-top: 0.5rem;
}

/* ==================================================================
   Status badges
   ==================================================================
   `.status-badge` is the reusable base class for any NEW status label a
   module wants to render directly (see components/admin/status-badge.blade.php).
   The modifier classes below double as a semantic naming layer over the
   vendor `bg-label-*` soft-badge colors, so a module can use either
   `<span class="badge status-badge status-active">` or reuse an existing
   `bg-label-success` badge — both now render as the same pill.

   The plain `.badge.bg-label-*` rule further down re-styles every EXISTING
   badge across the app (Species/Reptiles/Feeding/Shedding/Medical status,
   trend and alert badges) to the same pill/uppercase look automatically,
   with no Blade changes required in those modules.
   ================================================================== */

.status-badge,
.badge.bg-label-primary,
.badge.bg-label-secondary,
.badge.bg-label-success,
.badge.bg-label-danger,
.badge.bg-label-warning,
.badge.bg-label-info,
.badge.bg-label-dark {
  padding: 0.35em 0.75em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 50rem;
}

.status-badge.status-active,
.status-badge.status-success,
.status-badge.status-completed,
.status-badge.status-gain {
  color: #01a453;
  background-color: rgba(1, 164, 83, 0.16);
}

.status-badge.status-inactive {
  color: #697a8d;
  background-color: rgba(105, 108, 255, 0.08);
}

.status-badge.status-pending,
.status-badge.status-info {
  color: #03c3ec;
  background-color: rgba(3, 195, 236, 0.16);
}

.status-badge.status-warning,
.status-badge.status-partial,
.status-badge.status-no-gain {
  color: #ffab00;
  background-color: rgba(255, 171, 0, 0.16);
}

.status-badge.status-danger,
.status-badge.status-incomplete,
.status-badge.status-problematic,
.status-badge.status-loss {
  color: #ff3e1d;
  background-color: rgba(255, 62, 29, 0.16);
}

/* ==================================================================
   Tables / DataTables
   ==================================================================
   Applies to every plain Bootstrap `.table` (the manually-paginated index
   pages) AND every Yajra/DataTables-rendered table (they render the same
   `.table` markup inside `.dataTables_wrapper`) — one set of rules covers
   both without any per-module change.
   ================================================================== */

.table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #697a8d;
  border-bottom-width: 1px;
  white-space: nowrap;
}

.table td,
.table th {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

.card > .table-responsive > .table,
.card > .card-body > .table-responsive > .table {
  margin-bottom: 0;
}

/* DataTables' own top/bottom controls (length, search, info, pagination) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 0.5rem 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: 0.375rem;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}

.dataTables_wrapper .dataTables_paginate .page-link {
  color: #566a7f;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  color: #fff;
}

/* Plain Laravel paginator links (non-DataTables index pages) share the same
   `.page-item`/`.page-link` markup — same accent color for both. */
.pagination .page-item.active .page-link {
  background-color: var(--admin-accent);
  border-color: var(--admin-accent);
}

/* ==================================================================
   Action menu (three-dot row actions)
   ==================================================================
   See components/admin/action-menu.blade.php. A compact icon-only toggle
   that opens a standard Bootstrap 5 dropdown — no new JS, `bootstrap.js`
   (already loaded in every admin page) drives `data-bs-toggle="dropdown"`.
   ================================================================== */

.action-menu-toggle {
  color: #697a8d;
}

.action-menu-toggle::after {
  display: none; /* hide the default Bootstrap caret — this is an icon-only toggle */
}

.action-menu .dropdown-menu {
  min-width: 10rem;
  padding: 0.5rem;
}

.action-menu .dropdown-item {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}

.action-menu .dropdown-item i {
  margin-right: 0.5rem;
  width: 1rem;
  text-align: center;
}

.action-menu form {
  margin: 0;
}

.action-menu form .dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
}

/* ==================================================================
   Cards
   ==================================================================
   The vendor theme's `.card` already provides the white background,
   rounded corners and shadow used throughout the reference design — these
   are only the small additions the reference screenshots call for.
   ================================================================== */

.card-header .card-title {
  font-weight: 600;
}

/* ==================================================================
   Forms
   ==================================================================
   Keeps focus rings/required-field markers on the project's accent color,
   consistent with buttons/badges/sidebar above.
   ================================================================== */

.form-control:focus,
.form-select:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--admin-accent-rgb), 0.2);
}

.form-label .required,
.required-indicator {
  color: #ff3e1d;
  margin-left: 0.125rem;
}

/* ==================================================================
   Responsive
   ==================================================================
   The vendor theme already collapses the sidebar into an off-canvas menu
   below the `xl` breakpoint (see layout-menu-toggle in header.blade.php);
   this only keeps DataTables' own controls from overflowing on narrow
   viewports, and mirrors it for the plain Laravel-paginator index pages.
   ================================================================== */

@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    width: 100%;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0.25rem;
  }
}