/*
 * AdminAssist appearance and motion layer
 * Modes: Astryx Neutral Light, Astryx Neutral Dark, and Apple-inspired Glass.
 * Motion thesis: spring-state UI with quiet supporting transitions.
 */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="glass"] { color-scheme: light; }

html,
body,
.app-shell,
.main-content,
.topbar,
.sidebar,
.card,
.dashboard-panel,
.metric-strip,
.helpdesk-strip,
.table-responsive,
.form-control,
.form-select,
.input-group-text,
.modal-content,
.dropdown-menu,
.login-form-region,
.login-card {
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-medium-min) var(--ease-standard),
        border-color var(--duration-medium-min) var(--ease-standard),
        box-shadow var(--duration-medium-min) var(--ease-standard);
}

/* Appearance selector ------------------------------------------------------ */
.appearance-control {
    --appearance-index: 0;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 218px;
    height: 38px;
    align-items: stretch;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-background-muted);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-background-surface) 70%, transparent);
}

.appearance-indicator {
    position: absolute;
    z-index: -1;
    top: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    height: 30px;
    border: 1px solid var(--color-border-emphasized);
    border-radius: 8px;
    background: var(--color-background-surface);
    box-shadow: var(--shadow-low);
    transform: translateX(calc(var(--appearance-index) * 100%));
    transition:
        transform 460ms cubic-bezier(0.22, 1.38, 0.36, 1),
        background-color var(--duration-medium-min) var(--ease-standard),
        border-color var(--duration-medium-min) var(--ease-standard),
        box-shadow var(--duration-medium-min) var(--ease-standard);
}

.appearance-option {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.appearance-option i {
    width: 12px;
    font-size: 0.68rem;
    transform: scale(0.92);
    transition: transform 360ms cubic-bezier(0.22, 1.38, 0.36, 1);
}

.appearance-option:hover { color: var(--color-text-primary); }
.appearance-option:active { transform: scale(0.96); }
.appearance-option[aria-checked="true"] { color: var(--color-text-primary); }
.appearance-option[aria-checked="true"] i { transform: scale(1.08); }

.auth-appearance {
    position: fixed;
    z-index: 60;
    top: var(--spacing-4);
    right: var(--spacing-4);
}

.auth-appearance + .auth-flashes {
    top: 66px;
}

/* Light -------------------------------------------------------------------- */
html[data-theme="light"] body[data-astryx-theme="neutral"] {
    --primary-color: #262626;
    --primary-hover: #404040;
    --app-focus: #0074e2;
}

/* Dark --------------------------------------------------------------------- */
html[data-theme="dark"] body[data-astryx-theme="neutral"] {
    --primary-color: #f1f1f1;
    --primary-hover: #ffffff;
    --app-focus: #6d9cfe;
    --app-rail-bg: #090a0c;
    --app-rail-raised: #15171b;
    --app-rail-border: rgba(255, 255, 255, 0.11);
    --app-rail-text: #f5f5f6;
    --app-rail-muted: #969ba3;
    --background: var(--color-background-body);
    --background-secondary: var(--color-background-surface);
    --background-tertiary: var(--color-background-muted);
    --card-bg: var(--color-background-card);
    --navbar-bg: var(--color-background-surface);
    --input-bg: var(--color-background-surface);
}

html[data-theme="dark"] body {
    background: #111112;
}

html[data-theme="dark"] a:hover { color: #c8e2ff; }
html[data-theme="dark"] .sidebar {
    background:
        radial-gradient(circle at 0 0, rgba(109, 156, 254, 0.08), transparent 22rem),
        var(--app-rail-bg);
}

html[data-theme="dark"] .topbar {
    background: rgba(31, 31, 34, 0.88);
    box-shadow: 0 1px 0 rgba(255,255,255,0.025);
}

html[data-theme="dark"] .appearance-control {
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

html[data-theme="dark"] .appearance-indicator {
    border-color: rgba(255,255,255,0.11);
    background: #34363b;
    box-shadow: 0 5px 14px rgba(0,0,0,0.30), inset 0 1px rgba(255,255,255,0.055);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:focus {
    border-color: #f1f1f1;
    background: #f1f1f1;
    color: #171717;
}

html[data-theme="dark"] .btn-primary:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #0b0b0c;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    border-color: #f1f1f1;
    background: #f1f1f1;
    color: #171717;
}

html[data-theme="dark"] .command-search-panel {
    border-color: #34363b;
    background:
        radial-gradient(circle at 86% 0%, rgba(109,156,254,0.13), transparent 20rem),
        #0b0c0f;
}

html[data-theme="dark"] .command-search-form {
    border-color: #4a4d54;
    background: #1f1f22;
    box-shadow: 0 14px 34px rgba(0,0,0,0.34);
}

html[data-theme="dark"] .command-search-form input { color: #f1f1f1; }
html[data-theme="dark"] .command-search-form > i { color: #aaafb5; }
html[data-theme="dark"] .bg-white { background-color: var(--color-background-surface) !important; }
html[data-theme="dark"] .text-dark { color: var(--color-text-primary) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-theme="dark"] .login-story { border-right: 1px solid rgba(255,255,255,0.08); }

/* Glass -------------------------------------------------------------------- */
html[data-theme="glass"] body[data-astryx-theme="neutral"] {
    --color-background-body: #e8effb;
    --color-background-surface: rgba(255, 255, 255, 0.64);
    --color-background-card: rgba(255, 255, 255, 0.58);
    --color-background-popover: rgba(250, 252, 255, 0.84);
    --color-background-muted: rgba(239, 245, 255, 0.54);
    --color-background-inverted: #17233a;
    --color-overlay-hover: rgba(255, 255, 255, 0.48);
    --color-overlay-pressed: rgba(117, 145, 190, 0.16);
    --color-text-primary: #172238;
    --color-text-secondary: #526078;
    --color-text-disabled: #8995a8;
    --color-icon-primary: #172238;
    --color-icon-secondary: #5e6d85;
    --color-icon-disabled: #9da8b8;
    --color-border: rgba(255, 255, 255, 0.68);
    --color-border-emphasized: rgba(88, 107, 138, 0.27);
    --color-track: rgba(88, 107, 138, 0.20);
    --shadow-low: 0 1px 1px rgba(32, 52, 84, 0.07), 0 8px 24px rgba(63, 91, 135, 0.10);
    --shadow-med: 0 2px 4px rgba(32, 52, 84, 0.08), 0 16px 38px rgba(63, 91, 135, 0.14);
    --shadow-high: 0 8px 18px rgba(32, 52, 84, 0.12), 0 30px 70px rgba(63, 91, 135, 0.18);
    --primary-color: #17233a;
    --primary-hover: #263957;
    --app-focus: #006ee6;
    --app-rail-bg: rgba(17, 23, 35, 0.76);
    --app-rail-raised: rgba(32, 41, 58, 0.74);
    --app-rail-border: rgba(255, 255, 255, 0.16);
    --app-rail-text: #ffffff;
    --app-rail-muted: #b9c3d3;
}

html[data-theme="glass"] body {
    position: relative;
    isolation: isolate;
    background: #e8effb;
}

html[data-theme="glass"] body::before,
html[data-theme="glass"] body::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
}

html[data-theme="glass"] body::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(76, 147, 255, 0.38) 0 9%, transparent 31%),
        radial-gradient(circle at 84% 14%, rgba(177, 126, 255, 0.27) 0 8%, transparent 29%),
        radial-gradient(circle at 74% 78%, rgba(82, 218, 205, 0.27) 0 10%, transparent 34%),
        radial-gradient(circle at 20% 86%, rgba(255, 169, 113, 0.18) 0 7%, transparent 28%),
        linear-gradient(145deg, #dce8fb 0%, #f4f8ff 48%, #dfeafd 100%);
    transform: translate3d(0, 0, 0) scale(1.02);
    animation: glass-aurora 20s ease-in-out infinite alternate;
}

html[data-theme="glass"] body::after {
    z-index: -1;
    opacity: 0.30;
    background:
        linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.46) 42%, transparent 62%),
        radial-gradient(circle at 50% 20%, rgba(255,255,255,0.46), transparent 44%);
    mix-blend-mode: soft-light;
}

html[data-theme="glass"] .app-shell,
html[data-theme="glass"] .main-content,
html[data-theme="glass"] .auth-shell,
html[data-theme="glass"] .login-form-region {
    background: transparent;
}

html[data-theme="glass"] .sidebar {
    border-right-color: rgba(255,255,255,0.18);
    background:
        radial-gradient(circle at 16% 0%, rgba(115, 163, 255, 0.19), transparent 22rem),
        rgba(15, 20, 31, 0.76);
    box-shadow: 16px 0 48px rgba(31, 48, 78, 0.14);
    backdrop-filter: blur(30px) saturate(1.28);
    -webkit-backdrop-filter: blur(30px) saturate(1.28);
}

html[data-theme="glass"] .topbar {
    border-bottom-color: rgba(255,255,255,0.74);
    background: rgba(249, 252, 255, 0.56);
    box-shadow: 0 8px 30px rgba(58, 84, 128, 0.07), inset 0 -1px 0 rgba(94, 116, 154, 0.07);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}

html[data-theme="glass"] .appearance-control {
    border-color: rgba(255,255,255,0.82);
    background: rgba(235, 243, 255, 0.43);
    box-shadow: inset 0 1px rgba(255,255,255,0.85), 0 7px 24px rgba(64, 88, 128, 0.08);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
}

html[data-theme="glass"] .appearance-indicator {
    border-color: rgba(255,255,255,0.92);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.84), rgba(241,247,255,0.56));
    box-shadow:
        0 8px 20px rgba(55, 80, 122, 0.13),
        inset 0 1px rgba(255,255,255,0.98),
        inset 0 -1px rgba(95, 121, 164, 0.10);
}

html[data-theme="glass"] .appearance-indicator::after {
    content: "";
    position: absolute;
    inset: 1px 5px auto;
    height: 45%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), transparent);
    pointer-events: none;
}

html[data-theme="glass"] .card,
html[data-theme="glass"] .astryx-card,
html[data-theme="glass"] .dashboard-panel,
html[data-theme="glass"] .metric-strip,
html[data-theme="glass"] .helpdesk-strip,
html[data-theme="glass"] .table-responsive,
html[data-theme="glass"] .login-card {
    border-color: rgba(255,255,255,0.72) !important;
    background: rgba(255,255,255,0.56);
    box-shadow:
        0 16px 42px rgba(58, 84, 128, 0.10),
        inset 0 1px rgba(255,255,255,0.80);
    backdrop-filter: blur(24px) saturate(1.24);
    -webkit-backdrop-filter: blur(24px) saturate(1.24);
}

html[data-theme="glass"] .card-header,
html[data-theme="glass"] .card-footer,
html[data-theme="glass"] .panel-header,
html[data-theme="glass"] .list-group-item,
html[data-theme="glass"] .table thead th {
    background: rgba(246, 250, 255, 0.43);
}

html[data-theme="glass"] .form-control,
html[data-theme="glass"] .form-select,
html[data-theme="glass"] .input-group-text,
html[data-theme="glass"] .topbar-search,
html[data-theme="glass"] .icon-action,
html[data-theme="glass"] .mobile-nav-toggle {
    border-color: rgba(255,255,255,0.76);
    background-color: rgba(255,255,255,0.48);
    box-shadow: inset 0 1px rgba(255,255,255,0.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

html[data-theme="glass"] .form-control:focus,
html[data-theme="glass"] .form-select:focus,
html[data-theme="glass"] .topbar-search:focus-within {
    border-color: rgba(67, 122, 212, 0.45);
    background-color: rgba(255,255,255,0.72);
}

html[data-theme="glass"] .dropdown-menu,
html[data-theme="glass"] .modal-content {
    border-color: rgba(255,255,255,0.82);
    background: rgba(248, 251, 255, 0.82);
    box-shadow: var(--shadow-high);
    backdrop-filter: blur(32px) saturate(1.35);
    -webkit-backdrop-filter: blur(32px) saturate(1.35);
}

html[data-theme="glass"] .command-search-panel {
    border-color: rgba(255,255,255,0.20);
    background:
        radial-gradient(circle at 85% 0%, rgba(136, 184, 255, 0.28), transparent 20rem),
        linear-gradient(145deg, rgba(18, 27, 45, 0.86), rgba(27, 43, 70, 0.76));
    box-shadow: 0 24px 62px rgba(44, 70, 112, 0.20), inset 0 1px rgba(255,255,255,0.13);
    backdrop-filter: blur(30px) saturate(1.25);
    -webkit-backdrop-filter: blur(30px) saturate(1.25);
}

html[data-theme="glass"] .command-search-form {
    border-color: rgba(255,255,255,0.90);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 16px 40px rgba(10, 30, 66, 0.22), inset 0 1px #fff;
}

html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] .btn-primary:focus {
    border-color: rgba(23, 35, 58, 0.90);
    background: rgba(23, 35, 58, 0.94);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 35, 58, 0.15) !important;
}

html[data-theme="glass"] .btn-primary:hover {
    border-color: #263957;
    background: #263957;
}

html[data-theme="glass"] .bg-white { background-color: rgba(255,255,255,0.58) !important; }
html[data-theme="glass"] .login-story {
    background:
        radial-gradient(circle at 72% 20%, rgba(123, 168, 255, 0.21), transparent 19rem),
        linear-gradient(145deg, rgba(14, 20, 31, 0.93), rgba(27, 39, 61, 0.84));
    backdrop-filter: blur(26px) saturate(1.18);
    -webkit-backdrop-filter: blur(26px) saturate(1.18);
}

/* Motion ------------------------------------------------------------------- */
body.ui-motion-ready .motion-item {
    animation: surface-settle 540ms var(--ease-standard) both;
    animation-delay: calc(min(var(--motion-order, 0), 8) * 38ms);
}

.status-dot {
    position: relative;
}

.status-dot::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    animation: signal-ring 1.8s ease-out 2;
}

.dashboard-panel,
.metric-item,
.action-row,
.wiki-row,
.ticket-row,
.icon-action,
.mobile-nav-toggle {
    transition:
        transform var(--duration-fast-max) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast-max) var(--ease-standard);
}

.dashboard-panel:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-low);
}

.metric-item:hover .metric-icon {
    transform: translateY(-1px) scale(1.04);
}

.metric-icon {
    transition: transform 360ms cubic-bezier(0.22, 1.38, 0.36, 1);
}

.action-row > i:last-child,
.wiki-row > i:last-child {
    transition: transform var(--duration-fast-max) var(--ease-standard);
}

.action-row:hover > i:last-child,
.wiki-row:hover > i:last-child {
    transform: translateX(3px);
}

.icon-action:hover,
.mobile-nav-toggle:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-low);
}

.icon-action:active,
.mobile-nav-toggle:active {
    transform: scale(0.96);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: var(--ease-standard);
}

::view-transition-old(root) { animation-name: appearance-out; }
::view-transition-new(root) { animation-name: appearance-in; }

@keyframes surface-settle {
    from { opacity: 0; transform: translateY(12px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes signal-ring {
    0% { opacity: 0.45; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.35); }
}

@keyframes glass-aurora {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-0.3deg); }
    50% { transform: translate3d(1.5%, 1%, 0) scale(1.045) rotate(0.25deg); }
    100% { transform: translate3d(-0.5%, 1.5%, 0) scale(1.03) rotate(-0.15deg); }
}

@keyframes appearance-out {
    to { opacity: 0.84; filter: blur(3px); }
}

@keyframes appearance-in {
    from { opacity: 0.82; filter: blur(3px); }
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1180px) {
    .topbar .appearance-control {
        width: 112px;
    }
    .topbar .appearance-option span { display: none; }
}

@media (max-width: 767.98px) {
    .topbar .appearance-control {
        width: 108px;
        height: 36px;
    }
    .topbar .appearance-indicator { height: 28px; }
    .topbar-end { gap: 8px; }
    .auth-appearance { top: 12px; right: 12px; }
    .auth-appearance .appearance-control { width: 112px; }
    .auth-appearance .appearance-option span { display: none; }
    html[data-theme="glass"] .dashboard-panel:hover { transform: none; }
}

@media (max-width: 479.98px) {
    .topbar-title { display: none; }
    .topbar { grid-template-columns: auto 1fr; }
    .topbar-end { justify-self: end; }
    .topbar .icon-action { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-motion-ready .motion-item,
    .status-dot::after,
    html[data-theme="glass"] body::before,
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .appearance-indicator,
    .appearance-option,
    .appearance-option i,
    .metric-icon,
    .action-row > i:last-child,
    .wiki-row > i:last-child {
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .appearance-control,
    .auth-appearance { display: none !important; }
    html[data-theme="glass"] body::before,
    html[data-theme="glass"] body::after { display: none !important; }
}