/* ==========================================================================
   UX Enhancements — global modern layer (loaded after theme, before page CSS)
   Soft-rounded · glassmorphism chrome · depth · rich motion
   Applies app-wide via the shared layout — no per-page edits.
   Glass is used on CHROME (navbar, menu, dropdowns, modals) only; dense data
   tables/cards stay solid for legibility.
   ========================================================================== */

:root {
  /* Soft-rounded modern radii (override theme) */
  --bs-border-radius:        .5rem;    /* 8px  */
  --bs-border-radius-sm:     .375rem;  /* 6px  */
  --bs-border-radius-lg:     .75rem;   /* 12px */
  --bs-border-radius-xl:     .875rem;  /* 14px */
  --bs-border-radius-xxl:    1rem;     /* 16px */
  --bs-border-radius-2xl:    1rem;

  /* Surfaces + borders */
  --ux-border:        #e6e9ef;
  --ux-border-strong: #d7dbe3;
  --ux-row-hover:     rgba(105, 108, 255, .06);
  --ux-th-bg:         #f6f7fb;
  --ux-th-color:      #566a7f;

  /* Depth (soft layered shadows) */
  --ux-shadow-sm: 0 1px 2px rgba(20, 25, 45, .06), 0 1px 3px rgba(20, 25, 45, .05);
  --ux-shadow-md: 0 4px 12px rgba(20, 25, 45, .08), 0 2px 4px rgba(20, 25, 45, .05);
  --ux-shadow-lg: 0 12px 30px rgba(20, 25, 45, .12), 0 4px 10px rgba(20, 25, 45, .06);

  /* Glass */
  --ux-glass-bg:     rgba(255, 255, 255, .72);
  --ux-glass-border: rgba(255, 255, 255, .55);
  --ux-glass-blur:   14px;

  --ux-ease: cubic-bezier(.4, 0, .2, 1);
  --ux-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   App background — subtle light mesh so glass surfaces read
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.layout-page,
.content-wrapper {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(105, 108, 255, .07), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(3, 195, 236, .06), transparent 55%),
    #f5f6fa;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -.01em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Compact sizing — trim the base scale for a tighter, modern density
   -------------------------------------------------------------------------- */
body { font-size: .875rem; }                 /* ~14px base */
.form-control, .form-select, .input-group-text {
  font-size: .8125rem;                        /* ~13px */
  padding-top: .34rem; padding-bottom: .34rem;
  min-height: calc(1.5em + .68rem + 2px);
}
.form-control-sm, .form-select-sm { font-size: .75rem; }
.form-label, label, .col-form-label { font-size: .8125rem; }
.btn { font-size: .8125rem; padding: .42rem .85rem; }
.btn-sm { font-size: .75rem; padding: .28rem .6rem; }
.btn-lg { font-size: .9rem; }
.table { font-size: .8125rem; }
.card-header .card-title, .card-title { font-size: 1rem; }
.dropdown-item, .menu-link { font-size: .8125rem; }
.badge { font-size: .7rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

/* --------------------------------------------------------------------------
   Cards — soft-rounded, layered shadow, hover lift (transform only)
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--ux-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--ux-shadow-sm);
  transition: box-shadow .25s var(--ux-ease), transform .25s var(--ux-ease);
}
.card:hover {
  box-shadow: var(--ux-shadow-md);
  transform: translateY(-2px);
}
/* Don't lift the big page-wrapping cards or nested cards — only real cards */
.card .card:hover { transform: none; }

/* --------------------------------------------------------------------------
   Frosted glass CHROME
   -------------------------------------------------------------------------- */
.layout-navbar,
.navbar.navbar-detached {
  background: var(--ux-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--ux-glass-blur));
  backdrop-filter: blur(var(--ux-glass-blur));
  border: 1px solid var(--ux-glass-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--ux-shadow-sm);
  transition: box-shadow .3s var(--ux-ease), background .3s var(--ux-ease);
}
.navbar.navbar-scrolled {
  background: rgba(255, 255, 255, .85) !important;
  box-shadow: var(--ux-shadow-md);
}

.dropdown-menu,
.toast,
.popover {
  border: 1px solid var(--ux-glass-border);
  border-radius: var(--bs-border-radius-xl);
  background: var(--ux-glass-bg);
  -webkit-backdrop-filter: blur(var(--ux-glass-blur));
  backdrop-filter: blur(var(--ux-glass-blur));
  box-shadow: var(--ux-shadow-lg);
}
/* Modals / offcanvas: SOLID surface (no backdrop-filter). Blur on these creates
   a stacking context that can let the backdrop intercept clicks, and hurts
   legibility on data-entry forms. Keep rounded + elevated only. */
.modal-content,
.offcanvas {
  border: 1px solid var(--ux-border);
  border-radius: var(--bs-border-radius-xl);
  background: #fff;
  box-shadow: var(--ux-shadow-lg);
}
.modal-backdrop.show { opacity: .5; }

/* Sidebar density — tighter, smaller (was too bulky) */
.menu-vertical .menu-item { margin: .0625rem 0; }
.menu-vertical .menu-item .menu-link {
  padding-top: .42rem;
  padding-bottom: .42rem;
  font-size: .8125rem;
  min-height: auto;
}
.menu-vertical .menu-item .menu-link .menu-icon {
  font-size: 1.05rem;
  width: 1.4rem;
  margin-right: .5rem;
}
.menu-vertical .menu-sub .menu-link {
  padding-top: .34rem;
  padding-bottom: .34rem;
  font-size: .78rem;
}
/* Section headers — compact + subtle */
.menu-header {
  padding-top: .85rem;
  padding-bottom: .3rem;
  min-height: auto;
}
.menu-header .menu-header-text {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ux-th-color);
  opacity: .75;
}
.app-brand.demo { padding-top: .75rem; padding-bottom: .75rem; }

/* Submenu icons — small, aligned */
.menu-vertical .menu-sub .menu-link .menu-icon {
  font-size: .95rem;
  width: 1.2rem;
  min-width: 1.2rem;
  margin-right: .45rem;
  text-align: center;
}

/* Sidebar menu — modern active pill + smooth hover */
.menu-item .menu-link {
  border-radius: var(--bs-border-radius);
  transition: background-color .2s var(--ux-ease), color .2s var(--ux-ease), transform .15s var(--ux-ease);
}
.menu-item:not(.active) .menu-link:hover {
  background: rgba(105, 108, 255, .08);
  transform: translateX(2px);
}
.menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(72.47deg, var(--bs-primary) 22.16%, rgba(105, 108, 255, .7) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(105, 108, 255, .35);
}

/* --------------------------------------------------------------------------
   Buttons — soft, hover raise, press, ripple
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--bs-border-radius);
  position: relative;
  overflow: hidden;
  /* Keep the label on one line and vertically centred so the ripple's
     overflow:hidden (and any fixed button height) never clips the text. */
  white-space: nowrap;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: transform .12s var(--ux-ease), box-shadow .2s var(--ux-ease),
              background-color .2s var(--ux-ease), border-color .2s var(--ux-ease);
}
/* Don't let a page-set fixed height clip the label — grow if needed. */
.btn.btn-sm { min-height: 31px; height: auto; }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark {
  box-shadow: var(--ux-shadow-sm);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ux-shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--ux-shadow-sm); }
.ux-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
  animation: uxRipple .6s var(--ux-ease);
}
.btn-outline-primary .ux-ripple,
.btn-outline-secondary .ux-ripple,
.btn-light .ux-ripple { background: rgba(105, 108, 255, .25); }

/* --------------------------------------------------------------------------
   Inputs — rounded, focus glow
   -------------------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
  border-radius: var(--bs-border-radius);
  transition: border-color .15s var(--ux-ease), box-shadow .15s var(--ux-ease);
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .18rem rgba(105, 108, 255, .18);
  border-color: rgba(105, 108, 255, .6);
}
.badge { border-radius: 50rem; }

/* --------------------------------------------------------------------------
   Tables — clean, rounded container, universal hover, tabular figures
   -------------------------------------------------------------------------- */
.card > .table-responsive:last-child { border-bottom-left-radius: var(--bs-border-radius-lg); border-bottom-right-radius: var(--bs-border-radius-lg); overflow: hidden; }
.table { --bs-table-border-color: var(--ux-border); border-color: var(--ux-border); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--ux-border); padding-top: .7rem; padding-bottom: .7rem; vertical-align: middle; }
.table thead th {
  background: var(--ux-th-bg); color: var(--ux-th-color);
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--ux-border-strong); white-space: nowrap;
}
.table tbody td { font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color .15s var(--ux-ease); }
.table:not(.table-borderless) tbody tr:hover,
.table-hover tbody tr:hover { background-color: var(--ux-row-hover); --bs-table-bg-state: var(--ux-row-hover); }

/* --------------------------------------------------------------------------
   Accessibility — visible focus rings
   -------------------------------------------------------------------------- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Breadcrumb (auto partial)
   -------------------------------------------------------------------------- */
.ux-breadcrumb { margin-bottom: 1rem; }
.ux-breadcrumb .breadcrumb { margin: 0; font-size: .8125rem; align-items: center; }
.ux-breadcrumb .breadcrumb-item a { color: var(--bs-secondary-color, #697a8d); text-decoration: none; transition: color .15s var(--ux-ease); }
.ux-breadcrumb .breadcrumb-item a:hover { color: var(--bs-primary); }
.ux-breadcrumb .breadcrumb-item.active { color: var(--bs-heading-color, #384551); font-weight: 600; }
.ux-breadcrumb .breadcrumb-item i { font-size: .95rem; vertical-align: -2px; }

/* --------------------------------------------------------------------------
   Modern thin scrollbar
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #c5c9d6 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c5c9d6; border-radius: 50rem; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #a9aec2; background-clip: content-box; }

/* --------------------------------------------------------------------------
   Motion — entrance, scroll reveal, ripple, modal, skeleton
   -------------------------------------------------------------------------- */
@keyframes uxFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uxRipple { to { transform: scale(4); opacity: 0; } }
@keyframes uxShimmer { 100% { transform: translateX(100%); } }

/* Page entrance (JS adds .ux-animate-in to .content-wrapper) */
.content-wrapper.ux-animate-in > .container-xxl,
.content-wrapper.ux-animate-in > .container-fluid {
  animation: uxFadeUp .5s var(--ux-ease) both;
}

/* Scroll reveal: JS sets .ux-reveal, then .is-visible when in view */
.ux-reveal { opacity: 0; transform: translateY(18px); }
.ux-reveal.is-visible { animation: uxFadeUp .5s var(--ux-ease) both; }

/* Modal scale entrance — transform only. Never override opacity: let Bootstrap
   own visibility so a dialog can't get stuck invisible under the backdrop. */
.modal.fade .modal-dialog { transform: scale(.97); transition: transform .25s var(--ux-spring); }
.modal.show .modal-dialog { transform: none; }

/* Skeleton shimmer utility */
.ux-skeleton { position: relative; overflow: hidden; background: #eceef3; border-radius: var(--bs-border-radius); }
.ux-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: uxShimmer 1.4s infinite; }

/* --------------------------------------------------------------------------
   Auth pages — animated glass background + glass card (blankLayout only)
   -------------------------------------------------------------------------- */
.authentication-wrapper {
  position: relative;
  min-height: 100dvh;
  background: linear-gradient(-45deg, #eef0ff, #e9fbff, #f3ecff, #eafff3);
  background-size: 400% 400%;
  animation: uxAuthGradient 18s ease infinite;
}
@keyframes uxAuthGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.authentication-wrapper .card {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ux-glass-border);
  box-shadow: var(--ux-shadow-lg);
}

/* --------------------------------------------------------------------------
   Respect reduced-motion — kill entrance/hover motion (blur/glass stays)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .btn:hover, .menu-item:not(.active) .menu-link:hover { transform: none !important; }
  .authentication-wrapper { animation: none !important; }
  .ux-reveal { opacity: 1; transform: none; }
}