/*
 * Admin pricing widget — floating, draggable card visible only to staff.
 * Lives outside the regular page flow so it's safe across desktop + mobile
 * and won't reflow when the page scrolls. Position is persisted to
 * localStorage between visits.
 */

.xs-admin-widget {
    position: fixed;
    z-index: 9000;
    bottom: 1rem;
    right: 1rem;
    width: 320px;
    max-width: calc(100vw - 1.5rem);
    background: #0f1c2e;
    color: #f5f7fa;
    border: 1px solid #1f2f47;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(8, 12, 22, 0.45);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: blur(4px);
    transition: opacity 120ms ease, transform 160ms ease;
    overflow: hidden;
}

/* Collapsed: a small square tab docked to the right screen edge (just below
   the AI guide tab). !important beats any inline left/top left by a drag. */
.xs-admin-widget[data-collapsed="true"] {
    width: auto;
    min-width: 0;
    right: 0 !important;
    left: auto !important;
    top: calc(40vh + 58px) !important;
    bottom: auto !important;
    background: transparent;
    border: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: none;
    backdrop-filter: none;
    /* Let the "+" badge poke out of the dock tab instead of clipping it. */
    overflow: visible;
}

.xs-admin-widget[data-collapsed="true"] .xs-admin-widget-header,
.xs-admin-widget[data-collapsed="true"] .xs-admin-widget-body,
.xs-admin-widget[data-collapsed="true"] .xs-admin-widget-footer {
    display: none;
}

@keyframes xs-admin-widget-pulse {
    0% { box-shadow: 0 0 0 0 rgba(108, 214, 164, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(108, 214, 164, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 214, 164, 0); }
}

.xs-admin-widget-tab {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: #0f1c2e;
    color: #6cd6a4;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 22px rgba(8, 12, 22, 0.4);
    transition: transform 140ms ease, background 140ms ease;
}

.xs-admin-widget[data-collapsed="true"] .xs-admin-widget-tab {
    display: flex;
}

.xs-admin-widget-tab:hover {
    background: #142544;
    transform: translateX(-3px);
}

.xs-admin-widget-tab-icon {
    display: block;
    pointer-events: none;
}

.xs-admin-widget-tab-plus {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #6cd6a4;
    color: #08111f;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

/* Pulse only until the admin opens the widget for the first time. */
.xs-admin-widget:not([data-opened="true"]) .xs-admin-widget-tab {
    animation: xs-admin-widget-pulse 2.2s infinite;
}

.xs-admin-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #142544 0%, #0f1c2e 100%);
    cursor: grab;
    border-bottom: 1px solid #1f2f47;
    touch-action: none;
}

.xs-admin-widget-header:active {
    cursor: grabbing;
}

.xs-admin-widget-grip {
    color: #5f7796;
    font-weight: 700;
    letter-spacing: -2px;
    font-size: 13px;
}

.xs-admin-widget-title {
    font-weight: 600;
    color: #f5f7fa;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 11px;
}

.xs-admin-widget-spacer {
    flex: 1;
}

.xs-admin-widget-btn {
    background: transparent;
    border: 0;
    color: #cad4e1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
}

.xs-admin-widget-btn:hover {
    background: #1f2f47;
    color: #ffffff;
}

.xs-admin-widget-body {
    padding: 10px 12px 6px;
    max-height: 60vh;
    overflow-y: auto;
}

.xs-admin-widget-status {
    color: #92a3b9;
    font-style: italic;
    padding: 6px 0;
}

.xs-admin-widget-status.is-error {
    color: #ffb4a8;
    font-style: normal;
}

.xs-admin-widget-content[hidden] {
    display: none;
}

.xs-admin-widget-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 6px 0;
}

.xs-admin-widget-summary dt {
    color: #92a3b9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.xs-admin-widget-summary dd {
    margin: 0;
    color: #f5f7fa;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.xs-admin-widget-summary dd[data-cost-missing="true"] {
    color: #c0c8d4;
    font-style: italic;
    font-weight: 500;
}

.xs-admin-widget-summary dd.is-margin {
    color: #6cd6a4;
}

.xs-admin-widget-summary dd.is-margin.is-warning {
    color: #ffd16a;
}

.xs-admin-widget-summary dd.is-margin.is-danger {
    color: #ff8a7a;
}

.xs-admin-widget-section {
    border-top: 1px solid #1f2f47;
    margin-top: 6px;
    padding-top: 6px;
}

.xs-admin-widget-section-title {
    color: #92a3b9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}

.xs-admin-widget-line {
    padding: 6px 0;
    border-bottom: 1px solid rgba(31, 47, 71, 0.6);
}

.xs-admin-widget-line:last-child {
    border-bottom: 0;
}

.xs-admin-widget-line-head {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: baseline;
}

.xs-admin-widget-line-name {
    color: #cad4e1;
    font-weight: 600;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.xs-admin-widget-line-qty {
    color: #92a3b9;
    font-size: 11px;
}

.xs-admin-widget-tier-row {
    margin-top: 6px;
}

.xs-admin-widget-tier-badge {
    display: inline-block;
    background: rgba(167, 243, 208, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(110, 231, 183, 0.35);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.xs-admin-widget-line-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
}

.xs-admin-widget-line-grid div {
    background: #142544;
    padding: 4px 6px;
    border-radius: 6px;
}

.xs-admin-widget-line-grid span {
    display: block;
    color: #92a3b9;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.xs-admin-widget-line-grid strong {
    color: #f5f7fa;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.xs-admin-widget-line-grid strong[data-cost-missing="true"] {
    color: #c0c8d4;
    font-style: italic;
    font-weight: 500;
}

.xs-admin-widget-line-grid strong.is-margin {
    color: #6cd6a4;
}

.xs-admin-widget-line-grid strong.is-margin.is-warning {
    color: #ffd16a;
}

.xs-admin-widget-line-grid strong.is-margin.is-danger {
    color: #ff8a7a;
}

.xs-admin-widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #08111f;
    padding: 6px 10px;
    border-top: 1px solid #1f2f47;
    font-size: 10px;
    color: #6f8198;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.xs-admin-widget-tag {
    background: #1f2f47;
    color: #cad4e1;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.xs-admin-widget-hint {
    font-style: italic;
}

.xs-admin-widget[data-dragging="true"] {
    opacity: 0.92;
    box-shadow: 0 22px 60px rgba(8, 12, 22, 0.6);
}

@media (max-width: 540px) {
    .xs-admin-widget {
        width: calc(100vw - 1.5rem);
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

/* ---- Visitors widget (shares the shell above) ---- */

/* Dock its collapsed tab right below the Margin scope tab. */
.xs-admin-widget--visitors[data-collapsed="true"] {
    top: calc(40vh + 112px) !important;
}

/* Expanded: offset from the pricing card's default corner so the two
   cards don't stack exactly on top of each other. */
.xs-admin-widget--visitors {
    bottom: 4.5rem;
}

/* Black tab with a blue icon so it reads differently from Margin scope. */
.xs-admin-widget--visitors .xs-admin-widget-tab {
    background: #0a0d12;
    color: #5ea0ff;
}

.xs-admin-widget--visitors .xs-admin-widget-tab:hover {
    background: #131a24;
}

.xs-admin-widget--visitors .xs-admin-widget-tab-plus {
    background: #3b82f6;
    color: #fff;
}

.xs-visitors-period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin-bottom: 10px;
}

.xs-visitors-presets {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
}

.xs-visitors-preset {
    flex: 1;
    background: #16283f;
    color: #cbd7e6;
    border: 1px solid #24385a;
    border-radius: 7px;
    font-size: 11.5px;
    padding: 4px 0;
    cursor: pointer;
}

.xs-visitors-preset.is-active {
    background: #1f3a5f;
    color: #fff;
    border-color: #3d5c8c;
}

/* Full-width rows: a datetime-local input is intrinsically wider than
   half the 320px card and would blow out the grid (clipped by the
   card's overflow: hidden). One field per row keeps everything inside
   and symmetric on any viewport. */
.xs-visitors-field {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10.5px;
    color: #8fa3bd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.xs-visitors-field input {
    background: #16283f;
    color: #f5f7fa;
    border: 1px solid #24385a;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    color-scheme: dark;
}

.xs-visitors-apply {
    grid-column: 1 / -1;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.xs-visitors-apply:hover {
    background: #1d4fd7;
}

.xs-visitors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.xs-visitors-stat {
    background: #16283f;
    border: 1px solid #24385a;
    border-radius: 9px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.xs-visitors-num {
    font-size: 24px;
    font-weight: 700;
    color: #6cd6a4;
    line-height: 1.1;
}

.xs-visitors-label {
    font-size: 11.5px;
    color: #cbd7e6;
}

.xs-visitors-sub {
    font-size: 10.5px;
    color: #8fa3bd;
}

.xs-visitors-users {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.xs-visitors-user {
    background: #16283f;
    border: 1px solid #24385a;
    border-radius: 999px;
    font-size: 10.5px;
    color: #cbd7e6;
    padding: 2px 8px;
}