:root {
/* ===========================
Layout & sizing
=========================== */
--container-max: 72rem; /* ~1152px */
--auth-max: 420px; /* login form max width */
--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 scale */
--z-sticky: 100;
--z-overlay: 1100;
--z-toast: 1200;
/* Safe-area insets */
--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; /* app canvas */
--bg-surface: #fff; /* section background */
--bg-card: #fff; /* card background */
--border-color: rgba(0,0,0,.08);
--border: 1px solid var(--border-color);
/* ===========================
Typography & color
=========================== */
--text: #222;
--muted: #6b7280;
--focus: 2px solid #2563eb; /* keyboard focus outline */
/* Accessible semantic colors (NEW) */
--accent: #2563eb;
--accent-contrast: #ffffff;
--danger: #dc2626;
--danger-contrast: #ffffff;
/* ===========================
Spacing scale
=========================== */
--gap-xs: .25rem;
--gap-sm: .5rem;
--gap-md: .75rem;
--gap-lg: 1rem;
--gap-xl: 1.5rem;
/* ===========================
Controls normalization
=========================== */
--control-height: 40px;
/* ===========================
Cards (single source of truth)
=========================== */
--card-pad: 20px; /* global inner padding for cards */
/* ===========================
A4 printing
=========================== */
--a4-w: 210mm;
--a4-h: 297mm;
--a4-m: 15mm; /* print margin */
--a4-content-pad: 15mm; /* screen margin simulation inside card */
}
/* Dark mode scaffold */
@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,.08);
--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);
/* keep accents readable in dark mode */
--accent: #3b82f6;
--accent-contrast: #ffffff;
--danger: #ef4444;
--danger-contrast: #ffffff;
}
}
/* 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;
}
/* ==========================================================
forms.css — inputs, grids, field blocks, actions
(consumes tokens from tokens.css; no layout/card padding here)
========================================================== */
/* ---------- Inputs — native ---------- */
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 controls ---------- */
.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 controls ---------- */
.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; /* allow shrinking in grid tracks */
}
/* ---------- 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: 0 0 0 3px rgba(59,130,246,.35);
border-color: #93c5fd;
}
/* ---------- Textarea specifics ---------- */
textarea,
.rz-textarea {
resize: vertical;
min-height: 44px;
}
/* ---------- Readonly/disabled tone ---------- */
input[readonly],
textarea[readonly],
select[disabled],
.form-control[readonly],
.form-select[disabled] {
background: #fafafa;
color: #555;
}
/* ==========================================================
Form grids (KEEPING your structure unchanged)
========================================================== */
.form-grid {
display: grid;
gap: .75rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Auto-fit helper for compact blocks */
.form-grid-autofit {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Ensure inner inputs expand */
.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; /* RTL/LTR-safe */
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;
}
/* Subtle dt labels inside overlays */
.overlay__field-label {
color: var(--muted);
}
/* ==========================================================
Checkboxes (inline alignment + optional start padding)
========================================================== */
/* Reusable inline row for checkbox + label */
.inline-check {
display: inline-flex;
align-items: center;
gap: .5rem;
}
/* If you want a little offset when a checkbox sits at the start of a grid line */
.checkbox-start-pad {
padding-inline-start: .25rem;
}
/* Make sure labels next to checkboxes sit nicely */
.inline-check label,
label[for] {
margin: 0;
cursor: pointer;
}
/* ==========================================================
Actions
========================================================== */
.button-row,
.form-actions {
display: flex;
gap: .5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* Compact action rows inside data components */
.rz-data-grid .button-row,
.rz-datatable .button-row {
justify-content: flex-start;
gap: .4rem;
}
/* ==========================================================
Radzen Upload — full width and better spacing
========================================================== */
.rz-upload,
.rz-fileupload {
width: 100%;
}
.rz-upload .rz-fileupload-buttonbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: .25rem 0; /* subtle separation from neighbors */
border: 0; /* avoid theme borders that clash */
}
.rz-upload .rz-button {
min-height: var(--control-height);
border-radius: 10px;
}
/* ==========================================================
Tabs — gentle vertical rhythm in panels
========================================================== */
.rz-tabview .rz-tabview-panels {
padding: .75rem 0;
}
.rz-tabview .rz-tabview-panel > *:first-child {
margin-top: 0;
}
/* ==========================================================
ProgressBar — fill container width
========================================================== */
.rz-progressbar {
width: 100%;
}
/* ==========================================================
Compact dropdown (tf-dd) — works with RadzenDropDown
========================================================== */
.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 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;
}
/* =========================
Containers & Cards
========================= */
.form-container {
width: min(100%, var(--container-max));
margin-inline: auto;
margin-block: 2rem 0;
padding: 0; /* container has no inner padding */
box-sizing: border-box;
background: var(--bg-card); /* matches card to avoid tone seams */
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.form-card {
width: 100%;
margin: 0;
padding: var(--card-pad); /* single source of truth */
background: var(--bg-card);
border: var(--border);
border-radius: inherit;
box-sizing: border-box;
/* no shadow on card itself to prevent “double shadow” look */
}
/* Flush variant (edge-to-edge content) */
.form-card--flush {
padding: 0 !important;
border: 0 !important;
}
/* Generic page container (no chrome) */
.page-container {
width: min(100%, var(--container-max));
margin-inline: auto;
padding: 0;
box-sizing: border-box;
}
/* =========================
Logo block (optional)
========================= */
.logo-container {
display: block;
width: fit-content;
margin-inline: auto;
padding: 12px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.logo-container img {
display: block;
}
.home-logo {
width: 160px;
max-width: 90%;
height: auto;
}
.section-label {
font-weight: 700;
font-size: 1.05rem;
margin: var(--gap-sm) 0;
}
.status-label {
color: var(--muted);
font-size: .9rem;
}
/* =========================
A4 Screen Preview
========================= */
.a4-container {
inline-size: var(--a4-w);
min-block-size: var(--a4-h);
margin-inline: auto;
margin-block: 16px;
background: #fff;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.12);
padding: 0;
box-sizing: border-box;
}
.a4-landscape {
--a4-w: 297mm;
--a4-h: 210mm;
}
.a4-card {
inline-size: 100%;
margin: 0;
padding: var(--a4-content-pad);
background: #fff;
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;
}
@media screen {
body {
background: #f3f4f6;
}
}
/* =========================
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;
}
.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;
}
}
/* =========================
Auth / Login
========================= */
.app-shell.auth-mode .top-row {
display: none;
}
.app-shell.auth-mode main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-page);
padding-inline: 16px;
}
.auth-page {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
background: var(--bg-page);
padding-top: 4rem;
box-sizing: border-box;
}
.auth-container {
width: min(100%, var(--auth-max, 420px));
margin-inline: auto;
padding: 0;
box-sizing: border-box;
}
.auth-card {
width: 100%;
margin: 0;
padding: var(--card-pad);
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-sizing: border-box;
border: var(--border);
}
/* =========================
Seamless Page Option
========================= */
.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));
}
/* =========================
Full-bleed sections
========================= */
.section--full {
width: 100%;
background: var(--bg-surface);
}
.section__inner {
width: min(100%, var(--container-max));
margin-inline: auto;
padding: 24px clamp(16px, 4vw, 32px);
box-sizing: border-box;
}
/* Mobile tweaks */
@media (max-width: 640px) {
.auth-card {
padding: 16px;
}
.form-card {
padding: 16px;
}
}
/* =========================
Interactive focus ring (NEW)
========================= */
button:focus-visible,
[role="button"]:focus-visible,
a.btn:focus-visible,
.rz-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}
/* (Optional) semantic button helpers if you need them */
.button-primary {
background: var(--accent);
color: var(--accent-contrast);
}
.button-danger {
background: var(--danger);
color: var(--danger-contrast);
}
.overlay {
position: fixed;
inset: 0;
z-index: 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));
}
.overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.35);
transition: opacity .18s ease;
}
.overlay__card {
position: relative;
display: flex;
flex-direction: column;
color: var(--text);
background: var(--bg-card);
border: var(--border);
border-radius: var(--overlay-radius,var(--radius));
box-shadow: var(--overlay-shadow,0 10px 30px rgba(0,0,0,.25));
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);
padding: .75rem 1rem;
background: transparent;
}
.overlay__header {
justify-content: space-between;
border-bottom: 1px solid var(--border-color);
}
.overlay__footer {
justify-content: flex-end;
border-top: 1px solid var(--border-color);
}
.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);
padding: .25rem .4rem;
border-radius: 8px;
}
.overlay__close:hover {
background: rgba(0,0,0,.06);
}
.overlay__close:focus-visible {
outline: var(--focus);
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/Procedure grid + resizer header */
.template-grid {
display: grid;
grid-template-columns: var(--template-columns, 1fr);
gap: 0;
}
.resizer-header {
display: grid;
grid-template-columns: var(--template-columns, 1fr);
position: sticky;
top: 0;
z-index: 5;
background: #fff;
border-bottom: var(--border);
}
.col-header {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
padding: 6px 8px;
border-right: var(--border);
user-select: none;
}
.col-header:last-child {
border-right: 0;
}
.col-resizer {
position: relative;
}
.col-resizer::after {
content: "";
position: absolute;
top: 0;
right: -3px;
width: 6px;
height: 100%;
cursor: col-resize;
background: transparent;
}
[dir="rtl"] .col-resizer::after {
right: auto;
left: -3px;
}
.template-row {
display: grid;
grid-template-columns: var(--template-columns,1fr);
border-bottom: var(--border);
}
.textarea-cell {
border-right: var(--border);
padding: 6px;
}
.textarea-cell:last-child {
border-right: 0;
}
.textarea-cell textarea {
width: 100%;
border: 0;
outline: 0;
background: transparent;
padding: 6px;
line-height: 1.5;
min-height: 40px;
}
.template-row:hover {
background: #fcfcfc;
}
.row-controls {
position: sticky;
inset-block-start: 0;
display: flex;
gap: var(--gap-xs);
}
[dir="ltr"] .row-controls {
inset-inline-end: 0;
}
[dir="rtl"] .row-controls {
inset-inline-start: 0;
}
/* 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;
}