/* ========================================================================== Majaz CDM — Custom Styles ========================================================================== */ /* ========================================================================== RTL GLOBAL OVERRIDES Bootstrap 4 sets body { text-align: left } as a physical property. The HTML dir="rtl" attribute (on ) tells browsers to default block-level text to the right, but Bootstrap's explicit text-align overrides that for some components. These rules restore RTL defaults. ========================================================================== */ /* Block-level text: right by default site-wide */ body, p, h1, h2, h3, h4, h5, h6, label, legend, .card-header, .card-body, .card-footer, .form-group, .form-check, .alert, .nav-item, .dropdown-item, .list-group-item { text-align: right !important; } /* Form inputs: right-aligned Hebrew text */ .form-control, select.form-control, input.form-control, textarea.form-control { text-align: right !important; direction: rtl !important; } /* Buttons stay centered */ .btn { text-align: center; } /* Table cells stay centered (data tables use center alignment) */ .table th, .table td { text-align: center; } /* Badge, tag elements: centered */ .badge { text-align: center; } /* Navbar brand and items — keep RTL flex without breaking layout */ .navbar { text-align: right; } /* Override any Bootstrap .text-left utility leftovers */ [dir="rtl"] .text-left { text-align: right !important; } /* ------ Mobile navbar: RTL layout ------ */ @media (max-width: 767px) { .navbar-top { padding-top: 10px !important; } .navbar-top .container-fluid { display: flex; justify-content: flex-end; align-items: center; } .mobile-nav-items { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; margin-left: auto; padding-right: 10px; } .btn-sm { white-space: nowrap; } } /* ========================================================================== Ganim Page — Kindergarten Status Summary ========================================================================== */ /* ------ Filter labels ------ */ .ganim-filter-label { display: block; font-size: 0.82rem; font-weight: 600; color: #000 !important; margin-bottom: 4px; text-align: right; letter-spacing: 0.02em; } /* ------ Secondary options bar ------ */ .ganim-options-bar { display: flex; align-items: center; justify-content: space-between; /* compare on RIGHT, actions on LEFT (RTL) */ flex-wrap: wrap; gap: 10px; } .ganim-compare-section { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .ganim-action-btns { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } /* ------ Modern pill toggle for "השווה עם חודש" checkbox ------ */ /* ASP.NET CheckBox renders: */ .ganim-toggle-chip { display: inline-flex; align-items: center; position: relative; } /* hide the native checkbox — keep it accessible */ .ganim-toggle-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* style the label as a pill toggle button */ .ganim-toggle-chip label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1.5px solid #d1d7e0; border-radius: 20px; font-size: 0.82rem; font-weight: 500; color: #525f7f; background: #fff; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; user-select: none; white-space: nowrap; margin: 0; } /* toggle icon inside label */ .ganim-toggle-chip label::before { content: '⇌'; font-size: 0.95rem; line-height: 1; transition: content 0.15s; } /* hover state */ .ganim-toggle-chip label:hover { border-color: #5e72e4; color: #5e72e4; box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12); } /* checked state: filled pill */ .ganim-toggle-chip input[type="checkbox"]:checked + label { background: #eef0fd; border-color: #5e72e4; color: #5e72e4; font-weight: 600; box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15); } .ganim-toggle-chip input[type="checkbox"]:checked + label::before { content: '✓'; color: #5e72e4; } /* focus accessibility ring */ .ganim-toggle-chip input[type="checkbox"]:focus + label { outline: 2px solid #5e72e4; outline-offset: 2px; } /* comparison month dropdown — slides in after toggle */ .ganim-match-ddl { min-width: 140px; font-size: 0.82rem; border-radius: 8px; border: 1.5px solid #d1d7e0; transition: border-color 0.15s; } .ganim-match-ddl:focus { border-color: #5e72e4; box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12); } /* ------ Export icon buttons ------ */ .ganim-export-group { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .ganim-export-btn { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 4px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .ganim-export-btn:hover { border-color: #5e72e4; box-shadow: 0 2px 8px rgba(94, 114, 228, 0.2); transform: translateY(-2px); } .ganim-export-btn img { display: block; } .ganim-export-label { font-size: 0.68rem; color: #8898aa; font-weight: 500; letter-spacing: 0.03em; } /* ------ Identity bar (report header) ------ */ .ganim-identity-bar { background: linear-gradient(87deg, #11cdef 0, #1171ef 100%); } .ganim-identity-icon { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; } .ganim-identity-title { font-size: 0.92rem; font-weight: 700; color: #fff !important; margin-bottom: 2px; } .ganim-identity-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: rgba(255, 255, 255, 0.9) !important; } /* override Argon's default label color inside the bar */ .ganim-identity-bar label, .ganim-identity-bar span { color: rgba(255, 255, 255, 0.9) !important; } .ganim-identity-value { font-weight: 700; color: #fff !important; margin-right: 3px; } .ganim-identity-sep { color: rgba(255, 255, 255, 0.5) !important; font-weight: 300; } /* ------ Section card headers ------ */ .ganim-section-title { font-size: 0.92rem; font-weight: 700; color: #32325d; } .ganim-section-icon { margin-left: 8px; font-size: 0.95rem; } /* ------ AI Insights Card ------ */ /* Force ALL text inside the purple card to be white/light */ .ganim-ai-card, .ganim-ai-card p, .ganim-ai-card label, .ganim-ai-card small, .ganim-ai-card span, .ganim-ai-card strong { color: #fff !important; } .ganim-ai-card .text-muted { color: rgba(255,255,255,0.70) !important; } .ganim-ai-card .text-danger { color: #ffb3c6 !important; } /* pink on purple */ .ganim-ai-card .text-success { color: #a8ffce !important; } .ganim-ai-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; } /* decorative circles */ .ganim-ai-card::before { content: ''; position: absolute; top: -40px; left: -40px; width: 140px; height: 140px; background: rgba(255, 255, 255, 0.06); border-radius: 50%; pointer-events: none; } .ganim-ai-card::after { content: ''; position: absolute; bottom: -25px; right: 80px; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.04); border-radius: 50%; pointer-events: none; } .ganim-ai-icon { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex-shrink: 0; } .ganim-ai-title { font-size: 0.95rem; font-weight: 700; color: #fff !important; margin: 0; } .ganim-ai-text { font-size: 0.82rem; color: rgba(255, 255, 255, 0.88) !important; line-height: 1.5; } .ganim-ai-text strong { color: #fff; } .ganim-ai-btn { background: rgba(255, 255, 255, 0.95); color: #5e72e4; border: none; font-weight: 700; font-size: 0.82rem; padding: 8px 18px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; } .ganim-ai-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); background: #fff; color: #5e72e4; } .ganim-ai-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* ------ Data tables ------ */ .ganim-table { font-size: 0.82rem; width: 100% !important; } .ganim-table th, .ganim-table td { padding: 0.55rem 0.9rem; vertical-align: middle; border-top: 1px solid #edf0f5; text-align: center; } /* Portal column header override — purple, beats the teal !important */ .ganim-thead th.ganim-portal-th { background-color: #5e35b1 !important; color: #fff !important; } /* Portal column data cell — light purple tint */ td.ganim-portal-td { background-color: #f0edff !important; } /* dark teal header — matches original brand color */ .ganim-thead th { background-color: #1C5E55 !important; color: #fff !important; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; border: none !important; white-space: nowrap; text-align: center; } .ganim-row-alt { background-color: #f7fbfb !important; } .ganim-table tbody tr:hover { background-color: #e8f5f3 !important; transition: background 0.1s; } /* Total/summary row (BackColor set by code-behind) — extra bold */ .ganim-table tbody tr[style*="background-color"] td { font-weight: 700; } /* ------ Mobile adjustments ------ */ @media (max-width: 767px) { .ganim-options-bar { flex-direction: column; align-items: flex-start; } .ganim-ai-card .flex-nowrap { flex-wrap: wrap !important; gap: 12px; } .ganim-ai-card .col-auto:last-child { width: 100%; text-align: center; } .ganim-table { font-size: 0.74rem; } .ganim-table th, .ganim-table td { padding: 0.4rem 0.5rem; } } /* ========================================================================== AI PANEL — File Upload & Results ========================================================================== */ /* Subtitle text inside the AI card */ .ganim-ai-subtitle { font-size: 0.84rem; color: rgba(255, 255, 255, 0.82) !important; line-height: 1.5; } /* File input styling */ .ganim-file-input { display: block; width: 100%; padding: 6px 10px; font-size: 0.84rem; background: rgba(255, 255, 255, 0.15); border: 1.5px dashed rgba(255, 255, 255, 0.5); border-radius: 8px; color: #fff !important; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .ganim-file-input:hover { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.22); } /* Result panel container */ .ganim-ai-result { background: rgba(255, 255, 255, 0.12); border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 16px 20px; } .ganim-ai-result-header { font-size: 0.9rem; color: #fff !important; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); font-weight: 700; } /* The AI response text area */ .ganim-ai-response { color: #fff !important; font-size: 0.86rem; line-height: 1.75; text-align: right !important; direction: rtl; white-space: pre-wrap; } .ganim-ai-response p { color: #fff !important; margin-bottom: 6px; } .ganim-ai-response strong { color: #fff; font-weight: 700; } /* Loading spinner area */ #aiLoadingDiv { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 20px; } #aiLoadingDiv p { color: rgba(255, 255, 255, 0.8) !important; } /* ========================================================================== CHAT SECTION ========================================================================== */ .ganim-chat-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: rgba(255,255,255,0.75) !important; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; } .ganim-chat-divider::before, .ganim-chat-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.25); } /* Scrollable message history */ .ganim-chat-history { max-height: 380px; overflow-y: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .ganim-chat-history::-webkit-scrollbar { width: 5px; } .ganim-chat-history::-webkit-scrollbar-track { background: transparent; } .ganim-chat-history::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } /* Individual message bubble */ .ganim-chat-msg { padding: 10px 14px; border-radius: 12px; font-size: 0.83rem; line-height: 1.6; max-width: 92%; } .ganim-chat-bubble-user { background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.3); align-self: flex-end; border-bottom-left-radius: 4px; } .ganim-chat-bubble-ai { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.15); align-self: flex-start; border-bottom-right-radius: 4px; } .ganim-chat-label { font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-bottom: 5px; color: #fff !important; } .ganim-chat-text, .ganim-chat-text p, .ganim-chat-text strong, .ganim-chat-text br { color: #fff !important; margin-bottom: 0; } /* Chat input row */ .ganim-chat-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; } .ganim-chat-input { flex: 1; background: rgba(255,255,255,0.15) !important; border: 1.5px solid rgba(255,255,255,0.35) !important; border-radius: 10px !important; color: #fff !important; font-size: 0.84rem; padding: 8px 12px; resize: none; direction: rtl; transition: border-color 0.15s, background 0.15s; } .ganim-chat-input::placeholder { color: rgba(255,255,255,0.55) !important; } .ganim-chat-input:focus { outline: none; border-color: rgba(255,255,255,0.7) !important; background: rgba(255,255,255,0.2) !important; box-shadow: none; } .ganim-chat-send { background: rgba(255,255,255,0.9); color: #764ba2; border: none; font-weight: 700; font-size: 0.82rem; padding: 8px 18px; border-radius: 20px; white-space: nowrap; transition: background 0.15s, transform 0.1s; flex-shrink: 0; } .ganim-chat-send:hover { background: #fff; color: #667eea; transform: translateY(-1px); } .ganim-chat-hint { display: block; margin-top: 5px; color: rgba(255,255,255,0.55) !important; font-size: 0.72rem; text-align: right; } /* ========================================================================== RESPONSIVE TABLE SCROLL ========================================================================== */ .ganim-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ganim-table-scroll table { min-width: 480px; } /* Subtle horizontal scroll indicator */ .ganim-table-scroll::-webkit-scrollbar { height: 4px; } .ganim-table-scroll::-webkit-scrollbar-track { background: #f0f0f0; } .ganim-table-scroll::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 2px; } /* ========================================================================== SPLIT SCREEN LAYOUT Tables on the LEFT (main, fluid), AI sidebar on the RIGHT (sticky, 390px) ========================================================================== */ .ganim-split-wrapper { display: grid; grid-template-columns: 1fr 6px var(--ganim-ai-w, 390px); grid-template-areas: "tables handle ai"; gap: 0 0; column-gap: 0; align-items: start; } .ganim-tables-pane { grid-area: tables; min-width: 0; padding-right: 12px; } .ganim-ai-pane { grid-area: ai; position: sticky; top: 80px; padding-left: 12px; } /* Drag resize handle between panes */ .ganim-resize-handle { grid-area: handle; cursor: col-resize; width: 6px; background: rgba(94, 114, 228, 0.25); border-radius: 3px; transition: background 0.2s; user-select: none; position: relative; z-index: 10; } .ganim-resize-handle:hover, .ganim-resize-handle.dragging { background: rgba(94, 114, 228, 0.75); } /* Visual grip dots on handle */ .ganim-resize-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 40px; background: repeating-linear-gradient( to bottom, rgba(94,114,228,0.8) 0, rgba(94,114,228,0.8) 3px, transparent 3px, transparent 7px ); border-radius: 2px; } /* Collapse to stacked on smaller screens */ @media (max-width: 1200px) { .ganim-split-wrapper { grid-template-columns: 1fr; grid-template-areas: "ai" "tables"; } .ganim-resize-handle { display: none; } .ganim-tables-pane { padding-right: 0; } .ganim-ai-pane { position: static; padding-left: 0; } } /* ========================================================================== AI SIDEBAR — redesigned dark panel ========================================================================== */ /* Outer card */ .ganim-aisb { background: linear-gradient(165deg, #16213e 0%, #1a2a5e 40%, #3d2470 100%); border-radius: 16px; box-shadow: 0 8px 40px rgba(61, 36, 112, 0.45); display: flex; flex-direction: column; max-height: calc(100vh - 100px); overflow: hidden; } /* ─── Header ─── */ .ganim-aisb-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .ganim-aisb-icon { width: 38px; height: 38px; background: rgba(255,255,255,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; flex-shrink: 0; } .ganim-aisb-name { font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1.2; } .ganim-aisb-model { font-size: 0.68rem; color: rgba(255,255,255,0.45); margin-top: 2px; } /* ─── Action buttons row ─── */ .ganim-aisb-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } /* Primary "Analyze" button */ .ganim-aisb-analyze-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff !important; border: none; font-weight: 700; font-size: 0.78rem; padding: 7px 14px; border-radius: 20px; box-shadow: 0 3px 10px rgba(102,126,234,0.45); transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; cursor: pointer; } .ganim-aisb-analyze-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(102,126,234,0.55); color: #fff !important; } .ganim-aisb-analyze-btn:active { transform: translateY(0); } /* Export mini buttons */ .ganim-aisb-exp-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #fff !important; font-size: 0.73rem; font-weight: 600; padding: 6px 10px; border-radius: 10px; transition: background 0.15s, border-color 0.15s; cursor: pointer; white-space: nowrap; } .ganim-aisb-exp-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); color: #fff !important; } /* ─── Upload collapsible ─── */ .ganim-aisb-upload { padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .ganim-aisb-upload-toggle { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 0; transition: color 0.15s; width: 100%; } .ganim-aisb-upload-toggle:hover { color: rgba(255,255,255,0.85); } .ganim-aisb-upload-body { display: none; padding-top: 8px; } .ganim-aisb-upload-body.open { display: block; } /* ─── Scrollable body ─── */ .ganim-aisb-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .ganim-aisb-body::-webkit-scrollbar { width: 4px; } .ganim-aisb-body::-webkit-scrollbar-track { background: transparent; } .ganim-aisb-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; } /* Loading */ .ganim-aisb-loading { text-align: center; padding: 18px 0; color: rgba(255,255,255,0.75); font-size: 0.82rem; } /* Error box */ .ganim-aisb-error { background: rgba(220,38,38,0.15); border: 1px solid rgba(255,100,100,0.35); border-radius: 8px; padding: 10px 12px; font-size: 0.79rem; color: #ffb3b3 !important; direction: rtl; } /* Result box */ .ganim-aisb-result { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; margin-top: 4px; } .ganim-aisb-result-title { font-size: 0.76rem; font-weight: 700; color: #a8c5ff !important; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 6px; letter-spacing: 0.03em; text-transform: uppercase; } /* Chat section inside sidebar */ .ganim-aisb-chat-sep { text-align: center; font-size: 0.72rem; color: rgba(255,255,255,0.4) !important; letter-spacing: 0.05em; font-weight: 700; position: relative; } .ganim-aisb-chat-sep::before, .ganim-aisb-chat-sep::after { content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: rgba(255,255,255,0.12); } .ganim-aisb-chat-sep::before { right: 0; } .ganim-aisb-chat-sep::after { left: 0; } /* Override old ganim-ai-card styles in sidebar context */ .ganim-aisb label, .ganim-aisb small, .ganim-aisb span:not(.sr-only), .ganim-aisb p { color: rgba(255,255,255,0.82) !important; } .ganim-aisb strong { color: #fff !important; } .ganim-aisb .text-muted { color: rgba(255,255,255,0.45) !important; } /* ─── AI Columns in GridViews ─── */ th.ganim-ai-col-header { background-color: #5e35b1 !important; color: #fff !important; } td.ganim-ai-col-data { background-color: #f0edff !important; color: #5e35b1 !important; font-weight: 600 !important; } /* ========================================================================== PRINT / PDF STYLES ========================================================================== */ @media print { /* Hide everything except the report content */ .navbar, .sidenav, .filter-card-wrapper, .ganim-aisb-actions, .ganim-aisb-upload, .ganim-aisb-chat-sep, .ganim-chat-input-row, .ganim-chat-hint, #aiLoadingDiv, .ganim-options-bar, .btn, button, .ganim-aisb-upload-toggle, .ganim-resize-handle { display: none !important; } /* Collapse split to single column */ .ganim-split-wrapper { display: block !important; } .ganim-ai-pane { position: static !important; } .ganim-aisb { max-height: none !important; background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important; border-radius: 8px !important; margin-bottom: 20px !important; } .ganim-aisb-body { overflow: visible !important; } .ganim-aisb-result { background: #f8f9ff !important; border-color: #ccc !important; } .ganim-aisb .ganim-ai-response, .ganim-aisb .ganim-ai-response p, .ganim-aisb .ganim-ai-response strong { color: #333 !important; } .ganim-aisb-result-title { color: #333 !important; } .ganim-aisb-name, .ganim-aisb-model { color: #333 !important; } .ganim-aisb-icon { background: #eee !important; color: #333 !important; } .ganim-chat-msg, .ganim-chat-bubble-user, .ganim-chat-bubble-ai { background: #f5f5f5 !important; color: #333 !important; } .ganim-chat-text, .ganim-chat-text p, .ganim-chat-label { color: #333 !important; } .ganim-chat-history { max-height: none !important; overflow: visible !important; } /* Tables: clean print */ .ganim-table-scroll { overflow: visible !important; } .ganim-table { font-size: 9pt !important; } .ganim-thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* AI report tables: white background for print/PDF */ .ganim-ai-tbl-wrap { overflow: visible !important; } .ganim-ai-table { background: #fff !important; color: #000 !important; border-color: #999 !important; font-size: 8pt !important; } .ganim-ai-table th { background: #e0e0e0 !important; color: #000 !important; } .ganim-ai-table td { background: #fff !important; color: #000 !important; } body { font-size: 10pt; } } /* ========================================================================== AI Files-Received Badge ========================================================================== */ .ganim-files-badge { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 6px; padding: 7px 12px; font-size: 0.75em; color: rgba(255,255,255,0.85); line-height: 1.7; margin-bottom: 8px; direction: rtl; } .ganim-files-badge.ganim-files-none { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: rgba(255,255,255,0.65); } /* ========================================================================== AI Response — Markdown Table Styles (inside dark sidebar + print) ========================================================================== */ .ganim-ai-tbl-wrap { overflow-x: auto; margin: 10px 0; border-radius: 6px; } .ganim-ai-table { width: 100%; border-collapse: collapse; direction: rtl; font-size: 0.78em; line-height: 1.4; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; overflow: hidden; } .ganim-ai-table thead tr { background: rgba(138,99,210,0.45); } .ganim-ai-table thead th { padding: 6px 10px; text-align: right; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.12); white-space: nowrap; } .ganim-ai-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 0.15s; } .ganim-ai-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.05); } .ganim-ai-table tbody tr:hover { background: rgba(138,99,210,0.2); } .ganim-ai-table tbody td { padding: 5px 10px; text-align: right; color: rgba(255,255,255,0.9); border-left: 1px solid rgba(255,255,255,0.08); } /* Last row (סה"כ total row) gets slight emphasis */ .ganim-ai-table tbody tr:last-child td { font-weight: 600; background: rgba(138,99,210,0.25); color: #fff; } /* ========================================================================== MSLOLEM — Responsive route table ========================================================================== */ /* Scrollable wrapper — horizontal scroll on small screens */ .mslolem-tbl-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 8px 8px; } /* Base table */ .mslolem-gv { width: 100%; min-width: 900px; /* ensures columns never collapse below readable width */ border-collapse: separate; border-spacing: 0; font-size: .82rem; direction: rtl; margin: 0; } /* Header */ .mslolem-gv .mslolem-head th, .mslolem-gv thead th { background: #2d2d5a; color: #fff; font-weight: 600; font-size: .78rem; padding: 8px 10px; text-align: center; white-space: nowrap; border-bottom: 2px solid #5e72e4; position: sticky; top: 0; z-index: 2; } /* Sort link in header */ .mslolem-gv thead th a, .mslolem-gv thead th a:visited { color: #c5cdf9 !important; text-decoration: none; } .mslolem-gv thead th a:hover { color: #fff !important; } /* Data rows */ .mslolem-gv .mslolem-row td, .mslolem-gv tbody tr td { padding: 6px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid #eef0f7; white-space: nowrap; color: #333; font-size: .81rem; } /* Alternating rows */ .mslolem-gv .mslolem-row-alt td, .mslolem-gv tbody tr:nth-child(even) td { background: #f4f5ff; } /* Row hover */ .mslolem-gv tbody tr:hover td { background: #e8ecff !important; transition: background .15s; } /* Numeric columns — right-align money/km columns */ .mslolem-gv tbody tr td:nth-child(n+11) { text-align: left; font-variant-numeric: tabular-nums; font-weight: 500; } /* Truncate long institution names */ .mslolem-gv tbody tr td:nth-child(4) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Footer */ .mslolem-gv .mslolem-footer td { background: #1C5E55; color: #fff; font-weight: 700; padding: 7px 10px; } /* ========================================================================== Analyze button — busy state (visual-only, no disabled attr) ========================================================================== */ .ganim-btn-busy { opacity: 0.65; cursor: wait !important; pointer-events: none; /* prevents double-click but doesn't affect the already-fired postback */ } /* ========================================================================== Mslolem filter bar — responsive wrapping ========================================================================== */ @media (max-width: 992px) { .mslolem-gv { font-size: .75rem; } .mslolem-gv .mslolem-head th, .mslolem-gv thead th { font-size: .72rem; padding: 6px 7px; } .mslolem-gv tbody tr td { padding: 5px 7px; } } /* ========================================================================== MSLOLEM — Missing class aliases, loading spinner, DataTables, modern UI ========================================================================== */ /* ── AI sidebar header labels used in Mslolem.aspx ── */ .ganim-aisb-title { font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.25; } .ganim-aisb-subtitle { font-size: .71rem; color: rgba(255,255,255,.46); margin-top: 2px; line-height: 1.3; } /* ── Full-width Analyze button ── */ .ganim-analyze-btn { display: block; width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff !important; border: none; font-weight: 700; font-size: .83rem; padding: 10px 18px; border-radius: 22px; box-shadow: 0 4px 16px rgba(102,126,234,.45); transition: transform .15s, box-shadow .15s; white-space: nowrap; cursor: pointer; margin-top: 10px; text-align: center; letter-spacing: .01em; } .ganim-analyze-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(102,126,234,.55); color: #fff !important; } .ganim-analyze-btn:active { transform: translateY(0); } .ganim-analyze-btn.ganim-btn-busy { opacity: .6; cursor: wait !important; pointer-events: none; } /* ── File upload help text ── */ .ganim-upload-help { font-size: .70rem; color: rgba(255,255,255,.40); margin-top: 5px; direction: rtl; line-height: 1.4; } /* ── CSV upload label (Build mode) ── */ .mslolem-upload-label { font-size: .85rem; font-weight: 600; white-space: nowrap; } /* ── AI error alias (Mslolem uses .ganim-ai-error) ── */ .ganim-ai-error { display: block; background: rgba(220,38,38,.14); border: 1px solid rgba(255,100,100,.32); border-radius: 8px; padding: 10px 13px; margin: 6px 0; font-size: .79rem; color: #ffb3b3 !important; direction: rtl; line-height: 1.55; } /* ── Chat send button alias (Mslolem uses .ganim-chat-send-btn) ── */ .ganim-chat-send-btn { background: rgba(255,255,255,.9); color: #764ba2; border: none; font-weight: 700; font-size: .82rem; padding: 8px 18px; border-radius: 20px; white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: background .15s, transform .1s; } .ganim-chat-send-btn:hover { background: #fff; color: #667eea; transform: translateY(-1px); } /* ── Loading indicator (Mslolem uses .ganim-loading / .ganim-loading-spinner) ── */ .ganim-loading { display: flex; align-items: center; gap: 12px; padding: 16px 14px; color: rgba(255,255,255,.78); font-size: .82rem; direction: rtl; } .ganim-loading-spinner { width: 22px; height: 22px; flex-shrink: 0; border: 3px solid rgba(255,255,255,.18); border-top-color: #a78bfa; border-radius: 50%; animation: ganim-rotate .75s linear infinite; } @keyframes ganim-rotate { to { transform: rotate(360deg); } } /* ── Mslolem sticky header: remove sticky for DataTables compat ── */ .mslolem-dt-enabled .mslolem-gv .mslolem-head th, .mslolem-dt-enabled .mslolem-gv thead th { position: static; } /* ── CRITICAL: break the min-width expansion chain ────────────────────────── Problem: Bootstrap .card uses display:flex + flex-direction:column. Flex items have min-width:auto by default, which resolves to the item's min-content size. The .card-body contains a table with min-width:900px, so card-body's min-width:auto → 900px. This makes .mslolem-tbl-scroll also 900px, so the table never actually overflows its scroll container. Fix: force min-width:0 on every element in the chain so the grid cell width (1fr, typically 600-800px) is honoured and the table overflows .mslolem-tbl-scroll → horizontal scrollbar appears. ────────────────────────────────────────────────────────────────────────── */ .ganim-tables-pane .card, .ganim-tables-pane .card-body, .ganim-tables-pane .msl-card, .msl-tables-pane .msl-card { min-width: 0; /* Clip the card so box-shadow is not affected */ } /* The scroll container: constrained width from its parent, table overflows it */ .mslolem-tbl-scroll { /* Ensure it can never be wider than its own parent */ max-width: 100%; box-sizing: border-box; } /* ========================================================================== DATATABLES — custom theme to match Mslolem dark/blue palette ========================================================================== */ /* .mslolem-tbl-scroll is the ONE horizontal scroll layer. DataTables' inline width:100% on the table is cleared by JS (initComplete / drawCallback in Mslolem.aspx) so the table overflows and triggers the bar. */ .dataTables_wrapper { overflow: visible; min-width: 0; } .mslolem-tbl-scroll .dataTables_wrapper { width: 100%; } /* Search / filter bar */ .dataTables_wrapper .dataTables_filter { float: none !important; text-align: right !important; padding: 10px 14px 6px; direction: rtl; border-bottom: 1px solid #eef0f7; background: #f8f9ff; border-radius: 8px 8px 0 0; } .dataTables_wrapper .dataTables_filter label { display: flex !important; align-items: center; gap: 8px; direction: rtl; justify-content: flex-end; font-size: .83rem; color: #525f7f; font-weight: 600; margin: 0; } .dataTables_wrapper .dataTables_filter input { border: 1.5px solid #d1d7e0 !important; border-radius: 8px !important; padding: 5px 12px !important; font-size: .83rem !important; direction: rtl; color: #333 !important; background: #fff !important; transition: border-color .15s, box-shadow .15s; width: 220px !important; outline: none; } .dataTables_wrapper .dataTables_filter input:focus { border-color: #5e72e4 !important; box-shadow: 0 0 0 3px rgba(94,114,228,.12) !important; } /* DataTables info text */ .dataTables_wrapper .dataTables_info { float: none !important; text-align: right !important; padding: 6px 14px 8px; font-size: .78rem; color: #8898aa; direction: rtl; border-top: 1px solid #eef0f7; } /* Pagination */ .dataTables_wrapper .dataTables_paginate { text-align: right !important; padding: 8px 14px; direction: rtl; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; font-size: .78rem !important; padding: 4px 10px !important; cursor: pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #5e72e4 !important; border-color: #5e72e4 !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) { background: #eef0fd !important; border-color: #5e72e4 !important; color: #5e72e4 !important; } /* DataTables sort arrows on Mslolem table */ .mslolem-gv thead th.sorting, .mslolem-gv thead th.sorting_asc, .mslolem-gv thead th.sorting_desc { cursor: pointer; } .mslolem-gv thead th.sorting::after { content: ' ⇅'; opacity: .4; font-size: .7em; } .mslolem-gv thead th.sorting_asc::after { content: ' ↑'; opacity: .9; font-size: .7em; } .mslolem-gv thead th.sorting_desc::after { content: ' ↓'; opacity: .9; font-size: .7em; } /* ========================================================================== MSLOLEM — Modern filter card ========================================================================== */ .mslolem-filter-card .card-header { background: linear-gradient(87deg, #f8f9ff 0%, #eef0fd 100%); border-bottom: 1px solid #e2e6ff !important; } /* Period listbox: taller, cleaner */ .mslolem-lb { border-radius: 8px !important; border: 1.5px solid #d1d7e0 !important; } /* Dropdown enhancements */ .mslolem-ddl { border-radius: 8px !important; border: 1.5px solid #d1d7e0 !important; } /* ========================================================================== PRINT additions — hide new elements ========================================================================== */ @media print { .ganim-loading, .ganim-analyze-btn, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { display: none !important; } } /* ========================================================================== MSLOLEM — AI OUTPUT REDESIGN (.ms-ai-*) A clean white-card design that reads like a professional report inside the dark AI sidebar. ========================================================================== */ /* ── Outer body wrapper ── */ .ms-ai-body { padding: 4px 2px; direction: rtl; font-family: inherit; } /* ── Section headings ── */ .ms-ai-h1 { font-size: 0.92rem; font-weight: 700; color: #fff; margin: 14px 0 6px; padding-bottom: 5px; border-bottom: 2px solid rgba(255,255,255,0.25); letter-spacing: 0.01em; } .ms-ai-h2 { font-size: 0.84rem; font-weight: 700; color: #a8c5ff; margin: 12px 0 4px; padding-right: 8px; border-right: 3px solid #a8c5ff; } .ms-ai-h3 { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75); margin: 8px 0 3px; } /* ── Regular paragraph ── */ .ms-ai-p { font-size: 0.83rem; line-height: 1.75; color: rgba(255,255,255,0.88); margin: 0 0 5px; } .ms-ai-p strong { color: #fff; font-weight: 700; } .ms-ai-p em { color: rgba(255,255,255,0.75); font-style: italic; } /* ── Paragraph gap (blank line) ── */ .ms-ai-gap { height: 6px; } /* ── Bullet list ── */ .ms-ai-list { margin: 4px 0 8px 0; padding-right: 18px; padding-left: 0; list-style: none; } .ms-ai-list li { font-size: 0.83rem; line-height: 1.7; color: rgba(255,255,255,0.88); padding: 2px 0; position: relative; } .ms-ai-list li::before { content: '◆'; position: absolute; right: -16px; font-size: 0.45rem; top: 0.55em; color: #a8c5ff; } .ms-ai-list li strong { color: #fff; font-weight: 700; } /* ── Markdown / AI table ── */ .ms-ai-tbl-wrap { overflow-x: auto; margin: 8px 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); } .ms-ai-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; direction: rtl; } .ms-ai-table thead th { background: rgba(94,114,228,0.55); color: #fff; padding: 7px 12px; text-align: right; font-weight: 600; white-space: nowrap; border-bottom: 2px solid rgba(255,255,255,0.2); } .ms-ai-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.07); transition: background 0.12s; } .ms-ai-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); } .ms-ai-table tbody tr:hover { background: rgba(94,114,228,0.22); } .ms-ai-table tbody td { padding: 6px 12px; text-align: right; color: rgba(255,255,255,0.88); vertical-align: middle; } .ms-ai-table tbody tr:last-child td { font-weight: 600; color: #fff; background: rgba(94,114,228,0.28); } /* ── Empty state ── */ .ms-ai-empty { color: rgba(255,255,255,0.45); font-size: 0.82rem; font-style: italic; text-align: center; padding: 12px 0; } /* ── Print overrides for ms-ai-* ── */ @media print { .ms-ai-h1, .ms-ai-h2, .ms-ai-h3 { color: #000 !important; border-color: #999 !important; } .ms-ai-p, .ms-ai-list li { color: #000 !important; } .ms-ai-table thead th { background: #ddd !important; color: #000 !important; } .ms-ai-table tbody td { color: #000 !important; } .ms-ai-tbl-wrap { border-color: #ccc !important; overflow: visible !important; } } /* ══════════════════════════════════════════════════════════════════════ MODERN NAVBAR — Complete Redesign (Sidebar + Top Bar) Design: clean white sidebar · white top bar · RTL Hebrew v4 — light theme, working dropdowns, RTL fixes ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── SIDEBAR SHELL — light white ───────────────────────────────────────────────────────────────────── */ #sidenav-main { background: #ffffff !important; color: #1e293b !important; /* base text dark — prevents white-on-white */ border-left: 1px solid #e8ecf2 !important; box-shadow: -2px 0 24px rgba(15,23,42,0.07) !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } #sidenav-main::-webkit-scrollbar { width: 4px; } #sidenav-main::-webkit-scrollbar-track { background: transparent; } #sidenav-main::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* ───────────────────────────────────────────────────────────────────── BRAND LOGO ───────────────────────────────────────────────────────────────────── */ #sidenav-main .navbar-brand { padding: 20px 24px 16px !important; display: flex !important; justify-content: center !important; border-bottom: 1px solid #f1f5f9 !important; margin-bottom: 6px !important; } #sidenav-main .navbar-brand-img { max-height: 40px !important; filter: none !important; } /* ───────────────────────────────────────────────────────────────────── SECTION HEADINGS (h6.navbar-heading) ───────────────────────────────────────────────────────────────────── */ #sidenav-main .navbar-heading { font-size: 0.6rem !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #94a3b8 !important; padding: 14px 24px 5px !important; margin: 0 !important; text-align: right !important; } /* ───────────────────────────────────────────────────────────────────── DIVIDERS ───────────────────────────────────────────────────────────────────── */ #sidenav-main hr { border: none !important; border-top: 1px solid #f1f5f9 !important; margin: 8px 20px !important; } /* ───────────────────────────────────────────────────────────────────── COLLAPSE HEADER (mobile toggler header) ───────────────────────────────────────────────────────────────────── */ #sidenav-main .navbar-collapse-header { background: #f8fafc !important; border-bottom: 1px solid #f1f5f9 !important; } /* ───────────────────────────────────────────────────────────────────── ALL NAV LINKS — base ───────────────────────────────────────────────────────────────────── */ /* nav list — no forced width; let flex/block handle natural sizing */ #sidenav-main .navbar-nav, #sidenav-main .navbar-nav ul { padding-right: 0 !important; padding-left: 0 !important; } #sidenav-main .navbar-nav .nav-link, #sidenav-main .dropdown-container .nav-link { color: #475569 !important; font-size: 0.82rem !important; font-weight: 500 !important; border-radius: 10px !important; padding: 9px 18px !important; margin: 2px 10px !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: background 0.15s ease, color 0.15s ease !important; white-space: normal !important; overflow: hidden !important; line-height: 1.4 !important; position: relative !important; } /* icons inside nav links */ #sidenav-main .navbar-nav .nav-link > i, #sidenav-main .dropdown-container .nav-link > i { font-size: 0.82rem !important; width: 20px !important; text-align: center !important; flex-shrink: 0 !important; } /* ───────────────────────────────────────────────────────────────────── HOVER STATE ───────────────────────────────────────────────────────────────────── */ #sidenav-main .navbar-nav .nav-link:hover, #sidenav-main .dropdown-container .nav-link:hover { background: #f1f5f9 !important; color: #1e293b !important; text-decoration: none !important; } /* ───────────────────────────────────────────────────────────────────── ACTIVE STATE (.mn-active added by JS) ───────────────────────────────────────────────────────────────────── */ #sidenav-main .navbar-nav .nav-link.mn-active, #sidenav-main .dropdown-container .nav-link.mn-active, #sidenav-main .nav-item.active > .nav-link { background: #eef2ff !important; color: #4f46e5 !important; font-weight: 600 !important; box-shadow: none !important; } /* Active indicator bar — left edge of item (faces content area on right-side sidebar) */ #sidenav-main .navbar-nav .nav-link.mn-active::before, #sidenav-main .dropdown-container .nav-link.mn-active::before { content: '' !important; position: absolute !important; left: 0 !important; top: 6px !important; bottom: 6px !important; width: 3px !important; background: #6366f1 !important; border-radius: 0 4px 4px 0 !important; } /* ───────────────────────────────────────────────────────────────────── DROPDOWN TOGGLE BUTTON ───────────────────────────────────────────────────────────────────── */ #sidenav-main .dropdown-btn { cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: calc(100% - 20px) !important; user-select: none !important; } #sidenav-main .dropdown-btn.mn-open { background: #f8fafc !important; color: #1e293b !important; } /* Chevron */ #sidenav-main .dropdown-btn .mn-chevron { font-size: 0.6rem !important; color: #94a3b8 !important; flex-shrink: 0 !important; transition: transform 0.24s cubic-bezier(.4,0,.2,1) !important; } #sidenav-main .dropdown-btn.mn-open .mn-chevron { transform: rotate(180deg) !important; color: #6366f1 !important; } /* ───────────────────────────────────────────────────────────────────── DROPDOWN CONTAINER — display:none/block (reliable cross-browser) ───────────────────────────────────────────────────────────────────── */ #sidenav-main .dropdown-container { display: none !important; margin: 0 !important; padding: 2px 0 4px !important; background: #fafbfc !important; border-radius: 0 0 8px 8px !important; } #sidenav-main .dropdown-container.mn-open { display: block !important; } /* Sub-link items — RTL indent */ #sidenav-main .dropdown-container .nav-link { padding: 7px 28px 7px 16px !important; margin: 1px 18px 1px 10px !important; font-size: 0.77rem !important; border-radius: 8px !important; color: #64748b !important; } #sidenav-main .dropdown-container .nav-link::after { display: none !important; } /* ───────────────────────────────────────────────────────────────────── MOBILE OVERLAY BACKDROP ───────────────────────────────────────────────────────────────────── */ #mn-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.42); z-index: 1045; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; } #mn-overlay.mn-active { display: block; } /* ───────────────────────────────────────────────────────────────────── MOBILE OPEN BUTTON (hamburger in top navbar) ───────────────────────────────────────────────────────────────────── */ .mn-mob-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; padding: 0; } .mn-mob-toggle:hover, .mn-mob-toggle:focus { background: #eef2ff; color: #4f46e5; outline: none; } /* ───────────────────────────────────────────────────────────────────── MOBILE CLOSE BUTTON (inside sidebar drawer) ───────────────────────────────────────────────────────────────────── */ .mn-close-btn { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: #fee2e2; border: none; color: #ef4444; cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s; } .mn-close-btn:hover { background: #fecaca; } /* ───────────────────────────────────────────────────────────────────── MOBILE SIDEBAR HEADER (brand + close row inside drawer) ───────────────────────────────────────────────────────────────────── */ .mn-mob-header { display: none; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; background: #fff; flex-shrink: 0; direction: rtl; } /* ───────────────────────────────────────────────────────────────────── DESKTOP (≥768px) — sidebar always visible, fixed right ───────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) { #sidenav-main { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 250px !important; z-index: 1000 !important; transform: none !important; display: flex !important; flex-direction: column !important; } /* Always show the nav collapse content on desktop */ #sidenav-main .navbar-collapse { display: flex !important; flex-direction: column !important; flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Push main content away from the fixed sidebar. Use the general sibling selector (~) so this rule ONLY applies on admin pages where #sidenav-main precedes .main-content in the DOM. Pages without #sidenav-main (e.g. the login page) are unaffected. */ #sidenav-main ~ .main-content { margin-right: 250px !important; } /* Hide mobile-only UI */ .mn-mob-toggle { display: none !important; } .mn-mob-header { display: none !important; } .mn-close-btn { display: none !important; } #mn-overlay { display: none !important; } } /* ───────────────────────────────────────────────────────────────────── MOBILE (<768px) — slide-in drawer from the right ───────────────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { /* Sidebar off-screen to the right; slides in on mn-mob-open */ #sidenav-main { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 88vw !important; height: 100vh !important; z-index: 1050 !important; transform: translateX(105%) !important; transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important; display: flex !important; flex-direction: column !important; } #sidenav-main.mn-mob-open { transform: translateX(0) !important; box-shadow: -8px 0 32px rgba(15,23,42,0.18) !important; } /* Always show collapse content inside the drawer */ #sidenav-main .navbar-collapse { display: flex !important; flex-direction: column !important; flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Hide Argon's default elements (replaced by our custom mobile header) */ #sidenav-main > .container-fluid > .navbar-toggler { display: none !important; } #sidenav-main > .container-fluid > .navbar-brand { display: none !important; } #sidenav-main .navbar-collapse-header { display: none !important; } /* Show custom mobile elements */ .mn-mob-header { display: flex !important; } .mn-close-btn { display: flex !important; } .mn-mob-toggle { display: flex !important; } /* Mobile top bar — RTL: logo on right, hamburger on left */ .mobile-nav-items { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; justify-content: space-between !important; direction: rtl !important; } .mobile-nav-items .mn-brand-link { color: #1e293b !important; text-decoration: none !important; font-weight: 700 !important; font-size: 0.88rem !important; flex-shrink: 0 !important; } .mobile-nav-items .mn-user-link { color: #344767 !important; text-decoration: none !important; overflow: hidden !important; max-width: 110px !important; } .mobile-nav-items .mn-user-link span.avatar { flex-shrink: 0 !important; } /* Lock body scroll while drawer is open */ body.mn-noscroll { overflow: hidden !important; } } /* ══════════════════════════════════════════════════════════════════════ TOP NAVBAR (#navbar-main) ══════════════════════════════════════════════════════════════════════ */ #navbar-main { background: #fff !important; box-shadow: 0 2px 20px rgba(15,23,42,0.08) !important; border-bottom: 1px solid rgba(226,232,240,0.8) !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 62px !important; } #navbar-main .navbar-nav .nav-link { color: #344767 !important; font-size: 0.82rem !important; } /* Year label */ #navbar-main .h6.mb-0 { font-size: 0.75rem !important; font-weight: 600 !important; color: #8898aa !important; white-space: nowrap !important; letter-spacing: 0.02em !important; } /* Year DDL — pill style */ #navbar-main .form-control-sm { height: 34px !important; padding: 4px 14px !important; font-size: 0.8rem !important; font-weight: 500 !important; color: #344767 !important; background: #f8fafc !important; border: 1.5px solid #dde3ed !important; border-radius: 20px !important; box-shadow: none !important; transition: border-color 0.15s, box-shadow 0.15s !important; min-width: 140px !important; } #navbar-main .form-control-sm:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; background: #fff !important; outline: none !important; } /* Separator */ #navbar-main .text-white.mx-3 { color: #cbd5e1 !important; font-weight: 300 !important; } /* User avatar ring */ #navbar-main .avatar.rounded-circle { border: 2px solid #e2e8f0 !important; transition: border-color 0.15s, box-shadow 0.15s !important; } #navbar-main .nav-link:hover .avatar.rounded-circle { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important; } /* User name label */ #navbar-main .media-body .mb-0 { font-size: 0.82rem !important; font-weight: 600 !important; color: #344767 !important; } /* Logout button — ghost outline pill */ #navbar-main .btn-danger, #navbar-main .btn-danger:visited { background: transparent !important; border: 1.5px solid #f5365c !important; color: #f5365c !important; border-radius: 20px !important; padding: 5px 18px !important; font-size: 0.77rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; transition: background 0.16s, color 0.16s, box-shadow 0.16s !important; box-shadow: none !important; } #navbar-main .btn-danger:hover, #navbar-main .btn-danger:focus { background: #f5365c !important; color: #fff !important; box-shadow: 0 4px 12px rgba(245,54,92,0.25) !important; } /* ───────────────────────────────────────────────────────────────────── TOP HEADER GRADIENT (bg-gradient-primary banner) ───────────────────────────────────────────────────────────────────── */ .header.bg-gradient-primary { background: linear-gradient(87deg, #312e81 0%, #4f46e5 100%) !important; } /* ───────────────────────────────────────────────────────────────────── DASHBOARD QUICK-ACTION CARDS ───────────────────────────────────────────────────────────────────── */ .db-quick-card { transition: transform 0.18s ease, box-shadow 0.18s ease !important; border-radius: 14px !important; cursor: pointer !important; } .db-quick-card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 32px rgba(15,23,42,0.12) !important; text-decoration: none !important; } .db-quick-card .card-body h6 { transition: color 0.15s ease !important; } .db-quick-card:hover .card-body h6 { color: #4f46e5 !important; } /* soft-color icon backgrounds */ .bg-soft-pink { background: #fce7f3 !important; } .bg-soft-red { background: #fee2e2 !important; } .bg-soft-info { background: #e0f2fe !important; } .bg-soft-success { background: #dcfce7 !important; } .bg-soft-blue { background: #dbeafe !important; } .bg-soft-warning { background: #fef3c7 !important; } .bg-soft-purple { background: #ede9fe !important; } .bg-soft-dark { background: #f1f5f9 !important; } .bg-soft-indigo { background: #eef2ff !important; } .text-pink { color: #ec4899 !important; } .text-purple { color: #7c3aed !important; } /* dashboard welcome card */ .db-welcome-card { background: linear-gradient(135deg, #eef2ff 0%, #f8faff 100%) !important; border: 1px solid #e0e7ff !important; border-radius: 16px !important; } /* ───────────────────────────────────────────────────────────────────── MOBILE — top nav items ───────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { #navbar-main .btn-danger { border-radius: 18px !important; padding: 4px 14px !important; font-size: 0.72rem !important; } } /* ───────────────────────────────────────────────────────────────────── PRINT — hide sidebar + topnav ───────────────────────────────────────────────────────────────────── */ @media print { #sidenav-main, #navbar-main { display: none !important; } }