/* Basic Reset & Streamlit-like Defaults */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #f0f2f6; /* Streamlit-like light gray background */
    color: #31333F; /* Streamlit default text color */
    line-height: 1.6;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    margin-bottom: 0.5rem; /* Streamlit uses rem for spacing */
}

a {
    color: #0072C6; /* A common blue for links */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* App Layout */
.app-container {
    /* display: flex; REMOVED for single column */
    min-height: calc(100vh - 40px); /* Full height minus footer */
    max-width: 1000px; /* Adjusted max-width for single column, can be wider if preferred */
    margin: 0 auto; /* Center the app container */
    padding: 0 1rem; /* Add some horizontal padding to the container */
}

/* .sidebar styles REMOVED */

.main-content {
    /* flex-grow: 1; REMOVED */
    padding: 1.5rem 0; /* Adjusted padding, especially horizontal */
    /* overflow-y: auto; This might not be needed on main-content directly anymore */
}

/* Page Controls Area at the top of main content */
.page-controls {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.page-controls h4 {
    color: #555;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.page-controls section:first-child h4 {
    margin-top: 0;
}
.page-controls section {
    margin-bottom: 1.5rem;
}
.page-controls section:last-child {
    margin-bottom: 0;
}


/* Main Header Content (Arabic Greeting, Title, YouTube Link) */
.main-header-content {
    margin-bottom: 2rem;
}
.arabic-greeting {
    text-align: right;
    direction: rtl;
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}
.main-content h1 {
    font-size: 2rem; /* Larger main title */
    font-weight: 700;
    color: #262730; /* Darker color for main title */
    margin-bottom: 0.5rem;
}
.youtube-link {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.youtube-link a {
    color: #FF4B4B; /* Streamlit's red-ish accent */
    font-weight: 600;
}

/* Language Selection & Controls */
.styled-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    appearance: none; /* Remove default arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    cursor: pointer;
}
.current-view-info {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
}

/* Language Links List (similar to tabs) */
.language-links {
    display: flex;
    flex-direction: row; /* Horizontal layout for language buttons */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem; /* Space below language links */
}
/* .language-button uses .tab-button styles */

/* Tabs Placeholder */
.tabs {
    display: flex;
    flex-direction: row; /* Horizontal layout for Calendar/Search tabs */
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem; /* Space below tabs */
}
.tab-button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    text-align: center;
    color: #31333F;
    background-color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.tab-button:hover {
    background-color: #f0f2f6;
    text-decoration: none;
}
.tab-button.active {
    background-color: #e6f2ff; /* Light blue for active tab */
    border-color: #0072C6;
    color: #0072C6;
    font-weight: 600;
}
.admin-login-sidebar {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}
.admin-login-sidebar a {
    margin-right: 5px;
}

/* Sidebar form elements styling - now page control forms */
.control-form-section { /* Common class for calendar and search form sections */
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.control-form-section h4 {
    color: #555;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.styled-input, input[type="date"].styled-input, input[type="search"].styled-input {
    /* width: 100%; No longer full width by default, can be adjusted */
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-right: 0.5rem; /* Space between input and button if inline */
    /* margin-bottom: 0.5rem; /* Space below input if button is separate */
}

.search-form { /* Specific styling for search form to be inline */
    display: flex;
    align-items: center;
}
.search-form .styled-input {
    flex-grow: 1; /* Input takes available space */
    margin-bottom: 0; /* Remove bottom margin if inline with button */
}


.styled-button, button.styled-button {
    /* width: 100%; No longer full width by default */
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    text-align: center;
    color: #31333F;
    background-color: #f0f2f6; /* Light gray, similar to inactive tab */
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.styled-button:hover {
    background-color: #e6eaf0;
    text-decoration: none;
}


/* Content Area */
#content-area h3 {
    font-size: 1.5rem;
    color: #262730;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

/* Translation Item Styling (Card-like) */
.translation-item {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 0.375rem; /* 6px */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.item-separator { /* Style for the <hr> between items */
    border: 0;
    height: 1px;
    background-color: #e6e6e6; /* Subtle separator */
    margin-top: 0; /* Reset margin if .translation-item already has bottom margin */
    margin-bottom: 1.5rem; /* Space before next item */
}
.translation-item:last-child + .item-separator { /* Hide separator after the last item */
    display: none;
}


.translation-item h4 {
    font-size: 1.25rem; /* Date/Location */
    font-weight: 600;
    color: #31333F;
    margin-bottom: 0.75rem;
}

.video-iframes iframe {
    margin-bottom: 1rem;
    max-width: 100%;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
}

.text-content {
    font-size: 1rem;
    color: #31333F;
    margin-top: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap; /* Preserve newlines from <br /> */
}
.text-content p:last-child { /* If text_content_html wraps in <p> */
    margin-bottom: 0;
}

.share-links {
    margin-top: 1rem;
}
.share-links img {
    vertical-align: middle;
    width: 22px;
    height: 22px;
}

/* Pagination Styling */
.pagination-nav {
    margin-top: 2rem;
    text-align: center;
}
.pagination {
    display: inline-flex; /* Use flex for better alignment */
    list-style: none;
    padding-left: 0;
    margin: 0;
    border-radius: 0.25rem;
    overflow: hidden; /* To make border-radius work with children */
}
.pagination > li > a,
.pagination > li > span {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #0072C6;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px; /* Create shared borders */
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
}
.pagination > li > a:hover {
    background-color: #e9ecef;
}
.pagination > li.disabled > span {
    color: #6c757d;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed;
}
.pagination > li.active > a, /* If you add an active class */
.pagination > li.active > span {
    color: #fff;
    background-color: #0072C6;
    border-color: #0072C6;
}


/* Footer */
footer {
    text-align: center;
    padding: 0.75rem;
    background-color: #e8eaed; /* Lighter gray for footer */
    color: #555;
    font-size: 0.85rem;
    border-top: 1px solid #d1d1d1;
}
footer a {
    color: #0072C6;
}

/* Error Messages (from login page) */
.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

/* Login Page Specifics (can be moved to a separate CSS if it grows) */
.login-container { /* Assuming login.html might have a wrapper */
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.login-container h1, .login-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #31333F;
}
.login-container form div {
    margin-bottom: 1rem;
}
.login-container form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.login-container form input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    font-size: 1rem;
}
.login-container form button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
    background-color: #FF4B4B; /* Streamlit red-ish accent */
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.login-container form button[type="submit"]:hover {
    background-color: #E03A3A;
}
.login-container nav { /* For "Back to Home" link */
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* Flashed Messages Styling */
.flashed-messages {
    margin-bottom: 1rem;
}
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}


/* Admin Area Specifics */
.admin-area .sidebar {
    background-color: #e8eaed; /* Slightly different sidebar for admin */
}
.admin-nav-list {
    list-style: none;
    padding-left: 0;
}
.admin-nav-list li a {
    display: block;
    padding: 0.5rem 0;
    color: #31333F;
    text-decoration: none;
}
.admin-nav-list li a:hover {
    color: #FF4B4B;
    text-decoration: none;
}
.admin-nav-list hr {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid #d1d1d1;
}

.admin-main-content h2 {
    font-size: 1.75rem;
    color: #262730;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.75rem;
}

.admin-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.admin-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f2f6;
}
.admin-list li:last-child {
    border-bottom: none;
}
.admin-list li a {
    text-decoration: none;
}
.admin-list.file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-like, .styled-button.submit-button { /* General button styling for admin links/buttons */
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #FF4B4B;
    color: white;
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.button-like:hover, .styled-button.submit-button:hover {
    background-color: #E03A3A;
    color: white;
    text-decoration: none;
}
.button-like.edit-button {
    background-color: #0072C6;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}
.button-like.edit-button:hover {
    background-color: #0056b3;
}


.admin-form div {
    margin-bottom: 1rem;
}
.admin-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.admin-form .styled-select, 
.admin-form .styled-input, 
.admin-form .styled-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: #fff; /* Ensure inputs are white */
}
.admin-form .styled-textarea {
    min-height: 100px;
    font-family: inherit; /* Ensure textarea uses the same font */
}
.admin-form small {
    font-size: 0.8rem;
    color: #555;
    display: block;
    margin-top: 0.25rem;
}

.admin-dashboard-links li {
    margin-bottom: 0.5rem;
}