/* Albumik 0.1.26 PRO MOCKUP POLISH */
/* CSS only. No backend. No JS. No login changes. */

/* Globalny klimat jak na projekcie */
:root {
  --a26-bg-a: #f7f9ff;
  --a26-bg-b: #fff8fd;
  --a26-navy: #071423;
  --a26-navy-2: #0d1b2d;
  --a26-pink: #d62f93;
  --a26-purple: #8b50f4;
  --a26-blue: #2f83ff;
  --a26-green: #22c55e;
  --a26-orange: #f59e0b;
  --a26-border: #e7eaf2;
  --a26-text: #111827;
  --a26-muted: #687188;
  --a26-card: #ffffff;
  --a26-shadow: 0 18px 46px rgba(24, 28, 48, .07);
  --a26-shadow-strong: 0 24px 70px rgba(24, 28, 48, .105);
}

body:not(.login-page) {
  background:
    radial-gradient(circle at 88% 4%, rgba(139, 80, 244, .105), transparent 23%),
    radial-gradient(circle at 42% -10%, rgba(214, 47, 147, .065), transparent 24%),
    linear-gradient(120deg, var(--a26-bg-a) 0%, var(--a26-bg-b) 100%) !important;
  color: var(--a26-text) !important;
}

/* Layout główny */
.app,
.app-shell,
.layout,
.dashboard-layout {
  background: transparent !important;
}

/* Lewy panel */
.sidebar,
aside.sidebar,
[class*="sidebar"] {
  background:
    radial-gradient(circle at 20% 2%, rgba(214, 47, 147, .20), transparent 15%),
    linear-gradient(180deg, #0b1021 0%, #071423 100%) !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 24px 0 64px rgba(7, 20, 35, .18) !important;
}

/* Logo / brand */
.sidebar img,
[class*="sidebar"] img {
  filter: drop-shadow(0 12px 24px rgba(214,47,147,.22));
}

.sidebar h1,
.sidebar .brand,
.sidebar [class*="brand"],
[class*="sidebar"] h1,
[class*="sidebar"] [class*="brand"] {
  letter-spacing: -0.5px !important;
}

/* Elementy menu */
.sidebar button,
.sidebar a,
.sidebar .nav-btn,
.sidebar [role="button"],
[class*="sidebar"] button,
[class*="sidebar"] a,
[class*="sidebar"] .nav-btn,
[class*="sidebar"] [role="button"] {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease !important;
}

.sidebar button:hover,
.sidebar a:hover,
.sidebar .nav-btn:hover,
.sidebar [role="button"]:hover,
[class*="sidebar"] button:hover,
[class*="sidebar"] a:hover,
[class*="sidebar"] .nav-btn:hover,
[class*="sidebar"] [role="button"]:hover {
  transform: translateX(2px) !important;
  background: rgba(255,255,255,.085) !important;
}

.sidebar button.active,
.sidebar a.active,
.sidebar .active,
[class*="sidebar"] button.active,
[class*="sidebar"] a.active,
[class*="sidebar"] .active {
  background: linear-gradient(135deg, var(--a26-pink), #b83bd8) !important;
  color: #fff !important;
  box-shadow: 0 15px 38px rgba(214,47,147,.34) !important;
}

/* Stopka użytkownika w sidebarze */
.sidebar small,
.sidebar .muted,
[class*="sidebar"] small,
[class*="sidebar"] .muted {
  color: rgba(255,255,255,.62) !important;
}

/* Topbar */
header,
.topbar,
.app-topbar,
[class*="topbar"],
[class*="Topbar"] {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(231,234,242,.86) !important;
  box-shadow: 0 8px 28px rgba(24,28,48,.035) !important;
}

header input,
.topbar input,
.app-topbar input,
[class*="topbar"] input,
[class*="Topbar"] input {
  height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid var(--a26-border) !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(24,28,48,.045) !important;
}

/* Główna treść */
main,
.main,
.content,
#content {
  max-width: none !important;
}

main h1,
.main h1,
.content h1,
#content h1 {
  color: var(--a26-text) !important;
  font-size: clamp(28px, 2.1vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1px !important;
  font-weight: 950 !important;
}

main h1 + p,
.main h1 + p,
.content h1 + p,
#content h1 + p {
  color: var(--a26-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Wszystkie główne karty */
.card,
.panel,
.panel-card,
.side-card,
.table-card,
.stat-card,
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"] {
  border-color: rgba(231,234,242,.96) !important;
  box-shadow: var(--a26-shadow) !important;
}

.card:hover,
.panel:hover,
.panel-card:hover,
.stat-card:hover,
[class*="card"]:hover,
[class*="Card"]:hover {
  box-shadow: 0 22px 58px rgba(24,28,48,.085) !important;
}

/* Statystyki na górze */
.stat-card,
[class*="stat-card"],
[class*="StatCard"] {
  min-height: 116px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
}

.stat-card strong,
.stat-card b,
[class*="stat-card"] strong,
[class*="stat-card"] b,
[class*="StatCard"] strong,
[class*="StatCard"] b {
  font-size: 28px !important;
  letter-spacing: -0.8px !important;
}

/* Panel filtrów */
.filters,
.filter-bar,
.search-panel,
[class*="filter"],
[class*="Filter"] {
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(231,234,242,.96) !important;
  box-shadow: var(--a26-shadow) !important;
}

input,
select,
textarea {
  border-color: var(--a26-border) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(214,47,147,.45) !important;
  box-shadow: 0 0 0 4px rgba(214,47,147,.085) !important;
  outline: none !important;
}

/* Przyciski */
button,
.button,
.btn {
  font-weight: 850 !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

button:hover,
.button:hover,
.btn:hover {
  transform: translateY(-1px) !important;
}

button:active,
.button:active,
.btn:active {
  transform: translateY(0) !important;
}

button.primary,
.btn-primary,
.button-primary,
button[type="submit"] {
  background: linear-gradient(135deg, var(--a26-pink), var(--a26-purple)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 32px rgba(214,47,147,.22) !important;
}

/* Siatka zdjęć — bardziej jak projekt */
.photo-grid,
.gallery-grid,
.media-grid,
[class*="photo-grid"],
[class*="gallery-grid"],
[class*="media-grid"],
[class*="PhotoGrid"],
[class*="GalleryGrid"],
[class*="MediaGrid"] {
  gap: 16px !important;
}

.photo-card,
.media-card,
.gallery-card,
[class*="photo-card"],
[class*="media-card"],
[class*="gallery-card"],
[class*="PhotoCard"],
[class*="MediaCard"],
[class*="GalleryCard"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 42px rgba(24,28,48,.135) !important;
  background: #111827 !important;
}

.photo-card img,
.media-card img,
.gallery-card img,
[class*="photo-card"] img,
[class*="media-card"] img,
[class*="gallery-card"] img,
[class*="PhotoCard"] img,
[class*="MediaCard"] img,
[class*="GalleryCard"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-orientation: from-image !important;
  transition: transform .22s ease, filter .22s ease !important;
}

.photo-card:hover img,
.media-card:hover img,
.gallery-card:hover img,
[class*="photo-card"]:hover img,
[class*="media-card"]:hover img,
[class*="gallery-card"]:hover img {
  transform: scale(1.025) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Overlay i napisy na zdjęciach */
.photo-card::after,
.media-card::after,
.gallery-card::after,
[class*="photo-card"]::after,
[class*="media-card"]::after,
[class*="gallery-card"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.54));
}

/* Katalogi */
.folder-card,
.folder-tile,
[class*="folder-card"],
[class*="folder-tile"],
[class*="FolderCard"],
[class*="FolderTile"] {
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(231,234,242,.98) !important;
  box-shadow: 0 10px 28px rgba(24,28,48,.052) !important;
}

.folder-card:hover,
.folder-tile:hover,
[class*="folder-card"]:hover,
[class*="folder-tile"]:hover {
  border-color: rgba(245,158,11,.42) !important;
  box-shadow: 0 18px 42px rgba(24,28,48,.085) !important;
}

/* Tagi */
.tag-pill,
.tag-chip,
[class*="tag-pill"],
[class*="tag-chip"],
[class*="TagPill"],
[class*="TagChip"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(24,28,48,.105) !important;
}

[class*="tag"] svg,
[class*="Tag"] svg,
.tag-pill svg,
.tag-chip svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
}

/* Prawy pasek jak w projekcie */
.rightbar,
.aside,
.side-panel,
[class*="rightbar"],
[class*="Rightbar"],
[class*="side-panel"],
[class*="SidePanel"] {
  padding-right: 20px !important;
}

.rightbar .card,
.aside .card,
.side-panel .card,
[class*="rightbar"] .card,
[class*="Rightbar"] .card,
[class*="side-panel"] .card,
[class*="SidePanel"] .card {
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(231,234,242,.96) !important;
  box-shadow: 0 20px 50px rgba(24,28,48,.075) !important;
}

/* Paginacja */
.pagination button,
[class*="pagination"] button {
  border-radius: 12px !important;
}

.pagination button.active,
[class*="pagination"] button.active {
  background: linear-gradient(135deg, var(--a26-pink), var(--a26-purple)) !important;
  color: #fff !important;
}

/* Poprawka avatarów */
.avatar,
.user-avatar,
[class*="avatar"],
[class*="Avatar"] {
  box-shadow: 0 10px 25px rgba(24,28,48,.12) !important;
}

/* Na mniejszych ekranach niech prawy pasek nie zabiera miejsca */
@media (max-width: 1440px) {
  .rightbar,
  .aside,
  .side-panel,
  [class*="rightbar"],
  [class*="Rightbar"],
  [class*="side-panel"],
  [class*="SidePanel"] {
    display: none !important;
  }
}

/* Albumik 0.1.26 marker */