@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');

/* General Styles */
body {
    background-color: #f0f4f8; /* Light background */
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem; /* Smaller font size for TV devices */
    color: #333; /* Dark text color */
}

.dark-mode {
    background-color: #1e1e1e; /* Darker background for Dark Mode */
    color: #f5f5f5; /* Lighter text color for Dark Mode */
}

.container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px; /* Padding for container */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

.dark-mode .container {
    background-color: rgba(30, 30, 30, 0.9);
}

/* Header Styles */
.header {
    text-align: center;
    margin-bottom: 10px; /* Margin bottom for header */
}

.header img {
    max-width: 250px; /* New max width for logo */
    vertical-align: middle;
}

.header h1 {
    display: inline;
    font-size: 1.2em; /* Smaller font size */
    margin-left: 10px; /* Margin left for H1 */
    vertical-align: middle;
}

/* Footer Styles */
.footer {
    text-align: center;
    margin-top: 10px; /* Margin top for footer */
    font-size: 0.8rem; /* Smaller font size for footer */
}

.footer img {
    max-width: 20px;
    vertical-align: middle;
}

/* Table Styles */
.table-hover tbody tr:hover {
    background-color: #e0f7fa !important; /* Light highlight for hover */
    color: #000000;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: #37474f !important; /* Darker highlight for hover in Dark Mode */
    color: #ffffff;
}

.table th, .table td {
    text-align: left; /* Left aligned */
    vertical-align: middle;
    padding: 5px; /* Padding for table cells */
    font-size: 0.9rem; /* Smaller font size */
}

.table thead th {
    background-color: #007bff; /* Bright blue for table header */
    color: #ffffff;
}

.dark-mode .table thead th {
    background-color: #1e88e5; /* Darker blue for table header in Dark Mode */
}

/* Highlight Styles */
.highlight {
    background-color: #d0f0c0 !important; /* Light green for highlight */
}

.current-day {
    background-color: #003366 !important; /* Dark blue for the current day */
    color: #ffffff !important; /* White text color for better readability */
}

/* Islamic Title Styles */
.islamic-title {
    font-family: 'El Messiri', sans-serif;
    font-size: 1.5em; /* Smaller font size */
    color: #007bff; /* Bright blue */
    text-align: center;
    margin-bottom: 10px; /* Margin bottom for Islamic title */
}

.dark-mode .islamic-title {
    color: #29b6f6; /* Lighter blue for Dark Mode */
}

/* Left Title Styles */
.left-title {
    text-align: left;
    margin-bottom: 10px; /* Margin bottom for left title */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-font {
    font-family: 'Roboto', sans-serif; /* New font for heading */
}

.arimo-font {
    font-family: 'Arimo', sans-serif; /* Arimo font for heading */
}

/* Dark Mode Toggle Styles */
.toggle-dark-mode {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.9rem; /* Smaller font size for Dark Mode */
    margin-bottom: 10px; /* Margin bottom for Dark Mode toggle */
}

.toggle-dark-mode i {
    margin-left: 10px;
}

/* Dark Mode Table Styles */
.dark-mode .table th, .dark-mode .table td {
    color: #f5f5f5; /* Lighter text color for table cells in Dark Mode */
}

.dark-mode .table-hover tbody tr:hover {
    background-color: #607d8b !important; /* Darker highlight for hover in Dark Mode */
    color: #ffffff;
}

.dark-mode .footer {
    color: #b0bec5; /* Light text color for footer in Dark Mode */
}

/* Top Left and Right Image Styles */
.top-left, .top-right {
    position: absolute;
    top: 20px;
    width: 150px; /* Adjust image width */
    height: auto; /* Auto adjust height */
}

.top-left {
    left: 10px;
}

.top-right {
    right: 10px;
}

.header img {
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .top-left, .top-right {
        width: 100px; /* Smaller image width for smaller screens */
    }
    .header img {
        margin-top: 50px; /* Margin top for smaller screens */
    }
}