/* ── Shell layout (admin-panel sidebar) ─────────────────────────────────────
 * Sits on top of app.css. App.css styles for cards / inputs / tags / modals
 * are reused unchanged inside .shell-main. Only the page chrome (sidebar +
 * mobile bar) is defined here, plus a small set of overrides for elements
 * that app.css scoped to the old top-header layout.
 */

:root {
    --sidebar-width: 240px;
    --brand: #6b998b;
    --brand-soft: rgba(107, 153, 139, 0.08);
    --header-bg: #1a1a1a;
    --sidebar-bg: #2a2a2a;
    --sidebar-fg: #ffffff;
    --sidebar-fg-dim: rgba(255, 255, 255, 0.55);
}

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f7f7f7;
}

.shell-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ── Desktop top header ────────────────────────────────────────────────── */
.shell-header {
    background: var(--header-bg);
    color: var(--sidebar-fg);
    padding: 13px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 60;
}

.shell-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}

.shell-header-logo {
    height: 24px;
    width: auto;
    display: block;
}

.shell-header-name {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}

.shell-header-app {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    padding-left: 14px;
    position: relative;
}

.shell-header-app::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--brand);
    border-radius: 999px;
}

.shell-header-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.shell-header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.shell-header-user-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 50px;
    align-self: flex-start;
    height: calc(100vh - 50px);
    padding: 20px 0;
    z-index: 50;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 14px;
}

.sidebar-logo {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    padding-left: 12px;
    position: relative;
}

.sidebar-brand-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: var(--brand);
    border-radius: 999px;
}

.sidebar-brand-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sidebar-fg);
}

.sidebar-brand-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Nav items */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 0 16px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 18px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}

.sidebar-nav-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: transparent;
    border-radius: 999px;
    transition: background 0.15s;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.sidebar-nav-item.is-active {
    background: var(--brand-soft);
    color: #ffffff;
}

.sidebar-nav-item.is-active::before {
    background: var(--brand);
}

.sidebar-nav-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sidebar-nav-item.is-disabled:hover {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
}

.sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.sidebar-nav-icon svg {
    width: 18px;
    height: 18px;
}

.sidebar-nav-label {
    flex: 1;
}

/* Footer (user + logout) */
.sidebar-footer {
    padding: 14px 18px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s;
}

.sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-version {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-top: 4px;
}

/* ── Main content area ─────────────────────────────────────────────────── */
.shell-main {
    flex: 1;
    min-width: 0;
    /* app.css gives <main> max-width:1280px; margin:28px auto; padding:0 20px;
       Those are still active inside .shell-main. */
}

/* ── Mobile top bar (shown only <768px) ───────────────────────────────── */
.shell-mobile-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--header-bg);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 40;
}

.shell-mobile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.shell-mobile-logo {
    height: 20px;
    width: auto;
}

.shell-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 45;
}

[x-cloak] { display: none !important; }

/* ── Tabs (used by the orders module action panel) ─────────────────────── */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    margin-top: -2px;
}

.tabs-tab {
    background: transparent;
    color: #777777;
    border: 1px solid #e8e8e8;
    padding: 7px 17px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 999px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tabs-tab:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--brand);
    border-color: #d8d8d8;
}

.tabs-tab.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: #e8e8e8;
}

.tab-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Wrap around all tab panels — JS sets an explicit height on tab swap so the
   container animates from the old tab's height to the new tab's height with
   the same curve used by the card collapse animation. */
.tabs-content-wrap {
    position: relative;
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.45, 0, 0.55, 1);
}

/* Fade-in for tab swaps (enter only — old panel disappears instantly
   so the new one fades in without layout overlap). Duration is driven by
   the --tab-fade-duration custom property set on .tabs-content-wrap by JS
   so it matches the dynamic height-transition duration of each swap. */
.tab-fade-enter {
    transition: opacity var(--tab-fade-duration, 0.55s) ease;
}
.tab-fade-enter-start { opacity: 0; }
.tab-fade-enter-end   { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .shell-header {
        display: none;
    }

    .shell-mobile-bar {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        height: 100vh;
        align-self: auto;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .shell-backdrop {
        display: block;
    }

    .shell-main {
        width: 100%;
    }
}

/* The original app.css used <header>; we no longer render one in the shell
 * pages, but app.css' .btn-hamburger / .hamburger-icon styles are reused for
 * the mobile bar. They were defined with `header` selectors out of scope, so
 * we re-declare hamburger here defensively (small subset). */
.shell-mobile-bar .btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: none;
}
.shell-mobile-bar .btn-hamburger:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    box-shadow: none;
}
.shell-mobile-bar .hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.shell-mobile-bar .hamburger-icon span {
    display: block;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}
.shell-mobile-bar .hamburger-icon.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.shell-mobile-bar .hamburger-icon.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.shell-mobile-bar .hamburger-icon.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }