/* ==========================================
   css/style.css
   Gaya Asas & Tipografi (Global)
   ========================================== */
body { 
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
}

/* ==========================================
   Gaya Khusus Halaman Papan Pemuka (dashboard.html)
   ========================================== */
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Modal Pop-up (Animasi) */
.modal-pop { animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popUp { 
    0% { opacity: 0; transform: scale(0.8); } 
    100% { opacity: 1; transform: scale(1); } 
}

/* ==========================================
   Gaya Khusus Halaman Log Masuk (index.html)
   ========================================== */
.bg-custom-theme { background: linear-gradient(135deg, #7A1114 0%, #951B1E 50%, #7A1114 100%); }
.bg-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
.bg-animation::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%); }
.bg-animation::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 30%), radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 30%); }

.particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.particle { position: absolute; width: 4px; height: 4px; background: rgba(212, 175, 55, 0.6); border-radius: 50%; animation: float 15s infinite; }
.particle-1 { left: 10%; animation-delay: 0s; animation-duration: 20s; }
.particle-2 { left: 20%; animation-delay: 2s; animation-duration: 18s; }
.particle-3 { left: 30%; animation-delay: 4s; animation-duration: 22s; }
.particle-4 { left: 40%; animation-delay: 6s; animation-duration: 16s; }
.particle-5 { left: 50%; animation-delay: 8s; animation-duration: 24s; }
@keyframes float { 
    0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; } 
    10% { opacity: 1; transform: translateY(90vh) scale(1); } 
    90% { opacity: 1; transform: translateY(10vh) scale(1); } 
}

.brand-logo { margin: 0 auto; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1); border: 2px solid rgba(212, 175, 55, 0.4); transition: all 0.3s ease; }
.brand-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-side::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border-left: 1px solid rgba(255, 255, 255, 0.1); z-index: -1; }

.glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 24px; border: 3px solid rgba(212, 175, 55, 0.4); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(212, 175, 55, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); animation: slideIn 0.6s ease-out; position: relative; z-index: 10; }
@keyframes slideIn { 
    0% { opacity: 0; transform: translateY(20px); } 
    100% { opacity: 1; transform: translateY(0); } 
}

.custom-input:focus + .custom-icon, .custom-input:not(:placeholder-shown) + .custom-icon { color: #d4af37; opacity: 1; }
.btn-login { background: linear-gradient(135deg, #d4af37 0%, #c49b2c 50%, #d4af37 100%); background-size: 200% auto; position: relative; overflow: hidden; transition: all 0.3s ease; }
.btn-login::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s ease; }
.btn-login:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); }
.btn-login:hover::before { left: 100%; }
.btn-login:active { transform: translateY(0); }

/* ==========================================
   Efek Hover Sliding untuk Menu Sidebar
   ========================================== */
.sidebar-btn, .logout-btn {
    transition: all 0.3s ease;
}

.sidebar-btn:hover, .logout-btn:hover {
    transform: translateX(8px); /* Menyamai hover:translate-x-2 dalam Tailwind */
}
/* Laravel overlay additions */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.sidebar-link.active {
    background: #d4af37;
    color: #7A1114;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}
.form-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    outline: none;
    font-size: 0.875rem;
}
.form-input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

/* ==========================================
   Course modal + Flatpickr range picker
   ========================================== */
.uppercase-input {
    text-transform: uppercase;
}

.flatpickr-calendar {
    z-index: 999999;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    border: 1px solid #e2e8f0;
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
    padding: 10px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

.flatpickr-day.inRange {
    background: #f1f5f9;
    border-color: #f1f5f9;
    box-shadow: -5px 0 0 #f1f5f9, 5px 0 0 #f1f5f9;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 700;
}

/* ==========================================
   Meal checkbox + pax total helpers
   ========================================== */
.meal-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    cursor: pointer;
    font-weight: 700;
    color: #0f172a;
    transition: all 0.2s ease;
}

.meal-option:hover {
    border-color: #d4af37;
    background: #fffbeb;
}

.meal-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #7A1114;
}

.meal-option:has(input:checked) {
    border-color: #d4af37;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

.meal-option:has(input:disabled) {
    cursor: not-allowed;
    background: #f8fafc;
    color: #94a3b8;
}

/* ==========================================
   Course card + detail modal helpers
   ========================================== */
.course-card:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.detail-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.detail-value {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
}

/* ==========================================
   Interaksi sidebar, profile menu dan setting
   ========================================== */
.sidebar-link:hover {
    transform: translateX(8px);
}

.sidebar-link.active:hover {
    transform: translateX(4px);
}

.setting-chip {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.85rem;
    background: #ffffff;
}

.setting-chip b {
    display: block;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.setting-chip span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.stat-card:focus,
button.course-card:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.participant-row[style*="display: none"] {
    display: none;
}

/* ==========================================
   Penambahbaikan tema hijau/emas + modal tindakan
   ========================================== */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #d4af37;
    border-color: #d4af37;
    color: #7A1114;
    font-weight: 800;
}

.flatpickr-day.inRange {
    background: #fffbeb;
    border-color: #fffbeb;
    box-shadow: -5px 0 0 #fffbeb, 5px 0 0 #fffbeb;
}

.action-tile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    color: #7A1114;
    font-weight: 800;
    font-size: 0.875rem;
    text-align: left;
    transition: all 0.2s ease;
}

.action-tile:hover {
    border-color: #d4af37;
    background: #fffbeb;
    transform: translateX(4px);
}

.toast-alert {
    animation: toastIn 0.25s ease-out forwards;
}

.toast-alert.toast-hide {
    animation: toastOut 0.25s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

.masa-input {
    font-variant-numeric: tabular-nums;
}

/* Tajuk dan pautan soalan mesti mengekalkan huruf besar/kecil asal. */
.question-row input {
    text-transform: none;
}

/* ==========================================
   Fasiliti module placeholder cards
   ========================================== */
.facility-placeholder-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.25rem;
    min-height: 150px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.facility-placeholder-card:hover {
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.facility-placeholder-card i {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    background: rgba(212, 175, 55, 0.18);
    color: #7A1114;
    margin-bottom: 0.8rem;
}

.facility-placeholder-card b {
    display: block;
    color: #7A1114;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.facility-placeholder-card span {
    display: block;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* =========================================================
   PREMIUM NAVY + ICE BLUE + GOLD THEME OVERRIDES
   Palette:
   Navy        #1E3A5F
   Navy Hover  #162D49
   Ice Blue    #EAF4FF
   Background  #F6F8FB
   Accent Blue #5A8FC0
   Gold        #D6A93A
   Text Main   #111827
   Text Muted  #64748B
   ========================================================= */
:root {
    --premium-navy: #1E3A5F;
    --premium-navy-hover: #162D49;
    --premium-soft-blue: #EAF4FF;
    --premium-page-bg: #F6F8FB;
    --premium-card: #FFFFFF;
    --premium-accent-blue: #5A8FC0;
    --premium-gold: #D6A93A;
    --premium-text: #111827;
    --premium-muted: #64748B;
    --premium-border: #DDE5EE;
}

html, body {
    background: var(--premium-page-bg);
    color: var(--premium-text);
}

/* Generic readability */
.text-theme,
[class*="text-[#5a8fc0]"],
[class*="text-[#5A8FC0]"],
[class*="text-[#6ba4d8]"],
[class*="text-[#6BA4D8]"] {
    color: var(--premium-navy);
}

.border-theme,
[class*="border-[#5a8fc0]"],
[class*="border-[#5A8FC0]"],
[class*="border-[#6ba4d8]"],
[class*="border-[#6BA4D8]"] {
    border-color: var(--premium-accent-blue);
}

.bg-theme,
[class*="bg-[#55748d]"],
[class*="bg-[#55748D]"],
[class*="bg-[#1E293B]"],
[class*="bg-[#334155]"],
.bg-slate-800,
.bg-slate-700 {
    background-color: var(--premium-navy);
    color: #ffffff;
}

.bg-theme:hover,
.hover\:bg-slate-700:hover,
.hover\:bg-slate-800:hover,
[class*="hover:bg-[#162D49]"]:hover {
    background-color: var(--premium-navy-hover);
    color: #ffffff;
}

[class*="bg-[#5a8fc0]"],
[class*="bg-[#5A8FC0]"],
[class*="bg-[#6ba4d8]"],
[class*="bg-[#6BA4D8]"],
.btn-blue,
button.btn-blue,
a.btn-blue {
    background-color: var(--premium-accent-blue);
    color: #ffffff;
}

[class*="bg-[#5a8fc0]"] *,
[class*="bg-[#5A8FC0]"] *,
[class*="bg-[#6ba4d8]"] *,
[class*="bg-[#6BA4D8]"] *,
.bg-theme *,
.bg-slate-800 *,
.bg-slate-700 * {
    color: inherit;
}

button[class*="bg-[#5a8fc0]"],
a[class*="bg-[#5a8fc0]"],
button[class*="bg-[#5A8FC0]"],
a[class*="bg-[#5A8FC0]"],
button[class*="bg-[#6ba4d8]"],
a[class*="bg-[#6ba4d8]"],
button[class*="bg-[#6BA4D8]"],
a[class*="bg-[#6BA4D8]"] {
    color: #ffffff;
}

button[class*="bg-[#5a8fc0]"] i,
a[class*="bg-[#5a8fc0]"] i,
button[class*="bg-[#5A8FC0]"] i,
a[class*="bg-[#5A8FC0]"] i,
button[class*="bg-[#6ba4d8]"] i,
a[class*="bg-[#6ba4d8]"] i,
button[class*="bg-[#6BA4D8]"] i,
a[class*="bg-[#6BA4D8]"] i {
    color: #ffffff;
}

/* Buttons */
.btn-login,
button[type="submit"],
.btn-primary,
a.btn-primary {
    background: var(--premium-navy);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(30, 58, 95, 0.18);
}

.btn-login:hover,
button[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover {
    background: var(--premium-navy-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-login::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Sidebar */
#mainSidebar,
aside#mainSidebar,
.sidebar,
.admin-sidebar {
    background: var(--premium-navy);
    color: #ffffff;
}

#mainSidebar h1,
#mainSidebar h2,
#mainSidebar h3,
#mainSidebar p,
#mainSidebar span,
#mainSidebar a,
#mainSidebar button,
#mainSidebar i,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar p,
.sidebar span,
.sidebar a,
.sidebar button,
.sidebar i {
    color: #ffffff;
}

.sidebar-link {
    color: #ffffff;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.sidebar-link.active {
    background: #ffffff;
    color: var(--premium-navy);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10);
}

.sidebar-link.active *,
.sidebar-link.active span,
.sidebar-link.active i {
    color: var(--premium-navy);
}

/* Page cards and forms */
.bg-white,
.card,
.glass-card,
.facility-placeholder-card {
    border-color: var(--premium-border);
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--premium-accent-blue);
    box-shadow: 0 0 0 3px rgba(90, 143, 192, 0.16);
}

/* Login screen: make it premium, bright, and readable */
.bg-custom-theme {
    background: linear-gradient(135deg, #F6F8FB 0%, #EAF4FF 48%, #FFFFFF 100%);
    color: var(--premium-text);
}

.bg-animation::before {
    background: radial-gradient(circle, rgba(90, 143, 192, 0.14) 0%, transparent 48%);
}

.bg-animation::after {
    background:
        radial-gradient(circle at 18% 78%, rgba(214, 169, 58, 0.12) 0%, transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(30, 58, 95, 0.08) 0%, transparent 32%);
}

.particle {
    background: rgba(214, 169, 58, 0.45);
}

.brand-logo {
    background: #ffffff;
    border: 2px solid rgba(214, 169, 58, 0.55);
    box-shadow: 0 20px 48px rgba(30, 58, 95, 0.15), inset 0 0 0 1px rgba(255,255,255,0.85);
}

.brand-logo img {
    filter: drop-shadow(0 8px 14px rgba(30, 58, 95, 0.18));
}

.brand-title {
    color: var(--premium-navy);
    background: none;
    -webkit-text-fill-color: var(--premium-navy);
    text-shadow: none;
}

.bg-custom-theme .brand-title + p,
.bg-custom-theme .text-\[\#d4af37\],
.bg-custom-theme [class*="text-[#d4af37]"],
.bg-custom-theme [class*="text-[#D4AF37]"] {
    color: var(--premium-accent-blue);
}

.bg-custom-theme p,
.bg-custom-theme label,
.bg-custom-theme span {
    color: #334155;
}

.login-side::before {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(221, 229, 238, 0.92);
}

.glass-card {
    background: #ffffff;
    border: 1px solid rgba(214, 169, 58, 0.72);
    box-shadow: 0 24px 54px rgba(30, 58, 95, 0.16);
}

.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card label,
.glass-card p,
.glass-card span,
.glass-card div {
    color: var(--premium-text);
}

.glass-card p,
.glass-card .text-white\/70,
.glass-card .text-white\/60,
.glass-card .text-white\/75,
.glass-card .text-white\/90 {
    color: var(--premium-muted);
}

.glass-card input:not([type="checkbox"]),
.glass-card select,
.glass-card textarea {
    background: #ffffff;
    color: var(--premium-text);
    border: 1px solid var(--premium-border);
}

.glass-card input::placeholder,
#adminModal input::placeholder {
    color: #94A3B8;
}

.glass-card input:not([type="checkbox"]):focus {
    border-color: var(--premium-accent-blue);
    box-shadow: 0 0 0 3px rgba(90, 143, 192, 0.16);
}

.glass-card input[type="checkbox"],
#adminModal input[type="checkbox"] {
    accent-color: var(--premium-navy);
}

.glass-card button[type="submit"],
.glass-card .btn-login {
    background: var(--premium-navy);
    color: #ffffff;
}

.glass-card button[type="button"],
.glass-card a {
    color: var(--premium-navy);
}

/* Admin login modal */
#adminModal > div {
    background: #ffffff;
    border: 1px solid rgba(214, 169, 58, 0.72);
    box-shadow: 0 24px 54px rgba(30, 58, 95, 0.22);
}

#adminModal h1,
#adminModal h2,
#adminModal h3,
#adminModal label,
#adminModal p,
#adminModal span,
#adminModal div {
    color: var(--premium-text);
}

#adminModal input:not([type="checkbox"]) {
    background: #ffffff;
    color: var(--premium-text);
    border: 1px solid var(--premium-border);
}

#adminModal input:not([type="checkbox"]):focus {
    border-color: var(--premium-accent-blue);
    box-shadow: 0 0 0 3px rgba(90, 143, 192, 0.16);
}

#adminModal button[type="submit"] {
    background: var(--premium-navy);
    color: #ffffff;
}

#adminModal button[onclick="toggleAdminModal()"] {
    color: var(--premium-muted);
}

/* Modal headers and dark sections */
.modal-header,
[class*="bg-[#1E293B]"],
[class*="bg-[#334155]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"] {
    background-color: var(--premium-navy);
    color: #ffffff;
}

[class*="bg-[#1E293B]"] *,
[class*="bg-[#334155]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] * {
    color: #ffffff;
}

/* Accent gold remains for subtle premium markers */
[class*="text-[#d4af37]"],
[class*="text-[#D4AF37]"],
[class*="text-[#d6a93a]"],
[class*="text-[#D6A93A]"] {
    color: var(--premium-gold);
}

[class*="border-[#d4af37]"],
[class*="border-[#D4AF37]"],
[class*="border-[#d6a93a]"],
[class*="border-[#D6A93A]"] {
    border-color: var(--premium-gold);
}

/* But keep text white on dark/blue buttons, even if old color utility exists inside */
button[class*="bg-"] .text-theme,
a[class*="bg-"] .text-theme,
button[class*="bg-"] [class*="text-[#"],
a[class*="bg-"] [class*="text-[#"] {
    color: inherit;
}

/* Specific common buttons in the app */
a[href*="arkib"],
a[href*="kursus"].bg-slate-800,
button:has(.fa-filter),
button:has(.fa-save),
button:has(.fa-floppy-disk),
a:has(.fa-list),
button:has(.fa-pen-to-square),
a:has(.fa-pen-to-square) {
    background-color: var(--premium-navy);
    color: #ffffff;
}

a[href*="arkib"] *,
a[href*="kursus"].bg-slate-800 *,
button:has(.fa-filter) *,
button:has(.fa-save) *,
button:has(.fa-floppy-disk) *,
a:has(.fa-list) *,
button:has(.fa-pen-to-square) *,
a:has(.fa-pen-to-square) * {
    color: #ffffff;
}

/* SweetAlert2 alignment with theme */
.swal2-popup {
    border-radius: 1.25rem;
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
}

.swal2-confirm {
    background: var(--premium-navy);
    color: #ffffff;
    border-radius: 0.8rem;
}

.swal2-cancel {
    background: #E5E7EB;
    color: var(--premium-text);
    border-radius: 0.8rem;
}

/* =========================================================
   JAIS PREMIUM THEME OVERRIDES - CONTRAST SAFE
   Inspired by JAIS logo colours:
   Deep Green  #7A1114
   Green       #7A1114
   Yellow      #F7D117
   Red         #D71920
   Page BG     #F7FAF7
   Text        #111827
   ========================================================= */
:root {
    --jais-deep: #7A1114;
    --jais-deep-2: #5A0B0D;
    --jais-green: #7A1114;
    --jais-green-hover: #5A0B0D;
    --jais-soft: #FFF4D6;
    --jais-soft-2: #F7FAF7;
    --jais-yellow: #F7D117;
    --jais-yellow-hover: #E8C20D;
    --jais-red: #D71920;
    --jais-red-hover: #B8141A;
    --jais-border: #E7D5B5;
    --jais-text: #111827;
    --jais-muted: #475569;
    --jais-card: #FFFFFF;
}

html,
body,
.bg-slate-50,
.bg-gray-50,
.bg-gray-100 {
    background: var(--jais-soft-2);
    color: var(--jais-text);
}

/* Text on light areas must be readable */
h1, h2, h3, h4, h5, h6,
.text-slate-800,
.text-slate-900,
.text-gray-800,
.text-gray-900,
.detail-value,
.setting-chip b,
.facility-placeholder-card b {
    color: var(--jais-text);
}

.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.detail-label,
.setting-chip span,
.facility-placeholder-card span {
    color: var(--jais-muted);
}

.text-theme,
[class*="text-[#5a8fc0]"],
[class*="text-[#5A8FC0]"],
[class*="text-[#6ba4d8]"],
[class*="text-[#6BA4D8]"],
[class*="text-[#55748d]"],
[class*="text-[#55748D]"],
[class*="text-[#1E3A5F]"] {
    color: var(--jais-deep);
}

/* Cards, panels and inputs */
.bg-white,
.card,
.glass-card,
.setting-chip,
.facility-placeholder-card,
input,
select,
textarea {
    border-color: var(--jais-border);
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
    border-color: var(--jais-green);
    box-shadow: 0 0 0 3px rgba(122, 17, 20, 0.16);
}

/* Main dark surfaces: sidebar, modal header, dark buttons */
#mainSidebar,
aside#mainSidebar,
.sidebar,
.admin-sidebar,
.modal-header,
.bg-theme,
.bg-slate-800,
.bg-slate-700,
[class*="bg-[#55748d]"],
[class*="bg-[#55748D]"],
[class*="bg-[#1E293B]"],
[class*="bg-[#334155]"],
[class*="bg-[#1E3A5F]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"] {
    background-color: var(--jais-deep);
    color: #ffffff;
}

/* Force white text on all dark green surfaces */
#mainSidebar *,
aside#mainSidebar *,
.sidebar *,
.admin-sidebar *,
.modal-header *,
.bg-theme *,
.bg-slate-800 *,
.bg-slate-700 *,
[class*="bg-[#55748d]"] *,
[class*="bg-[#55748D]"] *,
[class*="bg-[#1E293B]"] *,
[class*="bg-[#334155]"] *,
[class*="bg-[#1E3A5F]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] * {
    color: #ffffff;
}

/* Sidebar links */
.sidebar-link {
    color: #ffffff;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.sidebar-link.active,
#mainSidebar .sidebar-link.active {
    background: var(--jais-yellow);
    color: #111827;
    box-shadow: 0 12px 24px rgba(122, 17, 20, 0.22);
}

.sidebar-link.active *,
#mainSidebar .sidebar-link.active *,
.sidebar-link.active span,
.sidebar-link.active i {
    color: #111827;
}

#mainSidebar .border-white\/10,
aside#mainSidebar .border-white\/10 {
    border-color: rgba(255,255,255,0.22);
}

/* Primary buttons: green + white text */
button[type="submit"],
.btn-primary,
a.btn-primary,
.btn-login,
button:has(.fa-save),
button:has(.fa-floppy-disk),
button:has(.fa-filter),
button:has(.fa-plus),
a:has(.fa-plus),
a[href*="arkib"],
a[href*="Arkib"],
a:has(.fa-list),
button:has(.fa-pen-to-square),
a:has(.fa-pen-to-square),
button:has(.fa-download),
a:has(.fa-download) {
    background: var(--jais-green);
    color: #ffffff;
    border-color: var(--jais-green);
    box-shadow: 0 10px 22px rgba(122, 17, 20, 0.16);
}

button[type="submit"] *,
.btn-primary *,
a.btn-primary *,
.btn-login *,
button:has(.fa-save) *,
button:has(.fa-floppy-disk) *,
button:has(.fa-filter) *,
button:has(.fa-plus) *,
a:has(.fa-plus) *,
a[href*="arkib"] *,
a[href*="Arkib"] *,
a:has(.fa-list) *,
button:has(.fa-pen-to-square) *,
a:has(.fa-pen-to-square) *,
button:has(.fa-download) *,
a:has(.fa-download) * {
    color: #ffffff;
}

button[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover,
.btn-login:hover,
button:has(.fa-save):hover,
button:has(.fa-floppy-disk):hover,
button:has(.fa-filter):hover,
button:has(.fa-plus):hover,
a:has(.fa-plus):hover,
a[href*="arkib"]:hover,
a[href*="Arkib"]:hover,
a:has(.fa-list):hover,
button:has(.fa-pen-to-square):hover,
a:has(.fa-pen-to-square):hover,
button:has(.fa-download):hover,
a:has(.fa-download):hover {
    background: var(--jais-green-hover);
    color: #ffffff;
    border-color: var(--jais-green-hover);
}

/* Any blue button class from earlier patches should become green with white text */
[class*="bg-[#5a8fc0]"],
[class*="bg-[#5A8FC0]"],
[class*="bg-[#6ba4d8]"],
[class*="bg-[#6BA4D8]"],
.bg-blue-500,
.bg-blue-600,
.bg-indigo-600,
.bg-indigo-700 {
    background-color: var(--jais-green);
    color: #ffffff;
    border-color: var(--jais-green);
}

[class*="bg-[#5a8fc0]"] *,
[class*="bg-[#5A8FC0]"] *,
[class*="bg-[#6ba4d8]"] *,
[class*="bg-[#6BA4D8]"] *,
.bg-blue-500 *,
.bg-blue-600 *,
.bg-indigo-600 *,
.bg-indigo-700 * {
    color: #ffffff;
}

/* Yellow/gold action: must use dark text */
.bg-yellow-50,
.bg-yellow-100,
.bg-amber-50,
.bg-amber-100,
[class*="bg-[#F7D117]"],
[class*="bg-[#f7d117]"],
[class*="bg-[#D6A93A]"],
[class*="bg-[#d6a93a]"] {
    background-color: var(--jais-yellow);
    color: #111827;
}

.bg-yellow-50 *,
.bg-yellow-100 *,
.bg-amber-50 *,
.bg-amber-100 *,
[class*="bg-[#F7D117]"] *,
[class*="bg-[#f7d117]"] *,
[class*="bg-[#D6A93A]"] *,
[class*="bg-[#d6a93a]"] * {
    color: #111827;
}

/* Danger buttons */
.bg-red-50,
.bg-red-100 {
    background-color: #FEE2E2;
    color: #991B1B;
}

.bg-red-500,
.bg-red-600,
button:has(.fa-trash),
a:has(.fa-trash) {
    background-color: var(--jais-red);
    color: #ffffff;
    border-color: var(--jais-red);
}

.bg-red-500 *,
.bg-red-600 *,
button:has(.fa-trash) *,
a:has(.fa-trash) * {
    color: #ffffff;
}

.bg-red-500:hover,
.bg-red-600:hover,
button:has(.fa-trash):hover,
a:has(.fa-trash):hover {
    background-color: var(--jais-red-hover);
    color: #ffffff;
}

/* Badges / success */
.bg-emerald-50,
.bg-green-50,
.bg-teal-50 {
    background-color: var(--jais-soft);
    color: var(--jais-deep);
}

.text-emerald-700,
.text-emerald-800,
.text-green-700,
.text-green-800 {
    color: var(--jais-deep);
}

.border-emerald-200,
.border-green-200,
.border-teal-200 {
    border-color: rgba(122, 17, 20, 0.28);
}

/* Accent labels and icons */
[class*="text-[#d4af37]"],
[class*="text-[#D4AF37]"],
[class*="text-[#d6a93a]"],
[class*="text-[#D6A93A]"],
.text-yellow-300,
.text-yellow-400,
.text-amber-500,
.text-amber-600 {
    color: var(--jais-yellow);
}

[class*="border-[#d4af37]"],
[class*="border-[#D4AF37]"],
[class*="border-[#d6a93a]"],
[class*="border-[#D6A93A]"] {
    border-color: var(--jais-yellow);
}

/* Course cards */
.course-card:focus,
.stat-card:focus,
button.course-card:focus {
    border-color: var(--jais-green);
    box-shadow: 0 0 0 3px rgba(122, 17, 20, 0.16);
}

.course-card,
.border-blue-300,
.border-blue-400,
.border-sky-300 {
    border-color: var(--jais-border);
}

/* Login page: JAIS premium, clear contrast */
.bg-custom-theme {
    background:
        radial-gradient(circle at 18% 25%, rgba(247, 209, 23, 0.20) 0%, transparent 22%),
        radial-gradient(circle at 80% 74%, rgba(122, 17, 20, 0.16) 0%, transparent 28%),
        linear-gradient(135deg, #F7FAF7 0%, #FFF4D6 50%, #FFFFFF 100%);
    color: var(--jais-text);
}

.bg-animation::before {
    background: radial-gradient(circle, rgba(122, 17, 20, 0.12) 0%, transparent 48%);
}

.bg-animation::after {
    background:
        radial-gradient(circle at 20% 78%, rgba(247, 209, 23, 0.16) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(122, 17, 20, 0.12) 0%, transparent 30%);
}

.particle {
    background: rgba(247, 209, 23, 0.55);
}

.brand-logo {
    background: #ffffff;
    border: 2px solid rgba(247, 209, 23, 0.78);
    box-shadow: 0 18px 44px rgba(122, 17, 20, 0.18);
}

.brand-title {
    color: var(--jais-deep);
    background: none;
    -webkit-text-fill-color: var(--jais-deep);
    text-shadow: none;
}

.bg-custom-theme p,
.bg-custom-theme label,
.bg-custom-theme span,
.bg-custom-theme div {
    color: #334155;
}

.bg-custom-theme h1,
.bg-custom-theme h2,
.bg-custom-theme h3,
.bg-custom-theme .brand-title {
    color: var(--jais-deep);
    -webkit-text-fill-color: var(--jais-deep);
}

.login-side::before,
.glass-card,
#adminModal > div {
    background: #ffffff;
    border: 1px solid rgba(247, 209, 23, 0.76);
    box-shadow: 0 24px 54px rgba(122, 17, 20, 0.18);
}

.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card label,
.glass-card p,
.glass-card span,
.glass-card div,
#adminModal h1,
#adminModal h2,
#adminModal h3,
#adminModal label,
#adminModal p,
#adminModal span,
#adminModal div {
    color: var(--jais-text);
}

.glass-card .text-white\/70,
.glass-card .text-white\/60,
.glass-card .text-white\/75,
.glass-card .text-white\/90,
#adminModal .text-white\/70,
#adminModal .text-white\/60 {
    color: var(--jais-muted);
}

.glass-card input:not([type="checkbox"]),
#adminModal input:not([type="checkbox"]),
.glass-card select,
.glass-card textarea {
    background: #ffffff;
    color: var(--jais-text);
    border: 1px solid var(--jais-border);
}

.glass-card input::placeholder,
#adminModal input::placeholder {
    color: #94A3B8;
}

.glass-card input[type="checkbox"],
#adminModal input[type="checkbox"] {
    accent-color: var(--jais-green);
}

.glass-card a,
#adminModal a {
    color: var(--jais-deep);
    font-weight: 700;
}

/* Flatpickr */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--jais-green);
    border-color: var(--jais-green);
    color: #ffffff;
    font-weight: 800;
}

.flatpickr-day.inRange {
    background: var(--jais-soft);
    border-color: var(--jais-soft);
    box-shadow: -5px 0 0 var(--jais-soft), 5px 0 0 var(--jais-soft);
}

/* SweetAlert2 */
.swal2-popup {
    border-radius: 1.25rem;
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
    border: 1px solid var(--jais-border);
}

.swal2-title {
    color: var(--jais-text);
}

.swal2-html-container {
    color: var(--jais-muted);
}

.swal2-confirm {
    background: var(--jais-green);
    color: #ffffff;
    border-radius: 0.8rem;
}

.swal2-cancel {
    background: #E5E7EB;
    color: var(--jais-text);
    border-radius: 0.8rem;
}

/* Final safety: all actual buttons with a solid colour need readable text */
button[class*="bg-"]:not(.sidebar-link),
a[class*="bg-"]:not(.sidebar-link) {
    color: #ffffff;
}

button[class*="bg-"]:not(.sidebar-link) *,
a[class*="bg-"]:not(.sidebar-link) * {
    color: inherit;
}

/* But pale/white/yellow buttons need dark text */
button[class*="bg-white"],
a[class*="bg-white"],
button[class*="bg-slate-50"],
a[class*="bg-slate-50"],
button[class*="bg-gray-50"],
a[class*="bg-gray-50"],
button[class*="bg-yellow"],
a[class*="bg-yellow"],
button[class*="bg-amber"],
a[class*="bg-amber"] {
    color: #111827;
}

button[class*="bg-white"] *,
a[class*="bg-white"] *,
button[class*="bg-slate-50"] *,
a[class*="bg-slate-50"] *,
button[class*="bg-gray-50"] *,
a[class*="bg-gray-50"] *,
button[class*="bg-yellow"] *,
a[class*="bg-yellow"] *,
button[class*="bg-amber"] *,
a[class*="bg-amber"] * {
    color: #111827;
}

/* ==========================================
   FIX: Admin login/profile name readability
   Punca: beberapa override tema gelap memaksa teks profil menjadi putih
   walaupun background profil di header cerah.
   ========================================== */
button[onclick="toggleAdminProfileMenu()"] {
    background: #FFFFFF;
    color: #111827;
    border: 1px solid #E7D5B5;
    box-shadow: 0 8px 18px rgba(122, 17, 20, 0.08);
}

button[onclick="toggleAdminProfileMenu()"]:hover {
    background: #F7FAF7;
    color: #111827;
}

button[onclick="toggleAdminProfileMenu()"] p,
button[onclick="toggleAdminProfileMenu()"] span,
button[onclick="toggleAdminProfileMenu()"] .text-slate-800,
button[onclick="toggleAdminProfileMenu()"] .text-slate-900,
button[onclick="toggleAdminProfileMenu()"] .text-gray-800,
button[onclick="toggleAdminProfileMenu()"] .text-gray-900 {
    color: #111827;
    -webkit-text-fill-color: #111827;
    text-shadow: none;
}

button[onclick="toggleAdminProfileMenu()"] .text-slate-400,
button[onclick="toggleAdminProfileMenu()"] .text-slate-500,
button[onclick="toggleAdminProfileMenu()"] .text-slate-600,
button[onclick="toggleAdminProfileMenu()"] .text-gray-400,
button[onclick="toggleAdminProfileMenu()"] .text-gray-500,
button[onclick="toggleAdminProfileMenu()"] .text-gray-600 {
    color: #475569;
    -webkit-text-fill-color: #475569;
    text-shadow: none;
}

button[onclick="toggleAdminProfileMenu()"] .rounded-full,
button[onclick="toggleAdminProfileMenu()"] [class*="bg-[#55748D]"],
button[onclick="toggleAdminProfileMenu()"] [class*="bg-[#55748d]"] {
    background: #7A1114;
    color: #FFFFFF;
}

button[onclick="toggleAdminProfileMenu()"] .rounded-full *,
button[onclick="toggleAdminProfileMenu()"] [class*="bg-[#55748D]"] *,
button[onclick="toggleAdminProfileMenu()"] [class*="bg-[#55748d]"] * {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

button[onclick="toggleAdminProfileMenu()"] .fa-chevron-down {
    color: #7A1114;
    -webkit-text-fill-color: #7A1114;
}

/* Participant/profile name safety for other header profile controls */
header .header-user-name,
header .header-user-ic,
header [class*="profile"] p,
header [class*="profile"] span {
    text-shadow: none;
}

/* =========================================================
   FINAL JAIS CONTRAST NORMALISATION - ALL PAGES
   Fix overbroad earlier button/text rules so white cards and
   profile dropdown remain readable while solid buttons stay clear.
   ========================================================= */
:root {
    --jais-deep: #7A1114;
    --jais-deep-2: #5A0B0D;
    --jais-green: #7A1114;
    --jais-green-hover: #5A0B0D;
    --jais-yellow: #F7D117;
    --jais-red: #D71920;
    --jais-page: #F7FAF7;
    --jais-card: #FFFFFF;
    --jais-text: #111827;
    --jais-muted: #475569;
    --jais-border: #E7D5B5;
}

/* Light surfaces define their own inherited text colour.
   Descendant colours remain controlled by utility or component classes. */
.bg-white,
.bg-slate-50,
.bg-gray-50,
.bg-gray-100,
.card,
.setting-chip,
.facility-placeholder-card,
#adminProfileDropdown,
#modalTetapanAdmin .bg-white,
#modalTetapanAdmin main,
#modalTetapanAdmin aside {
    color: var(--jais-text);
}

/* Profile dropdown: explicit readable colours */
#adminProfileDropdown {
    background: #ffffff;
    border-color: var(--jais-border);
    color: var(--jais-text);
}

#adminProfileDropdown p,
#adminProfileDropdown span,
#adminProfileDropdown button,
#adminProfileDropdown a,
#adminProfileDropdown i {
    color: var(--jais-text);
    -webkit-text-fill-color: var(--jais-text);
    text-shadow: none;
}

#adminProfileDropdown .text-slate-500,
#adminProfileDropdown .text-gray-500 {
    color: var(--jais-muted);
    -webkit-text-fill-color: var(--jais-muted);
}

#adminProfileDropdown button[onclick="bukaModalTetapanAdmin()"] {
    background: #ffffff;
    color: var(--jais-text);
    box-shadow: none;
}

#adminProfileDropdown button[onclick="bukaModalTetapanAdmin()"]:hover {
    background: #FFF4D6;
    color: var(--jais-deep);
}

#adminProfileDropdown button[onclick="bukaModalTetapanAdmin()"] i,
#adminProfileDropdown button[onclick="bukaModalTetapanAdmin()"] span {
    color: var(--jais-deep);
    -webkit-text-fill-color: var(--jais-deep);
}

#adminProfileDropdown form button {
    background: #ffffff;
    color: #B91C1C;
    box-shadow: none;
}

#adminProfileDropdown form button:hover {
    background: #FEF2F2;
    color: #B91C1C;
}

#adminProfileDropdown form button *,
#adminProfileDropdown form button i,
#adminProfileDropdown form button span {
    color: #B91C1C;
    -webkit-text-fill-color: #B91C1C;
}

#adminProfileDropdown .bg-amber-100,
#adminProfileDropdown .bg-emerald-100 {
    background: var(--jais-yellow);
    color: #111827;
}

#adminProfileDropdown .bg-amber-100 *,
#adminProfileDropdown .bg-emerald-100 * {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

/* Settings modal tabs and tiles */
#modalTetapanAdmin .settings-tab {
    background: #ffffff;
    color: var(--jais-text);
    box-shadow: none;
}

#modalTetapanAdmin .settings-tab * {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

#modalTetapanAdmin .settings-tab.bg-\[\#5A8FC0\],
#modalTetapanAdmin .settings-tab.text-white,
#modalTetapanAdmin .settings-tab.active {
    background: var(--jais-green);
    color: #ffffff;
}

#modalTetapanAdmin .settings-tab.bg-\[\#5A8FC0\] *,
#modalTetapanAdmin .settings-tab.text-white *,
#modalTetapanAdmin .settings-tab.active * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#modalTetapanAdmin button:not([type="submit"]):not(.settings-tab),
#modalTetapanAdmin a:not(.btn-primary):not([class*="bg-[#"]),
#modalTetapanAdmin .rounded-2xl.border button:not([type="submit"]) {
    color: var(--jais-text);
}

#modalTetapanAdmin button:not([type="submit"]):not(.settings-tab) *,
#modalTetapanAdmin a:not(.btn-primary):not([class*="bg-[#"]) * {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

#modalTetapanAdmin button:not([type="submit"]):not(.settings-tab):hover,
#modalTetapanAdmin a:not(.btn-primary):not([class*="bg-[#"]):hover {
    color: var(--jais-deep);
}

/* Solid action buttons everywhere: readable white text */
button[type="submit"],
a.btn-primary, button.btn-primary,
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#5A8FC0]"], a[class*="bg-[#5A8FC0]"],
button[class*="bg-blue-"], a[class*="bg-blue-"],
button[class*="bg-emerald-"], a[class*="bg-emerald-"],
button[class*="bg-green-"], a[class*="bg-green-"],
button[class*="bg-indigo-"], a[class*="bg-indigo-"],
button:has(.fa-save), button:has(.fa-floppy-disk),
button:has(.fa-filter), button:has(.fa-plus), a:has(.fa-plus),
button:has(.fa-download), a:has(.fa-download),
button:has(.fa-pen-to-square), a:has(.fa-pen-to-square) {
    background-color: var(--jais-green);
    border-color: var(--jais-green);
    color: #ffffff;
}

button[type="submit"] *,
a.btn-primary *, button.btn-primary *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#5A8FC0]"] *, a[class*="bg-[#5A8FC0]"] *,
button[class*="bg-blue-"] *, a[class*="bg-blue-"] *,
button[class*="bg-emerald-"] *, a[class*="bg-emerald-"] *,
button[class*="bg-green-"] *, a[class*="bg-green-"] *,
button[class*="bg-indigo-"] *, a[class*="bg-indigo-"] *,
button:has(.fa-save) *, button:has(.fa-floppy-disk) *,
button:has(.fa-filter) *, button:has(.fa-plus) *, a:has(.fa-plus) *,
button:has(.fa-download) *, a:has(.fa-download) *,
button:has(.fa-pen-to-square) *, a:has(.fa-pen-to-square) * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

button[type="submit"]:hover,
a.btn-primary:hover, button.btn-primary:hover,
button[class*="bg-[#7A1114]"]:hover, a[class*="bg-[#7A1114]"]:hover,
button[class*="bg-[#7A1114]"]:hover, a[class*="bg-[#7A1114]"]:hover,
button[class*="bg-[#5A8FC0]"]:hover, a[class*="bg-[#5A8FC0]"]:hover,
button[class*="bg-blue-"]:hover, a[class*="bg-blue-"]:hover,
button[class*="bg-emerald-"]:hover, a[class*="bg-emerald-"]:hover,
button[class*="bg-green-"]:hover, a[class*="bg-green-"]:hover,
button[class*="bg-indigo-"]:hover, a[class*="bg-indigo-"]:hover {
    background-color: var(--jais-green-hover);
    border-color: var(--jais-green-hover);
    color: #ffffff;
}

/* Pale buttons/badges must use dark text */
button[class*="bg-white"], a[class*="bg-white"],
button[class*="bg-slate-50"], a[class*="bg-slate-50"],
button[class*="bg-gray-50"], a[class*="bg-gray-50"],
button[class*="bg-yellow"], a[class*="bg-yellow"],
button[class*="bg-amber"], a[class*="bg-amber"],
.bg-yellow-50, .bg-yellow-100, .bg-amber-50, .bg-amber-100 {
    color: #111827;
}

button[class*="bg-white"] *, a[class*="bg-white"] *,
button[class*="bg-slate-50"] *, a[class*="bg-slate-50"] *,
button[class*="bg-gray-50"] *, a[class*="bg-gray-50"] *,
button[class*="bg-yellow"] *, a[class*="bg-yellow"] *,
button[class*="bg-amber"] *, a[class*="bg-amber"] *,
.bg-yellow-50 *, .bg-yellow-100 *, .bg-amber-50 *, .bg-amber-100 * {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

/* Header/admin profile always readable */
header button[onclick="toggleAdminProfileMenu()"] p:first-child,
header button[onclick="toggleAdminProfileMenu()"] .text-slate-800,
header button[onclick="toggleAdminProfileMenu()"] .text-slate-900 {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

header button[onclick="toggleAdminProfileMenu()"] p:last-child,
header button[onclick="toggleAdminProfileMenu()"] .text-slate-500 {
    color: #475569;
    -webkit-text-fill-color: #475569;
}

/* Sidebar remains strong JAIS contrast */
#mainSidebar,
aside#mainSidebar {
    background: var(--jais-deep);
    color: #ffffff;
}

#mainSidebar *:not(.sidebar-link.active):not(.sidebar-link.active *),
aside#mainSidebar *:not(.sidebar-link.active):not(.sidebar-link.active *) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#mainSidebar .sidebar-link.active,
aside#mainSidebar .sidebar-link.active {
    background: var(--jais-yellow);
    color: #111827;
}

#mainSidebar .sidebar-link.active *,
aside#mainSidebar .sidebar-link.active * {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

/* =========================================================
   IRONMAN STRICT CONTRAST v4 - FINAL CASCADE
   Prinsip kontra:
   - Maroon/dark surface  -> teks putih.
   - Gold/soft-gold       -> teks gelap.
   - Kad putih            -> teks gelap.
   - Hover lama hijau/biru dipaksa ke maroon/gold.
   ========================================================= */
:root {
    --iron-deep: #3B0709;
    --iron-maroon: #7A1114;
    --iron-red: #951B1E;
    --iron-red-hover: #6B0D10;
    --iron-gold: #F2C14E;
    --iron-gold-hover: #D8A72E;
    --iron-soft-gold: #FFF4D6;
    --iron-soft-gold-hover: #FFE7A3;
    --iron-page: #FFF8EA;
    --iron-card: #FFFFFF;
    --iron-border: #E7D5B5;
    --iron-text: #171313;
    --iron-muted: #6B5555;
    --iron-danger: #B91C1C;
}

html,
body,
.bg-slate-50,
.bg-gray-50,
.bg-gray-100,
[class*="bg-[#F4F6F8]"],
[class*="bg-[#F4F7FB]"] {
    background-color: var(--iron-page);
    color: var(--iron-text);
}

/* Header utama admin/peserta */
main > header,
header.bg-white,
header[class*="bg-white"] {
    background:
        radial-gradient(circle at 10% 0%, rgba(242, 193, 78, 0.22), transparent 30%),
        linear-gradient(90deg, var(--iron-deep) 0%, var(--iron-maroon) 62%, var(--iron-red) 100%);
    border-bottom-color: rgba(242, 193, 78, 0.48);
    box-shadow: 0 12px 30px rgba(90, 11, 13, 0.22);
    color: #ffffff;
}
main > header h1,
main > header h2,
main > header h3,
main > header > div:not(:has(button[onclick="toggleAdminProfileMenu()"])),
main > header .text-slate-800:not(button[onclick="toggleAdminProfileMenu()"] *),
main > header .text-slate-900:not(button[onclick="toggleAdminProfileMenu()"] *),
main > header .text-slate-400:not(button[onclick="toggleAdminProfileMenu()"] *),
main > header .text-slate-500:not(button[onclick="toggleAdminProfileMenu()"] *) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* Profile admin di header: background putih, teks gelap supaya jelas */
header button[onclick="toggleAdminProfileMenu()"],
main > header button[onclick="toggleAdminProfileMenu()"] {
    background: #ffffff;
    color: var(--iron-text);
    border: 1px solid rgba(242, 193, 78, 0.82);
    box-shadow: 0 12px 26px rgba(90, 11, 13, 0.20);
}
header button[onclick="toggleAdminProfileMenu()"] p,
header button[onclick="toggleAdminProfileMenu()"] span,
header button[onclick="toggleAdminProfileMenu()"] i:not(.fa-user),
main > header button[onclick="toggleAdminProfileMenu()"] p,
main > header button[onclick="toggleAdminProfileMenu()"] span,
main > header button[onclick="toggleAdminProfileMenu()"] i:not(.fa-user) {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
    text-shadow: none;
}
header button[onclick="toggleAdminProfileMenu()"] .rounded-full,
main > header button[onclick="toggleAdminProfileMenu()"] .rounded-full {
    background: linear-gradient(135deg, var(--iron-maroon), var(--iron-red));
    color: #ffffff;
}
header button[onclick="toggleAdminProfileMenu()"] .rounded-full *,
main > header button[onclick="toggleAdminProfileMenu()"] .rounded-full * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Sidebar */
#mainSidebar,
aside#mainSidebar,
.sidebar,
.admin-sidebar {
    background:
        radial-gradient(circle at 25% 10%, rgba(242, 193, 78, 0.14), transparent 24%),
        linear-gradient(180deg, var(--iron-deep) 0%, var(--iron-maroon) 58%, #3B0709 100%);
    color: #ffffff;
}
#mainSidebar *:not(.sidebar-link.active):not(.sidebar-link.active *),
aside#mainSidebar *:not(.sidebar-link.active):not(.sidebar-link.active *),
.sidebar *:not(.sidebar-link.active):not(.sidebar-link.active *) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
.sidebar-link:hover,
#mainSidebar .sidebar-link:hover,
aside#mainSidebar .sidebar-link:hover {
    background: rgba(242, 193, 78, 0.16);
    border-color: rgba(242, 193, 78, 0.26);
    color: #ffffff;
}
.sidebar-link.active,
#mainSidebar .sidebar-link.active,
aside#mainSidebar .sidebar-link.active {
    background: linear-gradient(135deg, var(--iron-gold), #FFD977);
    color: var(--iron-text);
    box-shadow: 0 14px 28px rgba(242, 193, 78, 0.24);
}
.sidebar-link.active *,
#mainSidebar .sidebar-link.active *,
aside#mainSidebar .sidebar-link.active * {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}

/* Kad/panel putih */
.bg-white,
.card,
.course-card,
.stat-card,
.glass-card,
.setting-chip,
.facility-placeholder-card,
.attendance-table-wrap,
#adminProfileDropdown,
#modalTetapanAdmin .bg-white,
#modalTetapanAdmin main,
#modalTetapanAdmin aside {
    background-color: var(--iron-card);
    border-color: var(--iron-border);
    color: var(--iron-text);
}
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.detail-label {
    color: var(--iron-muted);
    -webkit-text-fill-color: var(--iron-muted);
}

/* Semua permukaan dark lama/hijau/navy -> maroon, teks putih */
.modal-header,
.bg-theme,
.bg-slate-800,
.bg-slate-700,
[class*="bg-[#7A1114]"],
[class*="bg-[#951B1E]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#7A1114]"],
[class*="bg-[#951B1E]"],
[class*="bg-[#951B1E]"],
[class*="bg-[#0f172a]"],
[class*="bg-[#0F172A]"],
[class*="bg-[#164e63]"],
[class*="bg-[#164E63]"],
[class*="bg-[#55748D]"],
[class*="bg-[#55748d]"],
[class*="bg-[#1E293B]"],
[class*="bg-[#334155]"],
.bg-green-500,
.bg-green-600,
.bg-emerald-500,
.bg-emerald-600,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-600,
.bg-indigo-700 {
    background: linear-gradient(135deg, var(--iron-maroon), var(--iron-red));
    border-color: var(--iron-maroon);
    color: #ffffff;
}
.modal-header *,
.bg-theme *,
.bg-slate-800 *,
.bg-slate-700 *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#951B1E]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#7A1114]"] *,
[class*="bg-[#951B1E]"] *,
[class*="bg-[#951B1E]"] *,
[class*="bg-[#0f172a]"] *,
[class*="bg-[#0F172A]"] *,
[class*="bg-[#164e63]"] *,
[class*="bg-[#164E63]"] *,
[class*="bg-[#55748D]"] *,
[class*="bg-[#55748d]"] *,
[class*="bg-[#1E293B]"] *,
[class*="bg-[#334155]"] *,
.bg-green-500 *,
.bg-green-600 *,
.bg-emerald-500 *,
.bg-emerald-600 *,
.bg-blue-500 *,
.bg-blue-600 *,
.bg-indigo-600 *,
.bg-indigo-700 * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Butang solid: wajib putih atas maroon */
button[type="submit"],
.btn-primary,
a.btn-primary,
.btn-login,
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#951B1E]"], a[class*="bg-[#951B1E]"],
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#7A1114]"], a[class*="bg-[#7A1114]"],
button[class*="bg-[#0f172a]"], a[class*="bg-[#0f172a]"],
button[class*="bg-green-"], a[class*="bg-green-"],
button[class*="bg-emerald-"], a[class*="bg-emerald-"],
button[class*="bg-blue-"], a[class*="bg-blue-"] {
    background: linear-gradient(135deg, var(--iron-maroon), var(--iron-red));
    border-color: var(--iron-maroon);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 10px 22px rgba(90, 11, 13, 0.20);
}
button[type="submit"] *,
.btn-primary *,
a.btn-primary *,
.btn-login *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#951B1E]"] *, a[class*="bg-[#951B1E]"] *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#7A1114]"] *, a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#0f172a]"] *, a[class*="bg-[#0f172a]"] *,
button[class*="bg-green-"] *, a[class*="bg-green-"] *,
button[class*="bg-emerald-"] *, a[class*="bg-emerald-"] *,
button[class*="bg-blue-"] *, a[class*="bg-blue-"] * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
button[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover,
.btn-login:hover,
button[class*="bg-[#7A1114]"]:hover, a[class*="bg-[#7A1114]"]:hover,
button[class*="bg-[#951B1E]"]:hover, a[class*="bg-[#951B1E]"]:hover,
button[class*="hover:bg-green-"]:hover, a[class*="hover:bg-green-"]:hover,
button[class*="hover:bg-emerald-"]:hover, a[class*="hover:bg-emerald-"]:hover,
button[class*="hover:bg-blue-"]:hover, a[class*="hover:bg-blue-"]:hover,
button[class*="hover:bg-[#7A1114]"]:hover, a[class*="hover:bg-[#7A1114]"]:hover,
button[class*="hover:bg-[#7A1114]"]:hover, a[class*="hover:bg-[#7A1114]"]:hover,
button[class*="hover:bg-[#0f172a]"]:hover, a[class*="hover:bg-[#0f172a]"]:hover,
button[class*="hover:bg-[#164e63]"]:hover, a[class*="hover:bg-[#164e63]"]:hover {
    background: linear-gradient(135deg, var(--iron-red-hover), var(--iron-maroon));
    border-color: var(--iron-red-hover);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Button/badge gold: teks gelap untuk kontra */
[class*="bg-[#F2C14E]"],
[class*="bg-[#D8A72E]"],
[class*="bg-[#FFE7A3]"],
[class*="bg-[#FFF4D6]"],
.bg-amber-50,
.bg-amber-100,
.bg-yellow-50,
.bg-yellow-100 {
    background-color: var(--iron-soft-gold);
    background-image: none;
    border-color: var(--iron-border);
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}
button[class*="bg-[#F2C14E]"],
a[class*="bg-[#F2C14E]"] {
    background: linear-gradient(135deg, var(--iron-gold), #FFD977);
    border-color: var(--iron-gold-hover);
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}
button[class*="bg-[#F2C14E]"]:hover,
a[class*="bg-[#F2C14E]"]:hover,
button[class*="hover:bg-[#D8A72E]"]:hover,
a[class*="hover:bg-[#D8A72E]"]:hover,
button[class*="hover:bg-[#FFE7A3]"]:hover,
a[class*="hover:bg-[#FFE7A3]"]:hover {
    background: linear-gradient(135deg, var(--iron-gold-hover), var(--iron-gold));
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}
[class*="bg-[#F2C14E]"] *,
[class*="bg-[#D8A72E]"] *,
[class*="bg-[#FFE7A3]"] *,
[class*="bg-[#FFF4D6]"] *,
.bg-amber-50 *,
.bg-amber-100 *,
.bg-yellow-50 *,
.bg-yellow-100 * {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}

/* Icons/teks accent */
[class*="text-[#F2C14E]"] {
    color: var(--iron-gold);
    -webkit-text-fill-color: var(--iron-gold);
}
[class*="text-[#7A1114]"],
.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-blue-500,
.text-blue-600 {
    color: var(--iron-maroon);
    -webkit-text-fill-color: var(--iron-maroon);
}

/* Input/focus */
input,
select,
textarea,
.form-input {
    background: #ffffff;
    color: var(--iron-text);
    border-color: var(--iron-border);
}
input::placeholder,
textarea::placeholder {
    color: #9A8585;
}
input:focus,
select:focus,
textarea:focus,
.form-input:focus {
    border-color: var(--iron-gold);
    box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.26);
    outline: none;
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--iron-maroon);
}

/* Disabled button masih jelas tetapi nampak disabled */
button:disabled,
button[disabled],
button.disabled,
.disabled {
    opacity: 0.72;
}
button:disabled:not([class*="bg-[#FFF4D6]"]):not([class*="bg-[#F2C14E]"]),
button[disabled]:not([class*="bg-[#FFF4D6]"]):not([class*="bg-[#F2C14E]"]) {
    background: linear-gradient(135deg, #9A2C2F, #7A1114);
    color: rgba(255, 255, 255, 0.92);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
}
button:disabled *,
button[disabled] * {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

/* Table header/freeze header */
thead tr,
.bg-slate-100,
.attendance-table-wrap th {
    background-color: var(--iron-soft-gold);
    color: var(--iron-text);
    border-color: var(--iron-border);
}

/* Profile dropdown */
#adminProfileDropdown {
    background: #ffffff;
    color: var(--iron-text);
    border-color: var(--iron-border);
    box-shadow: 0 24px 48px rgba(90, 11, 13, 0.18);
}
#adminProfileDropdown p,
#adminProfileDropdown span,
#adminProfileDropdown button,
#adminProfileDropdown a,
#adminProfileDropdown i {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}
#adminProfileDropdown button:hover,
#modalTetapanAdmin .settings-tab:hover,
.action-tile:hover,
.meal-option:hover,
.meal-option:has(input:checked) {
    background: var(--iron-soft-gold);
    border-color: var(--iron-gold);
    color: var(--iron-maroon);
}

/* Modal close button atas header gelap */
.modal-pop button[onclick*="tutup"],
[id^="modal-"] button[onclick*="tutup"],
#modalTetapanAdmin button[onclick*="tutup"] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Danger kekal merah jelas */
.bg-red-500,
.bg-red-600,
button:has(.fa-trash),
a:has(.fa-trash) {
    background: var(--iron-danger);
    color: #ffffff;
    border-color: var(--iron-danger);
}
.bg-red-500 *,
.bg-red-600 *,
button:has(.fa-trash) *,
a:has(.fa-trash) * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
.bg-red-50,
.bg-red-100 {
    background: #FEE2E2;
    color: #7F1D1D;
}
.bg-red-50 *,
.bg-red-100 * {
    color: #7F1D1D;
    -webkit-text-fill-color: #7F1D1D;
}

/* SweetAlert2 */
.swal2-popup {
    border-radius: 1.25rem;
    font-family: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
    border: 1px solid var(--iron-border);
    box-shadow: 0 28px 70px rgba(90, 11, 13, 0.20);
}
.swal2-title { color: var(--iron-text); }
.swal2-html-container { color: var(--iron-muted); }
.swal2-confirm {
    background: linear-gradient(135deg, var(--iron-maroon), var(--iron-red));
    color: #ffffff;
    border-radius: 0.8rem;
}
.swal2-cancel {
    background: #E5E7EB;
    color: var(--iron-text);
    border-radius: 0.8rem;
}

/* IRONMAN FINAL PRIORITY: solid maroon surfaces win over any text-gold utility */
button[type="submit"],
.btn-primary,
a.btn-primary,
.btn-login,
button[class*="bg-[#7A1114]"],
a[class*="bg-[#7A1114]"],
button[class*="bg-[#951B1E]"],
a[class*="bg-[#951B1E]"],
button[class*="bg-[#6B0D10]"],
a[class*="bg-[#6B0D10]"],
button[class*="bg-gradient-to-r"],
a[class*="bg-gradient-to-r"] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
button[type="submit"] *,
.btn-primary *,
a.btn-primary *,
.btn-login *,
button[class*="bg-[#7A1114]"] *,
a[class*="bg-[#7A1114]"] *,
button[class*="bg-[#951B1E]"] *,
a[class*="bg-[#951B1E]"] *,
button[class*="bg-[#6B0D10]"] *,
a[class*="bg-[#6B0D10]"] *,
button[class*="bg-gradient-to-r"] *,
a[class*="bg-gradient-to-r"] * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
/* Gold buttons remain dark text, intentionally */
button[class*="bg-[#F2C14E]"],
a[class*="bg-[#F2C14E]"] {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}
button[class*="bg-[#F2C14E]"] *,
a[class*="bg-[#F2C14E]"] * {
    color: var(--iron-text);
    -webkit-text-fill-color: var(--iron-text);
}

/* =========================================================
   PESERTA FIX: Kontra detail kursus + label Senarai Kursus
   ========================================================= */
.participant-top-header,
.participant-top-header *:not(.participant-profile-pill):not(.participant-profile-pill *) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.participant-profile-pill,
.participant-profile-pill *:not(.participant-avatar):not(.participant-avatar *) {
    color: var(--iron-text, #171313);
    -webkit-text-fill-color: var(--iron-text, #171313);
    text-shadow: none;
}

.participant-profile-pill {
    background: #ffffff;
    border-color: rgba(242, 193, 78, 0.9);
}

.participant-avatar,
.participant-avatar * {
    background: linear-gradient(135deg, var(--iron-maroon, #7A1114), var(--iron-red, #951B1E));
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.participant-course-hero,
.participant-course-hero *:not(.participant-badge-gold):not(.participant-badge-gold *) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.participant-course-hero {
    background:
        radial-gradient(circle at 12% 0%, rgba(242, 193, 78, 0.18), transparent 32%),
        linear-gradient(135deg, var(--iron-deep, #3B0709), var(--iron-maroon, #7A1114) 58%, var(--iron-red, #951B1E));
}

.participant-badge-gold,
.participant-badge-gold * {
    background: linear-gradient(135deg, var(--iron-gold, #F2C14E), #FFD977);
    color: var(--iron-text, #171313);
    -webkit-text-fill-color: var(--iron-text, #171313);
    text-shadow: none;
}

.participant-manual-attendance,
.participant-history-panel,
#participant-course-list > a,
#participant-history-list a {
    color: var(--iron-text, #171313);
    -webkit-text-fill-color: currentColor;
}

.participant-manual-attendance p,
.participant-history-panel p,
#participant-course-list h3,
#participant-course-list p,
#participant-course-list span,
#participant-history-list p,
#participant-history-list span,
#participant-history-list div {
    text-shadow: none;
}

.participant-manual-attendance .bg-\[\#7A1114\],
.participant-manual-attendance .bg-\[\#7A1114\] *,
#participant-course-list .bg-\[\#7A1114\],
#participant-course-list .bg-\[\#7A1114\] *,
#participant-history-list .bg-\[\#7A1114\],
#participant-history-list .bg-\[\#7A1114\] * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Participant course hero uses semantic component classes. */
.participant-course-detail-page .participant-course-hero,
.participant-course-detail-page .participant-course-hero h1,
.participant-course-detail-page .participant-course-hero h2,
.participant-course-detail-page .participant-course-hero h3,
.participant-course-detail-page .participant-course-hero h4,
.participant-course-detail-page .participant-course-hero p,
.participant-course-detail-page .participant-course-hero span:not(.participant-badge-gold),
.participant-course-detail-page .participant-course-hero div:not(.participant-badge-gold),
.participant-course-detail-page .participant-course-hero i {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.participant-course-detail-page .participant-course-hero .participant-badge-gold,
.participant-course-detail-page .participant-course-hero .participant-badge-gold * {
    color: var(--iron-text, #171313);
    -webkit-text-fill-color: var(--iron-text, #171313);
}

/* =========================================================
   Peserta - Kehadiran Budi Bicara Slot Online
   ========================================================= */
@keyframes mytadribSlotBreathing {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(122, 17, 20, 0.28), 0 12px 28px rgba(122, 17, 20, 0.08);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(122, 17, 20, 0.08), 0 18px 36px rgba(122, 17, 20, 0.16);
        transform: translateY(-1px);
    }
}

.slot-attendance-card {
    position: relative;
}

.slot-card-open {
    border-color: #7A1114;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8E6 100%);
    animation: mytadribSlotBreathing 1.75s ease-in-out infinite;
}

.slot-card-attended {
    border-color: #7A1114;
    background: #FFF8E6;
    box-shadow: 0 10px 24px rgba(122, 17, 20, 0.08);
}

.slot-card-closed {
    border-color: #E7D5B5;
    background: #FFF8E6;
    opacity: 0.82;
}

.slot-label-open {
    background: #7A1114;
    color: #FFFFFF;
    border: 1px solid #E7D5B5;
    box-shadow: 0 8px 18px rgba(122, 17, 20, 0.18);
}

.slot-label-attended {
    background: #7A1114;
    color: #FFFFFF;
    border: 1px solid #E7D5B5;
}

.slot-label-muted {
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
}

.slot-label-closed {
    background: #7A0F14;
    color: #FFFFFF;
    border: 1px solid #F3C758;
}

.slot-attendance-button {
    color: #FFFFFF;
}

.slot-attendance-button:hover {
    background: #5A0B0D;
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .slot-card-open {
        animation: none;
    }
}

/* =========================================================
   VISIBILITY HOTFIX - KONTRA TULISAN & INPUT
   ========================================================= */

/* Admin header profile */
.admin-profile-trigger {
    background: #ffffff;
    border: 1px solid #F2C14E;
    box-shadow: 0 10px 24px rgba(122, 17, 20, 0.10);
}

.admin-profile-trigger:hover {
    background: #FFF9E8;
}

.admin-profile-trigger .admin-profile-name,
.admin-profile-trigger .admin-profile-role,
.admin-profile-trigger i,
.admin-profile-trigger span,
.admin-profile-trigger div {
    text-shadow: none;
}

.admin-profile-trigger .admin-profile-name {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.admin-profile-trigger .admin-profile-role,
.admin-profile-trigger .fa-chevron-down {
    color: #475569;
    -webkit-text-fill-color: #475569;
}

.admin-profile-avatar,
.admin-profile-avatar * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.admin-profile-dropdown * {
    text-shadow: none;
}

/* Dashboard stat cards and pop-up list */
.dashboard-stat-card,
.dashboard-list-item {
    background: #ffffff;
}

.dashboard-stat-card .dashboard-stat-label {
    color: #64748B;
    -webkit-text-fill-color: #64748B;
}

.dashboard-stat-card .dashboard-stat-value,
.dashboard-stat-card .text-3xl,
.dashboard-stat-card p.text-3xl {
    color: #111827;
    -webkit-text-fill-color: #111827;
    text-shadow: none;
}

.dashboard-stat-card p,
.dashboard-list-item p,
.dashboard-list-item h3,
.dashboard-list-item h4,
#modalJumlahKursus h3,
#modalAkanDatang h3,
#modalSemuaPeserta h3,
#modalJumlahKursus p,
#modalAkanDatang p,
#modalSemuaPeserta p {
    text-shadow: none;
}

.dashboard-course-code,
#modalJumlahKursus .dashboard-course-code,
#modalAkanDatang .dashboard-course-code,
#modalSemuaPeserta .dashboard-course-code {
    color: #7A1114;
    -webkit-text-fill-color: #7A1114;
}

.dashboard-course-title,
#modalJumlahKursus .dashboard-course-title,
#modalAkanDatang .dashboard-course-title,
#modalSemuaPeserta .dashboard-course-title,
#modalJumlahKursus h3,
#modalAkanDatang h3,
#modalSemuaPeserta h3 {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.dashboard-course-meta,
#modalJumlahKursus .dashboard-course-meta,
#modalAkanDatang .dashboard-course-meta,
#modalSemuaPeserta .dashboard-course-meta {
    color: #475569;
    -webkit-text-fill-color: #475569;
}

/* Inputs and placeholders on light background */
input,
select,
textarea,
.form-input,
.form-input option {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder {
    color: #94A3B8;
    -webkit-text-fill-color: #94A3B8;
    opacity: 1;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
    color-scheme: light;
}

/* Browser autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #111827;
    caret-color: #111827;
    transition: background-color 9999s ease-in-out 0s;
}

/* Login page */
.login-card-shell h1,
.login-card-shell h2,
.login-card-shell h3,
.login-card-shell label,
.login-card-shell span,
.login-card-shell div,
.login-card-shell p {
    text-shadow: none;
}

.login-card-shell .login-muted,
.login-card-shell .text-white\/70,
.login-card-shell .text-white\/60,
.login-card-shell .text-white\/75,
.login-card-shell .text-white\/90 {
    color: #475569;
    -webkit-text-fill-color: #475569;
}

.login-visible-input,
.admin-login-input {
    background: #ffffff;
    color: #111827;
    border: 1px solid #CBD5E1;
    -webkit-text-fill-color: #111827;
}

.login-visible-input::placeholder,
.admin-login-input::placeholder {
    color: #94A3B8;
    -webkit-text-fill-color: #94A3B8;
    opacity: 1;
}

.login-visible-input:focus,
.admin-login-input:focus {
    border-color: #7A1114;
    box-shadow: 0 0 0 3px rgba(122, 17, 20, 0.16);
}

.login-card-shell button[type="submit"],
.admin-login-modal button[type="submit"] {
    background: #7A1114;
    color: #ffffff;
}

.login-card-shell button[type="submit"] *,
.admin-login-modal button[type="submit"] * {
    color: #ffffff;
}

.login-admin-link {
    color: #7A1114;
    font-weight: 700;
}

.admin-login-modal,
.admin-login-modal * {
    text-shadow: none;
}

.admin-login-modal h3 {
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.admin-login-modal label,
.admin-login-modal span,
.admin-login-modal p {
    color: #475569;
    -webkit-text-fill-color: #475569;
}

.admin-login-modal button[onclick="toggleAdminModal()"] {
    color: #64748B;
    -webkit-text-fill-color: #64748B;
}

/* =========================================================
   ATTENDANCE REPORT: white text on maroon hero/actions.
   ========================================================= */
#attendance-live-report > div:first-child,
#attendance-live-report > div:first-child h1,
#attendance-live-report > div:first-child h2,
#attendance-live-report > div:first-child h3,
#attendance-live-report > div:first-child h4,
#attendance-live-report > div:first-child p,
#attendance-live-report > div:first-child span,
#attendance-live-report > div:first-child div {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#attendance-live-report #bulk-note-button,
#attendance-live-report button[form="attendance-notes-form"],
#attendance-live-report #bulk-note-button *,
#attendance-live-report button[form="attendance-notes-form"] * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* =========================================================
   KONTRA GLOBAL FINAL - 05/06/2026
   Memastikan permukaan maroon/hijau gelap sentiasa bertulisan putih.
   Selector exact-token digunakan supaya bg maroon lutsinar seperti
   bg-[#7A1114]/10 tidak dianggap sebagai latar gelap penuh.
   ========================================================= */
html body [class~="bg-[#7A1114]"],
html body [class~="bg-[#7A0F14]"],
html body [class~="bg-[#6B0D10]"],
html body [class~="bg-[#951B1E]"],
html body [class~="bg-[#7A1114]"],
html body [class~="bg-[#5A0B0D]"],
html body [class~="bg-[#48657C]"],
html body [class~="bg-[#7A1114]"],
html body [class~="bg-[#7A1114]"],
html body [class~="bg-[#7A1114]"],
html body [class~="bg-[#951B1E]"],
html body [class~="bg-[#0F172A]"],
html body [class~="bg-[#164E63]"],
html body .bg-green-500,
html body .bg-green-600,
html body .bg-emerald-500,
html body .bg-emerald-600,
html body .bg-red-500,
html body .bg-red-600,
html body .bg-slate-700,
html body .bg-slate-800,
html body .bg-slate-900,
html body .slot-label-attended,
html body .slot-label-closed,
html body .course-maroon-button,
html body .course-filter-button {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

html body [class~="bg-[#7A1114]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#7A0F14]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#6B0D10]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#951B1E]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#7A1114]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#5A0B0D]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#48657C]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#7A1114]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#7A1114]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#7A1114]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#951B1E]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#0F172A]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body [class~="bg-[#164E63]"] :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-green-500 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-green-600 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-emerald-500 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-emerald-600 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-red-500 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-red-600 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-slate-700 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-slate-800 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .bg-slate-900 :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,button,a,div),
html body .slot-label-attended,
html body .slot-label-closed,
html body .course-maroon-button,
html body .course-maroon-button :is(span,strong,b),
html body .course-filter-button,
html body .course-filter-button :is(span,strong,b) {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* Latar cerah kekal menggunakan tulisan gelap. Pengecualian bg-white/10
   tidak disentuh kerana ia digunakan sebagai lapisan lutsinar pada header gelap. */
html body [class~="bg-[#FFF4D6]"],
html body [class~="bg-[#FFE7A3]"],
html body [class~="bg-[#F2C14E]"],
html body [class~="bg-[#FFF8E6]"],
html body [class~="bg-[#F4F7FB]"],
html body [class~="bg-[#F4F6F8]"],
html body [class~="bg-[#F8F3EA]"],
html body [class~="bg-white"],
html body .bg-slate-50,
html body .bg-slate-100,
html body .bg-amber-50,
html body .bg-amber-100,
html body .bg-yellow-50,
html body .bg-yellow-100 {
    -webkit-text-fill-color: currentColor;
}

/* =========================================================
   FINAL BRAND CLEANUP - MAROON / GOLD ONLY
   Menghapus baki hijau daripada butang, status dan komponen lama.
   ========================================================= */
:root {
    --jais-deep: #7A1114;
    --jais-deep-2: #5A0B0D;
    --jais-green: #7A1114;
    --jais-green-hover: #5A0B0D;
    --jais-soft: #FFF4D6;
    --jais-border: #E7D5B5;
}

/* Butang Kemaskini dalam detail kursus */
html body .action-tile-primary {
    background: #7A1114;
    border-color: #7A1114;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 10px 22px rgba(122, 17, 20, 0.16);
}
html body .action-tile-primary * {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
html body .action-tile-primary:hover {
    background: #5A0B0D;
    border-color: #5A0B0D;
    color: #ffffff;
}

/* Arkib kekal emas supaya jelas di atas header maroon */
html body .course-archive-button,
html body a[href*="arkib"].course-archive-button,
html body a[href*="Arkib"].course-archive-button {
    background: #F2C14E;
    border-color: #F2C14E;
    color: #171313;
    -webkit-text-fill-color: #171313;
    box-shadow: 0 10px 22px rgba(122, 17, 20, 0.12);
}
html body .course-archive-button * {
    color: #171313;
    -webkit-text-fill-color: #171313;
}
html body .course-archive-button:hover {
    background: #D6A93A;
    border-color: #D6A93A;
}

/* Butang kembali pada halaman Semak Kehadiran */
.attendance-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .6rem .85rem;
    border-radius: .8rem;
    background: #F2C14E;
    border: 1px solid #E7D5B5;
    color: #171313;
    -webkit-text-fill-color: #171313;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(90, 11, 13, .14);
    transition: transform .15s ease, background-color .15s ease;
}
.attendance-back-link svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: #171313;
    stroke: currentColor;
}
.attendance-back-link:hover {
    background: #D6A93A;
    transform: translateY(-1px);
}
@media (max-width: 639px) {
    .attendance-back-link {
        width: 2.5rem;
        padding: .6rem;
    }
    .attendance-back-link span {
        display: none;
    }
}

/* Semua utility hijau lama dipetakan kepada identiti maroon/emas */
html body .bg-green-50,
html body .bg-green-100,
html body .bg-emerald-50,
html body .bg-emerald-100,
html body .bg-teal-50,
html body .bg-teal-100 {
    background: #FFF4D6;
}
html body .border-green-200,
html body .border-emerald-200,
html body .border-teal-200 {
    border-color: #E7D5B5;
}
html body .text-green-500,
html body .text-green-600,
html body .text-green-700,
html body .text-green-800,
html body .text-emerald-500,
html body .text-emerald-600,
html body .text-emerald-700,
html body .text-emerald-800 {
    color: #7A1114;
    -webkit-text-fill-color: #7A1114;
}
html body .bg-green-500,
html body .bg-green-600,
html body .bg-emerald-500,
html body .bg-emerald-600,
html body [class~="bg-[#7A1114]"] {
    background-color: #7A1114;
}
html body .bg-green-500:hover,
html body .bg-green-600:hover,
html body .bg-emerald-500:hover,
html body .bg-emerald-600:hover {
    background-color: #5A0B0D;
}

/* =========================================================
   PESERTA SAHAJA - Kembalikan status kehadiran warna hijau
   Admin kekal menggunakan tema maroon/emas.
   ========================================================= */
@keyframes participantSlotBreathingGreen {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.28), 0 12px 28px rgba(22, 163, 74, 0.08);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(22, 163, 74, 0.08), 0 18px 36px rgba(22, 163, 74, 0.16);
        transform: translateY(-1px);
    }
}

html body .participant-course-detail-page .slot-card-open {
    border-color: #16A34A;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
    animation: participantSlotBreathingGreen 1.75s ease-in-out infinite;
}

html body .participant-course-detail-page .slot-card-attended {
    border-color: #16A34A;
    background: #F0FDF4;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.08);
}

html body .participant-course-detail-page .slot-label-open,
html body .participant-course-detail-page .slot-label-attended,
html body .participant-course-detail-page .participant-attendance-success,
html body .participant-course-detail-page .participant-attendance-button,
html body .participant-course-detail-page .slot-attendance-button {
    background: #16A34A;
    border-color: #86EFAC;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

html body .participant-course-detail-page .slot-label-open *,
html body .participant-course-detail-page .slot-label-attended *,
html body .participant-course-detail-page .participant-attendance-success *,
html body .participant-course-detail-page .participant-attendance-button *,
html body .participant-course-detail-page .slot-attendance-button * {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

html body .participant-course-detail-page .slot-label-open {
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

html body .participant-course-detail-page .participant-attendance-button:hover,
html body .participant-course-detail-page .slot-attendance-button:hover {
    background: #15803D;
    border-color: #86EFAC;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    html body .participant-course-detail-page .slot-card-open {
        animation: none;
    }
}

/* MyTadrib centralized UI theme
   Tukar warna/font header modal di sini sahaja. */
:root {
    --myt-color-maroon: #6B0D10;
    --myt-color-maroon-text: #FFFFFF;
    --myt-color-gold: #F2C14E;
    --myt-modal-header-font: inherit;
}

.myt-modal-header {
    background: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
    font-family: var(--myt-modal-header-font);
}

html body .myt-modal-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

html body .myt-modal-header :is(.myt-modal-title, .myt-modal-kicker, .myt-modal-subtitle, .myt-modal-close) {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

html body .myt-modal-header i {
    color: var(--myt-color-gold);
    -webkit-text-fill-color: var(--myt-color-gold);
}

html body .myt-modal-header .myt-modal-close {
    opacity: 0.85;
}

html body .myt-modal-header .myt-modal-close:hover {
    opacity: 1;
}


/* MyTadrib centralized dashboard card theme
   Tukar rupa semua kad statistik dashboard di sini sahaja. */
:root {
    --myt-dashboard-card-bg: #FFFFFF;
    --myt-dashboard-card-border: #E7D5B5;
    --myt-dashboard-card-title: #334155;
    --myt-dashboard-card-value: #020617;
    --myt-dashboard-card-muted: #64748B;
    --myt-dashboard-card-icon-bg: rgba(107, 13, 16, 0.10);
    --myt-dashboard-card-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --myt-dashboard-card-hover-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.10);
}

html body .dashboard-stat-card {
    background: var(--myt-dashboard-card-bg);
    background-color: var(--myt-dashboard-card-bg);
    border-color: var(--myt-dashboard-card-border);
    color: var(--myt-dashboard-card-title);
    box-shadow: var(--myt-dashboard-card-shadow);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card .dashboard-stat-label {
    color: var(--myt-dashboard-card-title);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card .dashboard-stat-value,
html body .dashboard-stat-card p.text-3xl {
    color: var(--myt-dashboard-card-value);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card > p,
html body .dashboard-stat-card .dashboard-stat-note {
    color: var(--myt-dashboard-card-muted);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card .dashboard-stat-icon {
    background: var(--myt-dashboard-card-icon-bg);
}


/* ==========================================================
   Dashboard statistic cards — centralized hover state
   Semua kad kekal putih apabila hover, termasuk pautan Arkib.
   ========================================================== */
:root {
    --myt-dashboard-card-hover-bg: var(--myt-dashboard-card-bg);
    --myt-dashboard-card-hover-border: #F2C14E;
}

html body .dashboard-stat-card:hover,
html body .dashboard-stat-card:focus-visible {
    background: var(--myt-dashboard-card-hover-bg);
    background-color: var(--myt-dashboard-card-hover-bg);
    border-color: var(--myt-dashboard-card-hover-border);
    color: var(--myt-dashboard-card-title);
    box-shadow: var(--myt-dashboard-card-hover-shadow);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card:hover .dashboard-stat-label,
html body .dashboard-stat-card:focus-visible .dashboard-stat-label {
    color: var(--myt-dashboard-card-title);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card:hover .dashboard-stat-value,
html body .dashboard-stat-card:focus-visible .dashboard-stat-value,
html body .dashboard-stat-card:hover p.text-3xl,
html body .dashboard-stat-card:focus-visible p.text-3xl {
    color: var(--myt-dashboard-card-value);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card:hover > p,
html body .dashboard-stat-card:focus-visible > p,
html body .dashboard-stat-card:hover .dashboard-stat-note,
html body .dashboard-stat-card:focus-visible .dashboard-stat-note {
    color: var(--myt-dashboard-card-muted);
    -webkit-text-fill-color: currentColor;
}

html body .dashboard-stat-card:hover .dashboard-stat-icon,
html body .dashboard-stat-card:focus-visible .dashboard-stat-icon {
    background: var(--myt-dashboard-card-icon-bg);
}


/* Arkib ialah pautan, tetapi rupa asasnya mesti sama dengan kad statistik lain. */
html body a.dashboard-stat-card[href*="arkib"],
html body a.dashboard-stat-card[href*="Arkib"] {
    box-shadow: var(--myt-dashboard-card-shadow);
}

html body a.dashboard-stat-card[href*="arkib"]:hover,
html body a.dashboard-stat-card[href*="Arkib"]:hover,
html body a.dashboard-stat-card[href*="arkib"]:focus-visible,
html body a.dashboard-stat-card[href*="Arkib"]:focus-visible {
    box-shadow: var(--myt-dashboard-card-hover-shadow);
}

/* ==========================================================
   Course action buttons — centralized maroon text colour
   ========================================================== */
:root {
    --myt-course-maroon-button-text: #FFFFFF;
}

html body .course-maroon-button,
html body .course-maroon-button:hover,
html body .course-maroon-button:focus-visible,
html body .course-maroon-button :is(i, span, strong, b) {
    color: var(--myt-course-maroon-button-text);
    -webkit-text-fill-color: currentColor;
}


/* ==========================================================
   Course detail action separators
   Jarak atas/bawah butang pengesahan sentiasa seimbang.
   ========================================================== */
.course-confirm-section {
    margin-top: 0.75rem;
    padding-block: 0.75rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.course-delete-form {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.course-confirm-section + .course-delete-form {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* ==========================================================
   Peserta — tajuk kursus pada hero
   Warna tajuk boleh ditukar melalui variable ini sahaja.
   ========================================================== */
:root {
    --myt-participant-hero-title-color: #FFFFFF;
}

.participant-course-hero .participant-hero-title {
    color: var(--myt-participant-hero-title-color);
    -webkit-text-fill-color: var(--myt-participant-hero-title-color);
}

/* ==========================================================
   Tempahan Makanan — paparan ringkas dan editor menu
   Semua warna, jarak dan keadaan komponen dipusatkan di sini.
   ========================================================== */
:root {
    --myt-food-maroon: #7A1114;
    --myt-food-maroon-dark: #6B0D10;
    --myt-food-gold: #F2C14E;
    --myt-food-cream: #FFF9EA;
    --myt-food-soft: #F8FAFC;
    --myt-food-border: #DBE3EC;
    --myt-food-text: #171313;
    --myt-food-muted: #64748B;
    --myt-food-card-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.food-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) auto;
    gap: .75rem;
    align-items: stretch;
}

.food-primary-button,
.food-primary-button * {
    color: #FFFFFF;
    -webkit-text-fill-color: currentColor;
}

/* Kad kursus ditutup secara lalai supaya senarai tidak terlalu panjang. */
.food-course-card {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: var(--myt-food-card-shadow);
}

.food-course-summary {
    display: block;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.food-course-summary::-webkit-details-marker {
    display: none;
}

.food-course-summary:hover {
    background: #FFFCF5;
}

.food-course-summary-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.food-course-status {
    min-width: 170px;
    text-align: right;
}

.food-course-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .7rem;
    border: 1px solid #E7D5B5;
    border-radius: .75rem;
    background: var(--myt-food-cream);
    padding: .55rem .75rem;
    color: var(--myt-food-maroon);
    font-size: .75rem;
    font-weight: 900;
}

.food-course-toggle i {
    transition: transform .18s ease;
}

.food-course-toggle-open {
    display: none;
}

.food-course-card[open] .food-course-toggle-closed {
    display: none;
}

.food-course-card[open] .food-course-toggle-open {
    display: inline;
}

.food-course-card[open] .food-course-toggle i {
    transform: rotate(180deg);
}

.food-course-body {
    border-top: 1px solid #E2E8F0;
    padding: 1.25rem;
}

.food-editor-section {
    margin-bottom: 1rem;
}

.food-editor-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}

.food-editor-section-heading h3,
.food-menu-toolbar-title h3 {
    color: var(--myt-food-text);
    font-size: .9rem;
    font-weight: 900;
}

.food-editor-section-heading p,
.food-menu-toolbar-title p {
    margin-top: .15rem;
    color: var(--myt-food-muted);
    font-size: .74rem;
    line-height: 1.45;
}

.food-meal-selector {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem;
}

.food-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.65rem;
    padding: .6rem .7rem;
    border: 1px solid var(--myt-food-border);
    border-radius: .75rem;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.food-option:hover {
    border-color: var(--myt-food-gold);
    background: var(--myt-food-cream);
}

.food-option:has(input:checked) {
    border-color: #E6BD4D;
    background: #FFF7D8;
    box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .18);
}

.food-option input {
    width: .95rem;
    height: .95rem;
    accent-color: var(--myt-food-maroon);
    flex: 0 0 auto;
}

.food-option span {
    color: var(--myt-food-text);
    -webkit-text-fill-color: currentColor;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.food-menu-editor {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #FFFFFF;
}

.food-menu-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #E2E8F0;
    background: var(--myt-food-soft);
}

.food-menu-toolbar-title {
    min-width: 220px;
}

.food-menu-toolbar-controls {
    display: grid;
    grid-template-columns: minmax(190px, 250px) auto;
    gap: .65rem;
    align-items: end;
}

.food-menu-label {
    display: block;
    margin-bottom: .35rem;
    color: #475569;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.food-apply-set-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem .9rem;
    border: 1px solid var(--myt-food-maroon);
    border-radius: .75rem;
    background: var(--myt-food-maroon);
    color: #FFFFFF;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
    transition: background-color .18s ease, transform .18s ease;
}

.food-apply-set-button:hover {
    background: var(--myt-food-maroon-dark);
    transform: translateY(-1px);
}

.food-menu-day-tabs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .8rem 1rem;
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF;
    scrollbar-width: thin;
}

.food-menu-day-tab {
    display: inline-flex;
    min-width: 92px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    border: 1px solid #E2E8F0;
    border-radius: .7rem;
    background: #FFFFFF;
    padding: .55rem .65rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 900;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.food-menu-day-tab small {
    color: #94A3B8;
    font-size: .62rem;
    font-weight: 800;
}

.food-menu-day-tab:hover,
.food-menu-day-tab.is-active {
    border-color: var(--myt-food-gold);
    background: var(--myt-food-cream);
    color: var(--myt-food-maroon);
}

.food-menu-day-tab.is-active small {
    color: var(--myt-food-maroon);
}

.food-menu-days {
    padding: 1rem;
}

.food-menu-day[hidden],
.food-menu-meal-field[hidden] {
    display: none;
}

.food-menu-day {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: .85rem;
    background: #FFFFFF;
}

.food-menu-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.food-menu-day-number {
    color: var(--myt-food-maroon);
    font-size: .8rem;
    font-weight: 900;
}

.food-menu-day-date {
    margin-left: .45rem;
    color: #64748B;
    font-size: .72rem;
    font-weight: 700;
}

.food-menu-cycle-label {
    border-radius: 999px;
    background: #FFF4D6;
    padding: .28rem .5rem;
    color: var(--myt-food-maroon);
    font-size: .62rem;
    font-weight: 900;
}

.food-menu-meals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .8rem;
}

.food-menu-meal-field {
    border: 1px solid #E2E8F0;
    border-radius: .75rem;
    background: #F8FAFC;
    padding: .65rem;
}

.food-menu-meal-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
    color: var(--myt-food-text);
    font-size: .75rem;
    font-weight: 900;
}

.food-menu-meal-field label span {
    color: var(--myt-food-muted);
    font-size: .64rem;
    font-weight: 700;
}

.food-menu-meal-field textarea {
    width: 100%;
    min-height: 5.7rem;
    resize: vertical;
    border: 1px solid #CBD5E1;
    border-radius: .65rem;
    background: #FFFFFF;
    padding: .6rem .7rem;
    color: var(--myt-food-text);
    font-size: .78rem;
    line-height: 1.45;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.food-menu-meal-field textarea:focus {
    outline: none;
    border-color: var(--myt-food-gold);
    box-shadow: 0 0 0 3px rgba(242, 193, 78, .18);
}

.food-menu-empty-date {
    margin: 1rem;
    border: 1px dashed #CBD5E1;
    border-radius: .8rem;
    padding: 1rem;
    color: var(--myt-food-muted);
    font-size: .82rem;
    text-align: center;
}

@media (max-width: 1100px) {
    .food-meal-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .food-menu-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .food-filter-grid {
        grid-template-columns: 1fr;
    }

    .food-course-summary-grid {
        flex-direction: column;
    }

    .food-course-status {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .food-menu-meals {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .food-meal-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .food-menu-toolbar-controls {
        grid-template-columns: 1fr;
    }

    .food-apply-set-button {
        width: 100%;
    }

    .food-menu-day-header {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* ==========================================================
   Tetapan set menu mingguan
   ========================================================== */
.food-menu-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #E7D5B5;
    border-radius: 1rem;
    background: #FFF9EA;
    padding: .8rem 1rem;
}

.food-menu-info-text {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: #475569;
    font-size: .82rem;
    line-height: 1.5;
}

.food-menu-info-text i {
    margin-top: .2rem;
    color: var(--myt-food-maroon);
}

.food-manage-set-link,
.food-set-back-link,
.food-copy-breakfast-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid #E7D5B5;
    border-radius: .75rem;
    background: #FFFFFF;
    padding: .65rem .85rem;
    color: var(--myt-food-maroon);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.food-manage-set-link:hover,
.food-set-back-link:hover,
.food-copy-breakfast-button:hover {
    border-color: var(--myt-food-gold);
    background: var(--myt-food-cream);
    transform: translateY(-1px);
}

.food-set-manager-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #E7D5B5;
    border-radius: 1rem;
    background: #FFF9EA;
    padding: 1rem 1.1rem;
}

.food-set-manager-intro h2 {
    color: var(--myt-food-text);
    font-size: 1rem;
    font-weight: 900;
}

.food-set-manager-intro h2 i {
    margin-right: .45rem;
    color: var(--myt-food-maroon);
}

.food-set-manager-intro p {
    margin-top: .25rem;
    max-width: 760px;
    color: #64748B;
    font-size: .8rem;
    line-height: 1.55;
}

.food-set-picker-card {
    display: grid;
    grid-template-columns: minmax(190px, 280px);
    gap: .4rem;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #FFFFFF;
    padding: 1rem;
    box-shadow: var(--myt-food-card-shadow);
}

.food-set-picker-card label {
    color: #475569;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.food-set-panel[hidden],
.food-set-panel [data-set-day-panel][hidden] {
    display: none;
}

.food-set-panel {
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #FFFFFF;
    box-shadow: var(--myt-food-card-shadow);
}

.food-set-panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #E2E8F0;
    background: var(--myt-food-soft);
}

.food-set-panel-header span {
    color: #64748B;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.food-set-panel-header h2 {
    margin-top: .15rem;
    color: var(--myt-food-maroon);
    font-size: 1.1rem;
    font-weight: 900;
}

.food-set-panel-header p {
    max-width: 580px;
    color: #64748B;
    font-size: .76rem;
    line-height: 1.5;
    text-align: right;
}

.food-copy-breakfast-button {
    padding: .48rem .65rem;
    font-size: .68rem;
}

.food-set-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
}

.food-set-form-actions p {
    color: #64748B;
    font-size: .75rem;
}

.food-set-form-actions p i {
    margin-right: .35rem;
    color: var(--myt-food-maroon);
}

.food-set-form-actions .food-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    background: var(--myt-food-maroon);
    padding: .7rem 1rem;
    font-size: .78rem;
    font-weight: 900;
}

.food-set-form-actions .food-primary-button:hover {
    background: var(--myt-food-maroon-dark);
}

@media (max-width: 760px) {
    .food-menu-info-row,
    .food-set-manager-intro,
    .food-set-panel-header,
    .food-set-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .food-manage-set-link,
    .food-set-back-link,
    .food-set-form-actions .food-primary-button {
        width: 100%;
    }

    .food-set-panel-header p {
        text-align: left;
    }
}

/* ==========================================================
   MODUL PENGINAPAN
   Semua warna dan bentuk utama modul boleh diubah di sini.
   ========================================================== */
:root {
    --accommodation-maroon: #7A1114;
    --accommodation-maroon-dark: #5F0D10;
    --accommodation-gold: #F2C14E;
    --accommodation-gold-soft: #FFF4D6;
    --accommodation-surface: #FFFFFF;
    --accommodation-border: #DCE5F0;
    --accommodation-muted: #64748B;
    --accommodation-text: #1E293B;
    --accommodation-success: #047857;
    --accommodation-danger: #B91C1C;
    --accommodation-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
}

.accommodation-stat-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    border: 1px solid var(--accommodation-border);
    border-radius: 18px;
    background: var(--accommodation-surface);
    box-shadow: var(--accommodation-shadow);
}

.accommodation-stat-card strong {
    color: var(--accommodation-text);
    font-size: 30px;
    line-height: 1;
}

.accommodation-stat-card small {
    color: var(--accommodation-muted);
    font-size: 11px;
    font-weight: 600;
}

.accommodation-stat-label {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.accommodation-stat-card-highlight {
    border-color: #E7D5B5;
    background: linear-gradient(135deg, #FFFDF8 0%, var(--accommodation-gold-soft) 100%);
}

.accommodation-floor-summary,
.accommodation-section-header,
.accommodation-course-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.accommodation-floor-summary {
    padding: 18px 20px;
    border: 1px solid var(--accommodation-border);
    border-radius: 18px;
    background: var(--accommodation-surface);
    box-shadow: var(--accommodation-shadow);
}

.accommodation-floor-summary h2,
.accommodation-section-header h2,
.accommodation-course-head h2 {
    margin-top: 2px;
    color: var(--accommodation-text);
    font-size: 17px;
    font-weight: 900;
}

.accommodation-floor-kicker {
    color: var(--accommodation-maroon);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.accommodation-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--accommodation-border);
    border-radius: 16px;
    background: #F8FAFC;
}

.accommodation-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.accommodation-tab:hover,
.accommodation-tab.active {
    color: #FFFFFF;
    background: var(--accommodation-maroon);
    box-shadow: 0 6px 16px rgba(122, 17, 20, 0.18);
}

.accommodation-panel {
    overflow: hidden;
    border: 1px solid var(--accommodation-border);
    border-radius: 20px;
    background: var(--accommodation-surface);
    box-shadow: var(--accommodation-shadow);
}

.accommodation-panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    color: var(--accommodation-text);
    font-size: 14px;
    font-weight: 900;
    list-style: none;
}

.accommodation-panel-summary::-webkit-details-marker {
    display: none;
}

.accommodation-panel-summary small {
    color: var(--accommodation-muted);
    font-size: 11px;
    font-weight: 600;
}

.accommodation-section-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--accommodation-border);
    background: #FBFCFE;
}

.accommodation-section-header > span {
    color: var(--accommodation-muted);
    font-size: 11px;
    font-weight: 800;
}

.accommodation-room-editor,
.accommodation-room-group {
    padding: 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 16px;
    background: #FCFDFE;
}

.accommodation-room-editor-head,
.accommodation-room-group-title,
.accommodation-gender-card,
.accommodation-assignment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.accommodation-room-editor-head {
    margin-bottom: 14px;
}

.accommodation-room-editor-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accommodation-room-editor-head > span {
    color: var(--accommodation-maroon);
    font-size: 12px;
    font-weight: 900;
}

.accommodation-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accommodation-gold-soft);
    color: var(--accommodation-maroon);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.accommodation-status-penyelenggaraan,
.accommodation-status-tidak-aktif,
.accommodation-status-tidak-digunakan,
.accommodation-booking-status-dibatalkan {
    background: #FEE2E2;
    color: var(--accommodation-danger);
}

.accommodation-booking-status-disahkan {
    background: #D1FAE5;
    color: var(--accommodation-success);
}

.accommodation-primary-button,
.accommodation-secondary-button,
.accommodation-confirm-button,
.accommodation-delete-text-button,
.accommodation-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.accommodation-primary-button,
.accommodation-confirm-button {
    padding: 11px 16px;
    color: #FFFFFF;
    background: var(--accommodation-maroon);
}

.accommodation-primary-button:hover,
.accommodation-confirm-button:hover {
    background: var(--accommodation-maroon-dark);
    transform: translateY(-1px);
}

.accommodation-secondary-button {
    padding: 10px 14px;
    border: 1px solid var(--accommodation-border);
    color: var(--accommodation-text);
    background: #FFFFFF;
}

.accommodation-secondary-button:hover {
    border-color: var(--accommodation-gold);
    background: #FFFDF7;
}

.accommodation-delete-text-button {
    padding: 10px 14px;
    color: var(--accommodation-danger);
    background: #FEF2F2;
}

.accommodation-delete-button {
    width: 40px;
    height: 40px;
    color: var(--accommodation-danger);
    background: #FEF2F2;
}

.accommodation-course-head {
    padding: 20px;
    border-bottom: 1px solid var(--accommodation-border);
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9EA 100%);
}

.accommodation-course-head p {
    margin-top: 5px;
    color: var(--accommodation-muted);
    font-size: 12px;
}

.accommodation-course-code {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accommodation-gold-soft);
    color: var(--accommodation-maroon);
    font-size: 9px;
    font-weight: 900;
}

.accommodation-assignment-toolbar {
    padding: 14px 16px;
    border: 1px solid #E7D5B5;
    border-radius: 16px;
    background: #FFF9EA;
}

.accommodation-assignment-toolbar h3 {
    color: var(--accommodation-text);
    font-size: 14px;
    font-weight: 900;
}

.accommodation-assignment-toolbar p {
    margin-top: 3px;
    color: var(--accommodation-muted);
    font-size: 11px;
}

.accommodation-gender-card {
    padding: 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 16px;
    background: #FFFFFF;
}

.accommodation-gender-card > div {
    display: flex;
    flex-direction: column;
}

.accommodation-gender-card strong,
.accommodation-room-group-title strong {
    color: var(--accommodation-text);
    font-size: 14px;
    font-weight: 900;
}

.accommodation-gender-card span,
.accommodation-room-group-title span {
    color: var(--accommodation-muted);
    font-size: 10px;
    font-weight: 700;
}

.accommodation-gender-card .form-input {
    max-width: 210px;
}

.accommodation-room-group-title {
    margin-bottom: 12px;
}

.accommodation-room-allocation {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--accommodation-border);
    border-radius: 14px;
    background: #FFFFFF;
}

.accommodation-room-allocation > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.accommodation-room-allocation strong {
    color: var(--accommodation-text);
    font-size: 12px;
    font-weight: 900;
}

.accommodation-room-allocation span,
.accommodation-room-allocation small {
    color: var(--accommodation-muted);
    font-size: 10px;
}

.accommodation-room-allocation small {
    color: var(--accommodation-danger);
    font-weight: 700;
}

.accommodation-room-allocation.unavailable {
    opacity: 0.68;
    background: #F8FAFC;
}

.accommodation-room-count {
    width: 72px;
    flex: 0 0 auto;
    padding: 9px 8px;
    border: 1px solid var(--accommodation-border);
    border-radius: 10px;
    color: var(--accommodation-text);
    background: #FFFFFF;
    text-align: center;
    font-weight: 900;
}

.accommodation-allocation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--accommodation-border);
    border-radius: 16px;
}

.accommodation-allocation-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-right: 1px solid var(--accommodation-border);
    background: #FBFCFE;
}

.accommodation-allocation-summary > div:last-child {
    border-right: 0;
}

.accommodation-allocation-summary span {
    color: var(--accommodation-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.accommodation-allocation-summary strong {
    color: var(--accommodation-text);
    font-size: 22px;
    font-weight: 900;
}

#accommodationRemainingGuests[data-state="complete"] {
    color: var(--accommodation-success);
}

#accommodationRemainingGuests[data-state="over"] {
    color: var(--accommodation-danger);
}

.accommodation-booking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 15px;
    color: inherit;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.accommodation-booking-row:hover {
    border-color: var(--accommodation-gold);
    box-shadow: var(--accommodation-shadow);
    transform: translateY(-1px);
}

.accommodation-booking-row h3 {
    overflow: hidden;
    color: var(--accommodation-text);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accommodation-booking-row p {
    margin-top: 4px;
    color: var(--accommodation-muted);
    font-size: 10px;
}

.accommodation-booking-counts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accommodation-muted);
    font-size: 11px;
}

.accommodation-booking-counts strong {
    color: var(--accommodation-maroon);
}

@media (max-width: 767px) {
    .accommodation-floor-summary,
    .accommodation-section-header,
    .accommodation-course-head,
    .accommodation-assignment-toolbar,
    .accommodation-gender-card,
    .accommodation-booking-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .accommodation-gender-card .form-input {
        max-width: none;
    }

    .accommodation-allocation-summary {
        grid-template-columns: 1fr;
    }

    .accommodation-allocation-summary > div {
        border-right: 0;
        border-bottom: 1px solid var(--accommodation-border);
    }

    .accommodation-allocation-summary > div:last-child {
        border-bottom: 0;
    }

    .accommodation-booking-counts {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================================
   PENGINAPAN — HEADER, SENARAI BILIK & DASHBOARD UTAMA
   Gaya dipusatkan di sini supaya mudah diselenggara.
   ========================================================== */
.accommodation-page .accommodation-page-header {
    background:
        radial-gradient(circle at 10% 0%, rgba(242, 193, 78, 0.22), transparent 30%),
        linear-gradient(90deg, var(--accommodation-maroon-dark) 0%, var(--accommodation-maroon) 62%, #951B1E 100%);
    border-bottom-color: rgba(242, 193, 78, 0.5);
    box-shadow: 0 12px 30px rgba(90, 11, 13, 0.22);
}

.accommodation-page .accommodation-page-header .accommodation-page-title,
.accommodation-page .accommodation-page-header .accommodation-page-subtitle {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.accommodation-page .accommodation-page-header .accommodation-page-subtitle {
    opacity: 0.82;
}

.accommodation-header-menu-button {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
}

.accommodation-header-menu-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.accommodation-floor-panel {
    overflow: visible;
}

.accommodation-room-section-header {
    padding: 20px 22px;
}

.accommodation-floor-metrics {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accommodation-floor-metrics > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--accommodation-border);
    border-radius: 999px;
    color: var(--accommodation-muted);
    background: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
}

.accommodation-floor-metrics strong {
    color: var(--accommodation-text);
    font-size: 11px;
    font-weight: 900;
}

.accommodation-room-table {
    padding: 16px 20px 20px;
}

.accommodation-room-table-head,
.accommodation-room-record-summary {
    display: grid;
    grid-template-columns: minmax(230px, 1.55fr) minmax(145px, 1fr) 100px 80px minmax(135px, 0.9fr) 86px;
    align-items: center;
    gap: 14px;
}

.accommodation-room-table-head {
    padding: 0 16px 9px;
    color: #64748B;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.accommodation-room-record {
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--accommodation-border);
    border-radius: 15px;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accommodation-room-record:hover,
.accommodation-room-record[open] {
    border-color: #E3C46D;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.accommodation-room-record-summary {
    min-height: 72px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
}

.accommodation-room-record-summary::-webkit-details-marker {
    display: none;
}

.accommodation-room-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.accommodation-room-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--accommodation-maroon);
    background: var(--accommodation-gold-soft);
}

.accommodation-room-identity > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.accommodation-room-identity strong {
    overflow: hidden;
    color: var(--accommodation-text);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accommodation-room-identity small {
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.accommodation-room-identity em {
    overflow: hidden;
    color: var(--accommodation-danger);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accommodation-room-data {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.accommodation-room-data strong {
    color: var(--accommodation-text);
    font-weight: 900;
}

.accommodation-room-status-cell {
    display: flex;
    align-items: center;
}

.accommodation-room-edit-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--accommodation-maroon);
    font-size: 10px;
    font-weight: 900;
}

.accommodation-room-edit-trigger .fa-chevron-down {
    font-size: 8px;
    transition: transform 0.2s ease;
}

.accommodation-room-record[open] .accommodation-room-edit-trigger .fa-chevron-down {
    transform: rotate(180deg);
}

.accommodation-room-edit-form {
    padding: 20px;
    border-top: 1px solid var(--accommodation-border);
    background: #F8FAFC;
}

.accommodation-room-edit-heading {
    margin-bottom: 16px;
}

.accommodation-room-edit-heading strong {
    color: var(--accommodation-text);
    font-size: 13px;
    font-weight: 900;
}

.accommodation-room-edit-heading p {
    margin-top: 2px;
    color: var(--accommodation-muted);
    font-size: 10px;
}

.accommodation-room-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--accommodation-border);
}

.accommodation-room-record-readonly .accommodation-room-record-summary {
    cursor: default;
}

/* Dashboard utama — pemantauan penginapan */
.dashboard-accommodation-panel {
    overflow: hidden;
    border: 1px solid var(--accommodation-border);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: var(--accommodation-shadow);
}

.dashboard-accommodation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #E7D5B5;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9EA 100%);
}

.dashboard-accommodation-kicker {
    display: block;
    color: var(--accommodation-maroon);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dashboard-accommodation-header h2 {
    margin-top: 3px;
    color: var(--accommodation-text);
    font-size: 18px;
    font-weight: 900;
}

.dashboard-accommodation-header h2 i {
    margin-right: 7px;
    color: var(--accommodation-maroon);
}

.dashboard-accommodation-header p {
    margin-top: 3px;
    color: var(--accommodation-muted);
    font-size: 11px;
}

.dashboard-accommodation-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #FFFFFF;
    background: var(--accommodation-maroon);
    font-size: 11px;
    font-weight: 900;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dashboard-accommodation-link:hover {
    color: #FFFFFF;
    background: var(--accommodation-maroon-dark);
    transform: translateY(-1px);
}

.dashboard-accommodation-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--accommodation-border);
}

.dashboard-accommodation-metrics > div {
    min-width: 0;
    padding: 17px 20px;
    border-right: 1px solid var(--accommodation-border);
}

.dashboard-accommodation-metrics > div:last-child {
    border-right: 0;
}

.dashboard-accommodation-metrics span,
.dashboard-accommodation-metrics small {
    display: block;
}

.dashboard-accommodation-metrics span {
    color: #64748B;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-accommodation-metrics strong {
    display: block;
    margin-top: 5px;
    color: var(--accommodation-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}

.dashboard-accommodation-metrics small {
    margin-top: 5px;
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 600;
}

.dashboard-accommodation-floors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 20px;
}

.dashboard-accommodation-floor {
    padding: 15px 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 14px;
    background: #FBFCFE;
}

.dashboard-accommodation-floor-head,
.dashboard-accommodation-floor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-accommodation-floor-head > div {
    display: flex;
    flex-direction: column;
}

.dashboard-accommodation-floor-head > div:last-child {
    align-items: flex-end;
}

.dashboard-accommodation-floor-head strong {
    color: var(--accommodation-text);
    font-size: 12px;
    font-weight: 900;
}

.dashboard-accommodation-floor-head span,
.dashboard-accommodation-floor-foot span {
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 700;
}

.dashboard-accommodation-progress {
    overflow: hidden;
    height: 7px;
    margin: 11px 0 8px;
    border-radius: 999px;
    background: #E9EEF5;
}

.dashboard-accommodation-progress > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accommodation-gold), var(--accommodation-maroon));
}

.dashboard-accommodation-empty {
    grid-column: 1 / -1;
    padding: 18px;
    color: var(--accommodation-muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1100px) {
    .accommodation-room-table-head {
        display: none;
    }

    .accommodation-room-record-summary {
        grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(95px, 0.75fr)) minmax(135px, 0.9fr) 75px;
    }

    .dashboard-accommodation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-accommodation-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .dashboard-accommodation-metrics > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--accommodation-border);
    }
}

@media (max-width: 767px) {
    .accommodation-room-section-header,
    .dashboard-accommodation-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .accommodation-floor-metrics {
        width: 100%;
        flex-wrap: wrap;
    }

    .accommodation-room-table {
        padding: 12px;
    }

    .accommodation-room-record-summary {
        grid-template-columns: 1fr 1fr;
        gap: 11px 14px;
        padding: 14px;
    }

    .accommodation-room-identity {
        grid-column: 1 / -1;
    }

    .accommodation-room-data::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #94A3B8;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .accommodation-room-status-cell {
        align-items: flex-end;
    }

    .accommodation-room-edit-trigger {
        justify-content: flex-end;
    }

    .accommodation-room-edit-form {
        padding: 16px;
    }

    .accommodation-room-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-accommodation-header,
    .dashboard-accommodation-link {
        width: 100%;
    }

    .dashboard-accommodation-link {
        justify-content: center;
    }

    .dashboard-accommodation-floors {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

@media (max-width: 520px) {
    .dashboard-accommodation-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-accommodation-metrics > div {
        border-right: 0;
        border-bottom: 1px solid var(--accommodation-border);
    }

    .dashboard-accommodation-metrics > div:last-child {
        border-bottom: 0;
    }
}


/* ==========================================================
   ADMIN PAGE HEADER — CENTRALIZED THEME
   Tukar warna/header semua halaman admin di sini sahaja.
   ========================================================== */
:root {
    --admin-page-header-bg-start: #6B2315;
    --admin-page-header-bg-middle: #7A1114;
    --admin-page-header-bg-end: #8F1016;
    --admin-page-header-title: #FFFFFF;
    --admin-page-header-subtitle: rgba(255, 255, 255, 0.86);
    --admin-page-header-menu-bg: rgba(255, 255, 255, 0.12);
    --admin-page-header-menu-hover: rgba(255, 255, 255, 0.20);
}

html body header.admin-page-header {
    background:
        radial-gradient(circle at 10% 0%, rgba(242, 193, 78, 0.20), transparent 30%),
        linear-gradient(90deg,
            var(--admin-page-header-bg-start) 0%,
            var(--admin-page-header-bg-middle) 62%,
            var(--admin-page-header-bg-end) 100%);
    color: var(--admin-page-header-title);
    border-bottom-color: rgba(242, 193, 78, 0.48);
    box-shadow: 0 12px 30px rgba(90, 11, 13, 0.22);
}

html body header.admin-page-header > div:first-child,
html body header.admin-page-header > div:first-child h1,
html body header.admin-page-header > div:first-child h2,
html body header.admin-page-header > div:first-child h3,
html body header.admin-page-header > div:first-child p,
html body header.admin-page-header > div:first-child span,
html body header.admin-page-header > div:first-child i,
html body header.admin-page-header .admin-page-title {
    color: var(--admin-page-header-title);
    -webkit-text-fill-color: var(--admin-page-header-title);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

html body header.admin-page-header .admin-page-subtitle {
    color: var(--admin-page-header-subtitle);
    -webkit-text-fill-color: var(--admin-page-header-subtitle);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

html body header.admin-page-header .admin-page-menu-button,
html body header.admin-page-header .admin-page-menu-button i {
    color: var(--admin-page-header-title);
    -webkit-text-fill-color: var(--admin-page-header-title);
}

html body header.admin-page-header .admin-page-menu-button {
    background: var(--admin-page-header-menu-bg);
}

html body header.admin-page-header .admin-page-menu-button:hover {
    background: var(--admin-page-header-menu-hover);
}

/* ==========================================================
   PENGINAPAN — BLOK, KATEGORI PENGGUNA & JENIS RUANG
   Nama blok sementara boleh ditukar dari sistem tanpa ubah kod.
   ========================================================== */
.accommodation-category-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.accommodation-category-card {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 15px;
    background: #FFFFFF;
    box-shadow: var(--accommodation-shadow);
}

.accommodation-category-card > span,
.accommodation-category-card > strong,
.accommodation-category-card > small {
    display: block;
}

.accommodation-category-card > span {
    color: var(--accommodation-maroon);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.accommodation-category-card > strong {
    margin-top: 5px;
    color: var(--accommodation-text);
    font-size: 17px;
    font-weight: 900;
}

.accommodation-category-card > small {
    margin-top: 4px;
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 600;
}

.accommodation-category-card.is-pending {
    border-style: dashed;
    background: #F8FAFC;
}

.accommodation-category-card.is-pending > strong {
    color: #64748B;
    font-size: 14px;
}

.accommodation-guidance-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #E7D5B5;
    border-radius: 16px;
    color: var(--accommodation-text);
    background: #FFF9EA;
}

.accommodation-guidance-card > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--accommodation-maroon);
    font-size: 19px;
}

.accommodation-guidance-card strong {
    display: block;
    font-size: 13px;
    font-weight: 900;
}

.accommodation-guidance-card p {
    margin-top: 4px;
    color: var(--accommodation-muted);
    font-size: 11px;
    line-height: 1.55;
}

.accommodation-checkbox-card {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--accommodation-border);
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
}

.accommodation-checkbox-card input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--accommodation-maroon);
}

.accommodation-checkbox-card span,
.accommodation-checkbox-card strong,
.accommodation-checkbox-card small {
    display: block;
}

.accommodation-checkbox-card strong {
    color: var(--accommodation-text);
    font-size: 11px;
    font-weight: 900;
}

.accommodation-checkbox-card small,
.form-hint {
    margin-top: 2px;
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 600;
}

.form-hint {
    display: block;
}

.accommodation-block-list {
    display: grid;
    gap: 14px;
}

.accommodation-block-card {
    overflow: hidden;
    border: 1px solid var(--accommodation-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: var(--accommodation-shadow);
}

.accommodation-block-card-summary {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(300px, 1fr) 80px;
    align-items: center;
    gap: 18px;
    padding: 17px 18px;
    cursor: pointer;
    list-style: none;
}

.accommodation-block-card-summary::-webkit-details-marker {
    display: none;
}

.accommodation-block-card[open] .accommodation-room-edit-trigger .fa-chevron-down {
    transform: rotate(180deg);
}

.accommodation-block-identity {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.accommodation-block-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--accommodation-maroon);
    background: var(--accommodation-gold-soft);
}

.accommodation-block-identity > div {
    min-width: 0;
}

.accommodation-block-identity strong {
    color: var(--accommodation-text);
    font-size: 13px;
    font-weight: 900;
}

.accommodation-block-identity small {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: var(--accommodation-muted);
    font-size: 9px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accommodation-temporary-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #854D0E;
    background: #FEF3C7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.accommodation-block-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.accommodation-block-metrics span {
    padding: 9px 10px;
    border: 1px solid var(--accommodation-border);
    border-radius: 11px;
    color: var(--accommodation-muted);
    background: #F8FAFC;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.accommodation-block-metrics strong {
    color: var(--accommodation-text);
    font-size: 12px;
    font-weight: 900;
}

.accommodation-block-card-body {
    padding: 18px;
    border-top: 1px solid var(--accommodation-border);
    background: #F8FAFC;
}

.accommodation-block-category-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
}

.accommodation-block-category-row > span,
.accommodation-block-category-row em {
    color: var(--accommodation-muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.accommodation-block-category-row strong {
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--accommodation-maroon);
    background: var(--accommodation-gold-soft);
    font-size: 8px;
    font-weight: 900;
}

.accommodation-block-room-panel {
    overflow: hidden;
}

.accommodation-block-floor-list {
    display: grid;
    gap: 0;
}

.accommodation-floor-subsection + .accommodation-floor-subsection {
    border-top: 1px solid var(--accommodation-border);
}

.accommodation-floor-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 20px;
    background: #FFFDF7;
}

.accommodation-floor-subsection-head > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.accommodation-floor-subsection-head strong {
    color: var(--accommodation-text);
    font-size: 12px;
    font-weight: 900;
}

.accommodation-floor-subsection-head span {
    color: var(--accommodation-muted);
    font-size: 9px;
    font-weight: 700;
}

.accommodation-room-group-title > div {
    display: flex;
    flex-direction: column;
}

.accommodation-room-group-title small,
.accommodation-room-allocation small:not(:last-child) {
    color: var(--accommodation-muted);
    font-size: 8px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .accommodation-category-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accommodation-block-card-summary {
        grid-template-columns: minmax(240px, 1.4fr) minmax(250px, 1fr) 70px;
    }
}

@media (max-width: 767px) {
    .accommodation-category-overview {
        grid-template-columns: 1fr;
    }

    .accommodation-block-card-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .accommodation-block-metrics {
        width: 100%;
    }

    .accommodation-block-card-summary .accommodation-room-edit-trigger {
        justify-content: flex-start;
    }

    .accommodation-floor-subsection-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.accommodation-status-blok-tidak-aktif {
    color: var(--accommodation-danger);
    background: #FEE2E2;
}


/* ==========================================================
   Butang utama kursus — teks putih melalui class komponen.
   ========================================================== */
.course-maroon-button,
.course-maroon-button :is(i, span, strong, b),
.action-tile-primary,
.action-tile-primary :is(i, span, strong, b) {
    color: var(--myt-course-maroon-button-text);
    -webkit-text-fill-color: var(--myt-course-maroon-button-text);
}


/* ==========================================================
   Dashboard — Tindakan Segera 14 Hari
   Tempahan makanan dan permohonan NPP ke kewangan.
   ========================================================== */
:root {
    --myt-urgent-border: #E7D5B5;
    --myt-urgent-soft: #FFF9EA;
    --myt-urgent-maroon: #7A1114;
    --myt-urgent-text: #1F2937;
    --myt-urgent-muted: #64748B;
    --myt-urgent-success: #047857;
    --myt-urgent-success-soft: #ECFDF5;
}

.dashboard-urgent-list {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.dashboard-urgent-item {
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    background: #FFFFFF;
    padding: 1rem;
}

.dashboard-urgent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #F1F5F9;
}

.dashboard-urgent-code {
    display: inline-flex;
    border-radius: 999px;
    background: var(--myt-urgent-soft);
    color: var(--myt-urgent-maroon);
    padding: 0.25rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 900;
}

.dashboard-urgent-head h4 {
    margin-top: 0.4rem;
    color: var(--myt-urgent-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
}

.dashboard-urgent-head p {
    margin-top: 0.25rem;
    color: var(--myt-urgent-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-urgent-days {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    padding: 0.35rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.dashboard-urgent-tasks {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.dashboard-urgent-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--myt-urgent-border);
    border-radius: 0.85rem;
    background: var(--myt-urgent-soft);
    padding: 0.7rem 0.8rem;
}

.dashboard-urgent-task.is-done {
    border-color: #A7F3D0;
    background: var(--myt-urgent-success-soft);
}

.dashboard-urgent-task > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.dashboard-urgent-task > div:first-child > i {
    color: var(--myt-urgent-maroon);
}

.dashboard-urgent-task.is-done > div:first-child > i {
    color: var(--myt-urgent-success);
}

.dashboard-urgent-task strong,
.dashboard-urgent-task small {
    display: block;
}

.dashboard-urgent-task strong {
    color: var(--myt-urgent-text);
    font-size: 0.75rem;
    font-weight: 900;
}

.dashboard-urgent-task small {
    margin-top: 0.1rem;
    color: var(--myt-urgent-muted);
    font-size: 0.66rem;
    font-weight: 600;
}

.dashboard-urgent-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dashboard-urgent-button {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    transition: 150ms ease;
}

.dashboard-urgent-button.is-primary {
    border: 1px solid var(--myt-urgent-maroon);
    background: var(--myt-urgent-maroon);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.dashboard-urgent-button.is-secondary {
    border: 1px solid var(--myt-urgent-border);
    background: #FFFFFF;
    color: var(--myt-urgent-maroon);
    -webkit-text-fill-color: var(--myt-urgent-maroon);
}

.dashboard-urgent-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(122, 17, 20, 0.12);
}

.dashboard-urgent-empty {
    padding: 1.25rem;
    color: var(--myt-urgent-muted);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 640px) {
    .dashboard-urgent-head,
    .dashboard-urgent-task {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-urgent-actions {
        justify-content: flex-start;
    }
}


/* ==========================================================
   Tempahan Makanan — carian dan filter
   ========================================================== */
.food-filter-search {
    position: relative;
    min-width: 0;
}

.food-filter-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 1rem;
    color: #64748B;
    transform: translateY(-50%);
    pointer-events: none;
}

.food-filter-search-input {
    padding-left: 3rem;
}

button.food-primary-button.food-filter-submit,
button.food-primary-button.food-filter-submit :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}


/* ==========================================================
   Modal Role & Akses Admin — viewport dan scroll centralized
   ========================================================== */
:root {
    --myt-admin-role-modal-width: 64rem;
    --myt-admin-role-modal-height: 92dvh;
    --myt-admin-role-modal-radius: 1.5rem;
    --myt-admin-role-scrollbar: #CBD5E1;
    --myt-admin-role-header-bg: #7A1114;
    --myt-admin-role-header-text: #FFFFFF;
    --myt-admin-role-primary-bg: #7A1114;
    --myt-admin-role-primary-text: #FFFFFF;
    --myt-admin-role-secondary-text: #334155;
}

.admin-role-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
    overscroll-behavior: contain;
}

.admin-role-sheet {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--myt-admin-role-modal-width));
    height: min(var(--myt-admin-role-modal-height), 56rem);
    max-height: calc(100dvh - 2rem);
    min-height: 0;
    overflow: hidden;
    border-radius: var(--myt-admin-role-modal-radius);
}

.admin-role-header,
.admin-role-tabs,
.admin-role-footer {
    flex: 0 0 auto;
}


/* Warna header dan tindakan Role & Akses Admin dikawal di sini sahaja. */
.admin-role-header {
    background: var(--myt-admin-role-header-bg);
    color: var(--myt-admin-role-header-text);
}

html body .admin-role-sheet .admin-role-header,
html body .admin-role-sheet .admin-role-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, i, div) {
    color: var(--myt-admin-role-header-text);
    -webkit-text-fill-color: var(--myt-admin-role-header-text);
}

.admin-role-close {
    color: var(--myt-admin-role-header-text);
    -webkit-text-fill-color: var(--myt-admin-role-header-text);
}

.admin-role-primary-button,
.admin-role-maroon-badge,
.admin-role-maroon-icon {
    background: var(--myt-admin-role-primary-bg);
    color: var(--myt-admin-role-primary-text);
    -webkit-text-fill-color: var(--myt-admin-role-primary-text);
}

html body .admin-role-sheet .admin-role-primary-button,
html body .admin-role-sheet .admin-role-primary-button :is(i, span, strong, b),
html body .admin-role-maroon-badge,
html body .admin-role-maroon-badge :is(i, span, strong, b),
html body .admin-role-maroon-icon,
html body .admin-role-maroon-icon :is(i, span, strong, b) {
    color: var(--myt-admin-role-primary-text);
    -webkit-text-fill-color: var(--myt-admin-role-primary-text);
}

html body .admin-role-sheet .admin-role-secondary-button {
    color: var(--myt-admin-role-secondary-text);
    -webkit-text-fill-color: var(--myt-admin-role-secondary-text);
}

.admin-role-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.admin-role-scroll::-webkit-scrollbar {
    width: 10px;
}

.admin-role-scroll::-webkit-scrollbar-track {
    background: #F1F5F9;
}

.admin-role-scroll::-webkit-scrollbar-thumb {
    background: var(--myt-admin-role-scrollbar);
    border: 2px solid #F1F5F9;
    border-radius: 999px;
}

.admin-role-footer {
    position: relative;
    z-index: 2;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

body.admin-role-modal-open {
    overflow: hidden;
}

@media (max-width: 639px) {
    .admin-role-overlay {
        align-items: stretch;
        padding: 0;
    }

    .admin-role-sheet {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .admin-role-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Pengurusan Kursus: hierarki menu sidebar */
#mainSidebar .sidebar-course-group {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#mainSidebar .sidebar-course-submenu,
#mainSidebar .sidebar-management-submenu {
    position: relative;
    display: grid;
    gap: 0.35rem;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
}

#mainSidebar .sidebar-course-submenu::before,
#mainSidebar .sidebar-management-submenu::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(242, 193, 78, 0.35);
}

#mainSidebar .sidebar-course-submenu-link,
#mainSidebar .sidebar-management-submenu-link {
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    font-size: 0.875rem;
}

#mainSidebar .sidebar-course-submenu-link > span:first-child,
#mainSidebar .sidebar-management-submenu-link > span:first-child {
    width: 1.1rem;
    text-align: center;
    font-size: 0.9rem;
}


/* ==========================================================
   Tambah Kursus — halaman borang penuh
   ========================================================== */
#admin-course-create-page {
    --course-create-maroon: #7A1114;
    --course-create-maroon-hover: #6B0D10;
    --course-create-gold: #F2C14E;
    --course-create-gold-soft: #FFF4D6;
    --course-create-gold-border: #E7D5B5;
    --course-create-ink: #171313;
    --course-create-muted: #64748B;
    --course-create-border: #E2E8F0;
    --course-create-surface: #FFFFFF;
    --course-create-page-bg: #F8FAFC;
}

#admin-course-create-page .course-create-container {
    width: min(100%, 82rem);
    margin: 0 auto;
    padding: 1.25rem;
}

#admin-course-create-page .course-create-back-button,
#admin-course-create-page .course-create-submit-button,
#admin-course-create-page .course-create-cancel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    border-radius: 0.8rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 800;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#admin-course-create-page .course-create-back-button {
    border: 1px solid var(--course-create-gold-border);
    background: var(--course-create-gold-soft);
    color: var(--course-create-maroon);
    -webkit-text-fill-color: var(--course-create-maroon);
}

#admin-course-create-page .course-create-back-button:hover {
    background: #FFE7A3;
    transform: translateY(-1px);
}

#admin-course-create-page .course-create-intro {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--course-create-gold-border);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--course-create-gold-soft), #FFFFFF);
    padding: 1rem 1.15rem;
}

#admin-course-create-page .course-create-intro-icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 0.9rem;
    background: var(--course-create-maroon);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

#admin-course-create-page .course-create-intro h2 {
    margin: 0;
    color: var(--course-create-ink);
    font-size: 1rem;
    font-weight: 900;
}

#admin-course-create-page .course-create-intro p {
    margin: 0.2rem 0 0;
    color: var(--course-create-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

#admin-course-create-page .course-create-form {
    overflow: visible;
    border: 1px solid var(--course-create-border);
    border-radius: 1.35rem;
    background: var(--course-create-surface);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

#admin-course-create-page .course-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.85fr);
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--course-create-page-bg);
    border-radius: 1.35rem 1.35rem 0 0;
}

#admin-course-create-page .course-create-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.25rem;
}

#admin-course-create-page .course-form-section {
    border: 1px solid var(--course-create-border);
    border-radius: 1.1rem;
    background: var(--course-create-surface);
    padding: 1.15rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

#admin-course-create-page .course-form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 0.9rem;
}

#admin-course-create-page .course-form-section-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.75rem;
    background: var(--course-create-gold-soft);
    color: var(--course-create-maroon);
    -webkit-text-fill-color: var(--course-create-maroon);
}

#admin-course-create-page .course-form-section-heading h3 {
    margin: 0;
    color: var(--course-create-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

#admin-course-create-page .course-form-section-heading p {
    margin: 0.15rem 0 0;
    color: #94A3B8;
    font-size: 0.72rem;
    line-height: 1.4;
}

#admin-course-create-page .course-form-fields {
    display: grid;
    gap: 1rem;
}

#admin-course-create-page .course-form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: #475569;
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#admin-course-create-page .course-form-help {
    margin-top: 0.35rem;
    color: #94A3B8;
    font-size: 0.7rem;
    line-height: 1.45;
}

#admin-course-create-page .course-date-mode-grid,
#admin-course-create-page .course-time-grid,
#admin-course-create-page .course-pax-grid {
    display: grid;
    gap: 0.75rem;
}

#admin-course-create-page .course-date-mode-grid,
#admin-course-create-page .course-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

#admin-course-create-page .course-pax-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#admin-course-create-page .course-date-mode-option {
    display: block;
    cursor: pointer;
    border: 1px solid var(--course-create-border);
    border-radius: 0.9rem;
    background: #F8FAFC;
    padding: 0.85rem;
    text-align: center;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#admin-course-create-page .course-date-mode-option:hover {
    border-color: var(--course-create-gold-border);
    transform: translateY(-1px);
}

#admin-course-create-page .course-date-mode-option.is-active {
    border-color: var(--course-create-maroon);
    background: var(--course-create-maroon);
    box-shadow: 0 8px 18px rgba(122, 17, 20, 0.16);
}

#admin-course-create-page .course-date-mode-title,
#admin-course-create-page .course-date-mode-description {
    display: block;
}

#admin-course-create-page .course-date-mode-title {
    color: #0F172A;
    font-size: 0.82rem;
    font-weight: 900;
}

#admin-course-create-page .course-date-mode-description {
    margin-top: 0.25rem;
    color: var(--course-create-muted);
    font-size: 0.66rem;
}

#admin-course-create-page .course-date-mode-option.is-active .course-date-mode-title,
#admin-course-create-page .course-date-mode-option.is-active .course-date-mode-description {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

#admin-course-create-page .course-selected-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

#admin-course-create-page .course-selected-date-chips.hidden {
    display: none;
}

#admin-course-create-page .course-selected-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--course-create-gold-border);
    border-radius: 999px;
    background: var(--course-create-gold-soft);
    padding: 0.4rem 0.7rem;
    color: var(--course-create-maroon);
    font-size: 0.72rem;
    font-weight: 800;
}

#admin-course-create-page .course-room-list {
    display: grid;
    max-height: 18rem;
    gap: 0.55rem;
    overflow-y: auto;
    border: 1px solid var(--course-create-border);
    border-radius: 1rem;
    background: #F8FAFC;
    padding: 0.65rem;
}

#admin-course-create-page .course-room-list.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

#admin-course-create-page .course-room-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--course-create-border);
    border-radius: 0.85rem;
    background: #FFFFFF;
    padding: 0.75rem;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#admin-course-create-page .course-room-option:hover {
    border-color: var(--course-create-gold-border);
    background: var(--course-create-gold-soft);
}

#admin-course-create-page .course-room-option:has(input:checked) {
    border-color: var(--course-create-gold);
    background: var(--course-create-gold-soft);
    box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.16);
}

#admin-course-create-page .course-room-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--course-create-maroon);
}

#admin-course-create-page .course-room-option-text {
    min-width: 0;
    flex: 1 1 auto;
}

#admin-course-create-page .course-room-option-name,
#admin-course-create-page .course-room-option-meta {
    display: block;
}

#admin-course-create-page .course-room-option-name {
    overflow: hidden;
    color: #1E293B;
    font-size: 0.8rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#admin-course-create-page .course-room-option-meta {
    margin-top: 0.15rem;
    color: var(--course-create-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

#admin-course-create-page .course-room-empty {
    border: 1px dashed #CBD5E1;
    border-radius: 0.85rem;
    background: #FFFFFF;
    padding: 1rem;
    color: var(--course-create-muted);
    font-size: 0.78rem;
    text-align: center;
}

#admin-course-create-page .course-pax-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    border-radius: 0.95rem;
    background: var(--course-create-maroon);
    padding: 0.9rem 1rem;
    color: #FFFFFF;
}

#admin-course-create-page .course-pax-total span {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#admin-course-create-page .course-pax-total strong {
    color: var(--course-create-gold);
    -webkit-text-fill-color: var(--course-create-gold);
    font-size: 1.8rem;
    font-weight: 950;
    line-height: 1;
}

#admin-course-create-page .course-create-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid var(--course-create-gold-border);
    border-radius: 1rem;
    background: var(--course-create-gold-soft);
    padding: 0.9rem 1rem;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.55;
}

#admin-course-create-page .course-create-note i {
    margin-top: 0.15rem;
    color: var(--course-create-maroon);
}

#admin-course-create-page .course-create-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--course-create-border);
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem 1.25rem;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.06);
    border-radius: 0 0 1.35rem 1.35rem;
    backdrop-filter: blur(12px);
}

#admin-course-create-page .course-create-cancel-button {
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #475569;
    -webkit-text-fill-color: #475569;
}

#admin-course-create-page .course-create-cancel-button:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

#admin-course-create-page .course-create-submit-button {
    min-width: 12rem;
    border: 1px solid var(--course-create-maroon);
    background: var(--course-create-maroon);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(122, 17, 20, 0.2);
}

#admin-course-create-page .course-create-submit-button :is(i, span) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

#admin-course-create-page .course-create-submit-button:hover {
    background: var(--course-create-maroon-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(122, 17, 20, 0.26);
}

@media (max-width: 1023px) {
    #admin-course-create-page .course-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    #admin-course-create-page .course-create-container {
        padding: 0.75rem;
    }

    #admin-course-create-page .course-create-intro {
        align-items: flex-start;
    }

    #admin-course-create-page .course-create-grid,
    #admin-course-create-page .course-form-section {
        padding: 0.9rem;
    }

    #admin-course-create-page .course-date-mode-grid,
    #admin-course-create-page .course-time-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #admin-course-create-page .course-pax-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    #admin-course-create-page .course-pax-grid .form-input {
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }

    #admin-course-create-page .course-create-actions {
        padding: 0.8rem;
    }

    #admin-course-create-page .course-create-cancel-button,
    #admin-course-create-page .course-create-submit-button {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Status tempahan makanan pada tindakan detail kursus. */
html body .action-tile-success {
    border-color: #15803D;
    background: #15803D;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.2);
}

html body .action-tile-success :is(i, span) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

html body .action-tile-success:hover {
    border-color: #166534;
    background: #166534;
    color: #FFFFFF;
}

/* Tindakan akhir apabila tempahan makanan dibuka daripada detail kursus. */
html body .food-complete-close-button {
    border: 1px solid #15803D;
    background: #15803D;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.18);
}

html body .food-complete-close-button :is(i, span) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

html body .food-complete-close-button:hover {
    border-color: #166534;
    background: #166534;
    transform: translateY(-1px);
}


/* Muat turun Menu dan NPP selepas tempahan makanan selesai. */
.course-food-action-group {
    display: grid;
    width: 100%;
    gap: 0.55rem;
}

.course-food-action-group > .action-tile {
    width: 100%;
}

.course-food-document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.course-food-document-actions.hidden {
    display: none;
}

.course-food-document-button {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0.8rem 0.7rem;
    background: #FFFFFF;
    color: #171313;
    font-size: 0.875rem;
    font-weight: 900;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.course-food-document-button i {
    color: #F2C14E;
}

.course-food-document-button:hover {
    border-color: #F2C14E;
    background: #FFF9EA;
    transform: translateY(-1px);
}

/* ==========================================
   Login Admin: paparan modal dan kawalan kata laluan
   ========================================== */
#adminModal.admin-login-overlay {
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(5px);
}

#adminModal .admin-login-modal {
    width: min(100%, 430px);
    max-height: calc(100vh - 2rem);
    margin: 0 auto;
    padding: 1.75rem;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #E7C66A;
    border-radius: 1.5rem;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
    color: #111827;
    -webkit-text-fill-color: #111827;
}

#adminModal .admin-login-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#adminModal .admin-login-heading {
    min-width: 0;
}

#adminModal .admin-login-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.35rem;
    color: #9B1C20;
    -webkit-text-fill-color: #9B1C20;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#adminModal .admin-login-heading h3 {
    margin: 0;
    color: #111827;
    -webkit-text-fill-color: #111827;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
}

#adminModal .admin-login-heading p {
    margin: 0.45rem 0 0;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    font-size: 0.9rem;
    line-height: 1.5;
}

#adminModal .admin-login-close {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #F8FAFC;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#adminModal .admin-login-close:hover,
#adminModal .admin-login-close:focus-visible {
    background: #FFF1F2;
    border-color: #F1B9BB;
    color: #7A1114;
    -webkit-text-fill-color: #7A1114;
    outline: none;
}

#adminModal .admin-login-close:active {
    transform: scale(0.95);
}

#adminModal .admin-login-form {
    display: grid;
    gap: 1rem;
}

#adminModal .admin-login-field {
    display: grid;
    gap: 0.45rem;
}

#adminModal .admin-login-field label,
#adminModal .admin-login-remember,
#adminModal .admin-login-remember span {
    color: #334155;
    -webkit-text-fill-color: #334155;
}

#adminModal .admin-login-field label {
    font-size: 0.82rem;
    font-weight: 800;
}

#adminModal .admin-login-modal input.admin-login-input:not([type="checkbox"]) {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--jais-border);
    border-radius: 0.9rem;
    background: #ffffff;
    color: var(--jais-text);
    -webkit-text-fill-color: var(--jais-text);
    font-size: 0.95rem;
    line-height: 1.35;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#adminModal .admin-login-modal input.admin-login-input:not([type="checkbox"])::placeholder {
    color: #94A3B8;
    -webkit-text-fill-color: #94A3B8;
    opacity: 1;
}

#adminModal .admin-login-modal input.admin-login-input:not([type="checkbox"]):hover {
    border-color: #C5A66A;
}

#adminModal .admin-login-modal input.admin-login-input:not([type="checkbox"]):focus {
    border-color: var(--jais-deep);
    box-shadow: 0 0 0 3px rgba(122, 17, 20, 0.16);
}

#adminModal .admin-login-remember {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.15rem 0;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

#adminModal .admin-login-remember input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin: 0;
    accent-color: #7A1114;
    cursor: pointer;
}

#adminModal .admin-login-modal button.admin-login-submit[type="submit"] {
    width: 100%;
    min-height: 3.45rem;
    margin-top: 0.15rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--jais-deep);
    border-radius: 0.9rem;
    background: var(--jais-deep);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(122, 17, 20, 0.2);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#adminModal .admin-login-modal button.admin-login-submit[type="submit"]:hover,
#adminModal .admin-login-modal button.admin-login-submit[type="submit"]:focus-visible {
    background: var(--jais-deep-2);
    border-color: var(--jais-deep-2);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 13px 28px rgba(122, 17, 20, 0.27);
    outline: none;
    transform: translateY(-1px);
}

#adminModal .admin-login-modal button.admin-login-submit[type="submit"]:active {
    transform: translateY(0);
}

.mytadrib-password-wrap {
    position: relative;
    width: 100%;
    display: block;
}

.mytadrib-password-wrap > input {
    width: 100%;
    padding-right: 3.25rem;
}

.mytadrib-password-eye-btn {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.16s ease, color 0.16s ease;
}

.mytadrib-password-eye-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.mytadrib-password-eye-btn:hover,
.mytadrib-password-eye-btn:focus-visible {
    background: #F1F5F9;
    color: #7A1114;
    -webkit-text-fill-color: #7A1114;
    outline: none;
}

.mytadrib-password-wrap.mytadrib-password-dark .mytadrib-password-eye-btn {
    color: rgba(255, 255, 255, 0.82);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82);
}

.mytadrib-password-wrap.mytadrib-password-dark .mytadrib-password-eye-btn:hover,
.mytadrib-password-wrap.mytadrib-password-dark .mytadrib-password-eye-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

@media (max-width: 480px) {
    #adminModal .admin-login-modal {
        padding: 1.35rem;
        border-radius: 1.25rem;
    }

    #adminModal .admin-login-heading h3 {
        font-size: 1.35rem;
    }

    #adminModal .admin-login-heading p {
        font-size: 0.84rem;
    }
}

/* Senarai Kursus — pastikan teks dan ikon butang Filter jelas pada latar maroon. */
#admin-course-page .course-filter-form .course-filter-button,
#admin-course-page .course-filter-form .course-filter-button span,
#admin-course-page .course-filter-form .course-filter-button svg {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#admin-course-page .course-filter-form .course-filter-button svg {
    stroke: currentColor;
}

/* ==========================================================
   Detail Kursus — layout berstruktur untuk Online/Bersemuka
   Semua warna dan komponen paparan detail dikawal di sini.
   ========================================================== */
:root {
    --myt-course-detail-maroon: #7A1114;
    --myt-course-detail-maroon-dark: #5A0B0D;
    --myt-course-detail-gold: #F2C14E;
    --myt-course-detail-cream: #FFF9EA;
    --myt-course-detail-border: #E7D5B5;
    --myt-course-detail-panel: #F8FAFC;
    --myt-course-detail-text: #171313;
    --myt-course-detail-muted: #64748B;
}

.course-detail-modal {
    border: 1px solid rgba(231, 213, 181, 0.9);
}

.course-detail-header {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--myt-course-detail-maroon);
    color: #FFFFFF;
}

.course-detail-header-copy {
    min-width: 0;
}

.course-detail-header,
.course-detail-header :is(p, h2, button, span) {
    -webkit-text-fill-color: currentColor;
}

.course-detail-code {
    margin: 0 0 0.2rem;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.course-detail-title {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.course-detail-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 700;
}

.course-detail-close {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.course-detail-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(4deg);
}

.course-detail-scroll {
    background: var(--myt-course-detail-cream);
}

.course-detail-surface {
    border: 1px solid var(--myt-course-detail-border);
    border-radius: 1.25rem;
    background: #FFFFFF;
    box-shadow: 0 5px 14px rgba(122, 17, 20, 0.08);
    padding: 1.25rem;
}

.course-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 17.5rem);
    gap: 1.25rem;
    align-items: start;
}

.course-detail-main {
    min-width: 0;
}

.course-detail-section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #E9EEF5;
}

.course-detail-section-icon,
.course-summary-icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: #FFF4D6;
    color: var(--myt-course-detail-maroon);
}

.course-detail-section-heading h3,
.course-overview-heading h4 {
    margin: 0;
    color: var(--myt-course-detail-text);
    font-weight: 900;
}

.course-detail-section-heading h3 {
    font-size: 1rem;
}

.course-detail-section-heading p,
.course-overview-heading p {
    margin-top: 0.15rem;
    color: var(--myt-course-detail-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.course-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    padding: 1.1rem 0;
}

.course-detail-info-item {
    min-width: 0;
}

.course-detail-info-item-wide {
    grid-column: 1 / -1;
}

.course-detail-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    color: var(--myt-course-detail-maroon);
    font-size: 0.75rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.course-detail-inline-link:hover {
    color: var(--myt-course-detail-maroon-dark);
    text-decoration: underline;
}

.course-detail-helper {
    margin-top: 0.2rem;
    color: var(--myt-course-detail-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.course-detail-overview {
    padding-top: 1rem;
    border-top: 1px solid #E9EEF5;
}

.course-overview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.course-overview-heading h4 {
    font-size: 0.9rem;
}

.course-mode-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--myt-course-detail-border);
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    background: #FFF9EA;
    color: var(--myt-course-detail-maroon);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.course-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.course-summary-card {
    min-width: 0;
    border: 1px solid #DFE6EF;
    border-radius: 1rem;
    padding: 0.85rem;
    background: var(--myt-course-detail-panel);
}

.course-summary-card-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    color: var(--myt-course-detail-text);
    font-size: 0.78rem;
    font-weight: 900;
}

.course-summary-card-title .course-summary-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.65rem;
    font-size: 0.75rem;
}

.course-summary-list {
    display: grid;
    gap: 0.55rem;
}

.course-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    color: var(--myt-course-detail-muted);
    font-size: 0.72rem;
}

.course-summary-row > span {
    min-width: 0;
}

.course-summary-row > strong {
    color: var(--myt-course-detail-text);
    font-size: 0.72rem;
    font-weight: 900;
    text-align: right;
}

.course-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
    white-space: nowrap;
}

.course-status-pill.is-success {
    background: #DCFCE7;
    color: #166534;
}

.course-status-pill.is-warning {
    background: #FFF4D6;
    color: #7A1114;
}

.course-status-pill.is-info {
    background: #E8EEF8;
    color: #244469;
}

.course-status-pill.is-muted {
    background: #E9EEF5;
    color: #475569;
}

.course-summary-note {
    margin-top: 0.7rem;
    color: var(--myt-course-detail-muted);
    font-size: 0.68rem;
    line-height: 1.45;
}

.course-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.course-summary-metrics > div {
    border-radius: 0.75rem;
    padding: 0.55rem 0.35rem;
    background: #FFFFFF;
    text-align: center;
}

.course-summary-metrics strong,
.course-summary-metrics span {
    display: block;
}

.course-summary-metrics strong {
    color: var(--myt-course-detail-maroon);
    font-size: 1rem;
    font-weight: 900;
}

.course-summary-metrics span {
    margin-top: 0.1rem;
    color: var(--myt-course-detail-muted);
    font-size: 0.62rem;
    font-weight: 800;
}

.course-capacity-progress {
    display: block;
    width: 100%;
    height: 0.45rem;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #E9EEF5;
    appearance: none;
}

.course-capacity-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #E9EEF5;
}

.course-capacity-progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--myt-course-detail-maroon);
}

.course-capacity-progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--myt-course-detail-maroon);
}

.course-detail-action-panel {
    display: grid;
    gap: 0;
    border: 1px solid #DFE6EF;
    border-radius: 1rem;
    padding: 0.9rem;
    background: var(--myt-course-detail-panel);
}

.course-action-section {
    padding: 0.85rem 0;
    border-top: 1px solid #DFE6EF;
}

.course-action-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-action-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    color: #64748B;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.course-action-section-title i {
    color: var(--myt-course-detail-gold);
}

.course-action-section-list {
    display: grid;
    gap: 0.5rem;
}

.course-detail-action-panel form {
    width: 100%;
}

.course-detail-action-panel .action-tile {
    width: 100%;
    min-height: 2.85rem;
    border-radius: 0.85rem;
    padding: 0.72rem 0.85rem;
    color: var(--myt-course-detail-text);
    font-size: 0.8rem;
    box-shadow: none;
}

.course-detail-action-panel .action-tile:hover {
    transform: translateY(-1px);
}

.course-detail-action-panel .action-tile > i {
    width: 1rem;
    flex: 0 0 auto;
    color: var(--myt-course-detail-gold);
    text-align: center;
}

.course-detail-action-panel .action-tile-primary,
.course-detail-action-panel .action-tile-primary > i,
.course-detail-action-panel .action-tile-success,
.course-detail-action-panel .action-tile-success > i {
    color: #FFFFFF;
}

.course-detail-action-panel .action-tile-state {
    border-color: var(--myt-course-detail-border);
    background: #FFF4D6;
    color: var(--myt-course-detail-maroon);
    cursor: default;
}

.course-detail-action-panel .action-tile-state:hover {
    border-color: var(--myt-course-detail-border);
    background: #FFF4D6;
    transform: none;
}

.course-food-document-button {
    border-radius: 0.85rem;
    padding: 0.68rem 0.55rem;
    font-size: 0.78rem;
}

.course-action-danger-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid #DFE6EF;
}

.course-action-danger-footer > div {
    min-width: 0;
}

.course-action-danger-footer strong,
.course-action-danger-footer span {
    display: block;
}

.course-action-danger-footer strong {
    color: #991B1B;
    font-size: 0.68rem;
    font-weight: 900;
}

.course-action-danger-footer span {
    margin-top: 0.1rem;
    color: #94A3B8;
    font-size: 0.62rem;
}

.course-action-delete-button {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #FECACA;
    border-radius: 0.75rem;
    background: #FEE2E2;
    color: #991B1B;
    transition: background 0.2s ease, transform 0.2s ease;
}

.course-action-delete-button:hover {
    background: #FECACA;
    transform: translateY(-1px);
}

@media (max-width: 1023px) {
    .course-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-detail-action-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .course-action-section {
        border-top: 0;
        border-bottom: 1px solid #DFE6EF;
    }

    .course-action-section:first-child {
        padding-top: 0.85rem;
    }

    .course-action-danger-footer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .course-detail-surface {
        padding: 1rem;
    }

    .course-detail-info-grid,
    .course-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-detail-info-item-wide {
        grid-column: auto;
    }

    .course-summary-grid {
        gap: 0.65rem;
    }
}

@media (max-width: 639px) {
    .course-detail-header {
        padding: 1rem;
    }

    .course-detail-scroll {
        padding: 0.75rem;
    }

    .course-overview-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-detail-action-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-action-danger-footer {
        grid-column: auto;
    }
}

/* =========================================================
   Modal Peserta Kursus — warna header dikawal di style.css
   Warna header dan tindakan dikawal oleh class komponen.
   ========================================================= */
html body [id^="modal-peserta-"] .myt-modal-header,
html body [id^="modal-peserta-"] .myt-modal-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div),
html body [id^="modal-peserta-"] .myt-modal-header :is(.myt-modal-title, .myt-modal-kicker, .myt-modal-close) {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

html body [id^="modal-peserta-"] .course-maroon-button,
html body [id^="modal-peserta-"] .course-maroon-button :is(i, span, strong, b) {
    color: var(--myt-course-maroon-button-text);
    -webkit-text-fill-color: var(--myt-course-maroon-button-text);
}

/* ==========================================================
   PENGINAPAN — PENEMPATAN NAMA PESERTA MENGIKUT BILIK
   ========================================================== */
.accommodation-placement-course-head {
    padding: 20px;
}

.accommodation-placement-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #166534;
    background: #DCFCE7;
    font-size: 10px;
    font-weight: 900;
}

.accommodation-placement-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.accommodation-placement-stats > div {
    padding: 16px;
    border: 1px solid var(--accommodation-border);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: var(--accommodation-shadow);
}

.accommodation-placement-stats span {
    display: block;
    color: var(--accommodation-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.accommodation-placement-stats strong {
    display: block;
    margin-top: 5px;
    color: var(--accommodation-text);
    font-size: 24px;
    font-weight: 900;
}

.accommodation-placement-stats .is-warning {
    border-color: #F3C758;
    background: #FFF8E1;
}

.accommodation-placement-stats .is-warning strong {
    color: #92400E;
}

.accommodation-placement-stats .is-success {
    border-color: #86EFAC;
    background: #F0FDF4;
}

.accommodation-placement-stats .is-success strong {
    color: #166534;
}

.accommodation-placement-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 18px;
}

.accommodation-placement-unassigned-panel {
    position: sticky;
    top: 0;
}

.accommodation-placement-form {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.accommodation-participant-checklist {
    display: grid;
    gap: 9px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
}

.accommodation-participant-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--accommodation-border);
    border-radius: 13px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.accommodation-participant-option:hover {
    border-color: var(--accommodation-gold);
    background: #FFFDF8;
    transform: translateY(-1px);
}

.accommodation-participant-option input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--accommodation-maroon);
}

.accommodation-participant-option span {
    min-width: 0;
}

.accommodation-participant-option strong,
.accommodation-room-occupant-row strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--accommodation-text);
    font-size: 12px;
    font-weight: 900;
}

.accommodation-participant-option small,
.accommodation-room-occupant-row small {
    display: block;
    margin-top: 3px;
    color: var(--accommodation-muted);
    font-size: 10px;
    line-height: 1.45;
}

.accommodation-placement-submit {
    width: 100%;
    justify-content: center;
}

.accommodation-placement-rooms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.accommodation-placement-room-card {
    overflow: hidden;
    border: 1px solid var(--accommodation-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: var(--accommodation-shadow);
}

.accommodation-placement-room-card.is-full {
    border-color: #86EFAC;
}

.accommodation-placement-room-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #EEF2F7;
    background: #FBFCFE;
}

.accommodation-placement-room-card > header span {
    display: block;
    color: var(--accommodation-maroon);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.accommodation-placement-room-card > header h3 {
    margin-top: 3px;
    color: var(--accommodation-text);
    font-size: 15px;
    font-weight: 900;
}

.accommodation-placement-room-card > header small {
    display: block;
    margin-top: 3px;
    color: var(--accommodation-muted);
    font-size: 10px;
    font-weight: 700;
}

.accommodation-placement-room-card > header > strong {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 10px;
    color: var(--accommodation-maroon);
    background: #FFF4D6;
    font-size: 12px;
    font-weight: 900;
}

.accommodation-placement-progress {
    display: block;
    width: calc(100% - 32px);
    height: 7px;
    margin: 12px 16px 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #E2E8F0;
    appearance: none;
}

.accommodation-placement-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #E2E8F0;
}

.accommodation-placement-progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--accommodation-maroon);
}

.accommodation-placement-progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--accommodation-maroon);
}

.accommodation-placement-room-card.is-full .accommodation-placement-progress::-webkit-progress-value {
    background: #16A34A;
}

.accommodation-placement-room-card.is-full .accommodation-placement-progress::-moz-progress-bar {
    background: #16A34A;
}

.accommodation-room-occupant-list {
    display: grid;
    gap: 9px;
    padding: 14px 16px;
}

.accommodation-room-occupant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px;
    border: 1px solid #E8EDF3;
    border-radius: 12px;
    background: #FFFFFF;
}

.accommodation-room-occupant-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.accommodation-room-occupant-actions form:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
}

.accommodation-room-occupant-actions select {
    max-width: 125px;
    padding: 7px 8px;
    border: 1px solid var(--accommodation-border);
    border-radius: 9px;
    color: var(--accommodation-text);
    background: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
}

.accommodation-room-occupant-actions button {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #FFFFFF;
    background: var(--accommodation-maroon);
    font-size: 11px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.accommodation-room-occupant-actions button:hover {
    background: var(--accommodation-maroon-dark);
    transform: translateY(-1px);
}

.accommodation-room-occupant-actions button.is-delete {
    color: #991B1B;
    background: #FEE2E2;
}

.accommodation-room-occupant-actions button.is-delete:hover {
    background: #FECACA;
}

.accommodation-room-empty,
.accommodation-placement-list-empty {
    padding: 18px;
    color: var(--accommodation-muted);
    font-size: 11px;
    text-align: center;
}

.accommodation-placement-list-empty {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accommodation-placement-room-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid #EEF2F7;
    color: var(--accommodation-muted);
    background: #FBFCFE;
    font-size: 9px;
}

.accommodation-placement-room-card > footer span {
    color: var(--accommodation-text);
    font-weight: 900;
}

.accommodation-placement-alert,
.accommodation-placement-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid #F3C758;
    border-radius: 16px;
    color: #78350F;
    background: #FFF8E1;
}

.accommodation-placement-alert > i,
.accommodation-placement-empty > i {
    flex: 0 0 auto;
    color: var(--accommodation-gold);
    font-size: 22px;
}

.accommodation-placement-alert strong,
.accommodation-placement-empty h2 {
    color: var(--accommodation-text);
    font-size: 13px;
    font-weight: 900;
}

.accommodation-placement-alert p,
.accommodation-placement-empty p {
    margin-top: 3px;
    color: var(--accommodation-muted);
    font-size: 11px;
    line-height: 1.5;
}

.accommodation-placement-alert.is-danger {
    border-color: #FCA5A5;
    color: #991B1B;
    background: #FEF2F2;
}

.accommodation-placement-alert.is-danger > i {
    color: #DC2626;
}

.accommodation-placement-empty {
    min-height: 220px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media (max-width: 1100px) {
    .accommodation-placement-layout {
        grid-template-columns: 1fr;
    }

    .accommodation-placement-unassigned-panel {
        position: static;
    }
}

@media (max-width: 900px) {
    .accommodation-placement-stats,
    .accommodation-placement-rooms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .accommodation-placement-stats,
    .accommodation-placement-rooms {
        grid-template-columns: 1fr;
    }

    .accommodation-room-occupant-row,
    .accommodation-placement-room-card > footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .accommodation-room-occupant-actions {
        width: 100%;
    }

    .accommodation-room-occupant-actions form:first-child {
        flex: 1;
    }

    .accommodation-room-occupant-actions select {
        flex: 1;
        max-width: none;
    }
}

/* Detail kursus: tindakan tempahan dan penempatan penginapan. */
.course-accommodation-action-group {
    display: grid;
    width: 100%;
    gap: 0.55rem;
}

.course-accommodation-action-group > .action-tile {
    width: 100%;
}

.course-accommodation-sub-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
}

.course-accommodation-sub-button {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 0.65rem;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    color: #171313;
    background: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.course-accommodation-sub-button i {
    color: #F2C14E;
}

.course-accommodation-sub-button:hover {
    border-color: #F2C14E;
    background: #FFF9EA;
    transform: translateY(-1px);
}

.course-accommodation-sub-actions.hidden {
    display: none;
}

/* ==========================================================
   Peserta — detail kursus, penginapan dan status kehadiran
   Warna dan komponen paparan peserta dipusatkan di sini.
   ========================================================== */
:root {
    --myt-participant-hero-text: #FFFFFF;
    --myt-participant-gold: #F2C14E;
    --myt-participant-maroon: #7A1114;
    --myt-participant-maroon-dark: #5A0B0D;
    --myt-participant-text: #171313;
    --myt-participant-muted: #64748B;
    --myt-participant-border: #E7D5B5;
    --myt-participant-cream: #FFF8E6;
    --myt-participant-success: #16A34A;
    --myt-participant-success-dark: #15803D;
}

html body .participant-course-detail-page .participant-course-hero,
html body .participant-course-detail-page .participant-course-hero .participant-hero-title,
html body .participant-course-detail-page .participant-course-hero .participant-hero-meta,
html body .participant-course-detail-page .participant-course-hero .participant-hero-meta :is(p, span, strong, b) {
    color: var(--myt-participant-hero-text);
    -webkit-text-fill-color: var(--myt-participant-hero-text);
}

html body .participant-course-detail-page .participant-course-hero .participant-hero-meta i {
    color: var(--myt-participant-gold);
    -webkit-text-fill-color: var(--myt-participant-gold);
}

html body .participant-course-detail-page .participant-course-hero .participant-badge-gold,
html body .participant-course-detail-page .participant-course-hero .participant-badge-gold * {
    color: var(--myt-participant-text);
    -webkit-text-fill-color: var(--myt-participant-text);
}

.participant-accommodation-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    border: 1px solid var(--myt-participant-border);
    border-radius: 1.5rem;
    background: #FFFFFF;
    padding: 1.25rem;
    box-shadow: 0 4px 14px rgba(59, 7, 9, 0.06);
}

.participant-accommodation-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--myt-participant-cream);
    color: var(--myt-participant-maroon);
    font-size: 1.1rem;
}

.participant-accommodation-kicker {
    color: var(--myt-participant-maroon);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.participant-accommodation-content h2 {
    margin-top: 0.2rem;
    color: var(--myt-participant-text);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.3;
}

.participant-accommodation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.participant-accommodation-grid > div {
    min-width: 0;
    border: 1px solid #E2E8F0;
    border-radius: 0.9rem;
    background: #F8FAFC;
    padding: 0.75rem;
}

.participant-accommodation-grid span,
.participant-accommodation-grid strong {
    display: block;
}

.participant-accommodation-grid span {
    color: var(--myt-participant-muted);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.participant-accommodation-grid strong {
    margin-top: 0.25rem;
    color: var(--myt-participant-text);
    font-size: 0.8rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.participant-course-attendance-state {
    border: 1px solid rgba(242, 193, 78, 0.65);
    border-radius: 1rem;
    background: var(--myt-participant-cream);
    padding: 1rem;
}

.participant-attendance-locked,
.participant-attendance-open,
.participant-attendance-success {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
}

.participant-attendance-locked {
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.participant-attendance-locked.is-closed {
    background: #F8FAFC;
}

.participant-attendance-state-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: var(--myt-participant-cream);
    color: var(--myt-participant-maroon);
}

.participant-attendance-locked strong,
.participant-attendance-open strong {
    display: block;
    color: var(--myt-participant-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.participant-attendance-locked p,
.participant-attendance-open p {
    margin-top: 0.2rem;
    color: var(--myt-participant-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.participant-attendance-open {
    justify-content: space-between;
    border: 1px solid #86EFAC;
    background: #F0FDF4;
}

html body .participant-course-detail-page .participant-attendance-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid #86EFAC;
    border-radius: 0.75rem;
    background: var(--myt-participant-success);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    padding: 0.7rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 900;
    transition: 150ms ease;
}

html body .participant-course-detail-page .participant-attendance-button:hover {
    background: var(--myt-participant-success-dark);
    transform: translateY(-1px);
}

html body .participant-course-detail-page .participant-attendance-success {
    border: 1px solid #86EFAC;
    background: var(--myt-participant-success);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 900;
}

html body .participant-course-detail-page .participant-attendance-success * {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

@media (max-width: 767px) {
    .participant-accommodation-card {
        grid-template-columns: 1fr;
    }

    .participant-accommodation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .participant-attendance-open {
        align-items: stretch;
        flex-direction: column;
    }

    .participant-attendance-open form,
    .participant-attendance-open .participant-attendance-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .participant-accommodation-grid {
        grid-template-columns: 1fr;
    }
}

/* Peserta: shell detail kursus menggunakan class komponen sendiri.
   Gunakan class komponen khusus untuk hero peserta. */
.participant-course-shell {
    background: #FFFFFF;
}

.participant-course-shell .participant-course-hero .participant-hero-meta,
.participant-course-shell .participant-course-hero .participant-hero-meta p,
.participant-course-shell .participant-course-hero .participant-hero-meta span,
.participant-course-shell .participant-course-hero .participant-hero-title {
    color: var(--myt-participant-hero-text, #FFFFFF);
    -webkit-text-fill-color: var(--myt-participant-hero-text, #FFFFFF);
}

.participant-course-shell .participant-course-hero .participant-hero-meta i {
    color: var(--myt-participant-gold, #F2C14E);
    -webkit-text-fill-color: var(--myt-participant-gold, #F2C14E);
}

/* Peserta: selaraskan kandungan kad kursus pada dashboard. */
#participant-course-list .participant-dashboard-course-card {
    display: flex;
    min-height: 14rem;
    flex-direction: column;
}

#participant-course-list .participant-dashboard-course-status {
    display: flex;
    min-height: 1.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

#participant-course-list .participant-dashboard-course-title {
    min-height: 2.75rem;
}

#participant-course-list .participant-dashboard-course-meta {
    min-height: 3.25rem;
    align-content: flex-start;
}

#participant-course-list .participant-dashboard-course-attendance {
    margin-top: auto;
}

/* ==========================================================
   Kontra khusus Tetapan Admin dan Tetapan Fasiliti
   Skop kecil supaya tidak mengubah komponen lain.
   ========================================================== */
#modalTetapanAdmin .admin-role-primary-button,
#modalTetapanAdmin .admin-role-primary-button :is(i, span, strong, b),
#modalTetapanAdmin .admin-role-maroon-badge,
#modalTetapanAdmin .admin-role-maroon-badge :is(i, span, strong, b) {
    background-color: var(--myt-admin-role-primary-bg);
    color: var(--myt-admin-role-primary-text);
    -webkit-text-fill-color: var(--myt-admin-role-primary-text);
}

#modalTetapanAdmin .admin-role-search-field {
    position: relative;
}

#modalTetapanAdmin .admin-role-search-icon {
    z-index: 1;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    pointer-events: none;
}

#modalTetapanAdmin .admin-role-search-input {
    padding-left: 3rem;
}

#modalTetapanAdmin .npp-primary-button,
#modalTetapanAdmin .npp-primary-button :is(i, span, strong, b) {
    background-color: #7A1114;
    border-color: #7A1114;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

#modalTetapanAdmin .npp-primary-button:hover {
    background-color: #5A0B0D;
    border-color: #5A0B0D;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

#modalTetapanAdmin .npp-master-file-input::file-selector-button {
    margin-right: 1rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #7A1114;
    padding: 0.5rem 1rem;
    color: #FFFFFF;
    font-weight: 900;
    cursor: pointer;
}

html body .facility-primary-button,
html body .facility-primary-button :is(i, span, strong, b),
html body .facility-type-badge,
html body .facility-type-badge :is(i, span, strong, b) {
    background-color: #7A1114;
    border-color: #7A1114;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

html body .facility-primary-button:hover {
    background-color: #5A0B0D;
    border-color: #5A0B0D;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}


/* Tetapan Fasiliti: pastikan teks komponen maroon kekal putih.
   Selector ber-ID mengehadkan gaya kepada halaman Tetapan Fasiliti. */
#facilitySettingsPage button.facility-primary-button.font-black,
#facilitySettingsPage button.facility-primary-button.font-black :is(i, span, strong, b),
#facilitySettingsPage span.facility-type-badge.font-black,
#facilitySettingsPage span.facility-type-badge.font-black :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* Tetapan Admin: teks tindakan utama pada kad Role & Akses.
   Selector khusus mengehadkan gaya kepada modal Tetapan Admin. */
html body #modalTetapanAdmin button.admin-role-action-button.font-black,
html body #modalTetapanAdmin button.admin-role-action-button.font-black > i,
html body #modalTetapanAdmin button.admin-role-action-button.font-black > span {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* Kemaskini Kursus: pilihan jenis tarikh ikut gaya borang Tambah Kursus. */
.course-edit-modal .course-edit-date-mode-option {
    display: block;
    cursor: pointer;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    background: #F8FAFC;
    padding: 0.75rem;
    text-align: center;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.course-edit-modal .course-edit-date-mode-option:hover {
    border-color: #E7D5B5;
    transform: translateY(-1px);
}

.course-edit-modal .course-edit-date-mode-option.is-active {
    border-color: #7A1114;
    background: #7A1114;
    box-shadow: 0 8px 18px rgba(122, 17, 20, 0.16);
}

.course-edit-modal .course-edit-date-mode-title,
.course-edit-modal .course-edit-date-mode-description {
    display: block;
}

.course-edit-modal .course-edit-date-mode-title {
    color: #0F172A;
    -webkit-text-fill-color: #0F172A;
    font-size: 0.875rem;
    font-weight: 900;
}

.course-edit-modal .course-edit-date-mode-description {
    margin-top: 0.25rem;
    color: #64748B;
    -webkit-text-fill-color: #64748B;
    font-size: 0.625rem;
}

.course-edit-modal .course-edit-date-mode-option.is-active .course-edit-date-mode-title,
.course-edit-modal .course-edit-date-mode-option.is-active .course-edit-date-mode-description {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* =========================================================
   Edit Slot — header dan tindakan utama khusus modal slot.
   Skop modal mengelakkan perubahan pada komponen lain.
   ========================================================= */
.slot-management-modal .slot-modal-header {
    background-color: #7A1114;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.slot-management-modal .slot-modal-header .slot-modal-title,
.slot-management-modal .slot-modal-header .slot-modal-close {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.slot-management-modal .slot-modal-header .slot-modal-kicker {
    color: #F2C14E;
    -webkit-text-fill-color: #F2C14E;
}

.slot-management-modal .slot-modal-header .slot-modal-kicker,
.slot-management-modal .slot-modal-header .slot-modal-title {
    font-weight: 900;
    text-shadow: none;
}

.slot-management-modal .slot-modal-close {
    opacity: 0.85;
}

.slot-management-modal .slot-modal-close:hover {
    opacity: 1;
}

.slot-management-modal .slot-primary-button,
.slot-management-modal .slot-primary-button :is(i, span, strong, b) {
    background-color: #7A1114;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.slot-management-modal .slot-primary-button:hover {
    background-color: #5A0B0D;
}

/* =========================================================
   Modal Urus Peserta — header putih tanpa konflik font global
   ========================================================= */
html body [id^="modal-peserta-"] .participant-modal-header {
    background-color: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

html body [id^="modal-peserta-"] .participant-modal-header .participant-modal-kicker,
html body [id^="modal-peserta-"] .participant-modal-header .participant-modal-title,
html body [id^="modal-peserta-"] .participant-modal-header .participant-modal-close {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

html body [id^="modal-peserta-"] .participant-modal-header .participant-modal-kicker,
html body [id^="modal-peserta-"] .participant-modal-header .participant-modal-title {
    font-weight: 900;
}

/* =========================================================
   Modal Pautan & Soalan — kontras header dan butang utama.
   Skop khusus mengelakkan perubahan pada modal lain.
   ========================================================= */
.course-links-modal .course-links-header {
    background-color: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

.course-links-modal .course-links-kicker {
    color: var(--myt-color-gold);
    -webkit-text-fill-color: var(--myt-color-gold);
    font-weight: 900;
}

.course-links-modal .course-links-title,
.course-links-modal .course-links-close {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

.course-links-modal .course-links-title {
    font-weight: 900;
}

.course-links-modal .course-links-close {
    opacity: 0.85;
}

.course-links-modal .course-links-close:hover {
    opacity: 1;
}

.course-links-modal .course-links-copy-button,
.course-links-modal .course-links-copy-button :is(i, span, strong, b),
.course-links-modal .course-links-save-button,
.course-links-modal .course-links-save-button :is(i, span, strong, b) {
    background-color: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
    border-color: var(--myt-color-maroon);
    font-weight: 900;
}

.course-links-modal .course-links-copy-button:hover,
.course-links-modal .course-links-save-button:hover {
    background-color: #5A0B0D;
    border-color: #5A0B0D;
}


/* Input pautan/soalan mengekalkan huruf asal tanpa inline style. */
.text-no-transform {
    text-transform: none;
}

/* =========================================================
   Modal Pautan & Soalan — warna melalui class komponen.
   ========================================================= */
[id^="modal-pautan-"].course-links-modal .course-links-header {
    background-color: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

[id^="modal-pautan-"].course-links-modal .course-links-header .course-links-kicker {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
    font-weight: 900;
}

[id^="modal-pautan-"].course-links-modal .course-links-header .course-links-title,
[id^="modal-pautan-"].course-links-modal .course-links-header .course-links-close {
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

[id^="modal-pautan-"].course-links-modal .course-links-copy-button,
[id^="modal-pautan-"].course-links-modal .course-links-copy-button :is(i, span, strong, b),
[id^="modal-pautan-"].course-links-modal .course-links-save-button,
[id^="modal-pautan-"].course-links-modal .course-links-save-button :is(i, span, strong, b) {
    background-color: var(--myt-color-maroon);
    border-color: var(--myt-color-maroon);
    color: var(--myt-color-maroon-text);
    -webkit-text-fill-color: var(--myt-color-maroon-text);
}

/* ==========================================================
   Semak Kehadiran — tajuk dan penerangan header putih.
   ========================================================== */
html body #sidebarOverlay ~ main > header .attendance-back-link + div h1,
html body #sidebarOverlay ~ main > header .attendance-back-link + div p {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}


/* ==========================================================
   Senarai Kursus — filter dan carian
   Dipusatkan daripada Blade ke style.css.
   ========================================================== */
/* Carian kursus: susunan stabil walaupun utility Tailwind tertentu tiada dalam build. */
        .course-filter-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) auto;
            gap: 0.75rem;
            align-items: stretch;
        }

        .course-filter-form.course-filter-form--archive {
            grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
        }

        .course-search-field {
            position: relative;
            min-width: 0;
        }

        .course-search-field .course-search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            width: 1.1rem;
            height: 1.1rem;
            transform: translateY(-50%);
            color: #64748b;
            pointer-events: none;
            z-index: 2;
        }

        .course-search-field .course-search-input {
            min-height: 3rem;
            padding-left: 2.85rem;
        }

        .course-status-select,
        .course-filter-button {
            min-height: 3rem;
        }

        .course-filter-button,
        .course-maroon-button,
        .course-filter-button *,
        .course-maroon-button * {
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }

        .course-filter-button svg,
        .course-maroon-button svg {
            color: #ffffff;
            stroke: currentColor;
        }

        @media (max-width: 1023px) {
            .course-filter-form {
                grid-template-columns: minmax(0, 1fr);
            }
        }


/* ==========================================================
   Paparan Database
   Dipusatkan daripada Blade ke style.css.
   ========================================================== */
.database-sheet-scroll {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f8fafc;
    }

    .database-sheet-scroll::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .database-sheet-scroll::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    .database-sheet-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border: 2px solid #f8fafc;
        border-radius: 999px;
    }

    .database-cell {
        min-width: 150px;
        max-width: 360px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .database-cell-wide {
        min-width: 260px;
        max-width: 480px;
    }

    .database-sheet-table th,
    .database-sheet-table td {
        border-right: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }

    .database-sheet-table th:last-child,
    .database-sheet-table td:last-child {
        border-right: 0;
    }

    .database-sheet-table tbody tr:hover td {
        background: #fff8e6;
    }

    .database-row-number {
        position: sticky;
        left: 0;
        z-index: 10;
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        text-align: center;
        background: #f8fafc;
    }

    thead .database-row-number {
        z-index: 30;
        background: #7A1114;
    }

    .database-copy-toast {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        z-index: 100;
        display: none;
    }


/* ==========================================================
   Semak Kehadiran — modal kemaskini masa
   Dipusatkan daripada Blade ke style.css.
   ========================================================== */
.attendance-time-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        min-width: 92px;
        padding: .42rem .72rem;
        border-radius: .65rem;
        border: 1px solid transparent;
        font-size: .75rem;
        line-height: 1;
        font-weight: 900;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    .attendance-time-badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(15, 23, 42, .12);
    }

    .attendance-time-badge:focus-visible {
        outline: 3px solid rgba(242, 193, 78, .45);
        outline-offset: 2px;
    }

    .attendance-time-badge.is-present {
        color: #7A1114;
        background: #FFF4D6;
        border-color: #E7D5B5;
    }

    .attendance-time-badge.is-absent {
        color: #64748B;
        background: #F8FAFC;
        border-color: #CBD5E1;
    }

    .attendance-modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .attendance-modal.is-open {
        display: flex;
    }

    .attendance-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(2px);
    }

    .attendance-modal-panel {
        position: relative;
        width: 100%;
        max-width: 32rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        border-radius: 1rem;
        background: #FFFFFF;
        padding: 2rem 1.8rem 1.6rem;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
    }

    .attendance-modal-close {
        position: absolute;
        top: .65rem;
        right: .85rem;
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: .5rem;
        background: transparent;
        color: #64748B;
        font-size: 1.55rem;
        line-height: 1;
        cursor: pointer;
    }

    .attendance-modal-close:hover {
        background: #F1F5F9;
        color: #0F172A;
    }

    .attendance-modal-title {
        margin: 0;
        text-align: center;
        color: #525252;
        font-size: 1.85rem;
        line-height: 1.2;
        font-weight: 900;
    }

    .attendance-modal-person {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .attendance-modal-person-name {
        margin: 0;
        color: #334155;
        font-size: .9rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .attendance-modal-person-ic {
        margin: .15rem 0 0;
        color: #64748B;
        font-size: .75rem;
        font-weight: 600;
    }

    .attendance-modal-label {
        display: block;
        margin-bottom: .4rem;
        padding: .65rem .75rem 0;
        border: 1px solid #BFDBFE;
        border-bottom: 0;
        border-radius: .65rem .65rem 0 0;
        background: #EFF6FF;
        color: #1D4ED8;
        font-size: .75rem;
        font-weight: 900;
    }

    .attendance-modal-time {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: .78rem .85rem;
        border: 1px solid #BFDBFE;
        border-top: 0;
        border-radius: 0 0 .65rem .65rem;
        background: #FFFFFF;
        color: #475569;
        font-size: .9rem;
        font-weight: 700;
        outline: none;
    }

    .attendance-modal-time:focus {
        border-color: #60A5FA;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, .2);
    }

    .attendance-modal-note {
        margin-top: 1rem;
        border-radius: .65rem;
        padding: .8rem .85rem;
        font-size: .72rem;
        line-height: 1.45;
        font-weight: 600;
    }

    .attendance-modal-note.is-warning {
        border: 1px solid #FED7AA;
        background: #FFF7ED;
        color: #C2410C;
    }

    .attendance-modal-note.is-info {
        border: 1px solid #BFDBFE;
        background: #EFF6FF;
        color: #1D4ED8;
    }

    .attendance-modal-actions {
        display: flex;
        justify-content: center;
        gap: .65rem;
        margin-top: 1.9rem;
    }

    .attendance-modal-save,
    .attendance-modal-cancel {
        border: 0;
        border-radius: .35rem;
        padding: .8rem 1.15rem;
        font-size: .95rem;
        font-weight: 800;
        cursor: pointer;
    }

    .attendance-modal-save {
        background: #6AA5D8;
        color: #FFFFFF;
    }

    .attendance-modal-save:hover {
        background: #4E8FC8;
    }

    .attendance-modal-cancel {
        background: #64748B;
        color: #FFFFFF;
    }

    .attendance-modal-cancel:hover {
        background: #475569;
    }

    body.attendance-modal-open {
        overflow: hidden;
    }

    @media (max-width: 640px) {
        .attendance-modal-panel {
            padding: 1.6rem 1.1rem 1.2rem;
        }

        .attendance-modal-title {
            font-size: 1.45rem;
        }

        .attendance-modal-actions {
            flex-direction: column;
        }

        .attendance-modal-save,
        .attendance-modal-cancel {
            width: 100%;
        }
    }

/* ==========================================================
   CENTRALIZED STATIC VIEW STYLES
   Static layout/colour declarations formerly embedded in Blade.
   Dynamic values (progress width, slot state, sticky offsets) remain inline.
   ========================================================== */
.participant-course-viewport {
    height: 100vh;
    height: 100dvh;
}

.participant-course-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.participant-accommodation-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.participant-question-open-button,
.participant-question-open-button :is(i, span, strong, b),
.participant-dashboard-status-active,
.participant-dashboard-status-active :is(i, span, strong, b),
.participant-attendance-button,
.participant-attendance-button :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.admin-settings-header,
.admin-settings-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.database-unlock-header,
.database-unlock-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.database-unlock-kicker {
    color: #F2C14E;
    -webkit-text-fill-color: #F2C14E;
}

.database-primary-button,
.database-primary-button :is(i, span, strong, b),
.database-table-header-link,
.database-table-header-link :is(i, span, strong, b),
.database-row-number,
.database-copy-toast {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.database-table-link.is-active,
.database-table-link.is-active :is(i, span, strong, b, small) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.database-table-link.is-active .database-table-name {
    opacity: 0.8;
}

.database-table-header-code {
    color: rgba(255, 255, 255, 0.72);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

.copy-question-modal {
    z-index: 130;
}

.copy-question-modal-header,
.copy-question-modal-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.copy-question-modal-kicker {
    color: #F2C14E;
    -webkit-text-fill-color: #F2C14E;
}

.copy-question-confirm,
.copy-question-confirm :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.attendance-primary-button,
.attendance-primary-button :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.attendance-report-header,
.attendance-report-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.attendance-report-header .attendance-report-icon {
    color: #F2C14E;
    -webkit-text-fill-color: #F2C14E;
}

.course-edit-header,
.course-edit-header :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, button, a, div) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.course-edit-header .course-edit-kicker {
    color: #F2C14E;
    -webkit-text-fill-color: #F2C14E;
}

.course-edit-submit,
.course-edit-submit :is(i, span, strong, b) {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.attendance-sticky-participant-column {
    left: 5rem;
}

/* ==========================================================
   Jadual kursus — muat naik admin dan muat turun peserta
   ========================================================== */
.course-schedule-action-group,
.course-schedule-upload-form {
    display: grid;
    width: 100%;
    gap: 0.55rem;
}

.course-schedule-upload-label {
    cursor: pointer;
}

.course-schedule-file-input {
    display: none;
}

.course-schedule-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.course-schedule-secondary-button {
    display: inline-flex;
    width: 100%;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.8rem;
    background: #FFFFFF;
    color: #171313;
    padding: 0.65rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.course-schedule-secondary-button i {
    color: #F2C14E;
}

.course-schedule-secondary-button:hover {
    border-color: #F2C14E;
    background: #FFF9EA;
    transform: translateY(-1px);
}

.course-schedule-secondary-button-danger {
    color: #B91C1C;
}

.course-schedule-secondary-button-danger i {
    color: #DC2626;
}

.course-schedule-secondary-button-danger:hover {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

.course-schedule-meta,
.course-schedule-help {
    margin: 0;
    color: #64748B;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.course-schedule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    text-align: center;
}

.course-schedule-error {
    border: 1px solid #FCA5A5;
    border-radius: 0.75rem;
    background: #FEF2F2;
    color: #991B1B;
    padding: 0.7rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.4;
}

.participant-schedule-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--myt-participant-border);
    border-radius: 1.5rem;
    background: #FFFFFF;
    padding: 1.25rem;
    box-shadow: 0 4px 14px rgba(59, 7, 9, 0.06);
}

.participant-schedule-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--myt-participant-cream);
    color: var(--myt-participant-maroon);
    font-size: 1.15rem;
}

.participant-schedule-content {
    min-width: 0;
}

.participant-schedule-kicker {
    color: var(--myt-participant-maroon);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.participant-schedule-content h2 {
    margin-top: 0.2rem;
    color: var(--myt-participant-text);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.3;
}

.participant-schedule-description {
    margin-top: 0.3rem;
    color: var(--myt-participant-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.participant-schedule-file {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.participant-schedule-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.participant-schedule-button {
    display: inline-flex;
    min-height: 2.7rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.participant-schedule-button:hover {
    transform: translateY(-1px);
}

.participant-schedule-button-secondary {
    border: 1px solid var(--myt-participant-border);
    background: var(--myt-participant-cream);
    color: var(--myt-participant-maroon);
}

.participant-schedule-button-secondary i {
    color: var(--myt-participant-gold);
}

.participant-schedule-button-secondary:hover {
    border-color: var(--myt-participant-gold);
    background: #FFF4D6;
}

.participant-schedule-button-primary,
.participant-schedule-button-primary i,
.participant-schedule-button-primary span {
    color: #FFFFFF;
}

.participant-schedule-button-primary {
    border: 1px solid var(--myt-participant-maroon);
    background: var(--myt-participant-maroon);
}

.participant-schedule-button-primary:hover {
    border-color: var(--myt-participant-maroon-dark);
    background: var(--myt-participant-maroon-dark);
}

@media (max-width: 767px) {
    .participant-schedule-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .participant-schedule-actions {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .participant-schedule-actions,
    .course-schedule-secondary-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================
   LATAR PAPAN PEMUKA ADMIN
   Gambar: public/assets/images/inselct.jpg
   ========================= */
.admin-dashboard-background {
    background-color: #f4f7fb;
    background-image:
        linear-gradient(rgba(244, 247, 251, 0.78), rgba(244, 247, 251, 0.78)),
        url('/assets/images/inselct.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 1024px) {
    .admin-dashboard-background {
        background-attachment: scroll;
    }
}


/* ==========================================================
   TETAPAN ADMIN — MODAL RESPONSIF DAN TERASING DARIPADA HEADER
   Modal dipindahkan ke <body> oleh app.js supaya tidak berada di
   belakang sidebar dan tidak mewarisi gaya header halaman.
   ========================================================== */
body.admin-settings-modal-open {
    overflow: hidden;
}

#modalTetapanAdmin.admin-settings-overlay {
    z-index: 140;
    box-sizing: border-box;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    overflow: hidden;
}

#modalTetapanAdmin .admin-settings-dialog {
    display: flex;
    width: min(74rem, 100%);
    height: min(51rem, calc(100dvh - clamp(1.5rem, 4vw, 3rem)));
    max-height: calc(100dvh - clamp(1.5rem, 4vw, 3rem));
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: var(--iron-text, #171313);
    text-shadow: none;
}

#modalTetapanAdmin .admin-settings-header {
    flex: 0 0 auto;
    padding: 1.15rem 1.5rem;
}

#modalTetapanAdmin .admin-settings-header h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.15;
}

#modalTetapanAdmin .admin-settings-header button[onclick="tutupModalTetapanAdmin()"] {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.7rem;
    line-height: 1;
}

#modalTetapanAdmin .admin-settings-header button[onclick="tutupModalTetapanAdmin()"]:hover {
    background: rgba(255, 255, 255, 0.16);
}

#modalTetapanAdmin .admin-settings-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

#modalTetapanAdmin .admin-settings-layout {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: 14rem minmax(0, 1fr);
}

#modalTetapanAdmin .admin-settings-sidebar {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid var(--iron-border, #E7D5B5);
    padding: 1rem;
    overscroll-behavior: contain;
}

#modalTetapanAdmin .admin-settings-content {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    color: var(--iron-text, #171313);
    overscroll-behavior: contain;
}

/* Modal ini pernah berada di dalam main > header. Reset khusus ini memastikan
   kad cerah kekal bertulisan gelap walaupun struktur halaman lama masih dicache. */
#modalTetapanAdmin .admin-settings-body,
#modalTetapanAdmin .admin-settings-body :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, label, div) {
    text-shadow: none;
}

#modalTetapanAdmin .admin-settings-content .bg-white,
#modalTetapanAdmin .admin-settings-content .bg-slate-50,
#modalTetapanAdmin .admin-settings-content .bg-gray-50 {
    color: var(--iron-text, #171313);
}

#modalTetapanAdmin .settings-tab {
    min-height: 2.85rem;
}

@media (max-width: 1024px) {
    #modalTetapanAdmin .admin-settings-dialog {
        width: min(62rem, 100%);
    }

    #modalTetapanAdmin .admin-settings-layout {
        grid-template-columns: 12.5rem minmax(0, 1fr);
    }

    #modalTetapanAdmin .admin-settings-content {
        padding: 1rem;
    }
}

@media (max-width: 760px) {
    #modalTetapanAdmin.admin-settings-overlay {
        padding: 0.5rem;
        align-items: stretch;
    }

    #modalTetapanAdmin .admin-settings-dialog {
        width: 100%;
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 1.25rem;
    }

    #modalTetapanAdmin .admin-settings-header {
        padding: 1rem;
    }

    #modalTetapanAdmin .admin-settings-header > div {
        min-width: 0;
    }

    #modalTetapanAdmin .admin-settings-header h2 {
        overflow: hidden;
        font-size: 1.15rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #modalTetapanAdmin .admin-settings-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    #modalTetapanAdmin .admin-settings-sidebar {
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--iron-border, #E7D5B5);
        padding: 0.65rem;
    }

    #modalTetapanAdmin .admin-settings-sidebar > p {
        display: none;
    }

    #modalTetapanAdmin #adminSettingsTabs {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 0.5rem;
    }

    #modalTetapanAdmin #adminSettingsTabs > .settings-tab {
        width: auto;
        min-width: max-content;
        margin-block: 0;
        padding: 0.7rem 0.9rem;
    }

    #modalTetapanAdmin .admin-settings-content {
        padding: 0.85rem;
    }
}

@media (max-height: 700px) and (min-width: 761px) {
    #modalTetapanAdmin.admin-settings-overlay {
        padding-block: 0.5rem;
    }

    #modalTetapanAdmin .admin-settings-dialog {
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    #modalTetapanAdmin .admin-settings-header {
        padding-block: 0.85rem;
    }
}