/* 
 * 🕌 NOOR UI 2.0 - Modern Islamic Hybrid
 * Concept: "Light & Clarity" - Clean, Useful, Advanced
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* Theme Colors - Islamic Green & Gold */
    --primary: #0f4c3a;     /* Deep Islamic Green */
    --primary-light: #e0f2f1; /* Very Light Green */
    --accent: #c5a059;      /* Muted Gold */
    --accent-hover: #b08d4a;
    
    /* Modern Theme Colors */
    --cream: #FDFBF7;
    --emerald-900: #064E3B;
    --emerald-50: #ecfdf5;
    --gold: #D4AF37;
    
    --bg-body: #f3f4f6;     /* Soft Gray */
    --bg-card: #ffffff;     /* Pure White */
    --bg-glass: rgba(255, 255, 255, 0.8);
    
    --text-main: #1f2937;   /* Dark Gray */
    --text-muted: #6b7280;
    
    --border-color: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    background-image: 
        radial-gradient(at 0% 0%, rgba(15, 76, 58, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(197, 160, 89, 0.05) 0px, transparent 50%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary);
    letter-spacing: -0.01em;
}

/* Navbar - Clean Glass - ULTRA PROTECTED */
.navbar-noor,
nav.navbar-noor,
.navbar.navbar-noor {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.75rem 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1000 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
}

.navbar-brand,
a.navbar-brand {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-right: auto !important;
    text-decoration: none !important;
}

.brand-logo {
    height: 40px;
    width: auto;
    display: block;
}

.nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s;
}

.nav-link:hover,
.nav-link.active,
a.nav-link:hover,
a.nav-link.active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(15, 76, 58, 0.2);
    transition: all 0.2s;
}

.btn-primary-custom:hover {
    background-color: #0a3528;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(15, 76, 58, 0.3);
}

/* Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 1.5rem;
}

.bento-card {
    background: var(--bg-card);
    border-radius: 1.5rem;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(197, 160, 89, 0.3);
}

.bento-col-2 { grid-column: span 2; }
.bento-row-2 { grid-row: span 2; }

/* Bootstrap Modern Calendar */
.calendar-page-bootstrap {
    min-height: calc(100vh - 80px);
    background: #f8f9fa;
}

/* Bootstrap Card Enhancements */
.calendar-page-bootstrap .card {
    transition: all 0.3s ease;
}

.calendar-page-bootstrap .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.calendar-page-bootstrap .card-header {
    font-weight: 600;
}

/* Bootstrap Button Group Enhancements */
.calendar-page-bootstrap .btn-group .btn {
    transition: all 0.2s ease;
}

.calendar-page-bootstrap .btn-group .btn:hover {
    transform: translateY(-1px);
}

.calendar-page-bootstrap .btn-check:checked + .btn {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* List Group Enhancements */
.calendar-page-bootstrap .list-group-item {
    transition: all 0.2s ease;
}

.calendar-page-bootstrap .list-group-item:hover {
    background-color: #f8f9fa;
    transform: translateX(4px);
}

.calendar-page-bootstrap .list-group-item.bg-primary-subtle {
    border-left: 3px solid var(--bs-primary);
    font-weight: 600;
}

.calendar-header-modern {
    background: linear-gradient(135deg, var(--primary) 0%, #0a3528 100%);
    color: white;
    padding: 3rem 0 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.calendar-header-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.calendar-header-modern > .container {
    position: relative;
    z-index: 1;
}

.calendar-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.calendar-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.calendar-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0.5rem 0 0;
    font-weight: 400;
}

.calendar-header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.calendar-nav-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-btn-modern {
    background: transparent;
    border: none;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.nav-btn-modern:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-modern:hover::before {
    width: 300px;
    height: 300px;
}

.btn-modern-primary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-modern-primary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.view-switcher {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.view-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.05);
}

.view-btn.active {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.calendar-container {
    margin-top: -1rem;
    position: relative;
    z-index: 2;
}

.calendar-card-modern {
    background: var(--bg-card);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.calendar-card-modern:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Modern Widget Styles */
.widget-modern {
    background: var(--bg-card);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.widget-modern:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(15, 76, 58, 0.2);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(197, 160, 89, 0.1) 100%);
    border-bottom: 1px solid var(--border-color);
}

.widget-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, #0a3528 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(15, 76, 58, 0.3);
}

.widget-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.widget-body {
    padding: 1.5rem;
}

/* Prayer Widget Modern */
.prayer-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prayer-item-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--bg-body);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.prayer-item-modern:hover {
    background: var(--primary-light);
    transform: translateX(4px);
    border-color: rgba(15, 76, 58, 0.2);
}

.prayer-item-modern.current {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(197, 160, 89, 0.15) 100%);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15, 76, 58, 0.15);
}

.prayer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.prayer-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #0a3528 100%);
    border-radius: 0.5rem;
    color: white;
    font-size: 0.85rem;
}

.prayer-item-modern.current .prayer-icon {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.4);
}

.prayer-name-modern {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.prayer-item-modern.current .prayer-name-modern {
    color: var(--primary);
    font-weight: 700;
}

.prayer-time-modern {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}

.prayer-item-modern.current .prayer-time-modern {
    color: var(--primary);
    font-size: 1.2rem;
}

/* Hijri Widget */
.hijri-display {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, #0a3528 100%);
    border-radius: 1rem;
    color: white;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hijri-display::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hijri-display > * {
    position: relative;
    z-index: 1;
}

.hijri-date-large {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hijri-date-full {
    font-size: 0.9rem;
    opacity: 0.9;
}

.hijri-loading {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
}

/* Quick Actions */
.quick-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--bg-body);
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid transparent;
    cursor: pointer;
}

.quick-action-item:hover {
    background: var(--primary-light);
    transform: translateX(4px);
    border-color: rgba(15, 76, 58, 0.2);
    color: var(--primary);
    text-decoration: none;
}

.quick-action-item i {
    width: 1.5rem;
    text-align: center;
    color: var(--primary);
}

/* Legend */
.legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-color {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Modern FullCalendar Grid Styling */
#calendar {
    font-family: var(--bs-font-sans-serif);
}

.fc {
    --fc-border-color: #e9ecef;
    --fc-daygrid-event-dot-width: 6px;
    --fc-event-border-color: var(--bs-primary);
    --fc-event-bg-color: var(--bs-primary);
    --fc-event-text-color: #ffffff;
    --fc-today-bg-color: #f0f9ff;
    --fc-button-bg-color: transparent;
    --fc-button-border-color: transparent;
    --fc-button-hover-bg-color: #f8f9fa;
    --fc-button-hover-border-color: transparent;
    --fc-button-active-bg-color: transparent;
    --fc-button-active-border-color: transparent;
    --fc-button-text-color: #495057;
}

/* Calendar Grid Container */
.fc-scrollgrid {
    border: none !important;
    border-radius: 0.5rem;
    overflow: hidden;
}

.fc-scrollgrid-section {
    border: none !important;
}

.fc-scrollgrid-section > table {
    border: none !important;
}

.fc-button {
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.2s !important;
    border: 1px solid #e5e7eb !important;
}

.fc-button:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.fc-button:focus {
    box-shadow: 0 0 0 3px rgba(15, 76, 58, 0.1) !important;
}

/* Hide default FullCalendar toolbar */
.fc-header-toolbar {
    display: none !important;
}

.fc-toolbar {
    display: none !important;
}

.fc-toolbar-title {
    font-family: var(--font-heading);
    font-size: 1.5rem !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Ultra Modern Day Cells - Clean & Minimal */
.fc-daygrid-day {
    transition: all 0.15s ease;
    border: 1px solid #f0f0f0;
    background: #ffffff;
    position: relative;
    min-height: 110px;
    padding: 0;
}

.fc-daygrid-day:hover {
    background: #fafafa !important;
    border-color: #e0e0e0 !important;
    cursor: pointer;
}

.fc-day-today {
    background: #ffffff !important;
    border: 2px solid #0d6efd !important;
    position: relative;
    z-index: 5;
}

.fc-day-today::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #0d6efd;
}

.fc-day-today:hover {
    background: #f8f9ff !important;
}

/* Clean Day Numbers */
.fc-daygrid-day-number {
    font-weight: 500;
    color: #1f1f1f;
    padding: 0.625rem 0.75rem 0.375rem;
    font-size: 0.9375rem;
    transition: all 0.15s;
    position: relative;
}

.fc-day-today .fc-daygrid-day-number {
    color: #0d6efd;
    font-weight: 600;
    font-size: 1rem;
}

/* Other month days */
.fc-day-other .fc-daygrid-day-number {
    color: #c0c0c0;
    font-weight: 400;
}

.fc-day-other {
    background: #fafafa !important;
}

.fc-day-today .fc-daygrid-day-number {
    color: var(--primary);
    font-weight: 700;
}

/* Clean Header Cells */
.fc-col-header-cell {
    padding: 0.875rem 0.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #f5f5f5;
}

.fc-col-header-cell:last-child {
    border-right: none;
}

.fc-col-header-cell-cushion {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #666;
    letter-spacing: 0.05em;
    text-align: center;
    display: block;
}

/* Clean Modern Events */
.fc-event {
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    margin: 0.125rem 0.5rem !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
    background: #0d6efd !important;
    color: white !important;
}

.fc-event:hover {
    opacity: 0.85 !important;
    transform: translateX(2px) !important;
}

.fc-event.friday-event {
    background: #ff9800 !important;
    color: white !important;
    font-weight: 600 !important;
}

.fc-event.friday-event {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.fc-daygrid-event-dot {
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

/* Minimal Hijri Date Display */
.hijri-date-small {
    font-size: 0.625rem !important;
    color: #999 !important;
    margin-top: 0.125rem;
    margin-left: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    display: block;
    opacity: 0.7;
}

.fc-day-today .hijri-date-small {
    color: #0d6efd !important;
    font-weight: 500;
    opacity: 1;
}

/* Clean More Link */
.fc-more-link {
    font-weight: 500;
    color: #0d6efd;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.15s;
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: inline-block;
}

.fc-more-link:hover {
    background-color: #f0f4ff;
    color: #0d6efd;
}

/* Clean Popover */
.fc-popover {
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e0e0e0 !important;
    overflow: hidden;
}

.fc-popover-header {
    background: #0d6efd !important;
    color: white !important;
    padding: 0.75rem 1rem !important;
    border-bottom: none !important;
    font-weight: 600;
    font-size: 0.875rem;
}

.fc-popover-body {
    padding: 0.75rem !important;
    background: white;
}

.fc-popover .fc-event {
    margin: 0.25rem 0 !important;
}

.fc-popover-close {
    color: white !important;
    opacity: 0.8;
}

.fc-popover-close:hover {
    opacity: 1;
}

/* List View Styling */
.fc-list-event:hover td {
    background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%) !important;
    transform: translateX(4px);
    transition: all 0.2s;
}

.fc-list-event-time {
    font-weight: 600;
    color: var(--bs-primary);
}

/* Time Grid Styling */
.fc-timegrid-slot {
    height: 3.5rem !important;
    border-color: #f1f3f5 !important;
}

.fc-timegrid-slot-label {
    border-color: #e9ecef !important;
    font-size: 0.8125rem;
    color: #6c757d;
}

.fc-timegrid-event {
    border-radius: 0.5rem !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.fc-timegrid-event:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Clean Day Frame */
.fc-daygrid-day-frame {
    min-height: 110px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.fc-daygrid-day-events {
    margin-top: 0.375rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fc-daygrid-event {
    margin: 0 !important;
}

.fc-scrollgrid {
    border: none !important;
}

.fc-scrollgrid-section > table {
    border: none !important;
}

.fc-daygrid-day-top {
    padding: 0.5rem 0.75rem 0.25rem;
}

/* View buttons */
.btn-group [data-view] {
    border-radius: 0.5rem !important;
    margin: 0 0.25rem;
}

.btn-group [data-view].active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Bootstrap Calendar Responsive */
@media (max-width: 768px) {
    .calendar-page-bootstrap .card-body {
        padding: 1rem !important;
    }
    
    .fc-daygrid-day-frame {
        min-height: 80px;
    }
    
    .fc-daygrid-day-number {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .hijri-date-small {
        font-size: 0.625rem !important;
    }
    
    .fc-event {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .calendar-page-bootstrap .btn-group {
        flex-wrap: wrap;
    }
}

/* Prayer Times Widget */
/* Prayer Times Widget Enhancements */
#prayerTimesWidget .fa-spin {
    animation: fa-spin 1s infinite linear;
}

#refreshPrayerTimes {
    transition: transform 0.3s;
}

#refreshPrayerTimes:hover {
    transform: rotate(90deg);
}

#prayerLocation {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Ensure next prayer text is readable on dark gradient */
#nextPrayerName,
#nextPrayerTime,
#countdownText {
    color: #f6f8f7 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Temporary: hide navbar location button */
#locationBtn {
    display: none !important;
}

.prayer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.prayer-row:last-child { border-bottom: none; }

.prayer-row.current {
    background: var(--primary-light);
    margin: 0 -1.5rem;
    padding: 0.75rem 1.5rem;
    border-left: 4px solid var(--primary);
}

.prayer-name {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.prayer-row.current .prayer-name { color: var(--primary); }

.prayer-time {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
}

/* Dark Mode */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-body: #0f1419;
    --bg-card: #111827;
    --bg-glass: rgba(17, 24, 39, 0.9);
    --primary-light: rgba(15, 76, 58, 0.15);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
}

/* Dark Mode - FAQ Section */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .bg-gray-200 {
    background-color: #4b5563 !important;
}

[data-theme="dark"] .text-emerald-900 {
    color: #60d4a8 !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* Dark Mode - Dhikr Counter */
[data-theme="dark"] .bg-cream {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .border-emerald-100 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark Mode - Tailwind class overrides for FAQ and Dhikr */
[data-theme="dark"] .dark\:bg-gray-800,
[data-theme="dark"] .dark\:bg-gray-700 {
    background-color: #374151 !important;
}

[data-theme="dark"] .dark\:bg-gray-700 {
    background-color: #4b5563 !important;
}

[data-theme="dark"] .dark\:text-emerald-400 {
    color: #60d4a8 !important;
}

[data-theme="dark"] .dark\:text-emerald-600 {
    color: #34d399 !important;
}

[data-theme="dark"] .dark\:text-gray-200,
[data-theme="dark"] .dark\:text-gray-300 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .dark\:text-gray-400 {
    color: #9ca3af !important;
}

[data-theme="dark"] .dark\:text-gray-500 {
    color: #6b7280 !important;
}

[data-theme="dark"] .dark\:border-gray-600,
[data-theme="dark"] .dark\:border-gray-700 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .dark\:hover\:bg-gray-700:hover {
    background-color: #4b5563 !important;
}

/* Force dark mode styles for FAQ category buttons */
[data-theme="dark"] button.bg-gray-100:not(.bg-emerald-900):not(.bg-emerald-600) {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] button.bg-gray-100.bg-emerald-900,
[data-theme="dark"] button.bg-gray-100.bg-emerald-600 {
    background-color: #059669 !important;
    color: white !important;
}

/* Dark mode - FAQ section specific fixes */
[data-theme="dark"] .faq-section button,
[data-theme="dark"] [x-data*="faqs"] button {
    transition: all 0.2s !important;
}

[data-theme="dark"] [x-data*="faqs"] button.bg-gray-100 {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] [x-data*="faqs"] button.bg-emerald-900,
[data-theme="dark"] [x-data*="faqs"] button.bg-emerald-600 {
    background-color: #059669 !important;
    color: white !important;
    border: 1px solid #059669 !important;
}

/* Dark mode - Input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"] {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="search"]:focus {
    background-color: #4b5563 !important;
    border-color: #60d4a8 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(96, 212, 168, 0.2) !important;
}

/* Dark mode - Dhikr counter specific */
[data-theme="dark"] [x-data*="dhikr"] {
    background-color: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] [x-data*="dhikr"] .text-emerald-900 {
    color: #60d4a8 !important;
}

[data-theme="dark"] [x-data*="dhikr"] .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] [x-data*="dhikr"] .text-gray-600 {
    color: #9ca3af !important;
}

[data-theme="dark"] [x-data*="dhikr"] .bg-gray-200 {
    background-color: #4b5563 !important;
}

[data-theme="dark"] [x-data*="dhikr"] button.bg-emerald-900 {
    background-color: #059669 !important;
}

[data-theme="dark"] [x-data*="dhikr"] button.bg-gold {
    background-color: #d97706 !important;
    color: white !important;
}

[data-theme="dark"] button.bg-gold {
    background-color: #d97706 !important;
    color: white !important;
}

[data-theme="dark"] button.bg-gold:hover {
    background-color: #b45309 !important;
}

/* Ensure all text is readable in dark mode */
[data-theme="dark"] * {
    color: inherit;
}

/* Dark mode - Make sure translated content is readable */
[data-theme="dark"] .goog-te-menu-value,
[data-theme="dark"] .goog-te-menu-value span {
    color: var(--text-main) !important;
}

/* Light mode - FAQ answer text - ensure readability */
body:not([data-theme="dark"]) [x-data*="faqs"] .text-gray-700,
body:not([data-theme="dark"]) [x-data*="faqs"] .text-gray-900,
body:not([data-theme="dark"]) [x-data*="faqs"] div[x-show] p,
body:not([data-theme="dark"]) [x-data*="faqs"] p {
    color: #111827 !important;
    font-weight: 400 !important;
}

/* Light mode - FAQ question text */
body:not([data-theme="dark"]) [x-data*="faqs"] .text-gray-900 {
    color: #111827 !important;
}

body:not([data-theme="dark"]) [x-data*="faqs"] .text-emerald-900 {
    color: #064e3b !important;
}

/* Light mode - FAQ title */
body:not([data-theme="dark"]) [x-data*="faqs"] h3 {
    color: #111827 !important;
}

/* Dark mode - FAQ answer text - MAKE VERY READABLE */
[data-theme="dark"] [x-data*="faqs"] .text-gray-700,
[data-theme="dark"] [x-data*="faqs"] .text-gray-900,
[data-theme="dark"] [x-data*="faqs"] div[x-show] p,
[data-theme="dark"] [x-data*="faqs"] .faq-answer-section p,
[data-theme="dark"] [x-data*="faqs"] .faq-answer-section *,
[data-theme="dark"] [x-data*="faqs"] p {
    color: #e5e7eb !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-emerald-900 {
    color: #60d4a8 !important;
}

[data-theme="dark"] [x-data*="faqs"] h3 {
    color: #60d4a8 !important;
}

/* Override inline styles in dark mode */
[data-theme="dark"] [x-data*="faqs"] p[style*="color"] {
    color: #e5e7eb !important;
}

/* Force all answer content to be readable in dark mode */
[data-theme="dark"] [x-data*="faqs"] div[x-show="openFaq === faq.id"] p,
[data-theme="dark"] [x-data*="faqs"] div[x-show="openFaq === faq.id"] *:not(.faq-question-text):not(.faq-title) {
    color: #e5e7eb !important;
}

/* FAQ Container */
.faq-container {
    background-color: #ffffff !important;
}

[data-theme="dark"] .faq-container {
    background-color: #1f2937 !important;
}

/* FAQ answer text - Light mode */
.faq-answer-text {
    color: #111827 !important;
}

[data-theme="dark"] .faq-answer-text {
    color: #e5e7eb !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Override all FAQ text colors for maximum readability */
[data-theme="dark"] [x-data*="faqs"] * {
    color: inherit;
}

/* Force dark mode colors for FAQ elements */
[data-theme="dark"] [x-data*="faqs"] .text-gray-900 {
    color: #d1d5db !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-gray-700 {
    color: #d1d5db !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-emerald-900 {
    color: #60d4a8 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-white {
    background-color: #1f2937 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-50 {
    background-color: transparent !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-800 {
    background-color: #1f2937 !important;
}

[data-theme="dark"] [x-data*="faqs"] .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Additional FAQ dark mode fixes */
[data-theme="dark"] [x-data*="faqs"] .bg-white {
    background-color: #1f2937 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-50 {
    background-color: transparent !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-100 {
    background-color: #374151 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-200 {
    background-color: #4b5563 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-700 {
    background-color: #374151 !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-gray-800 {
    background-color: #1f2937 !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-gray-200 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-gray-300 {
    color: #d1d5db !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-gray-400 {
    color: #9ca3af !important;
}

[data-theme="dark"] [x-data*="faqs"] .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] [x-data*="faqs"] .border-gray-700 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] [x-data*="faqs"] .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

[data-theme="dark"] [x-data*="faqs"] .hover\:bg-gray-700:hover {
    background-color: #4b5563 !important;
}

/* Light mode - FAQ question button background */
[x-data*="faqs"] button.bg-gray-50 {
    background-color: #f9fafb !important;
}

[data-theme="dark"] [x-data*="faqs"] button.bg-gray-50 {
    background-color: transparent !important;
}

/* Light mode - FAQ answer section background */
[x-data*="faqs"] .bg-white {
    background-color: #ffffff !important;
}

[data-theme="dark"] [x-data*="faqs"] .bg-white {
    background-color: #1f2937 !important;
}

/* Dark mode - Empty state */
[data-theme="dark"] [x-data*="faqs"] .text-gray-500 {
    color: #9ca3af !important;
}

[data-theme="dark"] body {
    background-color: var(--bg-body);
    color: var(--text-main);
    background-image:
        radial-gradient(at 0% 0%, rgba(197, 160, 89, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(15, 76, 58, 0.1) 0px, transparent 50%);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .navbar-brand {
    color: #f8fafc;
}

[data-theme="dark"] .nav-link {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.06);
}

/* Dark Mode - Active Nav Menu Link */
[data-theme="dark"] .nav-menu-link.nav-active,
[data-theme="dark"] .nav-menu-link[style*="color: rgb(96, 212, 168)"] {
    color: #60d4a8 !important;
    background: rgba(15, 76, 58, 0.2) !important;
}

/* Nav Menu Link Hover */
.nav-menu-link:hover {
    background: rgba(15, 76, 58, 0.05) !important;
}

[data-theme="dark"] .nav-menu-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .navbar-noor {
    background: rgba(17, 24, 39, 0.9);
    border-color: var(--border-color);
}

[data-theme="dark"] .bento-card,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .calendar-card-modern,
[data-theme="dark"] .fc .fc-daygrid-day,
[data-theme="dark"] .fc-theme-standard .fc-list,
[data-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    background: var(--bg-card) !important;
    color: var(--text-main);
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-theme="dark"] .fc .fc-daygrid-day-number {
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-day-other {
    background: var(--bg-body) !important;
}

[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-frame {
    background: var(--bg-body) !important;
}

[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number {
    color: rgba(148, 163, 184, 0.3) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .fc .fc-day-today {
    background: rgba(15, 76, 58, 0.2) !important;
    border-color: rgba(15, 76, 58, 0.5) !important;
}

[data-theme="dark"] .fc .fc-event {
    background: rgba(15, 76, 58, 0.6) !important;
    border-color: rgba(15, 76, 58, 0.8) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .fc .fc-event.friday-event {
    background: rgba(197, 160, 89, 0.6) !important;
    border-color: rgba(197, 160, 89, 0.8) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .fc .fc-button {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] .list-group-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-content {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header .modal-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .modal-body {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-main) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .calendar-page-bootstrap {
    background: var(--bg-body);
}

[data-theme="dark"] .calendar-header-modern {
    background: linear-gradient(135deg, #111827 0%, #0b1020 100%);
}

[data-theme="dark"] .calendar-header-actions,
[data-theme="dark"] .calendar-nav-controls,
[data-theme="dark"] .view-switcher {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .nav-btn-modern,
[data-theme="dark"] .view-btn {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .nav-btn-modern:hover,
[data-theme="dark"] .view-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

[data-theme="dark"] .view-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

[data-theme="dark"] .btn-modern-primary {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
}

[data-theme="dark"] .btn-modern-primary:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .calendar-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .calendar-title,
[data-theme="dark"] .calendar-subtitle {
    color: white;
}

[data-theme="dark"] .fc .fc-toolbar-title {
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-col-header-cell {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-scrollgrid {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-scrollgrid-section > table {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day-frame {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .fc .fc-popover {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-popover-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-popover-body {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-more-link {
    color: var(--text-main) !important;
}

[data-theme="dark"] .fc .fc-more-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .fc .fc-list-event:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .fc .fc-list-event-time {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .fc .fc-timegrid-slot-label {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .fc .fc-timegrid-slot {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc .fc-timegrid-event {
    background: rgba(15, 76, 58, 0.6) !important;
    border-color: rgba(15, 76, 58, 0.8) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .fc .fc-daygrid-event-dot {
    border-color: rgba(15, 76, 58, 0.8) !important;
}

[data-theme="dark"] .fc .fc-day-today .hijri-date-small {
    color: rgba(148, 163, 184, 0.8) !important;
}

[data-theme="dark"] .widget-modern,
[data-theme="dark"] .widget-header {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .widget-header {
    background: linear-gradient(135deg, rgba(15, 76, 58, 0.35) 0%, rgba(197, 160, 89, 0.2) 100%);
}

[data-theme="dark"] .prayer-item-modern,
[data-theme="dark"] .quick-action-item {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .prayer-item-modern:hover,
[data-theme="dark"] .quick-action-item:hover {
    background: rgba(15, 76, 58, 0.3);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-main);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text {
    background: #0b1020;
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] footer,
[data-theme="dark"] footer.bg-white {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] footer h5,
[data-theme="dark"] footer h6 {
    color: var(--text-main) !important;
}

[data-theme="dark"] footer h6 {
    color: var(--text-main) !important;
    opacity: 1 !important;
}

[data-theme="dark"] footer .text-muted,
[data-theme="dark"] footer small.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] footer a.text-muted,
[data-theme="dark"] footer a.text-decoration-none {
    color: var(--text-muted) !important;
}

[data-theme="dark"] footer a.text-muted:hover,
[data-theme="dark"] footer a.text-decoration-none:hover {
    color: var(--text-main) !important;
}

[data-theme="dark"] footer .text-primary {
    color: #60d4a8 !important;
}

[data-theme="dark"] footer hr {
    border-color: var(--border-color) !important;
}

/* Dark Mode - Navbar Simple Fix */
[data-theme="dark"] #main-navbar,
[data-theme="dark"] nav#main-navbar {
    background: rgba(17, 24, 39, 0.95) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] #main-navbar a,
[data-theme="dark"] nav#main-navbar a {
    color: var(--text-main) !important;
}

[data-theme="dark"] #main-navbar .navbar-brand,
[data-theme="dark"] nav#main-navbar .navbar-brand {
    color: #f8fafc !important;
}

[data-theme="dark"] #main-navbar button,
[data-theme="dark"] nav#main-navbar button {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #main-navbar input,
[data-theme="dark"] nav#main-navbar input {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Dark Mode - Text Colors */
[data-theme="dark"] .text-dark {
    color: var(--text-main) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-primary {
    color: #60d4a8 !important;
}

[data-theme="dark"] .badge.bg-white {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bento-card {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bento-card a {
    color: var(--text-main) !important;
}

[data-theme="dark"] .bento-card a:hover {
    color: var(--primary) !important;
}

[data-theme="dark"] .card {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
    color: var(--text-main) !important;
}

[data-theme="dark"] .lead {
    color: var(--text-main) !important;
}

[data-theme="dark"] .small {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .bg-light {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .bg-white {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

/* Dark Mode - Search Button */
[data-theme="dark"] form[role="search"] button[type="submit"],
[data-theme="dark"] .btn-success {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] form[role="search"] button[type="submit"]:hover,
[data-theme="dark"] .btn-success:hover {
    background: #0a3528 !important;
    border-color: #0a3528 !important;
}

/* Mobile - Comprehensive Responsive Styles */
@media (max-width: 991px) {
    /* Container adjustments */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Typography */
    h1 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.25rem, 4vw, 2rem) !important; }
    h3 { font-size: clamp(1.125rem, 3.5vw, 1.75rem) !important; }
    h4 { font-size: clamp(1rem, 3vw, 1.5rem) !important; }
    h5 { font-size: clamp(0.9375rem, 2.5vw, 1.25rem) !important; }
    h6 { font-size: clamp(0.875rem, 2vw, 1rem) !important; }
    
    .display-1 { font-size: clamp(2rem, 8vw, 5rem) !important; }
    .display-2 { font-size: clamp(1.75rem, 7vw, 4.5rem) !important; }
    .display-3 { font-size: clamp(1.5rem, 6vw, 4rem) !important; }
    .display-4 { font-size: clamp(1.25rem, 5vw, 3.5rem) !important; }
    
    /* Bento Grid */
    .bento-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem;
    }
    .bento-col-2 { grid-column: span 1; }
    .bento-row-2 { grid-row: span 1; }
    
    /* Cards */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    /* Buttons - Touch targets */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .btn-sm {
        min-height: 40px;
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .btn-lg {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Widgets */
    .widget-modern {
        margin-bottom: 1rem;
    }
    
    .widget-header {
        padding: 1rem 1.25rem;
    }
    
    .widget-body {
        padding: 1rem !important;
    }
    
    /* Prayer Widget */
    .prayer-item-modern {
        padding: 0.75rem 0.875rem;
    }
    
    .prayer-name-modern {
        font-size: 0.875rem;
    }
    
    .prayer-time-modern {
        font-size: 1rem;
    }
    
    /* Hijri Display */
    .hijri-display {
        padding: 1rem;
        min-height: 100px;
    }
    
    .hijri-date-large {
        font-size: 1.25rem;
    }
    
    /* Quick Actions */
    .quick-action-item {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
    
    /* Footer */
    footer {
        padding: 2rem 0 !important;
    }
    
    footer .row {
        margin-bottom: 1.5rem;
    }
    
    footer .col-md-4 {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    /* Additional mobile optimizations */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Spacing */
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.5rem 0 !important;
    }
    
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem;
    }
    
    /* Cards */
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Buttons */
    .btn {
        min-height: 40px;
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    /* Extra small devices */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Buttons */
    .btn {
        min-height: 36px;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .btn-sm {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

@media (max-width: 375px) {
    /* Smallest devices */
    .container {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }
    
    .btn {
        min-height: 32px;
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
    }
}

/* Google Translate Language Selector */
.custom-lang-selector,
#customLanguageSelector {
    position: relative !important;
    display: inline-block !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

.navbar .d-flex .custom-lang-selector,
.navbar .d-flex #customLanguageSelector {
    position: relative !important;
    display: inline-block !important;
    flex: none !important;
    align-self: auto !important;
    z-index: 1000 !important;
}

#langToggleBtn {
    position: relative !important;
    z-index: 1 !important;
}

.lang-dropdown,
#langDropdown {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    z-index: 1050 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Ensure dropdown doesn't overflow on mobile */
@media (max-width: 576px) {
    .lang-dropdown,
    #langDropdown {
        right: auto !important;
        left: 0 !important;
        transform: translateX(0) !important;
    }
}

.lang-dropdown[style*="display: none"],
#langDropdown[style*="display: none"] {
    display: none !important;
}

.lang-dropdown[style*="display: block"],
#langDropdown[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.lang-option,
.lang-dropdown .lang-option,
#langDropdown .lang-option,
.lang-dropdown a,
#langDropdown a {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    text-decoration: none !important;
    color: #212529 !important;
    transition: all 0.2s !important;
    border-bottom: 1px solid #f1f3f5 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover {
    background: #f8f9fa;
    color: #0d6efd;
    text-decoration: none;
}

.lang-option.active {
    background: #e7f5ff;
    color: #0d6efd;
    font-weight: 600;
}

.lang-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-code {
    font-size: 0.75rem;
    color: #6c757d;
    background: #f1f3f5;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.lang-option.active .lang-code {
    background: #0d6efd;
    color: white;
}

/* Prevent Google Translate from translating only language selector elements */
#customLanguageSelector,
#langDropdown,
#langToggleBtn,
#customLanguageSelector *,
#langDropdown *,
#langToggleBtn * {
    translate: no !important;
}

/* Prevent Google Translate from translating prayer names */
.prayer-name,
.prayer-name *,
#nextPrayerName,
#heroNextName,
[data-prayer-key] {
    translate: no !important;
    -webkit-translate: no !important;
}

/* Prevent Google Translate from translating day names - they are proper nouns */
.calendar-weekdays .weekday,
.calendar-weekdays .weekday *,
.weekday.notranslate,
.weekday[translate="no"],
.text-secondary.notranslate,
.text-secondary[translate="no"] {
    translate: no !important;
    -webkit-translate: no !important;
}

/* Force calendar weekday headers to stay notranslate */
.calendar-weekdays .weekday {
    translate: no !important;
    -webkit-translate: no !important;
}

/* Hide Google Translate Banner - Complete Hide */
.goog-te-banner-frame,
.goog-te-banner,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate,
#google_translate_element + div,
div[id*="google_translate"],
div[class*="goog-te-banner"],
div[class*="goog-te-menu"],
.goog-te-menu-frame,
.goog-te-menu-value,
.goog-te-menu2,
.goog-te-menu-frame-skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Hide Google Translate top bar completely */
body {
    top: 0 !important;
    padding-top: 0 !important;
}

body > .skiptranslate {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure page content is not pushed down */
body.translated-ltr,
body.translated-rtl {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Custom py-5 padding-top override - only padding-top to 1.5rem, keep padding-bottom as 3rem */
.container.py-5,
.py-5 {
    padding-top: 1.5rem !important;
}

[data-theme="dark"] .lang-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .lang-option {
    color: var(--text-main);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .lang-option:hover {
    background: rgba(15, 76, 58, 0.3);
    color: var(--primary);
}

[data-theme="dark"] .lang-option.active {
    background: rgba(15, 76, 58, 0.4);
    color: var(--primary);
}

[data-theme="dark"] .lang-code {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

[data-theme="dark"] .lang-option.active .lang-code {
    background: var(--primary);
    color: white;
}

/* ========================================
   Blog & Article Styles
   ======================================== */

/* Blog Card Hover Effects */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.blog-preview-card {
    transition: all 0.3s ease;
}

.blog-preview-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Article Content Styling */
.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-main);
}

.article-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-light);
}

.article-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.article-content p {
    margin-bottom: 1.25rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--primary);
}

/* Daily Insight Section */
.daily-insight-section {
    background: linear-gradient(180deg, transparent 0%, rgba(15, 76, 58, 0.02) 100%);
}

.daily-insight-content {
    font-size: 1.05rem;
    line-height: 1.75;
}

.daily-insight-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.daily-insight-content p {
    margin-bottom: 1rem;
    color: var(--text-main);
}

/* Blog Pagination */
.pagination .page-link {
    border: none;
    color: var(--primary);
    background: var(--bg-card);
    margin: 0 0.25rem;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    color: white;
}

/* Blog Category Badge */
.badge.bg-primary-light {
    background-color: var(--primary-light) !important;
}

/* Dark Theme Blog Styles */
[data-theme="dark"] .article-content {
    color: var(--text-main);
}

[data-theme="dark"] .daily-insight-content p {
    color: var(--text-main);
}

[data-theme="dark"] .blog-card {
    background: var(--bg-card);
}

[data-theme="dark"] .article-content blockquote {
    background: rgba(15, 76, 58, 0.2);
}

/* Responsive Blog Grid */
@media (max-width: 768px) {
    .article-content {
        font-size: 1rem;
    }
    
    .daily-insight-content {
        font-size: 1rem;
    }
}

/* Modern Frontend Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Prayer Times Section Alignment - Now uses col-lg-8 to match Blog Section */
/* No additional CSS needed as both sections now use the same Bootstrap grid structure */

/* Bottom Navigation Spacing (for mobile) */
@media (max-width: 768px) {
    body {
        padding-bottom: 64px; /* Space for bottom nav */
    }
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

* {
    box-sizing: border-box;
}

/* Ensure containers don't overflow */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Touch-friendly improvements */
button,
a,
.btn,
.nav-link,
.nav-menu-link {
    -webkit-tap-highlight-color: rgba(15, 76, 58, 0.1);
    touch-action: manipulation;
}

/* Smooth scrolling on mobile */
@media (max-width: 768px) {
    html {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Prevent text size adjustment on iOS */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}