/* =================================================================
 * Alhoshan EstateOS - Frontend Stylesheet v1.2 (Final Corrected)
 * ================================================================= */

/* --- 1. Variables & Global Styles --- */
:root {
    --alhoshanos-primary-color: #003366; /* كحلي */
    --alhoshanos-secondary-color: #FFA500; /* برتقالي */
    --alhoshanos-light-bg: #f5f7fa;
    --alhoshanos-dark-bg: #1a202c;
    --alhoshanos-card-bg: #ffffff;
    --alhoshanos-card-bg-dark: #2d3748;
    --alhoshanos-text-light: #edf2f7;
    --alhoshanos-text-dark: #2d3748;
    --alhoshanos-text-muted: #718096;
    --alhoshanos-border-color: #e2e8f0;
    --alhoshanos-border-color-dark: #4a5568;
    --alhoshanos-sidebar-width: 260px;

    /* Status Colors */
    --status-success-bg: #f6ffed;
    --status-success-text: #389e0d;
    --status-warning-bg: #fffbe6;
    --status-warning-text: #d46b08;
    --status-error-bg: #fff1f0;
    --status-error-text: #cf1322;
    --status-info-bg: #e6f7ff;
    --status-info-text: #096dd9;
    --status-neutral-bg: #fafafa;
    --status-neutral-text: #595959;
}

body {
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    background-color: var(--alhoshanos-light-bg);
    color: var(--alhoshanos-text-dark);
}

body.dark-mode {
    background-color: var(--alhoshanos-dark-bg);
    color: var(--alhoshanos-text-light);
    --alhoshanos-border-color: var(--alhoshanos-border-color-dark);
}

/* --- 2. Main Layout --- */
#alhoshanos-app-wrapper {
    display: flex;
    direction: rtl;
}

#alhoshanos-sidebar {
    width: var(--alhoshanos-sidebar-width);
    background-color: var(--alhoshanos-primary-color);
    color: var(--alhoshanos-text-light);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
}

#alhoshanos-main-panel {
    width: calc(100% - var(--alhoshanos-sidebar-width));
    margin-right: var(--alhoshanos-sidebar-width);
    transition: margin-right 0.3s ease-in-out;
}

/* Collapsed Sidebar State */
#alhoshanos-app-wrapper.sidebar-collapsed #alhoshanos-sidebar {
    transform: translateX(var(--alhoshanos-sidebar-width));
}
#alhoshanos-app-wrapper.sidebar-collapsed #alhoshanos-main-panel {
    width: 100%;
    margin-right: 0;
}

/* --- 3. Sidebar Styles --- */
.alhoshanos-sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.alhoshanos-logo { max-width: 150px; height: auto; }
.alhoshanos-nav-group { margin-bottom: 20px; }
.alhoshanos-nav-title { padding: 10px 25px; font-size: 12px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.alhoshanos-sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.alhoshanos-nav-link { display: flex; align-items: center; padding: 12px 25px; color: #e0e0e0; text-decoration: none; transition: background-color 0.2s, color 0.2s; border-right: 4px solid transparent; }
.alhoshanos-nav-link:hover,
.alhoshanos-nav-link.active {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--alhoshanos-text-light);
    border-right-color: var(--alhoshanos-secondary-color);
}
.alhoshanos-nav-icon { margin-left: 15px; font-size: 1.2em; line-height: 1; }
.alhoshanos-sidebar-footer { margin-top: auto; padding: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.alhoshanos-sidebar-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }

/* --- 4. Topbar Styles --- */
#alhoshanos-topbar {
    background-color: var(--alhoshanos-card-bg);
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--alhoshanos-border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}
body.dark-mode #alhoshanos-topbar { background-color: var(--alhoshanos-card-bg-dark); }
#alhoshanos-sidebar-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--alhoshanos-text-dark); }
body.dark-mode #alhoshanos-sidebar-toggle { color: var(--alhoshanos-text-light); }
.alhoshanos-topbar-left, .alhoshanos-topbar-right { display: flex; align-items: center; gap: 20px; }

/* --- 5. Content Elements (Cards, Tables, Forms) --- */
#alhoshanos-content-area { padding: 30px; }
.alhoshanos-content-header { margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--alhoshanos-border-color); }
.alhoshanos-content-header.with-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.alhoshanos-content-header h1 { margin: 0; font-size: 24px; color: var(--alhoshanos-primary-color); }
body.dark-mode .alhoshanos-content-header h1 { color: var(--alhoshanos-text-light); }
.alhoshanos-content-header p { margin: 5px 0 0; color: var(--alhoshanos-text-muted); }
body.dark-mode .alhoshanos-content-header p { color: #a0aec0; }

/* Grids */
.alhoshanos-stats-cards-grid { display: grid; gap: 25px; margin-bottom: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.alhoshanos-dashboard-columns { display: grid; gap: 25px; margin-bottom: 30px; grid-template-columns: 1fr 1fr; }

/* Cards */
.alhoshanos-stat-card, .alhoshanos-table-container { background-color: var(--alhoshanos-card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
body.dark-mode .alhoshanos-stat-card, body.dark-mode .alhoshanos-table-container { background-color: var(--alhoshanos-card-bg-dark); }
.alhoshanos-stat-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--alhoshanos-text-muted); }
.alhoshanos-column h3 { margin: 0 0 10px; font-size: 14px; color: var(--alhoshanos-text-muted); }
.alhoshanos-stat-card .alhoshanos-card-value { margin: 0; font-size: 28px; font-weight: bold; }
.success-text { color: var(--status-success-text); }
.error-text { color: var(--status-error-text); }
.warning-text { color: var(--status-warning-text); }

/* Tables */
.alhoshanos-table-container { padding: 0; overflow-x: auto; }
.alhoshanos-data-table { width: 100%; border-collapse: collapse; }
.alhoshanos-data-table th, .alhoshanos-data-table td { padding: 15px; text-align: right; border-bottom: 1px solid var(--alhoshanos-border-color); }
.alhoshanos-data-table tr:last-child td { border-bottom: none; }
.alhoshanos-data-table thead th { background-color: #f9fafb; font-weight: bold; font-size: 13px; text-transform: uppercase; }
body.dark-mode .alhoshanos-data-table thead th { background-color: #272d3d; }

/* Badges */
.alhoshanos-status-badge, .alhoshanos-priority-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; text-transform: capitalize; }
.status-active, .status-paid, .status-completed { background-color: var(--status-success-bg); color: var(--status-success-text); }
.status-expired, .status-cancelled, .status-on_hold { background-color: var(--status-neutral-bg); color: var(--status-neutral-text); }
.status-overdue, .status-rejected { background-color: var(--status-error-bg); color: var(--status-error-text); }
.status-unpaid, .status-pending { background-color: var(--status-warning-bg); color: var(--status-warning-text); }
.status-assigned, .status-in_progress, .status-new { background-color: var(--status-info-bg); color: var(--status-info-text); }
.priority-high, .priority-emergency { background-color: var(--status-error-bg); color: var(--status-error-text); }
.priority-medium { background-color: var(--status-warning-bg); color: var(--status-warning-text); }
.priority-low { background-color: var(--status-info-bg); color: var(--status-info-text); }

/* --- 6. Responsive Styles --- */
@media (max-width: 992px) {
    .alhoshanos-dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #alhoshanos-sidebar { transform: translateX(260px); }
    #alhoshanos-app-wrapper.sidebar-open #alhoshanos-sidebar { transform: translateX(0); }
    #alhoshanos-main-panel { width: 100%; margin-right: 0; }
    #alhoshanos-sidebar-toggle { display: block; }
    .alhoshanos-welcome-message, #alhoshanos-current-time { display: none; }
    .alhoshanos-topbar-right { gap: 10px; }
    #alhoshanos-content-area { padding: 15px; }
    .alhoshanos-stats-cards-grid { grid-template-columns: 1fr 1fr; }
}


/* --- Modal Styles --- */
.alhoshanos-scope .alhoshanos-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}



.alhoshanos-scope .alhoshanos-modal-content {
    background-color: var(--alhoshanos-card-bg);
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    position: relative;
}
body.dark-mode .alhoshanos-scope .alhoshanos-modal-content {
    background-color: var(--alhoshanos-card-bg-dark);
}
.alhoshanos-scope .alhoshanos-modal-close {
    position: absolute;
    top: 15px;
    left: 15px; /* Will be right in RTL */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--alhoshanos-text-muted);
}

/* --- Star Rating Styles --- */
.alhoshanos-scope .alhoshanos-star-rating {
    display: inline-block;
    direction: rtl; /* To make stars fill from right to left */
}
.alhoshanos-scope .alhoshanos-star-rating .star {
    font-size: 32px;
    color: #dcdcdc;
    cursor: pointer;
    transition: color 0.2s;
}
.alhoshanos-scope .alhoshanos-star-rating:hover .star {
    color: var(--alhoshanos-secondary-color);
}
.alhoshanos-scope .alhoshanos-star-rating .star:hover ~ .star {
    color: #dcdcdc;
}
.alhoshanos-scope .alhoshanos-star-rating .star.selected,
.alhoshanos-scope .alhoshanos-star-rating .star.selected ~ .star {
    color: var(--alhoshanos-secondary-color);
}