/* ==========================================================================
   Trash Panda — Ain't Misbehaving
   Wormhole-space theme for Alliance Auth 5.x (Bootstrap 5.3 override layer)

   Palette intent:
     void     — the empty space outside a wormhole, near-black with violet cast
     nebula   — violet primary, the corp colour
     fur      — desaturated silver-grey, the raccoon
   ========================================================================== */

:root,
[data-theme="trashpanda"] {
    /* --- surfaces --- */
    --tp-void:          #0a0611;
    --tp-void-deep:     #06040c;
    --tp-surface:       #150c24;
    --tp-surface-2:     #1d1230;
    --tp-surface-3:     #261838;
    --tp-border:        #2f2044;
    --tp-border-bright: #43305e;

    /* --- brand --- */
    --tp-violet:        #a855f7;
    --tp-violet-bright: #c084fc;
    --tp-violet-deep:   #7c3aed;
    --tp-violet-dim:    #4c1d95;

    /* --- fur (raccoon greys) --- */
    --tp-fur:           #cfc9dc;
    --tp-fur-dim:       #9d94b3;

    /* --- text --- */
    --tp-text:          #e8e4f0;
    --tp-text-muted:    #a79dbd;

    /* --- semantic --- */
    --tp-success:       #34d399;
    --tp-danger:        #f87171;
    --tp-warning:       #fbbf24;
    --tp-info:          #60a5fa;

    --tp-radius:        10px;
    --tp-radius-sm:     6px;

    /* ---- Bootstrap 5.3 variable remap ---- */
    --bs-body-bg:            var(--tp-void);
    --bs-body-color:         var(--tp-text);
    --bs-emphasis-color:     #ffffff;
    --bs-secondary-color:    var(--tp-text-muted);
    --bs-secondary-bg:       var(--tp-surface-2);
    --bs-tertiary-bg:        var(--tp-surface);
    --bs-border-color:       var(--tp-border);
    --bs-border-radius:      var(--tp-radius);
    --bs-link-color:         var(--tp-violet);
    --bs-link-hover-color:   var(--tp-violet-bright);
    --bs-code-color:         var(--tp-violet-bright);
    --bs-heading-color:      #ffffff;

    --bs-primary:            var(--tp-violet-deep);
    --bs-primary-rgb:        124, 58, 237;
    --bs-success-rgb:        52, 211, 153;
    --bs-danger-rgb:         248, 113, 113;
    --bs-warning-rgb:        251, 191, 36;
    --bs-info-rgb:           96, 165, 250;

    color-scheme: dark;
}

/* ==========================================================================
   Base — the wormhole
   ========================================================================== */

body {
    background-color: var(--tp-void);
    /* Layered radial gradients read as a distant wormhole aperture rather than
       a flat colour. Fixed attachment so it does not travel with scroll. */
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -10%,  rgba(124, 58, 237, 0.20), transparent 70%),
        radial-gradient(ellipse 60% 40% at 85% 15%,   rgba(168, 85, 247, 0.10), transparent 65%),
        radial-gradient(ellipse 70% 50% at 10% 85%,   rgba(76, 29, 149, 0.14),  transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--tp-text);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.01em;
}

hr { border-color: var(--tp-border); opacity: 1; }

::selection { background: var(--tp-violet-deep); color: #fff; }

/* Focus visibility — never remove, always obvious (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--tp-violet-bright);
    outline-offset: 2px;
    box-shadow: none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.navbar,
.navbar.navbar-dark,
nav.navbar {
    background-color: rgba(13, 8, 22, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tp-border);
}

.navbar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Raccoon mask sits beside the wordmark as the corp device */
.navbar .navbar-brand::before {
    content: "";
    width: 30px;
    height: 18px;
    background: url("../img/raccoon-mask.9b948fdba430.svg") center / contain no-repeat;
    flex: 0 0 auto;
}

.navbar .nav-link {
    color: var(--tp-fur) !important;
    border-radius: var(--tp-radius-sm);
    padding: 0.5rem 0.8rem;
    transition: background-color 180ms ease, color 180ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
    background-color: rgba(168, 85, 247, 0.14);
}

/* Current location must be visually distinct, not colour-only —
   it also carries a left rule. */
.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
    color: #fff !important;
    background-color: rgba(124, 58, 237, 0.26);
    box-shadow: inset 2px 0 0 var(--tp-violet-bright);
}

.navbar-toggler {
    border-color: var(--tp-border-bright);
}

/* Sidebar / vertical menu used by AA's main nav */
.nav-pills .nav-link {
    color: var(--tp-fur);
    border-radius: var(--tp-radius-sm);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--tp-violet-deep);
    color: #fff;
}

/* ==========================================================================
   Surfaces — cards, panels, wells
   ========================================================================== */

.card,
.list-group-item,
.accordion-item,
.modal-content,
.offcanvas {
    background-color: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    color: var(--tp-text);
}

.card-header,
.accordion-button,
.modal-header {
    background-color: var(--tp-surface-2);
    border-bottom: 1px solid var(--tp-border);
    color: #fff;
    font-weight: 600;
}

.card-footer,
.modal-footer {
    background-color: var(--tp-surface-2);
    border-top: 1px solid var(--tp-border);
}

.accordion-button:not(.collapsed) {
    background-color: var(--tp-surface-3);
    color: #fff;
    box-shadow: inset 0 -1px 0 var(--tp-border);
}

/* Modal scrim strong enough to isolate the dialog */
.modal-backdrop.show { background-color: #05030a; opacity: 0.72; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    border-radius: var(--tp-radius-sm);
    font-weight: 500;
    transition: background-color 180ms ease, border-color 180ms ease,
                color 180ms ease, transform 120ms ease;
}

/* Press feedback that does not shift surrounding layout */
.btn:active { transform: scale(0.98); }

.btn-primary {
    background-color: var(--tp-violet-deep);
    border-color: var(--tp-violet-deep);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tp-violet);
    border-color: var(--tp-violet);
    color: #fff;
}

.btn-outline-primary {
    color: var(--tp-violet-bright);
    border-color: var(--tp-violet-deep);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--tp-violet-deep);
    border-color: var(--tp-violet-deep);
    color: #fff;
}

.btn-secondary {
    background-color: var(--tp-surface-3);
    border-color: var(--tp-border-bright);
    color: var(--tp-text);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--tp-border);
    border-color: var(--tp-violet-dim);
    color: #fff;
}

.btn-danger  { background-color: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-success { background-color: #047857; border-color: #047857; color: #fff; }
.btn-warning { background-color: #b45309; border-color: #b45309; color: #fff; }
.btn-info    { background-color: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* Disabled must read as disabled and not be mistaken for actionable */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.42;
    cursor: not-allowed;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select,
.input-group-text {
    background-color: var(--tp-void-deep);
    border: 1px solid var(--tp-border-bright);
    color: var(--tp-text);
    border-radius: var(--tp-radius-sm);
    /* 16px avoids iOS zoom-on-focus */
    font-size: 1rem;
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--tp-void-deep);
    border-color: var(--tp-violet);
    color: var(--tp-text);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

.form-control::placeholder { color: var(--tp-fur-dim); opacity: 1; }

.form-label { color: var(--tp-fur); font-weight: 500; margin-bottom: 0.35rem; }
.form-text  { color: var(--tp-text-muted); }

.form-check-input {
    background-color: var(--tp-void-deep);
    border-color: var(--tp-border-bright);
}
.form-check-input:checked {
    background-color: var(--tp-violet-deep);
    border-color: var(--tp-violet-deep);
}

/* Read-only is distinct from disabled */
.form-control[readonly] {
    background-color: var(--tp-surface-2);
    color: var(--tp-text-muted);
    border-style: dashed;
}

.invalid-feedback { color: #fca5a5; }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--tp-danger); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tp-text);
    --bs-table-border-color: var(--tp-border);
    --bs-table-striped-bg: rgba(168, 85, 247, 0.05);
    --bs-table-striped-color: var(--tp-text);
    --bs-table-hover-bg: rgba(168, 85, 247, 0.10);
    --bs-table-hover-color: #fff;
}

.table > thead {
    background-color: var(--tp-surface-2);
}
.table > thead th {
    color: var(--tp-fur);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--tp-border-bright);
}

/* Figures line up in columns instead of jittering */
.table td.numeric,
.table td .numeric { font-variant-numeric: tabular-nums; }

/* Wide tables scroll inside their own container, never the page body */
.table-responsive { overflow-x: auto; }

/* ==========================================================================
   Dropdowns, alerts, badges, misc
   ========================================================================== */

.dropdown-menu {
    background-color: var(--tp-surface-2);
    border: 1px solid var(--tp-border-bright);
    border-radius: var(--tp-radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.dropdown-item { color: var(--tp-text); }
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(168, 85, 247, 0.16);
    color: #fff;
}
.dropdown-header { color: var(--tp-fur-dim); text-transform: uppercase;
                   letter-spacing: 0.06em; font-size: 0.74rem; }
.dropdown-divider { border-color: var(--tp-border); }

.alert { border-radius: var(--tp-radius); border-width: 1px; border-left-width: 3px; }
.alert-success { background-color: rgba(52,211,153,0.10); border-color: var(--tp-success); color: #a7f3d0; }
.alert-danger  { background-color: rgba(248,113,113,0.10); border-color: var(--tp-danger);  color: #fecaca; }
.alert-warning { background-color: rgba(251,191,36,0.10);  border-color: var(--tp-warning); color: #fde68a; }
.alert-info    { background-color: rgba(96,165,250,0.10);  border-color: var(--tp-info);    color: #bfdbfe; }

.badge.bg-primary   { background-color: var(--tp-violet-deep) !important; }
.badge.bg-secondary { background-color: var(--tp-border-bright) !important; color: var(--tp-text); }

.progress { background-color: var(--tp-surface-3); }
.progress-bar { background-color: var(--tp-violet-deep); }

.pagination .page-link {
    background-color: var(--tp-surface-2);
    border-color: var(--tp-border);
    color: var(--tp-fur);
}
.pagination .page-item.active .page-link {
    background-color: var(--tp-violet-deep);
    border-color: var(--tp-violet-deep);
    color: #fff;
}

.text-muted { color: var(--tp-text-muted) !important; }
.border     { border-color: var(--tp-border) !important; }
.bg-body-tertiary { background-color: var(--tp-surface) !important; }

/* ==========================================================================
   Login page — the front door gets the full treatment
   ========================================================================== */

.card.card-login,
#login-card,
.login-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(124,58,237,0.14), transparent 55%),
        var(--tp-surface);
    border: 1px solid var(--tp-border-bright);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

/* Oversized raccoon mask watermark, low opacity so it never fights the text */
.card.card-login::after,
#login-card::after,
.login-panel::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 132px;
    height: 79px;
    background: url("../img/raccoon-mask-solid.353542b75f10.svg") center / contain no-repeat;
    /* Fully inside the panel — a cropped mask reads as stray circles rather
       than as the corp device. */
    opacity: 0.13;
    pointer-events: none;
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

* { scrollbar-color: var(--tp-border-bright) var(--tp-void); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--tp-void); }
::-webkit-scrollbar-thumb {
    background: var(--tp-border-bright);
    border-radius: 6px;
    border: 2px solid var(--tp-void);
}
::-webkit-scrollbar-thumb:hover { background: var(--tp-violet-dim); }

/* ==========================================================================
   Motion — honour the OS setting
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
}