/* ============================================================ ClinicFlow Pro — css/base.css Phase 1: Foundation CSS Custom Properties, Reset, Typography, Utilities ============================================================ */ /* ── Google Fonts: Tajawal (Arabic) ── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); /* ── Root Variables (defaults — overridden by themes.css) ── */ :root { /* Colors — set by theme classes on */ --primary: #3730a3; --primary-light: #6366f1; --accent: #0ea5e9; --bg-main: #f0f4ff; --bg-card: #ffffff; --bg-sidebar: #1e1b4b; --text-primary: #1e1b4b; --text-secondary: #6366f1; --border: #c7d2fe; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 2px 8px rgba(55, 48, 163, 0.10); /* Sidebar text — always light since sidebar is dark */ --sidebar-text: #e0e7ff; --sidebar-hover: rgba(255, 255, 255, 0.10); --sidebar-active: rgba(255, 255, 255, 0.18); /* Layout */ --sidebar-width: 260px; --topbar-height: 64px; --bottomnav-height: 60px; --content-padding: 24px; --border-radius: 10px; --border-radius-sm: 6px; --border-radius-lg: 16px; /* Typography — controlled by font-size class on */ --font-size-base: 16px; --font-size-sm: 0.875rem; /* 14px at base 16 */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ /* Transitions */ --transition: 0.25s ease; --transition-slow: 0.4s ease; /* Z-index layers */ --z-base: 1; --z-dropdown: 100; --z-sidebar: 200; --z-overlay: 190; --z-topbar: 150; --z-modal: 300; --z-toast: 400; } /* ── Font Size Classes (applied to ) ── */ html.font-small { font-size: 14px; } html.font-medium { font-size: 16px; } html.font-large { font-size: 18px; } /* ── CSS Reset & Normalize ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size-base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; font-size: var(--font-size-md); font-weight: 400; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-main); direction: rtl; text-align: right; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition), color var(--transition); } /* Remove default styles */ a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; outline: none; background: none; } table { border-collapse: collapse; width: 100%; } /* ── Typography Scale ── */ h1 { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1.2; } h2 { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.3; } h3 { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.4; } h4 { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.4; } h5 { font-size: var(--font-size-md); font-weight: 600; line-height: 1.5; } h6 { font-size: var(--font-size-sm); font-weight: 600; line-height: 1.5; } p { font-size: var(--font-size-md); line-height: 1.7; } small { font-size: var(--font-size-sm); } strong { font-weight: 700; } /* ── Custom Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-main); } /* ── Keyframe Animations ── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } /* ── Utility Classes — Display ── */ .hidden { display: none !important; } .invisible { visibility: hidden !important; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-start { display: flex; align-items: center; justify-content: flex-start; } .flex-end { display: flex; align-items: center; justify-content: flex-end; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between{ justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } .grid { display: grid; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .block { display: block; } .inline { display: inline; } .inline-flex { display: inline-flex; } .inline-block { display: inline-block; } /* ── Utility Classes — Spacing ── */ .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .p-4 { padding: 4px; } .p-8 { padding: 8px; } .p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-24 { padding: 24px; } .p-32 { padding: 32px; } .m-auto { margin: auto; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } /* ── Utility Classes — Text ── */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-sm { font-size: var(--font-size-sm); } .text-md { font-size: var(--font-size-md); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .font-black { font-weight: 800; } .text-primary { color: var(--primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-secondary); opacity: 0.7; } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-white { color: #ffffff; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-wrap { white-space: normal; } .text-nowrap { white-space: nowrap; } /* ── Utility Classes — Sizing ── */ .w-full { width: 100%; } .h-full { height: 100%; } .w-auto { width: auto; } .min-w-0 { min-width: 0; } .max-w-sm { max-width: 480px; } .max-w-md { max-width: 640px; } .max-w-lg { max-width: 800px; } /* ── Utility Classes — Border & Radius ── */ .rounded { border-radius: var(--border-radius); } .rounded-sm { border-radius: var(--border-radius-sm); } .rounded-lg { border-radius: var(--border-radius-lg); } .rounded-full { border-radius: 9999px; } .border { border: 1px solid var(--border); } .border-top { border-top: 1px solid var(--border); } .border-bottom { border-bottom: 1px solid var(--border); } /* ── Utility Classes — Background ── */ .bg-card { background-color: var(--bg-card); } .bg-main { background-color: var(--bg-main); } .bg-primary { background-color: var(--primary); color: #fff; } /* ── Utility Classes — Shadow ── */ .shadow { box-shadow: var(--shadow); } .shadow-none{ box-shadow: none; } /* ── Utility Classes — Overflow ── */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } /* ── Utility Classes — Position ── */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } /* ── Utility Classes — Cursor ── */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .select-none { user-select: none; } /* ── Utility Classes — Opacity ── */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* ── Animation Utility Classes ── */ .animate-fadeIn { animation: fadeIn var(--transition) ease forwards; } .animate-fadeInUp { animation: fadeInUp 0.3s ease forwards; } .animate-pulse { animation: pulse 2s infinite; } .animate-spin { animation: spin 1s linear infinite; } .animate-bounceIn { animation: bounceIn 0.3s ease forwards; } /* ── Divider ── */ .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .divider-text { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: var(--font-size-sm); margin: 20px 0; } .divider-text::before, .divider-text::after { content: ''; flex: 1; border-top: 1px solid var(--border); } /* ── Focus Ring (accessibility) ── */ :focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; } /* ── Selection color ── */ ::selection { background-color: var(--primary-light); color: #fff; }