/*
 * HARUKAZE SPORT MANAGEMENT — Modern Cyan / Red / Gold / Black
 * Stylesheet ini sengaja diletakkan setelah CSS bawaan setiap halaman.
 * Ubah variabel di bawah untuk mengganti palet seluruh aplikasi.
 */
:root {
    --cyan: #39d5ff;
    --cyan-bright: #68e4ff;
    --cyan-deep: #0899cc;
    --blue: #16bde8;
    --red: #ff234f;
    --red-deep: #c81038;
    --gold: #f6c945;
    --gold-bright: #ffdd6b;
    --black: #02060d;
    --ink: #050c16;
    --panel: #091729;
    --panel2: #0e2036;
    --panel3: #132943;
    --text: #f5fbff;
    --muted: #9db1c5;
    --line: rgba(104, 228, 255, .18);
    --line-strong: rgba(104, 228, 255, .38);
    --shadow: 0 18px 48px rgba(0, 0, 0, .34);
    --cyan-glow: 0 0 24px rgba(57, 213, 255, .15);
    color-scheme: dark;
}

* {
    scrollbar-color: var(--cyan-deep) var(--ink);
}

::selection {
    color: #fff;
    background: var(--red);
}

html {
    background: var(--black);
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(57, 213, 255, .13), transparent 30rem),
        radial-gradient(circle at 92% 12%, rgba(255, 35, 79, .10), transparent 28rem),
        linear-gradient(145deg, var(--black), #06101e 54%, #02060d) fixed !important;
    color: var(--text) !important;
    accent-color: var(--cyan);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(57, 213, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 213, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a {
    color: var(--cyan-bright);
}

a:hover {
    color: var(--gold-bright);
}

h1,
h2,
h3,
.section-title,
.event-title,
.titleline h2,
.stats-title {
    text-wrap: balance;
}

nav,
.navbar,
.topbar,
.admin-header,
header.navbar {
    background: rgba(2, 8, 17, .92) !important;
    border-color: var(--line) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(15px);
}

nav a,
.nav-links a,
.navlinks a,
.admin-header a {
    color: #eaf8ff;
}

nav a:hover,
.nav-links a:hover,
.navlinks a:hover,
.navlinks a.active,
.nav-links a.active {
    color: var(--cyan-bright) !important;
    text-shadow: 0 0 16px rgba(57, 213, 255, .36);
}

.logo img,
.brand img,
nav img {
    filter: drop-shadow(0 0 10px rgba(57, 213, 255, .20));
}

.hero {
    border-color: var(--line) !important;
}

.hero h1,
.top h1,
.section-title h2,
.event-card h2,
.category h2,
.panel > h2,
.stats-title,
.titleline h2 {
    color: var(--gold-bright) !important;
}

.eyebrow,
.event-title,
.event-documents-title,
.activity-count,
label,
th {
    color: var(--cyan-bright) !important;
}

.panel,
.card,
.event-card,
.profile-card,
.category,
.event-select,
.control-panel,
.activity-panel,
.stat-card,
.stat-box,
.agebox,
.athlete-row,
.viewer,
.document-card,
.form-card,
.content-card,
.modal-content,
.box {
    background: linear-gradient(145deg, rgba(14, 32, 54, .97), rgba(6, 17, 31, .98)) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow), var(--cyan-glow);
}

.panel:hover,
.event-card:hover,
.athlete-row:hover,
.document:hover {
    border-color: var(--line-strong) !important;
}

.event-card,
.profile-card,
.panel,
.category,
.control-panel,
.activity-panel,
.form-card,
.content-card {
    border-radius: 16px !important;
}

.profile-card,
.activity-item,
.athlete-row {
    border-left-color: var(--cyan) !important;
}

.profile-card {
    border-top-color: var(--red) !important;
}

.activity-item:hover,
.athlete-row:hover {
    border-left-color: var(--red) !important;
}

.stat,
.bio-item,
.achievement,
.document,
.rincian-box,
.point,
.link,
.event-documents,
.event-document-link,
.manual-row,
.achievement-row {
    background: rgba(4, 13, 25, .74) !important;
    border-color: rgba(104, 228, 255, .12) !important;
}

.stat {
    border-left-color: var(--cyan) !important;
}

.stat strong,
.stat b,
.score strong,
.rank,
.activity-count {
    color: var(--cyan-bright) !important;
}

.stat.gold strong,
.position,
.event-status,
.badge:not(.badge-danger):not(.danger):not(.Ditolak),
.gold {
    color: var(--gold-bright) !important;
}

.muted,
.small,
.meta,
.description,
.privacy,
.hero p,
.section-title p,
.event-meta,
.activity-meta,
.activity-time,
.empty,
.empty-activity {
    color: var(--muted) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: rgba(3, 13, 25, .90) !important;
    color: var(--text) !important;
    border: 1px solid rgba(104, 228, 255, .25) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

input::placeholder,
textarea::placeholder {
    color: #71869b !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cyan) !important;
    outline-offset: 2px;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 4px rgba(57, 213, 255, .12) !important;
}

button,
.btn,
.button,
.download,
.btn-primary,
.btn-detail,
input[type="submit"] {
    background: linear-gradient(135deg, var(--cyan-bright), var(--cyan-deep)) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    color: #00111a !important;
    box-shadow: 0 9px 22px rgba(8, 153, 204, .22) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

button:hover,
.btn:hover,
.button:hover,
.download:hover,
.btn-primary:hover,
.btn-detail:hover,
input[type="submit"]:hover {
    color: #00111a !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(57, 213, 255, .28) !important;
}

.btn-warning,
.gold,
.btn-invoice,
.event-status,
.tab.active {
    background: linear-gradient(135deg, var(--gold-bright), #dca90e) !important;
    color: #171000 !important;
    border-color: rgba(255, 221, 107, .62) !important;
    box-shadow: 0 9px 22px rgba(246, 201, 69, .18) !important;
}

.danger,
.btn-danger,
.btn-delete,
.view,
.kumite,
button[name="decision"][value="Ditolak"] {
    background: linear-gradient(135deg, var(--red), var(--red-deep)) !important;
    color: #fff !important;
    border-color: rgba(255, 92, 121, .54) !important;
    box-shadow: 0 9px 22px rgba(255, 35, 79, .18) !important;
}

.btn-outline,
.muted-button,
.login,
.btn-login,
.tab:not(.active),
.back {
    background: rgba(57, 213, 255, .045) !important;
    border: 1px solid rgba(104, 228, 255, .38) !important;
    color: var(--cyan-bright) !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.muted-button:hover,
.login:hover,
.btn-login:hover,
.tab:not(.active):hover,
.back:hover {
    background: rgba(57, 213, 255, .13) !important;
    color: #fff !important;
}

.btn-wa,
.badge-success,
.Terverifikasi,
.ok {
    background: rgba(57, 213, 255, .13) !important;
    border-color: rgba(57, 213, 255, .46) !important;
    color: var(--cyan-bright) !important;
}

.badge-danger,
.Ditolak,
.err {
    background: rgba(255, 35, 79, .14) !important;
    border-color: rgba(255, 35, 79, .48) !important;
    color: #ff9aae !important;
}

.Pending,
.badge-new {
    background: rgba(246, 201, 69, .14) !important;
    border-color: rgba(246, 201, 69, .42) !important;
    color: var(--gold-bright) !important;
}

table {
    background: transparent !important;
    border-color: var(--line) !important;
}

th {
    background: rgba(57, 213, 255, .07) !important;
    border-color: rgba(104, 228, 255, .16) !important;
    letter-spacing: .045em;
}

td {
    border-color: rgba(104, 228, 255, .11) !important;
}

tbody tr:hover td {
    background: rgba(57, 213, 255, .045) !important;
}

.portrait,
.photo,
.event-cover {
    border-color: var(--cyan) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 18px rgba(57, 213, 255, .12);
}

.kata,
.point.open {
    background: rgba(57, 213, 255, .18) !important;
    color: var(--cyan-bright) !important;
    border: 1px solid rgba(57, 213, 255, .42);
}

.point.student {
    background: rgba(255, 35, 79, .14) !important;
    color: #ff9aae !important;
    border: 1px solid rgba(255, 35, 79, .35);
}

.achievement {
    border-left-color: var(--cyan) !important;
}

.competition {
    background: rgba(246, 201, 69, .14) !important;
    color: var(--gold-bright) !important;
    border: 1px solid rgba(246, 201, 69, .28);
}

.flag {
    background: linear-gradient(var(--red) 0 50%, #fff 50%) !important;
}

hr {
    border-color: var(--line) !important;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--ink);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--cyan-deep), var(--cyan));
    border: 3px solid var(--ink);
    border-radius: 99px;
}

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