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

/* ------------------------------------------------------------ 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);
}

.site-navbar {
    background-color: var(--bs-main-bg);
}

/* ------------------------------------------------------------ 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;
}

/* ------------------------------------------------------------ maps (Leaflet) */

/* Map needs an explicit height - Leaflet renders nothing in a 0px box */
.area-map {
    height: 520px;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--bs-main-bg);
}

@media (max-width: 991.98px) {
    .area-map {
        height: 360px;
    }
}

/* Leaflet controls on our surfaces in both themes */
.leaflet-container {
    font-family: inherit;
}

.leaflet-bar a {
    background-color: var(--bs-main-bg);
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color);
}

.leaflet-bar a:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

/* Draggable center of a service area (Leaflet divIcon, color set from JS) */
.area-marker span {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: grab;
}

/* Weekday names line up the hour inputs in the availability editor */
.availability-day-name {
    min-width: 9rem;
}

/* Color dot tying a row in the area list to its circle on the map (color set from JS) */
.area-swatch {
    flex: 0 0 auto;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
}

/* ------------------------------------------------------------ city search */

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

.provider-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Results card is a link as a whole (stretched-link) - a hint that it reacts */
.provider-card {
    transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
}

.provider-card:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .provider-card { transition: none; }
    .provider-card:hover { transform: none; }
}

/* The client's pin - red, bigger than the service-area handles */
.search-pin span {
    width: 28px;
    height: 28px;
    background-color: var(--bs-danger);
}

/* The map fills its card exactly - the card's height comes from the choices panel next to it (row stretch),
   so the map is positioned inside the card body instead of sizing it */
.city-search__map-box {
    position: relative;
    min-height: 320px;
}

.city-search__map {
    position: absolute;
    inset: .5rem;
    height: auto;
    border-radius: .75rem;
}

@media (min-width: 992px) {
    .city-search__map-box {
        min-height: 480px;
    }
}

/* ------------------------------------------------------------ provider profile (page + overlay) */

.provider-profile__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Phones: the name shares the row with the rate, so the photo gives it room */
@media (max-width: 575.98px) {
    .provider-profile__avatar {
        width: 56px;
        height: 56px;
    }
}

.provider-profile__map {
    height: 260px;
}

/* Day label as a fixed column - the times wrap beside it, not under it; padding centres it on the first row of buttons */
.provider-profile__slot-day {
    min-width: 5.5rem;
    flex-shrink: 0;
    padding-top: 1px;
}

/* Overlay sits on the gray page like a surface */
#profile_modal .modal-content {
    border-radius: 1rem;
    border: 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;
}

/* Results list refresh uses transitions.dev Panel reveal (07) - a short rise, not the default full-panel 100px */
.results-reveal {
    --panel-translate-y: var(--distance-base);
}

/* 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; }