:root {
    --sidebar-width: 286px;
}

/* Role-aware navigation */
.sidebar {
    padding: 20px 14px 16px;
}

.brand-row {
    margin: 2px 8px 20px;
}

.nav-stack {
    gap: 6px;
    padding: 0 3px 10px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 0, 79, .75) rgba(255, 255, 255, .05);
}

.nav-stack::-webkit-scrollbar {
    width: 5px;
}

.nav-stack::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .045);
}

.nav-stack::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 0, 79, .78);
}

.nav-stack a.nav-command {
    position: relative;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(232, 229, 224, .76);
    background: transparent;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.nav-stack a.nav-command:hover {
    border-color: rgba(255, 255, 255, .09);
    color: #fff;
    background: rgba(255, 255, 255, .055);
    transform: translateX(2px);
}

.nav-command-index {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    color: rgba(255, 255, 255, .42);
    font-family: "Barlow Condensed", "Barlow", sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.nav-command-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.nav-command-copy strong {
    overflow: hidden;
    color: inherit;
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    line-height: 1.12;
    font-weight: 800;
    text-overflow: ellipsis;
}

.nav-command-copy small {
    overflow: hidden;
    color: rgba(232, 229, 224, .42);
    font-family: "Barlow", sans-serif;
    font-size: 9px;
    line-height: 1.15;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-stack a.nav-command.active {
    border-color: rgba(255, 0, 79, .55);
    color: #fff;
    background:
        linear-gradient(90deg, rgba(255, 0, 79, .24), rgba(255, 0, 79, .055) 70%, transparent),
        #151519;
    box-shadow: inset 3px 0 0 #ff004f, 0 8px 22px rgba(0, 0, 0, .16);
}

.nav-stack a.nav-command.active .nav-command-index {
    border-color: #ff004f;
    color: #fff;
    background: #ff004f;
}

.nav-stack a.nav-command.active .nav-command-copy small {
    color: rgba(255, 255, 255, .66);
}

.nav-notification-badge {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 7px;
    background: #ff004f;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.nav-role-identity {
    --role-accent: #ff004f;
    position: relative;
    display: grid;
    gap: 3px;
    margin: 12px 2px 2px;
    padding: 12px 13px 12px 16px;
    border: 1px solid color-mix(in srgb, var(--role-accent) 38%, transparent);
    border-radius: 11px;
    background: linear-gradient(108deg, color-mix(in srgb, var(--role-accent) 17%, transparent), transparent 68%);
    overflow: hidden;
}

.nav-role-identity::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--role-accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--role-accent) 55%, transparent);
}

.nav-role-identity span {
    color: var(--role-accent);
    font-family: "Barlow", sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}

.nav-role-identity strong {
    color: #fff;
    font-family: "Barlow Condensed", "Barlow", sans-serif;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.01em;
}

.nav-role-identity--admin { --role-accent: #ff004f; }
.nav-role-identity--fitness { --role-accent: #9b5cff; }
.nav-role-identity--trainer { --role-accent: #24c98a; }
.nav-role-identity--reception { --role-accent: #ffb648; }
.nav-role-identity--member { --role-accent: #42a5ff; }

.nav-role-group {
    --nav-accent: #ff004f;
    --nav-tint: rgba(255, 0, 79, .15);
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.nav-role-group--admin { --nav-accent: #ff004f; --nav-tint: rgba(255, 0, 79, .17); }
.nav-role-group--social { --nav-accent: #ff7350; --nav-tint: rgba(255, 115, 80, .16); }
.nav-role-group--fitness { --nav-accent: #9b5cff; --nav-tint: rgba(155, 92, 255, .17); }
.nav-role-group--system { --nav-accent: #36b8ff; --nav-tint: rgba(54, 184, 255, .15); }
.nav-role-group--trainer { --nav-accent: #24c98a; --nav-tint: rgba(36, 201, 138, .15); }
.nav-role-group--reception { --nav-accent: #ffb648; --nav-tint: rgba(255, 182, 72, .15); }
.nav-role-group--member { --nav-accent: #42a5ff; --nav-tint: rgba(66, 165, 255, .15); }

.nav-role-group .nav-section-label {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 14px 9px 4px;
    padding-left: 11px;
    color: var(--nav-accent);
    font-family: "Barlow", sans-serif;
}

.nav-role-group .nav-section-label::before {
    content: "";
    position: absolute;
    inset: 1px auto 1px 0;
    width: 3px;
    border-radius: 2px;
    background: var(--nav-accent);
}

.nav-role-group .nav-section-label span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.nav-role-group .nav-section-label small {
    color: rgba(232, 229, 224, .36);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.nav-role-group .nav-command.active {
    border-color: color-mix(in srgb, var(--nav-accent) 52%, transparent) !important;
    background:
        linear-gradient(90deg, var(--nav-tint), color-mix(in srgb, var(--nav-accent) 4%, transparent) 72%, transparent),
        #151519 !important;
    box-shadow: inset 3px 0 0 var(--nav-accent), 0 8px 22px rgba(0, 0, 0, .16) !important;
}

.nav-role-group .nav-command.active .nav-command-index {
    border-color: var(--nav-accent) !important;
    background: var(--nav-accent) !important;
}

.sidebar-footer {
    margin-top: 8px;
    padding: 13px 4px 0;
}

/* Administrative class schedule: actions must remain readable */
.admin-schedule-row {
    position: relative;
    border: 1px solid rgba(11, 11, 13, .13);
    background: #f8f6f3;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .72) inset;
}

.admin-schedule-row:hover {
    border-color: rgba(255, 0, 79, .3);
    background: #fff;
}

.admin-schedule-row.cancelled-row {
    border-color: rgba(255, 0, 79, .48);
    background:
        linear-gradient(90deg, rgba(255, 0, 79, .12), rgba(255, 0, 79, .025) 35%, transparent 66%),
        #fff;
    box-shadow: inset 4px 0 0 #ff004f;
}

.admin-schedule-row.unpublished-row {
    opacity: 1;
    border-style: dashed;
    background: #eeebe7;
}

.admin-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(86px, 1fr));
    gap: 7px;
    min-width: 202px;
}

.admin-row-actions .text-button {
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(11, 11, 13, .18);
    border-radius: 8px;
    background: #fff;
    color: #151519;
    font-family: "Barlow", sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.admin-row-actions .text-button:hover {
    border-color: #ff004f;
    background: rgba(255, 0, 79, .07);
    color: #b60039;
    transform: translateY(-1px);
}

.admin-row-actions .text-button.danger-text {
    border-color: #ff004f;
    background: #ff004f;
    color: #fff;
}

.admin-row-actions .text-button.danger-text:hover {
    border-color: #cf003f;
    background: #cf003f;
    color: #fff;
}

/* Fitness Manager receives its own purple operational language */
.fitness-ops-root {
    --fitness-role-accent: #8f4dff;
    --fitness-role-accent-dark: #6d2ed3;
}

.fitness-ops-root .eyebrow,
.fitness-ops-root .toolbar-label {
    color: var(--fitness-role-accent);
}

.fitness-ops-root .button.primary,
.fitness-ops-root button.button.primary {
    border-color: var(--fitness-role-accent);
    background: var(--fitness-role-accent);
    color: #fff;
}

.fitness-ops-root .button.primary:hover,
.fitness-ops-root button.button.primary:hover {
    border-color: var(--fitness-role-accent-dark);
    background: var(--fitness-role-accent-dark);
}

.fitness-ops-root .button.subtle,
.fitness-ops-root button.button.subtle {
    border-color: rgba(86, 46, 148, .28);
    background: #fff;
    color: #251535;
}

.fitness-ops-root .button.subtle:hover,
.fitness-ops-root button.button.subtle:hover {
    border-color: var(--fitness-role-accent);
    background: rgba(143, 77, 255, .08);
    color: #5c20b6;
}

.fitness-ops-class-row {
    border-color: rgba(45, 25, 65, .15);
    background: #faf8fc;
}

.fitness-ops-class-row:hover {
    border-color: rgba(143, 77, 255, .42);
    background: #fff;
}

.fitness-ops-class-row.is-suspended {
    border-color: rgba(143, 77, 255, .5);
    background:
        linear-gradient(90deg, rgba(143, 77, 255, .12), transparent 48%),
        #fff;
    box-shadow: inset 4px 0 0 var(--fitness-role-accent);
}

.fitness-ops-class-row .fitness-ops-actions b {
    color: #6d2ed3;
    background: rgba(143, 77, 255, .12);
}

/* Opening hours: compact editorial card with the complete week */
.landing-hero-hours {
    width: min(390px, 100%);
    min-width: 350px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(17, 17, 20, .18);
    border-radius: 18px;
    background: #111114;
    color: #fff;
    box-shadow: 0 18px 44px rgba(17, 17, 20, .12);
    overflow: hidden;
}

.landing-hero-hours__today {
    display: grid;
    gap: 4px;
    padding: 12px 15px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(108deg, rgba(255, 0, 79, .19), rgba(255, 0, 79, .025) 58%, transparent);
}

.landing-hero-hours__today > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff5a8d;
    font-family: "Barlow", sans-serif;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .15em;
}

.landing-hero-hours__today i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff004f;
    box-shadow: 0 0 0 4px rgba(255, 0, 79, .13), 0 0 18px rgba(255, 0, 79, .55);
}

.landing-hero-hours.is-open .landing-hero-hours__today > span {
    color: #6ce1ae;
}

.landing-hero-hours.is-open .landing-hero-hours__today i {
    background: #20c985;
    box-shadow: 0 0 0 4px rgba(32, 201, 133, .14), 0 0 18px rgba(32, 201, 133, .5);
}

.landing-hero-hours__today strong {
    color: #fff;
    font-family: "Barlow Condensed", "Barlow", sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.landing-hero-hours__week {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-hero-hours__week > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    border-right: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.landing-hero-hours__week > div:nth-child(2n) {
    border-right: 0;
}

.landing-hero-hours__week > div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.landing-hero-hours__week span {
    color: rgba(255, 255, 255, .44);
    font-family: "Barlow", sans-serif;
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .13em;
}

.landing-hero-hours__week b {
    overflow: hidden;
    color: rgba(255, 255, 255, .9);
    font-family: "Barlow", sans-serif;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Instagram is no longer hidden in the footer */
.landing-floating-instagram,
.landing-floating-whatsapp {
    right: max(22px, env(safe-area-inset-right)) !important;
}

.landing-floating-whatsapp {
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
}

.landing-floating-instagram {
    position: fixed;
    z-index: 120;
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 66px);
    display: inline-flex;
    min-width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 184, 72, .82), transparent 24%),
        linear-gradient(135deg, #7f35d5 0%, #e1306c 58%, #ff6a3d 100%);
    color: #fff;
    box-shadow: 0 15px 36px rgba(76, 24, 102, .3);
    font-family: "Barlow", sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform .16s ease, box-shadow .16s ease;
}

.landing-floating-instagram:hover {
    transform: translateY(-2px);
    box-shadow: 0 19px 42px rgba(76, 24, 102, .38);
}

.landing-floating-instagram svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}

.landing-floating-instagram .instagram-camera-dot {
    fill: currentColor;
    stroke: none;
}

@media (max-width: 1180px) {
    :root {
        --sidebar-width: 270px;
    }

    .nav-command-copy small {
        white-space: normal;
    }

    .admin-row-actions {
        min-width: 180px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .landing-hero-hours {
        min-width: 310px;
    }
}

@media (max-width: 760px) {
    .landing-hero-hours {
        width: 100%;
        min-width: 0;
        border-radius: 15px;
    }

    .landing-hero-hours__week b {
        white-space: normal;
    }

    .landing-floating-instagram,
    .landing-floating-whatsapp {
        right: max(12px, env(safe-area-inset-right)) !important;
    }

    .landing-floating-whatsapp {
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    .landing-floating-instagram {
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px);
        min-width: 50px;
        height: 50px;
        padding: 0 13px;
        border-radius: 13px;
    }

    .landing-floating-instagram span {
        display: none;
    }

    .admin-row-actions {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-stack a.nav-command,
    .admin-row-actions .text-button,
    .landing-floating-instagram {
        transition: none;
    }
}