/* === GLOBAL MATRIX VIBES === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Consolas", "Fira Code", monospace;
    background-color: #020a02;
    color: #d1fae5;
    background-image:
        radial-gradient(circle at 0 0, #16a34a22 0, transparent 55%),
        radial-gradient(circle at 100% 0, #22c55e22 0, transparent 55%),
        repeating-linear-gradient(
            to bottom,
            rgba(22, 163, 74, 0.12) 0px,
            rgba(22, 163, 74, 0.12) 1px,
            transparent 1px,
            transparent 3px
        );
}

/* narrow container */
.container {
    max-width: 960px;
}

/* === NAVBAR === */
.navbar {
    background: linear-gradient(90deg, #001800, #002200);
    border-bottom: 1px solid #16a34a55;
    box-shadow:
        0 0 18px rgba(22, 163, 74, 0.5),
        0 20px 50px rgba(0, 0, 0, 0.9);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #bbf7d0 !important;
    font-size: 0.9rem;
}

/* === CARDS (GLASS HACK PANELS) === */
.card {
    border-radius: 14px;
    border: 1px solid #16a34a55;
    background: linear-gradient(
        135deg,
        rgba(0, 24, 0, 0.96),
        rgba(0, 16, 0, 0.9)
    );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.9),
        0 18px 45px rgba(0, 0, 0, 1);
    color: #d1fae5;
}

.card-title {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: #4ade80;
}

/* === BUTTONS === */

.btn {
    border-radius: 999px;
    font-weight: 500;
    padding-inline: 16px;
    padding-block: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem;
    transition:
        transform 0.08s ease-out,
        box-shadow 0.08s ease-out,
        background-color 0.12s ease-out,
        border-color 0.12s ease-out;
}

/* primary = neon green */
.btn-primary,
.btn-success {
    border: 1px solid #22c55e;
    background: radial-gradient(circle at 0 0, #22c55e, #15803d);
    color: #022c22;
    box-shadow:
        0 0 16px rgba(34, 197, 94, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.9);
}

/* outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    border-width: 1px;
    background: transparent;
    color: #bbf7d0;
}

.btn-outline-primary {
    border-color: #22c55e;
}

.btn-outline-secondary {
    border-color: #4ade80;
}

.btn-outline-danger {
    border-color: #f97373;
    color: #fecaca;
}

/* hover */
.btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 24px rgba(34, 197, 94, 0.8),
        0 18px 40px rgba(0, 0, 0, 1);
    filter: brightness(1.05);
}

/* delete hover = red */
.btn-outline-danger:hover {
    background: radial-gradient(circle at 0 0, #f97373, #7f1d1d);
    color: #fff;
}

/* === FORMS === */
.form-control {
    border-radius: 999px;
    border: 1px solid #16a34a77;
    background-color: rgba(0, 24, 0, 0.95);
    color: #bbf7d0;
    padding-inline: 16px;
    padding-block: 7px;
    font-size: 0.9rem;
}

.form-control:focus {
    border-color: #22c55e;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.7),
        0 0 20px rgba(22, 163, 74, 0.8);
    background-color: rgba(0, 32, 0, 0.98);
}

/* file input */
.form-control[type="file"]::file-selector-button {
    border-radius: 999px;
    border: 1px solid #22c55e;
    background: radial-gradient(circle at 0 0, #22c55e, #16a34a);
    color: #022c22;
    padding-inline: 12px;
    margin-right: 12px;
    cursor: pointer;
}

/* === TABLE (FILES) === */
.table {
    color: #bbf7d0;
    margin-bottom: 0;
    border-collapse: collapse;
}

.table thead {
    background: linear-gradient(90deg, #001800, #003000);
    border-bottom: 1px solid #16a34a77;
}

.table thead th {
    border-bottom: none;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

.table tbody tr {
    border-color: #064e3b;
}

.table tbody tr:nth-child(odd) {
    background-color: rgba(0, 24, 0, 0.85);
}

.table tbody tr:nth-child(even) {
    background-color: rgba(0, 16, 0, 0.85);
}

.table tbody tr:hover {
    background: radial-gradient(circle at 0 0, #16a34a44, transparent 55%);
}

/* === ALERTS === */

.alert {
    border-radius: 999px;
    border: 1px solid #16a34a88;
    background: linear-gradient(90deg, #012012, #022c22);
    color: #bbf7d0;
    box-shadow:
        0 0 18px rgba(22, 163, 74, 0.5),
        0 10px 30px rgba(0, 0, 0, 1);
}

.alert-danger {
    border-color: #f97373aa;
    background: linear-gradient(90deg, #220202, #450a0a);
}

.alert-warning {
    border-color: #facc15aa;
    background: linear-gradient(90deg, #221a02, #422006);
}

.alert-info {
    border-color: #22d3eeaa;
    background: linear-gradient(90deg, #041f26, #082f49);
}

.alert-success {
    border-color: #22c55eaa;
}

/* === LINKS === */

a {
    color: #4ade80;
    text-decoration: none;
}

a:hover {
    color: #bbf7d0;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}

/* === HEADERS === */

h3.mb-3 {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1rem;
    color: #4ade80;
}

/* === RESPONSIVE === */

@media (max-width: 576px) {
    .card {
        margin-inline: -4px;
    }

    .navbar .container-fluid {
        padding-inline: 10px;
    }

    h3.mb-3 {
        font-size: 0.9rem;
    }
}