/* =============================================
   Mawazeen Platform - Main Styles (RTL)
   Purple Admin Inspired Theme
   ============================================= */

:root {
    --primary: #7c4dff;
    --primary-light: #b47cff;
    --primary-dark: #5c2dc9;
    --secondary: #6c757d;
    --success: #22c55e;
    --info: #06b6d4;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #1e293b;
    --light: #f8fafc;
    --white: #ffffff;
    --sidebar-bg: #ffffff;
    --sidebar-width: 260px;
    --topbar-height: 64px;
    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    --gradient-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --shadow: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
    --border-radius: 10px;
    --transition: all 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Tajawal', 'Segoe UI', sans-serif;
    background: #f4f5f7;
    color: #333;
    direction: rtl;
    text-align: right;
    font-size: 14px;
    overflow-x: hidden;
}

a { text-decoration: none; color: var(--primary); transition: var(--transition); }
a:hover { color: var(--primary-dark); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* ===== SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    box-shadow: -2px 0 15px rgba(0,0,0,0.05);
    z-index: 1000;
    transition: var(--transition);
    overflow-y: auto;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.sidebar-logo span { color: var(--primary-dark); }

.sidebar-user {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-user .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gradient-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 28px;
    color: white;
    font-weight: 700;
}

.sidebar-user .user-name {
    font-weight: 600;
    color: var(--dark);
    font-size: 15px;
}

.sidebar-user .user-role {
    font-size: 12px;
    color: var(--secondary);
}

.sidebar-menu { padding: 15px 0; }

.sidebar-menu .menu-label {
    padding: 10px 25px 5px;
    font-size: 11px;
    font-weight: 700;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #495057;
    font-size: 14px;
    transition: var(--transition);
    border-right: 3px solid transparent;
    gap: 12px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: linear-gradient(90deg, transparent, rgba(124, 77, 255, 0.08));
    color: var(--primary);
    border-right-color: var(--primary);
}

.sidebar-menu a.active { font-weight: 600; }

.sidebar-menu a i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.sidebar-menu .badge-menu {
    margin-right: auto;
    margin-left: 0;
    background: var(--danger);
    color: white;
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 11px;
}

/* ===== TOPBAR ===== */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--sidebar-width);
    height: var(--topbar-height);
    background: var(--white);
    box-shadow: var(--shadow);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
}

.topbar-right { display: flex; align-items: center; gap: 15px; }
.topbar-left { display: flex; align-items: center; gap: 20px; }

.topbar-search {
    position: relative;
}

.topbar-search input {
    background: #f4f5f7;
    border: none;
    border-radius: 25px;
    padding: 8px 40px 8px 15px;
    width: 300px;
    font-family: 'Tajawal', sans-serif;
    font-size: 13px;
    transition: var(--transition);
}

.topbar-search input:focus {
    outline: none;
    background: #eef0f2;
    width: 350px;
}

.topbar-search i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
}

.topbar-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    color: #495057;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 18px;
}

.topbar-icon:hover { background: #e9ecef; color: var(--primary); }

.topbar-icon .badge-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid white;
}

.page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title i {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--gradient-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    margin-right: var(--sidebar-width);
    margin-top: var(--topbar-height);
    padding: 25px;
    min-height: calc(100vh - var(--topbar-height));
}

/* ===== STAT CARDS ===== */
.stat-card {
    border-radius: var(--border-radius);
    padding: 25px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    min-height: 140px;
}

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

.stat-card .stat-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 28px;
    opacity: 0.7;
}

.stat-card .stat-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}

.stat-card .stat-circle-1 { width: 120px; height: 120px; bottom: -30px; left: -20px; }
.stat-card .stat-circle-2 { width: 80px; height: 80px; bottom: 20px; left: 40px; }

.stat-card .stat-label { font-size: 13px; opacity: 0.9; margin-bottom: 8px; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; }
.stat-card .stat-change { font-size: 12px; margin-top: 10px; opacity: 0.85; }

.stat-card.gradient-pink { background: var(--gradient-pink); }
.stat-card.gradient-blue { background: var(--gradient-blue); }
.stat-card.gradient-green { background: var(--gradient-green); }
.stat-card.gradient-purple { background: var(--gradient-purple); }
.stat-card.gradient-orange { background: var(--gradient-orange); }

/* ===== CARDS ===== */
.card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: none;
    margin-bottom: 25px;
}

.card-header {
    padding: 18px 25px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.card-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.card-body { padding: 25px; }

/* ===== TABLES ===== */
.table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    margin-bottom: 0;
}

.table thead th {
    background: #f8fafc;
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    padding: 12px 15px;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.table tbody tr:hover { background: #f8fafc; }

/* ===== BADGES ===== */
.badge-status {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.badge-registered { background: #e0e7ff; color: #3730a3; }
.badge-in_progress { background: #fef3c7; color: #92400e; }
.badge-judged { background: #d1fae5; color: #065f46; }
.badge-appealed { background: #fce7f3; color: #9d174d; }
.badge-closed { background: #e5e7eb; color: #374151; }
.badge-archived { background: #f3f4f6; color: #6b7280; }

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-completed { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }

.badge-unpaid { background: #fee2e2; color: #991b1b; }
.badge-partial { background: #fef3c7; color: #92400e; }
.badge-paid { background: #d1fae5; color: #065f46; }
.badge-overdue { background: #fee2e2; color: #991b1b; }

.badge-low { background: #e0e7ff; color: #3730a3; }
.badge-medium { background: #fef3c7; color: #92400e; }
.badge-high { background: #fed7aa; color: #c2410c; }
.badge-urgent { background: #fee2e2; color: #991b1b; }

/* ===== BUTTONS ===== */
.btn { border-radius: 8px; font-size: 13px; padding: 8px 18px; font-family: 'Tajawal', sans-serif; font-weight: 500; transition: var(--transition); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-gradient { background: var(--gradient-purple); border: none; color: white; }
.btn-gradient:hover { opacity: 0.9; color: white; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

.btn-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.btn-action.edit { background: #e0e7ff; color: #3730a3; }
.btn-action.edit:hover { background: #c7d2fe; }
.btn-action.delete { background: #fee2e2; color: #991b1b; }
.btn-action.delete:hover { background: #fecaca; }
.btn-action.view { background: #d1fae5; color: #065f46; }
.btn-action.view:hover { background: #a7f3d0; }

/* ===== FORMS ===== */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 10px 15px;
    font-family: 'Tajawal', sans-serif;
    font-size: 13px;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    margin-bottom: 6px;
}

/* ===== ALERTS ===== */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: 15px 20px;
    font-size: 14px;
}

/* ===== NOTIFICATIONS DROPDOWN ===== */
.notifications-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 350px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.notifications-dropdown.show { display: block; }

.notification-item {
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    transition: var(--transition);
    cursor: pointer;
}

.notification-item:hover { background: #f8fafc; }
.notification-item.unread { border-right: 3px solid var(--primary); background: #faf8ff; }

.notification-item .notif-title { font-weight: 600; font-size: 13px; color: var(--dark); }
.notification-item .notif-text { font-size: 12px; color: #6b7280; margin-top: 3px; }
.notification-item .notif-time { font-size: 11px; color: #adb5bd; margin-top: 5px; }

/* ===== CHAT ===== */
.chat-container { display: flex; height: calc(100vh - var(--topbar-height) - 50px); }

.chat-sidebar {
    width: 300px;
    background: white;
    border-left: 1px solid #e9ecef;
    overflow-y: auto;
    flex-shrink: 0;
}

.chat-main { flex: 1; display: flex; flex-direction: column; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    background: #f4f5f7;
}

.chat-message {
    max-width: 75%;
    margin-bottom: 20px;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.user { margin-left: auto; }
.chat-message.assistant { margin-right: 0; }

.chat-bubble {
    padding: 15px 20px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.7;
}

.chat-message.user .chat-bubble {
    background: var(--primary);
    color: white;
    border-bottom-left: 5px;
}

.chat-message.assistant .chat-bubble {
    background: white;
    color: #333;
    box-shadow: var(--shadow);
    border-bottom-right-radius: 5px;
}

.chat-input-area {
    padding: 20px;
    background: white;
    border-top: 1px solid #e9ecef;
}

.chat-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chat-input-wrapper textarea {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 12px 18px;
    resize: none;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    max-height: 120px;
}

.chat-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
    flex-shrink: 0;
}

.chat-send-btn:hover { background: var(--primary-dark); }

.chat-sources {
    margin-top: 10px;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 12px;
}

.chat-sources .source-item {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    padding: 3px 10px;
    border-radius: 20px;
    margin: 3px;
    font-size: 11px;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 20px;
}

.chat-suggestion {
    background: #f0f0f0;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Tajawal', sans-serif;
}

.chat-suggestion:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* ===== CALENDAR ===== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e9ecef;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.calendar-header-cell {
    background: var(--primary);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
}

.calendar-cell {
    background: white;
    min-height: 100px;
    padding: 8px;
    font-size: 13px;
}

.calendar-cell.today { background: #faf8ff; }
.calendar-cell.other-month { background: #f8fafc; color: #adb5bd; }

.calendar-cell .day-number {
    font-weight: 600;
    margin-bottom: 5px;
}

.calendar-event {
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.calendar-event.hearing { background: #ef4444; }
.calendar-event.meeting { background: #3b82f6; }
.calendar-event.deadline { background: #f59e0b; }

/* ===== MODALS ===== */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 18px 25px;
}

.modal-body { padding: 25px; }

.modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 15px 25px;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #adb5bd;
}

.empty-state i { font-size: 60px; margin-bottom: 15px; opacity: 0.5; }
.empty-state h5 { color: #6b7280; }
.empty-state p { font-size: 14px; }

/* ===== PAGINATION ===== */
.pagination .page-link {
    border-radius: 8px;
    margin: 0 3px;
    color: var(--primary);
    border: 1px solid #e9ecef;
    font-size: 13px;
}

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

/* ===== LOADING ===== */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== LOGIN PAGE ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.login-card .login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-card .login-logo h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
}

.login-card .login-logo p {
    color: #6b7280;
    font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .sidebar { right: -260px; }
    .sidebar.show { right: 0; }
    .topbar { right: 0; }
    .main-content { margin-right: 0; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .sidebar-overlay.show { display: block; }
    .chat-sidebar { display: none; }
    .chat-container { height: calc(100vh - var(--topbar-height) - 50px); }
}

@media (max-width: 768px) {
    .topbar-search { display: none; }
    .main-content { padding: 15px; }
    .stat-card .stat-value { font-size: 22px; }
}

/* ===== PRINT ===== */
@media print {
    .sidebar, .topbar, .btn, .chat-input-area { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
}

/* Custom Modals */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:10000;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal-box{background:white;border-radius:16px;padding:0;width:400px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modalIn 0.2s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(0.95) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-box-header{padding:20px 24px 12px;font-size:16px;font-weight:700;color:#1e293b;}
.modal-box-body{padding:0 24px 20px;}
.modal-box-footer{padding:12px 24px 20px;display:flex;gap:10px;justify-content:flex-start;}
.modal-box input{width:100%;border:2px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-size:14px;font-family:"Tajawal",sans-serif;outline:none;transition:border 0.2s;}
.modal-box input:focus{border-color:#7c4dff;}
.modal-box .mbtn{border:none;border-radius:10px;padding:10px 24px;font-size:14px;font-family:"Tajawal",sans-serif;font-weight:600;cursor:pointer;transition:all 0.15s;}
.mbtn-primary{background:#7c4dff;color:white;}
.mbtn-primary:hover{background:#5c2dc9;}
.mbtn-danger{background:#ef4444;color:white;}
.mbtn-danger:hover{background:#dc2626;}
.mbtn-ghost{background:#f1f5f9;color:#64748b;}
.mbtn-ghost:hover{background:#e2e8f0;}

/* Chat Categories & Context Menu */
.cat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;font-size:13px;font-weight:700;color:#64748b;border-bottom:1px solid #e2e8f0;cursor:pointer;user-select:none;direction:rtl;}
.cat-header:hover{background:#f1f5f9;}
.cat-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:8px;vertical-align:middle;}
.cat-actions{display:none;gap:6px;align-items:center;}
.cat-header:hover .cat-actions{display:flex;}
.cat-actions button{background:none;border:none;padding:4px;font-size:14px;color:#94a3b8;cursor:pointer;border-radius:4px;}
.cat-actions button:hover{color:#7c4dff;background:#e8e0ff;}
.session-item{position:relative;transition:background 0.15s;}
.session-item .s-menu{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:none;}
.session-item:hover .s-menu{display:block;}
.session-item .s-menu button{background:rgba(255,255,255,0.9);border:1px solid #e2e8f0;color:#64748b;font-size:16px;cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1;}
.session-item .s-menu button:hover{color:#7c4dff;border-color:#7c4dff;}
.session-active{background:#f0f0ff !important;border-right:3px solid #7c4dff;}
.ctx-menu{position:fixed;background:white;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:6px 0;z-index:9999;min-width:180px;font-size:13px;display:none;direction:rtl;}
.ctx-item{padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s;}
.ctx-item:hover{background:#f1f5f9;}
.ctx-item.danger{color:#ef4444;}
.ctx-item.danger:hover{background:#fef2f2;}
.ctx-item i{font-size:15px;width:18px;text-align:center;}
.ctx-divider{border-top:1px solid #e2e8f0;margin:4px 0;}

#searchChats{border-radius:8px;border:1px solid #e2e8f0;font-size:13px;padding:8px 12px;}
#searchChats:focus{border-color:#7c4dff;box-shadow:0 0 0 3px rgba(124,77,255,0.1);}

/* Case Picker */
.case-pick-item{transition:background 0.1s;}
.case-pick-item:hover{background:#f1f5f9 !important;}
.case-pick-item:last-child{border-bottom:none !important;}