/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght=300;400;600;800&display=swap');

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: #F5F5DC; 
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent; 
}

img { 
    -webkit-user-drag: none; 
    pointer-events: none; 
}

.glass-card { 
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

.input-field { 
    background: rgba(255, 255, 255, 0.6); 
    border: 1px solid rgba(0,0,0,0.05); 
    transition: all 0.3s ease; 
}

.input-field:focus-within { 
    border-color: #ea580c; 
    background: white; 
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.1); 
}

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input[type=number], 
input[type=text], 
input[type=password] { 
    -moz-appearance: textfield; 
    -webkit-user-select: auto; 
    user-select: auto; 
}

.hidden { 
    display: none !important; 
}

.counter-btn { 
    background: #f1f5f9; 
    border: 1px solid #e2e8f0; 
    transition: all 0.2s ease; 
    width: 56px; 
    height: 56px; 
    border-radius: 2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: #1e293b; 
    cursor: pointer; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

.counter-btn:active { 
    transform: scale(0.95); 
    background: #e2e8f0; 
}

.counter-btn.minus { color: #ef4444; }
.counter-btn.plus { color: #22c55e; }

.score-input { 
    width: 140px; 
    text-align: center; 
    font-size: 2.8rem; 
    font-weight: 800; 
    background: transparent; 
    border: none; 
    outline: none; 
    color: #ea580c; 
    font-family: 'Plus Jakarta Sans', monospace; 
}

@media (max-width: 480px) { 
    .counter-btn { width: 48px; height: 48px; font-size: 1.5rem; } 
    .score-input { width: 110px; font-size: 2.2rem; } 
}

.exercise-item { transition: all 0.2s ease; }
.exercise-item.hidden-item { display: none; }

.custom-alert { 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: #1e293b; 
    color: white; 
    padding: 12px 24px; 
    border-radius: 50px; 
    font-size: 14px; 
    font-weight: 600; 
    z-index: 1000; 
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); 
    animation: slideUp 0.3s ease; 
}

@keyframes slideUp { 
    from { opacity: 0; transform: translateX(-50%) translateY(20px); } 
    to { opacity: 1; transform: translateX(-50%) translateY(0); } 
}

.search-wrapper { position: relative; display: inline-block; }
.search-input { padding-left: 2.5rem; padding-right: 2.5rem; }

.search-clear { 
    position: absolute; 
    right: 0.75rem; 
    top: 50%; 
    transform: translateY(-50%); 
    background: transparent; 
    border: none; 
    color: #94a3b8; 
    cursor: pointer; 
    font-size: 0.875rem; 
    padding: 0.25rem; 
    border-radius: 9999px; 
    transition: all 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 24px; 
    height: 24px; 
}

.search-clear:hover { background: #e2e8f0; color: #475569; }
.search-clear:active { transform: scale(0.9); }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.875rem; pointer-events: none; }

video { width: 100%; height: 100%; object-fit: cover; background: #1e293b; cursor: pointer; }
.doc-btn { transition: all 0.2s; }
.doc-btn:active { transform: scale(0.96); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-container { background: white; border-radius: 2rem; width: 90%; max-width: 1000px; height: 80%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3); }
.modal-header { padding: 1rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; }
.modal-body { flex: 1; overflow: auto; background: #f1f5f9; }
.modal-body iframe { width: 100%; height: 100%; border: none; }
.close-modal { background: #ef4444; color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-weight: bold; transition: 0.2s; }
.close-modal:hover { background: #dc2626; transform: scale(1.05); }

/* Custom styles for high level choices wrapper */
.hub-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub-card:active {
    transform: scale(0.98);
}

/* ==================== THEME SWITCHER ==================== */
.theme-option {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 3px solid transparent;
}
.theme-option.active {
    border-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234,88,12,0.3);
}
.theme-option:hover {
    transform: scale(1.03);
}
.theme-option:active {
    transform: scale(0.97);
}

/* ==================== SOLDIER THEME ==================== */
/* Military olive — readable, tactical, not dark-cave.
   BG #3A4A2E | Surface #4A5A38 | Card #526240 | Accent #7A9A50
   Khaki #C4C49A | Cream #E8E4D4 | Muted #A8A878 */

[data-theme="soldier"] body,
body[data-theme="soldier"] {
    background-color: #121710 !important;
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(30, 42, 28, 0.45) 0%, rgba(18, 23, 16, 0.94) 85%),
        url('images/camo_soldier.svg') !important;
    background-size: 100% 100%, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
    background-attachment: fixed !important;
}

/* Sections backgrounds - transparent to let body camo show seamlessly */
[data-theme="soldier"] #dashboard-page,
[data-theme="soldier"] #detail-page,
[data-theme="soldier"] #profile-page,
[data-theme="soldier"] #admin-dashboard,
[data-theme="soldier"] #admin-settings {
    background: transparent !important;
}

/* Glass cards — Sleek dark-glass tactical panels with laser accent border and drop shadows */
[data-theme="soldier"] .glass-card {
    background: rgba(28, 36, 24, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(168, 200, 112, 0.25) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.45), 
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border-radius: 2rem !important;
}

/* Input fields */
[data-theme="soldier"] .input-field {
    background: rgba(18, 23, 15, 0.9) !important;
    border: 1px solid rgba(168, 200, 112, 0.2) !important;
    color: #f1f5f9 !important;
}

[data-theme="soldier"] .input-field:focus-within {
    border-color: #84cc16 !important;
    background: rgba(24, 32, 21, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15) !important;
}

[data-theme="soldier"] .input-field:focus {
    border-color: #84cc16 !important;
    background: rgba(24, 32, 21, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15) !important;
}

[data-theme="soldier"] input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Navigation bars */
[data-theme="soldier"] nav {
    background: rgba(22, 28, 19, 0.92) !important;
    border-color: rgba(168, 200, 112, 0.2) !important;
    backdrop-filter: blur(16px) !important;
}

[data-theme="soldier"] .fixed.bottom-0 {
    background: rgba(18, 23, 16, 0.98) !important;
    border-color: rgba(168, 200, 112, 0.2) !important;
    border-top: 2px solid rgba(132, 204, 22, 0.3) !important;
}

/* Counter buttons */
[data-theme="soldier"] .counter-btn {
    background: rgba(36, 46, 31, 0.8) !important;
    border: 1px solid rgba(168, 200, 112, 0.25) !important;
    color: #f1f5f9 !important;
}

[data-theme="soldier"] .counter-btn:active {
    background: rgba(50, 65, 42, 0.95) !important;
}

[data-theme="soldier"] .counter-btn.minus { color: #f87171 !important; }
[data-theme="soldier"] .counter-btn.plus { color: #4ade80 !important; }

/* Score input */
[data-theme="soldier"] .score-input {
    color: #84cc16 !important;
}

/* ---- TEXT COLORS — high contrast for readability ---- */
[data-theme="soldier"] .text-slate-800,
[data-theme="soldier"] .text-slate-900 {
    color: #f8fafc !important;
}

[data-theme="soldier"] .text-slate-700 {
    color: #cbd5e1 !important;
}

[data-theme="soldier"] .text-slate-600 {
    color: #94a3b8 !important;
}

[data-theme="soldier"] .text-slate-500 {
    color: #64748b !important;
}

[data-theme="soldier"] .text-slate-400 {
    color: #475569 !important;
}

/* Accent orange → vibrant high-tech tactical green */
[data-theme="soldier"] .text-orange-600 {
    color: #84cc16 !important;
}

[data-theme="soldier"] .text-orange-500 {
    color: #bef264 !important;
}

[data-theme="soldier"] .text-orange-400 {
    color: #d9f99d !important;
}

/* Orange backgrounds → rich semi-transparent tactical green */
[data-theme="soldier"] .bg-orange-100 {
    background-color: rgba(132, 204, 22, 0.15) !important;
}

[data-theme="soldier"] .bg-orange-50 {
    background-color: rgba(132, 204, 22, 0.08) !important;
}

[data-theme="soldier"] .hover\:bg-orange-50:hover {
    background-color: rgba(132, 204, 22, 0.12) !important;
}

/* Key interactive buttons → bright high-visibility lime with solid contrast text */
[data-theme="soldier"] .bg-orange-600 {
    background-color: #84cc16 !important;
    color: #0f170a !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(132, 204, 22, 0.25) !important;
    border: 1px solid #bef264 !important;
}

[data-theme="soldier"] .hover\:bg-orange-700:hover {
    background-color: #65a30d !important;
    box-shadow: 0 4px 18px rgba(101, 163, 13, 0.4) !important;
}

/* Hover borders */
[data-theme="soldier"] .hover\:border-orange-400:hover {
    border-color: #84cc16 !important;
}

/* Focus borders */
[data-theme="soldier"] .focus\:border-orange-400:focus {
    border-color: #84cc16 !important;
}

/* Hub cards hover border */
[data-theme="soldier"] .hub-card:hover {
    border-color: rgba(132, 204, 22, 0.5) !important;
    background: rgba(35, 45, 28, 0.70) !important;
}

/* Blue accent → tactical neon lime */
[data-theme="soldier"] .bg-blue-100 {
    background-color: rgba(132, 204, 22, 0.15) !important;
}

[data-theme="soldier"] .text-blue-600 {
    color: #84cc16 !important;
}

[data-theme="soldier"] .text-blue-500 {
    color: #a3e635 !important;
}

/* Dark buttons (slate-800) → sleek dark tactical gray-green */
[data-theme="soldier"] .bg-slate-800 {
    background-color: #242f1f !important;
    border: 1px solid rgba(168, 200, 112, 0.25) !important;
}

[data-theme="soldier"] .hover\:bg-slate-700:hover {
    background-color: #2d3c27 !important;
}

/* White backgrounds → solid dark-glass card backing */
[data-theme="soldier"] .bg-white\/60,
[data-theme="soldier"] .bg-white\/80,
[data-theme="soldier"] .bg-white\/90 {
    background-color: rgba(28, 36, 24, 0.85) !important;
}

[data-theme="soldier"] .bg-white\/50 {
    background-color: rgba(24, 32, 21, 0.75) !important;
}

[data-theme="soldier"] .bg-white\/40 {
    background-color: rgba(28, 36, 24, 0.65) !important;
}

[data-theme="soldier"] .bg-white\/30 {
    background-color: rgba(20, 26, 17, 0.55) !important;
}

[data-theme="soldier"] .bg-white {
    background-color: rgba(26, 34, 22, 0.92) !important;
}

/* Border colors */
[data-theme="soldier"] .border-white {
    border-color: rgba(168, 200, 112, 0.22) !important;
}

[data-theme="soldier"] .border-slate-100 {
    border-color: rgba(168, 200, 112, 0.15) !important;
}

[data-theme="soldier"] .border-slate-200 {
    border-color: rgba(168, 200, 112, 0.25) !important;
}

/* Floating top buttons (lang + theme toggle) */
[data-theme="soldier"] .fixed.top-4 > div {
    background: rgba(28, 36, 24, 0.92) !important;
    border-color: rgba(132, 204, 22, 0.35) !important;
    color: #f8fafc !important;
}

[data-theme="soldier"] #theme-toggle-icon {
    color: #84cc16 !important;
}

[data-theme="soldier"] #theme-toggle-text {
    color: #f8fafc !important;
}

[data-theme="soldier"] .fixed.top-4 .fa-language {
    color: #84cc16 !important;
}

[data-theme="soldier"] .fixed.top-4 #lang-text {
    color: #f8fafc !important;
}

/* Scrollbar */
[data-theme="soldier"] ::-webkit-scrollbar {
    width: 6px;
}
[data-theme="soldier"] ::-webkit-scrollbar-track {
    background: #121710;
}
[data-theme="soldier"] ::-webkit-scrollbar-thumb {
    background: #4d7c0f;
    border-radius: 3px;
}

/* White rounded-full back buttons */
[data-theme="soldier"] .bg-white.rounded-full {
    background-color: rgba(28, 36, 24, 0.85) !important;
    border: 1px solid rgba(168, 200, 112, 0.3) !important;
}

/* Active theme option border in soldier mode */
[data-theme="soldier"] .theme-option.active {
    border-color: #84cc16 !important;
    box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.3) !important;
}

/* First-time popup */
[data-theme="soldier"] #first-time-popup > div {
    background-color: rgba(24, 32, 21, 0.98) !important;
    border: 1px solid rgba(168, 200, 112, 0.3) !important;
}

/* Orange accent border-left */
[data-theme="soldier"] .border-orange-600 {
    border-color: #84cc16 !important;
}

/* Exercise items */
[data-theme="soldier"] .exercise-item {
    border-color: rgba(168, 200, 112, 0.18) !important;
}

/* Rating badges */
[data-theme="soldier"] .bg-green-100 { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; }
[data-theme="soldier"] .bg-blue-100.text-blue-800 { background-color: rgba(132, 204, 22, 0.15) !important; color: #bef264 !important; }
[data-theme="soldier"] .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.15) !important; color: #fde047 !important; }
[data-theme="soldier"] .bg-orange-100.text-orange-800 { background-color: rgba(249, 115, 22, 0.15) !important; color: #ffedd5 !important; }
[data-theme="soldier"] .bg-red-100.text-red-800 { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }

/* Modal */
[data-theme="soldier"] .modal-container {
    background: rgba(24, 32, 21, 0.98) !important;
    border: 1px solid rgba(168, 200, 112, 0.3) !important;
}
[data-theme="soldier"] .modal-header {
    background: rgba(20, 26, 17, 0.95) !important;
    border-color: rgba(168, 200, 112, 0.3) !important;
}
[data-theme="soldier"] .modal-body {
    background: rgba(15, 20, 13, 0.98) !important;
}

/* Nav text */
[data-theme="soldier"] nav .text-slate-800 {
    color: #f8fafc !important;
}

/* Custom alert */
[data-theme="soldier"] .custom-alert {
    background: rgba(24, 32, 21, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(168, 200, 112, 0.3) !important;
}

/* Green button */
[data-theme="soldier"] .bg-green-600 {
    background-color: #4d7c0f !important;
}

/* Red areas */
[data-theme="soldier"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}
[data-theme="soldier"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}
[data-theme="soldier"] .text-red-600 {
    color: #fca5a5 !important;
}
[data-theme="soldier"] .border-red-200 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}
[data-theme="soldier"] .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.22) !important;
}

/* Search */
[data-theme="soldier"] .search-clear {
    color: #64748b !important;
}
[data-theme="soldier"] .search-clear:hover {
    background: rgba(132, 204, 22, 0.2) !important;
    color: #f8fafc !important;
}
[data-theme="soldier"] .search-icon {
    color: #64748b !important;
}

/* Category card header */
[data-theme="soldier"] .bg-slate-800:not(nav *) {
    background-color: rgba(32, 42, 27, 0.95) !important;
}

/* Section headers with border-left accent */
[data-theme="soldier"] .border-l-4.border-orange-600 {
    border-color: #84cc16 !important;
}

/* Subtle stripe texture on main page sections */
[data-theme="soldier"] main {
    position: relative;
}

/* ==================== THEME TOGGLE BUTTON ==================== */
#theme-toggle-btn {
    transition: all 0.2s ease;
    min-width: 90px;
}

#theme-toggle-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

#theme-toggle-btn:active {
    transform: scale(0.92);
}

/* Soldier mode: style the toggle button itself */
[data-theme="soldier"] #theme-toggle-btn {
    background: rgba(28, 36, 24, 0.92) !important;
    border-color: rgba(132, 204, 22, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

[data-theme="soldier"] #theme-toggle-text {
    color: #f8fafc !important;
    letter-spacing: 0.05em;
}

/* ==================== TLDM NAVY THEME ==================== */
[data-theme="navy"] body,
body[data-theme="navy"] {
    background-color: #050b18 !important;
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(16, 28, 48, 0.45) 0%, rgba(7, 11, 20, 0.96) 85%),
        url('images/camo_navy.svg') !important;
    background-size: 100% 100%, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
    background-attachment: fixed !important;
}

[data-theme="navy"] #dashboard-page,
[data-theme="navy"] #detail-page,
[data-theme="navy"] #profile-page,
[data-theme="navy"] #admin-dashboard,
[data-theme="navy"] #admin-settings {
    background: transparent !important;
}

[data-theme="navy"] .glass-card {
    background: rgba(12, 22, 38, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5), 
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 2rem !important;
}

[data-theme="navy"] .input-field {
    background: rgba(10, 18, 30, 0.9) !important;
    border: 1px solid rgba(96, 165, 250, 0.2) !important;
    color: #f1f5f9 !important;
}

[data-theme="navy"] .input-field:focus-within {
    border-color: #06b6d4 !important;
    background: rgba(14, 24, 40, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

[data-theme="navy"] .input-field:focus {
    border-color: #06b6d4 !important;
    background: rgba(14, 24, 40, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

[data-theme="navy"] input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

[data-theme="navy"] nav {
    background: rgba(10, 18, 30, 0.92) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    backdrop-filter: blur(16px) !important;
}

[data-theme="navy"] .fixed.bottom-0 {
    background: rgba(8, 14, 24, 0.98) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    border-top: 2px solid rgba(6, 182, 212, 0.3) !important;
}

[data-theme="navy"] .counter-btn {
    background: rgba(20, 32, 50, 0.8) !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
    color: #f1f5f9 !important;
}

[data-theme="navy"] .counter-btn:active {
    background: rgba(30, 48, 75, 0.95) !important;
}

[data-theme="navy"] .counter-btn.minus { color: #f87171 !important; }
[data-theme="navy"] .counter-btn.plus { color: #4ade80 !important; }

[data-theme="navy"] .score-input {
    color: #06b6d4 !important;
}

[data-theme="navy"] .text-slate-800,
[data-theme="navy"] .text-slate-900 {
    color: #f8fafc !important;
}

[data-theme="navy"] .text-slate-700 {
    color: #cbd5e1 !important;
}

[data-theme="navy"] .text-slate-600 {
    color: #94a3b8 !important;
}

[data-theme="navy"] .text-slate-500 {
    color: #64748b !important;
}

[data-theme="navy"] .text-slate-400 {
    color: #475569 !important;
}

[data-theme="navy"] .text-orange-600 {
    color: #06b6d4 !important;
}

[data-theme="navy"] .text-orange-500 {
    color: #22d3ee !important;
}

[data-theme="navy"] .text-orange-400 {
    color: #67e8f9 !important;
}

[data-theme="navy"] .bg-orange-100 {
    background-color: rgba(6, 182, 212, 0.15) !important;
}

[data-theme="navy"] .bg-orange-50 {
    background-color: rgba(6, 182, 212, 0.08) !important;
}

[data-theme="navy"] .hover\:bg-orange-50:hover {
    background-color: rgba(6, 182, 212, 0.12) !important;
}

[data-theme="navy"] .bg-orange-600 {
    background-color: #06b6d4 !important;
    color: #041018 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3) !important;
    border: 1px solid #22d3ee !important;
}

[data-theme="navy"] .hover\:bg-orange-700:hover {
    background-color: #0891b2 !important;
    box-shadow: 0 4px 18px rgba(8, 145, 178, 0.45) !important;
}

[data-theme="navy"] .hover\:border-orange-400:hover {
    border-color: #06b6d4 !important;
}

[data-theme="navy"] .focus\:border-orange-400:focus {
    border-color: #06b6d4 !important;
}

[data-theme="navy"] .hub-card:hover {
    border-color: rgba(6, 182, 212, 0.5) !important;
    background: rgba(20, 32, 50, 0.70) !important;
}

[data-theme="navy"] .bg-blue-100 {
    background-color: rgba(6, 182, 212, 0.15) !important;
}

[data-theme="navy"] .text-blue-600 {
    color: #06b6d4 !important;
}

[data-theme="navy"] .text-blue-500 {
    color: #22d3ee !important;
}

[data-theme="navy"] .bg-slate-800 {
    background-color: #142036 !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
}

[data-theme="navy"] .hover\:bg-slate-700:hover {
    background-color: #1b2a47 !important;
}

[data-theme="navy"] .bg-white\/60,
[data-theme="navy"] .bg-white\/80,
[data-theme="navy"] .bg-white\/90 {
    background-color: rgba(12, 22, 38, 0.85) !important;
}

[data-theme="navy"] .bg-white\/50 {
    background-color: rgba(10, 18, 30, 0.75) !important;
}

[data-theme="navy"] .bg-white\/40 {
    background-color: rgba(12, 22, 38, 0.65) !important;
}

[data-theme="navy"] .bg-white\/30 {
    background-color: rgba(8, 14, 24, 0.55) !important;
}

[data-theme="navy"] .bg-white {
    background-color: rgba(10, 20, 34, 0.92) !important;
}

[data-theme="navy"] .border-white {
    border-color: rgba(96, 165, 250, 0.22) !important;
}

[data-theme="navy"] .border-slate-100 {
    border-color: rgba(96, 165, 250, 0.15) !important;
}

[data-theme="navy"] .border-slate-200 {
    border-color: rgba(96, 165, 250, 0.25) !important;
}

[data-theme="navy"] .fixed.top-4 > div {
    background: rgba(12, 22, 38, 0.92) !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
    color: #f8fafc !important;
}

[data-theme="navy"] #theme-toggle-icon {
    color: #06b6d4 !important;
}

[data-theme="navy"] #theme-toggle-text {
    color: #f8fafc !important;
}

[data-theme="navy"] .fixed.top-4 .fa-language {
    color: #06b6d4 !important;
}

[data-theme="navy"] .fixed.top-4 #lang-text {
    color: #f8fafc !important;
}

[data-theme="navy"] .bg-white.rounded-full {
    background-color: rgba(12, 22, 38, 0.85) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

[data-theme="navy"] .theme-option.active {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.3) !important;
}

[data-theme="navy"] #first-time-popup > div {
    background-color: rgba(14, 24, 40, 0.98) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

[data-theme="navy"] .border-orange-600 {
    border-color: #06b6d4 !important;
}

[data-theme="navy"] .exercise-item {
    border-color: rgba(96, 165, 250, 0.18) !important;
}

[data-theme="navy"] .bg-green-100 { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; }
[data-theme="navy"] .bg-blue-100.text-blue-800 { background-color: rgba(6, 182, 212, 0.15) !important; color: #67e8f9 !important; }
[data-theme="navy"] .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.15) !important; color: #fde047 !important; }
[data-theme="navy"] .bg-orange-100.text-orange-800 { background-color: rgba(249, 115, 22, 0.15) !important; color: #ffedd5 !important; }
[data-theme="navy"] .bg-red-100.text-red-800 { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }

[data-theme="navy"] .modal-container {
    background: rgba(14, 24, 40, 0.98) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}
[data-theme="navy"] .modal-header {
    background: rgba(10, 18, 30, 0.95) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}
[data-theme="navy"] .modal-body {
    background: rgba(8, 12, 20, 0.98) !important;
}

[data-theme="navy"] nav .text-slate-800 {
    color: #f8fafc !important;
}

[data-theme="navy"] .custom-alert {
    background: rgba(14, 24, 40, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

[data-theme="navy"] .bg-green-600 {
    background-color: #06b6d4 !important;
    color: #041018 !important;
    font-weight: bold !important;
}

[data-theme="navy"] .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}
[data-theme="navy"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}
[data-theme="navy"] .text-red-600 {
    color: #fca5a5 !important;
}
[data-theme="navy"] .border-red-200 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}
[data-theme="navy"] .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.22) !important;
}

[data-theme="navy"] .search-clear {
    color: #64748b !important;
}
[data-theme="navy"] .search-clear:hover {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #f8fafc !important;
}
[data-theme="navy"] .search-icon {
    color: #64748b !important;
}

[data-theme="navy"] .bg-slate-800:not(nav *) {
    background-color: rgba(20, 30, 46, 0.95) !important;
}

[data-theme="navy"] .border-l-4.border-orange-600 {
    border-color: #06b6d4 !important;
}

[data-theme="navy"] #theme-toggle-btn {
    background: rgba(12, 22, 38, 0.92) !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

[data-theme="navy"] #theme-toggle-text {
    color: #f8fafc !important;
    letter-spacing: 0.05em;
}

/* ==================== ATM ARMY THEME ==================== */
[data-theme="army"] body,
body[data-theme="army"] {
    background-color: #1a0203 !important;
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(42, 5, 7, 0.45) 0%, rgba(20, 2, 3, 0.96) 85%),
        url('images/camo_army.svg') !important;
    background-size: 100% 100%, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
    background-attachment: fixed !important;
}

[data-theme="army"] #dashboard-page,
[data-theme="army"] #detail-page,
[data-theme="army"] #profile-page,
[data-theme="army"] #admin-dashboard,
[data-theme="army"] #admin-settings {
    background: transparent !important;
}

[data-theme="army"] .glass-card {
    background: rgba(30, 5, 7, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(234, 179, 8, 0.25) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5), 
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 2rem !important;
}

[data-theme="army"] .input-field {
    background: rgba(20, 3, 4, 0.9) !important;
    border: 1px solid rgba(234, 179, 8, 0.2) !important;
    color: #f1f5f9 !important;
}

[data-theme="army"] .input-field:focus-within {
    border-color: #eab308 !important;
    background: rgba(28, 4, 5, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}

[data-theme="army"] .input-field:focus {
    border-color: #eab308 !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}

[data-theme="army"] input::placeholder {
    color: rgba(241, 245, 249, 0.35) !important;
}

[data-theme="army"] nav {
    background: rgba(15, 2, 3, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(234, 179, 8, 0.2) !important;
}

[data-theme="army"] .fixed.bottom-0 {
    background: rgba(15, 2, 3, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(234, 179, 8, 0.15) !important;
}

[data-theme="army"] .counter-btn {
    background: rgba(30, 5, 7, 0.7) !important;
    border-color: rgba(234, 179, 8, 0.2) !important;
    color: #f1f5f9 !important;
}

[data-theme="army"] .counter-btn:active {
    background: rgba(234, 179, 8, 0.15) !important;
}

[data-theme="army"] .counter-btn.minus { color: #f87171 !important; }
[data-theme="army"] .counter-btn.plus { color: #eab308 !important; }

[data-theme="army"] .score-input {
    background: rgba(20, 3, 4, 0.7) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
    color: #f1f5f9 !important;
}

[data-theme="army"] .text-slate-800,
[data-theme="army"] .text-slate-900 {
    color: #f1f5f9 !important;
}

[data-theme="army"] .text-slate-700 {
    color: #e2e8f0 !important;
}

[data-theme="army"] .text-slate-600 {
    color: #cbd5e1 !important;
}

[data-theme="army"] .text-slate-500 {
    color: #94a3b8 !important;
}

[data-theme="army"] .text-slate-400 {
    color: #64748b !important;
}

[data-theme="army"] .text-orange-600 {
    color: #eab308 !important;
}

[data-theme="army"] .text-orange-500 {
    color: #facc15 !important;
}

[data-theme="army"] .text-orange-400 {
    color: #fde047 !important;
}

[data-theme="army"] .bg-orange-100 {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #fde047 !important;
}

[data-theme="army"] .bg-orange-50 {
    background-color: rgba(234, 179, 8, 0.08) !important;
}

[data-theme="army"] .hover\:bg-orange-50:hover {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

[data-theme="army"] .bg-orange-600 {
    background-color: #b45309 !important;
    background: linear-gradient(135deg, #92400e 0%, #eab308 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.35) !important;
}

[data-theme="army"] .hover\:bg-orange-700:hover {
    background-color: #eab308 !important;
}

[data-theme="army"] .hover\:border-orange-400:hover {
    border-color: #eab308 !important;
}

[data-theme="army"] .focus\:border-orange-400:focus {
    border-color: #eab308 !important;
}

[data-theme="army"] .hub-card:hover {
    border-color: rgba(234, 179, 8, 0.4) !important;
    box-shadow: 0 8px 25px rgba(234, 179, 8, 0.15) !important;
}

[data-theme="army"] .bg-blue-100 {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

[data-theme="army"] .text-blue-600 {
    color: #eab308 !important;
}

[data-theme="army"] .text-blue-500 {
    color: #facc15 !important;
}

[data-theme="army"] .bg-slate-800 {
    background-color: rgba(30, 5, 7, 0.95) !important;
}

[data-theme="army"] .hover\:bg-slate-700:hover {
    background-color: rgba(42, 8, 10, 0.95) !important;
}

[data-theme="army"] .bg-white\/60,
[data-theme="army"] .bg-white\/80,
[data-theme="army"] .bg-white\/90 {
    background-color: rgba(30, 5, 7, 0.75) !important;
}

[data-theme="army"] .bg-white\/50 {
    background-color: rgba(30, 5, 7, 0.65) !important;
}

[data-theme="army"] .bg-white\/40 {
    background-color: rgba(30, 5, 7, 0.55) !important;
}

[data-theme="army"] .bg-white\/30 {
    background-color: rgba(30, 5, 7, 0.45) !important;
}

[data-theme="army"] .bg-white {
    background-color: rgba(25, 4, 5, 0.95) !important;
    color: #f1f5f9 !important;
}

[data-theme="army"] .border-white {
    border-color: rgba(234, 179, 8, 0.2) !important;
}

[data-theme="army"] .border-slate-100 {
    border-color: rgba(234, 179, 8, 0.12) !important;
}

[data-theme="army"] .border-slate-200 {
    border-color: rgba(234, 179, 8, 0.18) !important;
}

[data-theme="army"] .fixed.top-4 > div {
    background: rgba(15, 2, 3, 0.88) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}

[data-theme="army"] #theme-toggle-icon {
    color: #eab308 !important;
}

[data-theme="army"] #theme-toggle-text {
    color: #fde047 !important;
}

[data-theme="army"] .fixed.top-4 .fa-language {
    color: #eab308 !important;
}

[data-theme="army"] .fixed.top-4 #lang-text {
    color: #fde047 !important;
}

[data-theme="army"] ::-webkit-scrollbar {
    width: 4px;
}

[data-theme="army"] ::-webkit-scrollbar-track {
    background: rgba(42, 5, 7, 0.5);
}

[data-theme="army"] ::-webkit-scrollbar-thumb {
    background: #92400e;
    border-radius: 3px;
}

[data-theme="army"] .bg-white.rounded-full {
    background-color: rgba(30, 5, 7, 0.85) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

[data-theme="army"] .theme-option.active {
    border-color: #eab308 !important;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.3) !important;
}

[data-theme="army"] #first-time-popup > div {
    background-color: rgba(20, 3, 4, 0.98) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

[data-theme="army"] .border-orange-600 {
    border-color: #eab308 !important;
}

[data-theme="army"] .exercise-item {
    border-color: rgba(234, 179, 8, 0.18) !important;
}

[data-theme="army"] .bg-green-100 { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; }
[data-theme="army"] .bg-blue-100.text-blue-800 { background-color: rgba(234, 179, 8, 0.15) !important; color: #fde047 !important; }
[data-theme="army"] .bg-yellow-100.text-yellow-800 { background-color: rgba(234, 179, 8, 0.2) !important; color: #fde047 !important; }
[data-theme="army"] .bg-orange-100.text-orange-800 { background-color: rgba(162, 35, 37, 0.2) !important; color: #fca5a5 !important; }
[data-theme="army"] .bg-red-100.text-red-800 { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; }

[data-theme="army"] .modal-container {
    background: rgba(20, 3, 4, 0.98) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}
[data-theme="army"] .modal-header {
    background: rgba(15, 2, 3, 0.95) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}
[data-theme="army"] .modal-body {
    background: rgba(10, 1, 2, 0.98) !important;
}

[data-theme="army"] nav .text-slate-800 {
    color: #f8fafc !important;
}

[data-theme="army"] .custom-alert {
    background: rgba(20, 3, 4, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

[data-theme="army"] .bg-green-600 {
    background-color: #92400e !important;
}

[data-theme="army"] .bg-red-50 {
    background-color: rgba(162, 35, 37, 0.12) !important;
}
[data-theme="army"] .bg-red-100 {
    background-color: rgba(162, 35, 37, 0.18) !important;
}
[data-theme="army"] .text-red-600 {
    color: #fca5a5 !important;
}
[data-theme="army"] .border-red-200 {
    border-color: rgba(162, 35, 37, 0.25) !important;
}
[data-theme="army"] .hover\:bg-red-100:hover {
    background-color: rgba(162, 35, 37, 0.22) !important;
}

[data-theme="army"] .search-clear {
    color: #64748b !important;
}
[data-theme="army"] .search-clear:hover {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #f8fafc !important;
}
[data-theme="army"] .search-icon {
    color: #64748b !important;
}

[data-theme="army"] .bg-slate-800:not(nav *) {
    background-color: rgba(30, 5, 7, 0.95) !important;
}

[data-theme="army"] .border-l-4.border-orange-600 {
    border-color: #eab308 !important;
}

[data-theme="army"] #theme-toggle-btn {
    background: rgba(15, 2, 3, 0.92) !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

[data-theme="army"] #theme-toggle-text {
    color: #f8fafc !important;
    letter-spacing: 0.05em;
}