.form { display: flex; flex-direction: column; gap: 24px; } .alertError { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #b91c1c; } .section { padding: 28px; background: var(--glass-bg); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); } .sectionTitle { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .col3 { grid-column: span 6; } .col4 { grid-column: span 6; } .fullWidth { grid-column: span 12; } .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); } .field input, .field textarea { min-height: var(--field-height); padding: var(--field-padding-y) var(--field-padding-x); font-size: var(--field-font-size); font-family: var(--font-ui); line-height: 1.4; color: var(--text-primary); background: var(--surface); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: var(--radius-sm); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .field textarea { min-height: 96px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12); } .field input:disabled, .field input.readOnly { opacity: 0.7; cursor: not-allowed; background: rgba(148, 163, 184, 0.12); } .actions { display: flex; justify-content: flex-end; /* Main/save button stays on the physical left */ direction: rtl; } .saveBtn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--field-height); padding: var(--field-padding-y) 18px; font-size: var(--field-font-size); font-weight: 600; color: white; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius-sm); box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; } .saveBtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--primary-rgb) / 0.4); } .saveBtn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } @media (min-width: 1280px) { .col3 { grid-column: span 3; } .col4 { grid-column: span 4; } } @media (max-width: 768px) { .section { padding: 20px; } .col3, .col4, .fullWidth { grid-column: span 12; } }