/* ═══════════════════════════════════════════════════════════════════
   GALAXY SMART SYSTEM — PREMIUM APP LAYER  v3.0
   Polish for the authenticated surfaces: auth, user dashboard and the
   admin panel. Applies the same typography, motion and component
   language as the public site without restructuring their layouts.
   Requires tokens.css. Load AFTER the page's own stylesheet.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Typography ───────────────────────────────────────────────── */
body {
    font-family: var(--p-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.011em;
}

h1, h2, h3, h4, h5, h6,
.topbar-title, .auth-title, .admin-login-title,
.saas-page-header h1, .users-heading h1,
.admin-shell-topbar h1, .stat-value, .summary-value {
    font-family: var(--p-font-display);
    letter-spacing: -.025em;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--p-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: rgba(0, 217, 255, .28);
}

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--p-cyan), var(--p-violet));
    border-radius: var(--p-r-pill);
}

/* ── Buttons: shine sweep + lift ──────────────────────────────── */
.btn,
.saas-btn,
.admin-btn,
.d-btn,
.auth-submit,
.auth-social {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--p-font-display);
    font-weight: 600;
    transition: transform var(--p-t), box-shadow var(--p-t),
                background var(--p-t), border-color var(--p-t), color var(--p-t);
}

.btn::after,
.saas-btn::after,
.admin-btn::after,
.d-btn::after,
.auth-submit::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: -60%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 2;
}

.btn:hover::after,
.saas-btn:hover::after,
.admin-btn:hover::after,
.d-btn:hover::after,
.auth-submit:hover::after {
    left: 160%;
    transition: left .9s var(--p-ease);
}

.btn:hover,
.saas-btn:hover,
.admin-btn:hover,
.d-btn:hover,
.auth-submit:hover,
.auth-social:hover {
    transform: translateY(-2px);
}

.btn:active,
.saas-btn:active,
.admin-btn:active,
.d-btn:active,
.auth-submit:active {
    transform: translateY(0);
}

.btn:disabled,
.saas-btn:disabled,
.admin-btn:disabled,
.auth-submit:disabled {
    opacity: .55;
    transform: none;
    pointer-events: none;
}

/* Click ripple (injected by premium.js) */
.p-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: p-app-ripple .6s var(--p-ease) forwards;
    z-index: 3;
}

@keyframes p-app-ripple {
    to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ── Inputs ───────────────────────────────────────────────────── */
input,
textarea,
select {
    font-family: var(--p-font-body);
    transition: border-color var(--p-t-fast), box-shadow var(--p-t-fast), background var(--p-t-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--p-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 255, .16) !important;
}

/* ── Cards: lift on hover ─────────────────────────────────────── */
.card,
.glass-card,
.users-stat,
.stat-card,
.summary-card,
.d-section,
.dash-premium-card,
.message-card,
.order-card,
.auth-card,
.admin-login-box {
    transition: transform var(--p-t), box-shadow var(--p-t), border-color var(--p-t);
}

.card:hover,
.users-stat:hover,
.stat-card:hover,
.summary-card:hover,
.message-card:hover,
.order-card:hover {
    transform: translateY(-4px);
    border-color: var(--p-line-hot);
    box-shadow: var(--p-shadow-lg);
}

/* ── Sidebar navigation ───────────────────────────────────────── */
.admin-shell-sidebar a,
.admin-nav-item,
#dashboard-sidebar a,
.d-nav-item,
.sidebar-link {
    position: relative;
    border-radius: var(--p-r-xs);
    transition: color var(--p-t-fast), background var(--p-t-fast), padding-left var(--p-t-fast);
}

.admin-shell-sidebar a::before,
.admin-nav-item::before,
#dashboard-sidebar a::before,
.d-nav-item::before,
.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--p-grad);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .32s var(--p-ease);
}

.admin-shell-sidebar a:hover,
.admin-nav-item:hover,
#dashboard-sidebar a:hover,
.d-nav-item:hover,
.sidebar-link:hover {
    padding-left: 20px;
}

.admin-shell-sidebar a.active::before,
.admin-nav-item.active::before,
#dashboard-sidebar a.active::before,
.d-nav-item.active::before,
.sidebar-link.active::before {
    transform: scaleY(1);
}

/* ── Tables ───────────────────────────────────────────────────── */
table tbody tr {
    transition: background var(--p-t-fast);
}

table tbody tr:hover {
    background: var(--p-grad-soft);
}

th {
    font-family: var(--p-font-display);
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Stat / summary numerals ──────────────────────────────────── */
.stat-value,
.summary-value,
.users-stat-value,
.dash-stat-value {
    font-family: var(--p-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
}

/* ── Entrance animation for content blocks ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .card,
    .users-stat,
    .stat-card,
    .summary-card,
    .d-section,
    .message-card,
    .order-card {
        animation: p-app-in .6s var(--p-ease) backwards;
    }

    .card:nth-child(1), .users-stat:nth-child(1), .stat-card:nth-child(1), .summary-card:nth-child(1) { animation-delay: .04s; }
    .card:nth-child(2), .users-stat:nth-child(2), .stat-card:nth-child(2), .summary-card:nth-child(2) { animation-delay: .10s; }
    .card:nth-child(3), .users-stat:nth-child(3), .stat-card:nth-child(3), .summary-card:nth-child(3) { animation-delay: .16s; }
    .card:nth-child(4), .users-stat:nth-child(4), .stat-card:nth-child(4), .summary-card:nth-child(4) { animation-delay: .22s; }
    .card:nth-child(5), .users-stat:nth-child(5) { animation-delay: .28s; }
    .card:nth-child(6), .users-stat:nth-child(6) { animation-delay: .34s; }

    .auth-card,
    .admin-login-box {
        animation: p-app-rise .7s var(--p-ease) backwards;
    }
}

@keyframes p-app-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes p-app-rise {
    from { opacity: 0; transform: translateY(26px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Auth page ────────────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100dvh;
}

.auth-card {
    box-shadow: var(--p-shadow-lg);
}

.auth-tab {
    font-family: var(--p-font-display);
    font-weight: 600;
    transition: color var(--p-t-fast), background var(--p-t-fast);
}

.auth-social {
    font-family: var(--p-font-display);
}

.auth-social:hover {
    border-color: var(--p-line-hot);
}

/* ── Admin shell: stop content floating in a void on wide screens ── */
.admin-shell-content > *,
.panel-area > * {
    max-width: 1500px;
}

/* ── Responsive safety net ────────────────────────────────────── */
img,
video,
canvas,
svg:not([width]) {
    max-width: 100%;
}

table {
    max-width: 100%;
}

@media (max-width: 991px) {
    .grid-two,
    .form-row,
    .d-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .btn,
    .saas-btn,
    .admin-btn,
    .d-btn {
        min-height: 44px;
    }

    /* iOS zooms the viewport when a focused field is under 16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    .card:hover,
    .users-stat:hover,
    .stat-card:hover,
    .summary-card:hover,
    .message-card:hover,
    .order-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}