:root {
/* Layout & sizing */
--container-max: 72rem; /* ~1152px */
--auth-max: 420px;
--radius: 12px;
/* Elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
--shadow-lg: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.12);
/* Z-index */
--z-sticky: 100;
--z-overlay: 1100;
--z-toast: 1200;
/* Safe areas */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
/* Surfaces & borders */
--bg-page: #f6f7fb;
--bg-surface: #ffffff;
--bg-card: #ffffff;
--border-color: rgba(15,23,42,0.10);
--border: 1px solid var(--border-color);
/* Typography & color */
--text: #111827; /* slate-900 */
--muted: #6b7280; /* gray-500 */
/* Focus */
--focus-color: #2563eb; /* blue-600 */
--focus: 2px solid var(--focus-color);
--focus-ring: 0 0 0 3px rgba(37,99,235,.35);
/* Brand & states */
--accent: #2563eb;
--accent-contrast: #ffffff;
--danger: #ef4444;
--danger-contrast: #ffffff;
/* Spacing */
--gap-xs: .25rem;
--gap-sm: .5rem;
--gap-md: .75rem;
--gap-lg: 1rem;
--gap-xl: 1.5rem;
/* Controls */
--control-height: 40px;
/* Card paddings */
--card-pad: clamp(16px, 2.5vw, 24px);
--card-pad-x: 1.1rem;
--card-pad-y: .9rem;
/* A4 geometry */
--a4-w: 210mm;
--a4-h: 297mm;
--a4-m: 15mm;
--a4-content-pad: 15mm;
/* Unified Card tokens (used by card.css) */
--card-bg-token: var(--bg-card);
--card-fg-token: var(--text);
--card-border-token: var(--border);
--card-shadow-token: var(--shadow-sm);
--card-header-bg: transparent;
--card-footer-bg: transparent;
--card-accent: var(--accent);
--card-skeleton-1: #eceff3;
--card-skeleton-2: #f5f7fb;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg-page: #0f1115;
--bg-surface: #12151b;
--bg-card: #161a22;
--text: #e8eaee;
--muted: #9ca3af;
--border-color: rgba(255,255,255,.09);
--border: 1px solid var(--border-color);
--shadow-sm: 0 1px 2px rgba(0,0,0,.25);
--shadow-lg: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.55);
--card-skeleton-1: #1e232b;
--card-skeleton-2: #2a3240;
}
}
/* ==============================
Base
============================== */
html, body {
margin: 0;
padding: 0;
color: var(--text);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body, button, input, select, textarea {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Naskh Arabic", "Cairo", "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
font-size: 14px;
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
}
hr {
border: 0;
border-top: var(--border);
margin: var(--gap-lg) 0;
}
/* Accessible global focus */
:focus-visible {
outline: var(--focus);
outline-offset: 2px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==============================
Utilities
============================== */
.text-start {
text-align: start !important;
}
.text-end {
text-align: end !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: .25rem !important;
}
.mb-2 {
margin-bottom: .5rem !important;
}
.mb-3 {
margin-bottom: .75rem !important;
}
.mb-4 {
margin-bottom: 1rem !important;
}
.button-row,
.form-actions {
display: flex;
gap: .5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container--mt-lg {
margin-top: 2rem;
}
.container--wide {
--container-max: 84rem;
}
/* Print helpers */
.no-print {
}
.print-only {
display: none !important;
}
.page-break-before {
break-before: page;
}
.page-break-after {
break-after: page;
}
.avoid-break-inside {
break-inside: avoid;
}
/* Base & Typography (fonts loaded in App.razor head) */
html, body {
margin: 0;
padding: 0;
color: var(--text);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body, button, input, select, textarea {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Naskh Arabic", "Cairo", "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
font-size: 14px;
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
}
hr {
border: 0;
border-top: var(--border);
margin: var(--gap-lg) 0;
}
:focus-visible {
outline: var(--focus);
outline-offset: 2px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Alignment */
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-start {
text-align: start !important;
}
.text-end {
text-align: end !important;
}
/* Gap utilities (for flex/grid parents) */
.gap-xs {
gap: var(--gap-xs);
}
.gap-sm {
gap: var(--gap-sm);
}
.gap-md {
gap: var(--gap-md);
}
.gap-lg {
gap: var(--gap-lg);
}
.gap-xl {
gap: var(--gap-xl);
}
/* Margin helpers */
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: .25rem !important;
}
.mb-2 {
margin-bottom: .5rem !important;
}
.mb-3 {
margin-bottom: .75rem !important;
}
.mb-4 {
margin-bottom: 1rem !important;
}
/* Single-line clamp */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Print helpers */
.no-print {
}
.print-only {
display: none !important;
}
.page-break-before {
break-before: page;
}
.page-break-after {
break-after: page;
}
.avoid-break-inside {
break-inside: avoid;
}
/* Button rows / shared actions */
.button-row, .form-actions {
display: flex;
gap: .5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* Padding helpers */
.p-16 {
padding: 16px !important;
}
.p-20 {
padding: 20px !important;
}
.p-24 {
padding: 24px !important;
}
/* Inputs */
input, select, textarea {
display: block;
width: 100%;
min-height: var(--control-height);
border: var(--border);
border-radius: 10px;
padding: .5rem .75rem;
background: var(--bg-surface);
color: inherit;
line-height: 1.5;
box-sizing: border-box;
}
/* Bootstrap wrappers */
.form-control, .form-select, textarea.form-control {
width: 100%;
min-height: var(--control-height);
line-height: 1.5;
border-radius: 10px;
box-sizing: border-box;
}
/* Radzen text-like */
.rz-inputtext, .rz-textarea {
width: 100%;
min-height: var(--control-height);
line-height: calc(var(--control-height) - 2px);
border-radius: 10px;
box-sizing: border-box;
}
.rz-dropdown, .rz-datepicker, .rz-dateinput {
width: 100%;
min-width: 0;
}
/* Focus halo */
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus,
.rz-inputtext:focus, .rz-textarea:focus {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--focus-ring);
border-color: color-mix(in srgb, var(--focus-color), #ffffff 35%);
}
/* Textareas */
textarea, .rz-textarea {
resize: vertical;
min-height: 44px;
}
/* Readonly/disabled */
input[readonly], textarea[readonly], select[disabled],
.form-control[readonly], .form-select[disabled] {
background: #fafafa;
color: #555;
}
@media (prefers-color-scheme: dark) {
input[readonly], textarea[readonly], select[disabled],
.form-control[readonly], .form-select[disabled] {
background: #0f1115;
color: var(--muted);
}
}
/* Grids */
.form-grid {
display: grid;
gap: .75rem;
grid-template-columns: 1fr;
}
@media (min-width:768px) {
.form-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
.form-grid-autofit {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.form-grid > * {
min-width: 0;
}
.form-grid > * :where(input, textarea, select, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-dateinput) {
width: 100%;
}
/* Field blocks */
.field-container {
display: block;
inline-size: 100%;
min-inline-size: 0;
}
.field-label {
display: block;
inline-size: 100%;
text-align: start;
margin-block-end: .25rem;
font-weight: 600;
}
.field-input,
.field-container :where(input, textarea, select, .form-control, .form-select, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-dateinput) {
width: 100%;
box-sizing: border-box;
}
.overlay__field-label {
color: var(--muted);
}
.field-hint {
color: var(--muted);
font-size: .85rem;
margin-top: .25rem;
}
.field-error {
color: var(--danger);
font-size: .85rem;
margin-top: .25rem;
}
/* Actions */
.button-row {
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.rz-data-grid .button-row, .rz-datatable .button-row {
justify-content: flex-start;
gap: .4rem;
}
/* Radzen Upload */
.rz-upload, .rz-fileupload {
width: 100%;
}
.rz-upload .rz-fileupload-buttonbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .25rem 0;
border: 0;
}
.rz-upload .rz-button {
min-height: var(--control-height);
border-radius: 10px;
}
/* Tabs & progress */
.rz-tabview .rz-tabview-panels {
padding: .75rem 0;
}
.rz-tabview .rz-tabview-panel > *:first-child {
margin-top: 0;
}
.rz-progressbar {
width: 100%;
}
/* Compact dropdown (tf-dd) */
.tf-dd {
--tf-trigger: 2.1rem;
--tf-clear-gap: .2rem;
}
.tf-dd.rz-dropdown {
width: 100%;
min-width: 0;
min-height: var(--control-height);
display: flex;
align-items: stretch;
padding: 0 !important;
}
.tf-dd .rz-dropdown-label, .tf-dd .rz-placeholder {
display: flex !important;
align-items: center !important;
justify-content: flex-start;
min-height: var(--control-height);
line-height: calc(var(--control-height) - 2px);
padding: 0 !important;
padding-inline-start: .4rem !important;
padding-inline-end: var(--tf-trigger) !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tf-dd:has(.rz-clear) .rz-dropdown-label,
.tf-dd:has(.rz-clear) .rz-placeholder {
padding-inline-end: calc(var(--tf-trigger)+var(--tf-clear-gap)+var(--tf-trigger)) !important;
}
.tf-dd .rz-dropdown-trigger {
width: var(--tf-trigger);
min-width: var(--tf-trigger);
flex: 0 0 var(--tf-trigger);
display: grid;
place-items: center;
padding: 0 !important;
}
.tf-dd .rz-clear {
width: var(--tf-trigger);
min-width: var(--tf-trigger);
height: var(--control-height);
display: grid;
place-items: center;
inset-inline-end: var(--tf-trigger);
margin: 0 !important;
padding: 0 !important;
}
.tf-dd.rz-state-focus {
outline: var(--focus);
outline-offset: 2px;
border-radius: 8px;
}
/* RTL for tf-dd */
[dir="rtl"] .tf-dd .rz-dropdown-label, [dir="rtl"] .tf-dd .rz-placeholder {
padding-inline-start: var(--tf-trigger) !important;
padding-inline-end: .4rem !important;
}
[dir="rtl"] .tf-dd:has(.rz-clear) .rz-dropdown-label,
[dir="rtl"] .tf-dd:has(.rz-clear) .rz-placeholder {
padding-inline-start: calc(var(--tf-trigger)+var(--tf-clear-gap)+var(--tf-trigger)) !important;
padding-inline-end: .4rem !important;
}
/* Interactive focus ring for buttons */
button:focus-visible, [role="button"]:focus-visible, .rz-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
/* Global helper for grid action columns */
.grid-actions-cell {
text-align: center !important; /* center the cell content */
}
.grid-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
width: 100%;
}
/* Checkbox row */
.checkbox-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
margin: 0.25rem 0;
user-select: none;
}
.checkbox-row__box {
flex-shrink: 0;
}
.checkbox-row__label {
font-size: 0.95rem;
line-height: 1.2;
cursor: pointer;
transition: color 0.2s ease;
}
.checkbox-row:hover .checkbox-row__label {
color: var(--focus-color, var(--rz-primary, #0078d4));
}
.checkbox-row[disabled],
.checkbox-row__label[disabled],
.checkbox-row__label.readonly {
opacity: 0.6;
cursor: not-allowed;
}
/* ✅ RTL alignment fix — keep checkbox before label */
[dir="rtl"] .checkbox-row {
flex-direction: row; /* keep same order as LTR */
justify-content: flex-end; /* align to right side */
text-align: right;
}
/* ====================== */
/* Client summary strip   */
/* ====================== */
.client-summary {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--border-subtle, #e0e0e0);
background: var(--bg-subtle, #f8fafc);
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02);
margin-bottom: 0.75rem;
}
/* icon circle */
.client-summary-icon {
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
background: rgba(59, 130, 246, 0.10); /* slightly stronger blue */
}
/* text block */
.client-summary-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
/* 🔹 More visible section label */
.client-summary-title {
font-size: 0.9rem; /* larger */
font-weight: 800; /* extra bold */
letter-spacing: 0.04em;
text-transform: uppercase;
color: #1e293b; /* darker */
}
/* meta line (birthdate / age / session #) */
.client-summary-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.25rem;
}
/* 🔹 Stronger pill badges */
.summary-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: #e2e8f0; /* slate-200 */
border: 1px solid #cbd5e1; /* slate-300 */
font-size: 0.8rem;
}
/* 🔹 Stronger label/value inside pill */
.summary-pill-label {
font-weight: 700;
color: #334155; /* slate-700 */
}
.summary-pill-value {
font-weight: 600;
color: #0f172a; /* slate-900 */
}
/* Responsive: stack nicely on small screens */
@media (max-width: 640px) {
.client-summary {
flex-direction: row;
align-items: flex-start;
}
.client-summary-main {
align-items: flex-start;
}
.client-summary-meta {
width: 100%;
}
}
/* ==============================
Containers & Page Layout
============================== */
.form-container {
width: min(100%, var(--container-max));
margin-inline: auto;
margin-block: 2rem 0;
padding: 0;
box-sizing: border-box;
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.page-container {
width: min(100%, var(--container-max));
margin-inline: auto;
padding: 0;
box-sizing: border-box;
}
/* Inner wrapper used in many pages */
.card-inner {
padding-inline: var(--card-pad-x);
padding-block: var(--card-pad-y);
}
/* Make forms inside containers not double-shadow */
.form-container .form-card {
box-shadow: none;
}
/* ==============================
App Shell
============================== */
.app-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.app-shell main {
flex: 1;
}
.app-shell .top-row {
background: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
display: flex;
align-items: center;
justify-content: space-between;
height: 3.5rem;
padding-inline: 1.5rem;
z-index: var(--z-sticky);
}
.app-shell .sidebar {
background-image: linear-gradient(180deg, rgb(5,39,103) 0%, #3a0647 70%);
}
@media (min-width: 641px) {
.app-shell .sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.app-shell .top-row,
.app-shell article {
padding-inline-start: 1.5rem !important;
padding-inline-end: 2rem !important;
}
}
/* Seamless page variant (no card shadow) */
.app-shell.page--seamless,
.app-shell.page--seamless main {
background: var(--bg-card);
}
.app-shell.page--seamless .form-container {
box-shadow: none;
border-radius: 0;
}
.app-shell.page--seamless .form-card {
border-radius: 0;
padding-inline: max(clamp(16px, 5vw, 32px), var(--safe-left));
padding-inline-end: max(clamp(16px, 5vw, 32px), var(--safe-right));
}
/* ==============================
A4 Screen Preview & Print
============================== */
.a4-container {
flex: 0 0 auto;
inline-size: calc(210mm * 1.08);
max-inline-size: none;
min-block-size: calc(297mm * 1.08);
margin-inline: auto;
margin-block: 8px;
background: #ffffff;
border: none;
box-shadow: var(--shadow-sm), 0 12px 32px rgba(0,0,0,.12);
padding: 0;
box-sizing: border-box;
}
.a4-container.a4-landscape {
inline-size: calc(297mm * 1.08);
min-block-size: calc(210mm * 1.08);
}
/* Visible page layer */
.a4-card {
inline-size: 100%;
max-width: none !important;
margin: 0;
padding: clamp(6mm, 1.6vw, 9mm);
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0;
box-sizing: border-box;
}
.a4-card img,
.a4-card table,
.a4-card pre,
.a4-card code,
.a4-card .avoid-break-inside {
break-inside: avoid;
}
/* Inner Radzen card inside A4 */
.rz-card.a4-card {
padding: clamp(10px, 1.25rem, 16px);
}
/* Wrapper from Razor page */
.a4-pad {
padding: 0;
}
/* If a parent adds side padding */
.a4-container.fix-parent-padding {
margin-inline: 0;
}
/* Template/Procedure grid variant */
.a4-container.template-grid {
inline-size: calc(210mm * 1.08 + 60px);
}
.a4-card.template-grid {
padding: clamp(10mm, 1.6vw, 12mm);
overflow: visible;
}
/* ==============================
Mobile tweaks
============================== */
@media (max-width: 640px) {
.form-card {
padding: 16px;
}
.card-inner {
padding-inline: .75rem;
}
}
/* ==============================
Global button focus (for Radzen + native)
============================== */
button:focus-visible,
[role="button"]:focus-visible,
.rz-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
/* ==============================
Print
============================== */
@media print {
@page {
size: A4 portrait;
margin: 8mm;
}
.a4-container {
margin: 0 !important;
box-shadow: none !important;
inline-size: auto;
min-block-size: auto;
}
.no-print {
display: none !important;
}
.print-only {
display: block !important;
}
}
.overlay {
position: fixed;
inset: 0;
/* bump above common frameworks (toasts/modals/headers) */
z-index: 100000; /* was 1100 */
display: flex;
align-items: center;
justify-content: center;
padding: max(clamp(8px,3vw,24px),env(safe-area-inset-top)) max(clamp(8px,3vw,24px),env(safe-area-inset-right)) max(clamp(8px,3vw,24px),env(safe-area-inset-bottom)) max(clamp(8px,3vw,24px),env(safe-area-inset-left));
/* ensure overlay receives clicks even if a parent sets pointer-events:none */
pointer-events: auto;
}
.overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.35);
transition: opacity .18s ease;
/* make sure backdrop actually blocks clicks to page behind */
pointer-events: auto;
}
.overlay__card {
position: relative;
display: flex;
flex-direction: column;
color: var(--text, #111); /* fallback added */
background: var(--bg-card, #fff); /* fallback added */
border: var(--border, 1px solid var(--border-color, rgba(0,0,0,.12))); /* fallback added */
border-radius: var(--overlay-radius, var(--radius, 12px)); /* fallback added */
box-shadow: var(--overlay-shadow, 0 10px 30px rgba(0,0,0,.25)); /* fallback added */
overflow: auto;
width: var(--overlay-width, min(900px,92vw));
min-width: var(--overlay-min-width, min(320px,92vw));
max-height: var(--overlay-max-height, 88vh);
transform: translateY(0);
transition: transform .2s ease, opacity .2s ease;
}
.overlay__header, .overlay__footer {
display: flex;
align-items: center;
gap: var(--gap-sm, .5rem); /* fallback added */
padding: .75rem 1rem;
background: transparent;
}
.overlay__header {
justify-content: space-between;
border-bottom: 1px solid var(--border-color, rgba(0,0,0,.12)); /* fallback added */
}
.overlay__footer {
justify-content: flex-end;
border-top: 1px solid var(--border-color, rgba(0,0,0,.12)); /* fallback added */
}
.overlay__title {
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
}
.overlay__body {
padding: 1rem;
overflow: auto;
}
.overlay__close {
border: 0;
background: transparent;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
color: var(--text, #111); /* fallback added */
padding: .25rem .4rem;
border-radius: 8px;
}
.overlay__close:hover {
background: rgba(0,0,0,.06);
}
.overlay__close:focus-visible {
outline: var(--focus, 2px solid #2563eb); /* fallback added */
outline-offset: 2px;
}
.overlay--sm {
--overlay-width: min(480px,92vw);
--overlay-min-width: min(320px,92vw);
}
.overlay--md {
--overlay-width: min(900px,92vw);
--overlay-min-width: min(480px,92vw);
}
.overlay--lg {
--overlay-width: min(1100px,96vw);
--overlay-min-width: min(680px,96vw);
}
.overlay--full {
--overlay-width: 100vw;
--overlay-min-width: 100vw;
--overlay-max-height: 100vh;
--overlay-radius: 0;
--overlay-shadow: none;
}
.overlay--no-backdrop .overlay__backdrop {
display: none;
}
@media (prefers-reduced-motion:reduce) {
.overlay__backdrop, .overlay__card {
transition: none !important;
}
}
@media print {
.overlay {
display: none !important;
}
}
/* Dialog density */
.rz-dialog, .rz-dialog-content, .rz-dialog-container {
padding: .3rem !important;
margin: 0 !important;
}
.rz-dialog .rz-dialog-content {
gap: var(--gap-md);
}
/* Buttons */
.rz-button {
border-radius: 10px;
}
/* Data grids / toolbars */
.rz-datatable, .rz-data-grid {
--rz-grid-padding: .5rem;
}
.rz-datatable .rz-datatable-header, .rz-data-grid .rz-data-grid-header {
padding: var(--gap-sm);
}
.rz-datatable .rz-datatable-data > tr > td, .rz-data-grid .rz-data-grid-data > tr > td {
padding: .4rem .5rem;
}
.rz-toolbar {
gap: var(--gap-sm);
padding: var(--gap-sm);
}
/* Form field width normalization */
.rz-form-field, .rz-form-field .rz-form-field-content {
width: 100%;
}
/* Compact dropdown wrapper (tf-dd) */
.tf-dd {
--tf-trigger: 2.1rem;
--tf-clear-gap: .2rem;
}
.tf-dd.rz-dropdown {
width: 100%;
min-width: 0;
min-height: var(--control-height);
display: flex;
align-items: stretch;
padding: 0 !important;
}
.tf-dd .rz-dropdown-label, .tf-dd .rz-placeholder {
display: flex !important;
align-items: center !important;
justify-content: flex-start;
min-height: var(--control-height);
line-height: calc(var(--control-height) - 2px);
padding: 0 !important;
padding-inline-start: .4rem !important;
padding-inline-end: var(--tf-trigger) !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tf-dd:has(.rz-clear) .rz-dropdown-label,
.tf-dd:has(.rz-clear) .rz-placeholder {
padding-inline-end: calc(var(--tf-trigger) + var(--tf-clear-gap) + var(--tf-trigger)) !important;
}
.tf-dd .rz-dropdown-trigger {
width: var(--tf-trigger);
min-width: var(--tf-trigger);
flex: 0 0 var(--tf-trigger);
display: grid;
place-items: center;
padding: 0 !important;
}
.tf-dd .rz-clear {
width: var(--tf-trigger);
min-width: var(--tf-trigger);
height: var(--control-height);
display: grid;
place-items: center;
inset-inline-end: var(--tf-trigger);
margin: 0 !important;
padding: 0 !important;
}
.tf-dd .rz-inputtext, .tf-dd .rz-dropdown-filter .rz-inputtext {
height: var(--control-height);
line-height: calc(var(--control-height) - 2px);
padding-block: 0;
padding-inline: .4rem;
}
.tf-dd.rz-state-focus {
outline: var(--focus);
outline-offset: 2px;
border-radius: 8px;
}
.tf-dd.rz-state-disabled, .tf-dd .rz-state-disabled {
opacity: .65;
cursor: not-allowed;
}
/* RTL mirroring for tf-dd */
[dir="rtl"] .tf-dd .rz-dropdown-label, [dir="rtl"] .tf-dd .rz-placeholder {
padding-inline-start: var(--tf-trigger) !important;
padding-inline-end: .4rem !important;
}
[dir="rtl"] .tf-dd:has(.rz-clear) .rz-dropdown-label,
[dir="rtl"] .tf-dd:has(.rz-clear) .rz-placeholder {
padding-inline-start: calc(var(--tf-trigger) + var(--tf-clear-gap) + var(--tf-trigger)) !important;
padding-inline-end: .4rem !important;
}
/* ==============================
template-grid.css — Template/Procedure Grid Components
Depends on layout.css design tokens
============================== */
/* -----------------------------
Grid Container Structure
------------------------------ */
.template-grid-container {
width: 100%;
max-width: calc(max(var(--a4-w-mm), var(--a4-w-px)) * var(--a4-scale) + 60px);
margin: 0 auto;
box-sizing: border-box;
}
.column-row-container {
display: flex;
width: 100%;
align-items: flex-start;
margin-bottom: 8px;
gap: 0;
}
/* Remove button positioned outside grid */
.row-remove-button-container {
flex: 0 0 60px;
min-width: 60px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 8px;
}
.row-remove-button {
width: 30px;
height: 30px;
border: var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--danger);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.2s ease;
}
.row-remove-button:hover {
background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
transform: scale(1.05);
}
.row-remove-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* -----------------------------
Grid Layout Components
------------------------------ */
.resizer-header.flex,
.column-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
box-sizing: border-box;
}
/* Header with constrained width */
.resizer-header.flex {
align-items: stretch;
height: 30px;
background: var(--bg-card);
border-bottom: var(--border);
position: sticky;
top: 0;
z-index: var(--z-sticky);
max-width: calc(max(var(--a4-w-mm), var(--a4-w-px)) * var(--a4-scale));
margin: 0 auto;
overflow: hidden;
}
/* Row takes full A4 width */
.column-row {
flex: 1;
min-width: 0;
max-width: calc(max(var(--a4-w-mm), var(--a4-w-px)) * var(--a4-scale));
}
.column-header-input {
font-weight: bold;
text-align: center !important;
font-family: inherit;
font-size: inherit;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px;
appearance: none;
}
.column-header-input::placeholder {
text-align: center;
opacity: 0.7;
}
/* Header columns */
.resizer-header.flex .resizer-space {
display: inline-block;
height: 30px;
border-right: 1px dashed color-mix(in srgb, var(--text) 20%, transparent);
transition: width .12s ease;
flex: 0 0 auto;
min-width: 50px;
box-sizing: border-box;
overflow: hidden;
}
.resizer-header.flex .resizer-space:last-child {
border-right: 0;
}
/* Column resizer handles */
.column-resizer {
width: 10px;
margin: 0 -5px;
cursor: col-resize;
position: relative;
z-index: 10;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
touch-action: none;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
background: transparent;
flex-shrink: 0;
}
.column-resizer:hover {
background: color-mix(in srgb, var(--text) 8%, transparent);
border-left-color: color-mix(in srgb, var(--text) 60%, transparent);
border-right-color: color-mix(in srgb, var(--text) 60%, transparent);
}
.resizer-icon {
font-size: 12px;
opacity: .7;
pointer-events: none;
color: var(--text);
}
.column-resizer:hover .resizer-icon {
opacity: 1;
}
/* Textarea cells */
.textarea-wrapper {
flex: 0 0 auto !important;
min-width: 50px;
box-sizing: border-box;
padding: 0;
border-right: var(--border);
overflow: hidden;
}
.textarea-wrapper:last-child {
border-right: 0;
}
/* Textareas */
.textarea-wrapper textarea {
width: 100% !important;
display: block;
border: var(--border) !important;
border-radius: var(--radius);
outline: 0;
background: var(--bg-card);
padding: var(--gap-sm) var(--gap-md);
line-height: 1.5;
min-height: 40px;
resize: none;
overflow: hidden;
height: auto;
box-sizing: border-box;
min-width: 50px;
color: var(--text);
font-family: inherit;
}
.textarea-wrapper textarea:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Column header inputs */
.column-header-input {
border: var(--border);
border-radius: var(--radius);
padding: var(--gap-sm) var(--gap-md);
text-align: center;
font-weight: 600;
background: color-mix(in srgb, var(--text) 4%, var(--bg-card));
min-width: 50px;
box-sizing: border-box;
color: var(--text);
font-family: inherit;
}
.column-header-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.column-header-input:read-only {
background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
color: var(--muted);
}
/* -----------------------------
Grid Behavior & Interactions
------------------------------ */
/* Direction helpers */
.textarea-english textarea {
direction: ltr;
text-align: left;
}
.textarea-rtl textarea {
direction: rtl;
text-align: right;
}
/* Global drag guide line */
#drag-line {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: color-mix(in srgb, var(--accent) 60%, transparent);
z-index: 2147483647;
display: none;
pointer-events: none;
transform: translateX(0);
}
/* Row hover effect */
.column-row:hover {
background: color-mix(in srgb, var(--text) 3%, var(--bg-card));
}
/* Form grid enhancements */
.form-grid {
display: flex;
gap: var(--gap-lg);
align-items: start;
margin: var(--gap-lg) 0;
flex-wrap: wrap;
}
/* Direction containers */
.ltr-container {
direction: ltr;
text-align: left;
}
.rtl-container {
direction: rtl;
text-align: right;
}
/* -----------------------------
Responsive & Print Adjustments
------------------------------ */
/* Mobile adjustments */
@media (max-width: 640px) {
.resizer-header.flex {
height: 40px;
}
.column-resizer {
height: 40px;
}
.textarea-wrapper textarea {
min-height: 50px;
padding: var(--gap-md);
}
.a4-container.template-grid {
inline-size: 95vw;
}
.template-grid-container {
max-width: 95vw;
}
.row-remove-button-container {
flex: 0 0 50px;
min-width: 50px;
}
.row-remove-button {
width: 35px;
height: 35px;
}
}
/* Print styles */
@media print {
.column-row:hover {
background: transparent !important;
}
.textarea-wrapper textarea {
box-shadow: none !important;
border-color: #ccc !important;
background: transparent !important;
}
.column-resizer {
display: none !important;
}
.resizer-header.flex {
position: static !important;
}
.row-remove-button,
.row-remove-button-container {
display: none !important;
}
}
/* ============================================
report.css — Report Component Styles
Builds upon layout.css design tokens
============================================ */
/* -----------------------------
Report Container & Layout
------------------------------ */
.report-edit-container {
margin-block: var(--gap-xl);
}
.report-content {
display: flex;
flex-direction: column;
gap: var(--gap-lg);
min-height: calc(var(--a4-h-px) - 140px);
}
.report-actions-top {
margin-bottom: var(--gap-lg);
}
/* -----------------------------
Report Fields
------------------------------ */
.report-fields {
display: flex;
flex-direction: column;
gap: var(--gap-md);
margin-bottom: var(--gap-lg);
}
/* Ensure form controls fit A4 width */
.report-fields .rz-textbox,
.report-fields .rz-textarea,
.report-fields .rz-datepicker {
width: 100%;
max-width: 100%;
}
/* -----------------------------
Procedures Section
------------------------------ */
.report-procedures-section {
margin-top: var(--gap-lg);
flex: 1;
}
.report-procedures-actions {
margin-bottom: var(--gap-md);
}
.report-procedures-header {
display: flex;
align-items: center;
gap: var(--gap-sm);
margin-bottom: var(--gap-md);
padding: var(--gap-md);
background: color-mix(in srgb, var(--text) 2%, transparent);
border-radius: var(--radius);
border-bottom: 1px solid var(--border-color);
}
.report-procedures-count {
font-size: 0.875rem;
color: var(--muted);
font-weight: 500;
}
/* Virtualized Procedures Container */
.virtualized-procedures {
max-height: 400px;
overflow-y: auto;
margin-bottom: var(--gap-md);
}
/* Scrollbar styling for virtualized list */
.virtualized-procedures::-webkit-scrollbar {
width: 6px;
}
.virtualized-procedures::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--text) 5%, transparent);
border-radius: 3px;
}
.virtualized-procedures::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text) 30%, transparent);
border-radius: 3px;
}
.virtualized-procedures::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--text) 50%, transparent);
}
/* Report Procedure Items */
.report-procedure-item {
background: var(--bg-card);
border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
border-radius: var(--radius);
padding: var(--gap-md);
margin-bottom: var(--gap-sm);
transition: all 0.2s ease-in-out;
break-inside: avoid;
page-break-inside: avoid;
}
.report-procedure-item:hover {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 2%, transparent);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.report-procedure-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--gap-md);
}
.report-procedure-info {
flex: 1;
min-width: 0;
}
.report-procedure-name {
font-weight: 600;
color: var(--text);
line-height: 1.5;
display: block;
margin-top: var(--gap-xs);
word-wrap: break-word;
overflow-wrap: break-word;
}
.report-procedure-category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
color: var(--muted);
}
.report-procedure-actions {
display: flex;
gap: var(--gap-xs);
flex-shrink: 0;
}
.report-procedure-actions .button-base {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--border-color);
transition: all 0.2s ease;
}
.report-procedure-actions .button-base:hover:not(:disabled) {
border-color: var(--accent);
transform: scale(1.05);
}
/* No Procedures State */
.report-no-procedures {
text-align: center;
padding: var(--gap-xl);
background: color-mix(in srgb, var(--text) 1%, transparent);
border: 2px dashed var(--border-color);
border-radius: var(--radius);
margin: var(--gap-lg) 0;
}
/* -----------------------------
Validation Styles
------------------------------ */
.report-validation-errors {
background: color-mix(in srgb, var(--danger) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
border-radius: var(--radius);
padding: var(--gap-md);
margin-top: var(--gap-lg);
break-inside: avoid;
}
.report-validation-error-item {
display: flex;
align-items: flex-start;
gap: var(--gap-sm);
margin-bottom: var(--gap-xs);
}
.report-validation-error-item:last-child {
margin-bottom: 0;
}
.report-error-icon {
font-size: 0.875rem;
flex-shrink: 0;
margin-top: 1px;
}
.report-error-text {
font-size: 0.875rem;
color: color-mix(in srgb, var(--danger) 90%, black);
line-height: 1.4;
font-weight: 500;
}
/* -----------------------------
Loading & Error States
------------------------------ */
.report-loading-container {
text-align: center;
padding: var(--gap-xl);
background: color-mix(in srgb, var(--text) 1%, transparent);
border-radius: var(--radius);
margin: var(--gap-lg) 0;
}
.report-error-container {
text-align: center;
padding: var(--gap-xl);
background: color-mix(in srgb, var(--danger) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
border-radius: var(--radius);
margin: var(--gap-lg) 0;
}
/* Enhanced skeleton loading for reports */
.card-skeleton .skeleton-line.w-70 {
width: 70%;
}
.card-skeleton .skeleton-line.w-85 {
width: 85%;
}
.card-skeleton .skeleton-line.w-50 {
width: 50%;
}
/* -----------------------------
Animations
------------------------------ */
@keyframes reportSlideIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.report-procedure-item {
animation: reportSlideIn 0.3s ease-out;
}
/* Stagger animation for multiple procedure items */
.report-procedure-item:nth-child(1) {
animation-delay: 0.05s;
}
.report-procedure-item:nth-child(2) {
animation-delay: 0.1s;
}
.report-procedure-item:nth-child(3) {
animation-delay: 0.15s;
}
.report-procedure-item:nth-child(4) {
animation-delay: 0.2s;
}
/* -----------------------------
Responsive Design
------------------------------ */
@media (max-width: 768px) {
.report-edit-container {
margin-block: var(--gap-md);
}
.report-procedure-content {
flex-direction: column;
align-items: stretch;
gap: var(--gap-sm);
}
.report-procedure-actions {
align-self: flex-end;
width: 100%;
justify-content: space-between;
}
.report-procedures-header {
flex-direction: column;
align-items: flex-start;
gap: var(--gap-xs);
}
.report-procedure-item {
padding: var(--gap-sm);
}
.virtualized-procedures {
max-height: 300px;
}
}
@media (max-width: 480px) {
.report-procedure-actions {
justify-content: space-around;
}
.report-procedure-actions .button-base {
flex: 1;
min-width: auto;
}
.report-content {
min-height: auto;
}
}
/* -----------------------------
Print Optimizations
------------------------------ */
@media print {
.report-edit-container {
margin: 0 !important;
box-shadow: none !important;
}
.report-procedure-actions,
.no-print,
.button-row,
.report-actions-top {
display: none !important;
}
.report-procedure-item {
border: 1px solid #ccc !important;
background: transparent !important;
break-inside: avoid;
margin-bottom: 8px;
box-shadow: none !important;
}
.report-procedure-item:hover {
background: transparent !important;
border-color: #ccc !important;
transform: none !important;
}
.report-validation-errors {
background: transparent !important;
border-color: #ccc !important;
}
.card-footer {
display: none !important;
}
.virtualized-procedures {
max-height: none !important;
overflow: visible !important;
}
}
/* -----------------------------
Focus Management
------------------------------ */
.report-procedure-actions .button-base:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 1px;
box-shadow: var(--focus-ring);
}
/* -----------------------------
High Contrast Mode Support
------------------------------ */
@media (prefers-contrast: high) {
.report-procedure-item {
border-width: 2px;
}
.report-validation-errors {
border-width: 2px;
}
.report-error-text {
font-weight: 600;
}
}
/* -----------------------------
Reduced Motion Support
------------------------------ */
@media (prefers-reduced-motion: reduce) {
.report-procedure-item {
animation: none;
transition: none;
}
.report-procedure-item:hover {
transform: none;
}
.report-procedure-actions .button-base:hover {
transform: none;
}
}
/* -----------------------------
RTL Support for Report Components
------------------------------ */
[dir="rtl"] .report-procedures-header {
text-align: right;
}
[dir="rtl"] .report-procedure-content {
text-align: right;
}
[dir="rtl"] .report-procedure-actions {
direction: ltr; /* Keep icons direction consistent */
}
[dir="rtl"] .report-validation-error-item {
text-align: right;
}
/* ============================================
Procedure Selector Styles
============================================ */
/* Procedure Selector Dialog */
.procedure-selector-dialog {
display: flex;
flex-direction: column;
height: 600px;
max-height: 80vh;
gap: var(--gap-md);
}
.procedure-selector-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--gap-md);
border-bottom: 1px solid var(--border-color);
}
.selected-count {
background: var(--accent);
color: var(--accent-contrast);
padding: var(--gap-xs) var(--gap-sm);
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 600;
}
/* Controls */
.procedure-selector-controls {
display: flex;
gap: var(--gap-md);
align-items: flex-end;
}
.search-box {
flex: 1;
}
.filter-controls {
flex: 0 0 200px;
}
/* Content Area */
.procedure-selector-content {
flex: 1;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-card);
position: relative;
}
.procedures-list {
height: 100%;
overflow-y: auto;
padding: var(--gap-sm);
}
/* Enhanced Loading States */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
gap: var(--gap-md);
color: var(--muted);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid color-mix(in srgb, var(--text) 10%, transparent);
border-top: 4px solid var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-state.procedures-loading {
height: 300px;
background: color-mix(in srgb, var(--text) 1%, transparent);
border-radius: var(--radius);
margin: var(--gap-md);
}
/* Procedure Items */
.procedure-item {
display: flex;
align-items: flex-start;
gap: var(--gap-md);
padding: var(--gap-md);
border-bottom: 1px solid var(--border-color);
transition: all 0.2s ease;
cursor: pointer;
background: var(--bg-card);
}
.procedure-item:hover {
background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.procedure-item.selected {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-left: 3px solid var(--accent);
}
.procedure-item:last-child {
border-bottom: none;
}
.procedure-checkbox {
flex-shrink: 0;
margin-top: 2px;
}
.procedure-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--accent);
}
.procedure-checkbox input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.procedure-info {
flex: 1;
cursor: pointer;
min-width: 0;
}
.procedure-name {
font-weight: 600;
color: var(--text);
margin-bottom: var(--gap-xs);
line-height: 1.4;
word-wrap: break-word;
}
.procedure-meta {
display: flex;
gap: var(--gap-md);
align-items: center;
flex-wrap: wrap;
}
.procedure-category {
background: color-mix(in srgb, var(--text) 10%, transparent);
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
color: var(--muted);
font-weight: 500;
}
.procedure-columns {
font-size: 0.875rem;
color: var(--muted);
}
.procedure-description {
font-size: 0.875rem;
color: var(--muted);
font-style: italic;
margin-top: var(--gap-xs);
}
/* Selection Summary */
.selection-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--gap-md);
background: color-mix(in srgb, var(--text) 3%, transparent);
border-radius: var(--radius);
border: 1px solid var(--border-color);
}
.summary-text {
font-weight: 500;
color: var(--text);
}
/* Actions */
.procedure-selector-actions {
display: flex;
justify-content: flex-end;
gap: var(--gap-md);
padding-top: var(--gap-md);
border-top: 1px solid var(--border-color);
}
/* Procedure Dialog Container */
.procedure-dialog-container {
display: flex;
flex-direction: column;
height: 700px;
max-height: 85vh;
gap: var(--gap-md);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--gap-md);
border-bottom: 1px solid var(--border-color);
}
.dialog-header h3 {
margin: 0;
color: var(--text);
}
.selection-info {
display: flex;
align-items: center;
gap: var(--gap-sm);
}
/* Dialog Controls */
.dialog-controls {
display: flex;
gap: var(--gap-md);
align-items: flex-end;
flex-wrap: wrap;
}
.control-group {
display: flex;
gap: var(--gap-sm);
align-items: center;
}
/* Procedures Grid */
.procedures-grid-container {
flex: 1;
overflow: hidden;
background: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border-color);
}
.procedures-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--gap-md);
height: 100%;
overflow-y: auto;
padding: var(--gap-md);
}
/* Procedure Cards */
.procedure-card {
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: var(--gap-md);
transition: all 0.2s ease;
cursor: pointer;
background: var(--bg-card);
position: relative;
}
.procedure-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.procedure-card.card-selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
align-items: flex-start;
gap: var(--gap-sm);
margin-bottom: var(--gap-sm);
}
.procedure-checkbox {
margin-top: 2px;
}
.procedure-title {
flex: 1;
font-weight: 600;
color: var(--text);
cursor: pointer;
line-height: 1.4;
word-wrap: break-word;
}
.card-body {
padding-left: 26px;
}
.category-badge {
background: var(--accent);
color: var(--accent-contrast);
padding: 6px 12px;
border-radius: 14px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
margin-bottom: var(--gap-sm);
}
.procedure-details {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
}
.procedure-columns,
.procedure-header {
font-size: 0.875rem;
color: var(--muted);
}
.procedure-header {
color: var(--success);
font-weight: 500;
}
/* Dialog Footer */
.dialog-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--gap-md);
border-top: 1px solid var(--border-color);
}
.selection-summary {
font-weight: 500;
}
.selection-hint {
font-size: 0.875rem;
color: var(--muted);
margin-left: var(--gap-sm);
}
.dialog-actions {
display: flex;
gap: var(--gap-md);
}
/* No Procedures States */
.no-procedures-found,
.empty-state {
text-align: center;
padding: var(--gap-xl);
color: var(--muted);
background: color-mix(in srgb, var(--text) 2%, transparent);
border-radius: var(--radius);
margin: var(--gap-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-md);
}
/* Enhanced Loading Animation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.loading-pulse {
animation: pulse 2s ease-in-out infinite;
}
/* Disabled States */
.procedure-selector-dialog:has(.loading-state) {
pointer-events: none;
opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 768px) {
.procedure-selector-controls,
.dialog-controls {
flex-direction: column;
align-items: stretch;
gap: var(--gap-sm);
}
.search-box,
.filter-controls {
flex: 1;
}
.procedures-grid {
grid-template-columns: 1fr;
gap: var(--gap-sm);
padding: var(--gap-sm);
}
.dialog-footer {
flex-direction: column;
gap: var(--gap-md);
align-items: stretch;
}
.selection-summary {
text-align: center;
justify-content: center;
}
.procedure-selector-dialog,
.procedure-dialog-container {
height: 500px;
max-height: 70vh;
}
.procedure-item {
padding: var(--gap-sm);
gap: var(--gap-sm);
}
.procedure-meta {
gap: var(--gap-sm);
}
}
@media (max-width: 480px) {
.procedure-selector-header,
.dialog-header {
flex-direction: column;
align-items: flex-start;
gap: var(--gap-sm);
}
.selected-count,
.selection-info {
align-self: flex-end;
}
.procedure-card {
padding: var(--gap-sm);
}
.card-body {
padding-left: 22px;
}
}
/* Enhanced Scrollbars */
.procedures-list::-webkit-scrollbar,
.procedures-grid::-webkit-scrollbar,
.virtualized-procedures-list::-webkit-scrollbar {
width: 8px;
}
.procedures-list::-webkit-scrollbar-track,
.procedures-grid::-webkit-scrollbar-track,
.virtualized-procedures-list::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--text) 5%, transparent);
border-radius: 4px;
}
.procedures-list::-webkit-scrollbar-thumb,
.procedures-grid::-webkit-scrollbar-thumb,
.virtualized-procedures-list::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text) 20%, transparent);
border-radius: 4px;
}
.procedures-list::-webkit-scrollbar-thumb:hover,
.procedures-grid::-webkit-scrollbar-thumb:hover,
.virtualized-procedures-list::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--text) 40%, transparent);
}
/* Focus States for Accessibility */
.procedure-item:focus-within,
.procedure-card:focus-within {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.procedure-checkbox input[type="checkbox"]:focus {
outline: 2px solid var(--focus-color);
outline-offset: 1px;
}
/* -----------------------------
Form Fields Enhancement
------------------------------ */
.form-field {
margin-bottom: var(--gap-md);
}
.field-label {
display: block;
margin-bottom: var(--gap-xs);
font-weight: 600;
color: var(--text);
font-size: 0.875rem;
}
.form-textarea {
width: 100%;
padding: var(--gap-sm);
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text);
font-family: inherit;
font-size: 0.875rem;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
.form-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.form-textarea:read-only {
background: color-mix(in srgb, var(--text) 5%, transparent);
border-color: color-mix(in srgb, var(--text) 20%, transparent);
cursor: not-allowed;
}
.form-textarea:disabled {
background: color-mix(in srgb, var(--text) 3%, transparent);
color: var(--muted);
cursor: not-allowed;
}
/* Ensure consistent styling with TextBoxBase */
.report-fields .form-textarea {
width: 100%;
max-width: 100%;
}
/* Navigation direction (menu container) */
.nav-menu.rtl-container {
direction: rtl;
text-align: right;
padding-right: 1rem;
}
.nav-menu.ltr-container {
direction: ltr;
text-align: left;
padding-left: 1rem;
}
/* App/page direction toggles */
body.rtl-layout, .app-shell.rtl-layout {
direction: rtl;
text-align: right;
font-family: 'Cairo',sans-serif;
}
body.ltr-layout, .app-shell.ltr-layout {
direction: ltr;
text-align: left;
font-family: 'Roboto',sans-serif;
}
/* Inputs alignment only (no sizing) */
body.rtl-layout input, body.rtl-layout textarea, body.rtl-layout select,
.rtl-container input, .rtl-container textarea, .rtl-container select,
.rz-inputtext[dir="rtl"], .rz-textarea[dir="rtl"] {
direction: rtl !important;
text-align: right !important;
}
body.ltr-layout input, body.ltr-layout textarea, body.ltr-layout select,
.ltr-container input, .ltr-container textarea, .ltr-container select,
.rz-inputtext[dir="ltr"], .rz-textarea[dir="ltr"] {
direction: ltr !important;
text-align: left !important;
}
/* Container overrides */
.rtl-container, .ltr-container {
font-size: 16px;
}
.rtl-container {
direction: rtl;
text-align: right;
font-family: 'Cairo',sans-serif;
}
.ltr-container {
direction: ltr;
text-align: left;
font-family: 'Roboto',sans-serif;
}
.rtl-container .form-actions, .ltr-container .form-actions {
display: flex;
gap: 1rem;
justify-content: flex-start;
}