/* UTT Platform Custom Styles */

/* ── Global dark-background text ───────────────────────────────── */
:root {
    --bs-body-color: #e8edf5;
    --bs-heading-color: #ffffff;
    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --clr-purple:  #8b5cf6;
    --clr-amber:   #f59e0b;
    --clr-emerald: #10b981;
}
body {
    color: #e8edf5;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
}
p, li, label, .form-label, .form-text {
    color: #cbd5e1;
}
/* Muted text lightened for dark bg */
.text-muted {
    color: #94a3b8 !important;
}
/* Links on dark bg */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
    color: #93c5fd;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover {
    color: #bfdbfe;
}

/* General */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Navbar */
.navbar-brand i {
    font-size: 1.5rem;
}

/* ── Cards — glassmorphism dark-surface design ─────────────────── */
.card {
    background: rgba(10, 20, 45, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(99, 179, 255, 0.15);
    border-top: 2px solid rgba(99, 179, 255, 0.28);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.card:hover {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 179, 255, 0.15);
    transform: translateY(-1px);
}
@media (pointer: coarse) {
    .card {
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
    }
}

/* Headings and text inside cards inherit the global dark-bg palette */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
    color: #ffffff !important;
}
.card .text-muted {
    color: #94a3b8 !important;
}
.card a:not(.btn) {
    color: #93c5fd;
}
.card a:not(.btn):hover {
    color: #bfdbfe;
}

/* Card header */
.card-header {
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

/* Form controls inside cards */
.card .form-control,
.card .form-select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}
.card .form-control::placeholder {
    color: #64748b;
}
.card .form-control:focus,
.card .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(99, 179, 255, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 179, 255, 0.18) !important;
}

/* Tables inside cards */
.card .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(99, 179, 255, 0.06);
    color: #e2e8f0;
}
.card .table th {
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.1);
}
.card .table td {
    border-color: rgba(255, 255, 255, 0.06);
}

/* List-group items inside cards */
.card .list-group-item,
.list-group-item {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    --bs-list-group-color: #e2e8f0;
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: rgba(255, 255, 255, 0.08);
}
.card .list-group-item .text-muted,
.list-group-item .text-muted,
.card .list-group-item small,
.list-group-item small {
    color: #94a3b8 !important;
}

/* Coloured stat cards keep their own bg */
.card.bg-primary .card-footer,
.card.bg-success .card-footer,
.card.bg-info .card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tables */
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Badges */
.badge {
    font-weight: 500;
}

/* List groups */
.list-group-item {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child {
    border-top: none;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Buttons */
.btn {
    font-weight: 500;
}

/* Profile avatar placeholder */
.bg-primary.rounded-circle {
    font-weight: 600;
}

/* Messages/Alerts */
.messages .alert {
    margin-bottom: 0.5rem;
}

.messages .alert:last-child {
    margin-bottom: 1rem;
}

/* Breadcrumbs */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

/* Footer */
footer {
    margin-top: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
    }
}

/* Safe-area insets — notched iPhones (X, 11, 12+, Dynamic Island) */
#navToggle {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
}
.quick-feedback-btn {
    bottom: max(84px, calc(84px + env(safe-area-inset-bottom)));
    right: max(20px, calc(20px + env(safe-area-inset-right)));
}
.message-notification-badge {
    bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    right: max(20px, calc(20px + env(safe-area-inset-right)));
}

/* Dropdown menu styling */
.dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
}

.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* Tag badges */
.badge a {
    text-decoration: none;
}

.badge a:hover {
    opacity: 0.8;
}

/* ── Animated background orbs ─────────────────────────────────── */
.bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.bg-orb-1 {
    width: 65vw; height: 65vw;
    background: radial-gradient(circle, rgba(99, 179, 255, 0.32) 0%, transparent 70%);
    top: -15%; left: -15%;
    animation: orb-drift 22s ease-in-out infinite alternate;
}
.bg-orb-2 {
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.26) 0%, transparent 70%);
    bottom: -10%; right: -15%;
    animation: orb-drift-b 28s ease-in-out infinite alternate;
}
.bg-orb-3 {
    width: 45vw; height: 45vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 70%);
    top: 30%; left: 55%;
    animation: orb-drift-c 18s ease-in-out infinite alternate;
    animation-delay: -9s;
}
@keyframes orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(10vw, 8vh, 0) scale(1.08); }
}
@keyframes orb-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-8vw, -6vh, 0) scale(1.05); }
}
@keyframes orb-drift-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-5vw, 10vh, 0) scale(0.95); }
}

/* ── Scroll fade-in ───────────────────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.is-visible {
    opacity: 1;
    transform: none;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up { animation: none; transition: none; opacity: 1; transform: none; }
    .bg-orb { animation: none; }
}

/* ── Colour accents ───────────────────────────────────────────── */
.text-purple  { color: var(--clr-purple)  !important; }
.text-amber   { color: var(--clr-amber)   !important; }
.text-emerald { color: var(--clr-emerald) !important; }