/* =========================================================================== MediBox — app.css Tailwind CDN build-in üstündə nazik qat. Burada yalnız o şeylər var ki, utility siniflərlə ifadə olunmur: rəng tokenləri, form/Tom Select bazası, cədvəl sıxlığı, sidebar-ın ilk kadr vəziyyəti və çap. Rənglər RGB kanalları kimi saxlanır (`22 25 28`), çünki Tailwind-in şəffaflıq modifikatoru (bg-accent/10) yalnız bu formada işləyir. Default AÇIQ mövzudur. Qaranlıq mövzu ilə açılır, seçim localStorage('mb-theme')-də saxlanır və -dəki kiçik skript onu ilk boyamadan ƏVVƏL tətbiq edir (mövzu sıçraması olmasın). =========================================================================== */ :root { color-scheme: light; /* Səthlər */ --page: 248 248 246; /* #F8F8F6 — səhifə fonu */ --surface: 255 255 255; /* #FFFFFF — kart */ --raised: 252 252 250; /* cədvəl başlığı, kart footer-i */ /* Xətlər: bu layihədə ayırıcı kölgə deyil, 1px xəttdir */ --line: 228 226 221; /* #E4E2DD */ --line-soft: 238 237 233; /* Mətn */ --ink: 22 25 28; /* #16191C — əsas */ --muted: 92 100 112; /* #5C6470 — ikinci dərəcə */ --subtle:138 145 156; /* #8A919C — yalnız meta/ikon (kiçik mətn üçün AA-dan aşağı) */ /* Yeganə aksent */ --accent: 11 93 81; /* #0B5D51 */ --accent-strong: 9 76 67; /* #094C43 — hover/active */ --accent-tint: 234 241 239; /* #EAF1EF — seçili sətir, aktiv naviqasiya */ --accent-fg: 255 255 255; /* aksent üzərində mətn */ /* Status. Uğur = aksent. Aksent HEÇ VAXT təhlükə üçün işlədilmir. */ --warn: 180 118 42; /* #B4762A */ --warn-ink: 138 89 28; /* kiçik mətn üçün tünd variant (AA) */ --warn-tint: 250 243 233; --danger: 163 58 43; /* #A33A2B */ --danger-fg: 255 255 255; /* təhlükə düyməsinin üstündəki mətn */ --danger-tint:251 238 235; --info: 46 92 122; /* #2E5C7A */ --info-tint: 235 241 246; /* Super-admin xromu: hər iki mövzuda tünd qalır ki, iki panel qarışmasın */ --chrome: 22 25 28; --chrome-fg: 232 234 236; --chrome-muted:138 145 156; --chrome-line: 46 51 57; /* Yeganə kölgə — ancaq üst qat (dropdown, modal, toast) üçün */ --shadow-pop: 0 8px 24px rgb(20 24 28 / .10); --font-sans: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius-field: 6px; --radius-card: 8px; --sidebar-w: 232px; --sidebar-w-collapsed: 56px; --topbar-h: 56px; } :root[data-theme="dark"] { color-scheme: dark; --page: 17 19 21; --surface: 24 27 30; --raised: 31 35 39; --line: 44 48 53; --line-soft: 36 40 44; --ink: 232 234 236; --muted: 160 167 176; --subtle: 118 126 136; /* Tünd fonda #0B5D51 oxunmur — aksent açıldılır, ton eynidir */ --accent: 61 166 147; --accent-strong: 84 190 170; --accent-tint: 23 45 41; --accent-fg: 11 20 18; --warn: 214 155 82; --warn-ink: 224 173 110; --warn-tint: 48 38 24; --danger: 216 116 100; --danger-fg: 28 16 14; /* tünd fonda açıq qırmızı üstünə tünd mətn */ --danger-tint: 51 30 27; --info: 122 168 200; --info-tint: 24 37 47; --chrome: 12 14 16; --chrome-fg: 232 234 236; --chrome-muted:138 145 156; --chrome-line: 38 42 47; --shadow-pop: 0 8px 24px rgb(0 0 0 / .45); } /* --------------------------------------------------------------------------- Baza --------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: rgb(var(--page)); color: rgb(var(--ink)); font-feature-settings: "cv05" 1, "cv08" 1; /* Inter: düz "l" və "1" — nömrə-sıx ekran */ } [x-cloak] { display: none !important; } /* Rəqəm sütunları sürüşməsin */ .tnum { font-variant-numeric: tabular-nums; } /* Klaviatura ilə gəzən üçün görünən fokus; siçanla klikdə görünmür */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 4px; } ::selection { background: rgb(var(--accent) / .18); } /* İncə scrollbar — resepşn ekranında bir neçə sürüşən panel olur */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--line)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgb(var(--line)); border: 3px solid rgb(var(--page)); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: rgb(var(--subtle) / .6); } /* Başlıqlarda hərf aralığı bir az sıxılır — redaksiya tərzi */ h1, h2, h3, .tracking-tightish { letter-spacing: -.011em; } .link { color: rgb(var(--accent)); text-decoration: underline; text-decoration-color: rgb(var(--accent) / .35); text-underline-offset: 2px; } .link:hover { color: rgb(var(--accent-strong)); text-decoration-color: currentColor; } /* --------------------------------------------------------------------------- Form sahələri Seçici qəsdən `input.fld` şəklindədir: Tailwind forms plaqini `[type='text']` ilə yazır (atribut = sinif çəkisi) və CDN öz stilini bizim fayldan SONRA yeridir. Element+sinif bir pillə güclü olduğu üçün bizim baza qalib gəlir. --------------------------------------------------------------------------- */ input.fld, select.fld, textarea.fld, .fld-box { width: 100%; min-height: 36px; padding: 7px 10px; font-size: 13px; line-height: 20px; color: rgb(var(--ink)); background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-field); box-shadow: none; transition: border-color .12s ease, box-shadow .12s ease; } textarea.fld { min-height: 80px; padding-top: 8px; padding-bottom: 8px; resize: vertical; } input.fld::placeholder, textarea.fld::placeholder { color: rgb(var(--subtle)); } input.fld:focus, select.fld:focus, textarea.fld:focus, .fld-box:focus-within { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .14); } input.fld:disabled, select.fld:disabled, textarea.fld:disabled { background-color: rgb(var(--raised)); color: rgb(var(--muted)); cursor: not-allowed; } input.fld[readonly] { background-color: rgb(var(--raised)); } /* Validasiya səhvi: qırmızı xətt + qırmızı fokus halqası */ input.fld[aria-invalid="true"], select.fld[aria-invalid="true"], textarea.fld[aria-invalid="true"], .fld-invalid .ts-control { border-color: rgb(var(--danger)); } input.fld[aria-invalid="true"]:focus, textarea.fld[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--danger) / .14); } /* Ölçü variantı */ input.fld-sm, select.fld-sm, textarea.fld-sm { min-height: 30px; padding: 4px 8px; font-size: 12.5px; line-height: 20px; } /* Rəqəm sahələri (məbləğ, miqdar) sağa yığılır və mono ilə yazılır */ input.fld-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace), monospace; } /* --------------------------------------------------------------------------- İKONLU SAHƏLƏR Boşluğu Tailwind `pl-*` / `pr-*` utilitisi ilə VERMƏ — səssizcə işləmir. Səbəb: `input.fld` seçicisi (0,1,1) adi sinif utilitisindən (0,1,0) güclüdür, ona görə `class="fld pl-8"` yazanda padding 10px qalır və ikon placeholder mətninin üstündə oturur. Bunun əvəzinə bu sinifləri işlət. Qayda MÜTLƏQ `fld-sm`-dən sonra durmalıdır: o da `padding` qısayolu yazır. --------------------------------------------------------------------------- */ input.fld-ic { padding-left: 32px; } input.fld-ic-end { padding-right: 32px; } input.fld-sm.fld-ic { padding-left: 29px; } input.fld-sm.fld-ic-end { padding-right: 29px; } /* Native select-də oxu özümüz çəkirik (ikon komponenti ilə), brauzerinki gizlənir. `background-image: none` MƏCBURDUR: Tailwind forms plaqini select-ə öz chevron SVG-sini fon şəkli kimi qoyur və iki ox üst-üstə düşür. */ select.fld { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: none; } select.fld::-ms-expand { display: none; } /* Checkbox / radio: aksent rəngli, 6px deyil 4px künc (kiçik element) */ input[type="checkbox"].chk, input[type="radio"].chk { width: 16px; height: 16px; border: 1px solid rgb(var(--line)); background-color: rgb(var(--surface)); color: rgb(var(--accent)); accent-color: rgb(var(--accent)); } input[type="checkbox"].chk { border-radius: 4px; } input[type="radio"].chk { border-radius: 99px; } input[type="checkbox"].chk:checked, input[type="radio"].chk:checked { background-color: rgb(var(--accent)); border-color: rgb(var(--accent)); } input[type="checkbox"].chk:focus-visible, input[type="radio"].chk:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } /* İşarə/nöqtə SVG-si: forms plaqini onu sabit AĞ verir və tünd mövzuda açıq teal fonun üstündə az görünür. Ona görə hər mövzu üçün öz variantımız var. */ input[type="checkbox"].chk:checked, input[type="radio"].chk:checked { background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } input[type="checkbox"].chk:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.2 4.8a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.4l1.3 1.3 4.3-4.3a1 1 0 0 1 1.4 0z'/%3e%3c/svg%3e"); } input[type="radio"].chk:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } :root[data-theme="dark"] input[type="checkbox"].chk:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230b1412' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.2 4.8a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.4l1.3 1.3 4.3-4.3a1 1 0 0 1 1.4 0z'/%3e%3c/svg%3e"); } :root[data-theme="dark"] input[type="radio"].chk:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230b1412' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } /* --------------------------------------------------------------------------- Tom Select — native sahə ilə PİKSEL-BƏ-PİKSEL uyğun görünməlidir. Seçicilər `.ts-wrapper .ts-control` (iki sinif) — kitabxananın öz `.ts-control` qaydasından güclüdür. --------------------------------------------------------------------------- */ .ts-wrapper { min-height: 36px; } .ts-wrapper .ts-control { min-height: 36px; padding: 6px 28px 6px 10px; font-size: 13px; line-height: 20px; color: rgb(var(--ink)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-field); box-shadow: none; gap: 4px; } .ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control { background: rgb(var(--surface)); } .ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .14); } .ts-wrapper.disabled .ts-control { background: rgb(var(--raised)); opacity: 1; color: rgb(var(--muted)); } .ts-control > input, .ts-control > input::placeholder { color: rgb(var(--ink)); } .ts-control > input::placeholder { color: rgb(var(--subtle)); } /* Çoxseçimli: seçilmiş element pill deyil, 4px künclü teq */ .ts-wrapper.multi .ts-control > div { background: rgb(var(--accent-tint)); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / .25); border-radius: 4px; padding: 1px 6px; font-size: 12.5px; } .ts-wrapper.multi .ts-control > div.active { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); } .ts-wrapper.multi .ts-control > div .remove { border-left-color: rgb(var(--accent) / .25); } /* Oxumuz: kitabxananın CSS üçbucağını söndürürük, əvəzinə chevron */ .ts-wrapper.single .ts-control:after { display: none; } .ts-wrapper:before { display: none; } .ts-wrapper .ts-arrow { position: absolute; top: 50%; right: 9px; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; color: rgb(var(--subtle)); } .ts-wrapper.plugin-clear_button .clear-button { right: 26px; opacity: 1; color: rgb(var(--subtle)); background: transparent; font-size: 17px; line-height: 1; } .ts-wrapper.plugin-clear_button .clear-button:hover { color: rgb(var(--danger)); } .ts-dropdown { z-index: 80; /* modal 60, toast 90 — modal içində də açılır */ margin-top: 4px; padding: 4px; color: rgb(var(--ink)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); } .ts-dropdown .option { padding: 7px 9px; font-size: 13px; line-height: 18px; border-radius: 4px; } .ts-dropdown .active { background: rgb(var(--accent-tint)); color: rgb(var(--ink)); } .ts-dropdown .selected, .ts-dropdown .active.selected { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); } .ts-dropdown .optgroup-header { padding: 6px 9px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--subtle)); background: transparent; } .ts-dropdown .no-results, .ts-dropdown .ts-loading { padding: 10px 9px; font-size: 12.5px; color: rgb(var(--muted)); } .ts-dropdown .create { padding: 7px 9px; font-size: 13px; color: rgb(var(--accent)); border-radius: 4px; } .ts-dropdown .option-meta { display: block; font-size: 11.5px; color: rgb(var(--subtle)); } .ts-dropdown-content { max-height: 260px; } /* --------------------------------------------------------------------------- Cədvəl — sıxlıq burada qərara alınır. Sətir hündürlüyü ~38px: 13px mətn (20px line-height) + 2x9px padding. Resepşn günə 100 dəfə baxır. --------------------------------------------------------------------------- */ table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } table.tbl thead th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; font-size: 11px; font-weight: 600; line-height: 16px; text-transform: uppercase; letter-spacing: .045em; color: rgb(var(--muted)); text-align: left; background: rgb(var(--raised)); border-bottom: 1px solid rgb(var(--line)); white-space: nowrap; } table.tbl tbody td { padding: 9px 12px; line-height: 20px; border-bottom: 1px solid rgb(var(--line-soft)); vertical-align: middle; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover td { background: rgb(var(--accent-tint) / .55); } table.tbl tbody tr[data-row-href] { cursor: pointer; } table.tbl tbody tr.is-selected td { background: rgb(var(--accent-tint)); } /* Rəqəm/məbləğ sütunları */ table.tbl .num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Sıx rejim (uzun növbə siyahıları) */ table.tbl.tbl-tight tbody td { padding-top: 6px; padding-bottom: 6px; } /* --------------------------------------------------------------------------- Sidebar Vəziyyət CSS-in öz əlindədir, Alpine-ın deyil: Alpine yüklənənə qədər bağlama işləmir və panel hər açılışda görünə-görünə yığılırdı (activitypanel-də yaşanmış səhv). ilk kadrdan düzgün vəziyyəti verir. --------------------------------------------------------------------------- */ .mb-sidebar { width: var(--sidebar-w); transition: width .14s ease, transform .18s ease; } :root[data-sidebar="collapsed"] .mb-sidebar { width: var(--sidebar-w-collapsed); } :root[data-sidebar="collapsed"] .mb-sidebar .mb-collapsible { display: none; } :root[data-sidebar="collapsed"] .mb-sidebar .mb-nav-link { justify-content: center; padding-left: 0; padding-right: 0; } :root[data-sidebar="collapsed"] .mb-sidebar .mb-nav-group-label { display: none; } :root[data-sidebar="collapsed"] .mb-sidebar .mb-nav-group + .mb-nav-group { border-top: 1px solid rgb(var(--line)); margin-top: 6px; padding-top: 6px; } .mb-expand-icon { transform: rotate(180deg); transition: transform .14s ease; } :root[data-sidebar="collapsed"] .mb-expand-icon { transform: none; } .mb-shell { margin-left: var(--sidebar-w); transition: margin-left .14s ease; } :root[data-sidebar="collapsed"] .mb-shell { margin-left: var(--sidebar-w-collapsed); } /* Mobil: sidebar off-canvas çekmecə olur */ @media (max-width: 1023px) { .mb-sidebar { position: fixed; z-index: 60; transform: translateX(-100%); width: var(--sidebar-w); } .mb-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-pop); } :root[data-sidebar="collapsed"] .mb-sidebar { width: var(--sidebar-w); } :root[data-sidebar="collapsed"] .mb-sidebar .mb-collapsible, :root[data-sidebar="collapsed"] .mb-sidebar .mb-nav-group-label { display: revert; } :root[data-sidebar="collapsed"] .mb-sidebar .mb-nav-link { justify-content: flex-start; padding-left: 10px; padding-right: 10px; } .mb-shell, :root[data-sidebar="collapsed"] .mb-shell { margin-left: 0; } } /* --------------------------------------------------------------------------- Toast — flash mesajları. Yığın sağ aşağıda, klaviatura fokusunu oğurlamır. --------------------------------------------------------------------------- */ #mb-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } #mb-toasts .mb-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 13px; line-height: 18px; color: rgb(var(--ink)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-left: 3px solid rgb(var(--accent)); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); animation: mb-toast-in .16s ease-out; } #mb-toasts .mb-toast.is-err { border-left-color: rgb(var(--danger)); } #mb-toasts .mb-toast.is-warn { border-left-color: rgb(var(--warn)); } #mb-toasts .mb-toast.is-info { border-left-color: rgb(var(--info)); } #mb-toasts .mb-toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; } @keyframes mb-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- Skeleton / spinner — qradient qadağandır, ona görə şəffaflıq nəbzi --------------------------------------------------------------------------- */ .mb-skeleton { background: rgb(var(--line-soft)); border-radius: 4px; animation: mb-pulse 1.4s ease-in-out infinite; } @keyframes mb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .mb-spin { animation: mb-rotate .7s linear infinite; } @keyframes mb-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------------------- Təsdiq dialoqu (app.js-dəki mbConfirm). Native — fokus tələsi, ESC və inert fon brauzerdən gəlir, artıq JS yazmırıq. --------------------------------------------------------------------------- */ dialog.mb-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; color: rgb(var(--ink)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); font-family: var(--font-sans); } dialog.mb-dialog::backdrop { background: rgb(20 24 28 / .38); } dialog.mb-dialog .mb-dialog-body { padding: 16px 18px 14px; } dialog.mb-dialog .mb-dialog-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; } dialog.mb-dialog .mb-dialog-text { font-size: 13px; line-height: 19px; color: rgb(var(--muted)); margin: 0; } dialog.mb-dialog .mb-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; background: rgb(var(--raised)); border-top: 1px solid rgb(var(--line)); border-radius: 0 0 var(--radius-card) var(--radius-card); } dialog.mb-dialog .mb-dialog-btn { min-height: 32px; padding: 5px 12px; font-size: 13px; font-weight: 500; font-family: inherit; color: rgb(var(--ink)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-field); cursor: pointer; } dialog.mb-dialog .mb-dialog-btn:hover { border-color: rgb(var(--subtle)); } dialog.mb-dialog .mb-dialog-btn.is-primary { color: rgb(var(--accent-fg)); background: rgb(var(--accent)); border-color: rgb(var(--accent)); } dialog.mb-dialog .mb-dialog-btn.is-primary:hover { background: rgb(var(--accent-strong)); border-color: rgb(var(--accent-strong)); } dialog.mb-dialog .mb-dialog-btn.is-danger { color: #fff; background: rgb(var(--danger)); border-color: rgb(var(--danger)); } dialog.mb-dialog .mb-dialog-btn.is-danger:hover { filter: brightness(.93); } /* İkiqat göndərişdən qorunan düymə (app.js bindSubmitGuard) */ .is-busy { opacity: .6; cursor: progress; } /* Ekran oxuyucusu üçün yalnız mətn */ .sr-only-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --------------------------------------------------------------------------- Çap — resept, hesab-faktura, günün siyahısı kağıza çıxır --------------------------------------------------------------------------- */ @media print { :root { --page: 255 255 255; --surface: 255 255 255; } .mb-sidebar, .mb-topbar, .no-print, #mb-toasts, .mb-banner { display: none !important; } .mb-shell { margin-left: 0 !important; } body { background: #fff; font-size: 11pt; } table.tbl thead th { position: static; background: #fff; } table.tbl tbody tr { break-inside: avoid; } a[href]:after { content: ""; } }