/* 
 * ==========================================================================
 * LUXURY GYM DASHBOARD THEME (BLACK × ORANGE) - STYLE SHEET OVERRIDES
 * ==========================================================================
 */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

:root {
    --bg-primary: #0B0B0B;
    --bg-sidebar: #111111;
    --bg-card: #171717;
    --border-color: #2A2A2A;
    --color-primary: #F97316;
    --color-hover: #EA580C;
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --color-success: #22C55E;
    --color-danger: #EF4444;
}

/* Base Styles */
body, .bg-gray-100 {
    background-color: var(--bg-primary) !important;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary) !important;
    position: relative;
    z-index: 0;
}

main {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Typography Hierarchy */
h1, h2, .card h3, .card-title, .page-title {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 0.05em !important;
    font-weight: normal !important;
}

/* Sidebar Custom Overrides */
#sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color) !important;
}

#sidebar nav a {
    color: var(--text-secondary) !important;
    transition: all 0.3s ease !important;
    border-left: 4px solid transparent !important;
}

#sidebar nav a:hover {
    background-color: rgba(249, 115, 22, 0.08) !important;
    color: var(--text-primary) !important;
}

#sidebar nav a:hover i {
    color: var(--color-primary) !important;
}

/* Active Sidebar Link Class (Injected via JS) */
.active-menu {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: var(--text-primary) !important;
    border-left: 4px solid var(--color-primary) !important;
}

.active-menu i {
    color: var(--color-primary) !important;
}

/* Navbar Custom Overrides */
header.sticky {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

header.sticky h2 {
    color: var(--text-primary) !important;
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 0.05em !important;
}

header.sticky p {
    color: var(--text-secondary) !important;
}

header.sticky div {
    color: var(--text-primary) !important;
}

/* Card Styling */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.14) !important;
    border-color: rgba(249, 115, 22, 0.35) !important;
}

/* Left Card Borders (Unified Orange accent) */
.border-l-4 {
    border-left-color: var(--color-primary) !important;
    border-left-width: 4px !important;
}

/* Text Overrides */
.text-gray-800, .text-gray-700, .text-slate-800, .text-slate-700 {
    color: var(--text-primary) !important;
}

.text-gray-500, .text-slate-500, .text-gray-400, .text-slate-400 {
    color: var(--text-secondary) !important;
}

/* Quick Actions Shortcut Overrides */
.grid-cols-1.md\:grid-cols-3 a.card i {
    font-size: 2rem !important;
    color: var(--color-primary) !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.grid-cols-1.md\:grid-cols-3 a.card:hover i {
    background-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4) !important;
}

/* Input Fields & Forms Styling */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="month"], 
select, 
textarea {
    background-color: #202020 !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 10px 16px;
    outline: none !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
input[type="number"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
select:focus, 
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.25) !important;
    background-color: #262626 !important;
}

/* Tables Styling */
table {
    border-collapse: collapse !important;
    width: 100% !important;
}

table tr {
    border-color: var(--border-color) !important;
}

table thead tr {
    background-color: #111111 !important;
    border-bottom: 2px solid var(--border-color) !important;
}

table th {
    color: var(--text-primary) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}

table td {
    color: #E4E4E7 !important;
    padding: 14px 16px !important;
}

table tbody tr {
    transition: background-color 0.2s ease !important;
}

table tbody tr:hover {
    background-color: rgba(249, 115, 22, 0.05) !important;
}

/* Pagination Overrides */
a[href*="page="] {
    transition: all 0.2s ease !important;
}

/* Custom Checkbox accent color */
input[type="checkbox"] {
    accent-color: var(--color-primary) !important;
}

/* Button & Link Overrides */
button, .btn, a[class*="bg-indigo-600"], a[class*="bg-blue-500"] {
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}

.bg-indigo-600, .bg-blue-500, .bg-purple-600, .bg-indigo-500, .bg-green-600 {
    background-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

.hover\:bg-indigo-700:hover, 
.hover\:bg-blue-600:hover, 
.hover\:bg-purple-700:hover, 
.hover\:bg-indigo-600:hover, 
.hover\:bg-green-700:hover {
    background-color: var(--color-hover) !important;
}

/* Success & Danger Badge/Colors */
.bg-green-500 {
    background-color: var(--color-success) !important;
}

.bg-red-500 {
    background-color: var(--color-danger) !important;
}

.text-green-600 {
    color: var(--color-success) !important;
}

.text-red-600 {
    color: var(--color-danger) !important;
}

/* Profile image circles */
img[class*="rounded-full"] {
    border: 2px solid var(--border-color) !important;
}

/* Custom Scrollbar for Sidebar and content */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ==========================================================================
 * DECORATIVE SPARTAN LOGO SKETCH & ORANGE EMBERS EFFECTS
 * ==========================================================================
 */

@keyframes floatEmbers {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    50% { background-position: 15px -30px, -20px 25px, 10px -15px, -5px 10px; }
    100% { background-position: 0 0, 0 0, 0 0, 0 0; }
}

/* Background Spartan Silhouette Setup */
body::before {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/logo.png') !important;
    background-repeat: no-repeat;
    filter: grayscale(1) brightness(0.12) opacity(0.045);
    pointer-events: none;
    z-index: -1 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page-Specific Silhouette Positions */
body::before {
    background-position: center;
    background-size: 450px auto;
}

body.page-dashboard::before {
    background-position: right 5% center;
    background-size: 620px auto;
}

body.page-data_member::before, 
body.page-member::before,
body.page-tambah_member::before,
body.page-edit_member::before {
    background-position: left 5% bottom 5%;
    background-size: 420px auto;
}

body.page-pembayaran::before, 
body.page-data_pembayaran::before,
body.page-tambah_pembayaran::before,
body.page-riwayat_pembayaran::before {
    background-position: right 5% bottom 5%;
    background-size: 440px auto;
}

body.page-membership::before,
body.page-absensi::before,
body.page-kehadiran::before {
    background-position: center;
    background-size: 500px auto;
    filter: grayscale(1) brightness(0.08) opacity(0.03) !important;
}

body.page-profil::before {
    background-position: center;
    background-size: 550px auto;
    filter: grayscale(1) brightness(0.1) opacity(0.04);
}

body.page-laporan::before, 
body.page-data_laporan::before {
    background-position: center;
    background-size: 700px auto;
    filter: grayscale(1) brightness(0.08) opacity(0.03);
}

/* Corner Radial Glows */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.05) 0%, transparent 55%),
        radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.06) 0%, transparent 45%);
    pointer-events: none;
    z-index: -1;
}

/* Orange Embers and Particle Overlay */
.grunge-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.07;
    background-image: 
        radial-gradient(circle at 12% 18%, #F97316 1.5px, transparent 1.5px),
        radial-gradient(circle at 88% 82%, #F97316 2px, transparent 2px),
        radial-gradient(circle at 82% 12%, #FB923C 1px, transparent 1px),
        radial-gradient(circle at 18% 78%, #F97316 2px, transparent 2px),
        radial-gradient(circle at 45% 85%, #F97316 1.5px, transparent 1.5px);
    background-size: 240px 240px, 320px 320px, 280px 280px, 200px 200px, 380px 380px;
    animation: floatEmbers 24s infinite linear;
}

/* Modals Override */
div[class*="fixed"][class*="z-50"][class*="bg-black"],
div[class*="fixed"][class*="inset-0"][class*="bg-opacity-"] {
    backdrop-filter: blur(8px) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

div[class*="fixed"] .bg-white,
.modal-content,
.sweet-alert {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-primary) !important;
}

/* Alerts Overrides */
.bg-green-100, .bg-green-50, .bg-green-500\/10, .bg-green-500\/20, div[class*="alert-success"] {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    color: #22C55E !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
.bg-red-100, .bg-red-50, .bg-red-500\/10, .bg-red-500\/20, div[class*="alert-danger"] {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #EF4444 !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
.bg-yellow-100, .bg-yellow-50, .bg-yellow-500\/10, .bg-yellow-500\/20, div[class*="alert-warning"] {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #F59E0B !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
.bg-blue-100, .bg-blue-50, .bg-blue-500\/10, .bg-blue-500\/20, .bg-indigo-100, .bg-indigo-50, div[class*="alert-info"] {
    background-color: rgba(249, 115, 22, 0.08) !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
    color: #F97316 !important;
    border-radius: 12px !important;
    padding: 14px !important;
}

/* Status Badges Overrides */
span[class*="bg-green-"], .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #22C55E !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}
span[class*="bg-red-"], .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}
span[class*="bg-yellow-"], span[class*="bg-orange-"], .bg-yellow-100, .bg-orange-100 {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}

/* Headings & Form Labels Theme Overrides */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
}

/* ==========================================================================
   GLOBAL COMPONENT OVERRIDES FOR BLACK × ORANGE DESIGN SYSTEM
   ========================================================================== */

/* Background & Utility overrides */
.bg-white, 
[class*="bg-white"], 
div[class*="bg-white"] {
    background-color: #171717 !important;
}

.bg-gray-50, 
.bg-gray-100, 
.bg-slate-50, 
.bg-slate-100 {
    background-color: #0B0B0B !important;
}

.bg-gray-200, 
.bg-gray-300, 
.bg-slate-200, 
.bg-slate-300 {
    background-color: #1F1F1F !important;
}

/* Border Overrides */
.border-gray-100, 
.border-gray-200, 
.border-gray-300, 
.border-slate-100, 
.border-slate-200, 
.border-slate-300 {
    border-color: #2A2A2A !important;
}

/* Text Overrides */
.text-gray-900, 
.text-gray-800, 
.text-slate-900, 
.text-slate-800 {
    color: #FFFFFF !important;
}

.text-gray-600, 
.text-gray-700, 
.text-slate-600, 
.text-slate-700 {
    color: #A1A1AA !important;
}

.text-gray-500, 
.text-slate-500 {
    color: #888888 !important;
}

/* Table Styling Overrides */
table, .table {
    background-color: #171717 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

table tr, .table tr {
    background-color: #171717 !important;
    border-bottom: 1px solid #2A2A2A !important;
}

table th, .table th {
    background-color: #1F1F1F !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #2A2A2A !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
}

table td, .table td {
    color: #FFFFFF !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #2A2A2A !important;
}

table tbody tr:hover, .table tbody tr:hover {
    background-color: rgba(249, 115, 22, 0.08) !important;
}

/* Button Overrides */
.bg-indigo-600, 
.bg-blue-600, 
.bg-orange-500, 
button[type="submit"]:not(.bg-red-600):not(.bg-gray-500):not(.bg-red-500),
a[class*="bg-indigo-"], 
a[class*="bg-blue-"],
button[class*="bg-indigo-"],
button[class*="bg-blue-"] {
    background-color: #F97316 !important;
    color: #FFFFFF !important;
    border: 1px solid #F97316 !important;
    transition: all 0.3s ease !important;
}

.bg-indigo-600:hover, 
.bg-blue-600:hover, 
.bg-orange-500:hover, 
button[type="submit"]:not(.bg-red-600):not(.bg-gray-500):not(.bg-red-500):hover,
a[class*="bg-indigo-"]:hover, 
a[class*="bg-blue-"]:hover,
button[class*="bg-indigo-"]:hover,
button[class*="bg-blue-"]:hover {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
}

.bg-gray-500, 
.bg-gray-600, 
a.bg-gray-500, 
button.bg-gray-500 {
    background-color: #2A2A2A !important;
    color: #FFFFFF !important;
    border: 1px solid #2A2A2A !important;
    transition: all 0.3s ease !important;
}

.bg-gray-500:hover, 
.bg-gray-600:hover, 
a.bg-gray-500:hover, 
button.bg-gray-500:hover {
    background-color: #3E3E3E !important;
    border-color: #3E3E3E !important;
}

.bg-red-600, 
.bg-red-500, 
button.bg-red-600, 
button.bg-red-500 {
    background-color: #EF4444 !important;
    color: #FFFFFF !important;
    border: 1px solid #EF4444 !important;
    transition: all 0.3s ease !important;
}

.bg-red-600:hover, 
.bg-red-500:hover, 
button.bg-red-600:hover, 
button.bg-red-500:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* Custom placeholder */
input::placeholder,
textarea::placeholder {
    color: #808080 !important;
    opacity: 1 !important;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #808080 !important;
}