/* Albumik 0.1.14 HARD CSS VISUAL OVERRIDE */
/* Tylko wygląd. Bez JS. Bez backendu. Z mocnym nadpisaniem starego stylu. */

:root{
  --al14-bg:#f7f8fd;
  --al14-card:#ffffff;
  --al14-text:#13172a;
  --al14-muted:#747b92;
  --al14-border:#e6eaf3;
  --al14-sidebar:#071323;
  --al14-sidebar2:#111b31;
  --al14-pink:#cf2e91;
  --al14-pink2:#e045a3;
  --al14-purple:#8b4df4;
  --al14-blue:#3485ff;
  --al14-green:#20c463;
  --al14-orange:#f5a524;
  --al14-shadow:0 18px 50px rgba(24,28,48,.075);
  --al14-soft-shadow:0 10px 24px rgba(24,28,48,.055);
}

/* GLOBAL */
html,
body{
  margin:0!important;
  background:
    radial-gradient(circle at 80% 11%, rgba(142,91,246,.11), transparent 24%),
    radial-gradient(circle at 48% -8%, rgba(207,46,145,.09), transparent 24%),
    linear-gradient(120deg,#f8fbff 0%,#fff8fc 100%)!important;
  color:var(--al14-text)!important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important;
}

*,*::before,*::after{box-sizing:border-box!important}

#app,
.app,
.app-shell{
  background:transparent!important;
}

.app-shell,
body > .app-shell,
#app > .app-shell,
.app{
  display:grid!important;
  grid-template-columns:250px minmax(0,1fr) 230px!important;
  min-height:100vh!important;
  width:100%!important;
}

/* SIDEBAR - mocny override pod wzór */
.sidebar,
aside.sidebar,
nav.sidebar,
.app-sidebar{
  width:250px!important;
  min-width:250px!important;
  max-width:250px!important;
  min-height:100vh!important;
  padding:22px 18px!important;
  background:
    radial-gradient(circle at 20% 7%, rgba(207,46,145,.30), transparent 15%),
    linear-gradient(180deg,var(--al14-sidebar2) 0%,var(--al14-sidebar) 100%)!important;
  color:#fff!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
  box-shadow:24px 0 60px rgba(7,19,35,.17)!important;
  overflow:hidden!important;
}

/* marka */
.sidebar .brand,
.sidebar-brand,
.brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 24px!important;
  min-height:48px!important;
}

.sidebar .brand-badge,
.sidebar-brand .brand-badge,
.brand-badge{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  font-weight:950!important;
  background:linear-gradient(135deg,var(--al14-pink2),var(--al14-purple))!important;
  box-shadow:0 16px 30px rgba(207,46,145,.36)!important;
}

.sidebar img,
.sidebar .brand img,
.sidebar-brand img{
  max-width:42px!important;
  max-height:42px!important;
  border-radius:14px!important;
  object-fit:contain!important;
}

.sidebar h1,
.sidebar .brand-title,
.sidebar strong,
.sidebar .app-name{
  color:#fff!important;
  font-size:21px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.35px!important;
  margin:0!important;
}

.sidebar small,
.sidebar .brand-subtitle,
.sidebar .subtitle{
  color:rgba(255,255,255,.62)!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* profil pod logo - jeśli istnieje */
.sidebar .user,
.sidebar .profile,
.sidebar .account,
.sidebar .me,
.sidebar [class*="user"],
.sidebar [class*="profile"]{
  color:#fff!important;
}

.sidebar .avatar,
.sidebar [class*="avatar"]{
  border-radius:999px!important;
  overflow:hidden!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22)!important;
}

/* pozycje menu */
.sidebar button,
.sidebar a,
.sidebar .nav-btn,
.sidebar [role="button"],
.sidebar .menu-item{
  position:relative!important;
  width:100%!important;
  min-height:45px!important;
  margin:4px 0!important;
  padding:0 14px 0 46px!important;
  border:0!important;
  border-radius:13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:transparent!important;
  color:rgba(255,255,255,.78)!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:left!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease!important;
}

.sidebar button::before,
.sidebar a::before,
.sidebar .nav-btn::before,
.sidebar [role="button"]::before,
.sidebar .menu-item::before{
  content:""!important;
  position:absolute!important;
  left:15px!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  transform:translateY(-50%)!important;
  border-radius:5px!important;
  border:2px solid currentColor!important;
  opacity:.82!important;
}

/* aktywne i hover */
.sidebar button:hover,
.sidebar a:hover,
.sidebar .nav-btn:hover,
.sidebar [role="button"]:hover,
.sidebar .menu-item:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  transform:translateX(1px)!important;
}

.sidebar button.active,
.sidebar a.active,
.sidebar .nav-btn.active,
.sidebar .active,
.sidebar button[aria-selected="true"],
.sidebar a[aria-selected="true"]{
  background:linear-gradient(135deg,var(--al14-pink),#b939d7)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(207,46,145,.34)!important;
}

/* separatory wizualne bez JS */
.sidebar button:nth-of-type(1),
.sidebar a:nth-of-type(1){
  margin-top:18px!important;
}

.sidebar button:nth-of-type(6),
.sidebar a:nth-of-type(6){
  margin-top:24px!important;
}

.sidebar button:nth-last-of-type(1),
.sidebar a:nth-last-of-type(1){
  margin-top:24px!important;
}

/* licznik/badge */
.sidebar .badge,
.sidebar [class*="badge"],
.sidebar .count,
.sidebar [class*="count"]{
  margin-left:auto!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e946a4!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
}

/* MAIN */
.main,
.content,
main,
#content,
.app-main{
  width:100%!important;
  max-width:none!important;
  padding:28px 28px 58px!important;
  background:transparent!important;
  overflow:visible!important;
}

main > *,
.content > *,
#content > *{
  max-width:none!important;
}

/* RIGHT BAR */
.rightbar,
.aside,
.side-panel,
.app-aside{
  width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  padding:28px 16px 40px 0!important;
}

.rightbar .card,
.aside .card,
.side-panel .card,
.panel-card,
.app-aside .card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(230,234,243,.95)!important;
  border-radius:24px!important;
  box-shadow:0 16px 45px rgba(24,28,48,.07)!important;
  padding:18px!important;
  margin:0 0 16px!important;
  backdrop-filter:blur(10px)!important;
}

.rightbar h2,
.rightbar h3,
.aside h2,
.aside h3,
.side-panel h2,
.side-panel h3{
  color:#111827!important;
  font-size:18px!important;
  line-height:1.1!important;
  letter-spacing:-.35px!important;
  margin:0 0 14px!important;
}

/* typografia */
h1{
  color:#111827!important;
  font-size:34px!important;
  line-height:1.05!important;
  letter-spacing:-.95px!important;
  margin:0 0 8px!important;
}

h2{letter-spacing:-.6px!important}

p{
  color:var(--al14-muted)!important;
}

/* topbar */
.topbar,
.header,
.app-header,
.toolbar-top{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(12px)!important;
  border-bottom:1px solid var(--al14-border)!important;
  box-shadow:0 8px 24px rgba(24,28,48,.035)!important;
}

/* inputy i filtry */
input,
select,
textarea{
  border:1px solid var(--al14-border)!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#111827!important;
  min-height:44px!important;
  box-shadow:none!important;
  outline:none!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(207,46,145,.48)!important;
  box-shadow:0 0 0 4px rgba(207,46,145,.09)!important;
}

.search,
.search-box,
[class*="search"] input{
  border-radius:16px!important;
}

/* przyciski */
button,
.btn,
.albumik-btn{
  border-radius:15px!important;
  font-weight:900!important;
}

button.primary,
.btn-primary,
.albumik-btn,
button[type="submit"],
.add,
[class*="primary"]{
  background:linear-gradient(135deg,var(--al14-pink),var(--al14-purple))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 30px rgba(207,46,145,.22)!important;
}

button.secondary,
.btn-secondary,
.albumik-btn.secondary{
  background:#fff!important;
  color:#111827!important;
  border:1px solid var(--al14-border)!important;
  box-shadow:0 8px 20px rgba(24,28,48,.055)!important;
}

/* karty statystyk */
.card,
.stat-card,
.table-card,
.albumik-card,
section{
  border-radius:24px!important;
}

.card,
.stat-card,
.table-card,
.albumik-card{
  background:rgba(255,255,255,.93)!important;
  border:1px solid var(--al14-border)!important;
  box-shadow:var(--al14-shadow)!important;
}

.stat-card{
  min-height:118px!important;
}

/* katalogi */
.albumik-folders,
.folder-grid,
.folders,
[class*="folder-grid"]{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:14px!important;
}

.albumik-folder,
.folder-card,
[class*="folder-card"]{
  min-height:82px!important;
  border:1px solid var(--al14-border)!important;
  border-radius:18px!important;
  background:#fbfcff!important;
  box-shadow:0 8px 22px rgba(24,28,48,.04)!important;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease!important;
}

.albumik-folder:hover,
.folder-card:hover,
[class*="folder-card"]:hover{
  border-color:rgba(207,46,145,.38)!important;
  background:#fff6fb!important;
  box-shadow:0 18px 38px rgba(24,28,48,.09)!important;
  transform:translateY(-2px)!important;
}

/* siatka zdjęć - bardziej wyraźna zmiana */
.albumik-photo-grid,
.photo-grid,
.gallery-grid,
.media-grid,
[class*="photo-grid"],
[class*="gallery-grid"],
[class*="media-grid"]{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;
  gap:20px!important;
  align-items:start!important;
}

.albumik-media-card,
.photo-card,
.media-card,
.gallery-card,
figure[class*="card"],
[class*="photo-card"],
[class*="media-card"]{
  height:242px!important;
  min-height:242px!important;
  border-radius:23px!important;
  overflow:hidden!important;
  background:#dbe3f0!important;
  border:1px solid rgba(255,255,255,.94)!important;
  box-shadow:0 18px 42px rgba(24,28,48,.15)!important;
  transition:transform .16s ease, box-shadow .16s ease!important;
}

.albumik-media-card:hover,
.photo-card:hover,
.media-card:hover,
.gallery-card:hover,
figure[class*="card"]:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 26px 58px rgba(24,28,48,.23)!important;
}

.albumik-media-card img,
.photo-card img,
.media-card img,
.gallery-card img,
figure[class*="card"] img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.albumik-media-card figcaption,
.photo-card figcaption,
.media-card figcaption,
.gallery-card figcaption,
figure[class*="card"] figcaption{
  font-size:12px!important;
  font-weight:950!important;
  color:#fff!important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))!important;
}

/* tagi */
.albumik-tag-pill,
.albumik-tag-chip,
.albumik-quick-tag,
.tag,
.tag-pill,
[class*="tag-pill"],
[class*="tag-chip"]{
  border-radius:999px!important;
  font-weight:950!important;
  box-shadow:0 8px 18px rgba(24,28,48,.09)!important;
}

/* więcej "widocznych" opcji kolorów, jeśli elementy istnieją */
.albumik-color-grid,
.color-grid,
[class*="color-grid"]{
  display:grid!important;
  grid-template-columns:repeat(8,1fr)!important;
  gap:9px!important;
}

.albumik-color-choice,
.color-choice,
[class*="color-choice"]{
  height:38px!important;
  border-radius:13px!important;
  border:2px solid rgba(255,255,255,.82)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 6px 14px rgba(17,24,39,.08)!important;
}

.albumik-icon-grid,
.icon-grid,
[class*="icon-grid"]{
  display:grid!important;
  grid-template-columns:repeat(8,1fr)!important;
  gap:9px!important;
}

.albumik-icon-choice,
.icon-choice,
[class*="icon-choice"]{
  height:40px!important;
  border-radius:13px!important;
  background:#f5f7fb!important;
  border:1px solid #edf0f7!important;
}

/* viewer */
.albumik-viewer{
  background:rgba(4,8,18,.94)!important;
}

.albumik-viewer-side{
  border-radius:24px!important;
}

/* Login */
.login-shell{
  background:
    radial-gradient(circle at 26% 12%, rgba(207,46,145,.14), transparent 24%),
    linear-gradient(135deg,#f8fbff 0%,#fff7fc 100%)!important;
}

.login-card{
  border-radius:28px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--al14-border)!important;
  box-shadow:0 28px 82px rgba(24,28,48,.13)!important;
}

/* Responsywność */
@media(max-width:1380px){
  .app-shell,
  body > .app-shell,
  #app > .app-shell,
  .app{
    grid-template-columns:240px minmax(0,1fr)!important;
  }

  .rightbar,
  .aside,
  .side-panel,
  .app-aside{
    display:none!important;
  }
}

@media(max-width:900px){
  .app-shell,
  body > .app-shell,
  #app > .app-shell,
  .app{
    grid-template-columns:1fr!important;
  }

  .sidebar,
  aside.sidebar,
  nav.sidebar,
  .app-sidebar{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:auto!important;
  }

  .albumik-photo-grid,
  .photo-grid,
  .gallery-grid,
  .media-grid,
  [class*="photo-grid"],
  [class*="gallery-grid"],
  [class*="media-grid"]{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
    gap:12px!important;
  }

  .albumik-media-card,
  .photo-card,
  .media-card,
  .gallery-card,
  figure[class*="card"],
  [class*="photo-card"],
  [class*="media-card"]{
    height:168px!important;
    min-height:168px!important;
  }
}

/* Albumik 0.1.14 marker */