/* * MedComply UI Component Library * Apple-inspired design language (iOS/macOS 2024) * Typography: SF Pro / SF Hebrew on Apple devices (via system-ui), * Heebo (Google Fonts) fallback for Hebrew on non-Apple. * * Import in every page: * */ /* ── Apple-grade Hebrew font (Heebo — closest to SF Hebrew) ── */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: auto; overflow: visible; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Icons', 'Heebo', system-ui, 'Segoe UI', Roboto, sans-serif; font-size: 100%; line-height: 1.47; color: #1d1d1f; /* direction inherits from set by i18n.js */ height: auto; overflow: visible; letter-spacing: -0.022em; font-feature-settings: 'kern' 1; } /* ═══════════════════════════════════════════════════════ PAGE BACKGROUND — Apple gradient ═══════════════════════════════════════════════════════ */ .page-bg { min-height: 100vh; background: transparent; } /* ═══════════════════════════════════════════════════════ NAV BAR — frosted glass ═══════════════════════════════════════════════════════ */ /* nav-bar visual style only — sizing/padding deferred to .topbar in shared.css */ .nav-bar { background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); /* padding + height removed — let .topbar control sizing */ display: flex; align-items: center; position: sticky; top: 0; z-index: 100; } .nav-bar .nav-logo { font-weight: 700; font-size: 18px; letter-spacing: -0.4px; color: #1a7340; } .nav-bar .nav-links { display: flex; gap: 4px; list-style: none; margin-inline-start: 32px; } .nav-bar .nav-links a { text-decoration: none; color: #1d1d1f; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease; } .nav-bar .nav-links a:hover { background: rgba(26,115,64,0.08); color: #1a7340; } .nav-bar .nav-links a.active { background: rgba(26,115,64,0.12); color: #1a7340; font-weight: 600; } .nav-bar .nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; } /* ═══════════════════════════════════════════════════════ BUTTONS — Apple pill style ═══════════════════════════════════════════════════════ */ .btn-primary { background: linear-gradient(180deg, #1e8a49 0%, #1a7340 100%); color: white; border: none; border-radius: 9999px; padding: 14px 32px; font-size: 17px; font-family: inherit; font-weight: 600; letter-spacing: -0.3px; min-height: 50px; width: 100%; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(26,115,64,0.35), 0 1px 3px rgba(0,0,0,0.12); transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease; -webkit-font-smoothing: antialiased; } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px rgba(26,115,64,0.45), 0 2px 4px rgba(0,0,0,0.15); } .btn-primary:active { transform: scale(0.97); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 6px rgba(26,115,64,0.25); filter: brightness(0.95); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; } .btn-secondary { background: rgba(26,115,64,0.08); color: #1a7340; border: 1.5px solid rgba(26,115,64,0.25); border-radius: 9999px; padding: 13px 32px; font-size: 17px; font-family: inherit; font-weight: 600; letter-spacing: -0.3px; min-height: 50px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.15s ease; } .btn-secondary:hover { background: rgba(26,115,64,0.14); border-color: rgba(26,115,64,0.4); } .btn-secondary:active { transform: scale(0.97); } .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-danger { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); color: white; border: none; border-radius: 9999px; padding: 14px 32px; font-size: 17px; font-family: inherit; font-weight: 600; letter-spacing: -0.3px; min-height: 50px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(192,57,43,0.35), 0 1px 3px rgba(0,0,0,0.12); transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease; -webkit-font-smoothing: antialiased; } .btn-danger:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px rgba(192,57,43,0.45), 0 2px 4px rgba(0,0,0,0.15); } .btn-danger:active { transform: scale(0.97); filter: brightness(0.95); } .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; } .btn-ghost { background: transparent; color: #1a7340; border: none; padding: 10px 20px; font-size: 15px; font-family: inherit; font-weight: 500; cursor: pointer; border-radius: 12px; transition: background 0.15s ease; } .btn-ghost:hover { background: rgba(26,115,64,0.08); } .btn-ghost:active { background: rgba(26,115,64,0.14); } .btn-small { padding: 8px 18px; font-size: 14px; min-height: 34px; border-radius: 9999px; } /* Inline buttons (don't stretch full width) */ .btn-inline { width: auto; } /* ═══════════════════════════════════════════════════════ INPUTS — Apple text field style ═══════════════════════════════════════════════════════ */ .input-field { background: rgba(120,120,128,0.08); border: 1.5px solid rgba(120,120,128,0.2); border-radius: 12px; padding: 14px 16px; font-size: 17px; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-font-smoothing: antialiased; /* direction inherits; content-type overrides in shared.css handle LTR inputs. */ color: #1d1d1f; } .input-field::placeholder { color: rgba(60,60,67,0.45); } .input-field:focus { outline: none; border-color: #1a7340; box-shadow: 0 0 0 3px rgba(26,115,64,0.15); background: white; } .input-field:disabled { opacity: 0.5; cursor: not-allowed; } /* Select fields inherit input style */ select.input-field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; /* Chevron always on the trailing (end) edge regardless of direction */ background-position: right 14px center; padding-inline-end: 36px; } [dir="rtl"] select.input-field { background-position: left 14px center; } /* Textarea inherits input style */ textarea.input-field { resize: vertical; min-height: 80px; } /* ═══════════════════════════════════════════════════════ FORM LABELS ═══════════════════════════════════════════════════════ */ .form-label { display: block; font-size: 14px; font-weight: 600; color: #3c3c43; margin-bottom: 6px; letter-spacing: -0.1px; } .form-group { margin-bottom: 20px; } .required-star { color: #e74c3c; margin-inline-start: 2px; } /* ═══════════════════════════════════════════════════════ CARDS — Apple glass card ═══════════════════════════════════════════════════════ */ .card { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); } .card-compact { padding: 20px; border-radius: 16px; } /* ═══════════════════════════════════════════════════════ STATUS BADGES ═══════════════════════════════════════════════════════ */ .badge { display: inline-block; border-radius: 9999px; padding: 4px 12px; font-size: 13px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; } .badge-success { background: #d4f5e2; color: #1a7340; } .badge-warning { background: #fff3cd; color: #856404; } .badge-danger { background: #fde8e8; color: #c0392b; } .badge-info { background: #e3f2fd; color: #1565c0; } .badge-neutral { background: rgba(120,120,128,0.12); color: #636366; } /* ═══════════════════════════════════════════════════════ MODALS — Apple sheet style ═══════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal-content { background: rgba(255,255,255,0.95); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1); width: 90%; max-width: 640px; max-height: 85vh; overflow-y: auto; padding: 32px; position: relative; animation: modalSlideUp 0.25s ease-out; } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-close { position: absolute; top: 12px; /* Close button always at the opposite-of-reading side (start/inline-start) */ inset-inline-start: 12px; background: rgba(120,120,128,0.12); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; color: #636366; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .modal-close:hover { background: rgba(120,120,128,0.2); } /* ═══════════════════════════════════════════════════════ TABLES — clean Apple style ═══════════════════════════════════════════════════════ */ .table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); } .table th { background: rgba(26,115,64,0.06); color: #3c3c43; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; padding: 12px 16px; text-align: start; border-bottom: 1px solid rgba(0,0,0,0.08); } .table td { padding: 14px 16px; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; } .table tbody tr { transition: background 0.15s ease; } .table tbody tr:hover { background: rgba(26,115,64,0.04); } .table tbody tr:last-child td { border-bottom: none; } /* ═══════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════ */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; } .page-btn { padding: 8px 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; background: rgba(255,255,255,0.8); font-family: inherit; font-size: 15px; cursor: pointer; transition: all 0.15s ease; } .page-btn:hover { background: rgba(26,115,64,0.08); } .page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .page-btn.active { background: linear-gradient(180deg, #1e8a49 0%, #1a7340 100%); color: white; border-color: transparent; font-weight: 600; } /* ═══════════════════════════════════════════════════════ SPINNER ═══════════════════════════════════════════════════════ */ .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(26,115,64,0.2); border-top-color: #1a7340; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════ MESSAGES / ALERTS ═══════════════════════════════════════════════════════ */ .msg { padding: 14px 20px; border-radius: 14px; font-size: 15px; font-weight: 500; margin-bottom: 16px; display: none; } .msg:not(:empty) { display: block; } .msg-success { background: rgba(26,115,64,0.1); color: #1a7340; border: 1px solid rgba(26,115,64,0.2); } .msg-error { background: rgba(231,76,60,0.1); color: #c0392b; border: 1px solid rgba(231,76,60,0.2); } .msg-info { background: rgba(21,101,192,0.08); color: #1565c0; border: 1px solid rgba(21,101,192,0.15); } /* ═══════════════════════════════════════════════════════ SECTION TITLES ═══════════════════════════════════════════════════════ */ .page-title { font-size: 34px; font-weight: 800; letter-spacing: -0.015em; color: #1d1d1f; margin-bottom: 8px; line-height: 1.15; } .page-subtitle { font-size: 17px; color: rgba(60,60,67,0.6); margin-bottom: 28px; } .section-title { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; color: #1d1d1f; margin-bottom: 16px; line-height: 1.2; } /* ═══════════════════════════════════════════════════════ UTILITY ═══════════════════════════════════════════════════════ */ .text-center { text-align: center; } .text-muted { color: rgba(60,60,67,0.6); } .text-small { font-size: 14px; } .mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; } .mb-4 { margin-top: 16px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 640px) { .card { padding: 20px; border-radius: 16px; } .page-title { font-size: 28px; } .nav-bar { padding: 0 16px; } .btn-primary, .btn-secondary, .btn-danger { font-size: 16px; padding: 12px 24px; min-height: 46px; } } /* ═══════════════════════════════════════════════════════ PRINT BUTTON ═══════════════════════════════════════════════════════ */ .btn-print { background: transparent; border: 1.5px solid rgba(0,0,0,0.15); border-radius: 9999px; padding: 8px 16px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; color: #48484a; font-family: inherit; } .btn-print:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.25); } /* Print header — hidden on screen, shown when printing */ .print-header { display: none; } /* ═══════════════════════════════════════════════════════ PRINT STYLESHEET ═══════════════════════════════════════════════════════ */ @media print { .nav-bar, .topbar, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-print, .no-print, .filters-bar, .pagination, .topbar-user, .modal-overlay { display: none !important; } body, .page-bg { background: white !important; font-size: 12pt; } .card { box-shadow: none !important; border: 1px solid #ddd !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body { direction: rtl; font-family: Arial, 'Heebo', sans-serif; } @page { size: A4; margin: 20mm; } .print-header { display: block !important; } * { color: black !important; } table th, table td, .records-table th, .records-table td, .patients-table th, .patients-table td { border: 1px solid #ccc !important; } table th, .records-table th, .patients-table th { background: #f0f0f0 !important; } }