/* STEP 201 — booking-front.css (تولیدشده؛ ویرایشِ دستی نکنید — ژنراتور: tools/perf-audit/gen-booking-css.php).
استایلِ لاغرِ فرمِ رزروِ عمومی بهجای بارگذاریِ کلِ admin.css (۱۸۹KB) + زنجیره روی صفحهی عمومی. */
/* ==== admin.css (فقط قواعدِ فرمِ رزرو/پایه — جایگزینِ کلِ فایلِ ۱۸۹KB) ==== */
:root {
--clinic-primary: #4B2E83;
--clinic-bg-light: #F3E8FF;
--clinic-success: #22A06B;
--clinic-bg: #FFFFFF;
--clinic-warning: #D98282;
--clinic-font-family: 'Peyda', 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
--clinic-border-radius: 12px;
--clinic-text: #2B2240;
--clinic-muted: #6b6480;
--clinic-radius-pill: 999px;
--clinic-space: 20px;
--clinic-shadow: 0 4px 16px rgba(75, 46, 131, 0.08);
--clinic-border: #ece7f4;
--clinic-spacing-xs: 8px;
--clinic-spacing-sm: 12px;
--clinic-spacing-md: 15px;
--clinic-spacing-lg: 20px;
--clinic-ink-border: #333333;
}
.clinic-wrap {
font-family: var(--clinic-font-family);
color: var(--clinic-text);
max-width: 100% !important;
background: transparent;
}
.clinic-notice {
padding: var( --clinic-space-6 ) var( --clinic-space-8 );
border-radius: var(--clinic-border-radius);
margin: var( --clinic-space-6 ) 0 var(--clinic-space);
background: var(--clinic-bg-light);
}
.clinic-notice--success {
border-inline-start: 4px solid var(--clinic-success);
color: var(--clinic-success);
}
.clinic-notice--error {
border-inline-start: 4px solid var(--clinic-warning);
color: var(--clinic-warning);
}
.clinic-notice--warning {
border-inline-start: 4px solid var(--clinic-warning);
color: var(--clinic-warning);
background: var(--clinic-warning-50, var(--clinic-bg-light));
}
.clinic-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--clinic-space);
}
.clinic-card {
background: var(--clinic-bg);
border: 1px solid var(--clinic-bg-light);
border-radius: var(--clinic-border-radius);
box-shadow: var(--clinic-shadow);
padding: var(--clinic-space);
display: flex;
flex-direction: column;
gap: var( --clinic-space-6 );
}
.clinic-card--core {
background: var(--clinic-bg-light);
}
.clinic-card--empty {
grid-column: 1 / -1;
color: var(--clinic-muted);
text-align: center;
}
.clinic-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var( --clinic-space-4 );
}
.clinic-card__name {
color: var(--clinic-primary);
font-size: 16px;
margin: 0;
}
.clinic-card__desc {
color: var(--clinic-muted);
margin: 0;
flex: 1;
line-height: 1.9;
}
.clinic-btn {
color: var(--clinic-bg);
text-decoration: none;
}
.clinic-btn:hover {
opacity: 0.9;
}
.clinic-btn--primary {
background: var(--clinic-primary);
}
.clinic-btn--success {
background: var(--clinic-success);
}
.clinic-btn--danger {
background: var(--clinic-btn-danger-bg);
}
.clinic-btn--ghost {
background: transparent;
color: var(--clinic-primary);
border: 1px solid var(--clinic-primary);
}
.clinic-label {
display: block;
margin: var(--clinic-spacing-md) 0 var(--clinic-spacing-xs);
color: var(--clinic-primary);
font-weight: 600;
}
.clinic-textarea {
resize: vertical;
}
.appt-edit-row__field .clinic-label { margin-top: 0; }
.appt-edit-row .clinic-select { width: 100%; }
@media ( max-width: 768px ) {
.clinic-card > .appt-history-table.clinic-table { min-width: 0; }
}
@media ( max-width: 768px ) {
.clinic-card > .clinic-chemo-list.clinic-table { min-width: 0; }
}
.clinic-modal {
display: none;
position: fixed;
inset: 0;
z-index: 100000;
}
.clinic-modal.is-open {
display: block;
}
.clinic-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(43, 34, 64, 0.5);
}
.clinic-modal__box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: calc(100% - 32px);
max-width: 480px;
max-height: calc(100vh - 32px);
overflow-y: auto;
box-sizing: border-box;
padding: var(--clinic-space);
background: var(--clinic-bg, #FFFFFF);
border-radius: var(--clinic-radius, 15px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.clinic-modal__box--sm { max-width: 480px; }
.clinic-modal__box--md { max-width: 720px; }
.clinic-modal__box--lg, .clinic-modal__box--wide { max-width: 920px; }
.clinic-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var( --clinic-space-6 );
}
.clinic-modal__title {
color: var(--clinic-primary);
margin: 0;
font-size: 16px;
}
.clinic-modal__close {
background: transparent;
border: none;
cursor: pointer;
font-size: 20px;
color: var(--clinic-muted);
line-height: 1;
}
.clinic-check {
display: block;
margin: var( --clinic-space-2 ) 0;
color: var(--clinic-text);
}
.clinic-btn--sm { padding: var( --clinic-space-2 ) var( --clinic-space-6 ); font-size: 12px; }
.clinic-auth-form .clinic-input {
max-width: 100%;
}
.clinic-search-form .clinic-input {
margin-bottom: 0;
}
.clinic-paybadge { display: inline-block; padding: var( --clinic-space-1 ) var( --clinic-space-5 ); border-radius: var(--clinic-radius-pill, 999px); font-size: 12px; }
.clinic-paybadge--paid { background: var(--clinic-success); color: var( --clinic-text-inverse ); }
.clinic-paybadge--at_clinic { background: var(--clinic-bg-light); color: var(--clinic-primary); }
.clinic-paybadge--unpaid { background: var(--clinic-bg-light); color: var(--clinic-muted); }
.clinic-booking .bw-pay-amount { font-size: 18px; font-weight: 700; color: var(--clinic-primary); margin: var( --clinic-space-4 ) 0; }
.clinic-booking .bw-pay-hint { color: var(--clinic-muted); font-size: 13px; }
.clinic-rx-table .clinic-input {
max-width: 100%;
margin-bottom: 0;
}
a.clinic-btn,
a.clinic-btn:hover,
a.clinic-btn:focus,
a.clinic-btn:active,
.clinic-btn,
.clinic-btn:hover,
.clinic-btn:focus,
.clinic-btn:active {
text-decoration: none;
box-shadow: none;
outline: none;
}
.clinic-btn--primary,
.clinic-btn--primary:hover,
.clinic-btn--primary:focus {
color: var(--clinic-btn-primary-text, var(--clinic-bg));
}
.clinic-btn--success,
.clinic-btn--success:hover,
.clinic-btn--success:focus {
color: var(--clinic-btn-success-text, var(--clinic-bg));
}
.clinic-btn--danger,
.clinic-btn--danger:hover,
.clinic-btn--danger:focus {
color: var(--clinic-btn-danger-text, var(--clinic-bg));
}
a.clinic-btn--ghost,
.clinic-btn--ghost {
color: var(--clinic-btn-ghost-text, var(--clinic-primary));
}
a.clinic-btn--ghost:hover,
a.clinic-btn--ghost:focus,
.clinic-btn--ghost:hover,
.clinic-btn--ghost:focus {
background: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary));
color: var(--clinic-btn-ghost-hover-text, var(--clinic-bg));
border-color: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary));
}
.clinic-field-row {
display: flex;
flex-wrap: wrap;
gap: var( --clinic-space-4 );
align-items: center;
background: var(--clinic-bg-light);
border-radius: var(--clinic-border-radius);
padding: var( --clinic-space-5 );
margin-bottom: var( --clinic-space-4 );
}
.clinic-field-row .clinic-input,
.clinic-field-row .clinic-select {
margin-bottom: 0;
max-width: 220px;
}
@media print {
#adminmenumain,
#adminmenuback,
#adminmenuwrap,
#wpadminbar,
#wpfooter,
#screen-meta,
#screen-meta-links,
.update-nag,
.notice,
.updated,
.error,
.no-print,
.clinic-title .clinic-btn,
.clinic-list-head__actions,
.clinic-list-head__toolbar,
.clinic-segfilter,
.clinic-segperiods,
.clinic-filterbar,
.clinic-appt-filters,
.clinic-pp-chips,
.clinic-pager,
.clinic-bulkbar,
.clinic-help-trigger,
.clinic-help-panel,
.clinic-chatbot-toggle {
display: none !important;
}
.wrap,
.clinic-wrap {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: auto !important;
}
body {
background: var( --clinic-bg ) !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.clinic-card {
box-shadow: none !important;
border-color: var(--clinic-line, #ccc);
break-inside: avoid;
}
}
@media ( max-width: 782px ) {
.clinic-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clinic-card > .clinic-table { min-width: 560px; }
.clinic-wrap .clinic-btn { min-height: 44px; }
}
.clinic-card__title {
margin: 0 0 var( --clinic-space-6 );
color: var(--clinic-primary);
font-size: 15px;
}
.clinic-form--inline .clinic-label {
margin: 0;
}
.clinic-help-cat .clinic-card__name .dashicons {
vertical-align: middle;
margin-inline-end: var( --clinic-space-3 );
color: var(--clinic-primary);
}
.clinic-check-inline {
display: inline-flex;
align-items: center;
gap: var( --clinic-space-3 );
margin-inline-end: var(--clinic-spacing-md);
}
.clinic-global-search-wrap .clinic-input { display: inline-block; width: 220px; margin: 0; padding: var( --clinic-space-3 ) var( --clinic-space-6 ); font-size: 13px; }
.clinic-chatbot-form .clinic-input { margin: 0; }
:root {
--clinic-border-radius-sm: 6px;
--clinic-border-radius-lg: 16px;
}
.clinic-btn,
.clinic-input,
.clinic-select,
.clinic-textarea,
.clinic-badge,
.clinic-card,
.clinic-modal,
.clinic-notice {
font-family: var(--clinic-font-family);
}
.clinic-card-value {
line-height: 1.25;
}
.clinic-card--metric .clinic-card-content {
text-align: center;
}
.clinic-btn {
transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.clinic-btn:active {
transform: translateY(1px);
}
.clinic-cards,
.clinic-grid {
gap: var(--clinic-spacing-lg);
}
.clinic-card form .clinic-label:first-child {
margin-top: 0;
}
.clinic-dashboard-search .clinic-btn {
flex: 0 0 auto;
}
.clinic-modules-card .clinic-card__desc {
margin: var(--clinic-spacing-sm) 0;
}
.datepicker-plot-area {
font-family: var(--clinic-font-family, Vazirmatn, sans-serif) !important;
z-index: 100001 !important;
border-radius: var( --clinic-radius-sm ) !important;
}
.datepicker-plot-area .datepicker-navigator,
.datepicker-plot-area .navigator,
.datepicker-plot-area .toolbox {
background: var(--clinic-bg, #fff) !important;
}
.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev,
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
.datepicker-plot-area .navigator .btn {
color: var(--clinic-primary, #4B2E83) !important;
}
.datepicker-plot-area table td.selected span,
.datepicker-plot-area .datepicker-day-view .table-days td.selected span,
.datepicker-plot-area .table-days td.selected span {
background: var(--clinic-primary, #4B2E83) !important;
color: var(--clinic-on-primary, #fff) !important;
border-radius: 5px !important;
}
.datepicker-plot-area table td.today span,
.datepicker-plot-area .table-days td.today span {
background: var(--clinic-primary-100, #EDE8FF) !important;
border: 1px solid var(--clinic-primary, #4B2E83) !important;
border-color: var(--clinic-primary, #4B2E83) !important;
color: var(--clinic-primary, #4B2E83) !important;
border-radius: 5px !important;
}
.datepicker-plot-area .toolbox {
min-height: 44px !important;
padding: var( --clinic-space-3 ) var( --clinic-space-4 ) !important;
box-sizing: border-box !important;
}
.datepicker-plot-area .toolbox .pwt-btn-today,
.datepicker-plot-area .toolbox .pwt-btn-submit,
.datepicker-plot-area .toolbox .pwt-btn-calendar {
background-color: var(--clinic-btn-primary-bg, var(--clinic-primary, #4B2E83)) !important;
color: var(--clinic-btn-primary-text, #fff) !important;
height: 32px !important;
min-height: 32px !important;
line-height: 32px !important;
min-width: 64px !important;
padding: 0 var( --clinic-space-7 ) !important;
margin: 0 0 0 var( --clinic-space-4 ) !important;
border: 1px solid rgba( 255, 255, 255, 0.35 ) !important;
border-radius: var( --clinic-radius-sm ) !important;
font-family: var(--clinic-font-family, 'Vazirmatn', 'IRANSans', Tahoma, sans-serif) !important;
font-size: 13px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.datepicker-plot-area .toolbox .pwt-btn-today:hover,
.datepicker-plot-area .toolbox .pwt-btn-submit:hover,
.datepicker-plot-area .toolbox .pwt-btn-calendar:hover {
background-color: var(--clinic-btn-primary-hover-bg, var(--clinic-primary, #4B2E83)) !important;
color: var(--clinic-btn-primary-hover-text, #fff) !important;
border-color: var(--clinic-btn-primary-hover-bg, var(--clinic-primary, #4B2E83)) !important;
}
.datepicker-plot-area .toolbox .pwt-btn-submit,
.datepicker-plot-area .toolbox .pwt-btn-calendar {
padding: 0 5px !important;
min-width: 0 !important;
}
.rtl .clinic-wrap h1, .rtl .clinic-wrap h2, .rtl .clinic-wrap h3,
.rtl .clinic-wrap h4, .rtl .clinic-wrap h5, .rtl .clinic-wrap h6,
.datepicker-plot-area h1, .datepicker-plot-area h2, .datepicker-plot-area h3,
.datepicker-plot-area h4, .datepicker-plot-area h5, .datepicker-plot-area h6 {
font-family: inherit !important;
}
.clinic-cal__nav,
.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev,
.clinic-nav-arrow {
direction: ltr;
unicode-bidi: isolate;
}
.bw-prefill {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var( --clinic-space-6 );
padding: var( --clinic-space-6 ) var( --clinic-space-8 ); margin-bottom: var( --clinic-space-8 );
border: 1px solid var(--clinic-border); border-radius: var(--clinic-form-radius, 8px); background: var(--clinic-bg-light);
}
.bw-prefill__main { display: flex; flex-wrap: wrap; gap: var( --clinic-space-3 ) var( --clinic-space-8 ); align-items: center; }
.bw-prefill__name { font-weight: 700; color: var(--clinic-primary); font-size: 15px; }
.bw-prefill__meta { font-size: 13px; color: var(--clinic-text); }
.bw-prefill__actions { display: flex; gap: var( --clinic-space-4 ); flex-wrap: wrap; }
.clinic-wrap,
.clinic-admin-ui,
.clinic-dashboard,
.clinic-modal,
.kanban-modal,
.clinic-help-panel,
.clinic-chatbot,
.clinic-auth,
.clinic-notif-list,
.datepicker-plot-area {
font-family: var(--clinic-font-family, 'Vazirmatn', 'IRANSans', Tahoma, sans-serif);
}
.clinic-wrap input,
.clinic-wrap select,
.clinic-wrap textarea,
.clinic-wrap button,
.clinic-dashboard input,
.clinic-dashboard select,
.clinic-dashboard textarea,
.clinic-dashboard button {
font-family: var(--clinic-font-family, 'Vazirmatn', 'IRANSans', Tahoma, sans-serif);
}
.clinic-booking .bw-steps {
list-style: none; display: flex; flex-wrap: wrap; gap: var( --clinic-space-4 );
margin: 0 0 var( --clinic-space-8 ); padding: 0; counter-reset: bw;
}
.clinic-booking .bw-stepdot {
flex: 1 1 auto; text-align: center; font-size: 13px; padding: var( --clinic-space-4 ) var( --clinic-space-3 );
border-radius: var(--clinic-border-radius, 8px);
background: var(--clinic-bg-light); color: var(--clinic-muted);
border: 1px solid var(--clinic-border);
}
.clinic-booking .bw-stepdot.is-active {
background: var(--clinic-primary); color: var( --clinic-text-inverse ); border-color: var(--clinic-primary);
}
.clinic-booking .bw-step { display: none; }
.clinic-booking .bw-step.is-active { display: block; }
.bw-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( min( 100%, var( --clinic-bw-col, 320px ) ), 1fr ) ); gap: var( --clinic-gap, 14px ); align-items: start; }
.bw-field--full { grid-column: 1 / -1; }
.bw-fileno__modes, .clinic-fileno__modes { display: inline-flex; gap: var( --clinic-space-3 ); margin-bottom: var( --clinic-space-3 ); }
.bw-fileno__mode, .clinic-fileno__mode {
padding: 5px var( --clinic-space-7 ); cursor: pointer; font-size: 13px;
border: 1.5px solid var(--clinic-border); border-radius: var(--clinic-radius-pill, 999px);
background: var(--clinic-bg); color: var(--clinic-muted);
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif); line-height: 1.4;
}
.bw-fileno__mode.is-active, .clinic-fileno__mode.is-active {
border-color: var(--clinic-primary); background: var(--clinic-bg-light); color: var(--clinic-primary); font-weight: 700;
}
.clinic-booking .bw-actions { display: flex; gap: var( --clinic-space-5 ); margin-top: var( --clinic-space-9 ); }
.clinic-booking .bw-req { color: var(--clinic-warning); }
.clinic-booking .bw-error {
background: var(--clinic-bg-light); color: var(--clinic-primary);
border: 1px solid var(--clinic-warning); border-radius: var(--clinic-border-radius, 8px);
padding: var( --clinic-space-5 ) var( --clinic-space-7 ); margin-bottom: var( --clinic-space-7 ); font-size: 14px;
}
.clinic-booking .bw-slots { display: flex; flex-wrap: wrap; gap: var( --clinic-space-4 ); }
.clinic-booking .bw-slot.is-sel {
background: var(--clinic-btn-primary-bg, var(--clinic-primary)) !important;
color: var(--clinic-btn-primary-text, #fff) !important;
}
.clinic-booking .bw-slots-hint { color: var(--clinic-muted); font-size: 13px; }
.clinic-booking .bw-nid-msg { display: block; margin-top: var( --clinic-space-2 ); font-size: 12px; }
.clinic-booking .bw-nid-msg.is-ok { color: var(--clinic-success); }
.clinic-booking .bw-nid-msg.is-bad { color: var(--clinic-warning); }
.clinic-booking .bw-sum-row {
display: flex; justify-content: space-between; gap: var( --clinic-space-6 );
padding: var( --clinic-space-4 ) 0; border-bottom: 1px dashed var(--clinic-border);
}
.clinic-cal { max-width: 480px; }
.clinic-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var( --clinic-space-4 ); margin-bottom: var( --clinic-space-5 ); }
.clinic-cal__title { font-weight: 700; color: var(--clinic-primary); font-size: 15px; }
.clinic-cal__nav {
background: var(--clinic-bg-light); color: var(--clinic-primary); border: 1px solid var(--clinic-border);
border-radius: var(--clinic-border-radius, 8px); width: 34px; height: 34px; font-size: 18px; cursor: pointer; line-height: 1;
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif);
}
.clinic-cal__nav:hover { background: var(--clinic-primary); color: var( --clinic-text-inverse ); }
.clinic-cal__weekdays, .clinic-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var( --clinic-space-2 ); }
.clinic-cal__wd { text-align: center; font-size: 12px; color: var(--clinic-muted); padding: var( --clinic-space-2 ) 0; }
.clinic-cal__grid { margin-top: var( --clinic-space-2 ); }
.clinic-cal__loading { grid-column: 1 / -1; text-align: center; color: var(--clinic-muted); padding: var( --clinic-space-12 ); }
.clinic-cal__day {
min-height: 46px; border-radius: var(--clinic-border-radius, 8px); display: flex; flex-direction: column;
align-items: center; justify-content: center; font-size: 13px; border: 1px solid transparent; position: relative;
}
.clinic-cal__day--empty { background: transparent; }
.clinic-cal__num { font-weight: 600; }
.clinic-cal__cap { font-size: 10px; opacity: 0.85; margin-top: var( --clinic-space-1 ); }
.clinic-cal__day--open { background: var(--clinic-success); color: var( --clinic-text-inverse ); cursor: pointer; }
.clinic-cal__day--low { background: var(--clinic-warning); color: var( --clinic-text-inverse ); cursor: pointer; }
.clinic-cal__day--full { background: var(--clinic-bg-light); color: var(--clinic-muted); }
.clinic-cal__day--holiday { background: var(--clinic-bg-light); color: var(--clinic-muted); }
.clinic-cal__day--closed { background: transparent; color: var(--clinic-muted); opacity: 0.45; }
.clinic-cal__day--open:hover, .clinic-cal__day--low:hover { filter: brightness(0.92); }
.clinic-cal__day.is-today { outline: 2px solid var(--clinic-primary); outline-offset: -2px; }
.clinic-cal__day.is-sel { box-shadow: 0 0 0 3px var(--clinic-primary); z-index: 1; }
.clinic-cal__legend { display: flex; flex-wrap: wrap; gap: var( --clinic-space-6 ); margin-top: var( --clinic-space-5 ); font-size: 12px; color: var(--clinic-muted); }
.clinic-cal__legend-item { display: inline-flex; align-items: center; gap: var( --clinic-space-2 ); }
.clinic-cal__dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.clinic-cal__dot--open { background: var(--clinic-success); }
.clinic-cal__dot--low { background: var(--clinic-warning); }
.clinic-cal__dot--full { background: var(--clinic-bg-light); border: 1px solid var(--clinic-border); }
.clinic-cal__dot--holiday { background: var(--clinic-bg-light); border: 1px solid var(--clinic-border); }
.clinic-cal__slots { display: flex; flex-wrap: wrap; gap: var( --clinic-space-4 ); margin-top: var( --clinic-space-6 ); }
.clinic-cal__slot.is-sel { background: var(--clinic-btn-primary-bg, var(--clinic-primary)) !important; color: var(--clinic-btn-primary-text, #fff) !important; }
.clinic-cal__hint { color: var(--clinic-muted); font-size: 13px; }
@media (max-width: 700px) {
.clinic-cal { max-width: 100%; }
}
.bw-section-title { margin: 22px 0 var( --clinic-space-5 ); padding-top: var( --clinic-space-7 ); border-top: 1px solid var(--clinic-border); font-size: 15px; }
.bw-steps-progress { display: flex; gap: var( --clinic-space-9 ); list-style: none; margin: 0 0 var( --clinic-space-9 ); padding: 0; }
.bw-step-dot { display: flex; align-items: center; gap: var( --clinic-space-4 ); color: var(--clinic-muted, #6b6480); font-weight: 600; font-size: 14px; }
.bw-step-dot__num {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--clinic-bg-light, #F3F1F8); color: var(--clinic-muted, #6b6480);
border: 1px solid var(--clinic-border, #D8D4E4); font-size: 13px;
}
.bw-step-dot.is-active { color: var(--clinic-primary, #4B2E83); }
.bw-step-dot.is-active .bw-step-dot__num {
background: var(--clinic-primary, #4B2E83); color: var(--clinic-on-primary, #FFFFFF);
border-color: var(--clinic-primary, #4B2E83);
}
.bw-step-nav { margin-top: var( --clinic-space-9 ); }
.bw-step-nav--top { margin: 0 0 var( --clinic-space-6 ); }
@media ( max-width: 600px ) {
.bw-step-dot__label { display: none; }
}
.bw-typechips { display: flex; flex-wrap: wrap; gap: var( --clinic-space-5 ); margin-bottom: var( --clinic-space-7 ); }
.bw-typechip {
display: inline-flex; align-items: center; gap: var( --clinic-space-4 ); padding: var( --clinic-space-4 ) var( --clinic-space-8 ); cursor: pointer;
border: 1.5px solid var(--clinic-border); border-radius: var(--clinic-radius-pill, 999px);
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif); font-size: 14px; background: var(--clinic-bg);
}
.bw-typechip input { margin: 0; }
.bw-typechip__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bw-typechip:has( input:checked ) { border-color: var(--clinic-primary); background: var(--clinic-bg-light); }
.bw-type-desc-box {
margin: var( --clinic-space-1 ) 0 var( --clinic-space-7 );
padding: var( --clinic-space-5 ) var( --clinic-space-7 );
text-align: right;
border-radius: var(--clinic-card-radius, 12px);
background: var(--clinic-bg-light, #F3E8FF);
color: var(--clinic-muted, #6b6480);
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif);
font-size: 13.5px;
line-height: 1.7;
box-shadow: var(--clinic-shadow-sm, 0 1px 3px rgba( 0, 0, 0, .06 ));
}
.bw-radios { display: inline-flex; gap: var( --clinic-space-9 ); align-items: center; }
.bw-radios label { display: inline-flex; gap: var( --clinic-space-3 ); align-items: center; cursor: pointer; }
.bw-cal-wrap { margin-top: var( --clinic-space-3 ); }
.bw-lookup { position: relative; margin-top: var( --clinic-space-2 ); }
.bw-lookup__item {
display: block; width: 100%; text-align: right; padding: var( --clinic-space-4 ) var( --clinic-space-6 ); background: var(--clinic-bg);
border: 1px solid var(--clinic-border); border-radius: var(--clinic-border-radius, 8px); margin-bottom: var( --clinic-space-2 ); cursor: pointer;
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif); font-size: 13px; color: var(--clinic-text);
}
.bw-lookup__item:hover { background: var(--clinic-bg-light); border-color: var(--clinic-primary); }
.bw-lookup__hint { color: var(--clinic-muted); font-size: 12px; padding: var( --clinic-space-3 ) 0; }
@media (min-width: 980px) {
.wrap .bw-cal-wrap { display: flex; gap: var( --clinic-space-12 ); align-items: flex-start; }
.wrap .bw-cal-wrap .clinic-cal { flex: 0 0 480px; }
.wrap .bw-cal-wrap .clinic-cal__slots { flex: 1; }
}
.bw-chooser { margin: 0 0 var( --clinic-space-7 ); }
.bw-chooser__label { display: block; font-size: 13px; color: var(--clinic-muted); margin-bottom: var( --clinic-space-3 ); }
.bw-chips { display: flex; flex-wrap: wrap; gap: var( --clinic-space-5 ); }
.bw-chip {
display: inline-flex; align-items: center; gap: var( --clinic-space-4 ); padding: 7px var( --clinic-space-7 ); cursor: pointer;
border: 1.5px solid var(--clinic-border); border-radius: var(--clinic-form-radius, var(--clinic-radius-pill, 999px));
font-family: var(--clinic-font-family, 'Vazirmatn', Tahoma, sans-serif); font-size: 14px; background: var(--clinic-bg);
}
.bw-chip input { margin: 0; }
.bw-chip__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bw-chip__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bw-chip:has( input:checked ) { border-color: var(--clinic-primary); background: var(--clinic-bg-light); }
.bw-price { min-height: 26px; margin: var( --clinic-space-5 ) 0 0; font-weight: 700; color: var(--clinic-primary); }
.bw-price.is-shown { padding: var( --clinic-space-4 ) 0; }
.clinic-cal__slots { min-height: 46px; }
.bw-lookup { min-height: 0; }
#bw-form, .clinic-page--appointment-edit form { width: 100%; }
.clinic-booking .clinic-card, .clinic-page--appointment-edit .clinic-card { overflow-wrap: anywhere; }
.clinic-booking .clinic-card,
.clinic-page--appointment-edit .clinic-card,
.bw-field .clinic-input, .bw-field textarea.clinic-input, .bw-field .clinic-select,
.clinic-cal__day, .bw-cal-wrap, .bw-price, .bw-lookup__item, .clinic-cal__slot {
border-radius: var(--clinic-form-radius, var(--clinic-border-radius, 8px));
}
.clinic-page--appointment-edit .bw-field--full { grid-column: 1 / -1; }
@media (max-width: 860px) {
.clinic-card > .clinic-appt-table { min-width: 0; }
.clinic-appt-table td.clinic-row-actions .clinic-btn { min-height: 44px; }
.clinic-appt-filters .clinic-select.clinic-input--filter { flex: 1 1 0; min-width: 0; }
}
.clinic-switch {
--clinic-switch-w: 40px;
--clinic-switch-h: 22px;
--clinic-switch-knob: 16px;
--clinic-switch-gap: 3px;
--clinic-switch-travel: calc( var( --clinic-switch-w ) - var( --clinic-switch-knob ) - 2 * var( --clinic-switch-gap ) );
position: relative; display: inline-block;
width: var( --clinic-switch-w ); height: var( --clinic-switch-h );
}
.clinic-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.clinic-switch__slider {
position: absolute; inset: 0; cursor: pointer; background: var(--clinic-border);
border-radius: var(--clinic-radius-pill, 999px); transition: background .15s;
}
.clinic-switch__slider::before {
content: ''; position: absolute; width: var( --clinic-switch-knob ); height: var( --clinic-switch-knob ); inset-inline-end: var( --clinic-switch-gap ); top: var( --clinic-switch-gap );
background: var(--clinic-bg); border-radius: 50%; transition: transform .15s;
}
.clinic-switch input:checked + .clinic-switch__slider { background: var(--clinic-success); }
.clinic-switch input:checked + .clinic-switch__slider::before { transform: translateX( calc( -1 * var( --clinic-switch-travel ) ) ); }
.clinic-switch input:focus-visible + .clinic-switch__slider { outline: 2px solid var(--clinic-primary); outline-offset: 2px; }
.clinic-tl-filters .clinic-btn { padding: var( --clinic-space-2 ) var( --clinic-space-6 ); font-size: 12px; }
.clinic-tl-filters .clinic-btn.is-active { background: var(--clinic-primary); color: var(--clinic-on-primary, #fff); border-color: var(--clinic-primary); }
.clinic-agenda .clinic-title .clinic-btn { width: auto; flex: 0 0 auto; font-size: 14px; }
.agenda-tabs .clinic-btn.is-active, .agenda-docchip.is-active { background: var(--clinic-primary); color: var(--clinic-on-primary, #fff); border-color: var(--clinic-primary); }
.agenda-month .clinic-cal__grid { gap: var( --clinic-space-3 ); }
.agenda-mday .clinic-cal__num { align-self: flex-start; }
.agenda-quickadd.is-collapsed .bw-appt-date { display: none; }
@media (max-width: 600px) {
.agenda-tabs .clinic-btn { flex: 1 1 0; min-height: 42px; border-radius: 0; }
.agenda-tabs .clinic-btn:first-child { border-radius: 0 var(--clinic-form-radius, 8px) var(--clinic-form-radius, 8px) 0; }
.agenda-tabs .clinic-btn:last-child { border-radius: var(--clinic-form-radius, 8px) 0 0 var(--clinic-form-radius, 8px); }
.agenda-nav .clinic-btn { flex: 1 1 0; min-height: 42px; justify-content: center; }
.agenda-month .clinic-cal__grid { gap: 3px; }
.agenda-month .clinic-cal__wd { font-size: 10px; }
}
.clinic-types-table input.clinic-input { min-width: 70px; }
.clinic-form-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( var( --clinic-form-col, 260px ), 1fr ) );
gap: var( --clinic-gap, 16px );
align-items: start;
}
.clinic-form-grid--dense { --clinic-form-col: 200px; }
.clinic-field--full { grid-column: 1 / -1; }
.clinic-field--half { grid-column: auto; }
.clinic-fb-grid > .clinic-field { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 600px) {
.clinic-fb-grid > .clinic-field--full { grid-column: span 6; }
.clinic-fb-grid > .clinic-field--half { grid-column: span 3; }
.clinic-fb-grid > .clinic-field--third { grid-column: span 2; }
}
.clinic-req { color: var( --clinic-warning, #D98282 ); font-weight: 700; }
.clinic-form-section { border: 1px solid var(--clinic-border); border-radius: var(--clinic-form-radius, 10px); padding: var( --clinic-space-8 ); margin-bottom: var( --clinic-space-8 ); background: var(--clinic-bg); box-shadow: 0 1px 3px rgba(43,34,64,.06); }
.clinic-form-section > .clinic-form-section__title:first-child { margin-top: 0; }
.clinic-form-section__title { display: flex; align-items: center; gap: var( --clinic-space-4 ); font-weight: 700; color: var(--clinic-primary); margin: 0 0 var( --clinic-space-6 ); font-size: 15px; }
.clinic-form-section__icon { font-size: 17px; line-height: 1; }
.bw-appt-wrap { container-type: inline-size; container-name: bwappt; display: block; }
.bw-appt-layout { display: grid; grid-template-columns: 1fr; gap: var( --clinic-space-8 ); align-items: start; }
@container bwappt (min-width: 760px) {
.bw-appt-layout { grid-template-columns: 2fr 3fr; }
}
.bw-appt-date .clinic-cal { max-width: 100%; }
.bw-appt-main { display: flex; flex-direction: column; gap: var( --clinic-space-8 ); min-width: 0; }
.bw-appt-typeins .bw-typechips { margin-bottom: var( --clinic-space-6 ); }
.bw-appt-insrow { display: flex; flex-wrap: wrap; align-items: center; gap: var( --clinic-space-6 ); }
.bw-appt-insrow .bw-chooser { margin: 0; flex: 1 1 auto; }
.bw-price-badge { display: inline-flex; align-items: center; gap: var( --clinic-space-3 ); padding: var( --clinic-space-3 ) var( --clinic-space-7 ); border-radius: var(--clinic-radius-pill, 999px); background: var(--clinic-primary); color: var(--clinic-on-primary, #fff); font-weight: 700; font-size: 13px; white-space: nowrap; min-height: 18px; }
.bw-price-badge:empty { display: none; }
.bw-appt-slots .clinic-cal__slots { display: block; max-height: 320px; min-height: 320px; overflow-y: auto; margin-top: 0; }
.clinic-cal__slotgroup { margin-bottom: var( --clinic-space-6 ); }
.clinic-cal__slotgroup-title { font-size: 12px; color: var(--clinic-muted); margin: var( --clinic-space-2 ) 0 var( --clinic-space-4 ); padding-bottom: var( --clinic-space-2 ); border-bottom: 1px dashed var(--clinic-border); }
.clinic-cal__slotgrid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) ); gap: var( --clinic-space-4 ); }
.clinic-cal__slotgrid .clinic-cal__slot { width: 100%; text-align: center; }
.clinic-cal__slothint { color: var(--clinic-muted); font-size: 13px; text-align: center; padding: var( --clinic-space-20 ) var( --clinic-space-6 ); }
.clinic-cal__slot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.3; gap: var( --clinic-space-1 ); }
.clinic-cal__slot-time { font-weight: 600; }
.clinic-cal__slot-cap { font-size: 11px; color: var(--clinic-success-700, #047857); }
.clinic-cal__slot.is-sel .clinic-cal__slot-cap { color: var(--clinic-btn-primary-text, #fff); }
.clinic-cal__slot.is-full { opacity: 1; cursor: not-allowed; background: var(--clinic-bg-secondary, #F9FAFB); color: var(--clinic-text, #1F2937); border-color: var(--clinic-border, #D7DBE0); }
.clinic-cal__slot.is-full .clinic-cal__slot-time { color: var(--clinic-text, #1F2937); }
.clinic-cal__slot.is-full .clinic-cal__slot-cap--full { color: var(--clinic-danger, #B42318); font-weight: 700; }
.bw-summary { display: none; align-items: center; flex-wrap: wrap; gap: var( --clinic-space-4 ); padding: var( --clinic-space-5 ) var( --clinic-space-7 ); margin: var( --clinic-space-7 ) 0; border-radius: var(--clinic-form-radius, 8px); background: var(--clinic-bg-light); color: var(--clinic-text); font-size: 13px; font-weight: 600; }
.bw-summary.is-shown { display: flex; }
.bw-summary__sep { color: var(--clinic-muted); font-weight: 400; }
.clinic-insform .clinic-form-grid { align-items: end; }
.clinic-inbox-search .clinic-field { margin: 0; min-width: 150px; }
.clinic-inbox-search .clinic-field--btn { display: flex; gap: var( --clinic-space-4 ); align-items: flex-end; }
.clinic-wrap { width: 99%; box-sizing: border-box; }
.clinic-wrap .clinic-card,
.clinic-wrap .clinic-table,
.clinic-list-head { width: 100%; box-sizing: border-box; }
.clinic-list-head__toolbar .clinic-btn,
.clinic-toolbar .clinic-btn { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
.clinic-wrap .clinic-appt-filters input[type="search"].clinic-input--search {
min-width: 200px !important;
width: var( --clinic-field-max-width, 360px );
max-width: 100%;
flex: 0 1 auto;
margin-bottom: 0;
}
.clinic-bulkbar .clinic-btn { height: 36px; background: var( --clinic-surface, #fff ); color: var( --clinic-primary, #4B2E83 ); border: none; }
.clinic-bulkbar .clinic-btn:hover,
.clinic-bulkbar .clinic-btn:focus { background: var( --clinic-bg-light, #F3E8FF ); color: var( --clinic-primary, #4B2E83 ); }
.clinic-form-grid { container-type: inline-size; }
@container ( min-width: 560px ) {
.clinic-form-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.clinic-form-grid .clinic-field--full { grid-column: 1 / -1; }
}
@container ( min-width: 900px ) {
.clinic-form-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
.clinic-form-grid > .clinic-field { min-width: 0; }
.clinic-input, .clinic-select, .clinic-textarea { margin-bottom: 5px !important; }
@media ( max-width: 782px ) {
.clinic-list-head__toolbar .clinic-btn { height: auto; }
}
.clinic-docup { margin-top: var( --clinic-space-9 ); padding: var( --clinic-space-8 ); border: 1px solid var(--clinic-border, #E5E7EB); border-radius: var(--clinic-form-radius, 12px); background: var(--clinic-bg, #fff); }
.clinic-docup__hint { color: var(--clinic-muted, #6B7280); font-size: .9em; margin: .2em 0 1em; }
.clinic-docup__rows { display: flex; flex-direction: column; gap: var( --clinic-space-7 ); }
.clinic-docup__row { padding: var( --clinic-space-6 ); border: 1px dashed var(--clinic-border, #E5E7EB); border-radius: 10px; background: var(--clinic-bg-light, #F8F7FF); }
.clinic-docup__filewrap { display: flex; align-items: center; gap: var( --clinic-space-5 ); flex-wrap: wrap; margin-bottom: var( --clinic-space-4 ); }
.clinic-docup__fname { color: var(--clinic-muted, #6B7280); font-size: .9em; flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-docup__remove { margin-inline-start: auto; }
.clinic-docup__titlelabel { display: block; margin: .4em 0 .2em; }
.clinic-docup__catlabel { display: block; margin: .7em 0 .3em; font-weight: 600; color: var(--clinic-text, #111827); }
.clinic-docup__cats { display: flex; flex-wrap: wrap; gap: var( --clinic-space-4 ) var( --clinic-space-8 ); }
.clinic-docup__cat { display: inline-flex; align-items: center; gap: var( --clinic-space-3 ); color: var(--clinic-text, #111827); cursor: pointer; }
.clinic-docup__add { margin-top: var( --clinic-space-6 ); }
.clinic-subcard,
.clinic-about-card,
.clinic-modules-card,
.clinic-license-box,
.clinic-auth-box,
.clinic-form-section,
.appt-detail-card,
.clinic-stat,
.clinic-segkpi,
.clinic-revcards .clinic-segkpi,
.clinic-caps-group,
.clinic-help-article,
.clinic-response-detail,
.clinic-pad,
.clinic-rx-result,
.clinic-rx-canvas-view {
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
transition: var(--clinic-tr-elev);
}
.clinic-stat__ico,
.clinic-segkpi__ico,
.clinic-form-section__icon,
.clinic-crm__stat-icon {
box-shadow: var(--clinic-elev-flat, var(--clinic-shadow-xs));
}
.clinic-crm__avatar,
.agenda-col__avatar,
.bw-chip__avatar {
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm)), 0 0 0 3px var(--clinic-bg-primary, #fff);
}
.clinic-modal__box,
.kanban-modal,
.clinic-portal__modal-box {
box-shadow: var(--clinic-elev-overlay, var(--clinic-shadow-2xl)) !important;
}
.clinic-modal__backdrop,
.kanban-modal-overlay {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.clinic-chatbot-panel,
.clinic-help-panel,
.clinic-search-suggest,
.bw-lookup .bw-lookup__item:first-child {
box-shadow: var(--clinic-elev-float, var(--clinic-shadow-xl));
}
.clinic-chip,
.bw-chip,
.bw-typechip,
.agenda-docchip,
.clinic-paybadge,
.clinic-srcbadge,
.clinic-cap-badge,
.perpage-chip {
box-shadow: none;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.clinic-chip:hover,
.bw-chip:hover,
.bw-typechip:hover,
.agenda-docchip:hover {
box-shadow: none;
}
.clinic-chip.is-active,
.bw-typechip:has( input:checked ),
.bw-chip:has( input:checked ) {
box-shadow: none;
}
.clinic-tl,
.agenda-slot,
.bw-lookup__item {
transition: var(--clinic-tr-elev);
}
.clinic-cal__day--open,
.clinic-cal__day--low,
.clinic-cal__slot,
.bw-slot,
.agenda-qa-slot {
transition: var(--clinic-tr-elev);
}
.clinic-cal__day--open:hover,
.clinic-cal__day--low:hover,
.clinic-cal__slot:hover,
.bw-slot:hover,
.agenda-qa-slot:hover {
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-md));
transform: translateY(var(--clinic-lift-sm, -2px));
}
.clinic-switch__slider {
box-shadow: none;
}
.clinic-switch__slider::before {
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
}
.clinic-cal__nav,
.pwt-btn-prev,
.pwt-btn-next,
.pwt-btn-today,
.pwt-btn-submit,
.pwt-btn-calendar {
box-shadow: var(--clinic-elev-flat, var(--clinic-shadow-xs));
transition: var(--clinic-tr-elev);
}
.clinic-cal__nav:hover,
.clinic-nav-arrow:hover {
transform: translateY(var(--clinic-lift-sm, -2px));
}
@media (prefers-reduced-motion: reduce) {
.clinic-subcard:hover, .clinic-modules-card:hover, .clinic-stat:hover, .clinic-segkpi:hover,
.clinic-revcards .clinic-segkpi:hover, .clinic-help-article:hover, .clinic-pad:hover,
.clinic-chip:hover, .bw-chip:hover, .bw-typechip:hover, .agenda-docchip:hover,
.clinic-tl:hover, .agenda-slot:hover, .clinic-cal__day--open:hover, .clinic-cal__day--low:hover,
.clinic-cal__slot:hover, .bw-slot:hover, .agenda-qa-slot:hover, .kanban-card:hover,
.clinic-cal__nav:hover, .clinic-nav-arrow:hover {
transform: none !important;
}
}
.clinic-notice {
box-shadow: var(--clinic-elev-flat, var(--clinic-shadow-xs));
}
.myfiles-upload,
.clinic-docup,
.clinic-media__preview {
box-shadow: var(--clinic-elev-flat, var(--clinic-shadow-xs));
}
.clinic-visit-latest .clinic-card__name { display: flex; align-items: center; gap: var( --clinic-space-4 ); }
.clinic-visit-custom__row .clinic-input { margin-bottom: 0; max-width: 100%; }
.vf-row .clinic-input, .vf-row .clinic-select { margin-bottom: 0; max-width: 100%; }
.vf-row--computed .clinic-input[name="f_key[]"] { background: var(--clinic-bg-light, #F3E8FF); }
.clinic-inv-form .clinic-select,
.clinic-inv-form .clinic-input { max-width: 100%; }
.clinic-inv-form .clinic-search-form .clinic-select { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
.clinic-inv-form .clinic-search-form .clinic-btn { align-self: stretch; height: auto; min-height: 0; white-space: nowrap; flex: 0 0 auto; }
.clinic-inv-form > .clinic-form-grid { margin-bottom: var(--clinic-spacing-md, 14px); }
.agenda-tabs .clinic-btn { border: 0; border-radius: var(--clinic-radius-pill, 999px); padding: 7px var( --clinic-space-9 ); min-height: 0; box-shadow: none; }
.clinic-settle-chip {
display: inline-flex; align-items: center; gap: var( --clinic-space-2 );
padding: 3px var( --clinic-space-5 ); border-radius: var(--clinic-radius-data, 8px);
border: 1px solid transparent; font-size: 12px; font-weight: 700;
line-height: 1.7; cursor: pointer; font-family: inherit; max-width: 100%;
transition: filter .15s ease;
}
button.clinic-settle-chip { -webkit-appearance: none; appearance: none; }
.clinic-settle-chip--unpaid { background: var(--clinic-warning, #D98282); color: var(--clinic-on-warning, #1F1535); }
.clinic-settle-chip--partial { background: var(--clinic-amber, #E0A100); color: var(--clinic-amber-on, #1F1535); }
.clinic-settle-chip--settled { background: var(--clinic-success, #22A06B); color: var(--clinic-on-success, #06281B); }
.clinic-settle-chip--unknown { background: var(--clinic-muted, #6b6480); color: var( --clinic-text-inverse ); }
.bw-appt-payment .bw-pay-row { display: flex; align-items: center; justify-content: space-between; gap: var( --clinic-space-6 ); margin-top: var( --clinic-space-6 ); flex-wrap: wrap; }
.bw-pay-remaining { font-weight: 700; color: var(--clinic-text, #2b2f36); }
.bw-pay-remaining b { color: var(--clinic-primary, #4B2E83); }
.bw-patient-debt { display: none; margin: var( --clinic-space-4 ) 0 0; padding: var( --clinic-space-4 ) var( --clinic-space-6 ); border-radius: var(--clinic-card-radius, 12px); background: var(--clinic-bg-light, #F3E8FF); border-right: 4px solid var(--clinic-warning, #D98282); color: var(--clinic-text, #2b2f36); font-size: 13px; }
.bw-patient-debt.is-shown { display: block; }
.bw-patient-debt b { color: var(--clinic-warning-700, #b03c3c); }
.bw-patient-debt a { margin-right: var( --clinic-space-4 ); font-weight: 700; }
.clinic-settle-chip:hover,
.clinic-settle-chip:active { border-color: currentColor; box-shadow: none; }
.clinic-settle-chip:focus-visible { outline: 2px solid var(--clinic-primary, #4B2E83); outline-offset: 2px; }
.clinic-settle-form .clinic-label, .clinic-settle-methods__lbl { display: block; margin: var( --clinic-space-4 ) 0 var( --clinic-space-2 ); font-weight: 700; color: var(--clinic-text, #2b2f36); }
@media (max-width: 768px) {
.clinic-account-actions .clinic-btn { width: 100%; }
}
.bw-manual {
margin: var( --clinic-space-6 ) 0 var( --clinic-space-2 ); padding: var( --clinic-space-6 ) var( --clinic-space-7 );
background: var(--clinic-bg-light, #F3E8FF);
border: 1px solid var(--clinic-border, #ece7f4);
border-radius: var(--clinic-card-radius, var(--clinic-radius-md, 12px));
box-shadow: var(--clinic-shadow-sm, none);
}
.bw-manual__switch { display: inline-flex; align-items: center; gap: var( --clinic-space-4 ); cursor: pointer; margin: 0; }
.bw-manual__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bw-manual__track {
position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: var( --clinic-radius-pill );
background: var(--clinic-muted, #6b6480); transition: background .2s;
}
.bw-manual__knob {
position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 16px; height: 16px;
border-radius: 50%; background: var(--clinic-bg, #fff); transition: transform .2s;
}
.bw-manual__switch input:checked + .bw-manual__track { background: var(--clinic-primary, #4B2E83); }
.bw-manual__switch input:checked + .bw-manual__track .bw-manual__knob { transform: translateX(-18px); }
.bw-manual__switch:hover .bw-manual__track { background: var(--clinic-primary-700, #5B3DB1); }
.bw-manual__switch input:focus-visible + .bw-manual__track { outline: 2px solid var(--clinic-primary, #4B2E83); outline-offset: 2px; }
.bw-manual__text { font-weight: 700; color: var(--clinic-text, #2B2240); font-size: 14px; }
.bw-manual__hint { margin: var( --clinic-space-3 ) 0 0; font-size: 12.5px; color: var(--clinic-muted, #6b6480); }
.bw-manual__fields {
display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: var( --clinic-space-6 );
margin-top: var( --clinic-space-6 ); padding-top: var( --clinic-space-6 ); border-top: 1px solid var(--clinic-border, #ece7f4);
}
.bw-manual__fields[hidden] { display: none; }
.bw-manual__timerow { display: flex; align-items: center; gap: var( --clinic-space-4 ); }
.bw-manual__timerow .clinic-input { flex: 1 1 auto; min-width: 0; }
.bw-manual__msg { margin: var( --clinic-space-2 ) 0 0; min-height: 16px; font-size: 12px; color: var(--clinic-muted, #6b6480); }
.bw-manual__msg.is-bad { color: var(--clinic-error-700); font-weight: 700; }
.bw-appt-wrap.is-manual .bw-appt-layout { display: none; }
.bw-smsopt { display: inline-flex; align-items: center; gap: var( --clinic-space-3 ); margin: var( --clinic-space-5 ) 0 var( --clinic-space-1 ); color: var(--clinic-text, #2B2240); font-weight: 600; }
@media (max-width: 768px) {
.bw-manual__fields { grid-template-columns: 1fr; }
.clinic-restrict__actions .clinic-btn { width: 100%; }
}
.clinic-fin-field .clinic-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--clinic-text); }
@media (max-width: 768px) {
.clinic-pdocs__actions .clinic-btn { flex: 1 1 0; }
}
.bw-no-tariff {
margin: var( --clinic-space-3 ) 0 0; padding: var( --clinic-space-4 ) var( --clinic-space-5 ); font-size: 12.5px; font-weight: 700;
background: var(--clinic-amber); color: var(--clinic-amber-on);
border-radius: var(--clinic-radius-md, 12px);
}
.bw-no-tariff a { color: var(--clinic-amber-on); text-decoration: underline; font-weight: 800; }
.bw-no-tariff a:hover, .bw-no-tariff a:focus { color: var(--clinic-amber-on); text-decoration: none; }
.bw-fee-split { display: flex; flex-wrap: wrap; gap: var( --clinic-space-3 ) var( --clinic-space-8 ); margin: var( --clinic-space-3 ) 0 0; font-size: 12.5px; color: var(--clinic-muted); }
.bw-fee-split b { color: var(--clinic-text); font-weight: 800; }
@media (max-width: 768px) {
.bw-fee-split { flex-direction: column; gap: var( --clinic-space-2 ); }
}
.bw-quote {
margin-top: var( --clinic-space-5 ); padding: var( --clinic-space-6 ) var( --clinic-space-7 );
background: var(--clinic-bg-light); color: var(--clinic-text);
border: 1px solid var(--clinic-border);
border-radius: var(--clinic-card-radius, var(--clinic-radius-md, 12px));
display: grid; gap: var( --clinic-space-3 );
}
.bw-quote[hidden] { display: none; }
.bw-quote__row { display: flex; align-items: baseline; justify-content: space-between; gap: var( --clinic-space-6 ); font-size: 13.5px; }
.bw-quote__row[hidden] { display: none; }
.bw-quote__k { color: var(--clinic-muted); }
.bw-quote__v { color: var(--clinic-text); font-weight: 800; }
.bw-quote__row--ins .bw-quote__k, .bw-quote__row--ins .bw-quote__v { font-size: 12.5px; }
.bw-quote__row--pay {
margin-top: var( --clinic-space-1 ); padding-top: var( --clinic-space-4 ); border-top: 1px solid var(--clinic-border);
}
.bw-quote__row--pay .bw-quote__k { color: var(--clinic-text); font-weight: 700; }
.bw-quote__row--pay .bw-quote__v { color: var(--clinic-primary); font-size: 15px; }
.bw-quote__note {
margin: var( --clinic-space-2 ) 0 0; padding: 7px var( --clinic-space-5 ); font-size: 12.5px; font-weight: 700;
background: var(--clinic-amber); color: var(--clinic-amber-on);
border-radius: var(--clinic-radius-md, 12px);
}
.bw-quote__note[hidden] { display: none; }
@media (max-width: 768px) {
.bw-quote__row { flex-direction: column; gap: var( --clinic-space-1 ); }
.bw-quote__row--pay .bw-quote__v { font-size: 16px; }
}
.clinic-confirm .clinic-modal__box {
padding: var( --clinic-space-12 );
text-align: center;
}
.clinic-confirm__actions .clinic-btn { min-width: 110px; }
.notice.clinic-notice {
border: 1px solid var( --clinic-border );
border-inline-start: 4px solid var( --clinic-border );
border-radius: var( --clinic-border-radius );
background: var( --clinic-bg-light );
box-shadow: var( --clinic-elev-flat, var( --clinic-shadow-xs ) );
font-family: var( --clinic-font-family );
padding: var( --clinic-space-3 ) var( --clinic-space-8 );
}
.notice.clinic-notice--success { border-inline-start-color: var( --clinic-success ); }
.notice.clinic-notice--warning { border-inline-start-color: var( --clinic-warning ); }
.notice.clinic-notice--error { border-inline-start-color: var( --clinic-danger ); }
/* ==== responsive.css (فقط قواعدِ فرمِ رزرو/پایه) ==== */
@media (max-width: 900px) {
.clinic-wrap {
max-width: 100%;
}
.clinic-grid--2col,
.clinic-cards,
.clinic-caps-grid,
.clinic-ds-layout {
grid-template-columns: 1fr !important;
}
.clinic-input,
.clinic-select {
max-width: 100%;
}
.clinic-form--inline .clinic-input,
.clinic-form--inline .clinic-select,
.clinic-form--inline .clinic-jdate {
max-width: 100%;
}
.clinic-table-wrap,
.clinic-matrix-scroll,
.clinic-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.clinic-card {
padding: var(--clinic-spacing-md);
}
.clinic-btn {
padding: var(--clinic-spacing-sm) var(--clinic-spacing-lg);
font-size: 15px;
}
}
@media (max-width: 560px) {
.clinic-title .clinic-btn {
display: block;
margin-top: var(--clinic-spacing-sm);
}
}
/* ==== colors-v2.css (verbatim) ==== */
/**
* Design System v2 — Color Palette (نسخه 1.3.0)
*
* این فایل فقط متغیر تعریف میکند (هیچ مقدار ظاهری روی المان هاردکد نمیشود —
* قانون قرمز #۴). متغیرهای برند سازگار با تمساز باقی میمانند: مقدار درونخطی
* Clinic_Design_System::inline_css() پس از این فایل تزریق میشود و --clinic-primary
* و خانوادهی آن را با انتخاب کاربر بازنویسی میکند. مقادیر زیر «پیشفرض حرفهای» اند.
*
* @package Clinic_Manager
*/
:root {
/* ━━━ PRIMARY BRAND (بنفش) ━━━ */
--clinic-primary-50: #F8F7FF;
--clinic-primary-100: #EDE8FF;
--clinic-primary-200: #DDD1FF;
--clinic-primary-300: #C4ACFF;
--clinic-primary-400: #A684FF;
--clinic-primary-500: #8B6FD9;
--clinic-primary-600: #4B2E83;
--clinic-primary-700: #5B3DB1;
--clinic-primary-800: #3F1B6B;
--clinic-primary-900: #2D1147;
/* ━━━ GOLD (ستارهی محبوبها — STEP 129) ━━━
* طلاییِ روشن؛ روی پسزمینهی بنفشِ برندِ دایرهی دکمه کنتراستِ بالا دارد (~۷:۱).
* توکنِ ثابت (نه تممحور) تا ستاره در همهی تمها طلایی بماند. */
--clinic-gold: #FFD700;
/* ━━━ AMBER (وضعیتِ «پیشپرداختشده»ی تسویهی نوبت — STEP 190) ━━━
* کهربایی هماهنگ با پالت برای چیپِ «پیشپرداختشده». پیشتر فقط داخلِ .clinic-agenda
* تعریف بود؛ اکنون سراسری تا لیستِ نوبتها (خارج از .clinic-agenda) هم بتواند از آن استفاده کند.
* --clinic-amber-on متنِ تیرهی مکمل روی کهربایی (کنتراست ~۸٫۶:۱) — طبق قانونِ رنگِ STEP 109. */
--clinic-amber: #E0A100;
--clinic-amber-on: #1F1535;
/* ━━━ گرید کارت و ظرف نمودار (کامپوننتهای استانداردِ سیستم طراحی — STEP 193) ━━━
* از این پس هر کارت فقط داخلِ .clinic-cards-grid و هر نمودار فقط با .clinic-chart ساخته شود. */
--clinic-card-min: 220px; /* کفِ عرضِ هر کارت در گریدِ auto-fit */
--clinic-cards-gap: 14px; /* فاصلهی کارتها */
--clinic-chart-h: 320px; /* ارتفاعِ استانداردِ ظرفِ نمودار (دسکتاپ) */
--clinic-chart-h-mobile: 220px; /* ارتفاعِ نمودار در موبایل */
/*
* توجه: --clinic-primary اینجا تعریف نمیشود تا تمسازِ موجود (که آن را روی
* admin.css بهصورت inline تنظیم میکند) مالک انحصاری برند بماند. مقدار پیشفرضِ
* فِرِشِ نصب از Clinic_Design_System::defaults() = #4B2E83 تأمین میشود.
* همین اصل برای --clinic-success / --clinic-warning / --clinic-bg-light / --clinic-bg
* (متغیرهای تمسازِ قدیمی) صدق میکند و اینجا بازنویسی نمیشوند.
*/
/* گرادیانها — بر پایهی متغیر برند تا با تمساز هماهنگ بماند. */
--clinic-primary-gradient: linear-gradient(135deg, var(--clinic-primary) 0%, var(--clinic-primary-500) 100%);
--clinic-primary-gradient-reverse: linear-gradient(315deg, var(--clinic-primary) 0%, var(--clinic-primary-500) 100%);
/* ━━━ SECONDARY (آبی) ━━━ */
--clinic-secondary: #1E90FF;
--clinic-secondary-50: #F0F7FF;
--clinic-secondary-100: #E0EFFF;
--clinic-secondary-200: #B3D9FF;
--clinic-secondary-300: #80BFFF;
--clinic-secondary-400: #4DA6FF;
--clinic-secondary-500: #1E90FF;
--clinic-secondary-600: #1873CC;
--clinic-secondary-700: #1258A6;
/* ━━━ SUCCESS (سبز) ━━━ */
--clinic-success-50: #ECFDF5;
--clinic-success-100: #D1FAE5;
--clinic-success-200: #A7F3D0;
--clinic-success-300: #6EE7B7;
--clinic-success-400: #34D399;
--clinic-success-500: #10B981;
--clinic-success-600: #059669;
--clinic-success-700: #047857;
/* --clinic-success پایه متعلق به تمساز است؛ اینجا بازنویسی نمیشود. */
--clinic-success-gradient: linear-gradient(135deg, #10B981 0%, #34D399 100%);
/* ━━━ WARNING (نارنجی) ━━━ */
--clinic-warning-50: #FFFBEB;
--clinic-warning-100: #FEF3C7;
--clinic-warning-200: #FDE68A;
--clinic-warning-300: #FCD34D;
--clinic-warning-400: #FBBF24;
--clinic-warning-500: #F59E0B;
--clinic-warning-600: #D97706;
--clinic-warning-700: #B45309;
/* --clinic-warning پایه متعلق به تمساز است؛ اینجا بازنویسی نمیشود. */
--clinic-warning-gradient: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
/* ━━━ ERROR (قرمز) ━━━ */
--clinic-error-50: #FEF2F2;
--clinic-error-100: #FEE2E2;
--clinic-error-200: #FECACA;
--clinic-error-300: #FCA5A5;
--clinic-error-400: #F87171;
--clinic-error-500: #EF4444;
--clinic-error-600: #DC2626;
--clinic-error-700: #B91C1C;
--clinic-error: #EF4444;
--clinic-error-gradient: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
/* ━━━ INFO ━━━ */
--clinic-info-50: #F0F9FF;
--clinic-info-100: #E0F2FE;
--clinic-info-200: #BAE6FD;
--clinic-info-500: #0EA5E9;
--clinic-info-600: #0284C7;
--clinic-info-700: #0369A1; /* STEP 109: شیدِ تیرهتر برای خواناییِ AA رویِ info-100 (متنِ badge اطلاع) */
--clinic-info: #0EA5E9;
/* ━━━ NEUTRAL (خاکستری) ━━━ */
--clinic-gray-50: #F9FAFB;
--clinic-gray-100: #F3F4F6;
--clinic-gray-200: #E5E7EB;
--clinic-gray-300: #D1D5DB;
--clinic-gray-400: #9CA3AF;
--clinic-gray-500: #6B7280;
--clinic-gray-600: #4B5563;
--clinic-gray-700: #374151;
--clinic-gray-800: #1F2937;
--clinic-gray-900: #111827;
/* ━━━ SEMANTIC (light) ━━━ */
--clinic-bg-primary: #FFFFFF;
--clinic-bg-secondary: #F9FAFB;
--clinic-bg-tertiary: #F3F4F6;
--clinic-text-primary: #111827;
--clinic-text-secondary: #6B7280;
--clinic-text-tertiary: #9CA3AF;
--clinic-text-inverse: #FFFFFF;
--clinic-border-color: #E5E7EB;
--clinic-border-light: #F3F4F6;
--clinic-border-strong: #D1D5DB;
/* ━━━ STEP 76 — توکنِ واحدِ فیلد (پیشفرضِ ثابت؛ inline_css() همینها را پویا هم emit میکند).
* مقادیر = ظاهرِ مؤثرِ فعلیِ فیلد (قانونِ #۱: بدونِ تغییرِ ظاهر). ━━━ */
--clinic-field-bg: var(--clinic-bg-primary, #fff);
--clinic-field-border: var(--clinic-border-color, #E5E7EB);
--clinic-field-border-w: 1.5px;
--clinic-field-radius: 10px; /* STEP 157: گوشهی گردترِ یکدست (هماهنگ با کارتِ ۱۶px؛ غلبه بر 7px خارجی) */
--clinic-field-padding-y: 11px;
--clinic-field-padding-x: 14px;
--clinic-field-font-size: 14px;
--clinic-field-focus: var(--clinic-primary, #4B2E83);
--clinic-field-focus-ring: var(--clinic-primary-100, #EDE8FF);
/* STEP 223-B — حلقهی فوکوسِ نقشِ ورودی با outline ساخته میشود نه box-shadow،
* چون outline ابعاد را تکان نمیدهد و قراردادِ «ورودی سایه ندارد» را نمیشکند. */
--clinic-field-focus-w: 2px;
--clinic-field-focus-offset: 1px;
/* STEP 157 — فونت/placeholderِ فیلد (تکمنبع؛ peyda-vfِ سایت سپس Peydaِ خودمیزبانِ تضمینی) */
--clinic-field-font: 'peyda-vf', 'Peyda', 'Vazirmatn', Tahoma, sans-serif;
/* STEP 223-B — `--clinic-field-inset` حذف شد: هیچ ورودیای دیگر سایه ندارد و
* توکنی که تنها مصرفکنندهاش یک نوارِ ناوبری بود، نامش دروغ میگفت. */
--clinic-field-placeholder: var(--clinic-text-secondary, #6B7280); /* ۴٫۸۸:۱ روی سفید (≥۴٫۵) */
--clinic-field-height: auto;
--clinic-field-max-width: 360px;
--clinic-form-col: 260px;
--clinic-gap: 16px;
/* توکنهای گونه (هر گونه مستقل قابلِتنظیم). */
--clinic-field-filter-height: 34px;
--clinic-field-filter-pad-y: 6px;
--clinic-field-filter-pad-x: 12px;
--clinic-field-search-pad-inline: 40px;
--clinic-field-table-pad-y: 6px;
--clinic-field-table-pad-x: 8px;
/* ════════════════════════════════════════════════════════════════════
* STEP 155 — سیستمِ «لایهبندیِ بُعدی» (Dimensional Layering).
*
* یک مقیاسِ عمقِ واحد (depth scale) که همهی المانهای پلاگین از آن پیروی میکنند
* تا عمق «منطقی» باشد نه تصادفی: پسزمینه < ردیف/چیپ < کارت < کارتِ برجسته/هیرو
* < dropdown/toast < مودال. سایهها دولایهاند (نورِ محیطی + نورِ جهتدار) و با
* رنگِ بنفشِ تیرهی برند تهرنگ خوردهاند (نه سیاهِ خام) تا با هویتِ رنگی همخانواده
* بمانند و حسِ پزشکیِ آرام بدهند. همه «متغیرِ CSS»اند (قانونِ قرمز #۴ — تمساز نشکند).
* RTL-safe: جابهجاییِ بالاآمدن فقط روی محورِ Y است (بدونِ جهتِ افقی).
* ════════════════════════════════════════════════════════════════════ */
--clinic-elev-shadow-color: 31, 21, 53; /* RGBِ بنفشِ تیرهی برند (#1F1535) */
/* STEP 156 — مقیاسِ عمقِ «دگرگونکننده» (نسخهی جسورانه): سایهها دولایه و
* **بهوضوح دیدهمیشوند** (نه کمرنگِ STEP 155) ولی نرم و بنفش-تهرنگ میمانند تا
* حسِ پزشکیِ آرام حفظ شود. هر سطح نسبت به سطحِ قبل پرشِ محسوسی دارد. */
--clinic-elev-0: none;
--clinic-elev-1:
0 1px 2px rgba(var(--clinic-elev-shadow-color), 0.08),
0 2px 5px rgba(var(--clinic-elev-shadow-color), 0.10);
--clinic-elev-2:
0 2px 5px rgba(var(--clinic-elev-shadow-color), 0.07),
0 8px 18px rgba(var(--clinic-elev-shadow-color), 0.13);
--clinic-elev-3:
0 6px 14px rgba(var(--clinic-elev-shadow-color), 0.09),
0 16px 34px rgba(var(--clinic-elev-shadow-color), 0.17);
--clinic-elev-4:
0 10px 22px rgba(var(--clinic-elev-shadow-color), 0.11),
0 24px 48px rgba(var(--clinic-elev-shadow-color), 0.20);
--clinic-elev-5:
0 18px 36px rgba(var(--clinic-elev-shadow-color), 0.14),
0 40px 72px rgba(var(--clinic-elev-shadow-color), 0.26);
/* نقشهی معناییِ عمق (هر المان بر اساسِ جایگاهش در سلسلهمراتب یکی را میگیرد) */
--clinic-elev-flat: var(--clinic-elev-1); /* ردیف، چیپ، نشان، فیلد */
--clinic-elev-rest: var(--clinic-elev-2); /* کارت/پنل/باکسِ معمولی */
--clinic-elev-hover: var(--clinic-elev-3); /* بالاآمدن هنگام hover */
--clinic-elev-active: var(--clinic-elev-1); /* فشردهشدن هنگام active */
--clinic-elev-raised: var(--clinic-elev-3); /* کارتِ برجسته/هیرو/تبِ فعال */
--clinic-elev-float: var(--clinic-elev-4); /* dropdown/popover/toast/چت */
--clinic-elev-overlay: var(--clinic-elev-5); /* مودال/پاپآپ */
/* ━━━ STEP 156 — لایهی پسزمینه + فضای تنفس (تفکیکِ واضحِ سطوح: سفید روی یاسی) ━━━ */
--clinic-app-bg: #F4F1FB; /* واشِ یاسیِ ملایم پشتِ کارتها (سفید را شناور میکند) */
--clinic-card-radius: 16px; /* گردیِ مدرنترِ کارتها */
--clinic-card-radius-lg: 20px; /* هیرو/مودال */
--clinic-card-pad: 24px; /* فضای داخلیِ سخاوتمندانهتر */
--clinic-card-gap: 20px; /* فاصلهی بینِ کارتها/شبکه */
/* جابهجاییِ بالاآمدن/فشردهشدن (محورِ Y — RTL-safe) — محسوستر از STEP 155 */
--clinic-lift-sm: -3px;
--clinic-lift: -6px;
--clinic-press: 0px;
/* عمقِ داخلی (فرورفتگیِ track/well/فیلد) + حلقهی فوکوسِ برند */
--clinic-inset-1: inset 0 1px 2px rgba(var(--clinic-elev-shadow-color), 0.07);
--clinic-inset-2: inset 0 2px 4px rgba(var(--clinic-elev-shadow-color), 0.10);
--clinic-ring: 0 0 0 3px var(--clinic-field-focus-ring, var(--clinic-primary-100, #EDE8FF));
/* مقیاسِ z-index یکپارچه (لایهبندیِ پشتهای) */
--clinic-z-base: 1;
--clinic-z-raised: 10;
--clinic-z-sticky: 20;
--clinic-z-dropdown: 30;
--clinic-z-overlay: 40;
--clinic-z-modal: 50;
--clinic-z-toast: 60;
--clinic-z-tooltip: 70;
/* ━━━ SHADOWS (legacy) — به مقیاسِ عمقِ بُعدی نگاشت شدند تا ~۱۰۰ مصرفکنندهی
* موجودِ box-shadow:var(--clinic-shadow-*) یکجا و بدونِ دستزدن به تکتکِ فایلها
* به سایههای دولایهی دیمنشنال ارتقا یابند. ━━━ */
--clinic-shadow-xs: var(--clinic-elev-1);
--clinic-shadow-sm: var(--clinic-elev-1);
--clinic-shadow-md: var(--clinic-elev-2);
--clinic-shadow-lg: var(--clinic-elev-3);
--clinic-shadow-xl: var(--clinic-elev-4);
--clinic-shadow-2xl: var(--clinic-elev-5);
/* ════════════════════════════════════════════════════════════════════
* STEP 66 — سیستم یکپارچهی دکمهها: توکنهای جفتی (پسزمینه + متن + هاور).
*
* اصل: هیچ دکمهای رنگ متن مستقل ندارد. هر پسزمینه با جفتِ متن و جفتِ هاورش
* یک «توکن» است. کلاسهای .clinic-btn--* فقط از همین توکنها میخوانند.
*
* توکنهای «on-color» و «hover» در Clinic_Design_System::inline_css() بر پایهی
* رنگِ انتخابیِ تمساز **محاسبه و emit** میشوند (کنتراست خودکارِ WCAG + darken).
* مقادیر زیر فقط «پیشفرضِ امن» اند تا اگر inline اجرا نشد، رنگ خوانا بماند.
* ════════════════════════════════════════════════════════════════════ */
/* on-colors و hoverها (پیشفرض، همخوان با پالتِ پیشفرض؛ inline_css بازنویسی میکند).
* توجه: سبزِ #22A06B و صورتیِ #D98282 برای AA به متنِ **تیره** نیاز دارند (سفید < ۴٫۵). */
--clinic-on-primary: #FFFFFF;
--clinic-on-success: #1F1535;
/* 🔴 STEP 223-B — تصحیحِ سند: کامنتِ قبلی میگفت «danger = صورتیِ مرجانیِ
* warning»، ولی از STEP 219 مقدارِ `$danger_base` در PHP به `#B42318`
* (قرمزِ تیره) رفت و `inline_css()` این fallback را بازنویسی میکند ⇒ مقدارِ
* واقعیِ زمانِ اجرا **سفید** است، نه تیره. پس این fallback هرگز اجرا نمیشد
* و کامنتش دروغ میگفت. اکنون مقدار با واقعیت همراستا شد. */
--clinic-on-danger: #FFFFFF; /* danger = قرمزِ تیره #B42318 ⇒ متنِ سفید */
/* STEP 223-B — توکنِ تازه: متنِ روی صورتیِ مرجانیِ warning. مرجانی برای AA به
* متنِ **تیره** نیاز دارد (سفید فقط ۲٫۸۱:۱، تیره ۶٫۱۴:۱). */
--clinic-on-warning: #1F1535;
--clinic-on-warning-hover: #1F1535;
--clinic-on-primary-hover: #FFFFFF;
--clinic-on-success-hover: #1F1535;
--clinic-on-danger-hover: #FFFFFF;
--clinic-on-bg-light: var(--clinic-primary, #4B2E83);
--clinic-brand-dark: #1F1535; /* متنِ تیره وقتی پسزمینه روشن است */
--clinic-primary-hover: #3A2366;
--clinic-success-hover: #1B8F5A;
--clinic-danger-hover: #C56B6B;
/* primary — اقدام اصلی (بنفش برند → متن خودکار) */
--clinic-btn-primary-bg: var(--clinic-primary, #4B2E83);
--clinic-btn-primary-text: var(--clinic-on-primary, #FFFFFF);
--clinic-btn-primary-hover-bg: var(--clinic-primary-hover, #3A2366);
--clinic-btn-primary-hover-text: var(--clinic-on-primary-hover, var(--clinic-on-primary, #FFFFFF));
/* secondary — یاسیِ روشن → متنِ تیرهی برند، هاور پر میشود */
--clinic-btn-secondary-bg: var(--clinic-bg-light, #F3E8FF);
--clinic-btn-secondary-text: var(--clinic-on-bg-light, #4B2E83);
--clinic-btn-secondary-hover-bg: var(--clinic-primary, #4B2E83);
--clinic-btn-secondary-hover-text: var(--clinic-on-primary, #FFFFFF);
/* success — سبز → متن خودکار */
--clinic-btn-success-bg: var(--clinic-success, #22A06B);
--clinic-btn-success-text: var(--clinic-on-success, #FFFFFF);
--clinic-btn-success-hover-bg: var(--clinic-success-hover, #1B8F5A);
--clinic-btn-success-hover-text: var(--clinic-on-success-hover, var(--clinic-on-success, #FFFFFF));
/*
* ═══ STEP 220 — دکمه خطر، رنگ خطر میگیرد نه رنگ هشدار ═══
*
* 🔴 انحراف واقعی از موکاپ: این توکن به `--clinic-warning` (صورتی مرجانی)
* اشاره میکرد، یعنی دکمه **حذف** رنگ **هشدار ملایم** میگرفت. سند طراحی
* صورتی مرجانی را «هشدار ملایم و عناصر انسانی» تعریف کرده، نه کنش مخرب، و
* موکاپ برای دکمه خطر `#B42318` میگوید — همان مقدار توکن موجود
* `--clinic-danger`.
*
* 🔶 تغییر بصری عمدی: دکمههای حذف از صورتی به قرمز تیره میروند. متن سفید
* روی `#B42318` کنتراست ۷:۱ میدهد (بالاتر از گیت ۴٫۵).
*/
--clinic-btn-danger-bg: var(--clinic-danger, #B42318);
--clinic-btn-danger-text: var(--clinic-on-danger, #FFFFFF);
--clinic-btn-danger-hover-bg: var(--clinic-danger-hover, #8F1C13);
--clinic-btn-danger-hover-text: var(--clinic-on-danger-hover, var(--clinic-on-danger, #FFFFFF));
/* outline — شفاف + حاشیهی برند → هاور پر */
--clinic-btn-outline-bg: transparent;
--clinic-btn-outline-text: var(--clinic-primary, #4B2E83);
--clinic-btn-outline-border: var(--clinic-primary, #4B2E83);
--clinic-btn-outline-hover-bg: var(--clinic-primary, #4B2E83);
--clinic-btn-outline-hover-text: var(--clinic-on-primary, #FFFFFF);
/* ghost — شفاف با حاشیهی خنثی → هاور پرِ برند */
--clinic-btn-ghost-bg: transparent;
--clinic-btn-ghost-text: var(--clinic-primary, #4B2E83);
--clinic-btn-ghost-border: var(--clinic-border-color, #E5E7EB);
--clinic-btn-ghost-hover-bg: var(--clinic-primary, #4B2E83);
--clinic-btn-ghost-hover-text: var(--clinic-on-primary, #FFFFFF);
/* disabled — خاکستریِ خنثی برای همهی واریانتها.
STEP 232: متن از gray-500 به gray-600 رفت؛ جفت پیشین با اندازهگیری CDP
۳٫۹:۱ بود و گیت ۴٫۵:۱ قانون رنگ را رد میکرد. حالا ۶٫۱:۱. */
--clinic-btn-disabled-bg: var(--clinic-gray-200, #E5E7EB);
--clinic-btn-disabled-text: var(--clinic-gray-600, #4B5563);
}
/* STEP 113: بلوکِ توکنِ «حالت شب» حذف شد — حالتِ شب کاملاً برداشته شد (همیشه روشن). */
/* ════════════════════════════════════════════════════════════════════
* STEP 155 — سبکسازیِ عمق روی موبایل: روی صفحهی کوچک سایهها و بالاآمدن
* ظریفتر میشوند تا چیدمان شلوغ/سنگین نشود (قانونِ «رسمی و ظریف» + ریسپانسیو).
* فقط توکنها بازنویسی میشوند ⇒ همهی المانها خودکار سبکتر میشوند.
* ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--clinic-elev-1: 0 1px 3px rgba(var(--clinic-elev-shadow-color), 0.09);
--clinic-elev-2: 0 2px 6px rgba(var(--clinic-elev-shadow-color), 0.11);
--clinic-elev-3: 0 5px 13px rgba(var(--clinic-elev-shadow-color), 0.14);
--clinic-elev-4: 0 9px 20px rgba(var(--clinic-elev-shadow-color), 0.17);
--clinic-elev-5: 0 14px 28px rgba(var(--clinic-elev-shadow-color), 0.22);
--clinic-lift-sm: -2px;
--clinic-lift: -3px;
--clinic-card-pad: 18px;
--clinic-card-gap: 14px;
}
}
/* ════════════════════════════════════════════════════════════════════
* STEP 156 — لایهی پسزمینه: واشِ یاسیِ ملایم پشتِ کلِ ناحیهی پلاگین (پیشخوان +
* پورتال) تا کارتهای سفید «شناور» و سطوح بهوضوح تفکیک دیده شوند. اسکوپشده تا با
* بقیهی سایت/قالب تداخل نکند.
* ════════════════════════════════════════════════════════════════════ */
/*
* 🔴 STEP 221 عیب د۱۲ — این قاعده **حذف شد**.
*
* STEP 156 عمدا یک واش یاسی پشت کل ناحیه پلاگین گذاشته بود تا کارتهای سفید
* شناور دیده شوند. کارفرما در قاعده ۱ خواسته ظرف ریشه **شفاف** باشد، و جدول
* نقش هم میگوید «سطح ریشه: بدون پسزمینه».
*
* چرا اینجا حذف شد و نه جای دیگر: `background: transparent` در admin.css نوشته
* شده بود ولی این فایل **دیرتر** بار میشود و برنده میماند. اندازهگیری روی
* کپی مستقر مقدار `rgb(244, 241, 251)` را نشان داد، یعنی اعلان قبلی بیاثر بود.
* طبق قاعده «قاعده اضافی حذف شود، نه اینکه سومی رویش نوشته شود»، همین حذف شد.
*
* تعارض ثبتشده: تصمیم بصری STEP 156 با این کار معکوس میشود.
*/
/* ==== spacing-grid.css (verbatim) ==== */
/**
* Design System v2 — Spacing & Grid (نسخه 1.3.0)
*
* سیستم ۸px. متغیرهای فاصله/شعاعِ قدیمی (--clinic-spacing-*، --clinic-border-radius،
* --clinic-radius-pill) دستنخورده میمانند؛ این فایل فقط مقیاس جدید را اضافه میکند.
* کلاسهای کمکی فقط روی صفحات پلاگین بارگذاری میشوند (تداخل سراسری ندارند).
*
* @package Clinic_Manager
*/
:root {
/* مقیاس ۸px */
--spacing-0: 0;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-7: 28px;
--spacing-8: 32px;
--spacing-9: 36px;
--spacing-10: 40px;
--spacing-11: 44px;
--spacing-12: 48px;
--spacing-14: 56px;
--spacing-16: 64px;
--spacing-20: 80px;
--spacing-24: 96px;
/* شعاع گوشه */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: var(--clinic-radius-pill, 999px); /* STEP 223-B: تکمنبع pill */
}
/* ابزارهای فاصله — محدود به کانتینر پلاگین تا با صفحه/قالب تداخل نکنند */
.clinic-wrap .m-0 { margin: var(--spacing-0); }
.clinic-wrap .m-1 { margin: var(--spacing-1); }
.clinic-wrap .m-2 { margin: var(--spacing-2); }
.clinic-wrap .m-3 { margin: var(--spacing-3); }
.clinic-wrap .m-4 { margin: var(--spacing-4); }
.clinic-wrap .m-6 { margin: var(--spacing-6); }
.clinic-wrap .m-8 { margin: var(--spacing-8); }
.clinic-wrap .mx-auto { margin-right: auto; margin-left: auto; }
.clinic-wrap .p-2 { padding: var(--spacing-2); }
.clinic-wrap .p-3 { padding: var(--spacing-3); }
.clinic-wrap .p-4 { padding: var(--spacing-4); }
.clinic-wrap .p-6 { padding: var(--spacing-6); }
.clinic-wrap .p-8 { padding: var(--spacing-8); }
.clinic-wrap .gap-2 { gap: var(--spacing-2); }
.clinic-wrap .gap-3 { gap: var(--spacing-3); }
.clinic-wrap .gap-4 { gap: var(--spacing-4); }
.clinic-wrap .gap-6 { gap: var(--spacing-6); }
/* شبکهی واکنشگرا (mobile-first) — STEP 40 */
.clinic-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
@media (min-width: 768px) {
.clinic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.clinic-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.clinic-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ==== typography-v2.css (verbatim) ==== */
/**
* Design System v2 — Typography (نسخه 1.3.0)
*
* مهم: برخلاف پیشنویس، هیچ المان پایهای (body/h1/a/...) بهصورت سراسری استایل
* نمیشود تا چهرهی wp-admin و قالب فرانت خراب نشود. همهی قواعد المان زیر
* .clinic-wrap (کانتینر پلاگین) یا کلاسهای عنوانِ خودِ پلاگین محدود شدهاند.
*
* @package Clinic_Manager
*/
:root {
/* اندازهی فونت */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px;
--fs-lg: 18px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 28px;
--fs-4xl: 32px;
--fs-5xl: 36px;
/* وزن فونت */
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* ارتفاع خط */
--lh-tight: 1.25;
--lh-snug: 1.375;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
--lh-loose: 2;
/* فاصلهی حروف */
--ls-tighter: -0.05em;
--ls-tight: -0.025em;
--ls-normal: 0;
--ls-wide: 0.025em;
--ls-wider: 0.05em;
}
/* بدنهی محتوای پلاگین (نه body سراسری) */
.clinic-wrap {
font-family: var(--clinic-font-family);
font-size: var(--clinic-fs-base, var(--fs-md)); /* STEP 112-F: متنِ پایه قابلِ تنظیم در تمساز */
line-height: var(--lh-normal);
color: var(--clinic-text-primary);
font-weight: var(--fw-normal);
letter-spacing: var(--ls-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* عناوین — محدود به کانتینر پلاگین + کلاسهای عنوان موجود */
.clinic-wrap h1,
.clinic-title,
.clinic-wrap .h1 {
font-size: var(--clinic-fs-h1, var(--fs-5xl)); /* STEP 112-F */
font-weight: var(--fw-extrabold);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tighter);
margin: 0 0 var(--spacing-5, 20px);
color: var(--clinic-text-primary);
}
.clinic-wrap h2,
.clinic-wrap .h2 {
font-size: var(--clinic-fs-h2, var(--fs-4xl)); /* STEP 112-F */
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 0 0 var(--spacing-4, 16px);
color: var(--clinic-text-primary);
}
.clinic-wrap h3,
.clinic-wrap .h3 {
font-size: var(--clinic-fs-h3, var(--fs-3xl)); /* STEP 112-F */
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
margin: 0 0 var(--spacing-3, 12px);
color: var(--clinic-text-primary);
}
.clinic-wrap h4,
.clinic-wrap .h4 {
font-size: var(--clinic-fs-h4, var(--fs-2xl)); /* STEP 112-F */
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
margin: 0 0 var(--spacing-3, 12px);
color: var(--clinic-text-primary);
}
.clinic-wrap h5,
.clinic-wrap .h5 {
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-normal);
margin: 0 0 var(--spacing-2, 8px);
color: var(--clinic-text-primary);
}
.clinic-wrap h6,
.clinic-wrap .h6 {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: var(--lh-normal);
margin: 0 0 var(--spacing-2, 8px);
color: var(--clinic-text-primary);
}
/* زیرعنوان موجود در پروژه */
.clinic-subtitle {
color: var(--clinic-text-secondary);
font-size: var(--fs-md);
line-height: var(--lh-normal);
margin: 0 0 var(--spacing-4, 16px);
}
/* متن کمکی — کلاسمحور (ایمن) */
.clinic-wrap .text-sm,
.clinic-wrap small {
font-size: var(--fs-sm);
line-height: var(--lh-normal);
}
.clinic-wrap .text-xs {
font-size: var(--fs-xs);
line-height: var(--lh-tight);
}
.text-muted {
color: var(--clinic-text-secondary);
}
.text-subtle {
color: var(--clinic-text-tertiary);
}
.text-emphasis {
font-weight: var(--fw-semibold);
color: var(--clinic-primary);
}
.text-success {
color: var(--clinic-success);
font-weight: var(--fw-medium);
}
.text-warning {
color: var(--clinic-warning);
font-weight: var(--fw-medium);
}
.text-error {
color: var(--clinic-error);
font-weight: var(--fw-medium);
}
.text-info {
color: var(--clinic-info);
font-weight: var(--fw-medium);
}
/* لینکها — فقط داخل کانتینر پلاگین و **فقط لینکهای غیرِ دکمه**.
* STEP 69: دو اصلاحِ ریشهای —
* (۱) `:not(.clinic-btn)` تا این قاعده (تخصصِ ۰،۱،۱) رنگِ دکمههای لینکی را نبلعد.
* (۲) حذفِ وابستگی به متغیرِ قالب (`--theme-palette-color-5`ِ Blocksy) و استفاده از توکنِ
* کلینیک ⇒ پلاگین به رنگِ لینکِ قالب گره نمیخورد. */
.clinic-wrap a:not(.clinic-btn) {
color: var(--clinic-primary, #4B2E83);
text-decoration: none;
transition: color 0.3s ease;
}
.clinic-wrap a:not(.clinic-btn):hover {
color: var(--clinic-primary-hover, #3A2366);
text-decoration: none; /* STEP 112-G: بدونِ زیرخط در hover */
}
/* STEP 140 — گاردِ سراسریِ کنتراست برای «چیپِ لینکیِ فعال» (رفعِ ریشهای، تکمنبع).
* علتِ ریشهای: قاعدهی بالا (.clinic-wrap a:not(.clinic-btn)، تخصص ۰،۲،۱) رنگِ متنِ هر
* ِ غیرِدکمه را به رنگِ برند میبرد. چیپِ فیلترِ فعال (`.clinic-chip-link.is-on`، تخصص
* ۰،۲،۰) پسزمینهی بنفشِ برند میگیرد ولی رنگِ متنش (var( --clinic-bg ) در ویوها) چون تخصصِ کمتری دارد
* بازنویسی میشد ⇒ «بنفش روی بنفش = نامرئی». این رگرسیون با گستردنِ `.clinic-chip-link` در
* STEP 132/136 به صفحهی فاکتورها/پرونده/نسخهها ظاهر شد.
* رفع: این قاعده با تخصصِ بالاتر (۰،۳،۱ عادی / ۰،۴،۱ hover) رنگِ متنِ خوانا را از توکنِ
* کنتراستِ خودکار (--clinic-on-primary = contrast_color(primary)) بازمیگرداند ⇒ هر صفحهای
* که این چیپ را دارد یکجا اصلاح میشود (نه وصلهی تکتک). مستقل از تمِ کاربر هم خوانا میماند
* (پالتِ روشن ⇒ on-primary تیره). گاردِ خودکار: tools/cdp-btn-contrast-global.mjs. */
/* STEP B — تعمیمِ ریشهای به **همهی** تب/چیپهای فعالِ لینکی (نه فقط chip-link).
* هر ِ فعال که پسزمینهی برند میگیرد، متنش باید از توکنِ کنتراستِ خودکار (روشن) بماند
* تا قاعدهی سراسریِ `a:not(.clinic-btn)` «بنفش روی بنفش» نسازد. `!important` چون این باگ
* بارها در بخشهای جدید (پذیرش۲۴/ابری/بایگانی) برگشته و باید در برابرِ هر overrideِ آینده مقاوم باشد. */
.clinic-wrap a.clinic-chip-link.is-on,
.clinic-wrap a.clinic-chip-link.is-on:hover,
.clinic-wrap a.clinic-chip-link.is-on:focus,
.clinic-wrap a.clinic-chip.is-active,
.clinic-wrap a.clinic-chip.is-active:hover,
.clinic-wrap a.clinic-chip.is-active:focus,
.clinic-wrap a.clinic-atab.is-on,
.clinic-wrap a.clinic-atab.is-on:hover,
.clinic-wrap a.clinic-atab.is-on:focus,
.clinic-wrap a.clinic-p24-tab.is-on,
.clinic-wrap a.clinic-p24-tab.is-on:hover,
.clinic-wrap a.clinic-p24-tab.is-on:focus,
.clinic-wrap a.clinic-cloud-tab.is-on,
.clinic-wrap a.clinic-cloud-tab.is-on:hover,
.clinic-wrap a.clinic-cloud-tab.is-on:focus {
color: var(--clinic-on-primary, #fff) !important;
}
.clinic-wrap p {
line-height: var(--lh-normal);
}
/* code/pre — کلاسمحور تا کدِ ویرایشگر وردپرس دستنخورده بماند */
.clinic-wrap code.clinic-code {
background: var(--clinic-bg-secondary);
color: var(--clinic-primary-700);
padding: var( --clinic-space-1 ) var( --clinic-space-3 );
border-radius: var(--radius-sm, 4px);
font-family: 'Monaco', 'Courier New', monospace; /* عمدی: monospace برای نمایشِ کد/قطعهکد */
font-size: var(--fs-sm);
}
/* ==== animations-v2.css (verbatim) ==== */
/**
* Design System v2 — Animations (نسخه 1.3.0)
*
* توجه: قاعدهی سراسری «* { transition }» عمداً حذف شده تا به چهرهی wp-admin
* آسیب نزند؛ ترنزیشنها روی خودِ کامپوننتها (components-v2.css) تعریف شدهاند.
* اینجا فقط keyframes و کلاسهای کمکی animate-* قرار دارند.
*
* @package Clinic_Manager
*/
@keyframes clinicFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes clinicSlideInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes clinicSlideInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes clinicSlideInLeft {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes clinicSlideInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes clinicScaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes clinicSpin {
to { transform: rotate(360deg); }
}
@keyframes clinicPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes clinicShimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
@keyframes clinicBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes clinicRipple {
0% { width: 0; height: 0; opacity: 1; }
100% { width: 300px; height: 300px; opacity: 0; }
}
/* alias قدیمی spin برای دکمههای loading */
@keyframes spin {
to { transform: rotate(360deg); }
}
.animate-fadeIn { animation: clinicFadeIn 0.3s ease; }
.animate-slideInUp { animation: clinicSlideInUp 0.3s ease; }
.animate-slideInDown { animation: clinicSlideInDown 0.3s ease; }
.animate-slideInLeft { animation: clinicSlideInLeft 0.3s ease; }
.animate-slideInRight { animation: clinicSlideInRight 0.3s ease; }
.animate-scaleIn { animation: clinicScaleIn 0.3s ease; }
.animate-spin { animation: clinicSpin 1s linear infinite; }
.animate-pulse { animation: clinicPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: clinicBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
.animate-shimmer {
background: linear-gradient(90deg,
var(--clinic-gray-200) 25%,
var(--clinic-gray-300) 50%,
var(--clinic-gray-200) 75%);
background-size: 1000px 100%;
animation: clinicShimmer 2s infinite;
}
/* اسکلت بارگذاری — نقشِ داده.
* STEP 223-B — insetِ STEP 155 حذف شد (داده سایه ندارد) و شعاع به توکنِ نقشِ داده
* رفت. موکاپ خطِ ۲۶۳ همین است: `.skeleton { border-radius: --clinic-radius-sm }`
* بدونِ هیچ سایهای. خودِ انیمیشنِ shimmer نشانهی «در حالِ بارگذاری» است. */
.clinic-skeleton {
display: block;
border-radius: var(--clinic-radius-data, 8px);
min-height: 16px;
background: linear-gradient(90deg,
var(--clinic-gray-200) 25%,
var(--clinic-gray-300) 50%,
var(--clinic-gray-200) 75%);
background-size: 1000px 100%;
animation: clinicShimmer 2s infinite;
box-shadow: none;
}
/* reveal هنگام اسکرول (با design-system.js فعال میشود) */
.clinic-reveal {
opacity: 0;
transform: translateY(16px);
}
.clinic-reveal.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* احترام به ترجیح کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
.animate-fadeIn,
.animate-slideInUp,
.animate-slideInDown,
.animate-slideInLeft,
.animate-slideInRight,
.animate-scaleIn,
.animate-bounce,
.animate-pulse {
animation: none;
}
.clinic-reveal {
opacity: 1;
transform: none;
}
}
/* ==== design-system-v2.css (verbatim) ==== */
/**
* Design System v2 — لایهی پایهی یکپارچه (نسخه 1.3.0)
*
* تنظیمات سراسریِ ایمن (فقط داخل کانتینر پلاگین .clinic-wrap)، آیکنها،
* حلقهی فوکوس دسترسپذیر و اهداف لمسیِ موبایل (STEP 40).
*
* @package Clinic_Manager
*/
/* رنگ انتخاب متن داخل پلاگین */
.clinic-wrap ::selection {
background: var(--clinic-primary-200);
color: var(--clinic-primary-900);
}
/* آیکنهای SVG درونخط (بدون CDN ثالث — قانون قرمز #۱) */
.clinic-icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: -3px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
.clinic-icon--sm { width: 16px; height: 16px; }
.clinic-icon--lg { width: 28px; height: 28px; }
.clinic-icon--xl { width: 40px; height: 40px; }
/* STEP 223-B — حلقهی فوکوسِ «عمقدارِ» STEP 160 به outline برگشت.
*
* 🔴 این قاعده تخصصِ ۰،۳،۰ دارد ⇒ **از قاعدهی پایهی فیلد بالاتر است**. تا وقتی
* اینجا سایه بود، حذفِ سایه در forms-v2.css روی فوکوسِ کیبورد اثری نداشت. با
* ردیابیِ زنجیرهی غلبه در مرورگر پیدا شد، نه با grep روی نامِ کلاس.
* دسترسپذیری حفظ است: outlineِ ۲px برند همان نشانهی واضحِ کیبورد را میدهد. */
.clinic-wrap .clinic-input:focus-visible,
.clinic-wrap .clinic-select:focus-visible,
.clinic-wrap .clinic-textarea:focus-visible,
.clinic-wrap .clinic-otp-input:focus-visible {
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
outline-offset: var(--clinic-field-focus-offset, 1px);
border-color: var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
box-shadow: none;
}
/* STEP 223-B — فوکوسِ کیبوردِ دکمه هم با outline، نه حلقهی box-shadow: نقشِ کنش
* در هیچ حالتی سایه ندارد. outline بیرونِ جریانِ چیدمان است پس ردیفِ دکمهها
* تکان نمیخورد، و روی پسزمینهی برندِ دکمه هم دیده میشود. */
.clinic-wrap .clinic-btn:focus-visible,
.clinic-wrap a.clinic-btn:focus-visible {
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
outline-offset: var(--clinic-focus-outline-offset, 2px);
box-shadow: none;
}
/* اهداف لمسی در موبایل (STEP 40) */
@media (hover: none) and (pointer: coarse) {
.clinic-wrap .clinic-btn,
.clinic-wrap .clinic-btn-primary,
.clinic-wrap .clinic-btn-secondary,
.clinic-wrap .clinic-btn-success,
.clinic-wrap .clinic-btn-danger {
min-height: 48px;
}
.clinic-wrap .clinic-input,
.clinic-wrap .clinic-select,
.clinic-wrap .clinic-textarea {
min-height: 44px;
/* جلوگیری از zoom خودکار iOS روی فوکوس */
font-size: var(--fs-md);
}
}
/* اسکرولبار ظریف داخل کانتینرهای پلاگین */
.clinic-wrap .clinic-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.clinic-wrap .clinic-scroll::-webkit-scrollbar-thumb {
background: var(--clinic-gray-300);
border-radius: var(--clinic-radius-pill, 999px);
}
.clinic-wrap .clinic-scroll::-webkit-scrollbar-thumb:hover {
background: var(--clinic-gray-400);
}
/* ==== components-v2.css (verbatim) ==== */
/**
* Design System v2 — Components (نسخه 1.3.0)
*
* سازگاری کامل با نامگذاری BEM موجود (.clinic-btn--primary، .clinic-card__name)
* و افزودن گونههای جدید تکخطی (.clinic-btn-primary). بارگذاری پس از admin.css ⇒
* بازطراحی روی استایل پایه اعمال میشود بدون شکستن کلاسهای موجود.
*
* @package Clinic_Manager
*/
/* ━━━━━━━━━━━━━ BUTTONS ━━━━━━━━━━━━━ */
/*
* ═══ STEP 220 — پایه دکمه، همتراز با موکاپ ═══
*
* 🔴 باگ گزارششده کارفرما اینجا بود: **دو قاعده پایه متعارض** برای `.clinic-btn`
* وجود داشت — `admin.css` شعاع pill میداد و همین قاعده ۸px، و چون این فایل
* دیرتر بار میشود، ۸px برنده بود. یعنی دکمهها اصلا pill نبودند و هر قاعدهای که
* در حالتی دیگر شعاع را از admin.css میگرفت، شعاع را بین حالتها واگرا میکرد.
*
* طبق فاز ۴ بند ۲، قاعده اضافی **حذف شد** (اعلانهای تکراری از admin.css) و
* همین یکی تنها پایه ماند، با مقادیر موکاپ:
* border 1px شفاف · شعاع pill · پدینگ space-4/space-10 · وزن bold ·
* اندازه فونت دکمه · کف ارتفاع ۴۰px · gap برابر space-2
*/
/*
* 🔴 STEP 221 — یافته باز STEP 220 حل شد: علتش **وردپرس بود، نه کد ما**.
*
* استایل هسته وردپرس (`load-styles.php`) این قاعده سراسری را دارد:
* a:focus, .wp-person a:focus .gravatar, … { border-radius: 2px }
* دکمههای ما اغلب `` هستند. با فشردن ماوس، لینک focus میگیرد و چون
* `a:focus` ویژگی (۰،۱،۱) دارد و `.clinic-btn` فقط (۰،۱،۰)، **وردپرس برنده
* میشود** و شعاع به ۲px میپرد. به همین دلیل هیچ قاعده `:active` در CSS ما
* پیدا نمیشد — قاعده اصلا مال ما نبود.
*
* رفع بدون important و بدون قاعده تازه: سلکتور `a.clinic-btn` به همین قاعده
* پایه افزوده شد تا ویژگیاش (۰،۱،۱) شود و چون فایل ما بعد از هسته بار میشود،
* برنده بماند. شعاع دیگر بین حالتها نمیپرد.
*/
.clinic-btn,
a.clinic-btn {
padding: var( --clinic-space-4 ) var( --clinic-space-10 );
border: 1px solid transparent;
border-radius: var( --clinic-radius-pill );
font-weight: var( --clinic-fw-bold );
font-size: var( --clinic-btn-fs );
font-family: var(--clinic-font-family);
min-height: var( --clinic-btn-min-h );
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var( --clinic-space-2 );
position: relative;
overflow: hidden;
line-height: 1.4;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* اثر ripple ملایم */
.clinic-btn::before {
content: '';
position: absolute;
top: 50%;
right: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
transform: translate(50%, -50%);
pointer-events: none;
}
.clinic-btn:active::before {
animation: clinicRipple 0.6s ease-out;
}
/* ───────────────────────────────────────────────────────────────────
* STEP 66 — هر واریانت **فقط** از چهار توکنِ خودش میخواند (پسزمینه + متن +
* هاور-پسزمینه + هاور-متن). دیگر هیچ رنگ مستقل/هاردکدِ var( --clinic-bg )/گرادیانِ ثابت نیست.
* متنِ هاور همیشه صریحاً ست میشود (باگِ قبلی: ghost:hover پسزمینه را عوض میکرد
* ولی متن را نه ⇒ بنفش روی بنفش). سایهها از توکنِ خنثی (بدونِ رنگِ برندِ هاردکد).
* ─────────────────────────────────────────────────────────────────── */
/* HOTFIX (دکمههای بیرنگ): هر مصرفِ توکن، **fallbackِ زنجیرهای** دارد تا اگر توکنهای
* جفتی (colors-v2.css/inline_css) به صفحه نرسند، دکمه هرگز بیرنگ نشود. مقادیرِ fallback
* دقیقاً برابرِ پیشفرضهای colors-v2.cssاند ⇒ وقتی توکنها لود شدهاند هیچ تغییرِ ظاهری
* رخ نمیدهد (fallback فقط هنگامِ نبودِ توکن فعال میشود). علتِ ریشهای: قاعدهی بیfallbackِ
* این فایل (آخرین در cascade) هنگامِ نبودِ توکن «invalid at computed-value time» میشد و به
* inherit میرفت ⇒ بر fallbackِ admin.css هم غلبه میکرد. */
/* ════════════════════════════════════════════════════════════════════
* STEP 223-B — نقشِ کنش: **بدونِ سایه در هیچ حالتی**، و تمایزِ حالت فقط از
* رنگِ پسزمینه/متن/حاشیه.
*
* موکاپ (`docs/mockups/design-system-full.html` خطِ ۱۳۰ تا ۱۴۶) هیچ سایهای
* روی دکمه ندارد و hover/active را فقط با `color-mix` روی پسزمینه میسازد.
* `transform: translateY(-2px)` هم حذف شد: بالاآمدن، «سایهی هندسی» است و
* چیدمانِ ردیفِ دکمهها را در hover تکان میداد.
* ════════════════════════════════════════════════════════════════════ */
/* Primary */
.clinic-btn-primary,
.clinic-btn--primary {
background: var(--clinic-btn-primary-bg, var(--clinic-primary, #4B2E83));
color: var(--clinic-btn-primary-text, #fff);
box-shadow: none;
}
.clinic-btn-primary:hover,
.clinic-btn--primary:hover {
background: var(--clinic-btn-primary-hover-bg, var(--clinic-primary-hover, #3A2366));
color: var(--clinic-btn-primary-hover-text, #fff);
box-shadow: none;
}
/* پسزمینهی حالتِ active از بلوکِ canonicalِ پایینتر (خطِ ~۲۲۳) میآید که از
* توکنهای موجودِ `--clinic-btn-*-active-bg` میخواند — اینجا فقط سایه صفر میشود
* تا قاعدهی دوم و رقیبی برای همان چیز ساخته نشود. */
.clinic-btn-primary:active,
.clinic-btn--primary:active {
box-shadow: none;
}
/* Secondary */
.clinic-btn-secondary,
.clinic-btn--secondary {
background: var(--clinic-btn-secondary-bg, var(--clinic-bg-light, #F3E8FF));
color: var(--clinic-btn-secondary-text, var(--clinic-primary, #4B2E83));
border: 1px solid var(--clinic-btn-secondary-bg, var(--clinic-bg-light, #F3E8FF));
box-shadow: none;
}
.clinic-btn-secondary:hover,
.clinic-btn--secondary:hover {
background: var(--clinic-btn-secondary-hover-bg, var(--clinic-primary, #4B2E83));
color: var(--clinic-btn-secondary-hover-text, #fff);
border-color: var(--clinic-btn-secondary-hover-bg, var(--clinic-primary, #4B2E83));
box-shadow: none;
}
/* Success */
.clinic-btn-success,
.clinic-btn--success {
background: var(--clinic-btn-success-bg, var(--clinic-success, #22A06B));
color: var(--clinic-btn-success-text, #1F1535);
box-shadow: none;
}
.clinic-btn-success:hover,
.clinic-btn--success:hover {
background: var(--clinic-btn-success-hover-bg, #1B8F5A);
color: var(--clinic-btn-success-hover-text, #1F1535);
box-shadow: none;
}
/* Danger — صورتیِ مرجانی (warning)، متن خودکار */
.clinic-btn-danger,
.clinic-btn--danger {
background: var(--clinic-btn-danger-bg, var(--clinic-warning, #D98282));
color: var(--clinic-btn-danger-text, #1F1535);
box-shadow: none;
}
.clinic-btn-danger:hover,
.clinic-btn--danger:hover {
background: var(--clinic-btn-danger-hover-bg, #C56B6B);
color: var(--clinic-btn-danger-hover-text, #1F1535);
box-shadow: none;
}
/* Outline — شفاف + حاشیهی برند → هاور پر */
.clinic-btn-outline,
.clinic-btn--outline {
background: var(--clinic-btn-outline-bg, transparent);
color: var(--clinic-btn-outline-text, var(--clinic-primary, #4B2E83));
border: 1.5px solid var(--clinic-btn-outline-border, var(--clinic-primary, #4B2E83));
box-shadow: none;
}
.clinic-btn-outline:hover,
.clinic-btn--outline:hover {
background: var(--clinic-btn-outline-hover-bg, var(--clinic-primary, #4B2E83));
color: var(--clinic-btn-outline-hover-text, #fff);
border-color: var(--clinic-btn-outline-hover-bg, var(--clinic-primary, #4B2E83));
}
/* Ghost — شفاف با حاشیهی خنثی → هاور پرِ برند (متنِ هاور صریح) */
.clinic-btn-ghost,
.clinic-btn--ghost {
background: var(--clinic-btn-ghost-bg, transparent);
color: var(--clinic-btn-ghost-text, var(--clinic-primary, #4B2E83));
border: 1px solid var(--clinic-btn-ghost-border, var(--clinic-border-color, #E5E7EB));
box-shadow: none;
}
.clinic-btn-ghost:hover,
.clinic-btn--ghost:hover {
background: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary, #4B2E83));
color: var(--clinic-btn-ghost-hover-text, #fff);
border-color: var(--clinic-btn-ghost-hover-bg, var(--clinic-primary, #4B2E83));
}
/* ───────────────────────────────────────────────────────────────────
* STEP 69 — بیمهی specificity + ضدِّ قالب.
*
* قواعدِ لینکِ عمومیِ پلاگین یا قالبهای وردپرسی (مثلِ `.clinic-wrap a` یا
* `.entry-content a` با تخصصِ ۰،۱،۱) بر `.clinic-btn--X` (۰،۱،۰) غلبه میکردند و
* رنگ/زیرخطِ دکمههای لینکی را میبلعیدند. اینجا نسخهی `a.clinic-btn*` (تگ+کلاس = ۰،۱،۱)
* را با **همان توکنها** (DRY، بدونِ drift) دوباره assert میکنیم؛ چون CSS پلاگین پس از
* CSS قالب لود میشود، در تساویِ تخصص هم برنده است. فقط propertyهای آسیبپذیر (color +
* text-decoration) — پسزمینه/حاشیه را قالبها روی `a`ِ دلخواه ست نمیکنند. */
a.clinic-btn,
a.clinic-btn:hover,
a.clinic-btn:focus,
a.clinic-btn:active {
text-decoration: none;
}
a.clinic-btn--primary { color: var(--clinic-btn-primary-text, #fff); }
a.clinic-btn--primary:hover, a.clinic-btn--primary:focus { color: var(--clinic-btn-primary-hover-text, #fff); }
a.clinic-btn--secondary { color: var(--clinic-btn-secondary-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--secondary:hover, a.clinic-btn--secondary:focus { color: var(--clinic-btn-secondary-hover-text, #fff); }
a.clinic-btn--success { color: var(--clinic-btn-success-text, #1F1535); }
a.clinic-btn--success:hover, a.clinic-btn--success:focus { color: var(--clinic-btn-success-hover-text, #1F1535); }
a.clinic-btn--danger { color: var(--clinic-btn-danger-text, #1F1535); }
a.clinic-btn--danger:hover, a.clinic-btn--danger:focus { color: var(--clinic-btn-danger-hover-text, #1F1535); }
a.clinic-btn--outline { color: var(--clinic-btn-outline-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--outline:hover, a.clinic-btn--outline:focus { color: var(--clinic-btn-outline-hover-text, #fff); }
a.clinic-btn--ghost { color: var(--clinic-btn-ghost-text, var(--clinic-primary, #4B2E83)); }
a.clinic-btn--ghost:hover, a.clinic-btn--ghost:focus { color: var(--clinic-btn-ghost-hover-text, #fff); }
/* STEP 115-۳: حالتِ active برای ۵ دکمه — رنگِ پسزمینه/متنِ اختصاصی (fallback به هاور). */
.clinic-btn--primary:active, a.clinic-btn--primary:active { background: var(--clinic-btn-primary-active-bg, var(--clinic-btn-primary-hover-bg)); color: var(--clinic-btn-primary-active-text, var(--clinic-btn-primary-hover-text, #fff)); }
.clinic-btn--secondary:active, a.clinic-btn--secondary:active { background: var(--clinic-btn-secondary-active-bg, var(--clinic-btn-secondary-hover-bg)); color: var(--clinic-btn-secondary-active-text, var(--clinic-btn-secondary-hover-text, #fff)); }
.clinic-btn--success:active, a.clinic-btn--success:active { background: var(--clinic-btn-success-active-bg, var(--clinic-btn-success-hover-bg)); color: var(--clinic-btn-success-active-text, var(--clinic-btn-success-hover-text, #fff)); }
.clinic-btn--danger:active, a.clinic-btn--danger:active { background: var(--clinic-btn-danger-active-bg, var(--clinic-btn-danger-hover-bg)); color: var(--clinic-btn-danger-active-text, var(--clinic-btn-danger-hover-text, #fff)); }
.clinic-btn--ghost:active, a.clinic-btn--ghost:active { background: var(--clinic-btn-ghost-active-bg, var(--clinic-btn-ghost-hover-bg)); color: var(--clinic-btn-ghost-active-text, var(--clinic-btn-ghost-hover-text, #fff)); }
/* ── STEP B — تثبیتِ رنگِ متنِ دکمهی **پُرشدهی برند** (primary) در hover/active ──
* فقط primary: پسزمینهاش در همهی حالتها برندِ پُر است ⇒ متنِ روشن همیشه امن و خواناست؛
* `!important` تا اگر قالب/وردپرس در بخشی رنگِ متنِ hoverِ دکمهی بنفش را بربایَد، خوانا بماند.
* عمداً outline/ghost و حالتِ :focus را شامل نمیشود، چون آنها پسزمینهی شفاف دارند و
* زمینههایی مثلِ نوارِ bulk عمداً دکمه را روشن/تیره رنگ میکنند (نباید سفید اجبار شود). */
.clinic-btn--primary:hover, .clinic-btn--primary:active,
a.clinic-btn--primary:hover, a.clinic-btn--primary:active {
color: var(--clinic-btn-primary-hover-text, var(--clinic-on-primary, #fff)) !important;
}
/* اندازهها */
.clinic-btn-xs { padding: var( --clinic-space-2 ) var( --clinic-space-4 ); font-size: 11px; }
.clinic-btn-sm { padding: var( --clinic-space-3 ) var( --clinic-space-6 ); font-size: 12px; }
.clinic-btn-md { padding: var( --clinic-space-5 ) var( --clinic-space-10 ); font-size: 14px; }
.clinic-btn-lg { padding: var( --clinic-space-7 ) 28px; font-size: 16px; }
.clinic-btn-xl { padding: var( --clinic-space-8 ) var( --clinic-space-16 ); font-size: 16px; }
/* دکمهی آیکنی — سازگار با .clinic-icon-btn موجود.
* STEP 223-B — شعاع از ۸px به pill رفت: دکمهی آیکنی هم نقشِ **کنش** است و
* قرارداد نقش برای کنش pill میخواهد. این تنها نقضِ شعاع در نقشِ کنش بود.
* چون عنصر مربع ۴۰×۴۰ است، مرورگر pill را به نصفِ ضلع (۲۰px) محدود میکند
* ⇒ دایرهی کامل، همان چیزی که `.clinic-btn-icon-circle` دستی میساخت. */
.clinic-btn-icon,
.clinic-icon-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--clinic-radius-pill, 999px);
}
.clinic-btn-icon-circle { border-radius: 50%; }
/* تمامعرض — هر دو نامگذاری */
.clinic-btn-block,
.clinic-btn--block { width: 100%; display: flex; }
/* اندازهی بزرگ — معادلِ BEM برای .clinic-btn-lg */
.clinic-btn--lg { padding: var( --clinic-space-7 ) 28px; font-size: 16px; }
/* STEP 66 — وضعیت غیرفعال از توکنِ اختصاصی (یک ظاهرِ خاکستریِ یکدست برای همهی
* واریانتها، فارغ از رنگِ پایه). دکمههای غیرفعال از الزامِ کنتراستِ WCAG معافاند. */
.clinic-btn:disabled,
.clinic-btn[disabled],
.clinic-btn.loading {
background: var(--clinic-btn-disabled-bg, var(--clinic-gray-200, #E5E7EB)) !important; /* غلبه بر رنگِ واریانت */
color: var(--clinic-btn-disabled-text, var(--clinic-gray-500, #6B7280)) !important;
border-color: var(--clinic-btn-disabled-bg, var(--clinic-gray-200, #E5E7EB)) !important;
box-shadow: none;
cursor: not-allowed;
transform: none;
opacity: 1;
}
.clinic-btn.loading::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: clinicSpin 0.6s linear infinite;
margin-right: var( --clinic-space-4 );
}
/* ━━━━━━━━━━━━━ CARDS ━━━━━━━━━━━━━
* STEP 155 — کارتِ پایهی واحدِ سیستمِ لایهبندیِ بُعدی. هر کارتِ پلاگین (هر ماژول)
* از همین عمقِ معنایی استفاده میکند تا «هیچ استایلِ جزیرهای» نباشد: rest=elev-rest،
* hover=elev-hover + بالاآمدنِ ظریف، active=فشردهشدن. */
.clinic-card {
background: var(--clinic-bg-primary);
border: 1px solid var(--clinic-border-light, #F3F4F6);
border-radius: var(--clinic-card-radius, 16px);
padding: var(--clinic-card-pad, 24px);
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
will-change: transform;
margin: var( --clinic-space-7 ) 0px var( --clinic-space-7 ) 0px !important;
}
.clinic-card:hover {
box-shadow: var(--clinic-elev-hover, var(--clinic-shadow-lg));
border-color: var(--clinic-primary-200);
transform: translateY(var(--clinic-lift, -6px));
margin: var( --clinic-space-7 ) 0px var( --clinic-space-7 ) 0px !important;
}
.clinic-card:active {
box-shadow: var(--clinic-elev-active, var(--clinic-shadow-sm));
transform: translateY(var(--clinic-press, 0));
}
.clinic-card--elevated {
box-shadow: var(--clinic-elev-raised, var(--clinic-shadow-lg));
border: none;
margin: var( --clinic-space-5 ) 0px var( --clinic-space-5 ) 0px !important;
}
.clinic-card--elevated:hover {
box-shadow: var(--clinic-elev-float, var(--clinic-shadow-xl));
transform: translateY(var(--clinic-lift-sm, -2px));
}
.clinic-card--outlined {
background: transparent;
border: 2px solid var(--clinic-primary);
box-shadow: none;
margin: var( --clinic-space-5 ) 0px var( --clinic-space-5 ) 0px !important;
}
.clinic-card--outlined:hover {
box-shadow: var(--clinic-elev-rest, var(--clinic-shadow-sm));
transform: translateY(var(--clinic-lift-sm, -2px));
}
/* عنوان/توضیح کارت موجود */
.clinic-card__name {
font-size: var(--fs-xl, 20px);
font-weight: var(--fw-semibold, 600);
color: var(--clinic-text-primary);
}
.clinic-card__desc {
color: var(--clinic-text-secondary);
font-size: var(--fs-sm, 14px);
line-height: var(--lh-normal, 1.5);
}
/*
* کارت metric: چیدمان و رنگبندی متعلق به dashboard.css است (نسخهی ۱.۰.۷) و اینجا
* بازنویسی نمیشود تا کارتهای داشبورد دستنخورده بمانند. فقط حاشیهی hover ظریف.
*/
.clinic-card--metric:hover {
border-color: var(--clinic-primary-300);
}
.clinic-card-label {
font-size: 13px;
color: var(--clinic-text-secondary);
margin-top: var( --clinic-space-4 );
font-weight: var(--fw-medium, 500);
}
.clinic-card-change {
font-size: 12px;
margin-top: var( --clinic-space-4 );
padding: var( --clinic-space-2 ) var( --clinic-space-4 );
border-radius: var(--radius-sm, 4px);
background: var(--clinic-success-50);
color: var(--clinic-success-700);
font-weight: var(--fw-semibold, 600);
}
.clinic-card-change.positive {
background: var(--clinic-success-50);
color: var(--clinic-success-700);
}
.clinic-card-change.negative {
background: var(--clinic-error-50);
color: var(--clinic-error-700);
}
/* ============================================================
* STEP 112-G — حذفِ سراسریِ زیرخط در hover/focus (کلِ پلاگین: پیشخوان + پورتال).
* پیشفرضِ خواستهی کاربر: هیچجا زیرخط نباشد. (لینکهای درونمتن هم بدونِ زیرخط.)
* ============================================================ */
.clinic-wrap a:hover, .clinic-wrap a:focus,
.clinic-portal a:hover, .clinic-portal a:focus,
.clinic-wrap .clinic-btn:hover, .clinic-wrap .clinic-btn:focus,
.clinic-portal .clinic-btn:hover, .clinic-portal .clinic-btn:focus {
text-decoration: none;
}
/* ════════════════════════════════════════════════════════════════════
* STEP 223-B — لایهبندیِ بُعدیِ دکمههای STEP 155 برداشته شد.
*
* 🔴 این بلوک **پس از** بلوکِ واریانتها میآمد، پس `.clinic-btn:active` با
* تخصصِ ۰،۲،۰ سایه را به هر شش واریانت برمیگرداند. حذفِ سایه در بلوکِ
* واریانتها بهتنهایی کافی نبود و فقط با ردیابیِ زنجیرهی غلبه در مرورگر
* دیده شد. تمایزِ حالت اکنون کاملا رنگی است.
* ════════════════════════════════════════════════════════════════════ */
.clinic-btn-outline:hover, .clinic-btn--outline:hover,
.clinic-btn-ghost:hover, .clinic-btn--ghost:hover {
box-shadow: none;
}
.clinic-btn:active {
box-shadow: none;
}
/* دکمهی آیکنی — بدونِ عمق (نقشِ کنش). فقط انتقالِ رنگ باقی میماند. */
.clinic-btn-icon,
.clinic-icon-btn {
box-shadow: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.clinic-btn-icon:hover,
.clinic-icon-btn:hover,
.clinic-btn-icon:active,
.clinic-icon-btn:active {
box-shadow: none;
}
/* عنوان/سرِ کارت — جداکنندهی لایهای ظریف */
.clinic-card__head {
position: relative;
}
/* احترام به prefers-reduced-motion: عمق/سایه میماند، حرکت حذف میشود (دسترسپذیری). */
@media (prefers-reduced-motion: reduce) {
.clinic-card,
.clinic-card:hover,
.clinic-card:active,
.clinic-btn,
.clinic-btn:hover,
.clinic-btn:active,
.clinic-btn-icon:hover,
.clinic-icon-btn:hover {
transform: none !important;
}
}
/* STEP H3 — حالتِ خالیِ استاندارد و تمیز (بهجای کارتهای «۰ مورد»). قابلاستفاده در همهی صفحات. */
.clinic-empty-state { text-align: center; padding: var( --clinic-space-20 ) var( --clinic-space-12 ); }
.clinic-empty-state__ico { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: var( --clinic-radius-xl ); background: var( --clinic-bg-light, #F3E8FF ); color: var( --clinic-primary, #4B2E83 ); margin-bottom: var( --clinic-space-7 ); }
.clinic-empty-state__ico svg { width: 28px; height: 28px; }
.clinic-empty-state__title { margin: 0 0 var( --clinic-space-3 ); font-size: 16px; font-weight: 700; color: var( --clinic-text, #2B2240 ); }
.clinic-empty-state__desc { margin: 0 auto; max-width: 460px; color: var( --clinic-text-muted, #5b6270 ); font-size: 13px; line-height: 1.7; }
/* ═══════════════ STEP 193 — کامپوننتهای استانداردِ «گرید کارت» و «ظرف نمودار» ═══════════════ */
/* گرید کارت: CSS Grid با auto-fit + minmax؛ بدون float/absolute؛ ارتفاعِ کارتها خودکار و
* همردیفها با align-items:stretch کش میآیند (بدون هیچ height:100% روی کارت). RTL سالم. */
.clinic-cards-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( var( --clinic-card-min, 220px ), 1fr ) );
gap: var( --clinic-cards-gap, 14px );
align-items: stretch;
margin: 0 0 var( --clinic-space-7 );
}
.clinic-cards-grid > * { min-width: 0; } /* جلوگیری از سرریزِ محتوا در ستون */
.clinic-cards-grid--sm { --clinic-card-min: 160px; } /* کارتهای کوچکترِ آماری */
.clinic-cards-grid--lg { --clinic-card-min: 320px; } /* کارتهای بزرگ (مثلِ نمودارها) */
@media ( max-width: 768px ) {
.clinic-cards-grid { --clinic-card-min: 100%; gap: var( --clinic-space-6 ); } /* موبایل: تکستون */
}
/* ظرف نمودار: ارتفاعِ استاندارد از متغیر + max-height ⇒ نمودار هرگز بیرون نمیزند. */
.clinic-chart {
position: relative;
width: 100%;
height: var( --clinic-chart-h, 320px );
max-height: var( --clinic-chart-h, 320px );
overflow: hidden;
}
.clinic-chart > svg { display: block; width: 100%; height: 100%; }
.clinic-chart .clinic-chart-donut { height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var( --clinic-space-6 ); }
.clinic-chart__empty {
display: flex; align-items: center; justify-content: center; height: 100%;
color: var( --clinic-muted, #6b6480 ); font-size: 14px; text-align: center; padding: 0 var( --clinic-space-6 );
}
@media ( max-width: 768px ) {
.clinic-chart { height: var( --clinic-chart-h-mobile, 220px ); max-height: var( --clinic-chart-h-mobile, 220px ); }
}
@media print {
.clinic-chart { height: 260px !important; max-height: 260px !important; overflow: visible; }
.clinic-chart > svg { height: 260px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
* کامپوننت واحد صفحهبندی — STEP 223-B
*
* تنها استایل صفحهبندی در پلاگین. پیش از این چهار ظاهر متفاوت وجود داشت:
* `.ppage` در فهرست بیماران، `.clinic-page` در لاگ فعالیت، `.clinic-chip-link`
* در فاکتور و نسخه، و `.page-numbers` وردپرس در فهرست نوبت.
*
* قرارداد نقش کنش: شعاع pill، بدون سایه. شعاع و پدینگ و ابعاد در هر پنج حالت
* یکسان میمانند و فقط رنگ عوض میشود — همان قاعدهای که گارد یکسانی حالتها
* میسنجد.
* ═══════════════════════════════════════════════════════════════════ */
.clinic-pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var( --clinic-space-4 );
margin-top: var( --clinic-space-6 );
}
.clinic-pagination__list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var( --clinic-space-2 );
}
.clinic-page {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 36px;
min-height: 36px;
padding: var( --clinic-space-2 ) var( --clinic-space-4 );
border: 1px solid var( --clinic-border, #ece7f4 );
border-radius: var( --clinic-radius-pill );
background: var( --clinic-surface, #fff );
color: var( --clinic-text, #2b2f36 );
font-family: var( --clinic-font-family, inherit );
font-size: var( --clinic-fs-sm, 13px );
font-weight: var( --clinic-fw-medium, 500 );
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.clinic-page--nav { padding-inline: var( --clinic-space-5 ); }
/*
* ویژگی بالاتر (۰،۳،۱) تا قاعده عمومی `.clinic-wrap a:not(.clinic-btn)` رنگ
* متن را نبلعد. درس STEP 109: بدون این، متن بنفش روی پسزمینه بنفش محو میشد.
*/
.clinic-wrap a.clinic-page:hover,
.clinic-page:hover {
background: var( --clinic-bg-light, #F3E8FF );
border-color: var( --clinic-primary, #4B2E83 );
color: var( --clinic-primary, #4B2E83 );
}
.clinic-page:focus-visible {
outline: 2px solid var( --clinic-primary, #4B2E83 );
outline-offset: 2px;
}
.clinic-wrap a.clinic-page.is-current,
.clinic-page.is-current,
.clinic-page.is-current:hover {
background: var( --clinic-primary, #4B2E83 );
border-color: var( --clinic-primary, #4B2E83 );
color: var( --clinic-on-primary, #fff );
cursor: default;
}
/*
* غیرفعال: فوکوسپذیر میماند ولی کنشی ندارد، پس کرسر باید عادی باشد نه
* اشارهگر. ابعاد و شعاع دستنخورده — فقط رنگ کمرنگ میشود.
*/
.clinic-wrap a.clinic-page.is-disabled,
.clinic-page.is-disabled,
.clinic-page.is-disabled:hover {
background: var( --clinic-surface, #fff );
border-color: var( --clinic-border, #ece7f4 );
color: var( --clinic-text-muted, #6b7280 );
cursor: default;
}
.clinic-page-gap {
display: inline-flex;
align-items: center;
min-height: 36px;
padding-inline: var( --clinic-space-2 );
color: var( --clinic-text-muted, #6b7280 );
font-size: var( --clinic-fs-sm, 13px );
user-select: none;
}
.clinic-pagination__info {
color: var( --clinic-text-muted, #6b7280 );
font-size: var( --clinic-fs-sm, 13px );
}
.clinic-pagination__jump {
display: inline-flex;
align-items: center;
gap: var( --clinic-space-2 );
}
.clinic-pagination__jumpinput {
width: 72px;
min-height: 36px;
text-align: center;
}
@media ( max-width: 768px ) {
/*
* روی موبایل سه شماره جا نمیشود؛ فقط صفحه جاری با قبلی و بعدی میماند.
* گیت شده داخل media تا دسکتاپ دستنخورده بماند.
*/
.clinic-page--num:not( .is-current ),
.clinic-page-gap,
.clinic-pagination__jump { display: none; }
.clinic-pagination { gap: var( --clinic-space-3 ); }
/* هدف لمسی. */
.clinic-page { min-height: 44px; min-width: 44px; }
.clinic-page-gap { min-height: 44px; }
}
/* ==== forms-v2.css (verbatim) ==== */
/**
* Design System v2 — Forms (نسخه 1.3.0)
*
* بهبود فیلدهای موجود (.clinic-input/.clinic-select/.clinic-textarea/.clinic-label)
* + برچسب شناور اختیاری (.clinic-form-floating). سازگار با فرمهای موجود.
*
* @package Clinic_Manager
*/
.clinic-form-group {
margin-bottom: var(--spacing-5, 20px);
display: flex;
flex-direction: column;
}
.clinic-form-group:last-child { margin-bottom: 0; }
.clinic-form-group label,
.clinic-label {
margin-bottom: var(--spacing-2, 8px);
font-weight: var(--fw-medium, 500);
font-size: var(--fs-sm, 14px);
color: var(--clinic-text-primary);
display: block;
}
/* ════════════════════════════════════════════════════════════════════
* STEP 76 — قاعدهی پایهی واحدِ فیلد. تنها منبعِ ظاهر؛ همهچیز از توکنِ
* --clinic-field-* (هیچ مقدارِ خامِ رنگ/اندازه). props چیدمانیِ
* (max-width/display/margin) که قبلاً admin.css:213 میداد، اینجا حفظ شد تا
* با حذفِ آن قاعده، ظاهر ذرهای تغییر نکند (قانونِ #۱).
* ════════════════════════════════════════════════════════════════════ */
.clinic-input,
.clinic-select,
.clinic-textarea {
width: 100%;
display: block;
margin-bottom: var(--clinic-spacing-md, 14px);
padding: var(--clinic-field-padding-y, 11px) var(--clinic-field-padding-x, 14px);
border: var(--clinic-field-border-w, 1.5px) solid var(--clinic-field-border, #E5E7EB);
border-radius: var(--clinic-field-radius, 8px);
font-family: var(--clinic-font-family);
font-size: var(--clinic-field-font-size, 14px);
color: var(--clinic-text-primary);
background: var(--clinic-field-bg, #fff);
transition: all 0.2s ease;
box-sizing: border-box;
}
/* سقفِ عرض فقط روی input/select (textarea تمامعرض میماند — حفظِ رفتارِ فعلی). */
.clinic-input,
.clinic-select {
max-width: var(--clinic-field-max-width, 360px);
}
.clinic-input::placeholder,
.clinic-textarea::placeholder {
color: var(--clinic-text-tertiary);
}
.clinic-input:hover,
.clinic-select:hover,
.clinic-textarea:hover {
border-color: var(--clinic-border-strong);
}
/* ════════════════════════════════════════════════════════════════════
* STEP 223-B — نقش ورودی: **بدونِ سایه در هیچ حالتی**.
*
* موکاپ `docs/mockups/design-system-full.html` (خطِ ۲۰۹ و ۲۱۴) ورودی را
* بدونِ `box-shadow` تعریف میکند — نه بیرونی نه درونی — و focus را با
* `outline` میسازد. `outline` بیرونِ جریانِ چیدمان است ⇒ ابعادِ فیلد را تکان
* نمیدهد، پس همان کاری را میکند که حلقهی box-shadow میکرد، بدونِ نقضِ
* قراردادِ نقش. تنها منبعِ حالتِ focus همین قاعده است؛ چهار بلوکِ عمقِ
* STEP 155/157/160 که روی هم انباشته بودند حذف شدند.
* ════════════════════════════════════════════════════════════════════ */
.clinic-input:focus,
.clinic-select:focus,
.clinic-textarea:focus,
.clinic-otp-input:focus {
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
outline-offset: var(--clinic-field-focus-offset, 1px);
border-color: var(--clinic-field-focus, var(--clinic-primary));
box-shadow: none;
background: var(--clinic-field-bg, #fff);
}
/* ════════════════════════════════════════════════════════════════════
* STEP 76 — کلاسهای گونهی فیلد. هر گونه فقط توکنِ لازمِ خود را override
* میکند (با fallback به توکنِ پایه) ⇒ هر گونه مستقل قابلِتنظیم از تمساز/CSS
* سفارشی، بدونِ اثر بر گونههای دیگر. جایگزینِ قواعدِ پراکندهی wrapper-محور.
* ════════════════════════════════════════════════════════════════════ */
/* جستجوی بزرگ: آیکنِ ذرهبین + فاصلهی داخلیِ سمتِ شروع. */
.clinic-input--search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--clinic-field-search-pad-inline, 40px);
max-width: 100%;
}
body.clinic-ltr .clinic-input--search {
background-position: left 12px center;
padding-right: var(--clinic-field-padding-x, 14px);
padding-left: var(--clinic-field-search-pad-inline, 40px);
}
/* فیلترِ فشرده: ارتفاع/پدینگِ کوچکتر، inline، عرضِ خودکار. */
.clinic-input--filter {
display: inline-block;
width: auto;
max-width: 100%;
min-height: var(--clinic-field-filter-height, 34px);
padding: var(--clinic-field-filter-pad-y, 6px) var(--clinic-field-filter-pad-x, 12px);
margin-bottom: 0;
}
/* فیلدِ داخلِ جدول/ماتریس: جمعوجور، بیحاشیهی پایین. */
.clinic-input--table {
padding: var(--clinic-field-table-pad-y, 6px) var(--clinic-field-table-pad-x, 8px);
margin-bottom: 0;
max-width: 100%;
}
/* فیلدِ مودال: عرضِ کامل (بدونِ سقفِ ۳۶۰px) برای پُرکردنِ سلولِ مودال. */
.clinic-input--modal {
max-width: 100%;
}
.clinic-input:disabled,
.clinic-select:disabled,
.clinic-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--clinic-gray-100);
}
/* وضعیتهای اعتبارسنجی — حلقه با outline نه box-shadow (قراردادِ نقشِ ورودی).
* موکاپ برای خطا فقط `border-color` دارد؛ اینجا outline هم میماند تا نشانهی
* خطا در صفحهی پرفیلد گم نشود. outline چیدمان را تکان نمیدهد. */
.clinic-input.error,
.clinic-select.error,
.clinic-textarea.error {
border-color: var(--clinic-error);
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-error);
outline-offset: var(--clinic-field-focus-offset, 1px);
box-shadow: none;
}
.clinic-input.success,
.clinic-select.success,
.clinic-textarea.success {
border-color: var(--clinic-success);
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-success);
outline-offset: var(--clinic-field-focus-offset, 1px);
box-shadow: none;
}
/* متن کمکی */
.clinic-help-text {
font-size: var(--fs-xs, 12px);
color: var(--clinic-text-secondary);
margin-top: var(--spacing-1, 4px);
}
.clinic-help-text.error { color: var(--clinic-error); }
.clinic-help-text.success { color: var(--clinic-success); }
/* برچسب شناور (اختیاری) */
.clinic-form-floating {
position: relative;
}
.clinic-form-floating > label {
position: absolute;
top: 11px;
right: var( --clinic-space-7 );
font-size: var(--fs-sm, 14px);
font-weight: var(--fw-medium, 500);
color: var(--clinic-text-secondary);
pointer-events: none;
transition: all 0.2s ease;
background: var(--clinic-bg-primary);
padding: 0 var( --clinic-space-2 );
margin: 0;
}
.clinic-form-floating > input:focus ~ label,
.clinic-form-floating > input:not(:placeholder-shown) ~ label,
.clinic-form-floating > textarea:focus ~ label,
.clinic-form-floating > textarea:not(:placeholder-shown) ~ label,
.clinic-form-floating > select:focus ~ label {
top: -10px;
font-size: var(--fs-xs, 12px);
color: var(--clinic-primary);
}
/* STEP 223-B — بلوکِ عمقِ STEP 155 (inset در rest + برجستگی در focus) حذف شد.
* قاعدهی پایهی بالا تنها منبعِ حالتِ فیلد است. — دلیل در بلوکِ STEP 223-B. */
/* ════════════════════════════════════════════════════════════════════════════
* STEP 157 — یکدستسازیِ همهی فیلدها: گوشهی گرد + عمقِ inset + فونتِ Peyda.
* یک استایلِ سراسریِ خارجی با `!important` به همهی فیلدها `border-radius:7px` و
* `font-family:'peyda-vf'` تحمیل میکند. اینجا فقط روی فیلدهای **پلاگینِ خودمان**
* (کلاسِ `.clinic-*` — با تکرارِ کلاس برای specificityِ ۰،۲،۰ + `!important`) آن را
* بازنویسی میکنیم؛ هیچ نشتی به فرمهای وردپرس/سایت. همه از توکنِ CSS.
* ════════════════════════════════════════════════════════════════════════════ */
/* تضمینِ بارگذاریِ فونتِ «پیدا» در هر زمینهی CSS (علاوه بر @font-faceِ inline_css PHP).
* مسیر نسبی به فایلِ خودمیزبان ⇒ همیشه «پیدا/loaded»، نه fallbackِ سیستمی. */
@font-face {
font-family: 'Peyda';
src: url('../fonts/PeydaVF.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* غلبه بر !importantِ خارجی (radius + font) — فقط فیلدهای پلاگین.
*
* STEP 223-B — `box-shadow: none` هم اینجا اعلام میشود، نه در قاعدهی پایه.
* دلیل با اندازهگیری: هستهی وردپرس `input[type="text"] { box-shadow: 0 0 0
* transparent }` دارد و تخصصش (۰،۱،۱) از قاعدهی پایهی فیلد (۰،۱،۰) بالاتر است
* ⇒ وردپرس برنده میشد. تکرارِ کلاس (۰،۲،۰) از آن بالاتر است، پس قرارداد را
* **خودمان** اعلام میکنیم نه اینکه به تصادفِ شفافبودنِ سایهی هسته تکیه کنیم.
* بدونِ `!important` تازه — تخصص کافی است. */
.clinic-input.clinic-input,
.clinic-select.clinic-select,
.clinic-textarea.clinic-textarea,
.clinic-otp-input.clinic-otp-input {
border-radius: var(--clinic-field-radius, 10px) !important;
font-family: var(--clinic-field-font, 'peyda-vf', 'Peyda', 'Vazirmatn', Tahoma, sans-serif) !important;
box-shadow: none;
}
/* STEP 223-B — inset رست و حلقهی focusِ box-shadowِ STEP 157 حذف شدند
* (تکرارِ همان چیزی بودند که بلوکِ STEP 155 میداد). قاعدهی پایه مسئول است. */
/* placeholderِ خوانا (≥۴٫۵:۱ روی سفید). */
.clinic-input::placeholder,
.clinic-textarea::placeholder,
.clinic-otp-input::placeholder {
color: var(--clinic-field-placeholder, var(--clinic-text-secondary, #6B7280));
opacity: 1;
}
/* غیرفعال: بدونِ عمق، نیمهشفاف. */
.clinic-input:disabled,
.clinic-select:disabled,
.clinic-textarea:disabled,
.clinic-otp-input:disabled {
box-shadow: none;
opacity: 0.65;
}
/* STEP 223-B — بلوکِ دومِ خطا/موفقیت (تکرارِ همان قاعدهی بالا با مقادیرِ fallbackِ
* متفاوت) حذف شد. قاعدهی بالا با outline تنها منبع است. */
/* موبایل: شعاعِ کمی کوچکتر برای فشردگیِ هماهنگ (سبکسازیِ عمقِ موبایلِ STEP 156). */
@media (max-width: 768px) {
:root { --clinic-field-radius: 9px; }
}
/* STEP 223-B — بلوکِ عمقِ سهحالتهی STEP 160 (hover/focus/active) کاملا حذف شد.
* تمایزِ حالتِ فیلد از این پس فقط با **رنگِ حاشیه** (hover) و **outline**
* (focus/خطا/موفقیت) است — همان الگوی موکاپ. سه بلوکِ رقیبِ 155/157/160 دیگر
* وجود ندارند، پس زنجیرهی غلبه یک برندهی روشن دارد. */
/* ════════════════════════════════════════════════════════════════════════════
* STEP 163 — راستچینیِ پیشفرضِ فیلدهای متنیِ فارسی (با غلبه بر !importantِ خارجی).
* فقط فیلدهای پلاگین (.clinic-input/.clinic-textarea). فیلدهایی که جهتِ خودشان را صریح
* دارند ([dir]) یا عددی/لاتیناند (tel/email/number/url/inputmode عددی) و فیلدِ تاریخ
* (.clinic-jdate) **مستثنا** میشوند تا اشتباهی راستچین نشوند. تکرارِ کلاس ⇒ specificity
* 0,2,0؛ بهعلاوهی :notها و !important ⇒ غلبه بر استایلِ سراسریِ خارجی (مثلِ STEP 157).
* ════════════════════════════════════════════════════════════════════════════ */
.clinic-input.clinic-input:not([dir]):not([type="tel"]):not([type="email"]):not([type="number"]):not([type="url"]):not([inputmode="numeric"]):not([inputmode="tel"]):not([inputmode="decimal"]):not(.clinic-jdate),
.clinic-textarea.clinic-textarea:not([dir]) {
direction: rtl !important;
text-align: right !important;
}
/* فیلدهای عددی/لاتین/ایمیل/تلفن/URL: LTRِ صریح (حتی بدونِ dir در markup) تا اشتباهی
* راستچینِ ارثی نشوند و ارقام/آدرس در ترتیبِ درست بمانند. dir="rtl"ِ صریح محترم میماند. */
.clinic-input[type="tel"]:not([dir="rtl"]),
.clinic-input[type="email"]:not([dir="rtl"]),
.clinic-input[type="number"]:not([dir="rtl"]),
.clinic-input[type="url"]:not([dir="rtl"]),
.clinic-input[inputmode="numeric"]:not([dir="rtl"]),
.clinic-input[inputmode="tel"]:not([dir="rtl"]) {
direction: ltr !important;
}
/* فیلدِ تاریخِ شمسی: LTR تا ارقام و اسلشها مرتب نمایش داده شوند (ورودِ عددیِ STEP 163). */
.clinic-input.clinic-jdate {
direction: ltr !important;
text-align: right !important; /* در فرمِ RTL، شروع از راست؛ ولی ترتیبِ ارقام LTR. */
}
/* نشانِ ملایمِ تاریخِ نامعتبر (ماه/روزِ خارج از بازه هنگامِ تایپ). */
.clinic-input.clinic-jdate--invalid {
border-color: var(--clinic-error, #D98282) !important;
box-shadow: 0 0 0 3px var(--clinic-error-100, rgba(217, 130, 130, 0.18)) !important;
}
/* ==== tables-v2.css (verbatim) ==== */
/**
* Design System v2 — Tables (نسخه 1.3.0)
*
* بهبود .clinic-table موجود: سرستون گرادیانی، hover، راهراه زِبرا، نسخهی فشرده،
* و نشانگر وضعیت. RTL: text-align: right (سازگار با لایهی LTR موجود در admin.css).
*
* @package Clinic_Manager
*/
.clinic-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--fs-sm, 14px);
}
.clinic-table thead {
background: linear-gradient(90deg, var(--clinic-primary-50) 0%, var(--clinic-primary-100) 100%);
border-bottom: 2px solid var(--clinic-border-color);
}
.clinic-table th {
padding: var( --clinic-space-7 ) var( --clinic-space-8 );
text-align: right;
font-weight: var(--fw-semibold, 600);
font-size: 13px;
color: var(--clinic-text-primary);
letter-spacing: 0.3px;
}
.clinic-table td {
padding: var( --clinic-space-7 ) var( --clinic-space-8 );
color: var(--clinic-text-primary);
vertical-align: middle;
}
.clinic-table tbody tr {
border-bottom: 1px solid var(--clinic-border-light);
transition: background-color 0.2s ease;
}
/* راهراه زِبرا */
.clinic-table tbody tr:nth-child(odd) {
background: var(--clinic-bg-secondary);
}
.clinic-table tbody tr:hover {
background: var(--clinic-primary-50);
}
.clinic-table tbody tr:last-child {
border-bottom: none;
}
/* فشرده */
.clinic-table--compact th,
.clinic-table--compact td {
padding: var( --clinic-space-5 ) var( --clinic-space-6 );
font-size: 13px;
}
/* نشانگر وضعیت درون سلول */
.clinic-table-status {
display: inline-flex;
align-items: center;
gap: var( --clinic-space-3 );
}
.clinic-table-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
}
.clinic-table-status-dot.success { background: var(--clinic-success); }
.clinic-table-status-dot.warning { background: var(--clinic-warning); }
.clinic-table-status-dot.error { background: var(--clinic-error); }
.clinic-table-status-dot.info { background: var(--clinic-info); }
/* ════════════════════════════════════════════════════════════════════
* STEP 155 — لایهبندیِ بُعدیِ جدولها.
* جدول بهصورتِ یک «سطحِ برجستهی گرد» روی پسزمینه مینشیند (عمقِ flat — ظریف، تا
* اگر داخلِ کارت هم بود سنگین نشود)؛ سرستون یک باندِ بالاتر با سایهی زیرین است؛ ردیف
* هنگامِ hover با نوارِ لهجهی برند (سمتِ شروع، RTL-aware) «بالا» دیده میشود.
* ════════════════════════════════════════════════════════════════════ */
.clinic-table {
box-shadow: var(--clinic-elev-flat, var(--clinic-shadow-xs));
border-radius: var(--radius-lg, 12px);
overflow: hidden;
background: var(--clinic-bg-primary);
}
.clinic-table thead {
box-shadow: 0 2px 4px rgba(var(--clinic-elev-shadow-color, 31, 21, 53), 0.08);
position: relative;
z-index: var(--clinic-z-base, 1);
}
.clinic-table tbody tr {
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* نوارِ لهجهی سمتِ شروع (راست در RTL) هنگامِ hover/فعال — نشانهی بُعدیِ ردیفِ فعال.
* STEP 161 — رفعِ باگ: لهجه فقط روی **سلولِ شروعِ** ردیف (`td:first-child`) مینشیند، نه
* روی همهی سلولها؛ پیشتر `... tr:hover td` به هر `td` یک نوارِ ۳px روی لبهی داخلی
* میداد ⇒ خطوطِ عمودیِ پراکنده روی همهی ستونهای ردیف (بهجای یک نوارِ تمیزِ شروع).
* فقط ردیفِ hover/فعال؛ پسزمینهی hover (قاعدهی جدا) دستنخورده. RTL-safe. */
.clinic-table tbody tr:hover td:first-child,
.clinic-table tbody tr.is-active td:first-child,
.clinic-table tbody tr.is-selected td:first-child,
.clinic-table tbody tr[aria-selected="true"] td:first-child {
box-shadow: inset -3px 0 0 0 var(--clinic-primary-400, #A684FF);
}
body.clinic-ltr .clinic-table tbody tr:hover td:first-child,
body.clinic-ltr .clinic-table tbody tr.is-active td:first-child,
body.clinic-ltr .clinic-table tbody tr.is-selected td:first-child,
body.clinic-ltr .clinic-table tbody tr[aria-selected="true"] td:first-child {
box-shadow: inset 3px 0 0 0 var(--clinic-primary-400, #A684FF);
}
/* ==== badges-v2.css (verbatim) ==== */
/**
* Design System v2 — Badges (نسخه 1.3.0)
*
* بهبود .clinic-badge موجود و گونههای BEM آن (--on/--off/--core) + افزودن
* گونههای معناییِ جدید تکخطی (.clinic-badge-primary/success/warning/error/info)
* و .clinic-status-badge موجود. سازگار کامل با نشانهای فعلی.
*
* @package Clinic_Manager
*/
.clinic-badge {
display: inline-flex;
align-items: center;
gap: var( --clinic-space-2 );
padding: 3px var( --clinic-space-5 );
border-radius: var(--clinic-radius-pill, 999px);
font-size: var(--fs-xs, 12px);
font-weight: var(--fw-semibold, 600);
line-height: 1.6;
background: var(--clinic-gray-100);
color: var(--clinic-gray-700);
white-space: nowrap;
}
/* گونههای BEM موجود */
.clinic-badge--on {
background: var(--clinic-success-100);
color: var(--clinic-success-700);
}
.clinic-badge--off {
background: var(--clinic-gray-200);
color: var(--clinic-gray-600);
}
.clinic-badge--core {
background: var(--clinic-primary-100);
color: var(--clinic-primary-800);
}
/* STEP 93 — نشانِ «مهمان» (پاسخِ فرمِ عمومیِ بدونِ پرونده). رنگِ انسانی/مرجانیِ پالت. */
.clinic-badge--guest {
background: var(--clinic-warning-100, #FBE9E9);
color: var(--clinic-warning-700, #B45454);
margin-inline-start: var( --clinic-space-3 );
}
/* گونههای معنایی جدید */
.clinic-badge-primary {
background: var(--clinic-primary-100);
color: var(--clinic-primary-800);
}
.clinic-badge-success {
background: var(--clinic-success-100);
color: var(--clinic-success-700);
}
.clinic-badge-warning {
background: var(--clinic-warning-100);
color: var(--clinic-warning-700);
}
.clinic-badge-error {
background: var(--clinic-error-100);
color: var(--clinic-error-700);
}
.clinic-badge-info {
background: var(--clinic-info-100);
color: var(--clinic-info-700, #0369A1); /* STEP 109: AA رویِ info-100 (۶۰۰ فقط ۳٫۵۷:۱ بود) */
}
/* نشانِ شمارنده (مثلاً اعلانها) */
.clinic-badge-count {
min-width: 18px;
height: 18px;
padding: 0 5px;
justify-content: center;
background: var(--clinic-error);
color: var( --clinic-text-inverse );
font-size: 11px;
}
/* status-badge موجود (داشبورد) */
.clinic-status-badge {
display: inline-flex;
align-items: center;
gap: var( --clinic-space-3 );
padding: var( --clinic-space-2 ) var( --clinic-space-6 );
border-radius: var(--clinic-radius-pill, 999px);
font-size: var(--fs-xs, 12px);
font-weight: var(--fw-semibold, 600);
background: var(--clinic-gray-100);
color: var(--clinic-gray-700);
}
.clinic-status--active {
background: var(--clinic-success-100);
color: var(--clinic-success-700);
}
.clinic-status--warning {
background: var(--clinic-warning-100);
color: var(--clinic-warning-700);
}
.clinic-status--error {
background: var(--clinic-error-100);
color: var(--clinic-error-700);
}
/* ════════════════════════════════════════════════════════════════════
* STEP 223-B — نقشِ برچسب: **بدونِ سایه در هیچ حالتی**.
*
* موکاپ (خطِ ۱۴۹ برای `.clinic-badge` و خطِ ۱۵۷ برای `.clinic-chip`) هیچ
* سایهای ندارد؛ برچسب با **پسزمینه و رنگِ متن** از زمینه جدا میشود، نه با
* عمق. بلوکِ لایهبندیِ بُعدیِ STEP 155 و بالاآمدنِ hover هر دو برداشته شدند.
* ════════════════════════════════════════════════════════════════════ */
.clinic-badge,
.clinic-status-badge,
.clinic-badge-count {
box-shadow: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.clinic-badge,
button.clinic-badge,
.clinic-badge[role="button"],
a.clinic-status-badge {
cursor: pointer;
}
/* STEP 223-B — نشانِ تعاملی هم بدونِ سایه و بدونِ بالاآمدن. حسِ تعامل از
* `cursor: pointer` (قاعدهی بالا) و تغییرِ رنگ میآید. */
a.clinic-badge:hover,
button.clinic-badge:hover,
.clinic-badge[role="button"]:hover,
a.clinic-status-badge:hover {
box-shadow: none;
}
/* ==== search-fields.css (verbatim) ==== */
/**
* Design System v2 — Search fields with icon (نسخه 1.3.1)
*
* آیکن ذرهبینِ درونخط (data-URI، بدون منبع بیرونی) روی فیلدهای جستجو. RTL: آیکن
* سمت راست و فاصلهی متن از راست. فقط کلاسمحور و داخل کانتینر پلاگین.
*
* @package Clinic_Manager
*/
.clinic-wrap input[type="search"].clinic-input,
.clinic-wrap .clinic-search-main,
.clinic-wrap .clinic-search-input,
.clinic-wrap .clinic-search-form .clinic-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var( --clinic-space-20 );
border-radius: 10px;
min-width: 90% !important;
}
/* در حالت LTR آیکن به چپ منتقل میشود. */
body.clinic-ltr .clinic-wrap input[type="search"].clinic-input,
body.clinic-ltr .clinic-wrap .clinic-search-main,
body.clinic-ltr .clinic-wrap .clinic-search-input {
background-position: left 12px center;
padding-right: var( --clinic-space-7 );
padding-left: var( --clinic-space-20 );
}
/* فرم جستجوی عمومی با آیکنِ معنایی قابلتنظیم از طریق متغیر. */
.clinic-wrap .clinic-search-form {
position: relative;
display: flex;
gap: var(--spacing-2, 8px);
align-items: center;
}
/* حالت بارگذاری (اسپینر کوچک کنار فیلد) */
.clinic-wrap .clinic-search-form.is-loading::after {
content: '';
position: absolute;
left: var( --clinic-space-7 );
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
border: 2px solid var(--clinic-gray-300);
border-top-color: var(--clinic-primary);
border-radius: 50%;
animation: clinicSpin 0.6s linear infinite;
}
/* ════════════════════════════════════════════════════════════════════════════
* STEP 223-B — عمقِ بُعدیِ فیلدهای جستجو (STEP 155) حذف شد.
*
* این قاعده تخصصِ ۰،۲،۰ داشت و بر قاعدهی پایهی فیلد غلبه میکرد، پس تا وقتی
* حذف نمیشد، حذفِ سایه در forms-v2.css روی فیلدهای جستجو **اثری نداشت**.
* حالتِ focus از همان قاعدهی outlineِ مشترک میآید (فیلدهای جستجو کلاسِ
* `.clinic-input` را هم دارند)، پس نشانهی فوکوس از دست نمیرود.
* ──────────────────────────────────────────────────────────────────────────── */
.clinic-wrap .clinic-search-main,
.clinic-wrap .clinic-search-input {
box-shadow: none;
}
.clinic-wrap .clinic-search-main:focus,
.clinic-wrap .clinic-search-input:focus {
outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
outline-offset: var(--clinic-field-focus-offset, 1px);
box-shadow: none;
}