/* --------------------------------------------------------------------------
   0. LOCK SIDEBAR TO THE RIGHT (REGARDLESS OF LANGUAGE)
   admin-shell.css flips it to the left in LTR via `[dir="ltr"] .sidebar`.
   Force right-side everywhere — UI shouldn't reflow on language change.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    aside.sidebar,
    .sidebar,
    [dir="ltr"] aside.sidebar,
    [dir="ltr"] .sidebar {
        right: 0 !important;
        left: auto !important;
    }
    .main-content,
    [dir="ltr"] .main-content {
        margin-right: var(--sidebar-width) !important;
        margin-left: 0 !important;
    }
    /* Sidebar inner alignment — keep text right-aligned even in LTR so
       items still flow against the sidebar's outer (left) edge cleanly. */
    [dir="ltr"] .sidebar {
        text-align: right;
    }
}

/* ==========================================================================
   S.T.N Hosting — Visual Polish Layer (2026-05-23)
   Loaded AFTER shared-base.css / dashboard.css / admin.css.
   Surgical, additive refinements. No structural rewrites.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ACCESSIBLE FOCUS RINGS
   Tab navigation now leaves a visible, brand-matched ring everywhere.
   :focus-visible isolates keyboard users (mouse clicks still focus silently).
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
    outline: 2px solid var(--gold-mid);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px rgba(202, 164, 98, 0.18);
}
/* Inputs/selects/textareas — soft inner glow instead of harsh outline */
:where(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--gold-mid) !important;
    box-shadow: 0 0 0 3px rgba(202, 164, 98, 0.18),
                inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* --------------------------------------------------------------------------
   2. CARD HOVER LIFT — subtle, premium-feeling motion
   -------------------------------------------------------------------------- */
.card,
.stat-card,
.plan-card,
.ticket-card,
.action-item,
.health-card,
.quick-action-card {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    will-change: transform;
}
.card:hover,
.stat-card:hover,
.plan-card:hover,
.ticket-card:hover,
.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(202, 164, 98, 0.18);
}
/* Don't lift cards on mobile — feels nervous on touch */
@media (max-width: 768px) {
    .card:hover, .stat-card:hover, .plan-card:hover,
    .ticket-card:hover, .quick-action-card:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   3. BUTTON POLISH
   -------------------------------------------------------------------------- */
.btn,
button.btn,
a.btn {
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    letter-spacing: 0.01em;
    font-weight: 600;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.05s; }

/* Primary button — gold gradient with depth */
.btn-primary,
.btn-gold,
.btn.btn-gold,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-blue):not(.btn-ghost) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #fff;
    border: 1px solid var(--gold-dark);
    box-shadow: 0 2px 8px rgba(202, 164, 98, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover,
.btn-gold:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-blue):not(.btn-ghost):hover {
    background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold) 100%);
    box-shadow: 0 4px 16px rgba(202, 164, 98, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Disabled state — clearly dimmed, no hover bounce */
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.4);
}

/* --------------------------------------------------------------------------
   4. STATUS BADGE CONSISTENCY
   Every status pill across customer/admin/email pages uses the same shape.
   -------------------------------------------------------------------------- */
.status-badge,
.badge,
.pill,
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}
/* Dot prefix for status badges where supported (added via ::before for "active") */
.status-badge.status-active::before,
.status-active::before,
.badge-success::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* --------------------------------------------------------------------------
   5. FORM INPUT POLISH — consistent base styling everywhere
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6. MODAL ENTRANCE ANIMATION
   -------------------------------------------------------------------------- */
.modal-backdrop,
.modal-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: backdropFade 0.2s ease;
}
@keyframes backdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal,
.modal-content {
    animation: modalRise 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
@keyframes modalRise {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}

/* --------------------------------------------------------------------------
   7. TABLE POLISH — alternating row tint + subtle hover row
   -------------------------------------------------------------------------- */
.data-table tbody tr,
table tbody tr {
    transition: background 0.15s ease;
}
.data-table tbody tr:nth-child(even),
table.zebra tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.data-table tbody tr:hover,
table tbody tr:hover {
    background: rgba(202, 164, 98, 0.06);
}

/* --------------------------------------------------------------------------
   8. MOBILE SIDEBAR OVERLAY POLISH
   The page already creates a `.sidebar-overlay` element — just enhance it.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* NOTE on specificity:
       admin-shell.css loads AFTER polish.css and contains:
         .sidebar { z-index: 100 !important; ... }
       which would beat plain `.sidebar` here. We force WIN with a higher-
       specificity selector — `aside.sidebar` matches the real element
       `<aside class="sidebar">` and has specificity 0,1,1 vs admin-shell's
       0,1,0. Same trick for `div.sidebar-overlay`. */
    div.sidebar-overlay,
    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: opacity 0.25s ease;
        z-index: 150 !important;
    }
    /* High-specificity sidebar rule — beats admin-shell.css's `.sidebar { z-index: 100 !important }`. */
    aside.sidebar,
    .sidebar {
        z-index: 9999 !important;
        transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.05) !important;
        background: linear-gradient(180deg,
            #101018 0%,
            #0c0c14 40%,
            #0a0a12 100%) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Also drop blur on the mobile hamburger button (same reason). */
    .mobile-toggle, .hamburger, .mobile-hamburger {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(26, 26, 37, 0.95) !important;
    }

    /* --- STORE PAGE mobile layout --- */
    /* Cycle picker (Monthly / Quarterly / Annual) — wrap, shrink */
    .cycle-picker {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 4px !important;
        gap: 4px !important;
        margin-bottom: 1rem !important;
    }
    .cycle-picker .cycle-btn,
    .cycle-btn {
        width: 100% !important;
        padding: 0.7rem 0.85rem !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
    }
    .cycle-save-badge {
        font-size: 0.7rem !important;
        padding: 1px 6px !important;
    }

    /* Category tabs — horizontal scroll on mobile */
    .category-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
    .category-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.9rem !important;
    }

    /* Plans grid — single column with comfortable padding */
    .plans-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .plan-card,
    .pricing-card {
        padding: 1.25rem !important;
        max-width: 100% !important;
    }
    .plan-card .plan-price,
    .pricing-card .price {
        font-size: 1.8rem !important;
    }
    .plan-card .plan-name,
    .pricing-card h3 {
        font-size: 1.1rem !important;
    }
    .plan-card .btn,
    .pricing-card .btn,
    .plan-card .buy-btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* View toggle: small icon buttons OK, but center on its own line */
    .view-toggle {
        align-self: flex-start !important;
    }

    /* Comparison table: horizontal scroll wrap already set, ensure it works */
    .compare-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -0.5rem !important;  /* allow edge-to-edge scroll */
    }
    .compare-table { min-width: 600px !important; font-size: 0.85rem !important; }
    .compare-table th, .compare-table td { padding: 0.5rem 0.65rem !important; }

    /* Page header on store: stack title + view toggle properly */
    .page-header h1 { font-size: 1.5rem !important; }
    .page-header > div[style*="space-between"] {
        gap: 0.75rem !important;
    }

    /* Tighter padding on main content */
    .main-content {
        padding: 1rem 0.85rem !important;
        padding-top: 4.25rem !important;
    }
}

/* --------------------------------------------------------------------------
   9. EMPTY STATE — nicer typography
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state i,
.empty-state svg {
    font-size: 3rem;
    color: var(--gold-dark);
    opacity: 0.65;
    margin-bottom: 1rem;
}
.empty-state h3,
.empty-state .empty-title {
    color: var(--text-secondary);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   10. SKELETON LOADING — reusable shimmer class
   Apply .skeleton to any block while data loads.
   -------------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card)     0%,
        var(--bg-elevated) 50%,
        var(--bg-card)     100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   11. TOAST POLISH — slide-in from inline-end
   -------------------------------------------------------------------------- */
.toast,
.notification,
.snackbar {
    animation: toastSlideIn 0.35s cubic-bezier(0.2, 0.85, 0.3, 1.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(-20%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(0)    translateY(0); }
}

/* --------------------------------------------------------------------------
   12. SIDEBAR-NAV ACTIVE STATE — sharper indicator
   -------------------------------------------------------------------------- */
.sidebar-nav a.active,
.sidebar-link.active {
    background: linear-gradient(90deg,
        rgba(202, 164, 98, 0.12) 0%,
        rgba(202, 164, 98, 0.02) 100%);
}

/* --------------------------------------------------------------------------
   13. PAGE HEADER — consistent vertical rhythm
   -------------------------------------------------------------------------- */
.page-header,
.dashboard-header {
    margin-bottom: 1.75rem;
}
.page-header h1,
.dashboard-header h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   14. LINK MICRO-STATE
   -------------------------------------------------------------------------- */
a:not(.btn):not(.sidebar-link):not(.sidebar-nav a):not(.tab):not(.cycle-btn):not(.view-toggle-btn) {
    transition: color 0.15s ease, opacity 0.15s ease;
}
a:not(.btn):not(.sidebar-link):not(.sidebar-nav a):not(.tab):not(.cycle-btn):not(.view-toggle-btn):hover {
    color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   15. CODE BLOCK POLISH (for SSH commands etc)
   -------------------------------------------------------------------------- */
code,
.code-block,
.oc-value,
pre {
    font-family: var(--font-mono);
    background: var(--bg-deepest);
    color: var(--gold-light);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    font-size: 0.875em;
}
pre {
    padding: 1rem;
    overflow-x: auto;
    line-height: 1.55;
}
pre code {
    background: transparent;
    border: none;
    padding: 0;
}

/* --------------------------------------------------------------------------
   16. TOOLTIPS — consistent dark tooltip via [data-tooltip]
   -------------------------------------------------------------------------- */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-deepest);
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   17. SCROLL-ANCHORED MAIN CONTENT
   Ensures hash navigation lands below sticky elements.
   -------------------------------------------------------------------------- */
html { scroll-padding-top: 80px; }

/* --------------------------------------------------------------------------
   18. TABLET REFINEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 769px) {
    :root {
        --sidebar-width: 230px;
    }
    .sidebar-nav a {
        font-size: 0.92rem;
        padding: 0.55rem 0.95rem;
    }
    .main-content {
        padding: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   19. RTL — make sure margins flip correctly on legacy inline styles
   (most pages use RTL already; this catches mixed-direction widgets)
   -------------------------------------------------------------------------- */
[dir="ltr"] :is(.text-end, .text-right) { text-align: right; }
[dir="rtl"] :is(.text-end, .text-right) { text-align: left;  }

/* --------------------------------------------------------------------------
   20. PRINT (invoice / receipt pages)
   -------------------------------------------------------------------------- */
@media print {
    .sidebar, .mobile-hamburger, .toast, .notification,
    #particleCanvas, .page-header .filter-group,
    .quick-actions-bar, .help-callout {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}