/*=====================
    Admin Sidebar
    (extracted from style.css, restyled with rounded pill
    active states + tree-connector submenus)

    All sidebar-only styling lives in this file - if you're
    changing how the sidebar looks, this is the only file to touch.
    Font sizes are defined once below as variables so they can be
    tuned in one place instead of hunting through the rules.
=======================*/

:root {
    --sidebar-fs-base: 15px;
    --sidebar-fs-li: 11px;
    --sidebar-fs-item: 0.875rem;
    --sidebar-fs-item-sm: 0.8rem;
    --sidebar-fs-submenu: 0.82rem;
    --sidebar-fs-caret: 13px;
    --sidebar-fs-name: 12px;
    --sidebar-fs-plan: 10px;
    --sidebar-fs-icon-btn: 12px;
    --sidebar-fs-close-btn: 20px;
    /* neutral charcoal with a faint diagonal pinstripe */
    --sidebar-bg: repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 5px
        ),
        #1f1f1f;
    /* submenu tree connector - solid colour so trunk/branch overlaps don't show */
    --sidebar-tree-line: #3d3d3d;
    --sidebar-tree-width: 1.5px;
    --sidebar-tree-radius: 10px;
}

.side-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 210px;
    height: 100vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    background: var(--sidebar-bg);
    box-shadow: 0px 0px 5px rgba(45, 51, 103, 0.15);
    transition: all 0.4s ease;
    font-family: Inter !important;
    font-size: var(--sidebar-fs-base) !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    text-align: left !important;
}

/* Scrollbar styling (only the menu scrolls; logo and plan stay put) */
.side-bar-manu::-webkit-scrollbar {
    width: 1px;
}

.side-bar-manu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.side-bar-manu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

.side-bar-manu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.side-bar-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: transparent;
}

/* profile card (avatar + business name + plan) */
.side-bar-profile {
    justify-content: space-between;
    gap: 10px;
}

.side-bar-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}

.side-bar-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
}

/* Sidebar logo (admin + business): no background box, rounded corners */
.side-bar-profile-avatar--square {
    background: transparent;
    border-radius: 8px;
    object-fit: cover;
    padding: 0;
    overflow: hidden;
}

.side-bar-profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.side-bar-profile-plan {
    font-size: var(--sidebar-fs-plan);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.side-bar-profile-name {
    font-size: var(--sidebar-fs-name);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.side-bar-collapse-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: var(--sidebar-fs-icon-btn) !important;
    transition: background-color 0.15s ease, transform 0.2s ease;
}

.side-bar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.side-bar.active .side-bar-collapse-btn i {
    transform: rotate(180deg);
}

.side-bar-manu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 12px;
}

/* plan widget pinned to the bottom of the sidebar */
.side-bar-plan {
    flex-shrink: 0;
    padding: 0 12px;
}

.side-bar-manu li {
    position: relative;
    font-size: var(--sidebar-fs-li) !important;
    margin: 0.4rem 0;
}

.side-bar-manu li a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    z-index: 2;
    font-size: var(--sidebar-fs-item);
    font-weight: 400 !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

@media (max-width: 1400px) {
    .side-bar-manu li a {
        font-size: var(--sidebar-fs-item-sm);
    }
}

.side-bar-manu li a .sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.side-bar-manu li a i {
    margin-right: 10px;
}

.side-bar-manu .sidebar-icon svg {
    fill: currentColor;
    width: 17px;
    height: 17px;
}

/* tier 1 - hover preview (neutral, not committal) */
.side-bar-manu li:hover > a {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.side-bar-manu li:hover > a .sidebar-icon {
    opacity: 1;
}

/* tier 2 - expanded section (soft accent, parent of an open/relevant submenu) */
.side-bar-manu li.dropdown.active > a {
    background-color: rgba(251, 176, 64, 0.12);
    color: var(--clr-primary);
}

.side-bar-manu li.dropdown.active > a .sidebar-icon {
    opacity: 1;
}

/* tier 3 - current page (solid pill) */
.side-bar-manu li.active:not(.dropdown) > a {
    background-color: var(--clr-primary);
    color: #201415 !important;
}

.side-bar-manu li.active:not(.dropdown) > a .sidebar-icon {
    opacity: 1;
}

/* dropdown caret */
.side-bar-manu li.dropdown > a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    position: absolute;
    right: 14px;
    font-size: var(--sidebar-fs-caret);
    display: block;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease, color 0.15s ease;
}

.side-bar-manu li.dropdown:hover > a::after {
    color: #fff;
}

.side-bar-manu li.dropdown.active > a::after {
    transform: translateY(-50%) rotate(90deg);
    color: var(--clr-primary);
}

/* submenu - tree connector style */
.side-bar-manu li .dropdown-menu {
    margin: 2px 0 6px 33px;
    padding: 0;
    /* drop Bootstrap's dropdown min-width/border so children line up with the parent pill */
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    position: relative;
}

.side-bar-manu li .dropdown-menu li {
    padding-left: 0 !important;
    margin: 0;
}

/* trunk: runs through every child except the last, which ends on its curve */
.side-bar-manu li .dropdown-menu li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -13px;
    width: var(--sidebar-tree-width);
    background: var(--sidebar-tree-line);
}

.side-bar-manu li .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.55);
    padding: 5px 12px;
    border-radius: 8px;
    position: relative;
    font-size: var(--sidebar-fs-submenu);
}

/* branch: rounded elbow from the trunk into each child */
.side-bar-manu li .dropdown-menu li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -13px;
    width: 10px;
    height: 50%;
    border-left: var(--sidebar-tree-width) solid var(--sidebar-tree-line);
    border-bottom: var(--sidebar-tree-width) solid var(--sidebar-tree-line);
    border-bottom-left-radius: var(--sidebar-tree-radius);
    box-sizing: border-box;
    pointer-events: none;
}

/* first branch also covers the gap between the parent item and the list */
.side-bar-manu li .dropdown-menu li:first-child > a::before {
    top: -2px;
    height: calc(50% + 2px);
}

.side-bar-manu li .dropdown-menu li:hover > a,
.side-bar-manu li .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff !important;
}

.side-bar-manu li .dropdown-menu li a.active {
    background-color: var(--clr-primary);
    color: #201415 !important;
}

.side-bar-manu li .dropdown-menu li .dropdown-menu {
    margin-left: 0 !important;
    border: none !important;
}

.side-bar-manu li .dropdown-menu li .dropdown-menu li::before,
.side-bar-manu li .dropdown-menu li .dropdown-menu li a::before {
    display: none;
}

.side-bar .dropdown-menu {
    position: unset;
}

.side-bar li ul {
    display: none;
}

/* keep the group of the current page expanded after reload */
.side-bar li.dropdown.active > ul {
    display: block;
}

/* collapsed (icon-only) state */
.side-bar.active {
    width: 60px !important;
}

.side-bar.active .side-bar-manu .dropdown > a::after {
    opacity: 0;
}

.side-bar.active .sidebar-icon img {
    width: 22px;
}

.side-bar.active ul li a .title,
.side-bar.active .dropdown-menu {
    display: none !important;
}

.side-bar.active .side-bar-manu,
.side-bar.active .side-bar-plan {
    padding-left: 8px;
    padding-right: 8px;
}

.side-bar.active .side-bar-manu li a {
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 auto;
}

.side-bar.active .side-bar-manu li a .sidebar-icon {
    margin-right: 0 !important;
    left: 0 !important;
}

.side-bar.active .side-bar-profile-info {
    justify-content: center;
}

.side-bar.active .side-bar-profile-text {
    display: none !important;
}

.side-bar.active .side-bar-profile {
    justify-content: center;
    padding: 16px 0;
}

.side-bar.active .side-bar-collapse-btn {
    display: flex !important;
    margin: 0 auto;
}

/* flyout submenu shown on hover when the sidebar is collapsed
   (appended to <body> so it is never clipped by .side-bar's overflow) */
.sidebar-flyout {
    position: fixed;
    z-index: 1050;
    min-width: 190px;
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    padding: 8px;
    font-family: Inter, sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.sidebar-flyout.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* compact tooltip variant - a leaf item's label only, no submenu list */
.sidebar-flyout.sidebar-flyout--label {
    min-width: 0;
    padding: 6px 12px;
    pointer-events: none;
}

.sidebar-flyout--label .sidebar-flyout-list li {
    margin: 0;
    color: #fff;
    font-size: var(--sidebar-fs-submenu);
    white-space: nowrap;
}

.sidebar-flyout-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-flyout-list li {
    margin: 1px 0;
}

.sidebar-flyout-list li a {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--sidebar-fs-submenu);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-flyout-list li a:hover,
.sidebar-flyout-list li a.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mobile-only-opener {
    display: none;
}

@media (max-width: 1150px) {
    .mobile-only-opener {
        display: block;
    }

    .side-bar {
        left: 0;
    }

    .side-bar .side-bar-manu .dropdown > a::after {
        opacity: 1 !important;
    }

    .side-bar .sidebar-icon img {
        width: 16px !important;
    }

    .side-bar .side-bar-manu li a .sidebar-icon {
        left: 0 !important;
        margin-right: 10px !important;
    }

    .side-bar.active {
        left: 0;
    }

    .close-btn {
        display: block;
        font-size: var(--sidebar-fs-close-btn);
        cursor: pointer;
    }
}

/* small phones - a fixed-width expanded sidebar would eat half the
   screen, so always render it in the compact icon-only rail here
   instead of hiding it (submenus are reached via the hover/tap flyout) */
@media (max-width: 576px) {
    .side-bar {
        width: 60px !important;
    }

    .side-bar .side-bar-manu,
    .side-bar .side-bar-plan {
        padding-left: 8px;
        padding-right: 8px;
    }

    .side-bar .side-bar-manu li a {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0 auto;
    }

    .side-bar .side-bar-manu li a .sidebar-icon {
        margin-right: 0 !important;
        left: 0 !important;
    }

    .side-bar ul li a .title,
    .side-bar .dropdown-menu {
        display: none !important;
    }

    .side-bar .side-bar-profile-info {
        justify-content: center;
    }

    .side-bar .side-bar-profile-text {
        display: none !important;
    }

    .side-bar .side-bar-profile {
        justify-content: center;
        padding: 16px 0;
    }

    .side-bar .side-bar-manu .dropdown > a::after {
        opacity: 0;
    }

    .side-bar-collapse-btn,
    .side-bar.active .side-bar-collapse-btn,
    .mobile-only-opener {
        display: none !important;
    }
}

/* "New" badge on Add-ons item */
.side-bar-addon,
.side-bar-addon-2,
.side-bar-addon-3 {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--sidebar-fs-plan) !important;
    border-radius: 20px !important;
    padding: 2px 8px;
    color: #201415;
    display: block;
}

@media print {
    .side-bar {
        display: none;
    }
}

/* mobile sidebar opener button (lives in the header, controls the sidebar) */
.sidebar-opner {
    cursor: pointer;
    font-size: var(--sidebar-fs-close-btn);
    color: #000;
    margin-left: 10px;
    margin-right: 15px;
}

/* sidebar plan upgrade widget */
.sidebar-free-plan {
    background-image: url("../images/icons/update-bg.svg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.sidebar-free-plan h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
}

.sidebar-free-plan h5 {
    font-size: var(--sidebar-fs-item-sm);
    font-weight: 500;
    color: white;
}

.sidebar-free-plan a {
    background-color: white;
    color: black !important;
    margin-top: 20px;
    border-radius: 10px;
    padding: 0px 10 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.sidebar-free-plan a:hover {
    border: 1px solid white;
    color: white !important;
}

/* plan card (pinned to sidebar bottom) */
.sidebar-plan-card {
    --plan-accent: var(--clr-primary, #fbb040);
    margin: 10px 0 12px;
    padding: 14px;
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(251, 176, 64, 0.18) 0%, transparent 60%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-plan-card.is-expiring {
    --plan-accent: #ff9f43;
    border-color: rgba(255, 159, 67, 0.45);
}

/* Plan ended but still usable for Subscription::GRACE_DAYS */
.sidebar-plan-card.is-grace {
    --plan-accent: #ff9f43;
    border-color: rgba(255, 159, 67, 0.55);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 159, 67, 0.2) 0%, transparent 60%),
        rgba(255, 255, 255, 0.04);
}

.sidebar-plan-card.is-expired {
    --plan-accent: #ff5b5b;
    border-color: rgba(255, 91, 91, 0.5);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 91, 91, 0.2) 0%, transparent 60%),
        rgba(255, 255, 255, 0.04);
}

.sidebar-plan-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--plan-accent);
    box-shadow: 0 4px 12px rgba(251, 176, 64, 0.25);
}

.sidebar-plan-icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) opacity(0.85);
}

.sidebar-plan-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.side-bar .sidebar-plan-name .sidebar-plan-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-bar .sidebar-plan-name .sidebar-plan-sub {
    font-size: var(--sidebar-fs-plan);
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Compact plan card: click opens #sidebar-plan-modal with the details */
.sidebar-plan-card.is-compact {
    display: block;
    width: 100%;
    margin: 8px 0 12px;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.sidebar-plan-card.is-compact:hover {
    border-color: var(--plan-accent);
    transform: translateY(-1px);
}

.sidebar-plan-card.is-compact .sidebar-plan-name {
    flex: 1;
}

.side-bar .sidebar-plan-name .sidebar-plan-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-bar .sidebar-plan-name .sidebar-plan-sub.is-status {
    font-size: 9px;
    font-weight: 500;
    color: var(--plan-accent) !important;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-plan-arrow {
    flex-shrink: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* Plan details popup */
.plan-detail {
    --plan-accent: var(--clr-primary, #fbb040);
}

.plan-detail.is-expiring,
.plan-detail.is-grace {
    --plan-accent: #ff9f43;
}

.plan-detail.is-expired {
    --plan-accent: #ff5b5b;
}

.plan-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #e9e9e9;
    color: #6c757d;
}

.plan-detail-row span:last-child {
    color: #212529;
    font-weight: 600;
}

.plan-detail-progress {
    height: 6px;
    margin-top: 12px;
    border-radius: 99px;
    background: #f1f1f1;
    overflow: hidden;
}

.plan-detail-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--plan-accent);
}

.plan-detail-days {
    margin-top: 8px;
    color: var(--plan-accent);
    font-weight: 600;
}

.plan-detail-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--plan-accent);
    color: #201415 !important;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.plan-detail-note {
    width: 100%;
    color: var(--plan-accent);
    font-weight: 600;
    text-align: center;
}

.plan-detail-btn:hover {
    filter: brightness(1.08);
}

.sub-plan {
    display: none;
    cursor: pointer;
    margin: 12px auto;
    padding: 9px;
    width: 40px;
    border-radius: 10px;
    background: var(--clr-primary, #fbb040);
}

.sub-plan img {
    display: block;
    width: 100%;
    filter: brightness(0) opacity(0.85);
}

/* Plan widget: full card when the sidebar is expanded, crown icon on the
   60px rail. .active means "collapsed" on desktop but "opened" below 1150px,
   and phones always get the rail. */
.side-bar .lg-sub-plan {
    display: block !important;
}

.side-bar .sub-plan {
    display: none !important;
}

@media (min-width: 1151px) {
    .side-bar.active .lg-sub-plan {
        display: none !important;
    }

    .side-bar.active .sub-plan {
        display: block !important;
    }
}

@media (max-width: 576px) {
    .side-bar .lg-sub-plan {
        display: none !important;
    }

    .side-bar .sub-plan {
        display: block !important;
    }
}