/*
 * 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.
 */

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

:root,
[data-bs-theme=light] {
    --bs-body-bg: #fbfbfc;
    --bs-body-bg-rgb: 251, 251, 252;
    --bs-main-bg: #ffffff;
    --bs-body-color: #16213a;
    --bs-body-color-rgb: 22, 33, 58;
    --bs-emphasis-color: #16213a;
    --bs-emphasis-color-rgb: 22, 33, 58;
    --bs-secondary-color: #5d6780;
    --bs-tertiary-bg: #f1f3f7;
    --bs-border-color: #dfe3ea;
    --bs-primary: #2f6fe4;
    --bs-primary-rgb: 47, 111, 228;
    --bs-link-color: #2f6fe4;
    --bs-link-color-rgb: 47, 111, 228;
    --bs-link-hover-color: #1d4fb3;
    --bs-link-hover-color-rgb: 29, 79, 179;
    --mgn-accent: #2f6fe4;
    --mgn-accent-hover: #1d4fb3;
}

/* Dark: neutral greys of the video wizard mockup (Kreator-wideo.html, Marcin 2026-10-30) - the page darker than the cards */
[data-bs-theme=dark] {
    --bs-body-bg: #16181b;
    --bs-body-bg-rgb: 22, 24, 27;
    --bs-main-bg: #212529;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-emphasis-color: #f8f9fa;
    --bs-emphasis-color-rgb: 248, 249, 250;
    --bs-secondary-color: #adb5bd;
    --bs-tertiary-bg: #2b3035;
    --bs-border-color: #495057;
    --bs-primary: #5b8ff0;
    --bs-primary-rgb: 91, 143, 240;
    --bs-link-color: #7aa5f5;
    --bs-link-color-rgb: 122, 165, 245;
    --bs-link-hover-color: #a3c1f8;
    --bs-link-hover-color-rgb: 163, 193, 248;
    --mgn-accent: #2f6fe4;
    --mgn-accent-hover: #3f78e6;
}

/* Logo: the signet + the name (partials/logo.php) */
.site-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; font-size: 1.2rem; letter-spacing: -.01em; color: var(--bs-emphasis-color); }
.site-logo svg { width: 36px; height: 21px; color: #437EEE; }
/* The signet's own colours (favicon.svg): blue, light grey on dark */
[data-bs-theme=dark] .site-logo svg { color: #DADAE2; }

/* System fonts like shareyougo: Bootstrap's stack - SF Pro on Apple, Segoe UI on Windows, Roboto on Android (Marcin 2026-10-26) */

/* Main action = blue, secondary = outline */
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: .75rem;
    --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 {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mgn-accent);
    --bs-btn-border-color: var(--mgn-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mgn-accent-hover);
    --bs-btn-hover-border-color: var(--mgn-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mgn-accent-hover);
    --bs-btn-active-border-color: var(--mgn-accent-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mgn-accent);
    --bs-btn-disabled-border-color: var(--mgn-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-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);
}

/* A prefix rounded like the field it belongs to - Bootstrap's 6px against the field's 12px, and with
   .has-validation and no error yet its inner corners stayed round too */
.input-group > .input-group-text:first-child {
    border-radius: .75rem 0 0 .75rem;
}

/* The fixed .form-control height (custom Bootstrap) ignores the -lg size - the field stood 2px lower than its button (search) */
.input-group-lg > .form-control {
    height: auto;
}

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

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

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

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

/* ------------------------------------------------------------ login / registration (auth_wrapper.php) */

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

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

.auth-content h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

/* ------------------------------------------------------------ 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), .85);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--bs-border-color);
}

/* Menu (mockup Menu.html, 2026-10-15): pills with a highlight gliding under the pointer, "Galeria" opens a panel that grows
   from the pill (scale + fade, closes quicker than it opens); on phones a burger opens a full-screen sheet */
.site-navbar { --nav-ease: cubic-bezier(.22, 1, .36, 1); }
.site-navbar .navbar-brand { line-height: 0; }
.site-nav { position: relative; align-items: center; gap: .125rem; }

.nav-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border: 0; border-radius: 2rem; background: none; color: var(--bs-secondary-color); font-weight: 500; text-decoration: none; transition: color .15s ease; }
.nav-pill:hover, .nav-pill[aria-expanded="true"], .nav-pill.is-current { color: var(--bs-body-color); }
.nav-pill:focus-visible { outline: 2px solid var(--bs-body-color); outline-offset: 2px; }
.nav-pill__chevron { font-size: .625rem; transition: transform .3s var(--nav-ease); }
.nav-pill[aria-expanded="true"] .nav-pill__chevron { transform: rotate(180deg); }
.site-nav__glide { position: absolute; top: 0; left: 0; height: 2.25rem; border-radius: 2rem; background: rgba(var(--bs-body-color-rgb), .06); opacity: 0; pointer-events: none; transition: transform .35s var(--nav-ease), width .35s var(--nav-ease), opacity .2s ease; }
.site-nav__glide.is-visible { opacity: 1; }
/* .06 of a light colour disappears on the dark page */
[data-bs-theme="dark"] .site-nav__glide { background: rgba(var(--bs-body-color-rgb), .14); }
/* The first appearance is in place - it slides only from one pill to another */
.site-nav__glide.no-slide { transition: opacity .2s ease; }

.site-nav__drop { position: relative; }
.nav-panel { position: absolute; top: calc(100% + .5rem); left: -.5rem; min-width: 18rem; padding: .375rem; border-radius: 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .12);
    transform-origin: top left; transform: scale(.96) translateY(-.25rem); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .15s var(--nav-ease), opacity .15s ease, visibility 0s linear .15s; }
.nav-panel.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .25s var(--nav-ease), opacity .2s ease, visibility 0s; }
[data-bs-theme="dark"] .nav-panel { background: var(--bs-tertiary-bg); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); }
.nav-panel__item { display: block; padding: .625rem .75rem; border-radius: .625rem; color: var(--bs-body-color); text-decoration: none; opacity: 0; transform: translateY(.25rem); transition: background-color .15s ease, opacity .2s ease, transform .3s var(--nav-ease); }
.nav-panel__item:hover, .nav-panel__item:focus-visible { background: rgba(var(--bs-body-color-rgb), .05); outline: none; }
/* The place we are in: tinted like hover (no dot - Marcin 2026-10-15) */
.nav-panel__item.is-current { background: rgba(var(--bs-body-color-rgb), .07); }
.nav-panel__name { display: block; font-weight: 500; }
.nav-panel__hint { display: block; font-size: .8125rem; color: var(--bs-secondary-color); }
.nav-panel__divider { height: 1px; margin: .375rem .75rem; background: var(--bs-border-color); }
/* Items arrive a beat after the panel, top to bottom */
.nav-panel.is-open .nav-panel__item { opacity: 1; transform: none; }
.nav-panel.is-open .nav-panel__item:nth-child(2) { transition-delay: 0s, 25ms, 25ms; }
.nav-panel.is-open .nav-panel__item:nth-child(3) { transition-delay: 0s, 50ms, 50ms; }
.nav-panel.is-open .nav-panel__item:nth-child(4) { transition-delay: 0s, 75ms, 75ms; }
.nav-panel.is-open .nav-panel__item:nth-child(6) { transition-delay: 0s, 100ms, 100ms; }

.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: none; color: var(--bs-body-color); }
.nav-icon:hover { background: rgba(var(--bs-body-color-rgb), .06); color: var(--bs-body-color); }

/* Two lines meet in the middle and cross into ✕ */
.nav-burger { position: relative; }
.nav-burger__line { position: absolute; left: 50%; width: 1.125rem; height: 1.5px; margin-left: -.5625rem; border-radius: 2px; background: currentColor; transition: top .3s var(--nav-ease), transform .3s var(--nav-ease) .05s; }
.nav-burger__line--top { top: calc(50% - 3.5px); }
.nav-burger__line--bottom { top: calc(50% + 2.5px); }
.nav-burger[aria-expanded="true"] .nav-burger__line { top: calc(50% - .75px); transition: top .3s var(--nav-ease), transform .3s var(--nav-ease); }
.nav-burger[aria-expanded="true"] .nav-burger__line--top { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__line--bottom { transform: rotate(-45deg); }

/* Phone sheet under the header: the page blurs away, links rise in one after another (blur → sharp); closing is one quiet fade */
.nav-sheet { --nav-ease: cubic-bezier(.22, 1, .36, 1); position: fixed; inset: 0; z-index: 1015; display: flex; flex-direction: column; padding: 5.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--bs-body-bg-rgb), .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--nav-ease), visibility 0s linear .25s; }
.nav-sheet.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--nav-ease), visibility 0s; }
/* A low screen (phone on its side) scrolls the sheet instead of pushing the bottom over the links */
.nav-sheet { overflow-y: auto; }
.nav-sheet__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; flex-shrink: 0; }
.nav-sheet__foot { padding-top: 2rem; }
.nav-sheet__link { font-size: 2.25rem; line-height: 1.1; color: var(--bs-body-color); text-decoration: none; }
.nav-sheet__sub { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.25rem; }
.nav-sheet__sub a { padding: .375rem .875rem; border-radius: 2rem; background: rgba(var(--bs-body-color-rgb), .06); color: var(--bs-body-color); text-decoration: none; font-weight: 500; }
.nav-sheet__foot { margin-top: auto; display: grid; gap: .75rem; }
/* The place we are in: the other big links step back, the discipline pill fills */
.nav-sheet__body:has(.is-current) .nav-sheet__link:not(.is-current) { color: var(--bs-secondary-color); }
.nav-sheet__sub a.is-current { background: var(--bs-body-color); color: var(--bs-body-bg); }
.nav-sheet__link, .nav-sheet__sub, .nav-sheet__foot { opacity: 0; transform: translateY(.75rem); filter: blur(4px); transition: opacity .2s ease, transform 0s linear .25s, filter 0s linear .25s; }
.nav-sheet.is-open .nav-sheet__link, .nav-sheet.is-open .nav-sheet__sub, .nav-sheet.is-open .nav-sheet__foot { opacity: 1; transform: none; filter: none;
    transition: opacity .4s var(--nav-ease), transform .5s var(--nav-ease), filter .4s var(--nav-ease); transition-delay: calc(80ms + var(--i) * 45ms); }
body.nav-sheet-open { overflow: hidden; }
body.nav-sheet-open .site-navbar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Theme as three segments, the chosen one lifted */
.theme-segments { display: grid; grid-template-columns: repeat(3, 1fr); padding: .25rem; border-radius: 2rem; background: rgba(var(--bs-body-color-rgb), .06); }
.theme-segments button { height: 2.25rem; border: 0; border-radius: 2rem; background: none; color: var(--bs-secondary-color); font-size: .875rem; font-weight: 500; transition: background-color .2s ease, color .2s ease; }
.theme-segments button.is-active { background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

@media (prefers-reduced-motion: reduce) {
    .site-nav__glide, .nav-panel, .nav-panel__item, .nav-burger__line, .nav-sheet, .nav-sheet__link, .nav-sheet__sub, .nav-sheet__foot { transition: none !important; }
}

/* ------------------------------------------------------------ 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%;
    object-fit: cover;
    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;
}

/* Catalog table on the dashboard (account/index.php): a table on wide screens, blocks with the column names below 768 px */
.site-thumb { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 80px; height: 50px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-weight: 600; object-fit: cover; object-position: top; }
/* Payments with their invoices (account/partials/payments_table.php): the card's colour, no line under the last row;
   on a phone the order on top, the amount and the documents in one row below */
.payments-table > :not(caption) > * > * { padding: .875rem 1rem; background: transparent; }
.payments-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 767.98px) {
    .payments-table thead { display: none; }
    .payments-table, .payments-table tbody { display: block; }
    .payments-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--bs-border-color); }
    .payments-table tbody tr:last-child { border-bottom: 0; }
    .payments-table > :not(caption) > * > * { padding: 0; border: 0; }
    .payments-table td:first-child { grid-column: 1 / -1; }
}
.catalog-table > :not(caption) > * > * { padding: .875rem 1rem; background: transparent; }
.catalog-table tbody tr:last-child > * { border-bottom: 0; }
.catalog-table th { white-space: nowrap; vertical-align: bottom; }
@media (max-width: 767.98px) {
    .catalog-table thead { display: none; }
    .catalog-table, .catalog-table tbody, .catalog-table tr { display: block; }
    .catalog-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--bs-border-color); }
    .catalog-table tbody tr:last-child { border-bottom: 0; }
    .catalog-table > :not(caption) > * > * { display: block; padding: 0; border: 0; text-align: left !important; }
    .catalog-table .catalog-site, .catalog-table .catalog-action, .catalog-table td[data-label]:nth-child(5) { grid-column: 1 / -1; }
    .catalog-table td[data-label]::before { content: attr(data-label); display: block; white-space: normal; font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); }
}

/* ------------------------------------------------------------ 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; }
/* Firefox on a retina screen still left a hairline under the button (rounding, 2026-10-15): its own colour 2px above and
   below fills it - the field's overflow: hidden clips the rest at the border */
.form-control::file-selector-button { box-shadow: 0 2px 0 var(--bs-tertiary-bg), 0 -2px 0 var(--bs-tertiary-bg); }
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { box-shadow: 0 2px 0 var(--bs-secondary-bg), 0 -2px 0 var(--bs-secondary-bg); }

/* ---------- Panel with the left menu (account_wrapper.php, mockup Panel-artysty.html, 2026-10-13) ---------- */
.account-layout { display: flex; min-height: 100vh; }
.account-sidebar { --bs-offcanvas-width: min(86vw, 320px); }
/* Like the hereyouare sidebar: logo on top, only the links scroll, the person at the bottom */
.account-sidebar__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.account-sidebar__top { display: flex; align-items: center; gap: .5rem; padding: 1.25rem 1.25rem 1rem; }

.account-sidebar__links { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 .75rem .75rem; scrollbar-width: none; }
.account-sidebar__links:hover { scrollbar-width: thin; }
.account-sidebar__links::-webkit-scrollbar { width: 0; }
.account-sidebar__links:hover::-webkit-scrollbar { width: 6px; }
.account-sidebar__links::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 6px; }
.account-sidebar__footer { border-top: 1px solid var(--bs-border-color-translucent); padding: .6rem .75rem; }
.account-sidebar__who { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .8rem; background: transparent; color: var(--bs-body-color); }
.account-sidebar__who:hover, .account-sidebar__who[aria-expanded="true"], .account-sidebar__who.is-active { background: var(--bs-tertiary-bg); }
.account-sidebar__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bs-tertiary-bg); }
.account-sidebar__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; background: var(--bs-secondary-color); }
.account-sidebar__dot--1 { background: #e8a400; }
.account-sidebar__dot--2 { background: #3bb273; }
.account-sidebar__dot--3, .account-sidebar__dot--4 { background: #e03131; }
.account-sidebar__group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: 1rem .6rem .35rem; }
.account-nav { display: grid; gap: 2px; }
.account-nav__link { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: .8rem; font-size: .9375rem; color: var(--bs-body-color); text-decoration: none; transition: background .2s; }
.account-nav__link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
/* The chosen item filled with its own colour, no border */
.account-nav__link.is-active, .account-nav__link.is-active:hover { background: color-mix(in srgb, var(--tile-color) 14%, var(--bs-body-bg)); color: var(--bs-emphasis-color); font-weight: 600; }
.account-nav__link.is-active .tile { background: var(--tile-color); color: #fff; }
/* Coloured icon tile - the menu, the action buttons and the profile sections share the colours */
.tile { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; color: var(--tile-color); background: color-mix(in srgb, var(--tile-color) 15%, transparent); }
@media (min-width: 992px) {
    /* A card standing off the edges of the window */
    .account-layout { padding-left: 1.25rem; }
    .account-sidebar { position: sticky; top: 1.25rem; align-self: flex-start; width: 264px; height: calc(100vh - 2.5rem); margin: 1.25rem 0; flex-shrink: 0; border: 1px solid var(--bs-border-color-translucent); border-radius: 1.1rem; background: var(--bs-body-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .04); overflow: hidden; }
}
.account-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.account-main > footer { margin-top: auto !important; }
.account-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color-translucent); }

.account-topbar__toggle { width: 40px; height: 40px; padding: 0; border-radius: .75rem; background: var(--bs-tertiary-bg); border: 0; }
.account-content { max-width: 760px; width: 100%; margin-inline: auto; padding: 1.5rem 1rem 4rem; }
.account-content--wide { max-width: 1120px; }
@media (min-width: 992px) {
    .account-content { padding: 2.25rem 2.5rem 5rem; }
}
.account-title { font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.08; letter-spacing: -.01em; margin-bottom: .4rem; }
.account-lead { color: var(--bs-secondary-color); margin-bottom: 1.5rem; }
/* Action buttons like the hereyouare dashboard: tinted background, the icon in a coloured square, square-ish corners */
.btn-tile { --tile-color: var(--bs-emphasis-color); display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem .55rem .6rem; border: 0; border-radius: .75rem; font-weight: 600; color: color-mix(in srgb, var(--tile-color) 78%, #000); background: color-mix(in srgb, var(--tile-color) 13%, var(--bs-body-bg)); }
.btn-tile:hover, .btn-tile:focus-visible { color: color-mix(in srgb, var(--tile-color) 78%, #000); background: color-mix(in srgb, var(--tile-color) 21%, var(--bs-body-bg)); }
.btn-tile .tile { width: 26px; height: 26px; border-radius: 8px; color: #fff; background: var(--tile-color); font-size: .75rem; }
[data-bs-theme="dark"] .btn-tile, [data-bs-theme="dark"] .btn-tile:hover { color: color-mix(in srgb, var(--tile-color) 60%, #fff); }
.btn-tile.btn-sm { padding: .35rem .8rem .35rem .4rem; font-size: .875rem; }
.btn-tile.btn-sm .tile { width: 22px; height: 22px; }
/* The profile address under the greeting - big, with a copy button */
.profile-address { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 600; color: var(--bs-emphasis-color); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.profile-address:hover { color: var(--bs-emphasis-color); }
.copy-button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: .6rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
/* Statistics cards: number, name, what exactly is counted */
.stat-card { height: 100%; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; padding: .9rem 1rem; background-color: var(--bs-card-bg, var(--bs-body-bg)); }
.stat-card__number { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.stat-card__name { font-weight: 600; font-size: .9375rem; }
.stat-card__help { font-size: .8125rem; line-height: 1.4; color: var(--bs-secondary-color); }
.status-card { display: flex; gap: .9rem; align-items: flex-start; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; padding: 1rem 1.1rem; }
.status-card.alert { border-color: var(--bs-alert-border-color); }
.status-card .tile { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
/* "Ostatnie 30 dni" | 30 dni, od początku | Statystyki → - the title on its own line on a phone */
.stats-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.stats-head h2 { flex-basis: 100%; }
@media (min-width: 576px) {
    .stats-head h2 { flex-basis: auto; margin-right: auto !important; }
    .stats-head > a { margin-left: 0 !important; }
}