html {
overflow-x: hidden;
max-width: 100vw;
}
.doc-actions{margin-top:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.doc-action-btn{border:1px solid var(--border-soft);background:#fff;border-radius:6px;
padding:.35rem .55rem;font-size:.7rem;cursor:pointer}
.doc-action-btn.danger{border-color:#e7b3b3;color:#8a1f1f;background:#fff4f4}
.doc-action-btn.restore{border-color:#a3d6c1;color:#95a39f;background:#eefaf4}
:root {
--bg-app: #e1e3d5 ;
--bg-card: #e1e3d5 ;
--bg-sidebar-from: #aaab84 ;
--bg-sidebar-to: #aaab84 ;
--border-soft: rgba(91, 74, 56, 0.071);
--text-dark: #71716b;
--text-mid: #000000;
--accent-soft: #51412f;
--accent-strong: #382e14;
--radius-lg: 16px;
--radius-md: 10px;
--radius-sm: 6px;
--shadow-card: 0 12px 32px rgba(0,0,0,0.08);
--shadow-topbar: 0 2px 6px rgba(0,0,0,0.08);
--shadow-btn: 0 6px 16px rgba(0,0,0,0.18);
--grad-btn: linear-gradient(to right, #3a7f5d, #5dbb8d);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
overflow-x: hidden;
max-width: 100%;
position: relative;
margin: 0;
background: var(--bg-app);
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-dark);
display: flex;
min-height: 100vh;
}
/* ====== LAYOUT ====== */
.dashboard {
display: flex;
width: 100%;
min-height: 100vh;
position: relative;
overflow-x: hidden;
max-width: 100vw;
}
/* ============================================
🌙 DARK MODE - PROFESSIONAL DARK GREEN THEME
============================================ */
.theme-dark {
/* רקע כללי - ירוק כהה עמוק */
--bg-app: #0a0f0d;
--bg-card: #121816;
/* סיידבר - גרדיאנט ירוק כהה */
--bg-sidebar-from: #1a2520;
--bg-sidebar-to: #0f1814;
/* גבולות רכים */
--border-soft: rgba(82, 152, 115, 0.15);
/* טקסט */
--text-dark: #b8c9c0;
--text-mid: #e8f0ec;
/* אקסנטים ירוקים */
--accent-soft: #2d5a43;
--accent-strong: #3d7a59;
/* צללים עמוקים */
--shadow-card: 0 12px 40px rgba(0, 0, 0, 0.6);
--shadow-topbar: 0 2px 12px rgba(0, 0, 0, 0.5);
--shadow-btn: 0 6px 20px rgba(0, 0, 0, 0.4);
/* גרדיאנט לכפתורים */
--grad-btn: linear-gradient(135deg, #1e4d3a, #2d6b4d);
}
/* רקע גוף */
.theme-dark body {
background: #0a0f0d !important;
color: #b8c9c0;
}
/* סיידבר */
.theme-dark .sidebar {
background: linear-gradient(180deg, #1a2520 0%, #0f1814 100%) !important;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.8);
border-left: 1px solid rgba(82, 152, 115, 0.15);
}
/* לוגו וברנדינג */
.theme-dark .brand-name {
color: #a8d4ba;
text-shadow: 0 2px 8px rgba(168, 212, 186, 0.3);
}
.theme-dark .brand-sub {
color: #7a9b88;
}
/* פאנל משתמש */
.theme-dark .user-panel {
background: rgba(45, 90, 67, 0.2);
border: 1px solid rgba(82, 152, 115, 0.25);
backdrop-filter: blur(10px);
}
.theme-dark .user-panel-name {
color: #c5e3d2;
}
.theme-dark .user-panel-mail {
color: #8ba89a;
}
/* פריטי תפריט */
.theme-dark .menu-item {
color: #9eb8a9;
border: 1px solid transparent;
transition: all 0.25s ease;
}
.theme-dark .menu-item:hover {
background: rgba(45, 90, 67, 0.3);
border-color: rgba(82, 152, 115, 0.3);
color: #c5e3d2;
transform: translateX(-3px);
}
.theme-dark .menu-item.active {
background: rgba(61, 122, 89, 0.25);
border-color: rgba(82, 152, 115, 0.4);
color: #d4f0e0;
box-shadow: 0 4px 12px rgba(45, 90, 67, 0.3);
}
/* כפתור יציאה */
.theme-dark .logout-btn {
background: rgba(30, 77, 58, 0.4);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #c5e3d2;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.theme-dark .logout-btn:hover {
background: rgba(45, 90, 67, 0.5);
border-color: rgba(82, 152, 115, 0.4);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
/* בר עליון */
.theme-dark .top-bar {
background: rgba(18, 24, 22, 0.95);
border-bottom: 1px solid rgba(82, 152, 115, 0.15);
backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.theme-dark .top-actions .btn {
background: rgba(45, 90, 67, 0.3);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #b8c9c0;
}
.theme-dark .top-actions .btn:hover {
background: rgba(61, 122, 89, 0.4);
color: #d4f0e0;
border-color: rgba(82, 152, 115, 0.5);
}
/* כרטיסי קטגוריות */
.theme-dark .category-card {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.2);
backdrop-filter: blur(8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-dark .category-card:hover {
background: rgba(26, 37, 32, 0.7);
border-color: rgba(82, 152, 115, 0.35);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.theme-dark .category-title {
color: #c5e3d2;
}
.theme-dark .category-count {
color: #8ba89a;
}
/* כרטיסי מסמכים */
.theme-dark .doc-card {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.2);
backdrop-filter: blur(10px);
}
.theme-dark .doc-card:hover {
background: rgba(26, 37, 32, 0.8);
border-color: rgba(82, 152, 115, 0.4);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.theme-dark .doc-card-title {
color: #d4f0e0;
}
.theme-dark .doc-card-org,
.theme-dark .doc-card-meta {
color: #9eb8a9;
}
/* כפתורים */
.theme-dark .btn-primary,
.theme-dark .upload-btn {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d);
border: 1px solid rgba(82, 152, 115, 0.4);
color: #e8f0ec;
box-shadow: 0 6px 20px rgba(30, 77, 58, 0.4);
}
.theme-dark .btn-primary:hover,
.theme-dark .upload-btn:hover {
background: linear-gradient(135deg, #2d6b4d, #3d7a59);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(45, 107, 77, 0.5);
}
/* כפתורי פעולה על מסמכים */
.theme-dark .doc-action-btn {
background: rgba(18, 24, 22, 0.8);
border: 1px solid rgba(82, 152, 115, 0.25);
color: #b8c9c0;
}
.theme-dark .doc-action-btn:hover {
background: rgba(45, 90, 67, 0.4);
border-color: rgba(82, 152, 115, 0.4);
color: #d4f0e0;
}
.theme-dark .doc-action-btn.danger {
background: rgba(90, 30, 30, 0.3);
border-color: rgba(200, 80, 80, 0.3);
color: #ffb3b3;
}
.theme-dark .doc-action-btn.danger:hover {
background: rgba(120, 40, 40, 0.5);
border-color: rgba(220, 100, 100, 0.5);
}
.theme-dark .doc-action-btn.restore {
background: rgba(30, 77, 58, 0.3);
border-color: rgba(82, 152, 115, 0.3);
color: #a8d4ba;
}
/* שדות טקסט */
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark textarea,
.theme-dark select {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.25);
color: #e8f0ec;
backdrop-filter: blur(8px);
}
.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
background: rgba(26, 37, 32, 0.8);
border-color: rgba(82, 152, 115, 0.5);
box-shadow: 0 0 0 3px rgba(45, 90, 67, 0.2);
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
color: #7a9b88;
}
/* מודלים */
.theme-dark .modal {
background: #121816;
border: 1px solid rgba(82, 152, 115, 0.3);
}
.theme-dark .modal-head {
background: #1a2520;
border-bottom: 1px solid rgba(82, 152, 115, 0.25);
color: #c5e3d2;
}
.theme-dark .modal-foot {
background: #1a2520;
border-top: 1px solid rgba(82, 152, 115, 0.25);
}
.theme-dark .scroll-area {
background: #121816;
}
.theme-dark .modal-backdrop {
background: rgba(5, 8, 7, 0.85);
backdrop-filter: blur(4px);
}
/* התראות */
.theme-dark .eco-alert {
background: rgba(18, 24, 22, 0.95);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #e8f0ec;
backdrop-filter: blur(12px);
}
.theme-dark .eco-success {
border-color: rgba(82, 152, 115, 0.5);
background: rgba(30, 77, 58, 0.95);
}
.theme-dark .eco-error {
border-color: rgba(200, 80, 80, 0.5);
background: rgba(90, 30, 30, 0.95);
}
/* חיפוש */
.theme-dark #categorySearch {
background: rgb(3 4 4 / 85%);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #e8f0ec;
}
.theme-dark #categorySearch:focus {
background: rgba(26, 37, 32, 0.9);
border-color: rgba(82, 152, 115, 0.6);
box-shadow: 0 0 0 3px rgba(45, 90, 67, 0.3);
}
/* scrollbar מעוצב */
.theme-dark ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.theme-dark ::-webkit-scrollbar-track {
background: rgba(10, 15, 13, 0.5);
border-radius: 5px;
}
.theme-dark ::-webkit-scrollbar-thumb {
background: rgba(45, 90, 67, 0.6);
border-radius: 5px;
border: 2px solid rgba(10, 15, 13, 0.5);
}
.theme-dark ::-webkit-scrollbar-thumb:hover {
background: rgba(61, 122, 89, 0.8);
}
/* פאנל הגדרות */
.theme-dark #settingsPanel .modal {
background: #121816;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
/* מצב compact */
.theme-dark.density-compact .doc-card {
background: rgba(18, 24, 22, 0.5);
}
/* hover effects מחוזקים */
.theme-dark .interactive-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-dark .interactive-hover:hover {
filter: brightness(1.15);
}
/* ============================================
🔧 תיקונים נוספים למצב כהה
============================================ */
/* תתי קטגוריות (subcategories) */
.theme-dark .subcategory-btn,
.theme-dark .subfolder-btn {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #c5e3d2;
}
.theme-dark .subcategory-btn:hover,
.theme-dark .subfolder-btn:hover {
background: rgba(45, 90, 67, 0.5);
border-color: rgba(82, 152, 115, 0.5);
color: #d4f0e0;
}
.theme-dark .subcategory-btn.active,
.theme-dark .subfolder-btn.active {
background: rgba(61, 122, 89, 0.4);
border-color: rgba(82, 152, 115, 0.6);
color: #e8f0ec;
}
/* סלקט של מיון (תאריך העלאה וכו') */
.theme-dark #sortSelect {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #c5e3d2;
}
.theme-dark #sortSelect:focus {
background: rgba(26, 37, 32, 0.9);
border-color: rgba(82, 152, 115, 0.6);
}
/* אייקון פרופיל */
.theme-dark .profile-card {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.2);
}
.theme-dark .profile-card:hover {
background: rgba(26, 37, 32, 0.7);
border-color: rgba(82, 152, 115, 0.35);
}
.theme-dark .profile-avatar {
background: rgba(45, 90, 67, 0.3);
border: 2px solid rgba(82, 152, 115, 0.4);
}
.theme-dark .profile-name {
color: #c5e3d2;
}
/* כפתורי פרופיל (עריכה, מחיקה וכו') */
.theme-dark .profile-btn,
.theme-dark .profile-action-btn {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #b8c9c0;
}
.theme-dark .profile-btn:hover,
.theme-dark .profile-action-btn:hover {
background: rgba(45, 90, 67, 0.5);
color: #d4f0e0;
}
/* כרטיסי תיקיות משותפות */
.theme-dark .shared-folder-card,
.theme-dark .folder-card {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.2);
}
.theme-dark .shared-folder-card:hover,
.theme-dark .folder-card:hover {
background: rgba(26, 37, 32, 0.7);
border-color: rgba(82, 152, 115, 0.4);
}
/* כפתורי בחירת תיקייה - סגנון בסיסי */
.folder-select-btn {
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #e1e3d5;
cursor: pointer;
text-align: right;
transition: all 0.25s ease;
}
.folder-select-btn:hover {
border-color: #4CAF50;
transform: translateY(-2px);
}
.theme-dark .folder-select-btn {
background: rgba(18, 24, 22, 0.7) !important;
border: 1px solid rgba(82, 152, 115, 0.3) !important;
color: #c5e3d2 !important;
}
.theme-dark .folder-select-btn:hover {
background: rgba(45, 90, 67, 0.5) !important;
border-color: rgba(82, 152, 115, 0.5) !important;
transform: translateY(-2px);
}
/* מודל עריכת מסמך */
.theme-dark #editModal .modal,
.theme-dark #shareFolderModal .modal,
.theme-dark #createFolderModal .modal {
background: #121816 !important;
}
/* חיזוק מיוחד למודל shareFolderModal */
.theme-dark #shareFolderModal > .modal {
background: #121816 !important;
border: 1px solid rgba(82, 152, 115, 0.3) !important;
}
.theme-dark #editModal .modal-head,
.theme-dark #shareFolderModal .modal-head,
.theme-dark #createFolderModal .modal-head {
background: #1a2520 !important;
color: #c5e3d2 !important;
}
.theme-dark #shareFolderModal .modal-head h2 {
color: #c5e3d2 !important;
}
.theme-dark #editModal .scroll-area,
.theme-dark #shareFolderModal .scroll-area,
.theme-dark #createFolderModal .scroll-area {
background: #121816 !important;
}
.theme-dark #editModal .scroll-area p,
.theme-dark #shareFolderModal .scroll-area p,
.theme-dark #createFolderModal .scroll-area p {
color: #c5e3d2 !important;
}
.theme-dark #editModal .modal-foot,
.theme-dark #shareFolderModal .modal-foot,
.theme-dark #createFolderModal .modal-foot {
background: #1a2520 !important;
}
/* כפתור ביטול */
.theme-dark #shareFolderModal .btn {
background: rgb(67 67 67 / 30%) !important;
border: 1px solid rgba(200, 80, 80, 0.3) !important;
color: #ffb3b3 !important;
}
/* חיזוק נוסף לכפתורי בחירת תיקייה */
.theme-dark #shareFolderModal .folder-select-btn {
background: rgba(18, 24, 22, 0.7) !important;
border: 1px solid rgba(82, 152, 115, 0.3) !important;
color: #c5e3d2 !important;
}
.theme-dark #shareFolderModal .folder-select-btn:hover {
background: rgba(45, 90, 67, 0.5) !important;
border-color: rgba(82, 152, 115, 0.5) !important;
}
.theme-dark #shareFolderModal .folder-select-btn div {
color: #c5e3d2 !important;
}
/* רקע המודל */
.theme-dark #shareFolderModal.modal-backdrop {
background: rgba(5, 8, 7, 0.85) !important;
}
/* כפתור סגירה במודלים */
.theme-dark .modal-close {
color: #c5e3d2;
background: transparent;
}
.theme-dark .modal-close:hover {
color: #e8f0ec;
background: rgba(45, 90, 67, 0.2);
}
/* חלון CONFIRM */
.theme-dark #eco-confirm-overlay {
background: rgba(5, 8, 7, 0.85);
backdrop-filter: blur(4px);
}
.theme-dark #eco-confirm-overlay .popup,
.theme-dark .popup {
background: #121816;
border: 1px solid rgba(82, 152, 115, 0.3);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.theme-dark #eco-confirm-message,
.theme-dark .popup p {
color: #c5e3d2;
}
.theme-dark #eco-confirm-yes,
.theme-dark .popup .btn-primary {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d);
border: 1px solid rgba(82, 152, 115, 0.4);
color: #e8f0ec;
}
.theme-dark #eco-confirm-no,
.theme-dark .popup .btn-cancel {
background: rgba(90, 30, 30, 0.3);
border: 1px solid rgba(200, 80, 80, 0.3);
color: #ffb3b3;
}
.theme-dark #eco-confirm-no:hover,
.theme-dark .popup .btn-cancel:hover {
background: rgba(120, 40, 40, 0.5);
}
/* אזור subcategoriesBox */
.theme-dark #subcategoriesBox {
background: transparent;
}
/* כפתורי קטגוריות */
.theme-dark .category-btn {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #c5e3d2;
}
.theme-dark .category-btn:hover {
background: rgba(45, 90, 67, 0.5);
border-color: rgba(82, 152, 115, 0.5);
}
/* טבלאות ורשימות */
.theme-dark table {
background: rgba(18, 24, 22, 0.5);
border-color: rgba(82, 152, 115, 0.2);
}
.theme-dark th {
background: rgba(26, 37, 32, 0.7);
color: #c5e3d2;
border-color: rgba(82, 152, 115, 0.25);
}
.theme-dark td {
color: #b8c9c0;
border-color: rgba(82, 152, 115, 0.15);
}
.theme-dark tr:hover {
background: rgba(45, 90, 67, 0.15);
}
/* badges ותגיות */
.theme-dark .badge,
.theme-dark .tag {
background: rgba(45, 90, 67, 0.3);
border: 1px solid rgba(82, 152, 115, 0.3);
color: #a8d4ba;
}
/* loading spinners */
.theme-dark .spinner,
.theme-dark .loading {
border-color: rgba(82, 152, 115, 0.2);
border-top-color: #3d7a59;
}
/* empty states */
.theme-dark .empty-state,
.theme-dark .no-results {
color: #8ba89a;
}
/* כפתורי Toggle/Switch */
.theme-dark .switch input:checked + label {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d);
}
.theme-dark .switch label {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.3);
}
/* dropdown menus */
.theme-dark .dropdown-menu {
background: #121816;
border: 1px solid rgba(82, 152, 115, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.theme-dark .dropdown-item {
color: #c5e3d2;
}
.theme-dark .dropdown-item:hover {
background: rgba(45, 90, 67, 0.3);
}
/* tooltips */
.theme-dark .tooltip {
background: #1a2520;
border: 1px solid rgba(82, 152, 115, 0.4);
color: #c5e3d2;
}
/* progress bars */
.theme-dark .progress-bar {
background: rgba(18, 24, 22, 0.5);
}
.theme-dark .progress-fill {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d);
}
/* dividers */
.theme-dark hr,
.theme-dark .divider {
border-color: rgba(82, 152, 115, 0.2);
}
/* כפתור "הוסף תיקייה" וכפתורים כלליים נוספים */
.theme-dark .add-folder-btn,
.theme-dark .create-btn {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d);
border: 1px solid rgba(82, 152, 115, 0.4);
color: #e8f0ec;
}
/* רקע של כל האפליקציה במצב כהה */
.theme-dark .dashboard,
.theme-dark .main-content {
background: #0a0f0d;
}
/* כרטיסי פרטי משתמש */
.theme-dark .user-info-card {
background: rgba(18, 24, 22, 0.7);
border: 1px solid rgba(82, 152, 115, 0.25);
}
/* רשימת משתתפים */
.theme-dark .participant-item {
background: rgba(18, 24, 22, 0.6);
border: 1px solid rgba(82, 152, 115, 0.2);
color: #c5e3d2;
}
.theme-dark .participant-item:hover {
background: rgba(26, 37, 32, 0.7);
}
.sidebar {
background: #aaab84;
color: #2c261f;
width: 240px;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100vh;
position: relative;
box-shadow: 4px 0 16px rgba(0,0,0,0.3);
padding: 1rem 1rem 0;
overflow: hidden; /* ✅ שינוי: לא overflow-y כדי שsidebar-bottom יהיה נראה */
}
/* ✅ תוכן הsidebar שיכול להיות ארוך */
.sidebar-content {
flex: 1;
overflow-y: auto;
padding-bottom: 1rem;
}
.sidebar > div {
flex-shrink: 0;
}
.sidebar-bottom {
position: relative; /* ✅ שינוי: relative במקום absolute */
width: 100%;
padding: 0.75rem 1rem;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.12);
margin-top: auto; /* ✅ דוחף את זה לתחתית */
flex-shrink: 0; /* ✅ מונע כיווץ */
background: inherit; /* ✅ רקע כמו הsidebar */
}
.logout-btn {
width: 100%;
border: 0;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.12);
color: #fff;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
font-size: .9rem;
padding: .8rem .75rem;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,.4);
transition: background .18s, filter .18s;
}
.logout-btn:hover {
background: rgba(255,255,255,0.18);
filter: brightness(1.05);
}
/* מובייל: המגירה */
@media (max-width: 760px) {
.sidebar {
position: fixed;
top: 0;
right: 0; /* slide in/out from the right side */
box-shadow: 4px 0 16px rgba(0,0,0,0.3);
padding: 1rem 1rem 0;
overflow-y: auto; /* גלילה אם התוכן גבוה */
transform: translateX(100%); /* start off-screen to the right */
transition: transform 0.35s ease-in-out;
top: 0;
right: 0;
height: 100vh;
max-height: 100vh;
width: 220px;
max-width: 80%;
box-shadow: 0 0 30px rgba(0,0,0,0.6);
z-index: 9999;
background: linear-gradient(180deg, var(--bg-sidebar-from) 0%, var(--bg-sidebar-to) 100%);
transform: translateX(100%);
}
.sidebar.open {
transform: translateX(0);
}
}
.brand-block {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem .25rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.brand-name {
font-size: .9rem;
font-weight: 600;
color: #1f2717;
letter-spacing: .03em;
line-height: 1.2;
}
.brand-sub {
font-size: .7rem;
font-weight: 400;
color: #1f2717;
line-height: 1.4;
}
.user-panel {
margin-top: .75rem;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-md);
padding: .6rem .75rem;
font-size: .8rem;
line-height: 1.4;
color: #fff;
display: flex;
flex-direction: column;
gap: .25rem;
}
.user-panel-name {
font-weight: 500;
color: #1f2717;
font-size: .8rem;
}
.user-panel-mail {
color: rgba(48, 57, 46, 0.7);
font-size: .7rem;
direction: ltr;
unicode-bidi: plaintext;
word-break: break-all;
}
.hidden { display: none !important; }
/* Backdrop allows scroll on small screens */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 9999;
overflow: auto;
padding: 16px;
min-height: 100dvh;
}
.modal {
background: var(--c-bg,#fff);
color: var(--c-fg,#0f141a);
width: min(720px, 94vw);
margin: 24px auto;
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,.28);
display: grid;
grid-template-rows: auto 1fr auto;
max-height: 88dvh;
overflow: hidden;
}
.modal-head {
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px; position:sticky; top:0; background:var(--c-bg,#fff);
border-bottom:1px solid var(--c-border,#e6e6e6); z-index:1;
}
.modal-head h2{margin:0;font-size:1.2rem}
.modal-close{border:0;background:transparent;cursor:pointer;font-size:1.1rem;color:var(--c-fg,#0f141a)}
.scroll-area{overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 16px; margin-right: 20px;}
.modal-foot{padding:10px 16px 14px;border-top:1px solid var(--c-border,#e6e6e6);position:sticky;bottom:0;background:var(--c-bg,#fff)}
.section{margin:10px 0 16px}
.section h3{margin:0 0 8px;font-size:1rem;opacity:.9}
.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.switch input{margin-inline-end:8px}
select, .btn{
padding:8px 12px;border-radius:10px;border:1px solid var(--c-border,#e6e6e6);
background:var(--c-btn,#f2f2f2); color:var(--c-fg,#0f141a);
}
.btn{cursor:pointer}
/* Compact density: you can hook your cards/list to this class */
.compact-density .doc-card{padding:8px !important}
.compact-density .grid{gap:8px !important}
/* Reduce motion */
.reduce-motion *{animation:none!important;transition:none!important}
/* Theme tokens (light default) + dark */
:root{
--c-bg:#ffffff; --c-fg:#0f141a; --c-border:#e6e6e6; --c-btn:#f2f2f2;
}
/* ====== PROFESSIONAL DARK THEME ====== */
.theme-dark {
/* Modal & Card backgrounds */
--c-bg: #191919;
--c-fg: #e4e6eb;
--c-border: #2d3139;
--c-btn: #252932;
/* App backgrounds - warm dark tones */
--bg-app: #191919;
--bg-card: #252525;
/* Sidebar - elegant dark gradient */
--bg-sidebar-from: #252932;
--bg-sidebar-to: #1f2229;
/* Borders - subtle contrast */
--border-soft: rgba(255, 255, 255, 0.08);
/* Text colors - high contrast for readability */
--text-dark: #b8bcc5;
--text-mid: #d1d4db;
/* Accent colors - adjusted for dark mode */
--accent-soft: #7a9c85;
--accent-strong: #5d8a6b;
/* Shadows - deeper for depth */
--shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
--shadow-topbar: 0 2px 6px rgba(0, 0, 0, 0.3);
--shadow-btn: 0 6px 16px rgba(0, 0, 0, 0.35);
/* Gradient button - vibrant but pleasant */
--grad-btn: linear-gradient(to right, #3d7a5d, #4a9470);
}
/* Dark theme specific overrides */
.theme-dark .sidebar {
background: #1d1f1e;
color: #d1d4db;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}
.theme-dark .top-bar {
background: #1f2229;
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.theme-dark .tabs-bar {
background: #151f1a !important;
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .tab-btn {
background: #6f7865;
color: #ffffff;
}
.theme-dark .tab-btn:hover,
.theme-dark .tab-btn.active {
background: #d1d1d1;
color: #000000;
}
.theme-dark .brand-name,
.theme-dark .brand-sub {
color: #d1d4db;
}
.theme-dark .user-panel {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .user-panel-name {
color: #e4e6eb;
}
.theme-dark .user-panel-mail {
color: rgba(228, 230, 235, 0.6);
}
.theme-dark .menu-label {
color: rgba(228, 230, 235, 0.4);
}
.theme-dark .menu-item {
color: #b0b0b0;
}
.theme-dark .menu-item:hover,
.theme-dark .menu-item.active {
background: rgba(255, 255, 255, 0.08);
color: #e4e6eb;
}
.theme-dark .menu-item-icon {
background: rgba(255, 255, 255, 0.06);
}
.theme-dark .mobile-menu-btn {
background-color: #2a2f38;
color: #b8bcc5;
border-color: rgba(255, 255, 255, 0.1);
}
.theme-dark .upload-btn {
background: linear-gradient(to right, #3d7a5d, #4a9470);
color: #ffffff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.theme-dark .upload-btn:hover {
filter: brightness(1.15);
}
.theme-dark .logout-btn {
background: rgba(255, 255, 255, 0.08);
color: #e4e6eb;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.theme-dark .logout-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.theme-dark .page-title {
color: #e4e6eb;
}
.theme-dark .page-sub {
color: #b8bcc5;
}
/* Document cards in dark mode */
.theme-dark .doc-card {
background: #1e2128;
border-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .doc-card:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-dark .doc-action-btn {
background: #252932;
border-color: rgba(255, 255, 255, 0.1);
color: #b8bcc5;
}
.theme-dark .doc-action-btn:hover {
background: #2d3139;
color: #e4e6eb;
}
.theme-dark .doc-action-btn.danger {
background: #2d1a1a;
border-color: rgba(255, 100, 100, 0.3);
color: #ff8080;
}
.theme-dark .doc-action-btn.restore {
background: #1a2d23;
border-color: rgba(100, 255, 150, 0.3);
color: #80ffb0;
}
/* Search box in dark mode */
.theme-dark .search-box {
background: #1e2128;
border-color: rgba(255, 255, 255, 0.1);
color: #e4e6eb;
}
.theme-dark .search-box::placeholder {
color: rgba(228, 230, 235, 0.4);
}
.theme-dark .search-box:focus {
border-color: #5d8a6b;
box-shadow: 0 0 0 3px rgba(93, 138, 107, 0.15);
}
/* Modals in dark mode */
.theme-dark .modal {
background: #1a1d23;
color: #e4e6eb;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.theme-dark .modal-head {
background: #1a1d23;
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .modal-close {
color: #b8bcc5;
}
.theme-dark .modal-close:hover {
color: #e4e6eb;
}
.theme-dark .modal-foot {
background: #1a1d23;
border-top-color: rgba(255, 255, 255, 0.08);
}
.theme-dark select,
.theme-dark .btn {
background: #252932;
border-color: rgba(255, 255, 255, 0.1);
color: #e4e6eb;
}
.theme-dark select:hover,
.theme-dark .btn:hover {
background: #2d3139;
}
/* Input fields in dark mode */
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark input[type="number"],
.theme-dark textarea {
background: #1e2128;
border-color: rgba(255, 255, 255, 0.1);
color: #e4e6eb;
}
.theme-dark input[type="text"]::placeholder,
.theme-dark input[type="email"]::placeholder,
.theme-dark input[type="password"]::placeholder,
.theme-dark textarea::placeholder {
color: rgba(228, 230, 235, 0.4);
}
.theme-dark input[type="text"]:focus,
.theme-dark input[type="email"]:focus,
.theme-dark input[type="password"]:focus,
.theme-dark textarea:focus {
border-color: #5d8a6b;
box-shadow: 0 0 0 3px rgba(93, 138, 107, 0.15);
}
/* Category badges in dark mode */
.theme-dark .category-badge {
background: rgba(93, 138, 107, 0.15);
color: #7a9c85;
border-color: rgba(93, 138, 107, 0.3);
}
/* Transitions for smooth theme switching */
body,
.sidebar,
.top-bar,
.tabs-bar,
.modal,
.doc-card,
.menu-item,
.btn,
select,
input,
textarea {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Mobile */
@media (max-width:560px){
.modal{width:100%;margin:0 auto;max-height:100dvh;border-radius:0}
}
nav.menu {
display: flex;
flex-direction: column;
padding-top: 1rem;
gap: .25rem;
}
.menu-label {
color: rgba(83, 20, 20, 0.5);
font-size: .7rem;
font-weight: 500;
letter-spacing: .05em;
padding: 0 .5rem;
margin-bottom: .25rem;
}
.menu-item {
background: transparent;
border: none;
color: #151f12;
display: flex;
align-items: center;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
gap: .6rem;
padding: .6rem .5rem .6rem .75rem;
border-radius: var(--radius-md);
font-weight: 500;
font-size: .8rem;
cursor: pointer;
text-align: right;
width: 100%;
transition: background .18s;
}
.menu-item:hover,
.menu-item.active {
background: rgba(255,255,255,0.12);
}
.menu-item-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.12);
display: grid;
place-items: center;
font-size: .8rem;
font-weight: 500;
}
.main-area {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
max-height: 100vh;
}
.top-bar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
background: #aaab84 ;
padding: .8rem 1rem;
box-shadow: var(--shadow-topbar);
border-bottom: 1px solid var(--border-soft);
z-index: 5;
}
.top-left {
display: flex;
flex-direction: column;
}
.theme-dark .top-left {
display: flex;
flex-direction: column;
color: #dbdcdc;
}
.page-title {
margin: 0;
font-size: .95rem;
font-weight: 600;
color: var(--text-dark);
line-height: 1.3;
}
.page-sub {
margin: 0;
font-size: .7rem;
color: var(--text-mid);
line-height: 1.4;
}
.top-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
}
.mobile-menu-btn {
display: none;
background: transparent;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
font-size: 1rem;
line-height: 1;
padding: .4rem .6rem;
cursor: pointer;
color: var(--text-dark);
background-color: #301919;
box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.upload-btn {
background: #301919;
color: #b4b1b1;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border: 0;
border-radius: var(--radius-md);
font-size: .8rem;
font-weight: 600;
padding: .55rem .8rem;
cursor: pointer;
box-shadow: var(--shadow-btn);
transition: filter .18s, transform .18s;
}
.upload-btn:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.hidden-input {
display: none;
}
.tabs-bar {
background: #707a4e ;
border-bottom: 1px solid #d6e6df;
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .6rem 1rem;
}
.tab-btn {
background: #b4ac81;
border: 0;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border-radius: var(--radius-sm);
font-size: .75rem;
font-weight: 500;
padding: .4rem .7rem;
cursor: pointer;
color: #342a15;
line-height: 1.2;
transition: background .15s;
}
.content-scroll-area {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 1rem;
display: grid;
grid-template-rows: auto auto 1fr;
row-gap: 1rem;
}
.home-view,
.category-view {
background: transparent;
border-radius: var(--radius-lg);
}
.view-title {
font-size: .9rem;
font-weight: 600;
color: var(--text-dark);
margin: 0 0 .75rem;
display: flex;
align-items: center;
gap: .5rem;
}
/* 1) אם יש לך עטיפה שמכילה sidebar + main */
.dashboard,
.app-shell,
.layout,
.page {
display: flex;
}
/* 2) הסיידבר לא משנה */
.sidebar {
flex: 0 0 320px; /* או מה שיש לך */
}
/* 3) זה ה-KEY: שה-main יוכל להצטמצם ולא “ידחוף” */
.main-area {
flex: 1 1 auto;
min-width: 0; /* ⭐ חובה */
}
/* אם יש עוד עטיפה פנימית סביב הגריד */
.home-view,
.category-view,
.content-area {
min-width: 0; /* ⭐ גם פה לפעמים חובה */
width: 100%;
max-width: none;
}
.folder-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 240 בבינוני עובד הרבה יותר טוב */
gap: 1.5rem;
align-items: start;
justify-items: stretch;
}
/* 3 עמודות רק כשבאמת יש מקום (בערך 900px+) */
@media (min-width: 900px) {
.folder-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 4 עמודות רק כשבאמת יש מקום (בערך 1200px+) */
@media (min-width: 1200px) {
.folder-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 5 עמודות רק בגדול (בערך 1500px+) */
@media (min-width: 1500px) {
.folder-grid { grid-template-columns: repeat(5, 1fr); }
}
/* 6 עמודות רק ענק (בערך 1800px+) */
@media (min-width: 1800px) {
.folder-grid { grid-template-columns: repeat(6, 1fr); }
}
.main-area { min-width: 0; }
.folder-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: 2.2rem 3rem;
box-shadow: var(--shadow-card);
cursor: pointer;
display: flex;
flex-direction: column;
gap: .7rem;
transition: transform .18s, box-shadow .18s;
width: 100%;
min-width: 0;
/* ✅ חדש */
align-items: center; /* מרכז את האייקון והטקסט אופקית */
justify-content: center; /* מרכז אותם אנכית בתוך הכרטיס */
text-align: center; /* מרכז את הטקסט */
}
.folder-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.folder-icon {
width: 40px;
height: 32px;
border-radius: 6px;
background: #f3dd86;
box-shadow: 0 6px 12px rgba(107,99,28,0.62);
position: relative;
}
.folder-icon::before {
content: "";
position: absolute;
top: -6px;
right: 4px;
width: 18px;
height: 8px;
border-radius: 3px 3px 0 0;
background: linear-gradient(135deg,#efe5b6 0%,#ffe694 100%);
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.folder-label {
font-size: .8rem;
font-weight: 600;
color: var(--text-dark);
text-align: center;
line-height: 1.3;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.category-view-header {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .75rem;
}
.back-button {
background: transparent;
border: 1px solid var(--border-soft);
border-radius:12px;
padding: .4rem .6rem;
font-size: .8rem;
cursor: pointer;
color: var(--accent-strong);
background-color: #cacab7;
transition: box-shadow .18s;
}
.back-button:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.category-title {
font-size: .85rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.docs-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.docs-list.profiles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(214px, 214px));
gap: 0.6rem;
direction: rtl; /* מתחיל מימין */
justify-content: start; /* הגריד נצמד לימין */
justify-items: stretch; /* הכרטיסים ממלאים תא */
}
/* גודל כרטיס */
.docs-list.profiles-grid .profile-card {
width: 200px; /* ⬅️ גודל אחיד */
max-width: 200px; /* ⬅️ שלא יתנפח */
min-height: 190px;
}
.theme-dark #backButton .back-icon {
content: url("../assests/icons/backDark.png");
}
.docs-list.shared-mode {
display: flex !important;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100vw;
margin: 0 auto;
padding: 0 clamp(8px, 2vw, 16px);
box-sizing: border-box;
overflow-x: hidden;
}
.doc-card {
background: var(--bg-card);
border-radius: 18px; /* מסגרת מעוגלת יותר */
border: 1px solid #8880803d; /* מסגרת שקופה כברירת מחדל */
padding: 0.7rem 1rem;
cursor: pointer;
overflow: hidden;
max-height: 64px;
position: relative;
padding-left: 40px; /* משאיר מקום ל-checkbox בצד שמאל */
transition:
max-height 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
/* כשהכרטיס פתוח – מסגרת + צל קטן */
.doc-card.expanded {
max-height: 800px;
border-color: var(--border-soft);
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
transition: max-height 0.45s ease;
}
.doc-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.doc-card-title {
margin: 0;
font-weight: 500;
}
.doc-meta-short {
opacity: 0.7;
font-size: 0.85rem;
}
/* החלק שנפתח – מוסתר כברירת מחדל */
.doc-card-details {
margin-top: 0.5rem;
padding-bottom: 0.9rem; /* רווח בתחתית הכרטיס */
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.doc-card.expanded .doc-card-details {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* בדסקטופ – אפשר גם לפתוח על hover אוטומטי */
@media (hover: hover) and (pointer: fine) {
.doc-card:hover {
max-height: 800px;
border-color: var(--border-soft);
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
transition: max-height 0.45s ease;
}
.doc-card:hover .doc-card-details {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
/* ==== כרטיסי פרופיל – לא מתקפלים כמו מסמכים ==== */
.profile-card {
max-height: none; /* בלי הגבלה על הגובה */
overflow: visible; /* שלא ייחתך התוכן */
padding-left: 1rem; /* אין checkbox, אז לא צריך רווח ענק מצד שמאל */
}
/* גם ב-hover אל תשני להם גובה, רק אפשר להשאיר את הצל היפה */
@media (hover: hover) and (pointer: fine) {
.profile-card:hover {
max-height: none;
border-color: var(--border-soft);
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
}
.doc-card-title {
font-weight: 600;
font-size: .8rem;
margin: 0;
color: var(--text-dark);
}
.doc-card-meta {
font-size: .7rem;
color: var(--text-mid);
line-height: 1.4;
display: flex;
flex-direction: column;
gap: .25rem;
min-height: 120px; /* ✅ גובה מינימלי קבוע */
flex: 1; /* ✅ תופס שטח */
}
.doc-open-link {
font-size: .8rem;
font-weight: 600;
color: #d9d9d9;
text-decoration: none;
background: #60683f;
padding: .5rem .9rem;
padding-right: 11px;
width: fit-content;
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
align-items: center;
border-radius: var(--radius-sm);
box-shadow: 0 6px 14px rgba(0,0,0,0.25);
margin-top: 0.1rem; /* רווח מעל הכפתור */
margin-bottom: 0.6rem; /* רווח מתחת לכפתור */
transition: background .18s, color .18s;
display: inline-flex;
}
.doc-open-link:hover {
background: #21370c;
color: #dbdbdb;
}
/* header row: title on right, X on left (works great in RTL, too) */
.brand-row {
display: flex;
align-items: center;
justify-content: end; /* pushes title to right, X to left */
gap: 12px;
padding: 10px px;
padding-bottom: 10px;
border-bottom: 1px solid #282f08;
direction: ltr;
}
.brand-name {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
}
/* the X button */
.close-btn {
display: none;
background: transparent;
border: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: #555;
padding: 4px 6px;
border-radius: 10px;
transition: background-color .15s ease, color .15s ease;
}
.close-btn:hover { background: rgba(0,0,0,0.06); color: #e53935; }
/* optional dark mode variants */
body.dark-mode .brand-row { border-bottom-color: #2b2b2b; }
body.dark-mode .close-btn { color: #eee; }
body.dark-mode .close-btn:hover { background: rgba(255,255,255,0.06); color: #ff7675; }
/* when menu is open */
.sidebar.open {
transform: translateX(0); /* slide into view */
}
/* optional dark mode support */
body.dark-mode .sidebar {
background: #1d1f1e;
color: #eee;
}
.top-right {
display: flex;
align-items: center;
gap: 10px;
}
.premium-btn {
background: linear-gradient(90deg, #fefff5, #fefff5);
border: none;
color: #1e1e1e;
font-weight: bold;
padding: 8px 14px;
border-radius: 21px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.premium-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(54, 49, 24, 0.6);
}
/* ========== Responsive, scrollable modal ========== */
.hidden { display: none !important; }
/* Backdrop now scrolls if needed and pads content */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 9999;
/* allow scroll on small screens */
overflow: auto;
padding: 16px; /* space around modal on tiny screens */
/* use modern viewport to avoid mobile address bar bugs */
min-height: 100dvh;
}
/* Center via auto margins; cap height and allow inner scrolling */
.modal {
background: var(--c-bg, #e1e3d5);
color: var(--c-fg, #0f141a);
width: min(920px, 94vw);
margin: 24px auto; /* centers in the scrolling backdrop */
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,.28);
display: grid;
grid-template-rows: auto 1fr auto; /* head | content | foot */
gap: 12px;
max-height: 88dvh; /* so it never overflows the screen */
overflow: hidden; /* clip at container; content area scrolls */
}
/* Keep header/close visible while content scrolls */
.modal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 14px 16px;
position: sticky; top: 0;
background: #e1e1e1;
z-index: 1;
border-radius: 10px;
border-bottom: 1px solid var(--c-border, #e6e6e6);
}
.modal-head h2 { margin: 0; font-size: 1.2rem; }
.modal-close {
border: 0; background: transparent; cursor: pointer; font-size: 1.1rem;
color: var(--c-fg, #0f141a);
}
/* Scroll only the middle content area (text + plans) */
.modal > .muted,
.modal > .plans-grid {
padding: 0 16px;
}
.muted { opacity: .85; margin: 8px 0 10px; margin-right: 12px}
/* Wrap content to be scrollable (1fr area) */
.modal .scroll-area {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 10px;
padding-left: 19px;
}
/* Plans grid responsive */
.plans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 0 16px 6px;
}
.plan {
border: 1px solid var(--c-border, #e6e6e6);
background: var(--c-card, #f9f9f9);
border-radius: 12px;
padding: 12px;
display: grid; gap: 10px;
}
.plan header { display: flex; align-items: baseline; justify-content: space-between; }
.plan h3 { margin: 0; }
.price { font-size: 1.15rem; font-weight: 700; }
.price .per { font-size: .9rem; opacity: .7; margin-inline-start: 4px; }
.features { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
/* Footer stays visible */
.modal-foot {
padding: 10px 16px 14px;
border-top: 1px solid var(--c-border, #e6e6e6);
position: sticky; bottom: 0;
background: #e1e1e1;
display: contents;
border-radius: 10px;
}
/* Buttons */
.btn {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--c-border, #e6e6e6);
background: var(--c-btn, #f2f2f2);
color: var(--c-fg, #0f141a);
cursor: pointer;
width: 100%; /* better for mobile tap targets */
}
.btn-ghost { background: transparent; }
.btn-accent {
background: linear-gradient(90deg, #ffd700, #ffb300);
border: none; color: #222; font-weight: 700;
}
/* Premium accent card */
.plan-accent {
border: 1px solid #ffd86b;
background: linear-gradient(180deg, #fff7d6, #fff);
}
/* ---------- Mobile tweaks ---------- */
@media (max-width: 900px) {
.plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.modal { width: 100%; margin: 0 auto; border-radius: 0; max-height: 100dvh; }
.modal-head, .modal-foot { padding: 12px; }
.plans-grid { grid-template-columns: 1fr; padding: 0 12px 6px; }
.plan { padding: 10px; }
}
/* ---------- Dark theme tokens (if you use .theme-dark) ---------- */
.theme-dark {
--c-bg: #111417;
--c-fg: #e8eef5;
--c-border: #2a2f35;
--c-card: #151a1f;
--c-btn: #1d232a;
}
/* Optional: better focus outline */
:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid #7aa7ff;
outline-offset: 2px;
}
.notification {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background-color: #0e3535;
color: #fff;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
box-shadow: 0 12px 24px rgba(0,0,0,0.25);
opacity: 0;
transition: all 0.3s ease;
z-index: 9999;
}
.notification.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.notification.error {
background-color: #b63a3a;
}
.notification.hidden {
opacity: 0;
pointer-events: none;
}
.hidden { display: none !important; }
@media (max-width: 760px) {
.top-bar { border-radius: 0; }
.mobile-menu-btn { display: inline-block; }
}
@media (min-width: 761px) {
.mobile-menu-btn { display: none; }
}
@media (max-width: 760px) {
.close-btn {
display: inline-block; /* במובייל רואים את האיקס */
}
}
@media (min-width: 761px) {
.close-btn {
display: none; /* במסכים גדולים האיקס נעלם */
}
}
.mobile-logout {
display: none;
}
/* ==== Shared (Cozy) ==== */
.shared-manage { display:grid; gap:16px; }
/* ===== Shared Folder Layout - קבוע לכל הגדלים ===== */
.cozy-head {
display: flex;
align-items: center;
justify-content: space-between;
background: #bec4ab;
color: #1f3e30;
border: 1px solid #2d3b3b;
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
width: 100%;
box-sizing: border-box;
margin-top: 14px;
}
.cozy-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: .3px;
}
.btn-cozy {
background: #e1e3d5;
color: #53574c;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border: 1px solid #2e5a5a;
border-radius: 10px;
padding: .55rem .8rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0,0,0,.28);
transition: .18s;
white-space: nowrap;
}
.btn-cozy:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* תיקיות משותפות - כרטיסים */
.sf-card {
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 14px;
background: #bec4ab;
color: #53574c;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border: 1px solid #515e56;
border-radius: 16px;
padding: 14px;
box-shadow: 0 16px 34px rgba(0,0,0,.25);
margin: 6px 0;
box-sizing: border-box;
}
.sf-ico {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
background: #ffffff;
border: 1px solid #515e56;
font-size: 18px;
}
.sf-main {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.sf-title {
font-size: 1.05rem;
font-weight: 700;
color: #8f8f8f;
margin: 0;
word-break: break-word;
}
.sf-meta {
font-size: .85rem;
color: #62554d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-actions {
display: flex;
gap: 8px;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
}
/* במובייל - שנה לעמודה */
@media (max-width: 640px) {
.sf-card {
grid-template-columns: 1fr;
gap: 12px;
}
.sf-actions {
flex-wrap: wrap;
justify-content: flex-start;
}
}
.btn-min {
background: #e1e3d5;
color: #142220;
border: 1px solid #2b3c3c;
border-radius: 10px;
padding: .52rem 0.68rem;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: .78rem;
cursor: pointer;
white-space: nowrap;
}
.btn-min:hover {
background: #e1e3d5;
}
.btn-danger {
background: #a83737;
color: #fdfcfc;
border: 1px solid #733a3a;
}
.btn-danger:hover {
background: #a83737;
}
/* בקשות ממתינות */
.pending-wrap {
background: #bec4ab;
color: #53574c;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border: 1px solid #243030;
border-radius: 14px;
padding: 14px;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
width: 100%;
box-sizing: border-box;
margin-top: 14px;
}
.theme-dark .btn-min .btn-danger {
background: #dc3545;
}
.theme-dark .pending-wrap {
background: #161616;
color: #969794;
border: 1px solid #243030;
}
.theme-dark .cozy-head {
background: #161616;
color: #969794;
border: 1px solid #243030;
}
.theme-dark .sf-card {
background: #161616;
color: #969794;
border: 1px solid #243030;
}
.theme-dark .sf-ico {
background: #5c635603;
}
/* Container ראשי - ממורכז באמצע */
.shared-container {
max-width: 900px;
width: 100%;
margin: 14px auto 0;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Container עבור שלושת הבלוקים העליונים */
/* .shared-top-blocks {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 900px;
margin: 0 auto 20px;
} */
/* כל הבלוקים החומים - רוחב מלא */
.cozy-head,
.pending-wrap,
.sf-list {
width: 100%;
max-width: 900px;
}
/* כשנמצאים בתצוגת תיקייה משותפת ספציפית */
/* .docs-list.shared-mode {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
overflow-x: hidden;
} */
/* Container עבור שלושת הבלוקים העליונים */
/* .shared-top-blocks {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 900px;
margin: 0 auto 20px;
box-sizing: border-box;
} */
/* מסמכים משותפים - Grid רספונסיבי */
/* .docs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
} */
/* במובייל - התאמות */
@media (max-width: 768px) {
.docs-grid {
grid-template-columns: 1fr;
max-width: 100%;
}
.shared-top-blocks {
max-width: 100%;
}
}
@media (max-width: 640px) {
.docs-list.shared-mode {
padding: 0 8px;
}
.docs-grid {
grid-template-columns: 1fr;
}
.cozy-head {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.cozy-head > div {
width: 100%;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-cozy {
flex: 1;
min-width: 120px;
}
.sf-card {
grid-template-columns: 1fr;
gap: 12px;
}
.sf-actions {
flex-wrap: wrap;
justify-content: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
}
}
/* SF List - רשימת תיקיות */
.sf-list {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
/* אם עדיין לא מספיק, אפשר להגדיל את המרחק */
@media (min-width: 1000px) {
.shared-container {
margin-right: 20px !important;
}
}
element.style {
display: grid
;
gap: 92px;
margin: 28px;
}
.shared-view {
display: block;
width: 100%;
margin-top: 20px;
}
.shared-block {
background: #2e2512;
border: 1px solid #515e56;
border-radius: 16px;
padding: 16px;
margin-bottom: 24px;
color: #cfe2df;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.shared-block h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 1rem;
font-weight: 700;
}
/* ==== TETROMINO ANIMATION ==== */
/* אריח בודד */
.tetromino {
width: 96px;
height: 112px;
position: absolute;
transition: all ease .3s;
background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}
/* מהירות: 1.5 שניות; מרחקים: xspace=48px, yspace=27px */
.box1 { animation: tetromino1 1.5s ease-out infinite; }
.box2 { animation: tetromino2 1.5s ease-out infinite; }
.box3 { animation: tetromino3 1.5s ease-out infinite; z-index: 2; }
.box4 { animation: tetromino4 1.5s ease-out infinite; }
@keyframes tetromino1 {
0%, 40% { transform: translate(0px, 0px); }
50% { transform: translate(48px, -27px); }
60%, 100% { transform: translate(96px, 0px); }
}
@keyframes tetromino2 {
0%, 20% { transform: translate(96px, 0px); }
40%, 100% { transform: translate(144px, 27px); }
}
@keyframes tetromino3 {
0% { transform: translate(144px, 27px); }
20%, 60% { transform: translate(96px, 54px); }
90%, 100% { transform: translate(48px, 27px); }
}
@keyframes tetromino4 {
0%, 60% { transform: translate(48px, 27px); }
90%, 100% { transform: translate(0px, 0px); }
}
/* ==== LOADING — FINAL OVERRIDES ==== */
#loading-overlay.hidden { opacity: 0 !important; pointer-events: none !important; }
#loading-overlay {
position: fixed !important;
inset: 0 !important;
display: grid !important;
place-items: center !important;
z-index: 99999 !important;
background: rgba(0,0,0,.75) !important;
}
#loading-overlay .loading-stack {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
left: 50% !important;
gap: 16px !important; /* רווח בין האנימציה לטקסט */
text-align: center !important;
}
/* מסגרת מוגדרת לגודל האנימציה, כדי שלא תגלוש על הטקסט */
#loading-overlay .tetro-frame {
width: 220px !important; /* אפשר לשנות גודל כאן */
height: 180px !important;
position: relative !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* מבטלים לחלוטין את המיקום הישן של tetrominos */
#loading-overlay .tetrominos {
position: relative !important; /* לא absolute כאן */
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 auto !important;
width: 192px !important; /* גודל האנימציה */
height: 140px !important;
}
/* גודל ה"אריחים" נשאר, אבל אפשר לכוונן את הסקייל אם גדול מדי */
#loading-overlay .tetrominos { transform: scale(0.9) !important; } /* 0.8/1.0 לפי הטעם */
#loading-overlay .loading-stack { gap: -12px !important; } /* או 20px */
#loading-overlay .loading-text {
display: block !important;
margin: 0 auto !important;
margin-right: -84px !important;
width: 100% !important;
max-width: 80vw !important; /* אפשר לשנות אם יש שורה ארוכה */
text-align: right !important; /* זה הטריק המרכזי */
direction: rtl !important; /* עברית */
unicode-bidi: plaintext !important;
line-height: 1.35 !important;
font-weight: 600 !important;
color: #fff !important;
}
/* Settings Panel Styles */
.section {
margin: 20px 0;
}
.section-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-dark);
}
.card {
background: #ced3b1;
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: 16px;
margin-bottom: 12px;
}
.block-label {
display: block;
font-weight: 600;
margin-bottom: 10px;
font-size: 0.85rem;
}
.theme-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 2px solid var(--border-soft);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
background: var(--bg-card);
}
.pill input[type="radio"] {
margin: 0;
}
.pill:has(input:checked) {
background: var(--accent-soft);
border-color: var(--accent-strong);
color: #fff;
}
.switch {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.switch input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.hint {
font-size: 0.75rem;
color: var(--text-mid);
margin-top: 8px;
opacity: 0.8;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
/* Dark Mode Variables */
.theme-dark {
--bg-app: #191919;
--bg-card: #252525;
--bg-sidebar-from: #0f0f0f;
--bg-sidebar-to: #B6A581;
--border-soft: rgba(255, 255, 255, 0.1);
--text-dark: #e0e0e0;
--text-mid: #b0b0b0;
--accent-soft: #d67a7a;
--accent-strong: #e8d4b4;
--shadow-card: 0 12px 32px rgba(0,0,0,0.5);
--shadow-topbar: 0 2px 6px rgba(0,0,0,0.3);
}
.theme-dark .sidebar {
background: #1f1f1f;
}
.theme-dark body {
background: var(--bg-app);
color: var(--text-dark);
}
.theme-dark .top-bar {
background: #263b30;
}
.theme-dark .tabs-bar {
background: #1a1a0a;
border-bottom-color: #3a3a3a;
}
.theme-dark .page-title,
.theme-dark .page-sub {
color: var(--text-dark);
}
.theme-dark .upload-btn {
background: #4a3a3a;
color: #e0e0e0;
}
.theme-dark .folder-card,
.theme-dark .doc-card {
background: var(--bg-card);
border-color: var(--border-soft);
}
.theme-dark .modal {
background: #2a2a2a;
color: #e0e0e0;
}
.theme-dark .modal-head,
.theme-dark .modal-foot {
background: #121816;
border-color: rgba(255, 255, 255, 0.1);
}
.theme-dark .btn {
background: #3a3a3a;
color: #e0e0e0;
border-color: rgba(255, 255, 255, 0.1);
}
.theme-dark .card {
background: #333;
border-color: rgba(255, 255, 255, 0.1);
}
.theme-dark .pill {
background: #3a3a3a;
border-color: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
}
.theme-dark .pill:has(input:checked) {
background: #d67a7a;
border-color: #e8d4b4;
}
.theme-dark .storage-widget {
background: rgba(0, 0, 0, 0.169);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.75rem;
color: #6f716f;
display: flex;
flex-direction: column;
gap: 6px;
}
.theme-dark .storage-bar-fill {
position: absolute;
inset: 0;
/* width מוגדר ב-JavaScript דינמית */
border-radius: inherit;
background: linear-gradient(90deg, #c7d39d, #aab4ae);
transition: width 0.3s ease;
}
/* ========== תיקון גלילה רוחבית וריכוז - גרסה סופית ========== */
/* תיקון גלובלי */
html {
overflow-x: hidden !important;
max-width: 100vw;
}
body {
overflow-x: hidden !important;
max-width: 100vw;
}
.dashboard {
overflow-x: hidden !important;
max-width: 100vw;
}
/* תיקון docsList במצב shared */
.docs-list.shared-mode {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: 100vw !important;
margin: 0 auto !important;
padding: 0 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Container של 3 הבלוקים */
.shared-top-blocks {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
max-width: 900px !important;
margin: 0 auto 20px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* כל הבלוקים החומים */
.cozy-head,
.pending-wrap,
.sf-list {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Grid המסמכים */
.docs-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
gap: 20px !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* תיקון כרטיסי מסמכים */
.doc-card {
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.doc-card-title {
word-break: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
/* מסכים בינוניים (768px - 1024px) */
@media (max-width: 1024px) {
.docs-list.shared-mode {
padding: 0 12px !important;
}
.shared-top-blocks {
max-width: calc(100vw - 24px) !important;
}
.docs-grid {
max-width: calc(100vw - 24px) !important;
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important;
gap: 16px !important;
}
}
/* מסכים קטנים (640px - 768px) */
@media (max-width: 768px) {
.docs-list.shared-mode {
padding: 0 8px !important;
}
.shared-top-blocks {
max-width: calc(100vw - 16px) !important;
}
.docs-grid {
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)) !important;
max-width: calc(100vw - 16px) !important;
gap: 12px !important;
}
.cozy-head {
flex-direction: column !important;
}
.cozy-head > div {
width: 100% !important;
}
}
/* מובייל (מתחת ל-640px) */
@media (max-width: 640px) {
.docs-list.shared-mode {
padding: 0 8px !important;
}
.shared-top-blocks {
max-width: calc(100vw - 16px) !important;
gap: 10px !important;
}
.docs-grid {
grid-template-columns: 1fr !important;
max-width: calc(100vw - 16px) !important;
gap: 10px !important;
}
.btn-cozy {
width: 100% !important;
padding: 10px !important;
}
}
/* מובייל קטן מאוד (מתחת ל-480px) */
@media (max-width: 480px) {
.docs-list.shared-mode {
padding: 0 4px !important;
}
.shared-top-blocks {
max-width: calc(100vw - 8px) !important;
}
.docs-grid {
max-width: calc(100vw - 8px) !important;
}
.cozy-head h3 {
font-size: 1.1rem !important;
}
}/* Input inside popup */
.eco-input{
width: 100%;
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--c-border, #e6e6e6);
background: var(--c-bg, #fff);
color: var(--c-fg, #0f141a);
outline: none;
box-sizing: border-box;
}
.eco-input:focus{
border-color: rgba(93, 138, 107, 0.6);
box-shadow: 0 0 0 3px rgba(93, 138, 107, 0.18);
}
/* ========== סוף התיקון ========== */
.small-btn {
background: #505733;
color: #cbc7be;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 0.45rem 1rem;
border-radius: 21px;
border: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s
ease, box-shadow 0.2s
ease;
}
.theme-dark .small-btn {
background: #121c17;
color: #e1dfd7;
}
.small-btn:hover {
background: #878e6b;
color: rgb(30, 17, 9);
}
.subfolders-bar {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.5rem 0 0.8rem;
}
.subfolders-bar button {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
border-radius: 999px;
border: 1px solid #04280b;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #eef3ec;
cursor: pointer;
}
.subfolders-bar button.active {
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #b7ad8c;
color: #400c0c;
border-color: #b7ad8c;
}
.theme-dark .subfolders-bar button {
background: #1a1a1a;
color: #ccc;
border-color: #333;
}
.theme-dark .subfolders-bar button :hover{
background: #abb3ab;
color: #000;
border-color: #333;
}
/* ==== Eco Alert Styles ==== */
#eco-alert-root {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: flex-start;
pointer-events: none;
}
.eco-alert {
pointer-events: auto;
margin-top: 25px;
padding: 18px 20px;
background: var(--c-bg, #fff);
color: var(--c-fg, #0f141a);
border: 1px solid var(--c-border, rgba(0,0,0,0.08));
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,0.25);
width: min(350px, 90%);
animation: dropDown 0.35s ease;
font-family: sans-serif;
display: flex;
gap: 12px;
direction: rtl;
}
.eco-alert-icon {
font-size: 22px;
}
.eco-alert-title {
font-size: 0.95rem;
font-weight: 600;
margin: 0;
}
@keyframes dropDown {
0% { opacity: 0; transform: translateY(-30px) scale(.96); }
60% { opacity: 1; transform: translateY(4px) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.eco-success { border-right: 4px solid #16a34a; }
.eco-error { border-right: 4px solid #dc2626; }
.eco-warning { border-right: 4px solid #d97706; }
.eco-info { border-right: 4px solid #2563eb; }
.overlay {
position: fixed;
width: 100%;
height: 100%;
inset: 0;
background: rgba(0,0,0,.65);
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
background: #e1e3d5;
padding: 24px 28px;
border-radius: 12px;
width: min(340px, 90%);
animation: dropDown .35s ease;
direction: rtl;
}
@keyframes dropDown {
0% {opacity:0; transform: translateY(-30px) scale(.96);}
60% {opacity:1; transform: translateY(3px) scale(1.02);}
100% {opacity:1; transform: translateY(0) scale(1);}
}
.btn {
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.btn-primary {
background: #C04C4C;
color: white;
border: none;
}
.btn-cancel {
background: #F5F1EB;
color: black;
border: none;
}
.buttons {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 12px; /* רווח בין הכפתורים */
flex-direction: row;
}
.btn {
flex: 1; /* הכפתורים יהיו שווים ברוחב */
padding: 10px 0;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
border: none;
font-size: 0.95rem;
}
.btn-primary {
background: #dd5353;
color: white;
}
.btn-cancel {
background: #ffffff;
color: #222;
border-color: #614628 ;
}
/* === GLOBAL BEAUTIFUL SCROLLBAR FOR WHOLE SITE === */
/* Firefox */
html, body, * {
scrollbar-width:auto;
scrollbar-color: #2b260b #e1dbcf;
}
/* WebKit (Chrome, Edge, Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: #c8d1c5; /* חום כהה */
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background-color: #2b260b; /* הבהיר */
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
background-color: #e4e9e0; /* קצת יותר בהיר בהובר */
}
.theme-dark html, body, * {
scrollbar-width:auto;
scrollbar-color: #cececc #1a1a1a;
}
/* ===== Icons ===== */
.tab-btn .icon-img {
width: 20px;
height: 20px;
object-fit: contain;
margin-right: -2px;
vertical-align: middle;
}
.tab-btn .scan-icon {
width: 20px;
height: 20px;
object-fit: contain;
margin-left: -2px;
vertical-align: middle;
}
.logout-icon {
width: 18px;
height: 18px;
object-fit: contain;
margin-left: 4px;
vertical-align: middle;
}
.tab-btn {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tab-btn:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.small-btn {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.small-btn:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.menu-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.brand-left {
display: flex;
align-items: center;
gap: 8px; /* רווח בין הלוגו לטקסט */
}
.brand-logo {
width: 32px;
height: 32px;
object-fit: contain;
}
/* ===== STORAGE WIDGET (במקום כפתור התנתקות) ===== */
.storage-widget {
background: rgba(0, 0, 0, 0.18);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.75rem;
color: #052806;
display: flex;
flex-direction: column;
gap: 6px;
}
.storage-label-row {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.storage-label {
display: inline-flex;
align-items: center;
gap: 4px;
}
.storage-bar {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
overflow: hidden;
}
.storage-bar-fill {
position: absolute;
inset: 0;
/* width מוגדר ב-JavaScript דינמית */
border-radius: inherit;
background: linear-gradient(90deg, #B4C282, #57C785);
transition: width 0.3s ease;
}
.storage-percent {
font-size: 0.72rem;
opacity: 0.9;
}
.storage-text {
font-size: 0.72rem;
opacity: 0.85;
text-align: right;
direction: rtl;
}
/* במובייל – שיהיה טיפונת יותר קומפקטי */
@media (max-width: 768px) {
.storage-widget {
padding: 8px 10px;
font-size: 0.7rem;
}
.storage-text {
font-size: 0.68rem;
}
}
/* ====== MODERN SEARCH BOX ====== */
/* ====== MODERN SEARCH BOX ====== */
.search-wrapper {
display: flex;
align-items: center;
/* במסך גדול ~260px, במסך קטן יכול להתכווץ */
flex: 1 1 260px;
max-width: 100%;
background: #f3f3f1;
border-radius: 30px;
border: 1px solid #d3d3d3;
flex-direction: row-reverse;
overflow: hidden;
}
.theme-dark .search-wrapper {
border: 1px solid #787878;
}
.top-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
flex-wrap: wrap; /* חשוב!! מאפשר להתכווץ */
}
@media (max-width: 480px) {
.search-wrapper {
width: 70vw; /* עוד יותר קטן במובייל */
}
.search-input {
font-size: 0.8rem;
padding: 6px 8px;
}
.search-btn {
width: 32px;
height: 32px;
}
}
/* ===== כותרת מסך קטגוריה במובייל ===== */
@media (max-width: 600px) {
.category-view-header {
display: flex;
flex-wrap: wrap; /* שורה נשברת לכמה שורות */
gap: .4rem;
align-items: flex-start;
}
.back-button {
font-size: .75rem;
padding: .25rem .5rem;
}
.category-title {
flex: 1 1 100%; /* כותרת תופסת שורה שלמה */
font-size: 1rem;
}
.search-wrapper {
order: 3; /* ירד לשורה מתחת */
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
#sortSelect {
order: 4; /* גם הסלקט (תאריך העלאה) בשורה נפרדת */
flex: 1 1 100%;
width: 100%;
font-size: .75rem;
margin-top: .2rem;
}
}
.search-btn {
background: #202020;
width: 42px;
height: 38px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
}
.theme-dark .search-btn {
background: #353e31;
}
.search-btn img {
width: 18px;
height: 18px;
}
.search-input {
flex: 1;
padding: 10px 14px;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #333;
font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* צבע ברור ל־placeholder "חיפוש..." */
.search-input::placeholder {
color: #999;
}
/* ✅ שהאחסון יופיע תמיד במובייל בתוך הגלילה */
@media (max-width: 760px) {
.sidebar {
display: flex !important;
flex-direction: column !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
.sidebar-content {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 1rem !important;
}
.sidebar-bottom {
position: relative !important;
bottom: auto !important;
margin-top: 0 !important;
padding: 0.75rem 1rem !important;
padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
background: transparent !important;
flex-shrink: 0 !important;
z-index: 10;
}
}
.back-button {
display: flex ;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 14px;
cursor: pointer;
color: #2b2b2b;
font-family: inherit;
}
.back-button .back-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
.theme-dark .back-button {
color: #cfcfcf;
}
.btn-icon {
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
margin-left: 6px;
}
.theme-dark .top-left .page-title {
color: #9f9f9f !important;
}
.theme-dark .folder-icon {
width: 40px;
height: 32px;
border-radius: 6px;
background: #e3d097;
box-shadow: 0 6px 12px rgb(13 12 4 / 62%);
position: relative;
}
/* === Edit Modal Base === */
#editModal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
font-family: 'Rubik', system-ui, sans-serif;
}
.edit-modal-panel {
background: var(--bg-card);
color: var(--text-dark);
min-width: 320px;
max-width: 90vw;
width: 400px;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,.4);
padding: 1rem 1rem 0.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.edit-modal-title {
margin: 0;
font-size: .9rem;
font-weight: 600;
color: #000;
}
.edit-form {
display: flex;
flex-direction: column;
gap: .5rem;
font-size: .8rem;
}
.edit-form label {
display: flex;
flex-direction: column;
gap: 4px;
}
.edit-form input {
width: 100%;
padding: .4rem;
border-radius: 6px;
border: 1px solid #bbb;
font-family: inherit;
font-size: .8rem;
}
.edit-buttons-row {
display: flex;
gap: .5rem;
margin-top: .75rem;
justify-content: flex-end;
}
.edit-btn {
border: 0;
border-radius: 1.5rem;
font-weight: 600;
padding: .5rem .75rem;
cursor: pointer;
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
}
/* כפתורים בבירור (מצב רגיל) */
.edit-btn-cancel {
background: #a83737;
color: #fff;
}
.edit-btn-save {
background: #60683f;
color: #000000;
}
/* === Dark Mode for Edit Modal === */
.theme-dark #editModal {
background: rgba(0,0,0,.7);
}
.theme-dark .edit-modal-panel {
background: #1e231f;
color: #e4e6eb;
}
.theme-dark .edit-modal-title {
color: #e4e6eb;
}
.theme-dark .edit-form input {
background: #151a19;
border-color: rgba(255,255,255,0.16);
color: #e4e6eb;
}
.theme-dark .edit-form input::placeholder {
color: rgba(228,230,235,0.5);
}
.theme-dark .edit-btn-cancel {
background: #dc3545;
}
.theme-dark .edit-btn-save {
background: #c7cac6;
}
.theme-dark #sortSelect {
background: var(--bg-card) !important;
border-color: #444 !important;
color: #e4e6eb !important;
}
.theme-dark #sortSelect option {
background: var(--bg-card) !important;
color: #e4e6eb !important;
}
/* בסיס */
#sortSelect {
margin-right: auto;
font-size: .75rem;
padding: .4rem .5rem;
border-radius: 12px;
background: var(--bg-card);
border: 1px solid #999;
color: #1a1a1a;
cursor: pointer;
transition: .2s;
}
.theme-dark .doc-open-link{
background: #387457 !important;
}
/* === מצב כהה לשורת "הוסף מייל לשיתוף" === */
.theme-dark #detail_inv_email {
background: #1f2922 !important;
}
.theme-dark #detail_inv_email::placeholder {
color: rgba(228, 230, 235, 0.5) !important;
}
/* ==== מצב כהה למודל הוספת פרופיל ==== */
.theme-dark #profileModalBackdrop {
background: rgba(0,0,0,0.6) !important;
}
.theme-dark #profileModalBackdrop .modal-panel {
background: #252525 !important;
color: #e4e6eb !important;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
}
.theme-dark #profileModalBackdrop h2 {
color: #e4e6eb !important;
}
.theme-dark #profileModalBackdrop input[type="text"],
.theme-dark #profileModalBackdrop input[type="date"],
.theme-dark #profileModalBackdrop input[type="file"] {
background: #323232 !important;
border-color: #3a3f47 !important;
color: #e4e6eb !important;
}
.theme-dark #profileModalBackdrop input::placeholder {
color: rgba(228,230,235,0.5) !important;
}
.theme-dark #profileModalBackdrop #profilePhotoPreview {
border-color: #b9d8ac !important;
color: #fff !important;
background: #2a2e36 !important;
}
.theme-dark #profileModalBackdrop button {
color: #e4e6eb !important;
}
/* כפתור ביטול */
.theme-dark #profileModalCancelBtn {
background: #3a3f47 !important;
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
border-radius: 1.3rem !important;
}
/* כפתור שמירה */
.theme-dark #profileModalSaveBtn {
background: #198754 !important;
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
color: #fff !important;
border-radius: 1.3rem !important;
}
/* ===== מודל בחירת תיקייה ===== */
#chooseFolderOverlay {
position: fixed;
inset: 0;
display: none; /* נפתח ע"י JS */
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
z-index: 2000;
}
#chooseFolderOverlay .modal {
width: 100%;
max-width: 420px;
background: #e1e1e1;
border-radius: 20px;
padding: 24px 22px 18px;
box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
/* במצב כהה – שיתאים ללוק הכללי */
.theme-dark #chooseFolderOverlay .modal {
background: #121816;
border: 1px solid rgba(82, 152, 115, 0.3);
}
#chooseFolderOverlay h2 {
margin: 0 0 16px;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-mid);
}
#chooseFolderOverlay label {
display: block;
font-size: 0.85rem;
margin-bottom: 6px;
color: var(--text-dark);
}
/* שדה הבחירה (תיקייה ראשית / תת-תיקייה) */
.folder-select {
width: 100%;
padding: 10px 14px;
margin-bottom: 16px;
border-radius: 9999px;
border: 1px solid var(--border-soft);
background: rgba(0,0,0,0.35);
color: var(--text-mid);
outline: none;
font-family: inherit;
font-size: 0.9rem;
/* להסתיר חץ מכוער של הדפדפן */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 12px;
padding-left: 32px; /* מקום לחץ */
}
.folder-select:focus {
border-color: var(--accent-strong);
box-shadow: 0 0 0 2px rgba(61,122,89,0.5);
}
/* כפתורי הפעולה בתחתית */
.choose-folder-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
/* שיהיו עגולים ויפים יותר ממקום אחר באתר */
#chooseFolderOverlay .btn-primary,
#chooseFolderOverlay .btn-cancel {
border-radius: 9999px;
padding: 8px 18px;
font-size: 0.85rem;
min-width: 90px;
}
/* כפתור ביטול – עדין כזה */
#chooseFolderOverlay .btn-cancel {
background: #f5f5f5;
border: 1px solid #ddd;
color: #222;
}
.theme-dark #chooseFolderOverlay .btn-cancel {
background: rgba(90, 30, 30, 0.3);
border-color: rgba(200, 80, 80, 0.4);
color: #ffb3b3;
}
.theme-dark .edit-icon {
content: url("../assests/icons/editDark.png");
}
.theme-dark .trash-icon {
content: url("../assests/icons/trashDark.png");
}
.theme-dark .share-icon {
content: url("../assests/icons/shareDark.png");
}
.theme-dark #scanModal > div {
background: #121816 !important;
color: #e8f0ec !important;
border: 1px solid rgba(82,152,115,0.3);
}
.theme-dark #scanModal h2 {
color: #c5e3d2 !important;
}
.theme-dark #scanModal button {
color: #e8f0ec !important;
}
.theme-dark #scanModal #scanEmptyState {
color: #9eb8a9 !important;
}
.theme-dark #scanModal #scanAddPageBtn {
background: rgba(45, 90, 67, 0.35) !important;
color: #d4f0e0 !important;
border: 1px solid rgba(82,152,115,0.4) !important;
}
.theme-dark #scanModal #scanAddPageBtn:hover {
background: rgba(61, 122, 89, 0.5) !important;
}
.theme-dark #scanModal #scanUploadBtn {
background: linear-gradient(135deg, #1e4d3a, #2d6b4d) !important;
color: #e8f0ec !important;
opacity: 1 !important;
}
.theme-dark #scanModal {
background: rgba(5, 8, 7, 0.85) !important;
backdrop-filter: blur(4px);
}
/* 🌙 מצב כהה – שורת עמוד */
.theme-dark #scanPagesContainer > div {
background: rgba(18, 24, 22, 0.7) !important;
border: 1px solid rgba(82,152,115,0.25) !important;
}
/* טקסט "עמוד X" */
.theme-dark #scanPagesContainer div div {
color: #c5e3d2 !important;
}
/* הכפתור הכחול – צלם/י שוב */
.theme-dark #scanPagesContainer button:nth-child(1) {
background: rgba(45, 90, 67, 0.35) !important;
color: #d4f0e0 !important;
border: 1px solid rgba(82,152,115,0.35) !important;
}
/* הכפתור האדום – מחק */
.theme-dark #scanPagesContainer button:nth-child(2) {
background: rgba(120, 40, 40, 0.35) !important;
color: #ffb3b3 !important;
border: 1px solid rgba(200, 80, 80, 0.4) !important;
}
/* תמונת התצוגה המקדימה */
.theme-dark #scanPagesContainer img {
border: 1px solid rgba(82,152,115,0.3) !important;
}
/* ===== מודאל בסיס ===== */
.scan-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 1rem;
}
.scan-modal-content {
background: var(--modal-bg);
color: var(--modal-text);
border-radius: 12px;
padding: 2rem;
max-width: 500px;
width: 100%;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
/* טקסטים */
.scan-modal-title {
font-size: 1.3rem;
margin: 0 0 1.5rem 0;
font-weight: 600;
}
/* שדות */
.scan-input {
width: 100%;
padding: 0.75rem;
border-radius: 8px;
border: 1px solid var(--input-border);
margin-top: 5px;
font-size: 1rem;
margin-bottom: 1rem;
background: var(--input-bg);
color: var(--input-text);
}
/* כפתורים */
.modal-btns {
display: flex;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: nowrap;
align-content: stretch;
align-items: flex-end;
}
.modal-btn-cancel {
padding: 0.75rem 1.5rem;
border: 1px solid var(--input-border);
background: var(--modal-cancel-bg);
color: var(--modal-cancel-text);
border-radius: 8px;
cursor: pointer;
}
.modal-btn-save {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
background: #707a4e;
color: white;
cursor: pointer;
font-weight: 500;
}
/* ===== מצב בהיר ===== */
:root {
--modal-bg: #e1e3d5;
--modal-text: #2c3e50;
--modal-cancel-text: #2c3e50;
--modal-cancel-bg: #f3f3f3;
--input-bg: #eceee2;
--input-text: #2c3e50;
--input-border: #d5d5d5;
}
/* ===== מצב כהה ===== */
.theme-dark {
--modal-bg: #0a0f0d;
--modal-text: #e6e6e6;
--modal-cancel-text: #1b1b1b;
--input-bg: #262b33;
--input-text: #f2f2f2;
--input-border: #3a3f47;
}
/* ===== Overlay של חיתוך ===== */
.scan-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
}
/* ===== חלון פנימי ===== */
.scan-panel {
background: var(--scan-bg);
color: var(--scan-text);
border-radius: 12px;
padding: .75rem;
max-width: 95vw;
width: 420px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: .5rem;
box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
/* ===== כותרת ===== */
.scan-title {
margin: 0 0 .25rem 0;
font-size: .95rem;
font-weight: 600;
}
/* ===== קנבס ===== */
.scan-canvas {
max-width: 100%;
height: auto;
max-height: 55vh;
display: block;
margin: 0 auto;
border-radius: 8px;
border: 1px solid var(--scan-border);
background: #000;
}
/* ===== טקסט SLIDER ===== */
.scan-slider-label {
font-size: .8rem;
color: var(--scan-subtext);
}
/* ===== שורה כפתורים ===== */
.scan-buttons {
display: flex;
justify-content: space-between;
gap: .5rem;
margin-top: .4rem;
}
/* ===== כפתורים ===== */
.scan-btn-cancel {
flex: 1;
padding: .45rem .75rem;
border-radius: 999px;
border: none;
cursor: pointer;
background: var(--scan-cancel-bg);
color: var(--scan-cancel-text);
font-size: .85rem;
}
.scan-btn-ok {
flex: 1;
padding: .45rem .75rem;
border-radius: 999px;
border: none;
cursor: pointer;
background: #2ecc71;
color: #fff;
font-size: .85rem;
font-weight: 600;
}
/* ===== מצב בהיר ===== */
:root {
--scan-bg: #ffffff;
--scan-text: #222;
--scan-subtext: #555;
--scan-border: #ddd;
--scan-cancel-bg: #eee;
--scan-cancel-text: #333;
}
/* ===== מצב כהה ===== */
.theme-dark {
--scan-bg: #1b1f25;
--scan-text: #e8e8e8;
--scan-subtext: #aaa;
--scan-border: #3a3a3a;
--scan-cancel-bg: #333;
--scan-cancel-text: #f5f5f5;
}
/* ===== פנל יצירת תיקייה ===== */
.mk-panel {
background: var(--mk-panel-bg);
color: var(--mk-panel-text);
width: min(520px, 92vw);
border: 1px solid var(--mk-panel-border);
border-radius: 14px;
padding: 14px;
box-shadow: 0 18px 44px rgba(0,0,0,.5);
display: grid;
gap: 10px;
grid-template-rows: auto auto auto;
}
/* כותרת */
.mk-header {
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
}
/* שדה טקסט */
.mk-input {
padding: .6rem;
border-radius: 10px;
border: 1px solid var(--mk-input-border);
background: var(--mk-input-bg);
color: var(--mk-input-text);
}
/* שורת כפתורים */
.mk-buttons {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ===== מצב בהיר ===== */
:root {
--mk-panel-bg: #ffffff;
--mk-panel-text: #1b1b1b;
--mk-panel-border: #d0d0d0;
--mk-input-bg: #ffffff;
--mk-input-text: #1b1b1b;
--mk-input-border: #c3c3c3;
}
/* ===== מצב כהה ===== */
.theme-dark {
--mk-panel-bg: #0b1010;
--mk-panel-text: #e7f0ee;
--mk-panel-border: #243030;
--mk-input-bg: #101a1a;
--mk-input-text: #e0f0ee;
--mk-input-border: #243030;
}
/* מצב כהה — מחליף את האייקונים */
.theme-dark .profile-edit-btn img {
content: url("../assests/icons/editDark.png");
}
.theme-dark .profile-delete-btn img {
content: url("../assests/icons/trashDark.png");
}
.theme-dark .profile-share-btn img {
content: url("../assests/icons/share-profileDark.png");
}
/* מצב כהה – הטקסט של כפתור השיתוף נהיה לבן */
.theme-dark .profile-share-btn {
color: white !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* הוסף את ה-CSS הזה לקובץ index.html (בתוך