/*
 * panidosprzatania - own styles on top of the shareyougo stack (see views/partials/head_assets.php):
 * custom Bootstrap 5.3.8 -> transitions.css -> components-bs5.css -> this file.
 *
 * Rules (same as shareyougo):
 * - colors ONLY from Bootstrap variables, so light/dark (`data-bs-theme` on <html>) works without overrides.
 *   Page = --bs-body-bg (gray), surfaces (cards, navbar, sidebar, tables) = --bs-main-bg (white / near-black).
 * - no class that only repeats 1-2 Bootstrap utilities - use the utility in markup instead.
 */

/* ============================================================ nasztuki theme (mockups accepted 2026-10-09)
   Colours only as Bootstrap variables, set here for both themes; the custom Bootstrap build stays untouched. */

:root,
[data-bs-theme=light] {
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-main-bg: #FFFFFF;
    --bs-body-color: #151515;
    --bs-body-color-rgb: 21, 21, 21;
    --bs-emphasis-color: #151515;
    --bs-emphasis-color-rgb: 21, 21, 21;
    --bs-secondary-color: #6B6A66;
    --bs-tertiary-bg: #F1EFEA;
    --bs-border-color: #E6E4DF;
    --bs-link-color: #151515;
    --bs-link-color-rgb: 21, 21, 21;
    --bs-link-hover-color: #B4381F;
    --bs-link-hover-color-rgb: 180, 56, 31;
    --bs-danger: #B4381F;
    --bs-danger-rgb: 180, 56, 31;
    --nsz-accent: #B4381F;
    --nsz-artwork-bg: #f6f6f6;
}

[data-bs-theme=dark] {
    --bs-body-bg: #121212;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-main-bg: #1C1C1B;
    --bs-body-color: #EDEBE6;
    --bs-body-color-rgb: 237, 235, 230;
    --bs-emphasis-color: #F5F3EE;
    --bs-emphasis-color-rgb: 245, 243, 238;
    --bs-secondary-color: #A3A19B;
    --bs-tertiary-bg: #232322;
    --bs-border-color: #2F2E2C;
    --bs-link-color: #EDEBE6;
    --bs-link-color-rgb: 237, 235, 230;
    --bs-link-hover-color: #E8775E;
    --bs-link-hover-color-rgb: 232, 119, 94;
    --bs-danger: #E8775E;
    --bs-danger-rgb: 232, 119, 94;
    --nsz-accent: #E8775E;
    --nsz-artwork-bg: #1F1F1E;
}

/* System fonts like shareyougo (Marcin 2026-10-09): Bootstrap's stack - SF Pro on Apple, Segoe UI on Windows, Roboto on Android.
   A contemporary art gallery: minimal typography, the works do the talking. */

/* Headings and artwork titles: the same face, heavier and tighter */
.font-display,
.site-content h1,
.auth-content h1 {
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Main action = black pill (white in dark mode), secondary = outline pill */
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: 50rem;
    --bs-btn-font-weight: 500;
}

.btn-sm {
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .4rem;
}

/* Large = taller (52px like the mockups), same text size */
.btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-size: 1rem;
}

.btn-primary,
.btn-dark {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-emphasis-color);
    --bs-btn-border-color: var(--bs-emphasis-color);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-secondary-color);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-secondary-color);
    --bs-btn-active-border-color: var(--bs-secondary-color);
    --bs-btn-disabled-color: var(--bs-body-bg);
    --bs-btn-disabled-bg: var(--bs-secondary-color);
    --bs-btn-disabled-border-color: var(--bs-secondary-color);
    --bs-btn-focus-shadow-rgb: var(--bs-emphasis-color-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-emphasis-color);
    --bs-btn-hover-border-color: var(--bs-emphasis-color);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-emphasis-color);
    --bs-btn-active-border-color: var(--bs-emphasis-color);
}

.form-control,
.form-select {
    border-radius: .75rem;
    background-color: var(--bs-main-bg);
}

.form-check-input {
    border-color: var(--bs-secondary-color);
}

.form-check-input:checked {
    background-color: var(--bs-emphasis-color);
    border-color: var(--bs-emphasis-color);
}

.navbar-brand .signet {
  transition: transform .15s;
}

.navbar-brand:hover .signet {
  transform: scale(1.1);
}

.signet {
    width: 32px;
    height: 32px;
    fill: currentColor;
    display: block;
}

.site-navbar .nav-link {
    color: var(--bs-body-color);
}

.site-navbar .nav-link:hover {
    color: var(--nsz-accent);
}

/* ------------------------------------------------------------ login / registration: artwork | form (auth_wrapper.php) */

.auth-layout {
    min-height: 100vh;
}

.auth-art {
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: var(--nsz-artwork-bg);
    overflow: hidden;
}

.auth-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-art__caption {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    max-width: calc(100% - 4rem);
    padding: .6rem .9rem;
    border-radius: .5rem;
    background-color: rgba(21, 21, 21, .55);
    color: #fff;
}

.auth-art__caption:hover {
    color: #fff;
    background-color: rgba(21, 21, 21, .7);
}

.auth-content {
    width: 100%;
    max-width: 420px;
}

.auth-content h1 {
    font-size: 2.5rem;
    line-height: 1.05;
}

/* ------------------------------------------------------------ surfaces */

/* Custom Bootstrap leaves cards on --bs-body-bg, i.e. the same gray as the page.
   Here every card is a surface, like shareyougo's panels. */
.card {
    --bs-card-bg: var(--bs-main-bg);
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-bg: transparent;
}

.modal-content,
.dropdown-menu {
    --bs-modal-bg: var(--bs-main-bg);
    --bs-dropdown-bg: var(--bs-main-bg);
}

/* Stays at the top while scrolling: transparent over the page top, the page colour (slightly see-through) once scrolled */
.site-navbar {
    position: sticky;
    top: var(--impersonate-banner-height, 0px);
    z-index: 1020;
    background-color: transparent;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.site-navbar.is-scrolled {
    background-color: rgba(var(--bs-body-bg-rgb), .9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--bs-border-color);
}

/* ------------------------------------------------------------ tables */

.table-card-container {
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--bs-main-bg);
}

.table-card-container table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--bs-tertiary-bg);
    margin-bottom: 0;
}

.table-card-container thead th {
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.table-card-container td {
    vertical-align: middle;
    padding: 0.85rem 1rem;
}

/* Badge with a leading icon */
.badge i.fa-fw {
    margin-right: .3rem;
}

/* ------------------------------------------------------------ sidebar (admin / provider) */

/* Structure in CSS, not in utility classes on the element - like ALTUM. Links are `.menu-link` from components-bs5.css. */
.admin-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 240px;
    position: sticky;
    top: var(--impersonate-banner-height, 0px);
    height: calc(100vh - var(--impersonate-banner-height, 0px));
    background-color: var(--bs-main-bg);
}

/* Admin logged in as a provider (partials/admin_impersonate_banner.php): one fixed-height line stuck to the top,
   the sticky sidebar starts below it and is shorter by its height */
:root:has(.impersonate-banner) {
    --impersonate-banner-height: 2.25rem;
}

.impersonate-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--impersonate-banner-height);
}

.admin-sidebar-avatar,
.navbar-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.admin-sidebar-avatar {
    width: 36px;
    height: 36px;
}

.navbar-avatar {
    width: 32px;
    height: 32px;
}

/* Account block shares the bottom row with the theme switch - both must be allowed to shrink,
   otherwise a long e-mail pushes the switch outside the sidebar */
.admin-sidebar .dropup,
.sidebar-account-toggle {
    min-width: 0;
}

/* ------------------------------------------------------------ dashboard */

.stat-card .icon-circle,
.feature-icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card .icon-circle {
    width: 48px;
    height: 48px;
}

.icon-circle-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Bootstrap has no min-width utility - needed so long names truncate inside flex rows */
.min-w-0 {
    min-width: 0;
}

/* ------------------------------------------------------------ breadcrumbs */

.custom-breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.custom-breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin: 0 .5rem;
    color: var(--bs-tertiary-color);
}

.custom-breadcrumbs a {
    color: var(--bs-secondary-color);
}

.custom-breadcrumbs a:hover {
    color: var(--bs-emphasis-color);
}

/* ------------------------------------------------------------ public pages */

.feature-icon-circle {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------ light/dark switch (provided by Marcin) */

.mode-switch {
    cursor: pointer;
    margin-bottom: 0;
    padding: 1rem;
    transform: scale(0.8);
    border-radius: 100rem;
    border: none;
    color: var(--bs-body-color);
}

.mode-switch .toggle {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: relative;
    box-shadow: inset 8px -8px 0 0 currentcolor;
    transform: scale(1) rotate(-2deg);
    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s, opacity .2s;
    opacity: .5;
}

.mode-switch:active .toggle {
    opacity: 1;
}

@media (min-width: 576px) {
    .mode-switch:hover .toggle {
        opacity: 1;
    }
}

.mode-switch:active .toggle:after {
    opacity: 1;
}

@media (min-width: 576px) {
    .mode-switch:hover .toggle:after {
        opacity: 1;
    }
}

.mode-switch .toggle.active {
    opacity: 1;
}

.mode-switch .toggle:before {
    content: "";
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color 0.3s ease;
}

.mode-switch .toggle:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: -3px 0 0 -3px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 -23px 0 currentcolor, 0 23px 0 currentcolor, 23px 0 0 currentcolor, -23px 0 0 currentcolor, 15px 15px 0 currentcolor, -15px 15px 0 currentcolor, 15px -15px 0 currentcolor, -15px -15px 0 currentcolor;
    transform: scale(0);
    transition: all 0.3s ease;
    opacity: .4;
}

.mode-switch .toggle.active {
    box-shadow: inset 20px -20px 0 0 currentcolor;
    transform: scale(0.5) rotate(0deg);
    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
}

.mode-switch .toggle.active:before {
    background: currentcolor;
    transition: background-color 0.3s ease 0.1s;
}

.mode-switch .toggle.active:after {
    transform: scale(1);
    transition: transform 0.5s ease 0.15s, opacity .2s;
}

/* The shareyougo Bootstrap build gives every <label> margin-bottom: .375rem - next to a checkbox/switch it pushes the text above the control */
.form-check-label {
    margin-bottom: 0;
}

/* The custom Bootstrap fixes .form-control height at 1.5em + .9rem, but the file button keeps .375rem padding -
   it ended 2.4px above the bottom border. Match the vertical padding to the height. */
.form-control[type="file"] { padding-block: .45rem; }
.form-control::file-selector-button { padding-block: .45rem; margin-block: -.45rem; }

/* ------------------------------------------------------------ artist panel: works (account/artworks) */

.artwork-tile {
    position: relative;
}

.artwork-tile__image {
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
}

.artwork-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artwork-tile__handle {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bs-main-bg);
    color: var(--bs-body-color);
    cursor: grab;
}

.artwork-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--nsz-artwork-bg);
}

.artwork-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-images-sortable] .artwork-thumb {
    cursor: grab;
}

.artwork-thumb__delete {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bs-main-bg);
    color: var(--bs-body-color);
    cursor: pointer;
}

.artwork-thumb.is-marked-for-delete img {
    opacity: .3;
}

.artwork-thumb.is-marked-for-delete .artwork-thumb__delete {
    background-color: var(--nsz-accent);
    color: #fff;
}

/* ------------------------------------------------------------ gallery: artwork grid (partials/artwork_grid.php) */

/* Masonry from the mockups: CSS columns, works in their natural proportions */
.artwork-grid {
    column-count: 4;
    column-gap: 1.75rem;
}

@media (max-width: 1199.98px) {
    .artwork-grid { column-count: 3; }
}

@media (max-width: 767.98px) {
    .artwork-grid { column-count: 2; column-gap: 1rem; }
}

.artwork-card {
    break-inside: avoid;
    margin-bottom: 2rem;
}

.artwork-card__image {
    display: block;
    border-radius: .25rem;
    overflow: hidden;
}

.artwork-card__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .2s ease;
    /* Firefox prints the alt text over the colour placeholder until a lazy image loads - the title is under the card anyway */
    color: transparent;
}

.artwork-card__image:hover img {
    opacity: .9;
}

.artwork-card__title {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-body-color);
    text-decoration: none;
}

.artwork-card__title:hover {
    color: var(--nsz-accent);
}

/* Discipline / technique pills (links, look like the mockup filter buttons) */
.filter-pill {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    background-color: var(--bs-main-bg);
    color: var(--bs-body-color);
    font-size: .9rem;
    text-decoration: none;
}

.filter-pill:hover {
    border-color: var(--bs-body-color);
    color: var(--bs-body-color);
}

.filter-pill.active {
    border-color: var(--bs-emphasis-color);
    background-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
}

.page-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
}

/* ------------------------------------------------------------ artist profile and artwork page (views/artist-profile) */

.contact-box {
    border: 1px solid var(--bs-emphasis-color);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    min-width: 16rem;
}

/* The photo on a light wall-like background with a soft shadow (mockup "Praca") */
.artwork-stage {
    background-color: var(--nsz-artwork-bg);
    border-radius: .375rem;
    /* padding: clamp(1rem, 4vw, 3rem); */
    display: flex;
    justify-content: center;
}

.artwork-stage__image {
    display: block;
    cursor: zoom-in;
}

.artwork-stage__image img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    /* box-shadow: 0 18px 40px rgba(21, 21, 21, .18); */
}

.artwork-thumb-button {
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    overflow: hidden;
}

.artwork-thumb-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artwork-thumb-button.active {
    border: 2px solid var(--bs-emphasis-color);
}

.artwork-details {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .6rem 1rem;
    margin-bottom: 0;
}

.artwork-details dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.artwork-details dd {
    margin: 0;
}

/* "More by the artist" - one row of four */
.artwork-grid--row {
    column-count: 4;
}

@media (max-width: 767.98px) {
    .artwork-grid--row { column-count: 2; }
}

/* Artists list: three works side by side, then the name */
.artist-card__covers {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .375rem;
    aspect-ratio: 3 / 2;
    border-radius: .375rem;
    overflow: hidden;
    background-color: var(--nsz-artwork-bg);
}

.artist-card__covers span:first-child {
    grid-row: span 2;
}

.artist-card__covers span:only-child {
    grid-column: span 2;
}

.artist-card__covers img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.artist-card:hover .font-display {
    color: var(--nsz-accent);
}

/* Dark theme: a checked control is light (emphasis colour), so its tick and the switch knob are dark, not Bootstrap's white */
[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23121212'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23121212'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------ likes, collections (assets/js/actions.js) */

.like-button__on { display: none; }
.like-button.is-liked { color: var(--nsz-accent); border-color: var(--nsz-accent); }
.like-button.is-liked .like-button__on { display: inline-block; }
.like-button.is-liked .like-button__off { display: none; }

.collect-menu {
    min-width: 18rem;
}

/* "Obserwujesz" = the calm state (mockup): light surface and a thin line, not the filled pill */
.btn-outline-secondary[data-follow].active {
    --bs-btn-active-bg: var(--bs-main-bg);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-border-color: var(--bs-border-color);
}

/* The custom Bootstrap fixes .form-control (also -sm) at 1.5em + .9rem + 2px; small selects next to it were 6px lower */
.form-select-sm {
    height: calc(1.5em + .9rem + 2px);
}

/* Section and card headings (Kolekcje, Artyści według miast, Komentarze, card titles): quiet, the works stay the focus */
.h3.font-display {
    font-size: 1.25rem;
}

.display-6.font-display {
    font-size: 1.5rem;
    font-weight: 600;
}

/* ------------------------------------------------------------ events (/wydarzenia) */

.event-card__image {
    aspect-ratio: 3 / 2;
    border-radius: .375rem;
    overflow: hidden;
    background-color: var(--nsz-artwork-bg);
}

.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-card:hover .fw-medium {
    color: var(--nsz-accent);
}

/* ------------------------------------------------------------ "Poznaj artystę" on the home page (index/featured.php) */

.featured-artist__image {
    aspect-ratio: 4 / 3;
    max-height: 72vh;
    border-radius: .375rem;
    overflow: hidden;
}

.featured-artist__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rows with gx-lg-5 pull out by 1.5rem - containers get the same side padding from lg up (no horizontal scroll) */
@media (min-width: 992px) {
    .container-xxl {
        --bs-gutter-x: 3rem;
    }
}