:root { --primary: #2c3e50; --secondary: #b08d57; --success: #27ae60; --danger: #c0392b; --warning: #f39c12; }
        
body { font-family: 'Cairo', sans-serif; background: #f0f2f5; margin: 0; height: 100vh; overflow: hidden; }
#mainContent { height: 100vh; display: none; flex-direction: column; }

/* UI Elements */
.main-header { flex-shrink: 0; background: white; padding: 10px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; border-bottom: 3px solid var(--secondary); }
.header-logo { height: 45px; }
#saveIndicator { margin-left: 15px; font-weight: bold; font-size: 13px; padding: 4px 12px; border-radius: 4px; border: 1px solid #ddd; }

/* --- Ticker (News Bar) --- */
.ticker-bar { flex-shrink: 0; height: 40px; background: #000000; color: white; display: flex; align-items: center; overflow: hidden; position: relative; border-bottom: 2px solid var(--secondary); box-shadow: inset 0 -2px 8px rgba(0,0,0,0.5); }
.ticker-content { position: absolute; width: 100%; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 0.5px; white-space: nowrap; animation: slideTicker 6s infinite; }

/* --- Stats & Search Bar (الجديد) --- */
.top-bar-actions { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; background: #ffffff; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.dashboard-stats { display: flex; gap: 15px; }
.stat-box { padding: 8px 15px; background: #f8f9fa; border-radius: 6px; font-weight: bold; font-size: 13px; border: 1px solid #ddd; color: #333; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.stat-box.success { color: #27ae60; background: #eafaf1; border-color: #a3e4d7; }
.stat-box.warning { color: #d35400; background: #fef5e7; border-color: #f5cba7; }
.stat-box.danger { color: #c0392b; background: #fdedec; border-color: #f5b7b1; }
.stat-box span { font-size: 18px; font-weight: 900; }
.search-box input { padding: 10px 20px; width: 300px; border: 1px solid #ccc; border-radius: 20px; outline: none; font-family: 'Cairo', sans-serif; font-weight: bold; transition: 0.2s; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.search-box input:focus { border-color: var(--secondary); width: 350px; }

/* --- Expiry Ticker --- */
.expiry-ticker-container { flex-grow: 1; height: 36px; background: #2c0b0e; border-radius: 6px; border: 1px solid #e74c3c; overflow: hidden; position: relative; display: flex; align-items: center; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3); }
.expiry-ticker-content { position: absolute; width: 100%; text-align: center; font-size: 15px; font-weight: bold; letter-spacing: 0.5px; white-space: nowrap; animation: slideTicker 5s infinite; color: #ff4d4d; }

@keyframes slideTicker { 
    0% { top: 100%; opacity: 0; } 
    10% { top: 50%; transform: translateY(-50%); opacity: 1; } 
    85% { top: 50%; transform: translateY(-50%); opacity: 1; } 
    100% { top: -50%; opacity: 0; } 
}

/* Login */
#splashScreen { position: fixed; inset: 0; background: white; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#loginOverlay { position: fixed; inset: 0; background: var(--primary); z-index: 5000; display: flex; justify-content: center; align-items: center; }
.login-box { background: white; padding: 30px; border-radius: 12px; width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.login-box input { width: 90%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; }
.login-box button { width: 100%; padding: 12px; background: var(--secondary); color: white; border: none; font-weight: bold; cursor: pointer; border-radius: 5px; }

/* Tabs */
.tabs-bar { flex-shrink: 0; display: flex; background: #34495e; padding: 10px 30px; gap: 5px; overflow-x: auto; }
.tab-btn { padding: 10px 25px; background: #ecf0f1; border: none; cursor: pointer; font-weight: bold; border-radius: 4px; white-space: nowrap; transition: 0.2s; }
.tab-btn.active { background: var(--secondary); color: white; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.tab-content { display: none; flex-grow: 1; flex-direction: column; padding: 15px 30px; min-height: 0; box-sizing: border-box; }
.tab-content.active { display: flex; }
.controls-row { flex-shrink: 0; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }

/* Tables */
.table-wrapper { flex-grow: 1; overflow: auto; background: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }
.table-wrapper::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 8px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: #8e7042; }

table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1700px; text-align: center; font-size: 13px; }
th, td { border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 8px 4px; position: relative; }
th { background: #2c3e50; color: white; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.15); border-top: none; }
td span, td font, td div, td b, td strong, td p { font-family: 'Cairo', sans-serif !important; font-size: 13px !important; background-color: transparent !important; color: inherit !important; }

/* Status & Validation */
td.bg-completed { background-color: #2ecc71 !important; color: white !important; font-weight: bold; }
td.bg-pending { background-color: #f1c40f !important; color: black !important; font-weight: bold; }
td.bg-underprocess { background-color: #3498db !important; color: white !important; font-weight: bold; }
td.bg-urgent { background-color: #e74c3c !important; color: white !important; font-weight: bold; }
td.mandatory-empty { background-color: #ffdce0 !important; outline: 2px solid red !important; outline-offset: -2px; }
td.warning-soon { background-color: #fff3cd !important; font-weight: bold; }
td.expired { background-color: #f8d7da !important; color: #c0392b !important; font-weight: bold; }
td[data-history]:hover::after { content: attr(data-history); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.95); color: #fff; padding: 10px; border-radius: 6px; font-size: 11px; white-space: pre-wrap; z-index: 99999; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: 1px solid var(--secondary); min-width: 160px; text-align: left; pointer-events: none; line-height: 1.4; }

/* Buttons */
.btn-add, .btn-excel { padding: 8px 18px; border: none; color: white; border-radius: 5px; cursor: pointer; font-weight: bold; box-shadow: 0 3px 0 rgba(0,0,0,0.2); transition: 0.1s; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.btn-add { background: #2c3e50; }
.btn-excel { background: #27ae60; }
.btn-add:active, .btn-excel:active { transform: translateY(2px); box-shadow: none; }
.btn-del { color: var(--danger); cursor: pointer; font-size: 16px; border: none; background: none; padding: 0; }
.btn-del-main { display: none; }
body.is-admin .btn-del-main { display: inline-block !important; }

[contenteditable="true"] { background: #fffdf0; outline: none; min-height: 22px; border-radius: 3px; }
.status-select { width: 100%; border: none; background: transparent; font-weight: bold; cursor: pointer; color: inherit; }

/* Chat */
.chat-container { display: flex; flex-grow: 1; min-height: 0; background: white; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
.chat-sidebar { width: 220px; background: #f8f9fa; border-right: 1px solid #ddd; overflow-y: auto; }
.chat-user-item { padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; font-weight: bold; }
.chat-user-item.active { background: var(--secondary); color: white; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: #fff; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background: #e5ddd5; }
.msg { max-width: 75%; padding: 8px 12px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.msg.sent { align-self: flex-end; background: #dcf8c6; }
.msg.received { align-self: flex-start; background: #fff; }

/* --- Modal Alerts --- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center; backdrop-filter: blur(3px); }
.modal-box { background: white; width: 1100px; max-width: 98%; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); overflow: hidden; animation: slideDown 0.3s ease-out; display: flex; flex-direction: column; max-height: 85vh; }
@keyframes slideDown { from {transform: translateY(-50px); opacity: 0;} to {transform: translateY(0); opacity: 1;} }
.modal-header { background: var(--primary); color: white; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 10px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; }
.modal-footer { padding: 10px 15px; text-align: right; background: #f8f9fa; border-top: 1px solid #eee; flex-shrink: 0; }
.btn-close-modal { padding: 6px 16px; background: #ddd; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 13px; }
.btn-close-modal:hover { background: #ccc; }

.alert-table { width: 100%; border-collapse: collapse; table-layout: auto; word-wrap: break-word; }
.alert-table th { background: #ecf0f1; color: #2c3e50; padding: 8px 10px; text-align: left; font-size: 13px; position: sticky; top: 0; box-shadow: none; border-bottom: 2px solid #ddd; }
.alert-table td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 12.5px; vertical-align: middle; white-space: normal; line-height: 1.5; font-weight: 600; }
.alert-table tr:hover { background: #f9f9f9; }
.badge { padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: bold; display: inline-block; min-width: 50px; text-align: center; }
.badge.expired { background: #ffebeb; color: #c0392b; border: 1px solid #fadbd8; }
.badge.soon { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* Settings */
.settings-card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; max-width: 800px; margin: 0 auto; width: 100%; }
.settings-section-title { color: var(--primary); margin-top: 0; border-bottom: 2px solid #f0f2f5; padding-bottom: 10px; margin-bottom: 20px; }