/* ========================================================================== KinderPraxis Portal — Design System (light mode only) Tokens → base → components. Shared by public site, parent portal and staff area. ========================================================================== */ :root { /* Brand palette (overridable from Admin → Branding via inline style on ) */ --kp-primary: #3b82c4; /* soft blue */ --kp-primary-600: #2f6fae; --kp-primary-700: #285d92; --kp-primary-100: #e3effa; --kp-primary-50: #f1f7fd; --kp-sky: #7cc4f0; --kp-mint: #8fd9c3; --kp-mint-100: #e3f7f0; --kp-turquoise: #5fc7c7; --kp-yellow: #f6d16a; --kp-yellow-100: #fdf5d9; --kp-peach: #f8b48e; --kp-peach-100: #fdece2; --kp-lavender: #b6a8e6; --kp-lavender-100: #efeafb; /* Neutrals */ --kp-ink: #14213d; --kp-ink-2: #2b3a55; --kp-text: #1f2a44; --kp-muted: #5b6b86; --kp-subtle: #8a97ad; --kp-line: #e3e8f0; --kp-line-2: #eef2f7; --kp-bg: #f6f9fc; --kp-surface: #ffffff; --kp-surface-2: #fbfcfe; /* Status */ --kp-success: #2f9e6b; --kp-success-100: #e2f5eb; --kp-warning: #d9932b; --kp-warning-100: #fdf0da; --kp-danger: #d4524f; --kp-danger-100: #fbe6e5; --kp-info: #3b82c4; --kp-info-100: #e3effa; /* Typography */ --kp-font: "Tajawal", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --kp-font-ar: "Cairo", "Segoe UI", "Noto Sans Arabic", "Tahoma", Arial, sans-serif; --kp-fs-xs: .78rem; --kp-fs-sm: .875rem; --kp-fs-md: 1rem; --kp-fs-lg: 1.125rem; --kp-fs-xl: 1.375rem; --kp-fs-2xl: 1.75rem; --kp-fs-3xl: 2.25rem; --kp-fs-4xl: 3rem; --kp-lh: 1.55; /* Spacing & radius */ --kp-s-1: .25rem; --kp-s-2: .5rem; --kp-s-3: .75rem; --kp-s-4: 1rem; --kp-s-5: 1.5rem; --kp-s-6: 2rem; --kp-s-7: 3rem; --kp-s-8: 4rem; --kp-r-sm: 8px; --kp-r: 14px; --kp-r-lg: 20px; --kp-r-xl: 28px; --kp-r-full: 999px; /* Shadows (soft) */ --kp-sh-sm: 0 1px 2px rgba(20,33,61,.05), 0 1px 1px rgba(20,33,61,.03); --kp-sh: 0 4px 16px rgba(20,33,61,.06), 0 1px 3px rgba(20,33,61,.04); --kp-sh-lg: 0 14px 40px rgba(20,33,61,.10), 0 2px 6px rgba(20,33,61,.05); --kp-focus: 0 0 0 3px rgba(59,130,196,.35); --kp-ease: cubic-bezier(.2,.7,.2,1); --kp-t: .18s var(--kp-ease); --kp-header-h: 64px; --kp-sidebar-w: 264px; color-scheme: light only; } html[lang="ar"], [dir="rtl"] { --kp-font: var(--kp-font-ar); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--kp-font); font-size: var(--kp-fs-md); line-height: var(--kp-lh); color: var(--kp-text); background: var(--kp-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--kp-primary-600); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0 0 var(--kp-s-3); color: var(--kp-ink); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: var(--kp-fs-2xl); } h2 { font-size: var(--kp-fs-xl); } h3 { font-size: var(--kp-fs-lg); } h4 { font-size: var(--kp-fs-md); } p { margin: 0 0 var(--kp-s-4); } small, .text-sm { font-size: var(--kp-fs-sm); } .text-xs { font-size: var(--kp-fs-xs); } .text-muted { color: var(--kp-muted); } .text-subtle { color: var(--kp-subtle); } .text-danger { color: var(--kp-danger); } .text-success { color: var(--kp-success); } .text-primary { color: var(--kp-primary-600); } .text-center { text-align: center; } .text-end { text-align: end; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hidden { display: none !important; } [hidden] { display: none !important; } hr { border: 0; border-top: 1px solid var(--kp-line); margin: var(--kp-s-5) 0; } code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--kp-line-2); padding: .1em .4em; border-radius: 6px; } :focus-visible { outline: none; box-shadow: var(--kp-focus); border-radius: var(--kp-r-sm); } ::selection { background: var(--kp-primary-100); } /* Skip link */ .skip-link { position: absolute; inset-inline-start: 8px; top: -50px; background: var(--kp-ink); color: #fff; padding: .5rem .9rem; border-radius: var(--kp-r-sm); z-index: 1000; transition: top var(--kp-t); } .skip-link:focus { top: 8px; } /* Icons */ .icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; } .icon-sm { width: 1em; height: 1em; } .icon-lg { width: 1.6em; height: 1.6em; } .icon-xl { width: 2.2em; height: 2.2em; } [dir="rtl"] .icon-flip { transform: scaleX(-1); } /* Layout helpers */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--kp-s-4); } .container-narrow { max-width: 760px; } .container-wide { max-width: 1440px; } .stack > * + * { margin-top: var(--kp-s-4); } .stack-sm > * + * { margin-top: var(--kp-s-2); } .cluster { display: flex; flex-wrap: wrap; gap: var(--kp-s-3); align-items: center; } .between { justify-content: space-between; } .grid { display: grid; gap: var(--kp-s-4); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .flex { display: flex; } .flex-1 { flex: 1 1 auto; } .items-center { align-items: center; } .gap-2 { gap: var(--kp-s-2); } .gap-3 { gap: var(--kp-s-3); } .gap-4 { gap: var(--kp-s-4); } .mt-2 { margin-top: var(--kp-s-2);} .mt-3 { margin-top: var(--kp-s-3);} .mt-4 { margin-top: var(--kp-s-4);} .mt-5 { margin-top: var(--kp-s-5);} .mt-6 { margin-top: var(--kp-s-6);} .mb-0 { margin-bottom: 0;} .mb-2 { margin-bottom: var(--kp-s-2);} .mb-3 { margin-bottom: var(--kp-s-3);} .mb-4 { margin-bottom: var(--kp-s-4);} .mb-5 { margin-bottom: var(--kp-s-5);} .ms-auto { margin-inline-start: auto; } .w-100 { width: 100%; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Cards */ .card { background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg); box-shadow: var(--kp-sh-sm); padding: var(--kp-s-5); } .card-sm { padding: var(--kp-s-4); border-radius: var(--kp-r); } .card-hover { transition: transform var(--kp-t), box-shadow var(--kp-t), border-color var(--kp-t); } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--kp-sh); border-color: #d6e4f3; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-s-3); margin-bottom: var(--kp-s-4); } .card-header h2, .card-header h3 { margin: 0; } .card-title { font-size: var(--kp-fs-lg); font-weight: 700; margin: 0; } .card-tint-blue { background: linear-gradient(135deg, #f1f7fd, #ffffff); } .card-tint-mint { background: linear-gradient(135deg, #e9f8f2, #ffffff); } .card-tint-peach { background: linear-gradient(135deg, #fdf0e6, #ffffff); } .card-tint-lavender { background: linear-gradient(135deg, #f1edfb, #ffffff); } .card-tint-yellow { background: linear-gradient(135deg, #fdf6df, #ffffff); } /* Buttons */ .btn { --btn-bg: var(--kp-primary); --btn-fg: #fff; --btn-bd: var(--kp-primary); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--kp-fs-sm); line-height: 1; padding: .7rem 1.1rem; min-height: 42px; border-radius: var(--kp-r); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); transition: background var(--kp-t), transform var(--kp-t), box-shadow var(--kp-t), border-color var(--kp-t); text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; background: var(--kp-primary-600); border-color: var(--kp-primary-600); transform: translateY(-1px); box-shadow: var(--kp-sh-sm); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { --btn-bg: var(--kp-surface); --btn-fg: var(--kp-ink-2); --btn-bd: var(--kp-line); } .btn-secondary:hover { background: var(--kp-line-2); border-color: #d3dbe6; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--kp-primary-600); --btn-bd: transparent; } .btn-ghost:hover { background: var(--kp-primary-50); border-color: transparent; } .btn-soft { --btn-bg: var(--kp-primary-100); --btn-fg: var(--kp-primary-700); --btn-bd: var(--kp-primary-100); } .btn-soft:hover { background: #d4e6f7; border-color: #d4e6f7; } .btn-danger { --btn-bg: var(--kp-danger); --btn-bd: var(--kp-danger); } .btn-danger:hover { background: #b9403d; border-color: #b9403d; } .btn-danger-soft { --btn-bg: var(--kp-danger-100); --btn-fg: #a3312f; --btn-bd: var(--kp-danger-100); } .btn-danger-soft:hover { background: #f6d5d3; border-color: #f6d5d3; } .btn-success { --btn-bg: var(--kp-success); --btn-bd: var(--kp-success); } .btn-success:hover { background: #26855a; border-color: #26855a; } .btn-mint { --btn-bg: var(--kp-mint-100); --btn-fg: #1f6b52; --btn-bd: var(--kp-mint-100); } .btn-mint:hover { background: #cdefe2; border-color: #cdefe2; } .btn-sm { min-height: 34px; padding: .45rem .8rem; font-size: var(--kp-fs-xs); border-radius: 10px; } .btn-lg { min-height: 52px; padding: .9rem 1.6rem; font-size: var(--kp-fs-md); border-radius: var(--kp-r-lg); } .btn-block { width: 100%; } .btn-icon { padding: 0; width: 40px; min-height: 40px; border-radius: var(--kp-r-full); } .btn-icon.btn-sm { width: 34px; min-height: 34px; } .btn .icon { width: 1.15em; height: 1.15em; } .btn-pill { border-radius: var(--kp-r-full); } /* Forms */ .form-group { margin-bottom: var(--kp-s-4); } .form-label { display: block; font-weight: 600; font-size: var(--kp-fs-sm); margin-bottom: .4rem; color: var(--kp-ink-2); } .form-label .req { color: var(--kp-danger); margin-inline-start: .15rem; } .form-hint { font-size: var(--kp-fs-xs); color: var(--kp-muted); margin-top: .35rem; } .form-control, .form-select, .form-textarea { display: block; width: 100%; font: inherit; font-size: var(--kp-fs-md); color: var(--kp-text); background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-r); padding: .7rem .95rem; min-height: 46px; transition: border-color var(--kp-t), box-shadow var(--kp-t); appearance: none; } .form-control:hover, .form-select:hover, .form-textarea:hover { border-color: #c9d5e4; } .form-control:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--kp-primary); box-shadow: var(--kp-focus); } .form-control::placeholder { color: var(--kp-subtle); } .form-control:disabled, .form-select:disabled { background: var(--kp-line-2); color: var(--kp-muted); cursor: not-allowed; } .form-control.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: var(--kp-danger); } .form-textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .form-select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-inline-end: 2.4rem; } [dir="rtl"] .form-select { background-position: left .8rem center; } .form-control-sm { min-height: 38px; padding: .45rem .75rem; font-size: var(--kp-fs-sm); border-radius: 10px; } .form-error { color: var(--kp-danger); font-size: var(--kp-fs-xs); margin-top: .35rem; display: flex; gap: .3rem; align-items: center; } .form-check { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--kp-fs-sm); cursor: pointer; } .form-check input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--kp-primary); flex: none; } .form-row { display: grid; gap: var(--kp-s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .input-group { display: flex; align-items: stretch; } .input-group .form-control { border-start-end-radius: 0; border-end-end-radius: 0; } .input-group .btn { border-start-start-radius: 0; border-end-start-radius: 0; } .input-icon { position: relative; } .input-icon .icon { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--kp-subtle); pointer-events: none; } .input-icon .form-control { padding-inline-start: 2.6rem; } .switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: var(--kp-fs-sm); } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { width: 44px; height: 26px; border-radius: 999px; background: #cfd8e3; position: relative; transition: background var(--kp-t); flex: none; } .switch .track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--kp-sh-sm); transition: transform var(--kp-t); } .switch input:checked + .track { background: var(--kp-primary); } .switch input:checked + .track::after { transform: translateX(18px); } [dir="rtl"] .switch input:checked + .track::after { transform: translateX(-18px); } .switch input:focus-visible + .track { box-shadow: var(--kp-focus); } fieldset { border: 0; padding: 0; margin: 0 0 var(--kp-s-4); min-width: 0; } legend { font-weight: 700; color: var(--kp-ink); margin-bottom: var(--kp-s-3); padding: 0; } .form-actions { display: flex; flex-wrap: wrap; gap: var(--kp-s-3); align-items: center; margin-top: var(--kp-s-5); } .password-meter { height: 6px; border-radius: 999px; background: var(--kp-line); overflow: hidden; margin-top: .5rem; } .password-meter span { display: block; height: 100%; width: 0; background: var(--kp-danger); transition: width var(--kp-t), background var(--kp-t); } .password-meter[data-score="2"] span { background: var(--kp-warning); } .password-meter[data-score="3"] span { background: var(--kp-turquoise); } .password-meter[data-score="4"] span { background: var(--kp-success); } /* Alerts */ .alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--kp-r); border: 1px solid transparent; font-size: var(--kp-fs-sm); margin-bottom: var(--kp-s-4); } .alert .icon { margin-top: .1rem; } .alert-info { background: var(--kp-info-100); color: #25507c; border-color: #cfe1f3; } .alert-success { background: var(--kp-success-100); color: #1f6b48; border-color: #c4ead6; } .alert-warning { background: var(--kp-warning-100); color: #7d5312; border-color: #f4dfb5; } .alert-danger { background: var(--kp-danger-100); color: #8f2f2c; border-color: #f2c9c7; } .alert-emergency { background: #fff4f1; border-color: #f7c9bf; color: #8f2f2c; } .alert ul { margin: .3rem 0 0; padding-inline-start: 1.1rem; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--kp-fs-xs); font-weight: 600; padding: .25rem .6rem; border-radius: var(--kp-r-full); background: var(--kp-line-2); color: var(--kp-ink-2); line-height: 1.3; white-space: nowrap; } .badge .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .badge-primary { background: var(--kp-primary-100); color: var(--kp-primary-700); } .badge-success { background: var(--kp-success-100); color: #1f6b48; } .badge-warning { background: var(--kp-warning-100); color: #7d5312; } .badge-danger { background: var(--kp-danger-100); color: #8f2f2c; } .badge-mint { background: var(--kp-mint-100); color: #1f6b52; } .badge-lavender { background: var(--kp-lavender-100); color: #5a4a9c; } .badge-peach { background: var(--kp-peach-100); color: #9c5330; } .badge-yellow { background: var(--kp-yellow-100); color: #7d5312; } .badge-ink { background: var(--kp-ink); color: #fff; } .badge-internal { background: var(--kp-lavender-100); color: #5a4a9c; border: 1px dashed #b6a8e6; } /* Avatars */ .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--kp-primary-100); color: var(--kp-primary-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--kp-fs-sm); flex: none; overflow: hidden; } .avatar-sm { width: 32px; height: 32px; font-size: var(--kp-fs-xs); } .avatar-lg { width: 56px; height: 56px; font-size: var(--kp-fs-lg); } .avatar-xl { width: 76px; height: 76px; font-size: var(--kp-fs-xl); } .avatar .icon { width: 60%; height: 60%; } .avatar-bear { background: var(--kp-peach-100); color: #9c5330; } .avatar-fox { background: #fde7d6; color: #b45a2b; } .avatar-rabbit { background: var(--kp-lavender-100); color: #5a4a9c; } .avatar-lion { background: var(--kp-yellow-100); color: #8a5a10; } .avatar-penguin { background: #e6ecf5; color: #2b3a55; } .avatar-star { background: var(--kp-yellow-100); color: #b47b12; } .avatar-rocket { background: var(--kp-primary-100); color: var(--kp-primary-700); } .avatar-dino { background: var(--kp-mint-100); color: #1f6b52; } /* Tables */ .table-wrap { overflow-x: auto; border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg); background: var(--kp-surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--kp-fs-sm); } .table th, .table td { padding: .8rem 1rem; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--kp-line-2); } .table thead th { font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); background: var(--kp-surface-2); font-weight: 700; white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--kp-primary-50); } .table .actions { text-align: end; white-space: nowrap; } .table-compact th, .table-compact td { padding: .55rem .75rem; } @media (max-width: 700px) { .table-responsive thead { display: none; } .table-responsive tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--kp-line-2); } .table-responsive td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35rem 1rem; } .table-responsive td::before { content: attr(data-label); font-weight: 600; color: var(--kp-muted); font-size: var(--kp-fs-xs); } .table-responsive td.actions { justify-content: flex-end; } } /* Lists */ .list { list-style: none; margin: 0; padding: 0; } .list-item { display: flex; align-items: center; gap: var(--kp-s-3); padding: .85rem 0; border-bottom: 1px solid var(--kp-line-2); } .list-item:last-child { border-bottom: 0; } .list-item .grow { flex: 1; min-width: 0; } .list-item .meta { font-size: var(--kp-fs-xs); color: var(--kp-muted); } .list-links .list-item { padding-inline: .5rem; border-radius: var(--kp-r); transition: background var(--kp-t); } .list-links .list-item:hover { background: var(--kp-primary-50); text-decoration: none; } /* Tabs */ .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--kp-line); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--kp-s-5); } .tabs::-webkit-scrollbar { display: none; } .tab { padding: .75rem 1rem; font-weight: 600; font-size: var(--kp-fs-sm); color: var(--kp-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; background: none; border-top: 0; border-inline: 0; cursor: pointer; font-family: inherit; } .tab:hover { color: var(--kp-ink); text-decoration: none; } .tab.active, .tab[aria-selected="true"] { color: var(--kp-primary-700); border-bottom-color: var(--kp-primary); } .tab .count { background: var(--kp-line-2); border-radius: 999px; padding: 0 .45rem; font-size: var(--kp-fs-xs); } .tab.active .count { background: var(--kp-primary-100); } /* Pills / segmented */ .segmented { display: inline-flex; background: var(--kp-line-2); padding: 4px; border-radius: var(--kp-r); gap: 2px; } .segmented .seg { padding: .45rem .9rem; border-radius: 10px; font-size: var(--kp-fs-sm); font-weight: 600; color: var(--kp-muted); background: none; border: 0; cursor: pointer; font-family: inherit; } .segmented .seg.active, .segmented .seg[aria-pressed="true"] { background: var(--kp-surface); color: var(--kp-ink); box-shadow: var(--kp-sh-sm); } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 220px; background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: var(--kp-r); box-shadow: var(--kp-sh-lg); padding: .4rem; z-index: 60; display: none; } .dropdown.open .dropdown-menu { display: block; animation: kp-pop .16s var(--kp-ease); } .dropdown-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .75rem; border-radius: 10px; color: var(--kp-text); font-size: var(--kp-fs-sm); background: none; border: 0; text-align: start; cursor: pointer; font-family: inherit; } .dropdown-item:hover { background: var(--kp-primary-50); text-decoration: none; } .dropdown-item.danger { color: var(--kp-danger); } .dropdown-divider { height: 1px; background: var(--kp-line-2); margin: .35rem 0; } @keyframes kp-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } /* Modal & drawer */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20,33,61,.45); backdrop-filter: blur(2px); z-index: 90; display: none; align-items: center; justify-content: center; padding: var(--kp-s-4); } .modal-backdrop.open { display: flex; animation: kp-fade .15s ease; } .modal { background: var(--kp-surface); border-radius: var(--kp-r-xl); box-shadow: var(--kp-sh-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: var(--kp-s-5); animation: kp-pop .2s var(--kp-ease); } .modal-lg { max-width: 860px; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--kp-s-4); } .modal-header h2 { margin: 0; font-size: var(--kp-fs-lg); } .modal-footer { display: flex; justify-content: flex-end; gap: .6rem; margin-top: var(--kp-s-5); flex-wrap: wrap; } .drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(520px, 100%); background: var(--kp-surface); box-shadow: var(--kp-sh-lg); z-index: 95; transform: translateX(100%); transition: transform .25s var(--kp-ease); overflow: auto; padding: var(--kp-s-5); } [dir="rtl"] .drawer { transform: translateX(-100%); } .drawer.open { transform: none; } @keyframes kp-fade { from { opacity: 0; } to { opacity: 1; } } /* Toasts */ .toasts { position: fixed; bottom: 1rem; inset-inline-end: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 200; max-width: min(380px, calc(100% - 2rem)); } .toast { display: flex; gap: .7rem; align-items: flex-start; background: var(--kp-ink); color: #fff; padding: .85rem 1rem; border-radius: var(--kp-r); box-shadow: var(--kp-sh-lg); font-size: var(--kp-fs-sm); animation: kp-toast .25s var(--kp-ease); } .toast-success { background: #1f6b48; } .toast-error { background: #a3312f; } .toast-warning { background: #8a5a10; } .toast-info { background: var(--kp-primary-700); } .toast .close { margin-inline-start: auto; background: none; border: 0; color: inherit; cursor: pointer; opacity: .8; padding: 0; } @keyframes kp-toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Empty state */ .empty { text-align: center; padding: var(--kp-s-7) var(--kp-s-4); color: var(--kp-muted); } .empty .empty-art { width: 120px; height: 120px; margin: 0 auto var(--kp-s-4); border-radius: 50%; background: var(--kp-primary-50); display: flex; align-items: center; justify-content: center; color: var(--kp-primary); } .empty .empty-art .icon { width: 52px; height: 52px; } .empty h3 { color: var(--kp-ink-2); margin-bottom: .4rem; } .empty p { max-width: 380px; margin: 0 auto var(--kp-s-4); font-size: var(--kp-fs-sm); } /* Skeleton */ .skeleton { position: relative; overflow: hidden; background: var(--kp-line-2); border-radius: 8px; min-height: 1em; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: kp-shimmer 1.4s infinite; } .skeleton-text { height: .9em; margin: .4em 0; } .skeleton-title { height: 1.4em; width: 50%; } .skeleton-card { height: 120px; border-radius: var(--kp-r-lg); } @keyframes kp-shimmer { to { transform: translateX(100%); } } /* Stats */ .stat { display: flex; gap: var(--kp-s-4); align-items: center; } .stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--kp-primary-100); color: var(--kp-primary-700); flex: none; } .stat-icon .icon { width: 24px; height: 24px; } .stat-icon.mint { background: var(--kp-mint-100); color: #1f6b52; } .stat-icon.peach { background: var(--kp-peach-100); color: #9c5330; } .stat-icon.lavender { background: var(--kp-lavender-100); color: #5a4a9c; } .stat-icon.yellow { background: var(--kp-yellow-100); color: #8a5a10; } .stat-icon.danger { background: var(--kp-danger-100); color: #8f2f2c; } .stat-value { font-size: var(--kp-fs-2xl); font-weight: 800; color: var(--kp-ink); line-height: 1.1; letter-spacing: -.02em; } .stat-label { font-size: var(--kp-fs-sm); color: var(--kp-muted); } /* Timeline */ .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 15px; width: 2px; background: var(--kp-line); } .timeline-item { position: relative; padding-inline-start: 44px; padding-bottom: var(--kp-s-5); } .timeline-dot { position: absolute; inset-inline-start: 4px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--kp-surface); border: 2px solid var(--kp-primary); color: var(--kp-primary-700); display: flex; align-items: center; justify-content: center; } .timeline-dot .icon { width: 13px; height: 13px; } .timeline-dot.mint { border-color: var(--kp-mint); color: #1f6b52; } .timeline-dot.peach { border-color: var(--kp-peach); color: #9c5330; } .timeline-dot.lavender { border-color: var(--kp-lavender); color: #5a4a9c; } .timeline-dot.yellow { border-color: var(--kp-yellow); color: #8a5a10; } .timeline-dot.danger { border-color: var(--kp-danger); color: var(--kp-danger); } .timeline-time { font-size: var(--kp-fs-xs); color: var(--kp-muted); } /* Steps (booking wizard) */ .steps { display: flex; gap: .5rem; counter-reset: step; list-style: none; margin: 0 0 var(--kp-s-5); padding: 0; overflow-x: auto; } .steps li { display: flex; align-items: center; gap: .5rem; font-size: var(--kp-fs-xs); font-weight: 600; color: var(--kp-subtle); white-space: nowrap; } .steps li::before { counter-increment: step; content: counter(step); width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--kp-line); display: inline-flex; align-items: center; justify-content: center; font-size: var(--kp-fs-xs); } .steps li.active { color: var(--kp-primary-700); } .steps li.active::before { border-color: var(--kp-primary); background: var(--kp-primary); color: #fff; } .steps li.done { color: var(--kp-success); } .steps li.done::before { border-color: var(--kp-success); background: var(--kp-success-100); content: "✓"; } /* Progress */ .progress { height: 8px; background: var(--kp-line); border-radius: 999px; overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--kp-primary); border-radius: 999px; transition: width .3s var(--kp-ease); } .progress.mint > span { background: var(--kp-mint); } .progress.success > span { background: var(--kp-success); } /* Pagination */ .pagination { display: flex; gap: .3rem; list-style: none; padding: 0; margin: var(--kp-s-4) 0 0; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0 .6rem; border-radius: 10px; border: 1px solid var(--kp-line); background: var(--kp-surface); font-size: var(--kp-fs-sm); color: var(--kp-ink-2); } .pagination .active span { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; } /* Breadcrumb & page header */ .breadcrumb { display: flex; gap: .4rem; align-items: center; font-size: var(--kp-fs-xs); color: var(--kp-muted); margin-bottom: .5rem; flex-wrap: wrap; } .breadcrumb a { color: inherit; } .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kp-s-3); margin-bottom: var(--kp-s-5); } .page-header h1 { margin: 0; } .page-header .subtitle { color: var(--kp-muted); margin: .25rem 0 0; font-size: var(--kp-fs-sm); } .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* Key/value */ .kv { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .5rem 1rem; font-size: var(--kp-fs-sm); } .kv dt { color: var(--kp-muted); font-weight: 500; margin: 0; } .kv dd { margin: 0; color: var(--kp-ink); } @media (max-width: 500px) { .kv { grid-template-columns: 1fr; gap: .1rem .5rem; } .kv dd { margin-bottom: .6rem; } } /* Callouts */ .callout { border-inline-start: 4px solid var(--kp-primary); background: var(--kp-primary-50); padding: 1rem 1.2rem; border-radius: 0 var(--kp-r) var(--kp-r) 0; font-size: var(--kp-fs-sm); } [dir="rtl"] .callout { border-radius: var(--kp-r) 0 0 var(--kp-r); } .callout-internal { border-color: var(--kp-lavender); background: var(--kp-lavender-100); } .callout-warning { border-color: var(--kp-warning); background: var(--kp-warning-100); } /* Context banner (active child / patient confirmation) */ .context-banner { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; background: var(--kp-yellow-100); border: 1px solid #f4dfb5; border-radius: var(--kp-r); font-size: var(--kp-fs-sm); margin-bottom: var(--kp-s-4); } .context-banner strong { color: var(--kp-ink); } /* Print */ @media print { body { background: #fff; color: #000; } .no-print, nav, .sidebar, .topbar, .bottom-nav, .toasts, .btn, .page-actions { display: none !important; } .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } a { color: inherit; text-decoration: none; } .print-only { display: block !important; } } .print-only { display: none; } /* Motion */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--kp-ease), transform .6s var(--kp-ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }