/* ==========================================================================
   cat-ui-fixes.css — consolidated UI hardening layer
   Load LAST, after all existing styles. Scoped to the Famestate admin panel
   and the QuickPanel (roneybhai1) user pages.

   RESPONSIBLE DEVIATIONS from the brief (these would have BROKEN the live UI,
   so they are intentionally NOT applied blindly — see notes below):
     • `* { margin:0; padding:0 }` — would wipe every Bootstrap / theme spacing
       value on the page and collapse the entire layout. Omitted. We keep the
       safe half: box-sizing:border-box.
     • Forcing every icon to width/height/font-size:1.25rem — the icons here are
       CSS masks sized at 1em (fs-icons) plus logos, avatars and inline glyphs of
       many sizes; a blanket size flattens all of them. We do alignment only.
     • margin-right:0.4rem on every icon-in-button — most already use flex `gap`
       or their own spacing; a blanket margin double-spaces them. Skipped.
   Everything else from the brief is implemented below, scoped and additive.
   ========================================================================== */

/* accent adapts to context: cyan in admin, the theme's indigo in the panel /
   marketing, so focus rings never clash with the surrounding design */
:root{
  --cat-accent: #00B4D8;
  --cat-accent-glow: rgba(0,180,216,.16);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 6px 20px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10);
  --cat-ease: .2s cubic-bezier(.25,.46,.45,.94);
}
.wrapper-sidebar-navbar, #fs{ --cat-accent:#5B4CF6; --cat-accent-glow:rgba(91,76,246,.16); }

/* the safe half of the reset: border-box everywhere (no margin/padding wipe) */
*, *::before, *::after{ box-sizing: border-box; }

/* ---- 1. ICONS: alignment only (never force size — it breaks masked icons) -- */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands,
i[class^="fa-"], i[class*=" fa-"], .bi, [class^="bi-"], .material-icons{
  vertical-align: middle;
  line-height: 1;
}

/* ---- 2. HOVER STATES (additive; scoped to admin + panel surfaces) ---------- */
.container-fluid .btn, .container-fluid .panel, .container-fluid .card,
.wrapper-sidebar-navbar .btn, #fs .btn,
a, button{ transition: all var(--cat-ease); }

/* buttons: gentle scale + deeper shadow */
.container-fluid .btn:hover, .wrapper-sidebar-navbar .btn:hover{
  transform: scale(1.01); box-shadow: var(--shadow-md);
}
.container-fluid .btn:active, .wrapper-sidebar-navbar .btn:active{ transform: scale(.97); }

/* cards / panels: lift + shadow (admin Bootstrap panels & generic cards only,
   so it never fights the panel theme's own tuned card hovers) */
.container-fluid .panel:hover, .container-fluid .card:hover,
.container-fluid .product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* table rows: light tint + subtle inset on hover (admin tables) */
.container-fluid table tbody tr{ transition: background var(--cat-ease), box-shadow var(--cat-ease); }
.container-fluid table tbody tr:hover{
  background: rgba(0,180,216,.04);
  box-shadow: inset 0 0 0 9999px rgba(0,180,216,.02);
}

/* ---- 3. OUTLINES / FOCUS RINGS (accessibility-preserving) ------------------ */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){ outline: 2px solid transparent; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible{
  outline: 2px solid var(--cat-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--cat-accent-glow);
  border-radius: 6px;
}

/* ---- 4. SHADOWS: standardised on admin panels/cards/dropdowns -------------- */
.container-fluid .panel, .container-fluid .card, .container-fluid .well,
.container-fluid .product-card{
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.05);
}
.container-fluid .dropdown-menu, .container-fluid .modal-content{ box-shadow: var(--shadow-md); }

/* ---- 5. PAGINATION: clean, rounded, brand active state (admin) ------------- */
.container-fluid .pagination{ display:flex; flex-wrap:wrap; gap:6px; padding-left:0; }
.container-fluid .pagination > li{ display:inline-flex; }
.container-fluid .pagination > li > a,
.container-fluid .pagination > li > span{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; border:1px solid #e5e9f2; border-radius:9px !important; margin:0;
  color:#334155; font-weight:600; background:#fff; transition: all var(--cat-ease);
}
.container-fluid .pagination > li > a:hover,
.container-fluid .pagination > li > span:hover{
  border-color: var(--cat-accent); color: var(--cat-accent); background:#fff;
}
.container-fluid .pagination > .active > a,
.container-fluid .pagination > .active > span,
.container-fluid .pagination > .active > a:hover,
.container-fluid .pagination > .active > span:hover,
.container-fluid .pagination > .active > a:focus{
  background: var(--cat-accent); border-color: var(--cat-accent); color:#fff;
  box-shadow: 0 4px 12px rgba(0,180,216,.30);
}

/* ---- 6. NAVBAR: handled by admin-rebuild.css (#fs-nav). Nothing to override
   here — the top navbar already has padded, rounded, hover/active links. ----- */

/* ---- 7. INPUT FIELDS: brand border + glow on focus ------------------------ */
.container-fluid .form-control:focus,
.container-fluid input:focus, .container-fluid select:focus, .container-fluid textarea:focus,
.wrapper-sidebar-navbar .form-control:focus{
  border-color: var(--cat-accent) !important;
  box-shadow: 0 0 0 4px var(--cat-accent-glow) !important;
  outline: none;
}

/* ---- 8. TOUCH TARGETS: give bare admin action links a real hit area -------- */
.container-fluid .btn{ min-height: 38px; }
@media (hover:none){
  .container-fluid .pagination > li > a,
  .container-fluid .pagination > li > span,
  .container-fluid .btn{ min-height: 44px; }
}

/* ---- dark mode: keep the standardised shadows subtle on dark admin -------- */
body.dark-mode{
  --shadow-sm: 0 2px 12px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
}
body.dark-mode .container-fluid .pagination > li > a,
body.dark-mode .container-fluid .pagination > li > span{ background:#141b28; border-color:#243044; color:#c7d0de; }

@media (prefers-reduced-motion: reduce){
  a, button, .btn, .panel, .card, .product-card, .container-fluid table tbody tr{ transition: none !important; }
  .container-fluid .btn:hover, .container-fluid .panel:hover, .container-fluid .card:hover{ transform: none !important; }
}