/* Minimal admin dashboard styles */
.admin-layout { padding-top: 1rem; }
/* Ensure admin layout expands to fill available vertical space so the
  footer is pushed to the bottom on short pages. The top-level body is a
  flex column; making this container flexible guarantees the footer stays
  at the bottom of the viewport. */
.admin-layout { flex: 1 0 auto; }
.sidebar { min-height: 100vh; border-right: 1px solid #e6e6e6; }
.sidebar .nav-link { color: #333; }
.sidebar .nav-link.active { font-weight: 600; }
.admin-header .navbar-brand img { height: 28px; }
/* Brand / logo sizes (used via classes in markup) */
.brand-mark { height: 40px; }
.brand-mark-md { height: 56px; }
.brand-mark-lg { height: 72px; }
@media (max-width: 768px) {
  .sidebar { display: none; }
}

/* Ensure admin sidebar / offcanvas sit above other page content (e.g. homepage slider)
   Use high z-index and sticky positioning for the desktop sidebar. Offcanvas already
   uses its own stacking but we raise it to be safe. */
#adminSidebar, .offcanvas, #adminSidebar.offcanvas { z-index: 2200 !important; }
/* Make desktop sidebar fixed so it starts at the very top and overlays the header/slider.
  Set an extremely high z-index so the sidebar sits above navbar, offcanvas and any backdrops.
  Use !important to reliably override other stacking rules. */
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 240px; z-index: 400000 !important; background: #f8f9fa; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }


/* Keep navbar in normal flow so it doesn't overlay or get hidden unexpectedly.
   The sidebar remains fixed and will overlay the navbar when necessary. */
.admin-header .navbar,
.site-header .navbar {
  position: relative;
  z-index: 2200;
}

/* Ensure main content has a small top margin so it doesn't butt up against the navbar */
.admin-layout main { margin-top: 1rem; }

/* Responsive layout: make sure main content accounts for the fixed sidebar
   at different breakpoints and avoid content being hidden behind the sidebar.
   We keep the original desktop width (240px) but reduce it slightly for
   medium screens so the layout doesn't overflow. On small screens the
   sidebar is hidden and offcanvas is used instead. */
@media (min-width: 1200px) {
  .sidebar { width: 240px; }
  .admin-layout main { margin-left: 240px; width: calc(100% - 240px); }
  .admin-footer { margin-left: 240px; width: calc(100% - 240px); }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Slightly narrower sidebar on medium viewports to avoid overlap */
  .sidebar { width: 220px; z-index: 3000 !important; }
  .admin-layout main { margin-left: 220px; width: calc(100% - 220px); }
  .admin-footer { margin-left: 220px; width: calc(100% - 220px); }
}

@media (max-width: 767.98px) {
  /* Mobile: hide the desktop sidebar (we rely on offcanvas for navigation) */
  .sidebar { display: none !important; position: static; width: auto; }
  .admin-layout main { margin-left: 0; width: 100%; }
  .admin-footer { margin-left: 0; width: 100%; }
}

/* Offcanvas stacking: keep existing behaviour but ensure it's above other UI
   when opened. */
.offcanvas.offcanvas-start.show { z-index: 2400; }

/* Tables & pagination: make pagers responsive and avoid being clipped or
   visually pushed outside the table when width gets small. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive .pagination,
.table .pagination,
.table + .pagination {
  position: relative; /* avoid absolute positioning issues */
  z-index: 1;
  display: flex;
  flex-wrap: wrap; /* allow buttons to wrap to next line on narrow screens */
  justify-content: flex-end;
}
.table .table-footer, .table + .pagination { clear: both; }
.pagination .page-item { flex: 0 0 auto; }

/* Hide the injected table pager/info for the 'Últimos clientes' card on the dashboard.
   The pager is injected by assets/table-pager.js after the .table-responsive wrapper.
   We add a specific class to the dashboard table wrapper (`.dashboard-table-card`) and
   hide any pager/pagination that would be inserted for that wrapper only. */
.dashboard-table-card + .table-pager,
.dashboard-table-card .table-pager,
.dashboard-table-card + .pagination,
.dashboard-table-card .pagination {
  display: none !important;
}

/* Make rows using this helper have tighter gutters and smaller card spacing
   so adjacent dashboard cards (e.g. table + donut) sit closer together. */


/* Prevent cards and lists from visually overlapping when space is tight */
.card { margin-bottom: 1rem; }

/* Light mode: make card boundaries clearer with a subtle border and shadow
   so cards are readable on bright backgrounds. Dark mode overrides live
   later in the file and will keep the darker style. */
:not(body.dark-mode) .card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12); /* stronger border for contrast */
  box-shadow: 0 14px 40px rgba(2,6,23,0.14), 0 4px 10px rgba(2,6,23,0.06);
  border-radius: 0.5rem; /* match existing rounded look */
}

/* More pronounced shadow on hover for clearer depth */
:not(body.dark-mode) .card:hover {
  box-shadow: 0 24px 64px rgba(2,6,23,0.18), 0 6px 18px rgba(2,6,23,0.08);
}

/* Reduce bottom spacing specifically for the clients chart card so it sits
  closer to the cards below (keeps global .card spacing unchanged). Use a
  small gap on desktop so elements are noticeably separate but tighter. */
/* Match the vertical gap to the horizontal gutter between columns so the
   spacing is visually consistent. Bootstrap exposes the gutter as
   --bs-gutter-x on rows; fall back to 1.5rem if the variable isn't present. */
.clients-chart-card { margin-bottom: 0.17px; position: relative; z-index: 2; transform: translateY(8px); transition: transform .18s ease; }
.clients-chart-card .card-body { padding-bottom: 0.375rem; }

/* Keep a bit more spacing on small screens to avoid cramped stacking */
@media (max-width: 767.98px) {
  .clients-chart-card { margin-bottom: 0.5rem; transform: translateY(4px); }
}

/* Small safety: ensure containers avoid negative margins that could push
   content underneath the sidebar. This helps robustness across legacy pages. */
.admin-layout main, .admin-layout main .container { box-sizing: border-box; }

/* small avatar used in header buttons (slightly increased for profile photo) */
.avatar-sm { width: 48px; height: 48px; object-fit: cover; }

/* Sidebar-specific larger brand (lateral panel) */
.sidebar .sidebar-brand img { height: 120px; }

/* isp-planes: force search + controls on one line on desktop
   - .isp-planes-controls is applied to the form wrapping search, limit and export buttons
   - keep wrapped / stacked layout on small screens for accessibility */
.isp-planes-controls {
  flex-wrap: nowrap !important;
  width: 100%;
}
.isp-planes-controls .input-group {
  flex: 1 1 520px; /* let search grow, but keep reasonable max */
  min-width: 220px;
}
.isp-planes-controls .ms-auto.d-flex {
  margin-left: 0; /* ms-auto used to push to the right - keep it but avoid wrapping children */
  display: flex !important;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}
.isp-planes-controls .form-label { margin-right: .4rem; margin-bottom: 0; }

@media (max-width: 767.98px) {
  /* On very small viewports keep the search box flexible but keep the
     action buttons (export / nuevo plan) on the same row and vertically
     aligned. We allow the input to shrink (min-width:0) and keep the
     controls group and sibling button as inline-flex so they remain
     visually consistent and don't wrap in awkward ways. */
  .isp-planes-controls { /* allow children to wrap if absolutely needed, but prefer a single line */
    flex-wrap: nowrap !important;
    align-items: center;
    gap: .25rem; /* smaller gap to save horizontal space */
  }
  .isp-planes-controls .input-group { flex: 1 1 auto; min-width: 0; }
  /* The right-side control group (exports/limits) should keep its items on one line */
  .isp-planes-controls .ms-auto.d-flex {
    width: auto;
    justify-content: flex-start;
    margin-top: 0;
    display: flex !important;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
  }
  /* Make the search input slightly narrower on small screens so the export/select/add
     buttons fit on the same row. Adjust the percentage if you want it tighter/looser. */
  .isp-planes-controls .input-group {
    max-width: 52% !important; /* reduce to give more room for buttons/select */
  }
  /* Hide the textual label "Mostrar" for the rows-per-page select on very small screens
     to save horizontal space; the select itself remains accessible. */
  .isp-planes-controls .form-label { display: none !important; }
  /* Compact the rows-per-page select so it visually matches the size of the
    green "Nuevo plan" button. Keep it wide enough for accessibility but
    small enough to avoid pushing other controls. */
  .isp-planes-controls .form-select {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 56px !important;
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
    font-size: .95rem;
  }

  /* Remove the native dropdown arrow/caret on mobile for a cleaner compact look.
     Use appearance:none and clear any background-image. Keep accessibility intact
     (the select still works and is keyboard-navigable). */
  .isp-planes-controls .form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    /* leave a small right padding so the value doesn't touch the edge */
    padding-right: .45rem !important;
  }
}

/* Space between the controls group and the 'Nuevo plan' button on desktop; stacked on mobile */
.isp-planes-controls + a.btn {
  margin-left: .5rem;
}
@media (max-width: 767.98px) {
  /* Keep the sibling action button (e.g. "Nuevo plan" / green +) aligned with the
     controls on small screens instead of stacking below. Make it an inline-flex
     and vertically center its icon so it lines up with the input group. */
  .isp-planes-controls + a.btn {
    margin-left: .4rem;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: .2rem;
  }
  /* Slight tweak for the compact success button variant to ensure it doesn't
     grow or wrap and keeps a consistent icon centering. */
  .isp-planes-controls + a.btn.btn-success {
    padding-top: .28rem;
    padding-bottom: .28rem;
    padding-left: .4rem;
    padding-right: .4rem;
    line-height: 1;
  }

  /* Tweak small control buttons inside the right-side group to be compact */
  .isp-planes-controls .ms-auto.d-flex .btn {
    padding: .28rem .38rem;
  }
}

/* New plan button (compact variant used on isp-planes) */
/* btn-new-plan removed: use standard button classes so styles are consistent across UI */

/* larger avatar used inside the user offcanvas/profile */
.avatar-circle.avatar-lg img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }

/* Fixed desktop user-controls so avatar + logout remain visible while scrolling */
.admin-user-fixed {
  position: fixed;
  top: 8px;
  right: 16px;
  z-index: 299998; /* below offcanvas (300000) so menu can overlay when opened */
  gap: 8px;
}

/* Offcanvas backdrop and stacking fixes: ensure backdrop is below the offcanvas content
   and doesn't prevent interacting with the offcanvas menu. Increase specificity
   to override Bootstrap defaults set inline by JS. */
.offcanvas-backdrop.show { z-index: 2350 !important; }
.offcanvas.offcanvas-start.show { z-index: 2400 !important; pointer-events: auto; }

/* Style the mobile hamburger to match dashboard colors (light background / subtle border)
   Visible only on small screens (we already use d-md-none on the button). */
.btn-admin-toggle {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  color: #212529;
  padding: 0.35rem 0.5rem;
}
.btn-admin-toggle:focus { box-shadow: none; }

/* Mobile: keep the brand image moved next to the hamburger and hide the
   textual label to avoid white text overlapping the profile area. This
   positions the logo to the right of the hamburger without changing
   desktop layout. */
@media (max-width: 767.98px) {
  .btn-admin-toggle {
    position: fixed;
    left: 8px;
    top: 8px;
    z-index: 400001;
    width: 40px;
    height: 40px;
  }

  .admin-header .navbar-brand {
    position: fixed;
    left: 56px; /* sits just right of the hamburger */
    top: 8px;
    z-index: 400000;
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    pointer-events: auto;
  }

  /* hide the textual label on mobile so it doesn't overlay the profile */
  .admin-header .navbar-brand .fw-semibold { display: none !important; }

  .admin-header .navbar-brand img,
  .brand-mark {
    height: 28px;
    max-height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }

  /* ensure the profile area (right-side) stays clear of the fixed brand */
  .admin-header .d-flex.align-items-center.ms-auto.d-md-none { margin-right: 8px; }
}

/* Show the hamburger toggle on desktop as well. The markup may include
   d-md-none from Bootstrap which hides it at >=768px; override that here
   so the control is available on larger viewports. Position it fixed so
   it remains accessible and doesn't push page content. */
@media (min-width: 768px) {
  .btn-admin-toggle {
    display: inline-block !important; /* override .d-md-none */
    position: fixed;
    left: 12px; /* sits near the left edge so it's clearly associated with the sidebar */
    top: 12px;
    z-index: 400001; /* above the sidebar so it can toggle it */
    background: transparent;
  }
  /* ensure it looks good in dark mode */
  /* Dark-mode visual for the admin toggle is handled in assets/dark-mode.css.
    Keep a single source of truth for theme overrides to avoid duplication. */

  /* When the admin header is the dark navbar, ensure the fixed toggle
     remains visible: give it a light color and subtle light border so
     it contrasts against the dark background. Use !important so this
     wins over other button rules and when position is fixed (out of
     the navbar context) it still looks correct. */
  .admin-header .btn-admin-toggle {
    color: #fff !important;
    border-color: rgba(255,255,255,0.12) !important;
    background: transparent !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop collapse behaviour: when `body.sidebar-collapsed` is present the
   fixed sidebar is visually hidden and the main content expands to full
   width. The mobile/offcanvas behaviour is unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* add smooth transitions */
  .sidebar { transition: transform .22s ease, box-shadow .22s ease; }
  .admin-layout main { transition: margin-left .22s ease, width .22s ease; }
  .admin-footer { transition: margin-left .22s ease, width .22s ease; }

  /* Collapsed state: push the sidebar off-screen and let the main area fill */
  body.sidebar-collapsed .sidebar {
    transform: translateX(-240px) !important; /* hide visually */
    box-shadow: none !important;
  }
  body.sidebar-collapsed .admin-layout main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body.sidebar-collapsed .admin-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Adjust the toggle button position so it stays visible near the left edge
     of the viewport when the sidebar is hidden. */
  body.sidebar-collapsed .btn-admin-toggle {
    left: 12px !important;
  }

  /* Medium screens use a slightly narrower sidebar; when collapsed translate accordingly */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    body.sidebar-collapsed .sidebar { transform: translateX(-220px) !important; }
  }
}

/* Thin footer shown for logged-in users */
.admin-footer {
  background: #212529; /* use Bootstrap dark to match dashboard */
  color: #e9ecef;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 0.95rem;
  /* Footer flows with the page (not fixed) */
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}
.admin-footer small { opacity: 0.95; }
.admin-footer a { color: #e9ecef; text-decoration: none; }
.admin-footer a:hover { text-decoration: underline; }

/* Align footer with dashboard content area when desktop sidebar is present */
@media (min-width: 768px) {
  .admin-footer { margin-left: 240px; width: calc(100% - 240px); }
}
@media (max-width: 767.98px) {
  .admin-footer { margin-left: 0; width: 100%; }
}

/* Make admin footer match the left sidebar color and adjust text for contrast */
.admin-footer {
  background: #f8f9fa; /* same as .sidebar */
  color: #212529; /* dark text for contrast */
  border-top: 1px solid rgba(0,0,0,0.06);
}
.admin-footer small { color: #212529; opacity: 0.9; }
.admin-footer a { color: #212529; }

/* Make footers stick to the bottom when the page content is short. Using
   margin-top:auto on footer elements that are direct children of body
   works reliably with the body's flex column layout. */
body > footer.site-footer,
body > footer.admin-footer {
  margin-top: auto !important;
}

/* Strongly enforce stacking for the admin/user offcanvas so no other
   legacy overlay (modals, feature floats, PQR overlays) can sit above it.
   We use ID selectors (higher specificity) and very large z-index values
   so these rules reliably win over any existing global rules. */
#adminSidebar.offcanvas, #userOffcanvas.offcanvas {
  z-index: 300000 !important;
  position: fixed; /* ensure predictable stacking context */
  top: 0; left: 0;
}

/* Backdrop must remain below the offcanvas but above page content so
   it captures clicks to dismiss the menu. Use a slightly smaller z-index. */
#adminSidebar.offcanvas + .offcanvas-backdrop,
#userOffcanvas.offcanvas + .offcanvas-backdrop,
.offcanvas-backdrop.show {
  z-index: 299999 !important;
  /* ensure backdrop is visible but doesn't block the offcanvas itself */
  pointer-events: auto;
  background-color: rgba(0,0,0,0.45);
}

/* Make sure the offcanvas content itself can receive pointer events */
.offcanvas { pointer-events: auto !important; }

/* Dark-mode rules were consolidated into assets/dark-mode.css
  to centralize theme visuals and avoid duplicated/conflicting
  body.dark-mode / html.dark-mode blocks spread across the repo.

  If you need to reintroduce a specific rule from the old scoped
  dashboard snippet, please add it to assets/dark-mode.css or ask
  me to reapply it in a controlled way.
*/