/* ========================================== ADMIN PANEL - Sidebar & Navigation Main layout sidebar and menu items ========================================== */ .main-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-height: 0; } .sidebar { border-right: 1px solid var(--bp-border-subtle); background: var(--bp-gradient-sidebar); padding: 14px 10px; display: flex; flex-direction: column; gap: 18px; min-width: 0; height: 100%; max-height: 100vh; overflow-y: auto; overflow-x: hidden; transition: background 0.3s ease, border-color 0.3s ease; } .sidebar-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-text); padding: 8px 6px 6px 6px; margin-top: 12px; } .sidebar-menu { display: flex; flex-direction: column; gap: 4px; } .sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--bp-text-muted); } .sidebar-item.active { background: var(--bp-surface-elevated); color: var(--bp-accent); border: 1px solid var(--bp-accent-soft); } .sidebar-item-label { display: flex; align-items: center; gap: 7px; } .sidebar-item-badge { font-size: 10px; border-radius: 999px; padding: 2px 7px; border: 1px solid var(--bp-border-subtle); } /* Sub-Navigation */ .sidebar-sub-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px 20px; margin-top: 4px; } .sidebar-sub-item { font-size: 12px; color: var(--bp-text-muted); padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; position: relative; } .sidebar-sub-item::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--bp-border); } .sidebar-sub-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--bp-text); } .sidebar-sub-item.active { background: rgba(var(--bp-primary), 0.15); color: var(--bp-primary); } .sidebar-sub-item.active::before { background: var(--bp-primary); width: 6px; height: 6px; } .sidebar-footer { margin-top: auto; font-size: 11px; color: var(--bp-text-muted); padding: 0 6px; } /* Template Items */ .template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s ease; } .template-item:hover { background: rgba(255, 255, 255, 0.08); } /* Letter Items */ .letter-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; border-bottom: 1px solid var(--bp-border); } .letter-item:last-child { border-bottom: none; } .letter-item:hover { background: rgba(255, 255, 255, 0.05); } .letter-info { display: flex; flex-direction: column; gap: 2px; } .letter-title { font-size: 13px; font-weight: 500; } .letter-date { font-size: 11px; color: var(--bp-text-muted); } .letter-status { font-size: 10px; padding: 2px 6px; border-radius: 4px; } .letter-status.sent { background: rgba(16, 185, 129, 0.2); color: #10b981; } .letter-status.draft { background: rgba(245, 158, 11, 0.2); color: #f59e0b; } /* Meeting Items */ .meeting-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); cursor: pointer; } .meeting-item:hover { background: rgba(255, 255, 255, 0.08); } .meeting-info { display: flex; flex-direction: column; gap: 2px; } .meeting-title { font-size: 12px; font-weight: 500; } .meeting-time { font-size: 11px; color: var(--bp-text-muted); } /* Light Mode */ [data-theme="light"] .sidebar-item.active { background: var(--bp-primary-soft); color: var(--bp-primary); border: 1px solid var(--bp-primary); } [data-theme="light"] .sidebar-sub-item:hover { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .sidebar-sub-item.active { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; } [data-theme="light"] .sidebar-sub-item.active::before { background: #0ea5e9; } [data-theme="light"] .template-item:hover { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .meeting-item { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .meeting-item:hover { background: rgba(0, 0, 0, 0.05); } /* RTL Support */ [dir="rtl"] .sidebar { border-right: none; border-left: 1px solid rgba(148,163,184,0.2); } [dir="rtl"] .main-layout { direction: rtl; }