/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║   Talpie SPA — Premium Polish Layer                              ║
 * ║   Smooth animations · Refined surfaces · Business shine          ║
 * ║   Works in both light and dark themes                            ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * Include AFTER app.css to layer polished overrides on top.
 */

/* ─────────────────────────────────────────────────────
   0. GLOBAL EASING TOKENS
   ───────────────────────────────────────────────────── */
:root{
  --ease-spring:   cubic-bezier(.22,1,.36,1);
  --ease-snappy:   cubic-bezier(.4,0,.2,1);
  --ease-bounce:   cubic-bezier(.4,0,.2,1);
  --ease-in-soft:  cubic-bezier(.4,0,1,1);
  --ease-out-soft: cubic-bezier(0,0,.2,1);

  /* Duration scale */
  --dur-instant:  60ms;
  --dur-fast:     120ms;
  --dur-normal:   150ms;
  --dur-slow:     200ms;
  --dur-lazy:     300ms;

  /* Glass premium layer for light mode */
  --glass-light: rgba(255,255,255,.70);
  --glass-border-light: rgba(255,255,255,.85);

  /* Accent glow */
}

body.theme-dark{
  --glass-light: rgba(14,18,26,.72);
  --glass-border-light: rgba(88,140,255,.08);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.00) 100%);
  --glow-blue:   0 0 0 3px rgba(88,140,255,.20), 0 8px 24px rgba(88,140,255,.18);
  --glow-violet: 0 0 0 3px rgba(140,90,255,.18), 0 8px 24px rgba(140,90,255,.16);
}


/* ─────────────────────────────────────────────────────
   1. PAGE LOAD ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes tpl-fade-up{
  from{ opacity:0; transform:translateY(4px) }
  to  { opacity:1; transform:none }
}
@keyframes tpl-fade-in{
  from{ opacity:0 }
  to  { opacity:1 }
}
@keyframes tpl-slide-right{
  from{ opacity:0; transform:translateX(-4px) }
  to  { opacity:1; transform:none }
}
@keyframes tpl-slide-down{
  from{ opacity:0; transform:translateY(-8px) }
  to  { opacity:1; transform:none }
}
@keyframes tpl-scale-in{
  from{ opacity:0; transform:scale(.94) }
  to  { opacity:1; transform:none }
}

/* topbar: no entrance animation */

/* Sidebar entrance */
.shell > .sidebar{
  animation: tpl-fade-in var(--dur-fast) ease both;
}

/* Main content entrance */
.main > *{
  animation: tpl-fade-up var(--dur-slow) var(--ease-spring) 80ms both;
}

/* Cards: no stagger animation in business mode */
.grid .card:nth-child(4){ animation-delay:150ms }
.grid .card:nth-child(5){ animation-delay:180ms }
.grid .card:nth-child(6){ animation-delay:210ms }

/* Dash tiles stagger */
.dash-tile{
  animation: tpl-fade-up var(--dur-slow) var(--ease-spring) both;
}
.dash-grid .dash-tile:nth-child(1){ animation-delay: 80ms }
.dash-grid .dash-tile:nth-child(2){ animation-delay:120ms }
.dash-grid .dash-tile:nth-child(3){ animation-delay:160ms }
.dash-grid .dash-tile:nth-child(4){ animation-delay:200ms }
.dash-grid .dash-tile:nth-child(5){ animation-delay:240ms }
.dash-grid .dash-tile:nth-child(6){ animation-delay:280ms }


/* ─────────────────────────────────────────────────────
   2. BUTTONS — PREMIUM FEEL
   ───────────────────────────────────────────────────── */

.btn{
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-snappy),
    background var(--dur-normal) var(--ease-snappy),
    border-color var(--dur-normal) var(--ease-snappy),
    filter var(--dur-normal) var(--ease-snappy),
    opacity var(--dur-normal) var(--ease-snappy);
  will-change: transform, box-shadow;
  /* Subtle inner sheen */
  position: relative;
  overflow: hidden;
}

/* btn sheen removed for business style */

.btn:hover{
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.28) inset;
}
.btn:active{
  transform: translateY(.5px) scale(.99);
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

/* Primary button glow lift */
.btn-primary:hover{
  box-shadow: 0 1px 0 rgba(15,23,42,.06), var(--glow-blue);
  transform: translateY(-2px);
}
.btn-primary:active{
  transform: translateY(0) scale(.99);
}

/* Ripple on click */
@keyframes btn-ripple{
  from{ transform:scale(0); opacity:.22 }
  to  { transform:scale(2.4); opacity:0 }
}
.btn-ripple{
  position:absolute;
  border-radius:999px;
  background:currentColor;
  animation: btn-ripple 360ms var(--ease-out-soft) forwards;
  pointer-events:none;
}

/* Dark mode buttons */
body.theme-dark .btn::before{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.00) 55%
  );
}
body.theme-dark .btn:hover{
  box-shadow: 0 6px 22px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.06) inset;
}


/* ─────────────────────────────────────────────────────
   3. INPUTS — SMOOTH FOCUS RING
   ───────────────────────────────────────────────────── */

.input{
  transition:
    border-color var(--dur-normal) var(--ease-snappy),
    box-shadow var(--dur-normal) var(--ease-snappy),
    background var(--dur-normal) var(--ease-snappy);
}

.input:focus{
  box-shadow: var(--glow-blue);
  border-color: rgba(37,99,235,.55);
}

.input:hover:not(:focus){
  border-color: rgba(37,99,235,.30);
}

body.theme-dark .input:focus{
  box-shadow: var(--glow-blue);
  border-color: rgba(88,140,255,.55);
}
body.theme-dark .input:hover:not(:focus){
  border-color: rgba(88,140,255,.28);
}

/* Floating label lift-up */
@keyframes label-float{
  from{ transform:translateY(0) scale(1); opacity:.72 }
  to  { transform:translateY(-3px) scale(.95); opacity:1 }
}


/* ─────────────────────────────────────────────────────
   4. CARDS — PREMIUM GLASS
   ───────────────────────────────────────────────────── */

.card{
  /* Shimmering glass top border */
  border-top-color: rgba(255,255,255,.72);
  transition:
    box-shadow var(--dur-normal) var(--ease-snappy),
    border-color var(--dur-normal) var(--ease-snappy),
    transform var(--dur-normal) var(--ease-snappy);
}

.card:hover{
  box-shadow:
    0 1px 1px rgba(255,255,255,.72) inset,
    0 16px 38px rgba(15,23,42,.09),
    0 4px 12px rgba(37,99,235,.06);
}

body.theme-dark .card{
  border-top-color: rgba(255,255,255,.06);
}
body.theme-dark .card:hover{
  box-shadow:
    0 1px 1px rgba(255,255,255,.04) inset,
    0 18px 44px rgba(0,0,0,.42),
    0 4px 14px rgba(88,140,255,.08);
}


/* ─────────────────────────────────────────────────────
   5. TOPBAR — GLASS SHIMMER
   ───────────────────────────────────────────────────── */

.topbar{
  /* Premium frosted glass look */
  background: rgba(246,248,252,.88) !important;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 2px 12px rgba(15,23,42,.06);
  transition: background var(--dur-slow) var(--ease-snappy), box-shadow var(--dur-slow) var(--ease-snappy);
}

body.theme-dark .topbar{
  background: rgba(9,12,18,.80) !important;
  border-bottom: 1px solid rgba(148,163,184,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 4px 20px rgba(0,0,0,.28);
}

/* Brand logo — subtle pulse on hover */
.brand-logo{
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-snappy);
}
.brand-link:hover .brand-logo{
  transform: scale(1.07) rotate(-3deg);
  box-shadow: 0 8px 20px rgba(37,99,235,.24);
}
body.theme-dark .brand-link:hover .brand-logo{
  box-shadow: 0 8px 20px rgba(88,140,255,.28);
}

/* Brand title shimmer on hover */
.brand-title{
  background: linear-gradient(90deg, var(--text) 0%, var(--accent) 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position var(--dur-slow) var(--ease-snappy);
}
.brand-link:hover .brand-title{
  background-position: right center;
}


/* ─────────────────────────────────────────────────────
   6. SIDEBAR — REFINED NAVIGATION
   ───────────────────────────────────────────────────── */

.sidebar{
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    1px 0 0 rgba(255,255,255,.48) inset,
    4px 0 20px rgba(15,23,42,.05);
  transition:
    width var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-snappy);
}

body.theme-dark .sidebar{
  box-shadow:
    1px 0 0 rgba(255,255,255,.04) inset,
    4px 0 24px rgba(0,0,0,.28);
}

/* Nav links — smooth hover reveal */
.nav-link{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-snappy);
  position: relative;
}

.nav-link:hover{
  transform: translateX(2px);
}

/* Active indicator glow bar */
.nav-tree-row.is-active > .nav-link::before{
  content:'';
  position:absolute;
  left:0;
  top:20%;
  bottom:20%;
  width:3px;
  border-radius:0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 2px 0 12px rgba(37,99,235,.40);
  opacity:1;
  transition: none;
}
body.theme-dark .nav-tree-row.is-active > .nav-link::before{
  box-shadow: 2px 0 14px rgba(88,140,255,.50);
}

/* Nav expander smooth rotate */
.nav-expander-ico{
  transition: transform var(--dur-normal) var(--ease-spring) !important;
}

/* Nav children slide-in */
.nav-children{
  overflow: hidden;
  transition:
    max-height var(--dur-slow) var(--ease-spring),
    opacity var(--dur-normal) var(--ease-snappy) !important;
}


/* ─────────────────────────────────────────────────────
   7. DROPDOWN MENUS — SMOOTH LAYERED ENTRANCE
   ───────────────────────────────────────────────────── */

.dropdown-menu{
  transform-origin: top right;
  transform: translateY(-10px) scale(.97);
  transition:
    opacity var(--dur-normal) var(--ease-spring),
    transform var(--dur-normal) var(--ease-spring) !important;
  border-top: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 20px 48px rgba(15,23,42,.14),
    0 4px 12px rgba(15,23,42,.08);
}
.dropdown-menu.is-open{
  transform: translateY(0) scale(1) !important;
}

body.theme-dark .dropdown-menu{
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 22px 56px rgba(0,0,0,.48),
    0 4px 14px rgba(0,0,0,.28);
}

/* Dropdown items */
.dropdown-item{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
  border-radius: 8px;
  margin: 1px 4px;
}
.dropdown-item:hover{
  transform: translateX(2px);
}

body.theme-dark .dropdown-item:hover{
  background: rgba(88,140,255,.10) !important;
}


/* ─────────────────────────────────────────────────────
   8. TABS — POLISHED ACTIVE STATE
   ───────────────────────────────────────────────────── */

.tab{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-snappy) !important;
  position: relative;
  overflow: hidden;
}

.tab::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.tab.active::after{
  transform: scaleX(1);
}

.tab:hover{
  transform: translateY(-2px);
}
.tab.active{
  transform: translateY(0);
}

/* Tab panel reveal */
@keyframes tab-panel-in{
  from{ opacity:0; transform:translateY(8px) scale(.996) }
  to  { opacity:1; transform:none }
}
.tab-panel.active{
  animation: tab-panel-in var(--dur-slow) var(--ease-spring) both;
}


/* ─────────────────────────────────────────────────────
   9. DASHBOARD TILES — PREMIUM HOVER
   ───────────────────────────────────────────────────── */

.dash-tile{
  transition:
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-snappy),
    border-color var(--dur-normal) var(--ease-snappy) !important;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.dash-tile::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,.06) 52%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform .55s var(--ease-snappy);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.dash-tile:hover::after{
  transform: translateX(100%);
}
.dash-tile:hover{
  transform: translateY(-3px) scale(1.005);
  box-shadow:
    0 20px 48px rgba(2,6,23,.12),
    0 4px 12px rgba(37,99,235,.08),
    0 1px 0 rgba(255,255,255,.72) inset;
  border-color: rgba(37,99,235,.24);
}
.dash-tile:active{
  transform: translateY(-1px) scale(1.002);
}

body.theme-dark .dash-tile:hover{
  box-shadow:
    0 22px 52px rgba(0,0,0,.38),
    0 4px 14px rgba(88,140,255,.12),
    0 1px 0 rgba(255,255,255,.05) inset;
  border-color: rgba(88,140,255,.28);
}


/* ─────────────────────────────────────────────────────
  10. SMART TABLE — ROW HOVER & LOADING
   ───────────────────────────────────────────────────── */

/* Smooth row hover */
.st-table tbody tr{
  transition: background var(--dur-fast) var(--ease-snappy);
}

/* Loading shimmer skeleton */
@keyframes st-skeleton{
  0%  { background-position: -400px 0 }
  100%{ background-position: 400px 0 }
}
.st-loading{
  transition: opacity var(--dur-normal) var(--ease-snappy) !important;
}

/* Progress bar smooth grow */
.st-progress > div,
.progressbar > div{
  transition: width var(--dur-slow) var(--ease-spring) !important;
}

/* SmartTable panel entrance */
@keyframes st-panel-in{
  from{ opacity:0; transform:translateY(6px) scale(.98) }
  to  { opacity:1; transform:none }
}
.st-panel{
  animation: st-panel-in var(--dur-normal) var(--ease-spring) both;
}

/* Spinner upgrade */
@keyframes tpl-spin{
  to{ transform:rotate(360deg) }
}
.st-spinner{
  border-top-color: var(--accent) !important;
  animation: tpl-spin .7s linear infinite !important;
}
body.theme-dark .st-spinner{
  border-top-color: rgba(88,140,255,.90) !important;
}


/* ─────────────────────────────────────────────────────
  11. TOAST NOTIFICATIONS — PREMIUM ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes toast-in{
  from{ opacity:0; transform:translateY(12px) scale(.95) }
  to  { opacity:1; transform:none }
}
@keyframes toast-out{
  from{ opacity:1; transform:none }
  to  { opacity:0; transform:translateY(-8px) scale(.96) }
}

.toast{
  animation: toast-in var(--dur-normal) var(--ease-spring) both !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 16px 40px rgba(15,23,42,.16) !important;
}

body.theme-dark .toast{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 44px rgba(0,0,0,.44) !important;
}


/* ─────────────────────────────────────────────────────
  12. BADGES — POLISHED MICRO-SURFACE
   ───────────────────────────────────────────────────── */

.badge{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
}
.badge:hover{
  transform: scale(1.04);
  box-shadow: 0 3px 10px rgba(15,23,42,.10);
}

body.theme-dark .badge:hover{
  box-shadow: 0 3px 12px rgba(0,0,0,.24);
}


/* ─────────────────────────────────────────────────────
  13. MODAL — LAYERED ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes modal-in{
  from{ opacity:0; transform:translateY(16px) scale(.96) }
  to  { opacity:1; transform:none }
}
@keyframes modal-backdrop-in{
  from{ opacity:0; backdrop-filter:blur(0px) }
  to  { opacity:1; backdrop-filter:blur(6px) }
}

.modal-backdrop{
  animation: modal-backdrop-in var(--dur-slow) var(--ease-out-soft) both;
}

.modal-box,
.form-modal-box{
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
  border-top: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 28px 70px rgba(15,23,42,.20);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

body.theme-dark .modal-box,
body.theme-dark .form-modal-box{
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 30px 76px rgba(0,0,0,.50);
}


/* ─────────────────────────────────────────────────────
  14. COMMAND PALETTE — REFINED UX
   ───────────────────────────────────────────────────── */

@keyframes cp-in{
  from{ opacity:0; transform:scale(.99) translateY(-8px) }
  to  { opacity:1; transform:none }
}
.cp-row{
  animation: cp-in var(--dur-normal) var(--ease-spring) both;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.60);
}
body.theme-dark .cp-row{
  border-top: 1px solid rgba(255,255,255,.05);
}

.cp-item{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-snappy);
}
.cp-item:hover,
.cp-item.is-active{
  transform: translateX(2px);
}


/* ─────────────────────────────────────────────────────
  15. FORM FIELDS — MICRO INTERACTIONS
   ───────────────────────────────────────────────────── */

/* Smart inputs dropdown entrance */
@keyframes ti-drop-in{
  from{ opacity:0; transform:translateY(6px) scale(.98) }
  to  { opacity:1; transform:none }
}
.ti-suggest-menu,
.ti-select-search-menu,
.ti-mselect-menu{
  animation: ti-drop-in var(--dur-fast) var(--ease-spring) both;
  border-top: 1px solid rgba(255,255,255,.60);
}
body.theme-dark .ti-suggest-menu,
body.theme-dark .ti-select-search-menu,
body.theme-dark .ti-mselect-menu{
  border-top: 1px solid rgba(255,255,255,.05);
}

.ti-suggest-item,
.ti-select-search-item,
.ti-mselect-item{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
}
.ti-suggest-item:hover,
.ti-select-search-item:hover{
  transform: translateX(2px);
}

/* Pill remove button */
.ti-mselect-pill{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-snappy);
}
.ti-mselect-pill:hover{
  transform: scale(1.04);
}


/* ─────────────────────────────────────────────────────
  16. AJAX LOADING BAR — REFINED SHIMMER
   ───────────────────────────────────────────────────── */

#ajax-bar{
  height: 2px !important;
  background: transparent;
  box-shadow: none;
}
#ajax-bar .inner{
  background: linear-gradient(
    90deg,
    rgba(37,99,235,.95) 0%,
    rgba(124,58,237,.90) 50%,
    rgba(6,182,212,.85) 100%
  ) !important;
  filter: drop-shadow(0 0 3px rgba(37,99,235,.60));
}

body.theme-dark #ajax-bar .inner{
  background: linear-gradient(
    90deg,
    rgba(88,140,255,.95) 0%,
    rgba(140,90,255,.90) 50%,
    rgba(6,182,212,.85) 100%
  ) !important;
  filter: drop-shadow(0 0 4px rgba(88,140,255,.55));
}


/* ─────────────────────────────────────────────────────
  17. USER PILL / AVATAR — HOVER POLISH
   ───────────────────────────────────────────────────── */

.user-menu-btn{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
}
.user-menu-btn:hover{
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
body.theme-dark .user-menu-btn:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}

.notify-menu-btn{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-snappy);
}
.notify-menu-btn:hover{
  transform: scale(1.05) rotate(-5deg);
}


/* ─────────────────────────────────────────────────────
  18. SCROLLBARS — PREMIUM THIN STYLE
   ───────────────────────────────────────────────────── */

*::-webkit-scrollbar{
  width:  5px;
  height: 5px;
}
*::-webkit-scrollbar-track{
  background: transparent;
}
*::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.16);
  border-radius: 999px;
  transition: background var(--dur-normal) var(--ease-snappy);
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(37,99,235,.38);
}
*::-webkit-scrollbar-corner{
  background: transparent;
}

body.theme-dark *::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.16);
}
body.theme-dark *::-webkit-scrollbar-thumb:hover{
  background: rgba(88,140,255,.38);
}


/* ─────────────────────────────────────────────────────
  19. SELECTION COLOR
   ───────────────────────────────────────────────────── */

::selection{
  background: rgba(37,99,235,.22);
  color: var(--text);
}
body.theme-dark ::selection{
  background: rgba(88,140,255,.28);
}


/* ─────────────────────────────────────────────────────
  20. FOCUS VISIBLE — ACCESSIBLE RING
   ───────────────────────────────────────────────────── */

:focus-visible{
  outline: 2px solid rgba(37,99,235,.65);
  outline-offset: 2px;
  border-radius: 6px;
}
body.theme-dark :focus-visible{
  outline-color: rgba(88,140,255,.70);
}


/* ─────────────────────────────────────────────────────
  21. PANEL / CARD HEADER — FROSTED STICKY
   ───────────────────────────────────────────────────── */

.st-head,
.st-summary-head,
.st-matrix-th{
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

/* KPI tiles hover */
.st-kpi{
  transition:
    box-shadow var(--dur-normal) var(--ease-snappy),
    border-color var(--dur-normal) var(--ease-snappy),
    transform var(--dur-normal) var(--ease-spring);
}
.st-kpi:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(15,23,42,.09),
    0 1px 0 rgba(255,255,255,.72) inset;
  border-color: rgba(37,99,235,.18);
}
body.theme-dark .st-kpi:hover{
  box-shadow:
    0 14px 32px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.04) inset;
  border-color: rgba(88,140,255,.22);
}


/* ─────────────────────────────────────────────────────
  22. TOGGLE / CHECKBOX / RADIO — SMOOTH TRANSITIONS
   ───────────────────────────────────────────────────── */

.toggle-wrap,
[type="checkbox"],
[type="radio"]{
  transition:
    background var(--dur-normal) var(--ease-spring),
    border-color var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-spring);
}

/* Switch icons */
.switch-ico{
  filter: drop-shadow(0 1px 2px rgba(15,23,42,.12));
  transition: filter var(--dur-normal) var(--ease-snappy);
}


/* ─────────────────────────────────────────────────────
  23. TABLE ROW ACTIONS — REVEAL ON HOVER
   ───────────────────────────────────────────────────── */

.st-table tbody tr td.actions > *{
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
}
.st-table tbody tr:hover td.actions > *{
  opacity: 1;
  transform: scale(1);
}
/* Stagger action buttons */
.st-table tbody tr:hover td.actions > *:nth-child(1){ transition-delay: 0ms }
.st-table tbody tr:hover td.actions > *:nth-child(2){ transition-delay:20ms }
.st-table tbody tr:hover td.actions > *:nth-child(3){ transition-delay:40ms }
.st-table tbody tr:hover td.actions > *:nth-child(4){ transition-delay:60ms }


/* ─────────────────────────────────────────────────────
  24. CHIP TAGS — SUBTLE HOVER
   ───────────────────────────────────────────────────── */

.st-chip{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-snappy);
}
.st-chip:hover{
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(15,23,42,.08);
}


/* ─────────────────────────────────────────────────────
  25. SIDE PANEL & BATCH BAR — ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes batchbar-in{
  from{ opacity:0; transform:translateY(6px) }
  to  { opacity:1; transform:none }
}
.st-batchbar{
  animation: batchbar-in var(--dur-normal) var(--ease-spring) both;
}

@keyframes sidepanel-in{
  from{ opacity:0; transform:translateX(12px) }
  to  { opacity:1; transform:none }
}
.st-sum-panel{
  animation: sidepanel-in var(--dur-slow) var(--ease-spring) both;
}


/* ─────────────────────────────────────────────────────
  26. MESSAGES / CHAT — BUBBLE ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes msg-bubble-in{
  from{ opacity:0; transform:translateY(6px) scale(.97) }
  to  { opacity:1; transform:none }
}
.msg-item{
  animation: msg-bubble-in var(--dur-normal) var(--ease-spring) both;
}

.msg-ch{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring);
}
.msg-ch:hover{
  transform: translateX(2px);
}


/* ─────────────────────────────────────────────────────
  27. LOGIN PAGE — REFINED ENTRANCE
   ───────────────────────────────────────────────────── */

@keyframes login-panel-in{
  from{ opacity:0; transform:translateY(20px) scale(.96) }
  to  { opacity:1; transform:none }
}

/* Used on the login card  */
.login-box,
.login-card,
.auth-box{
  animation: login-panel-in .55s var(--ease-spring) 80ms both;
  border-top: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
}
body.theme-dark .login-box,
body.theme-dark .login-card,
body.theme-dark .auth-box{
  border-top: 1px solid rgba(255,255,255,.08);
}


/* ─────────────────────────────────────────────────────
  28. UPLOAD BAR — GRADIENT PULSE
   ───────────────────────────────────────────────────── */

@keyframes upload-pulse{
  0%  { background-size: 200% 100%; background-position: left }
  100%{ background-size: 200% 100%; background-position: right }
}
.upload-bar-inner{
  transition: width var(--dur-fast) var(--ease-spring) !important;
  background: linear-gradient(
    90deg,
    rgba(37,99,235,.90) 0%,
    rgba(124,58,237,.85) 50%,
    rgba(6,182,212,.80) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: upload-pulse 1.4s var(--ease-snappy) infinite alternate;
}


/* ─────────────────────────────────────────────────────
  29. TOOLTIP — PREMIUM SURFACE
   ───────────────────────────────────────────────────── */

.tooltip,
[data-tooltip]::after{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.24);
}
body.theme-dark .tooltip,
body.theme-dark [data-tooltip]::after{
  border-top: 1px solid rgba(255,255,255,.08);
}


/* ─────────────────────────────────────────────────────
  30. SIDEBAR TOGGLE BUTTON — ANIMATED HAMBURGER
   ───────────────────────────────────────────────────── */

.sidebar-toggle{
  transition:
    transform var(--dur-normal) var(--ease-spring),
    background var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy);
}
.sidebar-toggle:hover{
  transform: scale(1.06);
}
.sidebar-toggle:active{
  transform: scale(.97);
}


/* ─────────────────────────────────────────────────────
  31. REDUCED MOTION — RESPECT ACCESSIBILITY
   ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ─────────────────────────────────────────────────────
  32. DARK MODE — ADDITIONAL PREMIUM SURFACES
   ───────────────────────────────────────────────────── */

body.theme-dark .sidebar{
  background:
    radial-gradient(440px 320px at 0% 30%, rgba(37,99,235,.06), transparent 70%),
    radial-gradient(400px 280px at 100% 80%, rgba(124,58,237,.05), transparent 70%),
    rgba(9,12,18,.88);
}

body.theme-dark .topbar{
  background:
    linear-gradient(180deg, rgba(18,24,38,.92), rgba(12,16,26,.86)) !important;
}

/* Dark mode card glass top */
body.theme-dark .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 50%),
    var(--panel);
  border-top-color: rgba(255,255,255,.06);
}

/* Dark — stat value emphasis */
body.theme-dark .st-kpi-val,
body.theme-dark .st-sum-val{
  color: rgba(226,232,240,.96);
}

/* Dark mode — content gradient background punch-up */
body.theme-dark{
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(37,99,235,.08), transparent 58%),
    radial-gradient(920px 520px at 92% -5%,  rgba(124,58,237,.07), transparent 58%),
    radial-gradient(900px 560px at 60% 110%, rgba(37,99,235,.04), transparent 60%),
    linear-gradient(180deg, #070b10, #0a0f14) !important;
}


/* ─────────────────────────────────────────────────────
  33. MISC POLISH — CONSISTENT BORDER RADII, LINES
   ───────────────────────────────────────────────────── */

/* Ensure image icons are crisp */
img.btn-ico, img.menu-ico, img.dash-ico{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Subtle scale for action icons on hover */
.btn:hover img.btn-ico{
  filter: brightness(1.05) saturate(1.1);
}

/* HR dividers */
hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}
body.theme-dark hr{
  border-top-color: rgba(148,163,184,.12);
}

/* SmartTable tab buttons */
.st-tab-btn{
  transition:
    background var(--dur-fast) var(--ease-snappy),
    border-color var(--dur-fast) var(--ease-snappy),
    box-shadow var(--dur-fast) var(--ease-snappy),
    transform var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-snappy) !important;
}
.st-tab-btn:hover{
  transform: translateY(-1.5px);
}
.st-tab-btn.active{
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 6px 16px rgba(37,99,235,.10);
}
body.theme-dark .st-tab-btn.active{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 6px 18px rgba(88,140,255,.12);
}


/* ─────────────────────────────────────────────────────
  34. GROUP STICKY HEADER — div outside <table>, inside wrap
      position:sticky under thead (top = full thead height).
      thead stays at top:0; sticky group bar is rendered directly below it.
      Dzięki temu header grupy nigdy nie wskakuje nad header tabeli.
   ───────────────────────────────────────────────────── */

.st-group-stickyhead-bar {
  position: sticky;
  top: var(--st-group-sticky-top, 38px);
  left: 0;
  width: 100%;
  height: 0;
  z-index: 4;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.st-group-stickyhead-bar[hidden] { display: none !important; }

.st-group-stickyhead-bar .st-th--groupsticky {
  display: block;
  width: 100%;
  padding: 0 !important;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(247,250,252,.99), rgba(239,244,249,.97));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.st-group-stickyhead-bar.is-scrolled .st-th--groupsticky {
  box-shadow: 0 4px 14px rgba(15,23,42,.07);
}

/* Dark mode */
body.theme-dark .st-group-stickyhead-bar .st-th--groupsticky {
  background: linear-gradient(180deg, rgba(20,27,42,.98), rgba(15,22,36,.97));
  border-bottom-color: rgba(255,255,255,.07);
}
body.theme-dark .st-group-stickyhead-bar.is-scrolled .st-th--groupsticky {
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* Neutralise legacy <tr>-based stickyhead rules from app.css */
.st-tr--group-stickyhead { display: none !important; }

.st-tr--group-stickyspacer > .st-td,
.st-tr--group-stickyspacer > td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  pointer-events: none;
}


/* SmartTable search shell: focus the whole control, not just the raw input */
.st-search{
  position:relative;
  transition:border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.st-search:focus-within{
  background:rgba(255,255,255,.92);
  border-color:rgba(37,99,235,.34);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.st-search .st-input:focus{
  outline:none;
  box-shadow:none;
}
body.theme-dark .st-search:focus-within{
  background:rgba(15,23,42,.42);
  border-color:rgba(120,170,255,.34);
  box-shadow:0 0 0 3px rgba(120,170,255,.12);
}